❤
npm
Sign UpSign In

rollup-config-webcomponent
TypeScript icon, indicating that this package has built-in type declarations

0.3.4 • Public • Published

rollup-config-webcomponent

Published on npm

This config is not the one config to rule them all, but 'my' config for compiling and bundling custom elements based on lit-element. Youre mileage might vary, but if your starting fresh, this might be of great help or some of the source code. Drop a line for improvements.

The purpose of this config is to have a single import in your project for all plugins and configs. When dealing with mono-repo with multiple packages, plugins and configs, then things can get out of hands, even with lerna.

This config is environment controlled, example rollup -c --environment bundle,compress,es:6 will create a bundle and compressed javascript file, huh? but also compress the inline css and optimize svg.

issues

// rollup.config.js
import createConfig from "rollup-config-webcomponent";
export default createConfig({
 name:'foo', 
 input:"./src/index.ts"
});

🛠WARNING: this is a living config and will change over time!

☠️ Not yet testet in IE(es5), but should work, might need regenetive runtime.

🧁 90%++ support add webcomponent polyfill

Options

name :string

input :string

ecma :number?

plugin:Object?

resolve @rollup-plugin-node-resolve

style @rollup-plugin-lit-html-style

typescript @rollup-plugin-typescript2

  • when --bundle declaration is set to false, it is recomended to not provide this option in your tsconfig.json
  • target default to esnext since babel do all the transpiling. might change in future to enforced

Enviroment

rollup -c --environment compress,bundle,ecma:[5|6]

compress

when enabled, this will apply plugin cssnano to style and terser to javascript

bundle

When enabled files are output to ./dist and all imports are included, when disabled package.depencies + tslib are marked as external.

ecma :5|6 defaul:6 (esmodules === 6)

Example

// src/index.ts
import { 
  customElement, 
  eventOptions,
  html,
  LitElement,
  property,
  TemplateResult
} from "lit-element";
 
@customElement("foo-bar" as any)
class Bar extends LitElement {
 
 @property({})
 label: string = "click me!";
 
 @eventOptions({})
 _onClick() {
  windowm.alert('you clicked me!');
 }
 
 render(): TemplateResult {
  return html`
   <button @click="${this._onClick}">
    ${this.label}
   </button>
  `;
 }
}
/* index.scss */
button {
 color: white;
 background-color: green;
}
<!-- demo/index.html -->
<html>
 <head>
  <script src="foo.mjs" type="module"></script> 
 </head>
 <body>
  <foo-bar label="foo me"></foo-bar>
 </body>
</html>
// rollup.config.js
import createConfig from "rollup-config-webcomponent";
const config = {
 name: 'foo',
 input: "./src/index.ts"
};
export { createConfig, config };
export default createConfig(config);
// rollup.demo.config.js
import { createConfig, config }
export default createConfig({...config,dir:'demo'});
rollup -c rollup.demo.config.js --environment bundle
http-server demo # or your favourite server 

Readme

Keywords

Package Sidebar

Install

npm i rollup-config-webcomponent

Repository

github.com/odinr/rollup/tree/master/packages/config-webcomponent

Weekly Downloads

1

Version

0.3.4

License

ISC

Unpacked Size

15.1 kB

Total Files

19

Last publish

Collaborators

  • _odin_
Try on RunKit
Report malware