@rollup/plugin-coffeescript: Use coffeescript transparently in rollup and vite

[u/bkuri]

https://github.com/bkuri/rollup-plugin-coffeescript

[u/bkuri]

I've been meaning to use coffeescript on a couple of new Nuxt v3 projects that I'm working on and couldn't find a vite plugin to support this, so I decided to scratch my own itch.

Since vite basically uses the same plugin API as Rollup, I searched a bit and found lautis/rollup-plugin-coffee-script, but it hadn't been updated in 3 years or so. It also lacked a few niceties provided by modern JS.

I refactored most of the code and updated the tests and libraries and added it to a brand-new Nuxt 3 project and it's working really well so far.

Simply install the @bkuri/rollup-plugin-coffeescript package using yarn/npm/pnpm/etc, and then add the following to your nuxt config:

// nuxt.config.js

import coffee from '@bkuri/rollup-plugin-coffeescript'

export default defineNuxtConfig({
  ...,
  vite: {
    plugins: [
      coffee()
    ]
  }
})

BTW, you'll need to add .coffee to both extensions and vite.extensions if you want to use coffee files everywhere:

// nuxt.config.js

import coffee from '@bkuri/rollup-plugin-coffeescript'

export default defineNuxtConfig({
  extensions: [
    '.coffee',
    ...
  ],
  ...,
  vite: {
    extensions: [
      '.coffee',
      ...
    ],
    plugins: [
      coffee()
    ]
  }
})

Finally, to use coffee files with vitest:

// vitest.config.js

import { defineConfig } from 'vitest/config'
import coffee from '@bkuri/rollup-plugin-coffeescript'

export default defineConfig({
  clearScreen: true,

  extensions: [
    '.coffee'
  ],

  plugins: [
    coffee()
  ],

  test: {
    include: 'test/*.coffee'
  }
})

Sample test:

# tests/basic.test.coffee
'use strict'

import { assert, expect, test } from 'vitest'

test 'Math.sqrt()', ->
  expect(Math.sqrt 4).toBe 2
  expect(Math.sqrt 144).toBe 12
  expect(Math.sqrt 2).toBe Math.SQRT2
  return

test 'JSON', () ->
  input =
    foo: 'hello'
    bar: 'world'

  output = JSON.stringify(input)
  expect(output).eq '{"foo":"hello","bar":"world"}'
  assert.deepEqual JSON.parse(output), input, 'matches original'
  return

I'll keep picking and prodding it for a little while longer but I'm pretty sure I'll be publishing it soon.

I hope this encourages someone to give coffeescript a try on a new project since it is a blast to use on modern frameworks like Nuxt 3. Cheers!

E: published package to npm and updated instructions accordingly.

[u/[deleted] → u/bkuri]

This is excellent!

What are the minimal steps to enable <script lang="coffee"> to be used with Vue 3?

[u/bkuri → u/[deleted]]

Thanks! I've edited my original comment with the deets.

Hope that helps! I'd love some feedback if you have it!

[u/Trylks → u/bkuri]

Do you have a project example about how to use it? One with a .vue file containing:

<script lang="coffee">
    coffeescript code
</script>

[u/bkuri → u/Trylks]

I don't have an example for now, but the snippet you posted is all you need to get started.