ember-cli-webcomponents-bundler

Information

Allows to use Web Components using ES6 modules in an Ember application.

Installation

ember install ember-cli-webcomponents-bundler

Usage

The addon options can be configured in config/environment.js.

Example config:

'ember-cli-webcomponents-bundler': {
  modules: true,
  entrypointPaths: [
    'lib/path-one',
    'lib/path-two'
  ]
}

A file named module-imports.js (default value) should exist inside each entry point path with the imports to be bundled. The file name can be configured in entrypointFileName option.

Example entrypoint:

// file: lib/path-one/module-imports.js
import './components/some-component/some-component';
import './components/another-component/another-component';

Output

A bundled file will be generated for each of the entrypointPaths in the directory with the name of the entry point path. For example, the bundle for lib/path-one will be saved in dist/assets/path-one/bundle.js.

Both, the bundle name and the output path can be configured by setting them as outputFileName and outputPath respectively.

Options

entrypointFileName

type: String
default: module-imports.js

Name of the file used as entry point for ES modules inside each entry point path.

outputFileName

type: String
default: bundle.js

Name of the generated bundle for each entry point path.

outputPath

type: String
default: assets

Path where the generated bundle will be saved inside the dist folder.

minify

type: Boolean
default: false (true in production env)

Minifies the bundle.

modules

type: Boolean
default: false

Generates two bundles: one for browsers with ES6 modules support and another for the rest of browsers using the build presets of the app.targets.

entrypointPaths

type: Array
default: []

List of paths where the addon will search for an entry point to generate its corresponding bundle.

autoImport

type: Boolean
default: true

Writes the script tags for the bundle(s) in index.html. You can disable this option if you want to import the scripts on demand.

When this option is set to false, webcomponents.js polyfill is not included in vendor.js, so you must import it explicitly before the bundle.

importStyles

type: Boolean
default: false

Allows to import css files in components.

Example:

import styles from './some-component.css';

The imported files exports the styles in a template literal that can be interpolated in the component's template. The processed styles are transformed with Autoprefixer using the hosting app targets configured in config/targets.js.

dedupe

type: Array
default: []

Module names that should be resolved from the app node_modules instead of another packages requiring them. Helps to prevent bundling the same package multiple times if package is imported from dependencies.

Example:

'ember-cli-webcomponents-bundler': {
  modules: true,
  entrypointPaths: [
    'lib/path-one'
  ],
  dedupe: ['lit-element', 'moment']
}

Contribute

If you want to contribute to this addon, please read the CONTRIBUTING.md.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the MIT License.