fetlife/rails-view-loader

Rails view files (.html.slim , .html.erb, .html.haml) webpack loader.

rails-view-loader

Rails view files (.html.slim , .html.erb, .html.haml) webpack loader.

Transform Rails view template files to html. Files are render using ApplicationController.render

Table of Contents

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

Install

npm

npm install rails-view-loader --save-dev

yarn

yarn add -D rails-view-loader

Usage

Add rails-view-loader with your favourite html loaders (html-loader, vue-html-loader, etc) to your rules.

// webpack.config.js

module.exports = {
  resolve: {
    modules: [ resolve('app/views'), ... ],
  },
  module: {
    rules: [
      {
        test: /\.html\.(erb|slim|haml)$/,
        use: [
          'html-loader',
          {
            loader: 'rails-view-loader',
          }
        ]
      },
    ]
  }
};

Now you can import your view files in your project, for example:

app/view/session/new.html.erb

<%# /* rails-view-loader-dependencies models/user */ %>
<h2>Login</h2>

<%= angular_form_for(User.new, url: login_path(:user)) do |f| %>
  <%= f.input :login, required: true, autofocus: true %>
  <%= f.input :password, required: true %>

  <%= f.button :submit, "Login" %>
<% end %>

import { Component } from '@angular/core'
import template from 'session/new.html.erb'

@Component({ selector: 'login', template: template })
export class LoginComponent {
}

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.
runner	"./bin/rails runner"	Command to run Ruby scripts, relative to webpack's working directory.
runnerOptions	{}	options for child_process.execFile to call runner
variant	null	ActionPack Variants

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

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

Dependencies

If your view files depend on files in your Rails project, you can list them explicitly. Inclusion of the rails-view-loader-dependency (or -dependencies) comment wrapped in /* */ 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 for ruby files.

/* rails-view-loader-dependencies ../config/config.yml models/user */

Watch a whole directory

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

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

ActionPack Variants

You can set the Action Pack Variants and layout with global config:

{
  loader: 'rails-view-loader',
  options: {
    runner: '../bin/rails runner',
    dependenciesRoot: '../app',
    variant: 'desktop',
    layout: 'some-layout',
  }
}

or with query string:

import template from 'registration/new.html.erb?variant=desktop&layout=some-layout'

ActionPack Variants

Contribute

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

License

MIT