github / github/catalyst

Component not being rendered with Vite + preact-ts template

未关闭
#298 7 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
TypeScript
星标
1.4k
派生
59
平均合并
22 小时 12 分钟
30 天内合并 PR
5

描述

Using ` plugins: [ preact() ]` in `vite.config.js`

Tried to create a basic component, as shown in the guide:
```js
import {controller} from '@github/catalyst';

@controller
class TestThingElement extends HTMLElement {

connectedCallback() {
this.innerHTML = 'Hello World!';
}
}
```

Then use it from HTML:
```html

```

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:
```js
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.

贡献指南

打开贡献指南

调研方向

从使用 preact 插件的 Vite 配置开始,并根据 preact-ts 模板复现该问题。将转译后的 decorator 输出与不使用插件的正常版本进行比较;当启用 preact 插件的同时,使用 @controller 装饰的自定义元素能够渲染到 HTML 中时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript, vite
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。