Skip to content
Bundles Web Components using ES6 modules
JavaScript HTML CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Initial development (#1) Jul 10, 2019
lib feat: allow to import styles from components Jul 16, 2019
node-tests feat: allow to import styles from components Jul 16, 2019
tests
.commitlintrc.js chore(files): update common files Jun 21, 2019
.editorconfig chore(files): update common files Jun 21, 2019
.ember-cli Initial development (#1) Jul 10, 2019
.eslintignore chore(files): update common files Jun 21, 2019
.eslintrc.js Initial development (#1) Jul 10, 2019
.gitignore chore(files): update common files Jun 21, 2019
.huskyrc.js chore(files): update common files Jun 21, 2019
.nycrc.json Initial development (#1) Jul 10, 2019
.releaserc Initial development (#1) Jul 10, 2019
.template-lintrc.js
.travis.yml Initial development (#1) Jul 10, 2019
.watchmanconfig Initial Commit from Ember CLI v3.5.0 Jun 21, 2019
CHANGELOG.md chore(release): 1.1.1 [skip ci] Dec 26, 2019
CONTRIBUTING.md chore(files): update common files Jun 21, 2019
LICENSE.md chore(files): update common files Jun 21, 2019
README.md feat: allow to import styles from components Jul 16, 2019
ember-cli-build.js Initial development (#1) Jul 10, 2019
greenkeeper.json chore(files): update common files Jun 21, 2019
index.js feat: allow to import styles from components Jul 16, 2019
package-lock.json chore(package): update lockfile package-lock.json Jan 9, 2020
package.json chore(package): update husky to version 4.0.2 Jan 9, 2020
testem.js chore(files): update common files Jun 21, 2019

README.md

ember-cli-webcomponents-bundler

Build Status GitHub version NPM version Dependency Status codecov Greenkeeper badge Ember Observer Score

Information

NPM

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.

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.

You can’t perform that action at this time.