aaronkaka / commonjs-react-components

POC for CommonJS-wrapped evented web components, powered by React.

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!

CommonJS React Components

Goals

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.

Tool Chain

Install NodeJS. This automatically installs npm.

Make the webpack command available:

npm install webpack -g

Playtime

Can I see the project working before I change anything?

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.

Live Reload

Hot module replacement is activated, so that any saved change to the watched source automatically reloads the browser page.

Test

The project is wired to unit test with the Jest framework.

npm test

Consume

The card component is built for use with Bootstrap v3.

Script Include

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'
    })
);

How do I require() it into my consuming application?

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' }
    ]
  }
};