Component not being rendered with Vite + preact-ts template
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- typescript, vite
- Domain
- frontend
Research direction
Start with the Vite configuration using the preact plugin and reproduce the issue from the preact-ts template. Compare the transpiled decorator output with the working version without the plugin; done means the @controller-decorated custom element renders in the HTML while the preact plugin remains enabled.
Written by the indexing model from the issue text.
Description
Using plugins: [ preact() ] in vite.config.js
Tried to create a basic component, as shown in the guide:
import {controller} from '@github/catalyst';
@controller
class TestThingElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello World!';
}
}
Then use it from HTML:
<test-thing></test-thing>
Nothing gets rendered on the page, and there's no errors. However, if I don't use the @controller decorator, or if I remove the preact plugin, it does work. I looked at the transpiled code and noticed this:
let TestThingElement = controller(_class = class TestThingElement2 extends HTMLElement {
Any idea what's going on here? I assume this is causing problems with how Catalyst uses the class name to determine the custom element tag.
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 61
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 8
Getting set up
Starts the project's dev container in your browser, under your own GitHub account.
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from github/catalyst
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 3/5 1-2 days Newbie friendliness 62/100
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
Difficulty 3/5 1-2 days Newbie friendliness 45/100
Similar issues
-
normalizePropName strips `#` characters from Figma property names instead of only the `#id` suffixOpen
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
figma/code-connect#419 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
jeanibarz/knowledge-base-mcp-server#1268 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
Koenkk/zigbee-herdsman-converters#13820 ·
Maintainers usually reply within 2 days
-
A live recovery copy treats a large whole number and text with the same digits as the same valueOpenbug sharing & sync
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
[prefer-expect-resolves] autofix leaves a stray ")" when the awaited expression is parenthesizedOpen
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
jest-community/eslint-plugin-jest#2052 ·