Adding a JavaScript Brick to the pixiebrix-extension
project
- Create a JS file in a
blocks/
subfolder (effects, renderers, transformers) - Use the abstract subclass for the brick type (e.g.,
Effect
,Transformer
, etc.) to create a class definitions for the brick - Import any brick-specific Javascript libraries needed for the brick
- Register the block in the
registerNNN
folder of that block type - In
headers.ts
bump up the value ofEXPECTED_HEADER_COUNT
based on the number of bricks you registered - Your brick should now be available for use in the Page Editor
Pro-tip: copy an existing brick in the
blocks/
folder If the brick is non-core and the dependency is non-trivial, use Webpack's async import functionality to import the dependency so that the dependency is put in its own separate bundle.
If you don't update the EXPECTED_HEADER_COUNT, the generate headers step on CI will fail
Adding the Brick Header to your local server
These instructions are required for using the brick in the Workshop. These steps are optional if you are just using the Brick in Page Editor
- If you haven't already, bump up the value of
EXPECTED_HEADER_COUNT
- In the pixiebrix-extension project generate headers
- Copy the generated
headers.json
file over tofixtures/headers.json
in the pixiebrix-app project - On the PixieBrix app project, load the headers
npm run build:scripts
npm run generate:headers
python manage.py load_headers fixtures/headers.json
Adding the Brick Header to the PixieBrix production server
It's OK if there's headers on the server that don't exist in the extension. The headers are currently just used for validating known brick ids
- Find the CI extension build in GitHub Actions
- Download the headers build artifact
- Copy the generated
headers.json
file over tofixtures/headers.json
in the pixiebrix-app project - Submit an pixiebrix-app PR with the updated
headers.json
file