mithril-template

0.0.1 verified Fri May 01 auth: no javascript abandoned

HTML to Mithril hyperscript transpiler that converts HTML templates into Mithril's virtual DOM hyperscript (m()) calls. Version 0.0.1, early stage, no formal release cadence. Supports interpolation (mustache syntax), binding attributes with colon prefix, component embedding (kebab-case to camelCase), and directives (if/elseif/else/for). Differentiates from similar tools by its directive system and non-standard component naming conventions. Limited documentation and no ongoing maintenance observed.

Common errors

error Cannot find module 'mithril-template' ↓

cause Package not installed or import path wrong.

fix

Run 'npm install mithril-template' and use require('mithril-template').

error Unexpected token 'export' ↓

cause Attempted ES import on CommonJS module.

fix

Use const mithrilTemplate = require('mithril-template') instead of import.

error Compile is not a function ↓

cause Assuming named export instead of default.

fix

The default export is the compile function. Use const compile = require('mithril-template').

Warnings

breaking No ES module support; only CommonJS require() works. ↓

fix Use require() instead of import.

gotcha Component tags must end with '-component' and cannot be self-closing. ↓

fix Write <custom-component></custom-component> not <custom-component />.

gotcha Mustache interpolation {} cannot be used inside HTML tag definitions. ↓

fix Use binding attribute syntax with colon, e.g., :key="foo" instead of key="{{ foo }}".

gotcha Literal { and } characters in templates must be escaped using interpolation workaround. ↓

fix Use {{ '{' }} and {{ '}'+'}' }} or similar string concatenation.

deprecated Package is unmaintained; no updates since initial release. ↓

fix Consider alternatives like mithril-node-render or custom source transform.

gotcha HTML attributes not prefixed with colon are omitted when used on component tags. ↓

fix Prefix data-bound attributes with colon: <custom-component :class="'custom-class'"></custom-component>.

Install

npm install mithril-template

yarn add mithril-template

pnpm add mithril-template

Imports

mithrilTemplate

wrong

import mithrilTemplate from 'mithril-template'

correct

var mithrilTemplate = require('mithril-template')

CommonJS only; no ES module export. Use require() as shown.

mithrilTemplate (named no default)
wrong
```
import { compile } from 'mithril-template'
```
correct
```
const { compile } = require('mithril-template')
```
No named exports in v0.0.1; only default export is a function. This is a placeholder.
Global usage
wrong
```
import mithrilTemplate from 'mithril-template'
```
correct
```
<script src='mithril-template.js'></script>
```
Not distributed as standalone script; only Node require() pattern works.

Quickstart

Converts an HTML template string with interpolation to Mithril hyperscript function call.

var mithrilTemplate = require('mithril-template');
var hyperscript = mithrilTemplate('<h1 class="greetings">Hello {{ name }}!</h1>');
console.log(hyperscript); // m('.greetings','Hello '+name+'!')