Adding a JavaScript Brick

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
ℹ️
Pro-tip: copy an existing brick in the blocks/ folder
• Import any brick-specific Javascript libraries needed for the brick
ℹ️
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.
• Register the block in the registerNNN folder of that block type
• In headers.ts bump up the value of EXPECTED_HEADER_COUNT based on the number of bricks you registered
⚠️
If you don't update the EXPECTED_HEADER_COUNT, the generate headers step on CI will fail
• Your brick should now be available for use in the Page Editor

Adding the Brick Header to your local server

1. If you haven't already, bump up the value of EXPECTED_HEADER_COUNT
2. In the pixiebrix-extension project generate headers
Copy

npm run build:scripts
npm run generate:headers

3. Copy the generated headers.json file over to fixtures/headers.json in the pixiebrix-app project
4. On the PixieBrix app project, load the headers
Copy

python manage.py load_headers fixtures/headers.json

Adding the Brick Header to the PixieBrix production server

• Find the CI extension build in GitHub Actions
• Download the headers build artifact
• Copy the generated headers.json file over to fixtures/headers.json in the pixiebrix-app project
• Submit an pixiebrix-app PR with the updated headers.json file