A Dev Tools block and an npm package that can be added to any custom block and that improves the productivity of custom block developers by:
Saving valuable time spent on watching api models using debugging and logging techniques - the block watches all the property values of all the models in the blocks api.
Providing a GlobalConfig editor - so that a block developer can view and edit the global config in development mode and in release mode. For me, it was extremely useful and time saving to be able to:
Clear / remove only specific keys from globalConfig and not all of them.
Have access to globalConfig in release mode too
What it does
- An API explorer block - with support for viewing the property values of the following models, exactly as you get them from the api:
- Active table
- Active view
- Selected record
- Selected field
- An npm package that can be added to any custom block and that in addition to the above provides a GlobalConfig editor - so you can view and edit the block's global config in development mode and in release mode.
How I built it
Challenges I ran into
The biggest challenge was to setup a development environment that automatically loads a block that uses the library whenever the library source code changes and that takes into account that react and react-dom can only exist once and have to be peerDependencies in the library. I accomplished that by:
Creating a grunt watch task that touches the block's index.js whenever microbundle rebundles the library.
Accomplishments that I'm proud of
- The creation of a blocks library development environment that automatically loads the block when the library changes. This can:
Provide guidance to the custom blocks developer community on how to setup similar development environments for their own libraries
Help grow the selection of published open source 3rd party libraries for block developers.
- The fact I created a block and npm package that can benefit the entire custom blocks developer community.
What I learned
How to bundle libraries for use in custom blocks.
How to create a blocks library development environment that automatically loads the block when the library changes.
What's next for the API explorer block and the npm package
Add Links to the relevant blocks api documentation section wherever appropriate.
Add the ability to execute api functions which also shows correct usage through pre-populated code snippets.
Whatever else that can improve the productivity of custom blocks developers.