esbuild-angular-jsx

1.3.0 verified Fri May 01 auth: no javascript

A plugin and CLI wrapper for esbuild that enables Angular-like template syntax and file structure (e.g., .component.ts, .template.html, .styles.css) for Mithril projects, instead of JSX. Current stable version is 1.3.0. It transpiles Angular-style decorators (e.g., @Component) and HTML templates into Mithril's hyperscript. Released infrequently; no major breaking changes since initial. Differentiates from alternatives like babel-plugin-angular-jsx by leveraging esbuild's speed and native TypeScript support, and from Angular itself by targeting lightweight Mithril instead of the full Angular framework.

Common errors

error Error: Plugin esbuild-angular-jsx: No entry files found matching pattern *.component.ts ↓

cause The plugin scans for files with the pattern *.component.ts, but none were found in the entry point directory.

fix

Ensure your component files are named with the .component.ts suffix and are included in the entry points.

error TypeError: esbuildAngularJsx is not a function ↓

cause The default import is a factory function returning a plugin, not a direct plugin object.

fix

Call the imported function: const plugin = esbuildAngularJsx(). If using TypeScript, ensure ESM import syntax.

error Error: Cannot find module 'esbuild-angular-jsx' ↓

cause Package not installed or not in node_modules.

fix

Run npm install --save-dev esbuild-angular-jsx to install it as a dev dependency.

Warnings

gotcha The plugin requires specific file naming conventions (e.g., *.component.ts, *.template.html). Not following these will cause the plugin to skip transformation. ↓

fix Rename files to match expected patterns or customize via plugin options.

deprecated The CLI `esbuild-angular-jsx` command is deprecated in favor of using the plugin with esbuild directly. Use `esbuild` programmatic API instead. ↓

fix Switch to using the plugin with esbuild.build().

gotcha The plugin does not support Angular's full component model (e.g., inputs, outputs, lifecycle hooks). Only template and style syntax is transformed. ↓

fix Manually implement Mithril equivalents for Angular features not supported.

gotcha HTML templates must be valid Angular template syntax; unknown Angular directives will cause errors. ↓

fix Use only supported directives: *ngIf, *ngFor, (click), [(ngModel)] (partial).

breaking Version 1.3.0 changed the default export from a function to a factory that returns a plugin object. Previously `import esbuildAngularJsx from 'esbuild-angular-jsx'` returned a function that returned esbuild options. ↓

fix Update code to call the default export: `const plugin = esbuildAngularJsx()`. For versions <1.3.0, use `const options = esbuildAngularJsx()` instead.

Install

npm install esbuild-angular-jsx

yarn add esbuild-angular-jsx

pnpm add esbuild-angular-jsx

Imports

default (plugin)

wrong

const esbuildAngularJsx = require('esbuild-angular-jsx')

correct

import esbuildAngularJsx from 'esbuild-angular-jsx'

ESM-only since v1. No default export in CJS.

transform
```
import { transform } from 'esbuild-angular-jsx'
```
Named export for direct transformation; available since v1.2.0.

Plugin type

wrong

import { AngularJsxPlugin } from 'esbuild-angular-jsx'

correct

import type { AngularJsxPlugin } from 'esbuild-angular-jsx'

TypeScript types are bundled; use `import type` for type-only imports.

Quickstart

Shows how to use the plugin with esbuild's API, processing Angular-like syntax into Mithril.

import esbuild from 'esbuild';
import esbuildAngularJsx from 'esbuild-angular-jsx';
import { env } from 'node:process';

await esbuild.build({
  entryPoints: ['app/main.ts'],
  bundle: true,
  outdir: 'dist',
  plugins: [esbuildAngularJsx()],
  loader: {
    '.html': 'copy',
    '.css': 'copy',
  },
  define: {
    'process.env.API_KEY': JSON.stringify(env.API_KEY ?? ''),
  },
});
console.log('Build complete.');