Extract Custom Web Component after build

#1

I am trying to create Web Components from Aurelia components using aurelia-web-components

This is my main.ts file

import {PLATFORM} from 'aurelia-pal';
import { CustomElementRegistry } from 'aurelia-web-components';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(PLATFORM.moduleName('resources/elements/my-element'));

  aurelia
    .start()
    .then(() => {
      const registry = aurelia.container.get(CustomElementRegistry);

      //The following line takes all global resource custom elements and registers them as web components.
      //Once the element is registered, in-page elements will begin rendering.
      registry.useGlobalElements();
    });
}

The Readme states that after running au build (npm run build)

You will find the compiled code in the dist folder, available in module formats: UMD, AMD, CommonJS and ES6.

but all the files are either chunk or bundle scripts along with index.html Is there any configuration I am missing so that it can generate each custom element in a different file?

1 Like
#2

The sentence you referred to means that the build output of the plugin (aurelia-web-component plugin) will be at dist folder, not your code. For your web component code, you can distribute them independently. Does it help make anything clearer?

#3

The sentence you referred to means that the build output of the plugin

Oh ok that part was confusing, so the plugin just converts custom element to work more like web component in existing app.

For your web component code, you can distribute them independently

Can you tell me how to do this? like I have an element my-element with both template and script files, how can i generate my-element.js which i can use in other Aurelia projects or frameworks?

Does it help make anything clearer?

Thanks it does clear a lot of confusion!!

Edit: Fixed styling

1 Like
#4

You don’t need to do anything special, only need to export your element like normal, and the consumer of your code can register that themselves.

Or you can enforce consumption of your plugin via plugin API only, via exporting a single configure function like following example:

import { FrameworkConfiguration } from 'aurelia-framework';
import { MyElement } from './my-element';
import { CustomElementRegistry } from 'aurelia-web-components';

export function configure(config: FrameworkConfiguration) {
  // need to register with `postTask` to ensures all core modules have been initialized
  config.postTask(() => {
    config.get(CustomElementRegistry).register(MyElement);
  });
}

Then in other app, consume your plugin:

import { configure as configureMyElementWebComponent } from 'my-element-module';

...
aurelia.use.plugin(configureMyElementWebComponent);

// or
aurelia.use.plugin(PLATFORM.moduleName('my-element-module'));
#5

This forces us to ship Aurelia code where ever we want to use this component, more like vue-web-component-wrapper

So as long as we play in Aurelia ecosystem there is need to ship extra code other than the component itself.

Thanks for the clarification!!