rails-action-view-loader v1.0.5

rails-action-view-loader

Forked from rails-erb-loader.

Embedded Ruby (.erb) webpack loader for Ruby projects that supports ActionView helpers (render, content_for, etc.).

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-action-view-loader --save-dev

yarn

$ yarn add -D rails-action-view-loader

Usage

Add rails-action-view-loader to your rules.

// webpack.config.js

module.exports = {
    module: {
      rules: [
        {
          test: /\.erb$/,
          enforce: 'pre',
          loader: 'rails-action-view-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>
  )
}

Configuration

Options

Can be configured with UseEntry#options.

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

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

Also supports building without Rails:

{
  loader: 'rails-action-view-loader',
  options: {
    runner: 'ruby'
  }
}

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 */

<% # 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/ */

<% # rails-erb-loader-dependencies ../config/locales/ %>

Contribute

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

License

MIT