slim-lang-loader

0.0.9 verified Sat Apr 25 auth: no javascript maintenance

Webpack loader that transforms Slim template files into HTML strings embedded in JavaScript. Version 0.0.9 (latest as of 2019) wraps the Ruby `slimrb` CLI, meaning it requires Ruby and the Slim gem installed globally. Unlike other Slim-to-HTML converters, this is a true Ruby-based conversion, preserving full Slim feature support (e.g., inline Ruby, Slim options). The loader outputs HTML that can be used as string templates or passed to further loaders (e.g., html-loader). Last updated in 2019; no active development, but functional for projects already using Ruby Slim.

Common errors

error Error: spawn slimrb ENOENT ↓

cause Ruby or slim gem not installed, or slimrb not in PATH.

fix

Install Ruby and run 'gem install slim'. Verify 'which slimrb' works.

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Slim file processed without slim-lang-loader or misconfigured rule.

fix

Add { test: /\.slim$/, use: ['slim-lang-loader'] } to webpack config.

error Invalid or unexpected token ↓

cause Loaded from .slim file returns HTML string but code expects a module export.

fix

Use 'html-loader' after slim-lang-loader, or wrap the require/import to handle a string.

Warnings

gotcha Requires Ruby and slim gem installed globally; not a pure Node.js solution. ↓

fix Install Ruby and run 'gem install slim' before building.

gotcha Loader spawns a child process to run slimrb, which can be slow for many files. ↓

fix Use a cache-loader or only for limited use. Consider alternative Slim-to-HTML loaders that are JS-only.

gotcha Output is raw HTML string; must be used with another loader (e.g., html-loader) to be importable as a module. ↓

fix Chain with html-loader or manually wrap the output in module.exports.

gotcha No built-in cache; re-runs slimrb on every build. ↓

fix Use webpack's cache-loader or external caching.

Install

npm install slim-lang-loader

yarn add slim-lang-loader

pnpm add slim-lang-loader

Imports

default

wrong

const html = require('./file.slim') // without html-loader, file content is just HTML string, not a module

correct

import html from 'html-loader!./file.slim'

Loader outputs raw HTML string; typically used with html-loader to export the string as a module.

slim-lang-loader

wrong

{ test: /\.slim$/, loader: 'slim-lang-loader' } // legacy syntax, also works but string form is deprecated in webpack 4+

correct

{ test: /\.slim$/, use: ['slim-lang-loader'] }

Webpack config: use the rule object with 'use' array for clarity. Must be placed before loaders that expect JS or other compiled output.

options

wrong

options: { 'disable_escape': true } // missing 'slimOptions' wrapper

correct

const config = { module: { rules: [ { test: /\.slim$/, use: [ { loader: 'slim-lang-loader', options: { slimOptions: { disable_escape: true } } } ] } ] } }

Slim options must be wrapped in a 'slimOptions' object per the loader's API.

Quickstart

Configures webpack to process .slim files via slim-lang-loader, then imports a Slim template as an HTML string.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.slim$/,
        use: [
          'slim-lang-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.slim']
  }
};

// template.slim
doctype html
html
  head
    title Example
  body
    h1 Hello from Slim!

// app.js
import html from './template.slim';
document.body.innerHTML = html;