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 ?

I see it, but it's works only with sveltKit and other. We don't have this tools when use esbuild with Rails... — Matrix
– Matrix, Commented Jul 2, 2022 at 14:22

Alex · Accepted Answer · 2022-07-04 05:12:27Z

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;

answered Jul 4, 2022 at 5:12

Alex

31.3k10 gold badges69 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matrix Over a year ago

Unexpected token     app/javascript/svelte_src.js:10:10:       10 │  8: </script> -->          ╵           ^  9: <script lang="coffee"> 10:   test = ->               ^ 11:     console.log 'test coffee' 12:   test()    The plugin "esbuild-svelte" was triggered by this import

I use node v17.7.1 I can try update...

Matrix Over a year ago

I update node, nothing change... I edit my post and the error message... You keep coffeescript package but don't use it in build script... it's curious coffeescript works for you... I realy don't understand

Alex Over a year ago

@Matrix I'm not sure where esbuild-coffeescript is used, but it doesn't work without it. I can't even get the error that you're getting. It only failed for me on node v12 but with a different error. I tried on Ubuntu and OSX. You must have something else installed that's running with esbuild, like esbuild-coffeescript does. try removing node_modules. Try a smaller build. I see in your error svelte_src.js and DemoSvelteComponent, all these extra files are not needed while trying to debug.

Matrix Over a year ago

it's same file, I just rename for abstract exemple, but nothing change ;) I will try on new app for see

Matrix · Accepted Answer · 2022-07-05 17:23:50Z

0

I don't find the problem, I make new app and copy files, I don't see when exactly that works, but that works ... ^^

May be a bad invisible character was in file?

So It's works fine with include esbuild-coffeescript ...

That stay a mystery for my use case (I try checkout from git and bug don't come back.... realy strange)

answered Jul 5, 2022 at 17:23

Matrix

3,3956 gold badges46 silver badges83 bronze badges

1 Comment

Alex Over a year ago

These are not foolproof, but you can check for funky characters: cat app/javascript/my.svelte | LESSCHARSET="ascii" less or check all files LC_ALL=c grep -Pn "[^[:ascii:]]" app/javascript/**/*.js.

Ivan Grishkov · Accepted Answer · 2023-01-11 04:22:24Z

0

I've met the same problem in my rails app and my solution was using another build script

old:

"build-es": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"

new:

"build": "node ./esbuild.config.js",

answered Jan 11, 2023 at 4:22

Ivan Grishkov

437 bronze badges

Collectives™ on Stack Overflow

how add coffeescript in svelte on Rails 7?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related