compack

v0.1.10

Published

4 years ago

A bundler for Web Components

0High
0Medium
0Low

rajasegar

web components bundler manager

compack

An awesome bundler for Web Components

Introduction

compack is a bundler for Web Components. The main purpose is separation of concerns for your Web components, so that you can create your Presentation(CSS), Content(HTML) and Behaviour(Javascript) parts of your component separately and finally bundle them together into a single HTML file, which you can import in your web applications to include your components.

Installation

$ npm install -g compack

Getting Started

1. Create component boilerplate

$ compack --create my-component

2. Install required packages

$ cd my-component && npm install

3. Build your component

HTML => my-component.html
CSS => my-component.css
JS => my-component.js

4. Bundle your component using

$ compack

After running compack you will get an HTML file with all your component assets i.e., css, html and javascript bundled together.

my-component.html

Watch option

$ compack --watch

To continously monitor changes in you component files/assets and rebuild the component automatically.

Live reload server for development

$ compack --server

To start a development server which automatically watches, builds and serves your component in a typical web-server fashion. Start the server using this option and listen to your http://localhost:8181 port in your browser, which reloads automatically whenever your component is changed.

Using your component with HTML imports

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Testing My Component</title>
        <!-- Optional - Include webcomponents polyfill for cross-browser support -->
        <script src="webcomponents.min.js"></script>
        <link rel="import" href="my-component.html">
    </head>
    <body>
        <my-component></my-component>
    </body>
</html>

Component Architecture

my-component-library
|--components
|   |--my-component1
|   |    |--my-component1.html
|   |    |--my-component1.css
|   |    |--my-component1.js
|   |--my-component2
|   |    |--my-component2.html
|   |    |--my-component2.css
|   |    |--my-component2.js
|--component.json
|--my-component1.html
|--my-component2.html

Config file for your component assets

component.json

{
    components:[
        {
            name: "fp-table",
            css : {
                fileName: "component/fp-table/fp-table.css",
                compress: false
            },
            html: "component/fp-table/fp-table.html",
            js: { 
                fileName: "component/fp-table/fp-table.js",
                compress: false
            },
            imports: [ "search-bar","product-table"],
            es6: false
        }
    ]
}

Bundling multiple components at the same time

{
    components:[
        {
            name: "fp-table",
            css : "component/fp-table/fp-table.css",
            html: "component/fp-table/fp-table.html",
            js: "component/fp-table/fp-table.js",
            imports: [ "search-bar","product-table"]
        },
        {
            name: "search-bar",
            css : "component/search-bar/search-bar.css",
            html: "component/search-bar/search-bar.html",
            js: "component/search-bar/search-bar.js",
            imports: []
        },
        {
            name: "product-table",
            css : "component/product-table/product-table.css",
            html: "component/product-table/product-table.html",
            js: "component/product-table/product-table.js",
            imports: []
        }
    ]
}

How your components are bundled together

    <template id="${component.name}">
        <style>
            ${css}
        </style>
        ${html}
    </template>
    <script>
        ${js}
    </script>

Using ES6 to write your components

$ compack --create my-component --es6

Using CSS Preprocessors

Following are the list of CSS Preprocessors supported by compack:

[SASS] (http://sass-lang.com/)
[LESS] (http://lesscss.org/)
[Stylus] (http://stylus-lang.com/)

Using SASS engine for your component styles

$ compack --create my-component --css sass

Using LESS engine for your component styles

$ compack --create my-component --css less

Using Stylus engine for your component styles

$ compack --create my-component --css stylus

Using HTML Template engines

Following are the list of HTML Templating libraries supported:

[JADE] (http://jade-lang.com/)
[EJS] (https://github.com/mde/ejs)
[HAML] (http://haml-lang.com/)

Using JADE templating for your components

$ compack --create my-component --html jade

Using EJS templating for your components

$ compack --create my-component --html ejs

Using HAML templating for your components

$ compack --create my-component --html haml

Features

Separation of concerns by creating separate assets
Write your components using the new ES6 syntax
Use SASS, LESS or Stylus to preprocess your component css
Use JADE, EJS or HAML for templating in your component
Bundle one or more components simultaneously
Option(s) to specify your component dependencies (i.e., if your components depend on other components)
Watch option to build your components automatically when one of its assets(html,css, js) changes
Development web server with watch and live-reload options integrated from within
More coming soon...

Command Line Options

This bundler can also be further configured with the following command line flags.

-h, --help                      output usage information
-v, --version                   output the version number
-c, --create <component-name>   Create a boilerplate for your component
    --css  <css-preprocessor>   Set your preferred CSS Preprocessor engine (e.g: sass, less, stylus)
    --html <html-templating>    Set your preferred HTML Templating engine (e.g: jade, ejs, haml)
    --es6                       Use ES6 to write your component
-w, --watch                     Watch option to monitor changes in you component assets and rebuild 
-s, --server                    Development server with watch and live-reload options automatically set

Release notes

Version

Release notes

Version 0.1.9

New Feature: Watch option for continous build
New Feature: Development server with live-reloading code
New Feature: Option to compress component js with uglify-js
Bug fix: Component JS template previously registered hard-coded "my-component"
Development: Component templates removed completely and moved code to the library
Development: compressed option for css files renamed to compress in component.json
Breaking: component.json format to accomodate compress option for js files

License

[MIT] (https://github.com/rajasegar/compack/blob/master/LICENSE)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

compack

Introduction

Installation

Getting Started

1. Create component boilerplate

2. Install required packages

3. Build your component

4. Bundle your component using

Watch option

Live reload server for development

Using your component with HTML imports

Component Architecture

Config file for your component assets

component.json

Bundling multiple components at the same time

How your components are bundled together

Using ES6 to write your components

Using CSS Preprocessors

Using SASS engine for your component styles

Using LESS engine for your component styles

Using Stylus engine for your component styles

Using HTML Template engines

Using JADE templating for your components

Using EJS templating for your components

Using HAML templating for your components

Features

Command Line Options

Release notes

Version

Release notes

Version 0.1.9

License