Sharpen the knife.

Bulbs Elements combines the document.registerElement spec and the React.js library.

A unidirectional state flow mechanism is also provided.

Builds are processed by Webpack.

Tests run in Karma.

bower install https://github.com/theonion/bulbs-elements.git

You will need files from the dist/ directory.

dist/vendor.bundle.js

This file contains the polyfills and other utilities. You will need this no matter which elements you intend to use.

dist/<element-name>.js

dist/<element-name>.bulbs-cms.js

Elements are built in two flavors. For public consumption and for placement in the editor in bulbs-cms. The cms version does not have dynamic content.

dist/<element-name>.css

Element css should be included AFTER the main css of the application you are installing into. Bulbs elements employ a broad, but low specificity css reset that can be easily overridden. So if you include the element css before the main sitestyles, you'll lose the reset.

Per element custom styling should be included after the bulbs-element styles.

To create a new release: stop any running build scripts and ensure you're on the master branch, then:

$ ./scripts/tag-and-release <versioning-type>

where versioning-type is one of major, minor, or patch. See semver for an explanation of what each of these types of versionings mean.

This will build, version up, and push the dist to a tag identified by the new version.

To create a tag not associated with any particular version run:

$ ./scripts/tag-and-release temp

This will build and push the dist to a tag identified by temp-<last commit hash>-<current branch name>.

Use this in situations where you need to point someone else to a distribution for some analysis or testing.

Prepare your development environment:

$ ./scripts/dev-setup

Use this if linking to bulbs-elements from an implementing property:

$ ./scripts/webpack-dev-build

Use this if developing elements within bulbs-elements locally

$ ./scripts/webpack-dev-server

You can access the examples site now by visiting localhost:8080.

Some components can be used in more than one element. Those components live at lib/bulbs-elements/components

props

• crop: <String> one of: original (default), 16x9, 3x1, 1x1
• imageId: <Number> (required) The betty-cropper image id.

Bulbs Elements comes with code generators to help you develop components.

scripts/generate-dom-element

scripts/generate-react-element

scripts/generate-react-field

scripts/generate-react-component

To do a single test run:

$ npm test

To start continuous testing:

$ npm run karma

You can open the test results in your browser at http://localhost:9876/debug.html.