{"id":25260,"library":"esbuild-angular-jsx","title":"esbuild-angular-jsx","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-angular-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-angular-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-angular-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundler/transpiler","package":"esbuild","optional":false}],"imports":[{"note":"ESM-only since v1. No default export in CJS.","wrong":"const esbuildAngularJsx = require('esbuild-angular-jsx')","symbol":"default (plugin)","correct":"import esbuildAngularJsx from 'esbuild-angular-jsx'"},{"note":"Named export for direct transformation; available since v1.2.0.","wrong":"","symbol":"transform","correct":"import { transform } from 'esbuild-angular-jsx'"},{"note":"TypeScript types are bundled; use `import type` for type-only imports.","wrong":"import { AngularJsxPlugin } from 'esbuild-angular-jsx'","symbol":"Plugin type","correct":"import type { AngularJsxPlugin } from 'esbuild-angular-jsx'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport esbuildAngularJsx from 'esbuild-angular-jsx';\nimport { env } from 'node:process';\n\nawait esbuild.build({\n  entryPoints: ['app/main.ts'],\n  bundle: true,\n  outdir: 'dist',\n  plugins: [esbuildAngularJsx()],\n  loader: {\n    '.html': 'copy',\n    '.css': 'copy',\n  },\n  define: {\n    'process.env.API_KEY': JSON.stringify(env.API_KEY ?? ''),\n  },\n});\nconsole.log('Build complete.');","lang":"typescript","description":"Shows how to use the plugin with esbuild's API, processing Angular-like syntax into Mithril."},"warnings":[{"fix":"Rename files to match expected patterns or customize via plugin options.","message":"The plugin requires specific file naming conventions (e.g., *.component.ts, *.template.html). Not following these will cause the plugin to skip transformation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Switch to using the plugin with esbuild.build().","message":"The CLI `esbuild-angular-jsx` command is deprecated in favor of using the plugin with esbuild directly. Use `esbuild` programmatic API instead.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Manually implement Mithril equivalents for Angular features not supported.","message":"The plugin does not support Angular's full component model (e.g., inputs, outputs, lifecycle hooks). Only template and style syntax is transformed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use only supported directives: *ngIf, *ngFor, (click), [(ngModel)] (partial).","message":"HTML templates must be valid Angular template syntax; unknown Angular directives will cause errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update code to call the default export: `const plugin = esbuildAngularJsx()`. For versions <1.3.0, use `const options = esbuildAngularJsx()` instead.","message":"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.","severity":"breaking","affected_versions":"<=1.2.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure your component files are named with the .component.ts suffix and are included in the entry points.","cause":"The plugin scans for files with the pattern *.component.ts, but none were found in the entry point directory.","error":"Error: Plugin esbuild-angular-jsx: No entry files found matching pattern *.component.ts"},{"fix":"Call the imported function: `const plugin = esbuildAngularJsx()`. If using TypeScript, ensure ESM import syntax.","cause":"The default import is a factory function returning a plugin, not a direct plugin object.","error":"TypeError: esbuildAngularJsx is not a function"},{"fix":"Run `npm install --save-dev esbuild-angular-jsx` to install it as a dev dependency.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'esbuild-angular-jsx'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}