libp2p / observer-toolkit

🐣 [WIP] toolkit for building libp2p introspection widgets + a few useful out-of-the-box widgets
https://libp2p.io
MIT License
2 stars 2 forks source link

Add create-widget script, fix package publication and add local dev registry #17

Closed AlanSl closed 4 years ago

AlanSl commented 4 years ago

This PR does three interlinked things:

After this, someone developing a widget can go from an empty directory to a new widget with dev env ready to start with a one-line command:

  1. In a new empty directory (mkdir some-widget && cd "$_"), use NPM’s init script (or yarn create also works): npm init @libp2p-observer/widget
  2. CLI wizard allows optionally changing the widget name (default is directory name), description, author, licence etc through CLI wizard

image

  1. Install dependencies with npm i (after public publication) or npm i --registry="http://localhost:4873/" (while using the local registry described below)
  2. Start storybook with npm run storybook and get developing

image

The widget demo in storybook is hooked up to a data sample complete with shell and other config such as linting already set up matching the main project. The default widget has some example content demonstrating how a typical component looks and allowing the user to easily explore available data:

This also allows people working on the main project to conveniently test publishing before publishing to a public repo:

  1. Spin up verdaccio with npm run start:verdaccio, which uses docker and stores local registry content in gitignored ./verdaccio/storage where published tarballs can be easily inspected
  2. Develop as before using npm run storybook:component-name and npm run start:catalogue for hot-reloading demos
  3. When ready to try out a published package, npm run local-publish
  4. Test everything from the local registry, for example following the above steps but with npm install --registry="http://localhost:4873/" instead ofnpm i`
  5. If there’s a problem with builds and bundles when pulling from the registry, make changes then do npm local-unpublish then npm local-publish to try again.

As well as easy local file storage access to locally published test packages, they can be browsed using the Verdaccio UI:

image

AlanSl commented 4 years ago

Latest commits fix merge conflicts and most tests, for the other tests I need to generate new samples.

AlanSl commented 4 years ago

With the last couple of commits this beast should be ready to review. Tests pass locally, failing on CI because I think GitHub Workflow is for some reason trying to install from the pubishConfig registry, which isn't available until we can do npm run start:verdaccio, which we ideally wouldn't want to do and can't do until the deps are installed anyway...

I don't think any of us actually have time to review today so I'll come back and fix that later and prioritise making more ground on the next PR!

AlanSl commented 4 years ago

Latest commits add in latest Master, fix some issues there with using the new protobuf, and fix CI.

I'll fill in the missing tests and docs when I'm back on Wednesday.

AlanSl commented 4 years ago

As discussed I'll merge this as-is to keep momentum on the design implementation, and I've added tickets to Trello for updating the docs and package readmes and for the test on the create-widget CLI itself