Dash Components Archetype (Deprecated)
Note: This repo, and this way of creating Dash Components, has been deprecated. Please use the new Dash Component Boilerplate: https://github.com/plotly/dash-component-boilerplate/
This is a Builder archetype for Dash component suites. It defines build- and test configuration, as well as development scripts and a convenient way to generate a new component suite project with all the necessary boilerplate.
📣Component authors: Subscribe to #40 to be notified of breaking changes 📣
Generating a component suite project
$ npm install -g builder-init $ builder-init dash-components-archetype
Answer the prompts, then:
$ cd [YOUR-COMPONENT-SUITE-NAME] $ npm install
If your component suite project has a
demo/ directory following the same
structure as the
init/demo directory in this archetype, you can
start up a demo development server:
$ npm run demo $ open http://localhost:9000
This lets you see a demo of the rendered components. You have to maintain the
list of components in
To run lint:
$ npm test
TODO: ESLint is not reporting problems #15
Testing your components in Dash
The best way to test your components in the real Dash context is by linking into
dash2 and testing them from there.
Prepare your component suite module by linking and watching for changes
# Symlink module $ npm link # Transpile components to `lib/` and watch for changes $ npm start
Link module into
# In the `dash2/renderer` project directory: $ npm link [YOUR-COMPONENT-SUITE-NAME]
Now you should be able to restart the webpack process (in
npm start), after which webpack will automatically pick up new
changes to the component suite.
Customizing your project
You can override any
npm script in the archetype with your own implementation.
To see the list of supported scripts, run
./node_modules/bin/builder run. For
more details, see Builder Archetypes.
To tag and release a new version of the archetype, follow these instructions.
You might be tempted to add some of these steps to NPM's
methods, but that would interfere with versioning and publishing of the actual
project depending on the archetype, since Builder merges the project
package.json scripts with the archetype's package.json scripts.
# 1. Bump package.json `version` according to [semver] vi package.json # 2. Generate `dev/*` package files node_modules/.bin/builder-support gen-dev # 3. Run tests npm run builder:check # 4. Commit and tag git add package.json dev git commit -m "vx.x.x" git tag -a "vx.x.x" -m "vx.x.x" git push --follow-tags 5. Publish main and dev package npm publish && cd dev && npm publish && cd -
You can test component generation with this library with
npm link and with the absolute file path option of
npm install -g builder-init git clone https://github.com/plotly/dash-components-archetype.git cd dash-components-archetype npm link cd dev npm link cd ../.. builder-init /ABSOLUTE/PATH/TO/dash-components-archetype/ # answer prompts to create new file # Enter new package folder cd new-package # replace with the name of your package from the prompt npm link dash-components-archetype npm link dash-components-archetype-dev npm i