enhance-dev / enhance-dev/arc-plugin-enhance

`<my-card>` Component progressive enhancement example from docs yields client-side errors

Open
#129 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
16
Forks
11
PR merge metrics
No merged PRs in 30d

Description

I have a tiny repro repo here: https://github.com/filmaj/enhance-my-card-component

It takes [the Components docs page `@enhance/custom-element` example](https://enhance.dev/docs/conventions/components#%40enhance%2Fcustom-element) and wraps it in the enhance CLI w/ arc-plugin-enhance.

The dev server (`npm start`) output looks fine but when you open the browser dev console, the component attributes are said to be empty. Also the `titleChanged` callback seems to execute before the `connectedCallback`? Does that make sense?

Reproduction steps:

1. Clone https://github.com/filmaj/enhance-my-card-component
2. `npm i` and `npm start`
3. Load the URL
4. Dev server output looks good: `mycard render start, attrs: {"title":"hello world"}` - correct attributes as expected on the server.
5. Open browser console and note the errors, as well as order of the callbacks:
- The first log is the render function, and it has no attributes: ` mycard render start, attrs: {}`
- The second log is `titleChanged` callback: ` mycard titleChanged start`
- An exception occurs next: `Uncaught TypeError: can't access property "textContent", this.heading is undefined` - probably because the connected callback has not fired yet.
- The third log is the connected callback: `mycard connectedCallback start`
6. Does the order of these callbacks make sense?

Not an expert in web components or enhance, but I'm trying to progressively-enhance a component with some client-side JS only after a big client JS library is loaded, so the order of callbacks and availability of attributes is key.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.