how add coffeescript in svelte on Rails 7?

Question

I have a Rails 7 app with esbuild :

esbuild.config.js :

#!/usr/bin/env node

const watch              = process.argv.includes("--watch");
const esbuild            = require('esbuild')
const coffeeScriptPlugin = require('esbuild-coffeescript');
const esbuildSvelte      = require('esbuild-svelte');
const sveltePreprocess   = require('svelte-preprocess');

esbuild
  .build({
    entryPoints: ["app/javascript/all.js"],
    bundle: true,
    outfile: "app/assets/builds/all.js",
    // outdir: "app/assets/builds/",
    plugins: [
      esbuildSvelte({
        preprocess: sveltePreprocess({coffeescript: { bare: true }}),
      }),
      // coffeeScriptPlugin({bare: true}), I TRIED THIS TOO...
    ],
    logLevel: "debug",
    watch: watch
  })
  .catch(() => process.exit(1));

my.svelte :

<script lang="coffee">
  test = ->
    console.log 'test coffee'

  test()
</script>

got an error :

$ yarn build --watch yarn run v1.22.19 $ node ./esbuild.config.js --watch ✘ [ERROR] [plugin esbuild-svelte] Unexpected token

app/javascript/all.js:3:3:
  3 │ 1: 
    ╵    ^

 2: <script lang="coffee">
 3:   test = ->
         ^ 
 4:     console.log 'test coffee' 
 5:   test()

The plugin "esbuild-svelte" was triggered by this import

app/javascript/svelte_src.js:6:32:
  6 │ import DemoSvelteComponent from './svelte/DemoSvelteComponent.svelte'
    ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error [watch] build finished, watching for changes... error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

$ node -v
v18.4.0

package.json :

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.3",
    "esbuild": "^0.14.43",
    "esbuild-coffeescript": "^2.1.0",
    "esbuild-svelte": "^0.7.1",
    "sass": "^1.52.3",
    "svelte": "^3.48.0",
    "svelte-preprocess": "^4.10.7"
  },
  "scripts": {
    "build": "node ./esbuild.config.js"
  }
}

How add coffeescript in svelte with Rails ?

Answer 1

This setup works with node v18.4.0 v16.15.1 v14.19.3. It turned out pretty much identical to what you have, except I don't know what's in your all.js file.

// package.json

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.3",
    "esbuild": "^0.14.43",
    "esbuild-coffeescript": "^2.0.0",
    "esbuild-svelte": "^0.7.1",
    "svelte": "^3.48.0",
    "svelte-preprocess": "^4.10.7"
  },
  "scripts": {
    "build": "node ./esbuild.config.js"
  }
}

// esbuild.config.js

const watch = process.argv.includes("--watch");
const esbuild = require("esbuild");
const esbuildSvelte = require("esbuild-svelte");
const sveltePreprocess = require("svelte-preprocess");

esbuild
  .build({
    entryPoints: ["app/javascript/all.js"],
    outdir: "app/assets/builds/",
    bundle: true,
    sourcemap: true,
    plugins: [
      esbuildSvelte({
        preprocess: sveltePreprocess(),
      }),
    ],
    logLevel: "debug",
    watch: watch,
  })
  .catch(() => process.exit(1));

// app/javascript/all.js

import App from "./my.svelte";
new App({ target: document.body });

<!-- app/javascript/my.svelte -->

<script lang="coffee">
  test = ->
    console.log 'test coffee'
  test()
</script>

Compiles:

$ yarn build --watch
yarn run v1.22.19
$ node ./esbuild.config.js --watch
[watch] build finished, watching for changes...
[watch] build started (change: "app/javascript/my.svelte")
[watch] build finished

and shows up in the browser console:

test coffee                                    my.svelte:1

---

This is a smaller working example, maybe it'll help eliminate the source of the error. It compiles my.svelte file directly and prints out the source.

// package.json
{
  "dependencies": {
    "esbuild": "^0.14.43",
    "esbuild-coffeescript": "^2.1.0",
    "esbuild-svelte": "^0.7.1",
    "svelte": "^3.48.0",
    "svelte-preprocess": "^4.10.7"
  }
}

// esbuild.config.js
require("esbuild").build({
  entryPoints: ["app/javascript/my.svelte"],
  plugins: [require("esbuild-svelte")({ preprocess: require("svelte-preprocess")() })],
}).catch(() => process.exit(1));

$ node --version
v18.4.0

$ node ./esbuild.config.js
import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
function instance($$self) {
  var test;
  test = function() {
    return console.log("test coffee");
  };
  test();
  return [];
}
class My extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, instance, null, safe_not_equal, {});
  }
}
export default My;