solid-tag-1

Transform Solid 1.x JSX and TSX into JavaScript using the official solid-js/html tagged-template runtime. No JSX build step is required after transformation.

solid-tag-1 is an independent transformer for Solid 1.x. It does not depend on the Solid 2 solid-tag package or on Browser Module Runtime.

Install

npm install solid-tag-1 solid-js@^1

The transformer is a Node.js ESM package (Node.js 20+) and uses the TypeScript compiler API to parse JSX/TSX. Install solid-js 1.x in the application that runs the generated code. The library does not bundle the Solid runtime.

For Bun:

bun add solid-tag-1 solid-js@^1

Programmatic API

import { transform } from 'solid-tag-1';

const source = `
  import { createSignal } from 'solid-js';

  export default function Counter() {
    const [count, setCount] = createSignal(0);
    return (
      <button onClick={() => setCount(n => n + 1)}>
        Clicks: {count()}
      </button>
    );
  }
`;

const { code, transformed, filename } = transform(source, {
  filename: 'Counter.jsx'
});

console.log(code);

The generated JavaScript imports html from solid-js/html automatically and preserves reactive expressions as lazy template interpolations. It still needs a module host/bundler/browser environment able to resolve solid-js imports. Transformation itself does not mount the component.

transform(source, options?) returns { code, transformed, filename }. For a string-only result, use transformJSX(source, options?):

import { transformJSX } from 'solid-tag-1';

const js = transformJSX('const view = <span>{name()}</span>;');

Both transform and transformJSX are named exports. transform is also the default export.

Options

| Option | Default | Description | | --- | --- | --- | | filename | input.jsx | Source filename; .tsx enables TypeScript stripping by default. | | autoImport | true | Insert an import of the solid-js/html tag when JSX is found. | | tagIdentifier | __solidTag1Html | Preferred generated tag binding; when auto-importing, name collisions are avoided. | | transpileTS | true for .tsx, otherwise false | Strip TypeScript syntax after JSX conversion. | | compilerOptions | ES2022 / ESNext defaults | Additional TypeScript transpilation options. |

To use a host-provided tag instead of an automatic import:

const { code } = transform('const view = <p>Hello</p>;', {
  filename: 'view.jsx',
  autoImport: false,
  tagIdentifier: 'html'
});
// The host must provide a binding named `html`.

For malformed JSX or unsupported constructs, the transformer throws a SyntaxError or TransformError with a source location where available.

Command-line interface

npx solid-tag-1 src/Counter.jsx -o dist/Counter.js
npx solid-tag-1 src/Counter.tsx -o dist/Counter.js
npx solid-tag-1 src/Counter.jsx --no-import --tag html -o dist/Counter.js

Omit -o to write transformed JavaScript to stdout. Use --help to display CLI usage.

JSX/TSX coverage

The transformer supports native elements, component tags (including member expressions such as <UI.Button />), fragments, nested JSX, JSX in callbacks and conditionals, dynamic children and attributes, spreads, event callbacks, basic refs and use: directives, and common Solid control-flow component syntax such as For and Show.

It also supports TSX input with basic TypeScript syntax stripping. The implementation has browser-tested differential fixtures comparing observable behavior with the official Solid 1 JSX compiler; this does not guarantee equivalence for every JSX construct.

Limitations: The package targets client-side rendering; it does not implement SSR, hydration, or library source maps. Some ref, directive, component-prop, and event semantics can differ from the official JSX compiler in untested cases. The upstream Solid 1 HTML runtime can use dynamic function generation, so strict Content Security Policies may require additional configuration. Only compile trusted source.

Using it through solid-tag

When using a version of solid-tag that exports the optional ./solid1 entry point, install both packages:

npm install solid-tag solid-tag-1

import { transform } from 'solid-tag/solid1';

This entry point re-exports solid-tag-1; it does not merge Solid 1 and Solid 2 compiler implementations. You can always import from solid-tag-1 directly.

License

MIT.