ulisses-alves / rollup-plugin-elm

Import .elm files as ES6 modules.

rollup-plugin-elm

Import .elm (Elm 0.19) files as ES6 modules.

Usage

import Elm from './App.elm'

const root = document.getElementById('app')
const app = Elm.App.init({ node: root })

rollup.config.js

import elm from 'rollup-plugin-elm'

export default {
  input: 'src/index.js',
  output: {
    file: `dist/bundle.js`,
    format: 'iife'
  },
  plugins: [
    elm({
      exclude: 'elm_stuff/**'
    })
  ]
}

Check the examples/ folder for a complete example.

Options

{
  include: [],
  exclude: [],
  compiler: {
    // Enable/Disable compiler optimizations (default: false)
    optimize: true,
    // Enable/Disable debug mode (default: false)
    debug: false,
    // Path to Elm executable (default: elm)
    pathToElm: path.resolve(__dirname, 'node_modules/elm/bin/elm')
  }
}

Elm 0.18

Elm 0.18 is supported up to version 1.0.6 of this package. It can installed by running:

npm install --save-dev [email protected]

rollup-plugin-elm's Issues

Error: Cannot find module 'babel-runtime/regenerator'

Hello and thanks for your work on this plugin.

I got it to work and so far it seems to do it's job, but at first after installing it I got following error:

[!] Error: Cannot find module 'babel-runtime/regenerator'
Error: Cannot find module 'babel-runtime/regenerator'
    at Function.Module._resolveFilename (module.js:513:15)
    at Function.Module._load (module.js:463:25)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/.../node_modules/rollup-plugin-elm/dist/rollup-plugin-elm.cjs.js:1:516)
    at Module._compile (module.js:612:30)
    at Module._extensions..js (module.js:623:10)
    at Object.require.extensions..js (/.../node_modules/rollup/bin/rollup:2777:17)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)

Adding babel-runtime to my project fixed the problem:

npm install --save-dev babel-runtime

It's not clear to me why this babel-runtime/regenerator is even needed, but perhaps it should be a dependency of this project.

Anyway thanks and keep up your good work :-)

Issue setting the plugin

Hi, I am trying this plugin for the first time. And I am having an issue that this plugin is not been called by the rollup config.

The error that I am getting is

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/elm/HelloWorld.elm (1:7)
1: module HelloWorld exposing (main)
          ^
2:
3: import Html exposing (Html, text)
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Please see below for my setup detail.

Here is my /rollup.config.js file

import {terser} from 'rollup-plugin-terser';
import html from '@web/rollup-plugin-html';
import sass from 'rollup-plugin-sass';
import path from 'path'
import elm from 'rollup-plugin-elm'

const production = !process.env.ROLLUP_WATCH;

export default [
	{
		input: 'src/sass/main.scss',
		output: [{file: 'dist/css/bundle.js'}],
		plugins: [sass({output: true})]
	},
	{
		input: 'src/js/main.js',
		output: [
			{
				file: 'dist/js/bundle.js',
				format: 'cjs',
				plugins: [elm({
					exclude: 'elm_stuff/**',
					pathToElm: path.resolve(__dirname, 'node_modules/elm/bin/elm')
				})]
			},
			{
				file: 'dist/js/bundle.min.js',
				format: 'iife',
				name: 'version',
				plugins: [terser(),elm({
					exclude: 'elm_stuff/**',
					pathToElm: path.resolve(__dirname, 'node_modules/elm/bin/elm')
				})]
			}
		]
	},
	{
		input: 'src/index.html',
		output: [
			{
				dir: 'dist'
			}
		],
		plugins: [
			// add HTML plugin
			html({
				minify: true,
				extractAssets: false
			}),
		]
	}
];

Here is my /src/js/main.js

import Elm from '../elm/HelloWorld.elm'

Elm.HelloWorld.init({
  node: document.getElementById('main')
})

Here is my /src/elm/Helloworld.elm

module HelloWorld exposing (main)

import Html exposing (Html, text)

main : Html msg
main =
    Html.text "Hello, World!"

Here is my /elm.json

{
    "type": "application",
    "source-directories": [
        "src/elm"
    ],
    "elm-version": "0.19.1",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

Here is my /package.json file

{
  "dependencies": {
    "@web/dev-server": "^0.1.17",
    "@web/rollup-plugin-html": "^1.7.0",
    "bulma": "^0.9.2",
    "concurrently": "^6.2.0",
    "elm": "^0.19.1-5",
    "rollup": "^2.47.0",
    "rollup-plugin-elm": "^3.0.0",
    "rollup-plugin-sass": "^1.2.2",
    "rollup-plugin-terser": "^7.0.2"
  },
  "scripts": {
    "build": "rollup --config",
    "start": "concurrently --kill-others --names rollup,web-dev-server \"rollup -w --config\"  \"web-dev-server\""
  }
}

Please help recommend how to debug the error that I am facing. From what I see it looks like this plugin is not been called eventhough I have added as instructed on the README.

Watch for dependencies

It would be great to make Rollup watch for Elm dependencies. Once rollup/rollup#2259 lands it shouldn't be very difficult using findAllDependencies from rtfeldman/node-elm-compiler.

I may give it a shot as Elm + CoffeeScript 2 + Rollup is becoming my new favorite setup. Let's hope the Rollup PR is merged soon 😄

Update to work with Rollup 2.x

Will this work ok with Rollup 2.x? If so can we get that bumped?

Support for Rollup 3.x.x

It would be great to use this library with the latest release 3.x.x of Rollup.