Awesome
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
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 rails-erb-loader-dependency
(or -dependencies
) in a javascript comment block will tell webpack to watch these files - causing webpack-dev-server to rebuild when they are changed.
If you don't want the directive to end up in the result, or wish to use it outside of a javascript context, include the javascript comment block inside an erb comment block.
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