aurelia / aurelia/templating

Templating creates unwanted custom elements

Open
#549 15 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
113
Forks
101
PR merge metrics
No merged PRs in 30d

Description

I am editing this issue, the original text is below.

I originally thought that the root of the problem was Aurelia creating custom elements from exports without convention nor decorator. But from comments below it was clarified that this is actually supported in some scenarios.

With this in mind, I now think that the root of the problem is that Aurelia should _not_ register a local custom element when instantiating a dialog like so:
```js
import { MyDialog } from 'dialogs/whatever';
dialogService.open({ viewModel: MyDialog });
```
This code should _not_ result in the registration of a `` custom element.

It is mostly harmless, but if your exported name clashes with other tags it's breaking the app.

----

From aurelia/dialog#283:
When loading a _component_ (e.g. a view model for a dialog, a page to be loaded in the router, etc.), `aurelia-templating` falls back to creating a custom element based on the exported component name.

I think the logic for that is here:
https://github.com/aurelia/templating/blob/7693dbd65e59e428e4052922920145b76240f3cf/src/module-analyzer.js#L253

Now consider what happens if I choose to name my ViewModel `export class A { }`. When used by a dialog or router, it will create a `` custom element, which is of course unwanted and will trigger bugs if there are links in the template.

Expected behavior:
Only classes decorated with `@customElement` or following a convention (by default ending in `CustomElement`) should create custom elements.

Contributor guide

Open the contributing guide

Research direction

Start in src/module-analyzer.js around the linked logic at line 253, then trace how a component passed to dialogService.open is analyzed. Confirm the behavior for an exported MyDialog class and for classes using @customElement or the default CustomElement convention. Done means an undecorated, non-conventional dialog view model no longer registers a local custom element.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.