rapid

rapid helps you quickly create web components.

npm install jonathantneal/rapid --save-dev

Assign rapid to the start script in package.json.

{
  "scripts": {
    "start": "rapid"
  }
}

And rapid may be used directly in Node.

const rapid = require('rapid');

Usage

npm start make # project has been created 

The make command creates empty scaffolding for you, containing markup (index.jsx), style (index.css), functionality (index.js), and content (index.json).

npm start dist # project has been updated 

The dist command compiles your project into a dist folder.

npm start live # project is listening for changes... 

The live command listens to change to your project and compiles them on demand.

npm start host # Server running at http://localhost:8080 

The host command creates a server to see your changes. It also watches your project for changes.

npm start link # project is linked... 

The link command links local dependencies so you can edit them directly to push changes to your component.

Options

rapid may be configured from package.json or .config.js.

{
  "main": "my-functionality.js",
  "context": "my-markup-data.json",
  "style": "my-style.css",
  "template": "my-markup.jsx"
}

module.exports = {
    html: {
        from: 'my-markup.jsx',
        data: 'my-markup-data.json'
    },
    css: {
        from: 'my-style.css'
    },
    js: {
        from: 'my-functionality.js'
    }
}

Options may also be set within rapid in package.json.

{
  "rapid": {
    "html": {
      "from": "my-markup.jsx"
      "data": "my-markup-data.json"
    },
    "css": {
      "from": "my-style.css"
    },
    "js": {
      "from": "my-functionality.js"
    }
  }
}

Out of the box, rapid uses rollup to compile JavaScript, PostCSS to compile CSS, and eslit to compile HTML. No plugins for those tools are included by default.

rollup and PostCSS plugins may be configured from package.json or .config.js. Use an array to pass options to a plugin.

{
  "rapid": {
    "css": {
      "plugins": [
        "postcss-import",
        "postcss-cssnext",
        ["cssnano", { "autoprefixer": false }]
      ]
    },
    "js": {
      "plugins": [
        "rollup-plugin-node-resolve",
        ["rollup-plugin-babel", {
          "presets": [
            ["es2015", { "modules": false }]
          ],
          "plugins": [
            "external-helpers"
          ]
        }],
        "rollup-plugin-uglify"
      ]
    }
  }
}