Element-esbuild

Element esbuild tooling for developing Web Components with the Element utility.

Features

• Application - Bundle a single application
• Components - Bundle a shared component library
  • __examples__ components map to the library

Default folder structure for both:

• src/index.html - optional
• src/favicon.svg - optional
• src/components/* - required
  • namespace/ - required
    • app/app.ts - required for app
      • __examples__
        • basic/basic.ts - for component library

element.config.ts

Example configuration for a app.

export default {
  // root hello/app/app.ts
  namespace: 'hello', // for applications
  // optionally include external component packages
  external: ['mynodepackage'],
  copy: [
    { from: 'assets', to: 'assets' }
  ],
}

Example configuration for a component library.

export default {
  repo: 'https://...',
  navigation: [{
    label: 'Components',
    // default group
  }, {
    label: 'Overlays',
    extends: ['MyOverlay'], // group all components extend class
    include: ['MyOverlay'], // also include MyOverlay component
    exclude: ['MyExclude'],
    namespaces: ['my'], // filter to only my-* components
  }],
}

Leaving off the namespace will treat the repo as a component library. Each component will be built individually instead of a single application. The component's __examples__ folders will render as demo.

Changes to the /components/* will sync to the /publish/* directory. This is by design so the publish directory can be linked with the npm link command.