@knighted/jsx 1.0.0 → 1.1.0

package/README.md

@@ -21,7 +21,8 @@ The parser automatically uses native bindings when it runs in Node.js. To enable
 npm_config_ignore_platform=true npm install @oxc-parser/binding-wasm32-wasi
 ```
 
-> Tip: public CDNs such as `esm.sh` or `jsdelivr` already publish bundles that include the WASM binding, so you can import this package directly from those endpoints in `<script type="module">` blocks without any extra setup.
+> [!TIP]
+> Public CDNs such as `esm.sh` or `jsdelivr` already publish bundles that include the WASM binding, so you can import this package directly from those endpoints in `<script type="module">` blocks without any extra setup.
 
 ## Usage
 
@@ -40,6 +41,35 @@ const button = jsx`
 document.body.append(button)
 ```
 
+## Loader integration
+
+Use the published loader entry (`@knighted/jsx/loader`) when you want your bundler to rewrite tagged template literals at build time. The loader finds every `jsx\`…\`` invocation, rebuilds the template with real JSX semantics, and hands back transformed source that can run in any environment.
+
+```js
+// rspack.config.js / webpack.config.js
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        include: path.resolve(__dirname, 'src'),
+        use: [
+          {
+            loader: '@knighted/jsx/loader',
+            options: {
+              // Optional: rename the tagged template identifier (defaults to `jsx`).
+              tag: 'jsx',
+            },
+          },
+        ],
+      },
+    ],
+  },
+}
+```
+
+Pair the loader with your existing TypeScript/JSX transpiler (SWC, Babel, Rspack’s builtin loader, etc.) so regular React components and the tagged templates can live side by side. The demo fixture under `test/fixtures/rspack-app` shows a full setup that mixes Lit and React—run `npm run build`, `npm run setup:wasm`, and `npm run build:fixture`, then serve the folder to see the output in a browser.
+
 ### Interpolations
 
 - All dynamic values are provided through standard template literal expressions (`${...}`). Wrap them in JSX braces to keep the syntax valid: `className={${value}}`, `{${items}}`, etc.
@@ -94,7 +124,19 @@ When you are not using a bundler, load the module directly from a CDN that under
 </script>
 ```
 
-If you are building locally with Vite/Rollup/Webpack make sure the WASM binding is installable (see the `npm_config_ignore_platform` tip above) so the bundler can resolve `@oxc-parser/binding-wasm32-wasi`.
+If you are building locally with Vite/Rollup/Webpack make sure the WASM binding is installable so the bundler can resolve `@oxc-parser/binding-wasm32-wasi` (details below).
+
+### Installing the WASM binding locally
+
+`@oxc-parser/binding-wasm32-wasi` publishes with `"cpu": ["wasm32"]`, so npm/yarn/pnpm skip it on macOS and Linux unless you override the platform guard. Run the helper script after cloning (or whenever you clean `node_modules`) to pull the binding into place for the Vite demo and any other local bundler builds:
+
+```sh
+npm run setup:wasm
+```
+
+The script downloads the published tarball via `npm pack`, extracts it into `node_modules/@oxc-parser/binding-wasm32-wasi`, and removes the temporary archive so your lockfile stays untouched. If you need to test a different binding build, set `WASM_BINDING_PACKAGE` before running the script (for example, `WASM_BINDING_PACKAGE=@oxc-parser/binding-wasm32-wasi@0.100.0 npm run setup:wasm`).
+
+Prefer the manual route? You can still run `npm_config_ignore_platform=true npm install --no-save @oxc-parser/binding-wasm32-wasi@^0.99.0`, but the script above replicates the vendored behavior with less ceremony.
 
 ### Lite bundle entry
 
@@ -118,7 +160,7 @@ Tests live in `test/jsx.test.ts` and cover DOM props/events, custom components,
 
 ## Browser demo / Vite build
 
-This repo ships with a ready-to-run Vite demo under `examples/browser` that bundles the library (and the WASM binding vendored in `vendor/binding-wasm32-wasi`). Use it for a full end-to-end verification in a real browser (the demo now imports `@knighted/jsx/lite` so you can confirm the lighter entry behaves identically):
+This repo ships with a ready-to-run Vite demo under `examples/browser` that bundles the library (make sure you have installed the WASM binding via the command above first). Use it for a full end-to-end verification in a real browser (the demo imports `@knighted/jsx/lite` so you can confirm the lighter entry behaves identically):
 
 ```sh
 # Start a dev server at http://localhost:5173
