Can't import another component as a dependency when using a wrapper for @customElement decorator

Help Requests
1

Hello there,

We currently have a decorator that essentially just calls @customElement behind the scene and adds some default dependencies/options to it:

import { type Constructable, type Key } from '@aurelia/kernel';
import { type PartialCustomElementDefinition } from '@aurelia/runtime-html';
import { customElement, shadowCSS } from '@aurelia/runtime-html';

export function xElement(
  name: string,
  opts: Omit<PartialCustomElementDefinition, 'name' | 'shadowOptions' | 'dependencies'> & { style?: string },
  dependencies: Key[] = []
) {
  const { style, ...rest } = opts;

  if (style) {
    dependencies.push(shadowCSS(style));
  }

  return <T extends Constructable>(Type: T, context: ClassDecoratorContext) =>
    customElement({ ...rest, name, shadowOptions: { mode: 'open' }, dependencies })(Type, context);
}

For some reason though, I encounter an issue like this:

// my-app.ts
import { ComponentA } from "./component-a";
import template from "./my-app.html";
import { xElement } from "./x-element";

@xElement("my-app", { template }, [ComponentA]) //<------------
export class MyApp {}

<!-- my-app.html -->
<div>my app</div>

<!-- this does not render at all -->
<!-- even if ComponentA is already added as a dependency -->
<!-- in the associated controller -->
<component-a></component-a>

But when I change the name of the custom decorator into customElement, everything works:

// my-app.ts
import { ComponentA } from "./component-a";
import template from "./my-app.html";
import { xElement as customElement} from "./x-element"; //<-------------

@customElement("my-app", { template }, [ComponentA]) //<------------
export class MyApp {}

<!-- my-app.html -->
<div>my app</div>

<!-- Now this component is rendered -->
<component-a></component-a>

Honestly I’m good with this solution but I’m just wondering why the name of the decorator has to be customElement.

I am currently using Aurelia V2, with Vite and Typescript.

Thank you.

2

There are some steps added to build via Vite plugins to implement Au conventions and I’m guessing it is these that make it work when you rename the import. Are your customizations working (I’m guessing not but in your example they aren’t being used i.e. the style extension)?

Try using CustomElement.define inside your xElement decorator to define the custom element. This is the api that will eventually get called once the transforms for Au conventions are executed by the Vite build plugin.