htm-transform 0.1.0

package/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)",
+      "Bash(npm test)",
+      "Bash(npm uninstall:*)",
+      "Bash(npm install)"
+    ]
+  }
+}

package/README.md

@@ -0,0 +1,13 @@
+# htm-transform
+
+Transform [htm](https://github.com/developit/htm) tagged templates into normal h function calls.
+A small alternative to [babel-plugin-htm](https://www.npmjs.com/package/babel-plugin-htm) that doesn't depend on Babel.
+
+## Quickstart
+
+```js
+import transform from "@jakelazaroff/htm-transform";
+
+const result = transform("const hyperscript = html`<h1 id=hello>Hello world!</h1>`;");
+console.assert(result === `const hyperscript = h("h1", { id: "hello" }, "Hello world!")`);
+```

package/index.js

@@ -0,0 +1,457 @@
+import * as acorn from "acorn";
+import { generate } from "astring";
+import { simple } from "acorn-walk";
+
+/**
+ * @typedef {Object} ElementNode
+ * @property {'element'} type
+ * @property {string | {type: 'expression', expr: import('acorn').Node}} tag
+ * @property {Object<string, string | boolean | {type: 'expression', expr: import('acorn').Node}>} props
+ * @property {Array<ElementNode | TextNode | ExpressionNode>} children
+ */
+
+/**
+ * @typedef {Object} TextNode
+ * @property {'text'} type
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} ExpressionNode
+ * @property {'expression'} type
+ * @property {string} value
+ * @property {import('acorn').Node} [expr]
+ */
+
+/**
+ * @typedef {Object} Token
+ * @property {'openTag' | 'closeTag' | 'text' | 'expression'} type
+ * @property {string} [tag]
+ * @property {Object<string, string | boolean>} [props]
+ * @property {boolean} [selfClosing]
+ * @property {string} [value]
+ */
+
+/**
+ * Transforms htm tagged templates into h function calls
+ * @param {string} code - JavaScript code containing htm tagged templates
+ * @param {Object} options - Transform options
+ * @param {string} options.pragma - The h function name (default: 'h')
+ * @param {string} options.tag - The tag name to look for (default: 'html')
+ * @param {Object} options.import - Import configuration
+ * @param {string} options.import.from - Module to import from (e.g., 'preact', 'react')
+ * @param {string} options.import.name - Export name to import (e.g., 'h', 'createElement')
+ * @returns {string} - Transformed code
+ */
+export default function transform(code, options = {}) {
+  const { pragma = "h", tag: tagName = "html", import: importConfig } = options;
+
+  const ast = acorn.parse(code, {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  });
+
+  let hasTransformation = false;
+
+  simple(ast, {
+    TaggedTemplateExpression(node) {
+      if (node.tag.type === "Identifier" && node.tag.name === tagName) {
+        hasTransformation = true;
+        const transformed = transformTaggedTemplate(node, pragma);
+
+        // Replace the node with the transformed version
+        for (const key in node) {
+          delete node[key];
+        }
+        Object.assign(node, transformed);
+      }
+    },
+  });
+
+  // Add import statement if specified and transformation occurred
+  if (hasTransformation && importConfig?.from && importConfig?.name) {
+    addImportDeclaration(ast, importConfig.from, importConfig.name);
+  }
+
+  return generate(ast);
+}
+
+/**
+ * Adds an import declaration at the top of the AST
+ * @param {import('acorn').Node} ast - The AST to modify
+ * @param {string} moduleName - The module to import from
+ * @param {string} exportName - The export name to import
+ * @returns {void}
+ */
+function addImportDeclaration(ast, moduleName, exportName) {
+  const hasImport = ast.body.some(
+    (node) =>
+      node.type === "ImportDeclaration" &&
+      node.source.value === moduleName &&
+      node.specifiers.some(
+        (spec) => spec.type === "ImportSpecifier" && spec.imported.name === exportName,
+      ),
+  );
+
+  if (hasImport) return;
+
+  // Create import declaration: import { exportName } from 'moduleName';
+  const importDeclaration = {
+    type: "ImportDeclaration",
+    specifiers: [
+      {
+        type: "ImportSpecifier",
+        imported: {
+          type: "Identifier",
+          name: exportName,
+        },
+        local: {
+          type: "Identifier",
+          name: exportName,
+        },
+      },
+    ],
+    source: {
+      type: "Literal",
+      value: moduleName,
+    },
+  };
+
+  // Add to the beginning of the body
+  ast.body.unshift(importDeclaration);
+}
+
+/**
+ * Transforms a single tagged template expression
+ * @param {import('acorn').Node} node - The tagged template expression node
+ * @param {string} pragma - The pragma function name
+ * @returns {import('acorn').Node} The transformed AST node
+ */
+function transformTaggedTemplate(node, pragma) {
+  const quasi = node.quasi;
+  const { quasis, expressions } = quasi;
+
+  // Build the full template string with placeholders
+  let template = "";
+  const placeholders = [];
+
+  for (let i = 0; i < quasis.length; i++) {
+    template += quasis[i].value.raw;
+    if (i < expressions.length) {
+      const placeholder = `__EXPR_${i}__`;
+      placeholders.push({ placeholder, expression: expressions[i] });
+      template += placeholder;
+    }
+  }
+
+  // Parse the HTML-like template
+  const elements = parseTemplate(template.trim(), placeholders);
+
+  // Convert to h() calls
+  if (elements.length === 0) {
+    return { type: "Literal", value: null };
+  } else if (elements.length === 1) {
+    return elementsToAST(elements[0], pragma);
+  } else {
+    // Multiple root elements - return array
+    return {
+      type: "ArrayExpression",
+      elements: elements.map((el) => elementsToAST(el, pragma)),
+    };
+  }
+}
+
+/**
+ * Parses the template string into element nodes
+ * @param {string} template - The template string to parse
+ * @param {Array<{placeholder: string, expression: import('acorn').Node}>} placeholders - Expression placeholders
+ * @returns {Array<ElementNode | TextNode | ExpressionNode>} Parsed element nodes
+ */
+function parseTemplate(template, placeholders) {
+  const tokens = tokenize(template);
+  const elements = [];
+  let i = 0;
+
+  /**
+   * Recursively parses tokens into element nodes
+   * @param {string | null} endTag - The closing tag to stop at
+   * @returns {Array<ElementNode | TextNode | ExpressionNode>} Parsed children
+   */
+  function parse(endTag = null) {
+    const children = [];
+
+    while (i < tokens.length) {
+      const token = tokens[i];
+
+      if (token.type === "openTag") {
+        i++;
+        const element = {
+          type: "element",
+          tag: token.tag,
+          props: token.props,
+          children: [],
+        };
+
+        if (!token.selfClosing) {
+          element.children = parse(token.tag);
+        }
+
+        children.push(element);
+      } else if (token.type === "closeTag") {
+        if (token.tag === endTag || token.tag === "") {
+          i++;
+          break;
+        }
+        i++;
+      } else if (token.type === "text") {
+        const text = token.value.trim();
+        if (text) {
+          children.push({ type: "text", value: text });
+        }
+        i++;
+      } else if (token.type === "expression") {
+        children.push({ type: "expression", value: token.value });
+        i++;
+      } else {
+        i++;
+      }
+    }
+
+    return children;
+  }
+
+  const result = parse();
+
+  // Resolve placeholders back to expressions
+  return resolvePlaceholders(result, placeholders);
+}
+
+/**
+ * Tokenizes the template string
+ * @param {string} template - The template string to tokenize
+ * @returns {Array<Token>} Array of tokens
+ */
+function tokenize(template) {
+  const tokens = [];
+  let i = 0;
+
+  while (i < template.length) {
+    // Check for tag
+    if (template[i] === "<") {
+      const tagMatch = template.slice(i).match(/^<(\/?)([a-zA-Z0-9_${}]+)([^>]*?)(\/?)>/);
+
+      if (tagMatch) {
+        const [full, isClosing, tagName, attrsStr, selfClosing] = tagMatch;
+
+        if (isClosing) {
+          tokens.push({ type: "closeTag", tag: tagName });
+        } else {
+          const props = parseAttributes(attrsStr);
+          tokens.push({
+            type: "openTag",
+            tag: tagName,
+            props,
+            selfClosing: selfClosing === "/",
+          });
+        }
+
+        i += full.length;
+      } else {
+        // Not a valid tag, treat as text
+        tokens.push({ type: "text", value: "<" });
+        i++;
+      }
+    } else {
+      // Text content or expression placeholder
+      let text = "";
+      while (i < template.length && template[i] !== "<") {
+        text += template[i];
+        i++;
+      }
+
+      // Check if this is an expression placeholder
+      const exprMatch = text.match(/^(__EXPR_\d+__)/);
+      if (exprMatch && text === exprMatch[0]) {
+        tokens.push({ type: "expression", value: exprMatch[0] });
+      } else if (text.trim()) {
+        tokens.push({ type: "text", value: text });
+      }
+    }
+  }
+
+  return tokens;
+}
+
+/**
+ * Parses HTML attributes
+ * @param {string} attrsStr - The attribute string to parse
+ * @returns {Object<string, string | boolean>} Parsed attributes object
+ */
+function parseAttributes(attrsStr) {
+  const props = {};
+  const attrRegex = /([a-zA-Z0-9_:-]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+  let match;
+
+  while ((match = attrRegex.exec(attrsStr))) {
+    const [, name, quoted1, quoted2, unquoted] = match;
+    const value = quoted1 ?? quoted2 ?? unquoted ?? true;
+    props[name] = value;
+  }
+
+  return props;
+}
+
+/**
+ * Resolves placeholders back to expression objects
+ * @param {Array<ElementNode | TextNode | ExpressionNode>} nodes - Nodes to resolve
+ * @param {Array<{placeholder: string, expression: import('acorn').Node}>} placeholders - Expression placeholders
+ * @returns {Array<ElementNode | TextNode | ExpressionNode>} Resolved nodes
+ */
+function resolvePlaceholders(nodes, placeholders) {
+  const placeholderMap = new Map(placeholders.map((p) => [p.placeholder, p.expression]));
+
+  /**
+   * Resolves placeholders in a single node
+   * @param {ElementNode | TextNode | ExpressionNode} node - The node to resolve
+   * @returns {ElementNode | TextNode | ExpressionNode | Array<ElementNode | TextNode | ExpressionNode>} Resolved node(s)
+   */
+  function resolve(node) {
+    if (node.type === "element") {
+      // Resolve tag name if it's a placeholder (component)
+      if (typeof node.tag === "string" && node.tag.startsWith("__EXPR_")) {
+        node.tag = { type: "expression", expr: placeholderMap.get(node.tag) };
+      }
+
+      // Resolve props, preserving order
+      const newProps = {};
+      for (const [key, value] of Object.entries(node.props)) {
+        if (key.startsWith("__EXPR_")) {
+          // Handle spread props (key is the placeholder)
+          newProps["...spread"] = { type: "expression", expr: placeholderMap.get(key) };
+        } else if (typeof value === "string" && value.startsWith("__EXPR_")) {
+          newProps[key] = { type: "expression", expr: placeholderMap.get(value) };
+        } else {
+          newProps[key] = value;
+        }
+      }
+      node.props = newProps;
+
+      // Resolve children
+      node.children = node.children.map(resolve);
+    } else if (node.type === "expression") {
+      const expr = placeholderMap.get(node.value);
+      if (expr) {
+        node.expr = expr;
+      }
+    } else if (node.type === "text") {
+      // Check if text contains placeholders
+      const parts = node.value.split(/(__EXPR_\d+__)/);
+      if (parts.length > 1) {
+        return parts
+          .filter((p) => p)
+          .map((p) => {
+            if (p.startsWith("__EXPR_")) {
+              return { type: "expression", expr: placeholderMap.get(p) };
+            }
+            return { type: "text", value: p };
+          });
+      }
+    }
+
+    return node;
+  }
+
+  return nodes.map(resolve).flat();
+}
+
+/**
+ * Converts element nodes to AST nodes representing h() calls
+ * @param {ElementNode | TextNode | ExpressionNode} node - The node to convert
+ * @param {string} pragma - The pragma function name
+ * @returns {import('acorn').Node} The AST node
+ */
+function elementsToAST(node, pragma) {
+  if (node.type === "text") {
+    return { type: "Literal", value: node.value };
+  }
+
+  if (node.type === "expression") {
+    return node.expr;
+  }
+
+  if (node.type === "element") {
+    // Build h(tag, props, ...children)
+    const args = [];
+
+    // Tag argument
+    if (node.tag.type === "expression") {
+      args.push(node.tag.expr);
+    } else {
+      args.push({ type: "Literal", value: node.tag });
+    }
+
+    // Props argument
+    const propsEntries = Object.entries(node.props);
+    if (propsEntries.length > 0) {
+      const spreadProp = node.props["...spread"];
+
+      if (spreadProp && propsEntries.length === 1) {
+        // Just spread props
+        args.push(spreadProp.expr);
+      } else if (spreadProp) {
+        // Merge spread with other props, preserving order
+        const properties = propsEntries.map(([key, value]) => {
+          if (key === "...spread") {
+            return {
+              type: "SpreadElement",
+              argument: value.expr,
+            };
+          }
+          return {
+            type: "Property",
+            key: { type: "Identifier", name: key },
+            value: value.type === "expression" ? value.expr : { type: "Literal", value },
+            kind: "init",
+            method: false,
+            shorthand: false,
+            computed: false,
+          };
+        });
+
+        args.push({
+          type: "ObjectExpression",
+          properties,
+        });
+      } else {
+        // Normal props
+        args.push({
+          type: "ObjectExpression",
+          properties: propsEntries.map(([key, value]) => ({
+            type: "Property",
+            key: { type: "Identifier", name: key },
+            value: value.type === "expression" ? value.expr : { type: "Literal", value },
+            kind: "init",
+            method: false,
+            shorthand: false,
+            computed: false,
+          })),
+        });
+      }
+    } else {
+      args.push({ type: "Literal", value: null });
+    }
+
+    // Children arguments
+    for (const child of node.children) {
+      args.push(elementsToAST(child, pragma));
+    }
+
+    return {
+      type: "CallExpression",
+      callee: { type: "Identifier", name: pragma },
+      arguments: args,
+    };
+  }
+
+  return { type: "Literal", value: null };
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "htm-transform",
+  "version": "0.1.0",
+  "description": "Transform htm tagged templates into h function calls using acorn",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "node --test test.js",
+    "test:watch": "node --test --watch test.js"
+  },
+  "keywords": [
+    "htm",
+    "hyperscript",
+    "transform",
+    "acorn",
+    "ast"
+  ],
+  "author": "",
+  "license": "MPL-2.0",
+  "dependencies": {
+    "acorn": "^8.11.3",
+    "acorn-walk": "^8.3.2",
+    "astring": "^1.8.6"
+  }
+}

package/test.js

@@ -0,0 +1,361 @@
+import { test, describe } from "node:test";
+import assert from "node:assert";
+import transform from "./index.js";
+
+// Helper to normalize whitespace for comparison
+function normalize(str) {
+  return str.replace(/\s+/g, " ").trim();
+}
+
+describe("htm-transform", () => {
+  test("transforms simple element", () => {
+    const input = `const result = html\`<h1 id=hello>Hello world!</h1>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("h1", {
+  id: "hello"
+}, "Hello world!");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms element with dynamic class and content", () => {
+    const input = `const result = html\`<div class=\${className}>\${content}</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  class: className
+}, content);`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms component with props", () => {
+    const input = `const result = html\`<\${Header} name="ToDo's" />\`;`;
+    const output = transform(input);
+    const expected = `const result = h(Header, {
+  name: "ToDo's"
+});`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms multiple root elements into array", () => {
+    const input = `const result = html\`
+  <h1 id=hello>Hello</h1>
+  <div class=world>World!</div>
+\`;`;
+    const output = transform(input);
+    const expected = `const result = [h("h1", {
+    id: "hello"
+  }, "Hello"), h("div", {
+    class: "world"
+  }, "World!")];`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms nested elements", () => {
+    const input = `const result = html\`<div><p>Hello</p><p>World</p></div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", null, h("p", null, "Hello"), h("p", null, "World"));`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms spread props", () => {
+    const input = `const result = html\`<div ...\${props}>Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", props, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms mixed props and spread", () => {
+    const input = `const result = html\`<div class="test" ...\${props}>Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  class: "test",
+  ...props
+}, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms self-closing tags", () => {
+    const input = `const result = html\`<img src="test.jpg" alt="Test" />\`;`;
+    const output = transform(input);
+    const expected = `const result = h("img", {
+  src: "test.jpg",
+  alt: "Test"
+});`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms elements with boolean attributes", () => {
+    const input = `const result = html\`<input type="checkbox" checked disabled />\`;`;
+    const output = transform(input);
+    const expected = `const result = h("input", {
+  type: "checkbox",
+  checked: true,
+  disabled: true
+});`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("preserves other code unchanged", () => {
+    const input = `const foo = 'bar';\nconst result = html\`<div>Test</div>\`;\nconsole.log(foo);`;
+    const output = transform(input);
+    const expected = `const foo = 'bar';
+const result = h("div", null, "Test");
+console.log(foo);`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles custom pragma option", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, { pragma: "React.createElement" });
+    const expected = `const result = React.createElement("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles custom tag name option", () => {
+    const input = `const result = htm\`<div>Test</div>\`;`;
+    const output = transform(input, { tag: "htm" });
+    const expected = `const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms element with multiple dynamic children", () => {
+    const input = `const result = html\`<ul>\${items.map(i => html\`<li>\${i}</li>\`)}</ul>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("ul", null, items.map(i => h("li", null, i)));`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms component with closing tag", () => {
+    const input = `const result = html\`<\${Wrapper}>Content</\${Wrapper}>\`;`;
+    const output = transform(input);
+    const expected = `const result = h(Wrapper, null, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("transforms empty element", () => {
+    const input = `const result = html\`<div></div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", null);`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("does not add import when import option is omitted", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import statement when import config is specified", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from "preact";
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import for React.createElement", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      pragma: "createElement",
+      import: { from: "react", name: "createElement" },
+    });
+    const expected = `import {createElement} from "react";
+const result = createElement("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("does not add import when only from is specified", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact" },
+    });
+    const expected = `const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("does not add import when only name is specified", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { name: "h" },
+    });
+    const expected = `const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("does not duplicate existing import", () => {
+    const input = `import { h } from 'preact';
+const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from 'preact';
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import before existing imports", () => {
+    const input = `import { useState } from 'preact/hooks';
+const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from "preact";
+import {useState} from 'preact/hooks';
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import before code when no imports exist", () => {
+    const input = `const foo = 'bar';
+const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from "preact";
+const foo = 'bar';
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("does not duplicate import when importing same export from same module", () => {
+    const input = `import { h } from 'preact';
+import { render } from 'preact';
+const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from 'preact';
+import {render} from 'preact';
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import even if same module is imported with different exports", () => {
+    const input = `import { render } from 'preact';
+const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from "preact";
+import {render} from 'preact';
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles multiple htm transformations with import", () => {
+    const input = `const a = html\`<div>A</div>\`;
+const b = html\`<span>B</span>\`;`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {h} from "preact";
+const a = h("div", null, "A");
+const b = h("span", null, "B");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("works with different module paths", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "preact/compat", name: "h" },
+    });
+    const expected = `import {h} from "preact/compat";
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("works with scoped packages", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      import: { from: "@preact/signals", name: "h" },
+    });
+    const expected = `import {h} from "@preact/signals";
+const result = h("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("adds import with custom pragma matching name", () => {
+    const input = `const result = html\`<div>Test</div>\`;`;
+    const output = transform(input, {
+      pragma: "myH",
+      import: { from: "my-library", name: "myH" },
+    });
+    const expected = `import {myH} from "my-library";
+const result = myH("div", null, "Test");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles empty file with import config", () => {
+    const input = ``;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = ``;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles file with only imports", () => {
+    const input = `import { useState } from 'preact/hooks';`;
+    const output = transform(input, {
+      import: { from: "preact", name: "h" },
+    });
+    const expected = `import {useState} from 'preact/hooks';`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("spread at beginning means later props override", () => {
+    const input = `const result = html\`<div ...\${props} class="test">Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  ...props,
+  class: "test"
+}, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("spread between props preserves order", () => {
+    const input = `const result = html\`<div id="foo" ...\${props} class="test">Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  id: "foo",
+  ...props,
+  class: "test"
+}, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+});