@@ -129,7 +171,7 @@ npm run build:demo
 npm run preview
 ```
 
-The Vite config aliases `@oxc-parser/binding-wasm32-wasi` to the vendored copy so you don't have to perform any extra install tricks locally, while production consumers can still rely on the published package. For a zero-build verification of the lite bundle, open `examples/esm-demo-lite.html` locally (double-click or run `open examples/esm-demo-lite.html`) or visit the deployed GitHub Pages build produced by `.github/workflows/deploy-demo.yml` (it serves that same lite HTML demo).
+For a zero-build verification of the lite bundle, open `examples/esm-demo-lite.html` locally (double-click or run `open examples/esm-demo-lite.html`) or visit the deployed GitHub Pages build produced by `.github/workflows/deploy-demo.yml` (it serves that same lite HTML demo).
 
 ## Limitations
 

package/dist/cjs/loader/jsx.cjs

@@ -0,0 +1,352 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = jsxLoader;
+const magic_string_1 = __importDefault(require("magic-string"));
+const oxc_parser_1 = require("oxc-parser");
+const stripTrailingWhitespace = (value) => value.replace(/\s+$/g, '');
+const stripLeadingWhitespace = (value) => value.replace(/^\s+/g, '');
+const getTemplateExpressionContext = (left, right) => {
+    const trimmedLeft = stripTrailingWhitespace(left);
+    const trimmedRight = stripLeadingWhitespace(right);
+    if (trimmedLeft.endsWith('<') || trimmedLeft.endsWith('</')) {
+        return { type: 'tag' };
+    }
+    if (/{\s*\.\.\.$/.test(trimmedLeft) && trimmedRight.startsWith('}')) {
+        return { type: 'spread' };
+    }
+    const attrStringMatch = trimmedLeft.match(/=\s*(["'])$/);
+    if (attrStringMatch) {
+        const quoteChar = attrStringMatch[1];
+        if (trimmedRight.startsWith(quoteChar)) {
+            return { type: 'attributeString', quote: quoteChar };
+        }
+    }
+    if (trimmedLeft.endsWith('={') && trimmedRight.startsWith('}')) {
+        return { type: 'attributeExisting' };
+    }
+    if (/=\s*$/.test(trimmedLeft)) {
+        return { type: 'attributeUnquoted' };
+    }
+    if (trimmedLeft.endsWith('{') && trimmedRight.startsWith('}')) {
+        return { type: 'childExisting' };
+    }
+    return { type: 'childText' };
+};
+const TEMPLATE_EXPR_PLACEHOLDER_PREFIX = '__JSX_LOADER_TEMPLATE_EXPR_';
+const MODULE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const TEMPLATE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const DEFAULT_TAG = 'jsx';
+const escapeTemplateChunk = (chunk) => chunk.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${');
+const formatParserError = (error) => {
+    let message = `[jsx-loader] ${error.message}`;
+    if (error.labels?.length) {
+        const label = error.labels[0];
+        if (label.message) {
+            message += `\n${label.message}`;
+        }
+    }
+    if (error.codeframe) {
+        message += `\n${error.codeframe}`;
+    }
+    return message;
+};
+const walkAst = (node, visitor) => {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    const current = node;
+    if (typeof current.type === 'string') {
+        visitor(current);
+    }
+    for (const value of Object.values(current)) {
+        if (!value) {
+            continue;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(child => walkAst(child, visitor));
+            continue;
+        }
+        if (typeof value === 'object') {
+            walkAst(value, visitor);
+        }
+    }
+};
+const shouldInterpolateName = (name) => /^[A-Z]/.test(name.name);
+const addSlot = (slots, source, range) => {
+    if (!range) {
+        return;
+    }
+    const [start, end] = range;
+    if (start === end) {
+        return;
+    }
+    slots.push({
+        start,
+        end,
+        code: source.slice(start, end),
+    });
+};
+const collectSlots = (program, source) => {
+    const slots = [];
+    const recordComponentName = (name) => {
+        if (!name) {
+            return;
+        }
+        switch (name.type) {
+            case 'JSXIdentifier': {
+                if (!shouldInterpolateName(name)) {
+                    return;
+                }
+                addSlot(slots, source, name.range);
+                break;
+            }
+            case 'JSXMemberExpression': {
+                addSlot(slots, source, name.range);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    walkAst(program, node => {
+        switch (node.type) {
+            case 'JSXExpressionContainer': {
+                const expression = node.expression;
+                if (expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, (expression.range ?? node.range));
+                break;
+            }
+            case 'JSXSpreadAttribute': {
+                const argument = node.argument;
+                if (isLoaderPlaceholderIdentifier(argument)) {
+                    break;
+                }
+                addSlot(slots, source, argument?.range);
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const expression = node.expression;
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, expression?.range);
+                break;
+            }
+            case 'JSXElement': {
+                const opening = node.openingElement;
+                recordComponentName(opening.name);
+                const closing = node.closingElement;
+                if (closing?.name) {
+                    recordComponentName(closing.name);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    });
+    return slots.sort((a, b) => a.start - b.start);
+};
+const renderTemplateWithSlots = (source, slots) => {
+    let cursor = 0;
+    let output = '';
+    slots.forEach(slot => {
+        if (slot.start < cursor) {
+            throw new Error('Overlapping JSX expressions detected inside template literal.');
+        }
+        output += escapeTemplateChunk(source.slice(cursor, slot.start));
+        output += `\${${slot.code}}`;
+        cursor = slot.end;
+    });
+    output += escapeTemplateChunk(source.slice(cursor));
+    return { code: output, changed: slots.length > 0 };
+};
+const transformTemplateLiteral = (templateSource, resourcePath) => {
+    const result = (0, oxc_parser_1.parseSync)(`${resourcePath}?jsx-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
+    if (result.errors.length > 0) {
+        throw new Error(formatParserError(result.errors[0]));
+    }
+    const slots = collectSlots(result.program, templateSource);
+    return renderTemplateWithSlots(templateSource, slots);
+};
+const isTargetTaggedTemplate = (node, source, tag) => {
+    if (node.type !== 'TaggedTemplateExpression') {
+        return false;
+    }
+    const tagNode = node.tag;
+    if (tagNode.type !== 'Identifier') {
+        return false;
+    }
+    return tagNode.name === tag;
+};
+const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
+const buildTemplateSource = (quasis, expressions, source, tag) => {
+    const placeholderMap = new Map();
+    const tagPlaceholderMap = new Map();
+    let template = '';
+    let placeholderIndex = 0;
+    let trimStartNext = 0;
+    let mutated = false;
+    const registerMarker = (code, isTag) => {
+        if (isTag) {
+            const existing = tagPlaceholderMap.get(code);
+            if (existing) {
+                return existing;
+            }
+            const marker = `${TAG_PLACEHOLDER_PREFIX}${tagPlaceholderMap.size}__`;
+            tagPlaceholderMap.set(code, marker);
+            placeholderMap.set(marker, code);
+            return marker;
+        }
+        const marker = `${TEMPLATE_EXPR_PLACEHOLDER_PREFIX}${placeholderIndex++}__`;
+        placeholderMap.set(marker, code);
+        return marker;
+    };
+    quasis.forEach((quasi, index) => {
+        let chunk = quasi.value.cooked;
+        if (typeof chunk !== 'string') {
+            chunk = quasi.value.raw ?? '';
+        }
+        if (trimStartNext > 0) {
+            chunk = chunk.slice(trimStartNext);
+            trimStartNext = 0;
+        }
+        template += chunk;
+        const expression = expressions[index];
+        if (!expression) {
+            return;
+        }
+        const start = expression.start ?? null;
+        const end = expression.end ?? null;
+        if (start === null || end === null) {
+            throw new Error('Unable to read template expression source range.');
+        }
+        const nextChunk = quasis[index + 1];
+        const nextValue = nextChunk?.value;
+        const rightText = nextValue?.cooked ?? nextValue?.raw ?? '';
+        const context = getTemplateExpressionContext(chunk, rightText);
+        const code = source.slice(start, end);
+        const marker = registerMarker(code, context.type === 'tag');
+        const appendMarker = (wrapper) => {
+            template += wrapper ? wrapper(marker) : marker;
+        };
+        switch (context.type) {
+            case 'tag':
+            case 'spread':
+            case 'attributeExisting':
+            case 'childExisting': {
+                appendMarker();
+                break;
+            }
+            case 'attributeString': {
+                const quoteChar = context.quote;
+                if (!template.endsWith(quoteChar)) {
+                    throw new Error(`[jsx-loader] Expected attribute quote ${quoteChar} before template expression inside ${tag}\`\` block.`);
+                }
+                template = template.slice(0, -1);
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                if (rightText.startsWith(quoteChar)) {
+                    trimStartNext = 1;
+                }
+                break;
+            }
+            case 'attributeUnquoted': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+            case 'childText': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+        }
+    });
+    return {
+        source: template,
+        mutated,
+        placeholders: Array.from(placeholderMap.entries()).map(([marker, code]) => ({
+            marker,
+            code,
+        })),
+    };
+};
+const restoreTemplatePlaceholders = (code, placeholders) => placeholders.reduce((result, placeholder) => {
+    return result.split(placeholder.marker).join(`\${${placeholder.code}}`);
+}, code);
+const isLoaderPlaceholderIdentifier = (node) => {
+    if (node?.type !== 'Identifier' || typeof node.name !== 'string') {
+        return false;
+    }
+    return (node.name.startsWith(TEMPLATE_EXPR_PLACEHOLDER_PREFIX) ||
+        node.name.startsWith(TAG_PLACEHOLDER_PREFIX));
+};
+const transformSource = (source, config) => {
+    const ast = (0, oxc_parser_1.parseSync)(config.resourcePath, source, MODULE_PARSER_OPTIONS);
+    if (ast.errors.length > 0) {
+        throw new Error(formatParserError(ast.errors[0]));
+    }
+    const taggedTemplates = [];
+    walkAst(ast.program, node => {
+        if (isTargetTaggedTemplate(node, source, config.tag)) {
+            taggedTemplates.push(node);
+        }
+    });
+    if (!taggedTemplates.length) {
+        return source;
+    }
+    const magic = new magic_string_1.default(source);
+    let mutated = false;
+    taggedTemplates
+        .sort((a, b) => b.start - a.start)
+        .forEach(node => {
+        const quasi = node.quasi;
+        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, config.tag);
+        const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath);
+        const restored = restoreTemplatePlaceholders(code, templateSource.placeholders);
+        const templateChanged = changed || templateSource.mutated;
+        if (!templateChanged) {
+            return;
+        }
+        const tagSource = source.slice(node.tag.start, node.tag.end);
+        const replacement = `${tagSource}\`${restored}\``;
+        magic.overwrite(node.start, node.end, replacement);
+        mutated = true;
+    });
+    return mutated ? magic.toString() : source;
+};
+function jsxLoader(input) {
+    const callback = this.async();
+    try {
+        const options = this.getOptions?.() ?? {};
+        const tag = options.tag ?? DEFAULT_TAG;
+        const source = typeof input === 'string' ? input : input.toString('utf8');
+        const output = transformSource(source, {
+            resourcePath: this.resourcePath,
+            tag,
+        });
+        callback(null, output);
+    }
+    catch (error) {
+        callback(error);
+    }
+}

