Decorators: Invalid or unexpected token

[trusktr]

For example, try pasting this in:

import {reactive, signal} from 'classy-solid'
import {createEffect, batch} from 'solid-js'

@reactive
class MyClass {
  @signal foo = 1
  @signal bar = 2
}

const o = new MyClass()

createEffect(() => {
  console.log(o.foo, o.bar) // initially logs "1 2"
})

batch(() => {
  o.foo++
  o.bar++
})
// logs "2 3"

[bigmistqke]

The current demo has

babelTransform({
  plugins: [['proposal-decorators', { version: '2023-11' }]],
  presets: ['babel-preset-solid@1.8.22'],
})

as its babel-transform configuration. With this applied the following code works as expected:

import {reactive, signal} from 'classy-solid'
import {createEffect, batch} from 'solid-js@1.8.22'

@reactive
class MyClass {
  @signal foo = 1
  @signal bar = 2
}

const o = new MyClass()

createEffect(() => {
  console.log(o.foo, o.bar) // initially logs "1 2"
})

batch(() => {
  o.foo++
  o.bar++
})
// logs "2 3"

Notice that I currently had to hard set both babel-preset-solid and solid-js to 1.8.22, otherwise the decorators got compiled but it wasn't reactive, possibly due to a version mismatch? The latest version of babel-preset-solid also causes issues when importing from esm.sh, but that is a separate issue.