@dylan/balm

Balm

Balm is a component file format that allows the inlining of blocks (template, style, script, and a server side javascript handle). These blocks are extracted, bundled, import paths modified, styles and markup optionally scoped, and written to the hidden balm folder for use in esbuild bundling. This is balm for Dylan's beard.

Features

• Collocation
• Scoped styles
• Dynamically built bundles in balm blocks
• Memory cached compiled templates
• HMR for css, js, template, and server side javascript handles
• Bundling via esbuild

Install

npm install @dylan/balm

Usage

const dylan = require('dylan');
const { resolve } = require('path');
const root = resolve('app');
const engine = {
  name: '@dylan/balm',
  opts: {
    root,
    origin: 'https://statics.website.com',
    watch: process.env.NODE_ENV === 'development',
    bundle: process.env.NODE_ENV === 'development',
    browserslist: [
      'last 2 versions',
      '> 2%'
    ],
    components: {
      renderer: 'clonedAndMergedLocalsComponent',
      shortcut: [
        {
          dir: root + '/components',
          alias: (name) => name
        },
        {
          dir: root + '/subdomains/hub/components',
          alias: (name) => `hub.${name}`
        }
      ]
    },
    esbuild: {
      entryPoints: [
        'app/assets/styles/app.css',
        'app/assets/scripts/app.js',
        'app/assets/statics.css'
      ]
    }
  }
};

const app = dylan({ engine });