package/dist/cjs/loader/jsx.d.cts

@@ -0,0 +1,14 @@
+type LoaderCallback = (err: Error | null, content?: string) => void;
+type LoaderContext<TOptions> = {
+    resourcePath: string;
+    async(): LoaderCallback;
+    getOptions?: () => Partial<TOptions>;
+};
+type LoaderOptions = {
+    /**
+     * Name of the tagged template function. Defaults to `jsx`.
+     */
+    tag?: string;
+};
+export default function jsxLoader(this: LoaderContext<LoaderOptions>, input: string | Buffer): void;
+export {};

package/dist/loader/jsx.d.ts

@@ -0,0 +1,14 @@
+type LoaderCallback = (err: Error | null, content?: string) => void;
+type LoaderContext<TOptions> = {
+    resourcePath: string;
+    async(): LoaderCallback;
+    getOptions?: () => Partial<TOptions>;
+};
+type LoaderOptions = {
+    /**
+     * Name of the tagged template function. Defaults to `jsx`.
+     */
+    tag?: string;
+};
+export default function jsxLoader(this: LoaderContext<LoaderOptions>, input: string | Buffer): void;
+export {};

package/dist/loader/jsx.js

@@ -0,0 +1,346 @@
+import MagicString from 'magic-string';
+import { parseSync } from 'oxc-parser';
+const stripTrailingWhitespace = (value) => value.replace(/\s+$/g, '');
+const stripLeadingWhitespace = (value) => value.replace(/^\s+/g, '');
+const getTemplateExpressionContext = (left, right) => {
+    const trimmedLeft = stripTrailingWhitespace(left);
+    const trimmedRight = stripLeadingWhitespace(right);
+    if (trimmedLeft.endsWith('<') || trimmedLeft.endsWith('</')) {
+        return { type: 'tag' };
+    }
+    if (/{\s*\.\.\.$/.test(trimmedLeft) && trimmedRight.startsWith('}')) {
+        return { type: 'spread' };
+    }
+    const attrStringMatch = trimmedLeft.match(/=\s*(["'])$/);
+    if (attrStringMatch) {
+        const quoteChar = attrStringMatch[1];
+        if (trimmedRight.startsWith(quoteChar)) {
+            return { type: 'attributeString', quote: quoteChar };
+        }
+    }
+    if (trimmedLeft.endsWith('={') && trimmedRight.startsWith('}')) {
+        return { type: 'attributeExisting' };
+    }
+    if (/=\s*$/.test(trimmedLeft)) {
+        return { type: 'attributeUnquoted' };
+    }
+    if (trimmedLeft.endsWith('{') && trimmedRight.startsWith('}')) {
+        return { type: 'childExisting' };
+    }
+    return { type: 'childText' };
+};
+const TEMPLATE_EXPR_PLACEHOLDER_PREFIX = '__JSX_LOADER_TEMPLATE_EXPR_';
+const MODULE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const TEMPLATE_PARSER_OPTIONS = {
+    lang: 'tsx',
+    sourceType: 'module',
+    range: true,
+    preserveParens: true,
+};
+const DEFAULT_TAG = 'jsx';
+const escapeTemplateChunk = (chunk) => chunk.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\${/g, '\\${');
+const formatParserError = (error) => {
+    let message = `[jsx-loader] ${error.message}`;
+    if (error.labels?.length) {
+        const label = error.labels[0];
+        if (label.message) {
+            message += `\n${label.message}`;
+        }
+    }
+    if (error.codeframe) {
+        message += `\n${error.codeframe}`;
+    }
+    return message;
+};
+const walkAst = (node, visitor) => {
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    const current = node;
+    if (typeof current.type === 'string') {
+        visitor(current);
+    }
+    for (const value of Object.values(current)) {
+        if (!value) {
+            continue;
+        }
+        if (Array.isArray(value)) {
+            value.forEach(child => walkAst(child, visitor));
+            continue;
+        }
+        if (typeof value === 'object') {
+            walkAst(value, visitor);
+        }
+    }
+};
+const shouldInterpolateName = (name) => /^[A-Z]/.test(name.name);
+const addSlot = (slots, source, range) => {
+    if (!range) {
+        return;
+    }
+    const [start, end] = range;
+    if (start === end) {
+        return;
+    }
+    slots.push({
+        start,
+        end,
+        code: source.slice(start, end),
+    });
+};
+const collectSlots = (program, source) => {
+    const slots = [];
+    const recordComponentName = (name) => {
+        if (!name) {
+            return;
+        }
+        switch (name.type) {
+            case 'JSXIdentifier': {
+                if (!shouldInterpolateName(name)) {
+                    return;
+                }
+                addSlot(slots, source, name.range);
+                break;
+            }
+            case 'JSXMemberExpression': {
+                addSlot(slots, source, name.range);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    walkAst(program, node => {
+        switch (node.type) {
+            case 'JSXExpressionContainer': {
+                const expression = node.expression;
+                if (expression.type === 'JSXEmptyExpression') {
+                    break;
+                }
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, (expression.range ?? node.range));
+                break;
+            }
+            case 'JSXSpreadAttribute': {
+                const argument = node.argument;
+                if (isLoaderPlaceholderIdentifier(argument)) {
+                    break;
+                }
+                addSlot(slots, source, argument?.range);
+                break;
+            }
+            case 'JSXSpreadChild': {
+                const expression = node.expression;
+                if (isLoaderPlaceholderIdentifier(expression)) {
+                    break;
+                }
+                addSlot(slots, source, expression?.range);
+                break;
+            }
+            case 'JSXElement': {
+                const opening = node.openingElement;
+                recordComponentName(opening.name);
+                const closing = node.closingElement;
+                if (closing?.name) {
+                    recordComponentName(closing.name);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    });
+    return slots.sort((a, b) => a.start - b.start);
+};
+const renderTemplateWithSlots = (source, slots) => {
+    let cursor = 0;
+    let output = '';
+    slots.forEach(slot => {
+        if (slot.start < cursor) {
+            throw new Error('Overlapping JSX expressions detected inside template literal.');
+        }
+        output += escapeTemplateChunk(source.slice(cursor, slot.start));
+        output += `\${${slot.code}}`;
+        cursor = slot.end;
+    });
+    output += escapeTemplateChunk(source.slice(cursor));
+    return { code: output, changed: slots.length > 0 };
+};
+const transformTemplateLiteral = (templateSource, resourcePath) => {
+    const result = parseSync(`${resourcePath}?jsx-template`, templateSource, TEMPLATE_PARSER_OPTIONS);
+    if (result.errors.length > 0) {
+        throw new Error(formatParserError(result.errors[0]));
+    }
+    const slots = collectSlots(result.program, templateSource);
+    return renderTemplateWithSlots(templateSource, slots);
+};
+const isTargetTaggedTemplate = (node, source, tag) => {
+    if (node.type !== 'TaggedTemplateExpression') {
+        return false;
+    }
+    const tagNode = node.tag;
+    if (tagNode.type !== 'Identifier') {
+        return false;
+    }
+    return tagNode.name === tag;
+};
+const TAG_PLACEHOLDER_PREFIX = '__JSX_LOADER_TAG_EXPR_';
+const buildTemplateSource = (quasis, expressions, source, tag) => {
+    const placeholderMap = new Map();
+    const tagPlaceholderMap = new Map();
+    let template = '';
+    let placeholderIndex = 0;
+    let trimStartNext = 0;
+    let mutated = false;
+    const registerMarker = (code, isTag) => {
+        if (isTag) {
+            const existing = tagPlaceholderMap.get(code);
+            if (existing) {
+                return existing;
+            }
+            const marker = `${TAG_PLACEHOLDER_PREFIX}${tagPlaceholderMap.size}__`;
+            tagPlaceholderMap.set(code, marker);
+            placeholderMap.set(marker, code);
+            return marker;
+        }
+        const marker = `${TEMPLATE_EXPR_PLACEHOLDER_PREFIX}${placeholderIndex++}__`;
+        placeholderMap.set(marker, code);
+        return marker;
+    };
+    quasis.forEach((quasi, index) => {
+        let chunk = quasi.value.cooked;
+        if (typeof chunk !== 'string') {
+            chunk = quasi.value.raw ?? '';
+        }
+        if (trimStartNext > 0) {
+            chunk = chunk.slice(trimStartNext);
+            trimStartNext = 0;
+        }
+        template += chunk;
+        const expression = expressions[index];
+        if (!expression) {
+            return;
+        }
+        const start = expression.start ?? null;
+        const end = expression.end ?? null;
+        if (start === null || end === null) {
+            throw new Error('Unable to read template expression source range.');
+        }
+        const nextChunk = quasis[index + 1];
+        const nextValue = nextChunk?.value;
+        const rightText = nextValue?.cooked ?? nextValue?.raw ?? '';
+        const context = getTemplateExpressionContext(chunk, rightText);
+        const code = source.slice(start, end);
+        const marker = registerMarker(code, context.type === 'tag');
+        const appendMarker = (wrapper) => {
+            template += wrapper ? wrapper(marker) : marker;
+        };
+        switch (context.type) {
+            case 'tag':
+            case 'spread':
+            case 'attributeExisting':
+            case 'childExisting': {
+                appendMarker();
+                break;
+            }
+            case 'attributeString': {
+                const quoteChar = context.quote;
+                if (!template.endsWith(quoteChar)) {
+                    throw new Error(`[jsx-loader] Expected attribute quote ${quoteChar} before template expression inside ${tag}\`\` block.`);
+                }
+                template = template.slice(0, -1);
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                if (rightText.startsWith(quoteChar)) {
+                    trimStartNext = 1;
+                }
+                break;
+            }
+            case 'attributeUnquoted': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+            case 'childText': {
+                appendMarker(identifier => `{${identifier}}`);
+                mutated = true;
+                break;
+            }
+        }
+    });
+    return {
+        source: template,
+        mutated,
+        placeholders: Array.from(placeholderMap.entries()).map(([marker, code]) => ({
+            marker,
+            code,
+        })),
+    };
+};
+const restoreTemplatePlaceholders = (code, placeholders) => placeholders.reduce((result, placeholder) => {
+    return result.split(placeholder.marker).join(`\${${placeholder.code}}`);
+}, code);
+const isLoaderPlaceholderIdentifier = (node) => {
+    if (node?.type !== 'Identifier' || typeof node.name !== 'string') {
+        return false;
+    }
+    return (node.name.startsWith(TEMPLATE_EXPR_PLACEHOLDER_PREFIX) ||
+        node.name.startsWith(TAG_PLACEHOLDER_PREFIX));
+};
+const transformSource = (source, config) => {
+    const ast = parseSync(config.resourcePath, source, MODULE_PARSER_OPTIONS);
+    if (ast.errors.length > 0) {
+        throw new Error(formatParserError(ast.errors[0]));
+    }
+    const taggedTemplates = [];
+    walkAst(ast.program, node => {
+        if (isTargetTaggedTemplate(node, source, config.tag)) {
+            taggedTemplates.push(node);
+        }
+    });
+    if (!taggedTemplates.length) {
+        return source;
+    }
+    const magic = new MagicString(source);
+    let mutated = false;
+    taggedTemplates
+        .sort((a, b) => b.start - a.start)
+        .forEach(node => {
+        const quasi = node.quasi;
+        const templateSource = buildTemplateSource(quasi.quasis, quasi.expressions, source, config.tag);
+        const { code, changed } = transformTemplateLiteral(templateSource.source, config.resourcePath);
+        const restored = restoreTemplatePlaceholders(code, templateSource.placeholders);
+        const templateChanged = changed || templateSource.mutated;
+        if (!templateChanged) {
+            return;
+        }
+        const tagSource = source.slice(node.tag.start, node.tag.end);
+        const replacement = `${tagSource}\`${restored}\``;
+        magic.overwrite(node.start, node.end, replacement);
+        mutated = true;
+    });
+    return mutated ? magic.toString() : source;
+};
+export default function jsxLoader(input) {
+    const callback = this.async();
+    try {
+        const options = this.getOptions?.() ?? {};
+        const tag = options.tag ?? DEFAULT_TAG;
+        const source = typeof input === 'string' ? input : input.toString('utf8');
+        const output = transformSource(source, {
+            resourcePath: this.resourcePath,
+            tag,
+        });
+        callback(null, output);
+    }
+    catch (error) {
+        callback(error);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple JSX transpiler that runs in node.js or the browser.",
   "keywords": [
     "jsx browser transform",
@@ -25,6 +25,10 @@
       "import": "./dist/lite/index.js",
       "default": "./dist/lite/index.js"
     },
+    "./loader": {
+      "import": "./dist/loader/jsx.js",
+      "default": "./dist/loader/jsx.js"
+    },
     "./package.json": "./package.json"
   },
   "engines": {
@@ -41,27 +45,38 @@
     "prettier": "prettier -w .",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
+    "build:fixture": "node scripts/build-rspack-fixture.mjs",
     "dev": "vite dev --config vite.config.ts",
     "build:demo": "vite build --config vite.config.ts",
     "preview": "vite preview --config vite.config.ts",
     "build:lite": "tsup --config tsup.config.ts",
+    "setup:wasm": "node scripts/setup-wasm.mjs",
     "prepack": "npm run build"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@knighted/duel": "^2.1.6",
+    "@rspack/core": "^1.0.5",
     "@types/jsdom": "^27.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitest/coverage-v8": "^4.0.14",
     "eslint": "^9.39.1",
+    "http-server": "^14.1.1",
     "jsdom": "^27.2.0",
+    "lit": "^3.2.1",
     "prettier": "^3.7.3",
-    "tsup": "^8.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tar": "^7.4.3",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.2.4",
     "vitest": "^4.0.14"
   },
   "dependencies": {
+    "magic-string": "^0.30.21",
     "oxc-parser": "^0.99.0"
   },
   "optionalDependencies": {