aurelia / aurelia/templating

Custom elements with common base class

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

Description

**Submitting a bug report**

* **Library Version:** aurelia-bootstrapper 2.3.2, aurelia-cli 1.2.3
* **Operating System:** OSX 10.15, Windows 10 (does not matter)
* **Node Version:** 10.15, 13.8
* **NPM Version:** 6.13.7, 6.4.1
* **Webpack Version** webpack 4.27
* **Browser:** Chrome 79 | Firefox 73 (guess, it does not matter)
* **Language:** TypeScript 3.1.2

**Current behavior:**
Several custom elements cannot inherit the same base class (please, do not close issue at this point, at least, read the "Desired behavior" section first).

Repo that reproduces bug: https://github.com/partyzzzan/extend-err-app
Note, the 1st commit represent a bug (`git checkout bug`), the 2nd and the 3rd commits are possible workarounds.

When you open root, `Home` custom element is rendered:
![image](https://user-images.githubusercontent.com/1833263/75357936-32100880-58c3-11ea-85d2-12cfca76775d.png)

Let's click open `foo` - it opens `FooContainer` that in turn contains `FooItem`:
![image](https://user-images.githubusercontent.com/1833263/75358021-4d7b1380-58c3-11ea-80e7-d47d44a66389.png)

Let's get back to `home` and then go to `bar` - it opens `BarContainer` that in turn contains `BarItem`:
![image](https://user-images.githubusercontent.com/1833263/75358189-8b783780-58c3-11ea-8d72-7f87295e8a14.png)

Nothing rendered and no any errors in console:
![image](https://user-images.githubusercontent.com/1833263/75358389-db56fe80-58c3-11ea-9276-745e38ddb376.png)

Both `BarItem` and `FooItem` extends same generic `SomeComponentBase`

But let's get back to foo again:
![image](https://user-images.githubusercontent.com/1833263/75360108-689b5280-58c6-11ea-8a0b-022e5858b4f2.png)

Note, `bar`'s template rendered with `foo`'s model.

Two possible workarounds:
1. do not use inheritance
2. explicitly decorate `FooItem` and `BarItem` with `@customElement` decorator

# Desired behavior

As of #463 (and other issues) I guess, this one should not be closed without fix. The issue is not about the behavior itself, but about the fact, that there is no any errors in console or anything else, no information at all for developers - what happened or what to do.

It would be nice to have something like:

### Use decorators, not inheritance.
(c) https://github.com/aurelia/templating/issues/463#issuecomment-264192090

Contributor guide

Open the contributing guide

Research direction

Start with the linked extend-err-app reproduction, checking out the bug commit and comparing it with the two workaround commits. Reproduce the Home, FooContainer/FooItem, and BarContainer/BarItem navigation described in the report. Done means the common-base-class case provides clear developer-facing information about what happened or what to do.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.