WebComponent plugin

Help Requests
1

I read about web components plugin here https://aurelia.io/blog/2019/04/02/aurelia-release-notes-april-2019

If I try to follow the readme instructions i end up with the following error in Chrome:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new class_1 (aurelia-web-components.js?34e0:56)
    at CustomElementRegistry.registerBehavior

My main file looks like this:

import {Aurelia} from 'aurelia-framework'
import { CustomElementRegistry } from 'aurelia-web-components';

export function configure(aurelia: Aurelia) {
aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(
      [ 
        PLATFORM.moduleName('DuTest')
      ]);

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

I added the DuTest component files
DuTest.html

<template>
    Test Hello   
</template>

DuTest.ts

export class DuTest
{
}

And my index.ejs looks like this

<body aurelia-app="main" class="ms-Fabric">
    <% if (htmlWebpackPlugin.options.metadata.server) { %>
    <!-- Webpack Dev Server reload -->
    <script src="/webpack-dev-server.js"></script>
    <% } %>
    <du-test></du-test>
  </body>

What could possibly go wrong? :slight_smile:

1 Like
2

Can you help check if you are compiling to es5?

3

I have

"target": "es5"

Is that wrong?
I tried to change it to all other alternatives but no luck.

1 Like
4

You meant it threw even when setting it to es6?

5

Yes, actually es2015, but it should be the same. I will add link to a github project as soon as I can.

Thank you so much for looking into this.

1 Like
6

Here is a clean au -new with additions of the Web Component add-in.

It has the same error as above. And yes I have tried es6 as target.

1 Like
7

Gut feeling is that the distribution used is in es5, making it error as you cannot inherit built-in classes
(specifically super call) using es5 syntax. It’s a common error for web component usage. I think you can fix it in your webpack config via passing dist: 'es2015' option to Aurelia webpack plugin

1 Like
8

SWEET!

Now it works (in Chrome), I have checked in everything if someone else is looking into this.

component

1 Like
9

If I set attributes in HTML it works fine if they are string based.
Boolean types I have managed to set with simple javascript

document.getElementById("l1").setAttribute("disabled", true);

But how can I “bind” or set attributes to objects or functions. I used to use .bind or .one-time to assign an object to an attribute. I browsed through the spec, but I couldn’t get any information there.

Below works great when I use my components with just Aurelia. I would like to set on-click, icon-props and manu-props to functions or objects.

<du-command-bar-button
          text="Create Account"
          on-click.bind="actionButtonClick"
          icon-props.one-time="{ iconName: 'Add' }"
          menu-props.bind="commandMenu"
          split.bind="true"
        ></du-command-bar-button>
2 Likes
10

If the element is used outside of Aurelia template, you do

duElement.split = true
duElement.iconProps = {...}
1 Like