search

lume / classy-solid

Solid.js reactivity patterns for classes, and class components. See https://github.com/lume/element for a Custom Element system built with classy-solid.
MIT License
51 stars 2 forks source link

Error When Using Component Decorator #1

Closed szammyboi closed 1 year ago

szammyboi commented 2 years ago

I have a solid-js project setup with their basic Vite template. I enabled experimental decorators with babel and was able to successfully use the @reactive decorator. However, whenever I try to use the @component decorator I get the following error:

A class descriptor's .kind property must be "class", but a decorator created a class descriptor with .kind "undefined"

I was able to solve the problem by exporting the class and wrapping it inside the component function like such:

export default component(Home) Home being the class name

trusktr commented 2 years ago

Hello, sorry for the late reply, I was unsubscribed to my own repo xD. What version of decorators are you using? I perhaps need to update to the latest spec that Babel supports (which is now itself outdated too I think).

trusktr commented 2 years ago

After testing, it looks like this error happens with decorator mode 2018-09.

Reproduction in Babel repl

For now just use legacy mode. I need to add more tests to handle each mode.

The difficult thing for decorator developers currently (until the decorator spec finally lands and is implemented in JS runtimes) is that there are many permutations of compiler configurations to test in order not to fail in some cases:

  1. TypeScript with useDefineForClassFields: true
  2. TypeScript with useDefineForClassFields: false
  3. Babel with class-properties "loose:true" and decorator mode "legacy"
  4. Babel with class-properties "loose:true" and decorator mode "2018-09"
  5. Babel with class-properties "loose:true" and decorator mode "2021-12"
  6. Babel with class-properties "loose:false" and decorator mode "legacy"
  7. Babel with class-properties "loose:false" and decorator mode "2018-09"
  8. Babel with class-properties "loose:false" and decorator mode "2021-12"

We have to run tests 8 times, each time with a different build configuration, to ensure it works in all. And that didn't include other build tools. I might need to add tests for esbuild decorators for example.

Quite a mess for decorator authors currently, but when they finally arrive natively, it will be pretty awesome.

trusktr commented 1 year ago

Almost done updating classy-solid to stage 3 decorators ( https://github.com/lume/classy-solid/pull/4 ). Legacy modes will no longer be supported, and their implementation removed. 🎉 Release coming soon.