sveltejs / svelte-preprocess

A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
MIT License
1.76k stars 151 forks source link

reactive in coffeescript not work #491

Closed gcxfd closed 2 years ago

gcxfd commented 2 years ago

$: y = x * 2 not work

<script lang="coffee">
import '~/styl/init.styl'
import logo from ':/svg/logo.svg'
import Counter from './lib/Counter.svelte'

x = 1

$: y = x * 2

click = =>
  ++x
  return
</script>

<template lang="pug">
main
  img(src="{logo}" alt="logo")
  button(on:click="{click}")
    +if('x%2') if x%2
      +else() else
  h2 x {x} y {y}
  Counter
</template>

<style lang="stylus">
button
  width 8rem
  font-size 32px

main
  justify-content center
  align-items center
  flex-direction column
  display flex

img
  height 16rem
  width 16rem
</style>
mrkishi commented 2 years ago

Some info after light digging: Coffeescript seems to compile "labels" into object expressions.

This seems unlikely to be fixable on this end as there are no compiler options to change that behavior.

Conduitry commented 2 years ago

Searching online for "svelte coffeescript", I just found https://github.com/Leftium/svelte-coffeescript-pug/blob/master/src/App.svelte which has a possible syntax for that will compile into the JS that Svelte needs for reactive blocks. It looks like it involves jumping out to JS syntax within CoffeeScript.

In short, I would not at all recommend writing Svelte components with CoffeeScript.

I'm going to close this issue, as this is functioning as (unfortunately) designed.

gcxfd commented 2 years ago

@mrkishi @Conduitry

I wrote a patch https://github.com/rmw-lib/coffee-label-patch make coffeescript support label

I create pull request there https://github.com/sveltejs/svelte-preprocess/pull/493

it work , i release a preview in @rmw/svelte-preprocess

yarn add -D @rmw/svelte-preprocess @rmw/coffee-label-patch

demo video https://www.loom.com/share/a45ffe7eeecb4115ad335b7db21f9b04?from_recorder=1&focus_title=1

the code for demo video https://github.com/rmw-lib/svelte-pug-stylus-coffee