@dathomir/transformer

JSX transformer that converts JSX into Dathomir runtime calls using structured arrays. Supports both CSR and SSR output modes.

Install

npm install @dathomir/transformer

Note: This package is typically used indirectly via @dathomir/plugin. Direct usage is for custom build tool integrations.

Usage

import { transform } from "@dathomir/transformer";

const result = transform(code, {
  mode: "csr", // "csr" | "ssr"
  sourceMap: true,
  filename: "App.tsx",
});

console.log(result.code);
console.log(result.map);

Transform Example

Input (JSX):

<button class="btn" onClick={handler}>
  Count: {count.value}
</button>

Output (CSR):

import {
  fromTree,
  firstChild,
  nextSibling,
  setText,
  event,
  templateEffect,
} from "@dathomir/runtime";

const _t1 = fromTree(
  [["button", { class: "btn" }, "Count: ", ["{text}", null]]],
  0,
);
const _el = _t1();
const _button = firstChild(_el);
const _text = nextSibling(firstChild(_button, true));
event("click", _button, handler);
templateEffect(() => setText(_text, count.value));

Output (SSR):

import { renderToString } from "@dathomir/runtime";

renderToString(
  [["button", { class: "btn" }, "Count:", ["{text}", null]]],
  {},
  new Map([[1, count.value]]),
);

Options

| Option | Type | Default | Description | | --------------- | ---------------- | --------------------- | --------------------------------------- | | mode | "csr" \| "ssr" | "csr" | Rendering mode | | sourceMap | boolean | false | Generate source map | | filename | string | — | File name for source maps | | runtimeModule | string | "@dathomir/runtime" | Module to import runtime functions from |

License

MPL-2.0