The ES2015 (ECMAScript 6) spec has been ratified, and implementation of these features in major JavaScript engines is underway now - including ES6 Modules, which is the native solution to the aims of CommonJS Modules.
As a result, development of this project will now happen at es6-react-component. Thank you for following me there!
A proof-of-concept inspired by this post.
- Use CommonJS Modules to build and share responsive UI components
- Abstract away the component's implementation without leakage
- No component API, event all interaction
- External styling is bundled with the component, simply using
require
statements - Component-specific styling is scoped to the component
The last one is the trick; at present I resorted to applying css selectors until there is a better (and practical) solution.
Install NodeJS. This automatically installs npm.
Make the webpack command available:
npm install webpack -g
After cloning the repo:
cd commonjs-react-components
npm install
npm run dev
Once the above is complete, open a browser tab to localhost:8080.
Hot module replacement is activated, so that any saved change to the watched source automatically reloads the browser page.
The project is wired to unit test with the Jest framework.
npm test
The card component is built for use with Bootstrap v3.
In the case of a script include for build/dist.card-component.js, build the minified version:
> webpack -p
In the consuming app, event the script include target container:
document.body.dispatchEvent(
new CustomEvent('scriptinclude', {
detail: '.container'
})
);
Install the published component from your favorite npm registry:
> npm i commonjs-react-components --save
Example javascript:
var Cardstrap = require('commonjs-react-components');
Cardstrap('.container');
Then build the required bundle with webpack, similar to this webpack.config.js:
module.exports = {
entry: ['./eventing.js'],
output: {
path: './',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'jsx-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};