htm-transform 0.1.0 → 0.1.2

package/README.md

@@ -6,7 +6,7 @@ A small alternative to [babel-plugin-htm](https://www.npmjs.com/package/babel-pl
 ## Quickstart
 
 ```js
-import transform from "@jakelazaroff/htm-transform";
+import transform from "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

@@ -364,6 +364,16 @@ function resolvePlaceholders(nodes, placeholders) {
   return nodes.map(resolve).flat();
 }
 
+/**
+ * Checks if a property key needs to be quoted
+ * @param {string} key - The property key
+ * @returns {boolean} True if the key needs to be quoted
+ */
+function needsQuoting(key) {
+  // Check if key is a valid JavaScript identifier
+  return !/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key);
+}
+
 /**
  * Converts element nodes to AST nodes representing h() calls
  * @param {ElementNode | TextNode | ExpressionNode} node - The node to convert
@@ -409,7 +419,9 @@ function elementsToAST(node, pragma) {
           }
           return {
             type: "Property",
-            key: { type: "Identifier", name: key },
+            key: needsQuoting(key)
+              ? { type: "Literal", value: key }
+              : { type: "Identifier", name: key },
             value: value.type === "expression" ? value.expr : { type: "Literal", value },
             kind: "init",
             method: false,
@@ -428,7 +440,9 @@ function elementsToAST(node, pragma) {
           type: "ObjectExpression",
           properties: propsEntries.map(([key, value]) => ({
             type: "Property",
-            key: { type: "Identifier", name: key },
+            key: needsQuoting(key)
+              ? { type: "Literal", value: key }
+              : { type: "Identifier", name: key },
             value: value.type === "expression" ? value.expr : { type: "Literal", value },
             kind: "init",
             method: false,

package/jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "checkJs": true,
+    "strict": true,
+    "lib": ["ES2022"]
+  },
+  "include": ["index.js", "test.js"],
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "htm-transform",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Transform htm tagged templates into h function calls using acorn",
   "type": "module",
   "main": "index.js",
+  "types": "index.js",
+  "exports": {
+    ".": {
+      "types": "./index.js",
+      "default": "./index.js"
+    }
+  },
   "scripts": {
     "test": "node --test test.js",
     "test:watch": "node --test --watch test.js"

package/test.js

@@ -358,4 +358,26 @@ const result = myH("div", null, "Test");`;
 
     assert.strictEqual(normalize(output), normalize(expected));
   });
+
+  test("handles attributes with hyphens", () => {
+    const input = `const result = html\`<div data-value="test" aria-label="label">Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  "data-value": "test",
+  "aria-label": "label"
+}, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
+
+  test("handles dynamic attributes with hyphens", () => {
+    const input = `const result = html\`<div data-id=\${id} aria-label=\${label}>Content</div>\`;`;
+    const output = transform(input);
+    const expected = `const result = h("div", {
+  "data-id": id,
+  "aria-label": label
+}, "Content");`;
+
+    assert.strictEqual(normalize(output), normalize(expected));
+  });
 });

package/.claude/settings.local.json

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