rails-erb-loader

Embedded Ruby (.erb) webpack loader for Ruby projects.

Compiles Embedded Ruby template files in any Ruby project. Files are built using either the Erubis or ERB gem.

Table of Contents

• Install
• Usage
• Configuration
  • Options
  • Dependencies
• Contribute
• License

Install

npm

$ npm install rails-erb-loader --save-dev

yarn

$ yarn add -D rails-erb-loader

Usage

Add rails-erb-loader to your rules.

// webpack.config.js

module.exports = {
    module: {
      rules: [
        {
          test: /\.erb$/,
          enforce: 'pre',
          loader: 'rails-erb-loader'
        },
      ]
    }
  }
};

Now you can use .erb files in your project, for example:

app/assets/javascripts/UserFormFields.jsx.erb

/* rails-erb-loader-dependencies models/user models/image */

export default function UserFormFields() {
  return (
    <div>
      <label htmlFor='avatar'>
        Avatar
      </label>
      <ImageField id='avatar' maxSize={<%= Image::MAX_SIZE %>} />
      <label htmlFor='name'>
        Name
      </label>
      <input
        id='name'
        type='text'
        maxLength={<%= User::MAX_NAME_LENGTH %>}
      />
      <label htmlFor='age'>
        Age
      </label>
      <input
        id='age'
        type='number'
        min={<%= User::MIN_AGE %>}
        max={<%= User::MAX_AGE %>}
      />
    </div>
  )
}

Spring

In case you use gem spring
You might need customization on the loader

Example from a reply in #47

/* put this in file like /config/webpack/loaders/erb.js */
/* global process:false */

module.exports = {
  test: /\.erb$/,
  enforce: "pre",
  exclude: /node_modules/,

  use: [{
    loader: "rails-erb-loader",
    options: {
      runner: (/^win/.test(process.platform) ? "ruby " : "") + "bin/rails runner",
      env: {
        ...process.env,
        DISABLE_SPRING: 1,
      },
    },
  }],
}

Configuration

Options

Can be configured with UseEntry#options.

Option	Default	Description
dependenciesRoot	"app"	The root of your Rails project, relative to webpack's working directory.
engine	"erb"	ERB Template engine, "erubi", "erubis" and "erb" are supported.
runner	"./bin/rails runner"	Command to run Ruby scripts, relative to webpack's working directory.
timeoutMs	0	Timeout for the runner task in milliseconds. 0 is no timeout. Set this if you want a hanging runner to error out the build.
env	process.env	Environment variables to be passed to runner.

For example, if your webpack process is running in a subdirectory of your Rails project:

{
  loader: 'rails-erb-loader',
  options: {
    runner: '../bin/rails runner',
    dependenciesRoot: '../app',
  }
}

Also supports building without Rails:

{
  loader: 'rails-erb-loader',
  options: {
    runner: 'ruby',
    engine: 'erb'
  }
}

Dependencies

If your .erb files depend on files in your Ruby project, you can list them explicitly. Inclusion of the rails-erb-loader-dependency (or -dependencies) comment will tell webpack to watch these files - causing webpack-dev-server to rebuild when they are changed.

Watch individual files

List dependencies in the comment. .rb extension is optional.

/* rails-erb-loader-dependencies models/account models/user */

Watch a whole directory

To watch all files in a directory, end the path in a /.

/* rails-erb-loader-dependencies ../config/locales/ */

Contribute

Questions, bug reports and pull requests welcome. See GitHub issues.

License

MIT