jsxpression 0.1.28 → 0.1.31

package/src/compile/compile.test.ts

@@ -50,27 +50,27 @@ describe("compile", () => {
   });
 
   it("should compile bare expression containers", () => {
-    const ast = parse("{data.user.name}");
+    const ast = parse("{user.name}");
     const result = compile(ast);
-    expect(result).toBe('"use strict";return data.user.name;');
+    expect(result).toBe('"use strict";return user.name;');
   });
 
   it("should compile bare mathematical expressions", () => {
-    const ast = parse("{data.count * 2}");
+    const ast = parse("{count * 2}");
     const result = compile(ast);
-    expect(result).toBe('"use strict";return (data.count * 2);');
+    expect(result).toBe('"use strict";return (count * 2);');
   });
 
   it("should compile bare method calls", () => {
-    const ast = parse("{data.text.toUpperCase()}");
+    const ast = parse("{text.toUpperCase()}");
     const result = compile(ast);
-    expect(result).toBe('"use strict";return data.text.toUpperCase();');
+    expect(result).toBe('"use strict";return text.toUpperCase();');
   });
 
   it("should compile bare complex expressions", () => {
-    const ast = parse("{data.items.filter(x => x.length > 2).length}");
+    const ast = parse("{items.filter(x => x.length > 2).length}");
     const result = compile(ast);
-    expect(result).toBe('"use strict";return data.items.filter((x) => (x.length > 2)).length;');
+    expect(result).toBe('"use strict";return items.filter((x) => (x.length > 2)).length;');
   });
 
   describe("JSX empty expressions", () => {
@@ -94,14 +94,14 @@ describe("compile", () => {
     });
 
     it("should handle mixed empty and real expressions", () => {
-      const ast = parse("<Text>Hello {}{data.x}{} World</Text>");
+      const ast = parse("<Text>Hello {}{x}{} World</Text>");
       const compiled = compile(ast);
 
       expect(compiled).toContain("return");
       expect(compiled).toContain("Text");
       expect(compiled).toContain("Hello");
       expect(compiled).toContain("World");
-      expect(compiled).toContain("data.x");
+      expect(compiled).toContain("x");
     });
 
     it("should generate valid JavaScript code structure", () => {
@@ -115,59 +115,182 @@ describe("compile", () => {
 
   describe("spread elements", () => {
     it("should compile spread in arrays", () => {
-      const ast = parse("<div>{[...data.items]}</div>");
+      const ast = parse("<div>{[...items]}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, [...data.items]);');
+      expect(result).toBe('"use strict";return h("div", null, [...items]);');
     });
 
     it("should compile spread in objects", () => {
-      const ast = parse("<div style={{ ...data.styles }}>Text</div>");
+      const ast = parse("<div style={{ ...styles }}>Text</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", { style: { ...data.styles } }, "Text");');
+      expect(result).toBe('"use strict";return h("div", { style: { ...styles } }, "Text");');
     });
 
     it("should compile mixed spread and regular elements in arrays", () => {
-      const ast = parse("<div>{[1, ...data.items, 2]}</div>");
+      const ast = parse("<div>{[1, ...items, 2]}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, [1, ...data.items, 2]);');
+      expect(result).toBe('"use strict";return h("div", null, [1, ...items, 2]);');
     });
 
     it("should compile mixed spread and regular properties in objects", () => {
-      const ast = parse("<div style={{ color: 'red', ...data.styles, width: 100 }}>Text</div>");
+      const ast = parse("<div style={{ color: 'red', ...styles, width: 100 }}>Text</div>");
       const result = compile(ast);
-      expect(result).toBe(
-        '"use strict";return h("div", { style: { color: "red", ...data.styles, width: 100 } }, "Text");'
-      );
+      expect(result).toBe('"use strict";return h("div", { style: { color: "red", ...styles, width: 100 } }, "Text");');
     });
 
     it("should compile multiple spreads in arrays", () => {
-      const ast = parse("<div>{[...data.first, ...data.second]}</div>");
+      const ast = parse("<div>{[...first, ...second]}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, [...data.first, ...data.second]);');
+      expect(result).toBe('"use strict";return h("div", null, [...first, ...second]);');
     });
 
     it("should compile multiple spreads in objects", () => {
-      const ast = parse("<div style={{ ...data.base, ...data.override }}>Text</div>");
+      const ast = parse("<div style={{ ...base, ...override }}>Text</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", { style: { ...data.base, ...data.override } }, "Text");');
+      expect(result).toBe('"use strict";return h("div", { style: { ...base, ...override } }, "Text");');
     });
 
     it("should compile spread in function call arguments", () => {
-      const ast = parse("<div>{Math.max(...data.numbers)}</div>");
+      const ast = parse("<div>{Math.max(...numbers)}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, Math.max(...data.numbers));');
+      expect(result).toBe('"use strict";return h("div", null, Math.max(...numbers));');
     });
 
     it("should compile spread with map in function call", () => {
-      const ast = parse("<div>{Math.min(...data.items.map(x => x.price))}</div>");
+      const ast = parse("<div>{Math.min(...items.map(x => x.price))}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, Math.min(...data.items.map((x) => x.price)));');
+      expect(result).toBe('"use strict";return h("div", null, Math.min(...items.map((x) => x.price)));');
     });
 
     it("should compile mixed spread and regular arguments", () => {
-      const ast = parse("<div>{Math.max(0, ...data.numbers, 100)}</div>");
+      const ast = parse("<div>{Math.max(0, ...numbers, 100)}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, Math.max(0, ...numbers, 100));');
+    });
+  });
+
+  describe("const declarations", () => {
+    it("should compile const with literal value", () => {
+      const ast = parse("const x = 42;\nreturn <div>{x}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const x = 42;return h("div", null, x);');
+    });
+
+    it("should compile const with expression value", () => {
+      const ast = parse("const label = name.toUpperCase();\nreturn <div>{label}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const label = name.toUpperCase();return h("div", null, label);');
+    });
+
+    it("should compile multiple const declarations", () => {
+      const ast = parse('const a = 1;\nconst b = "hello";\nreturn <div>{a}{b}</div>');
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const a = 1;const b = "hello";return h("div", null, a, b);');
+    });
+
+    it("should compile const with object value", () => {
+      const ast = parse("const style = { color: 'red' };\nreturn <div style={style}>Text</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const style = { color: "red" };return h("div", { style: style }, "Text");');
+    });
+
+    it("should compile const with array value", () => {
+      const ast = parse("const nums = [1, 2, 3];\nreturn <div>{nums.join(', ')}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const nums = [1, 2, 3];return h("div", null, nums.join(", "));');
+    });
+
+    it("should not auto-wrap bare JSX when declarations present", () => {
+      const ast = parse("const x = 1;\n<div>{x}</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";const x = 1;');
+    });
+  });
+
+  describe("function declarations", () => {
+    it("should compile simple function declaration", () => {
+      const ast = parse("function Badge() {\n  return <span>badge</span>\n}\nreturn <Badge />");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";function Badge() { return h("span", null, "badge"); }return h(Badge, null);');
+    });
+
+    it("should compile function with props parameter", () => {
+      const ast = parse('function Badge({ label }) {\n  return <span>{label}</span>\n}\nreturn <Badge label="hi" />');
+      const result = compile(ast);
+      expect(result).toBe(
+        '"use strict";function Badge({ label }) { return h("span", null, label); }return h(Badge, { label: "hi" });'
+      );
+    });
+
+    it("should compile function with default parameter", () => {
+      const ast = parse("function Badge({ label = 'default' }) {\n  return <span>{label}</span>\n}\nreturn <Badge />");
+      const result = compile(ast);
+      expect(result).toBe(
+        '"use strict";function Badge({ label = "default" }) { return h("span", null, label); }return h(Badge, null);'
+      );
+    });
+
+    it("should compile function with const inside body", () => {
+      const ast = parse(
+        "function Badge({ value }) {\n  const doubled = value * 2;\n  return <span>{doubled}</span>\n}\nreturn <Badge value={5} />"
+      );
+      const result = compile(ast);
+      expect(result).toContain("const doubled = (value * 2);");
+      expect(result).toContain('return h("span", null, doubled);');
+    });
+
+    it("should compile function used as child element", () => {
+      const ast = parse("function Item() {\n  return <span>item</span>\n}\nreturn <div><Item /></div>");
+      const result = compile(ast);
+      expect(result).toContain("function Item()");
+      expect(result).toContain("h(Item, null)");
+      expect(result).toContain('h("div", null, h(Item, null))');
+    });
+
+    it("should compile multiple function declarations", () => {
+      const ast = parse(
+        "function A() {\n  return <span>a</span>\n}\nfunction B() {\n  return <span>b</span>\n}\nreturn <div><A /><B /></div>"
+      );
+      const result = compile(ast);
+      expect(result).toContain("function A()");
+      expect(result).toContain("function B()");
+      expect(result).toContain("h(A, null)");
+      expect(result).toContain("h(B, null)");
+    });
+
+    it("should compile function calling another function", () => {
+      const ast = parse(
+        "function Inner() {\n  return <span>inner</span>\n}\nfunction Outer() {\n  return <div><Inner /></div>\n}\nreturn <Outer />"
+      );
+      const result = compile(ast);
+      expect(result).toContain("function Inner()");
+      expect(result).toContain("function Outer()");
+      expect(result).toContain("h(Inner, null)");
+      expect(result).toContain("h(Outer, null)");
+    });
+
+    it("should emit local function names as references not strings in JSX", () => {
+      const ast = parse("function Badge() {\n  return <span>b</span>\n}\nreturn <Badge />");
+      const result = compile(ast);
+      // Badge should be a reference, not a string
+      expect(result).toContain("h(Badge, null)");
+      expect(result).not.toContain('h("Badge"');
+    });
+  });
+
+  describe("return statements", () => {
+    it("should compile explicit return with JSX", () => {
+      const ast = parse("return <div>hello</div>");
+      const result = compile(ast);
+      expect(result).toBe('"use strict";return h("div", null, "hello");');
+    });
+
+    it("should compile return after const and function", () => {
+      const ast = parse("const x = 1;\nfunction F() {\n  return <span>f</span>\n}\nreturn <div><F />{x}</div>");
       const result = compile(ast);
-      expect(result).toBe('"use strict";return h("div", null, Math.max(0, ...data.numbers, 100));');
+      expect(result).toContain("const x = 1;");
+      expect(result).toContain("function F()");
+      expect(result).toMatch(/return h\("div"/);
     });
   });
 

package/src/compile/compile.ts

@@ -1,72 +1,87 @@
-import type { Expression, PrivateIdentifier, Program, Super, Identifier, Literal } from "acorn";
+import type {
+  BlockStatement,
+  Expression,
+  FunctionDeclaration,
+  Identifier,
+  Literal,
+  Pattern,
+  PrivateIdentifier,
+  Program,
+  Statement,
+  Super,
+  VariableDeclaration,
+} from "acorn";
 
 import {
   isJsxElement,
+  isJsxEmptyExpression,
+  isJsxExpressionContainer,
   isJsxFragment,
   isJsxRoot,
   isJsxText,
-  isJsxExpressionContainer,
-  isJsxEmptyExpression,
-  type JSXRoot,
+  type JSXAttribute,
   type JSXElement,
-  type JSXFragment,
   type JSXEmptyExpression,
+  type JSXFragment,
+  type JSXNameNode,
   type JSXNode,
-  type JSXAttribute,
+  type JSXRoot,
   type JSXSpreadAttribute,
-  type JSXNameNode,
 } from "../jsx.js";
 import { CompilationError } from "./compilation-error.js";
 
 type CompilableExpression = Expression | PrivateIdentifier | Super | JSXElement | JSXFragment | JSXEmptyExpression;
 
 export function compile(ast: Program): string {
-  const root = getRoot(ast);
-  const code = emitJsxRoot(root);
-
-  return `"use strict";return ${code};`;
-}
-
-function getRoot(ast: Program): JSXRoot {
-  for (const declaration of ast.body) {
-    if (declaration.type === "ExpressionStatement" && isJsxRoot(declaration.expression)) {
-      return declaration.expression;
-    }
-    if (declaration.type === "ReturnStatement" && declaration.argument && isJsxRoot(declaration.argument)) {
-      return declaration.argument;
+  const localFunctions = new Set<string>();
+  for (const stmt of ast.body) {
+    if (stmt.type === "FunctionDeclaration" && stmt.id) {
+      localFunctions.add(stmt.id.name);
     }
-    // Handle bare expressions like {data.user.name} which parse as BlockStatement
-    if (declaration.type === "BlockStatement" && declaration.body.length === 1) {
-      const innerStatement = declaration.body[0];
+  }
+
+  const parts: string[] = ['"use strict";'];
+
+  const hasDeclarations = ast.body.some((s) => s.type === "VariableDeclaration" || s.type === "FunctionDeclaration");
+
+  for (const statement of ast.body) {
+    if (statement.type === "VariableDeclaration") {
+      parts.push(emitVariableDeclaration(statement, localFunctions));
+    } else if (statement.type === "FunctionDeclaration") {
+      parts.push(emitFunctionDeclaration(statement as FunctionDeclaration, localFunctions));
+    } else if (statement.type === "ReturnStatement" && statement.argument && isJsxRoot(statement.argument)) {
+      parts.push(`return ${emitJsxRoot(statement.argument, localFunctions)};`);
+    } else if (!hasDeclarations && statement.type === "ExpressionStatement" && isJsxRoot(statement.expression)) {
+      parts.push(`return ${emitJsxRoot(statement.expression, localFunctions)};`);
+    } else if (!hasDeclarations && statement.type === "BlockStatement" && statement.body.length === 1) {
+      const innerStatement = statement.body[0];
       if (innerStatement.type === "ExpressionStatement") {
-        // Create a synthetic JSXExpressionContainer for the bare expression
         const syntheticContainer = {
           type: "JSXExpressionContainer" as const,
           expression: innerStatement.expression as CompilableExpression,
         };
-        return syntheticContainer as JSXRoot;
+        parts.push(`return ${emitJsxRoot(syntheticContainer as JSXRoot, localFunctions)};`);
       }
     }
   }
 
-  throw CompilationError.fromNode("No root JSX element/fragment/expression found", ast);
+  return parts.join("");
 }
 
-function emitJsxRoot(node: JSXRoot): string {
+function emitJsxRoot(node: JSXRoot, localFunctions: Set<string>): string {
   if (isJsxElement(node)) {
-    return emitJsxElement(node);
+    return emitJsxElement(node, localFunctions);
   }
   if (isJsxFragment(node)) {
-    return emitJsxFragment(node);
+    return emitJsxFragment(node, localFunctions);
   }
-  // Handle bare expression containers like {data.user.name}
-  return emitExpression(node.expression);
+  return emitExpression(node.expression, localFunctions);
 }
 
-function emitJsxElement(node: JSXElement): string {
-  const name = emitJsxName(node.openingElement.name as JSXNameNode);
-  const attributes = emitAttributes(node.openingElement.attributes);
-  const children = emitJsxChildren(node.children);
+function emitJsxElement(node: JSXElement, localFunctions: Set<string>): string {
+  const name = emitJsxName(node.openingElement.name as JSXNameNode, localFunctions);
+  const attributes = emitAttributes(node.openingElement.attributes, localFunctions);
+  const children = emitJsxChildren(node.children, localFunctions);
 
   if (children.length > 0) {
     return `h(${name}, ${attributes}, ${children.join(", ")})`;
@@ -75,18 +90,21 @@ function emitJsxElement(node: JSXElement): string {
   return `h(${name}, ${attributes})`;
 }
 
-function emitJsxFragment(node: JSXFragment): string {
-  const children = emitJsxChildren(node.children);
+function emitJsxFragment(node: JSXFragment, localFunctions: Set<string>): string {
+  const children = emitJsxChildren(node.children, localFunctions);
   return `[${children.join(", ")}]`;
 }
 
-function emitJsxName(nameNode: JSXNameNode): string {
+function emitJsxName(nameNode: JSXNameNode, localFunctions: Set<string>): string {
   switch (nameNode.type) {
     case "JSXIdentifier":
+      if (localFunctions.has(nameNode.name)) {
+        return nameNode.name;
+      }
       return JSON.stringify(nameNode.name);
     case "JSXMemberExpression": {
-      const left = emitJsxName(nameNode.object);
-      const right = emitJsxName(nameNode.property);
+      const left = emitJsxName(nameNode.object, localFunctions);
+      const right = emitJsxName(nameNode.property, localFunctions);
       return JSON.stringify(JSON.parse(left) + "." + JSON.parse(right));
     }
     default:
@@ -94,7 +112,7 @@ function emitJsxName(nameNode: JSXNameNode): string {
   }
 }
 
-function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[]): string {
+function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[], localFunctions: Set<string>): string {
   const parts: string[] = [];
   let currentObj: string[] = [];
 
@@ -108,7 +126,7 @@ function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[]): stri
   for (const attribute of attributes) {
     if (attribute.type === "JSXSpreadAttribute") {
       flushCurrent();
-      parts.push(`(${emitExpression(attribute.argument as CompilableExpression)})`);
+      parts.push(`(${emitExpression(attribute.argument as CompilableExpression, localFunctions)})`);
       continue;
     }
 
@@ -124,7 +142,7 @@ function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[]): stri
     } else if (attribute.value.type === "Literal") {
       value = JSON.stringify(attribute.value.value);
     } else if (attribute.value.type === "JSXExpressionContainer") {
-      value = emitExpression(attribute.value.expression as CompilableExpression);
+      value = emitExpression(attribute.value.expression as CompilableExpression, localFunctions);
     } else {
       throw CompilationError.fromNode("Unsupported attribute value", attribute.value);
     }
@@ -145,7 +163,7 @@ function emitAttributes(attributes: (JSXAttribute | JSXSpreadAttribute)[]): stri
   return `Object.assign({}, ${parts.join(", ")})`;
 }
 
-function emitJsxChildren(children: JSXNode[]): string[] {
+function emitJsxChildren(children: JSXNode[], localFunctions: Set<string>): string[] {
   const result: string[] = [];
 
   for (const child of children) {
@@ -155,14 +173,13 @@ function emitJsxChildren(children: JSXNode[]): string[] {
         result.push(JSON.stringify(text));
       }
     } else if (isJsxExpressionContainer(child)) {
-      // Skip empty expressions {} - they don't contribute any content
       if (!isJsxEmptyExpression(child.expression)) {
-        result.push(emitExpression(child.expression as CompilableExpression));
+        result.push(emitExpression(child.expression as CompilableExpression, localFunctions));
       }
     } else if (isJsxElement(child)) {
-      result.push(emitJsxElement(child));
+      result.push(emitJsxElement(child, localFunctions));
     } else if (isJsxFragment(child)) {
-      result.push(emitJsxFragment(child));
+      result.push(emitJsxFragment(child, localFunctions));
     }
   }
 
@@ -171,7 +188,7 @@ function emitJsxChildren(children: JSXNode[]): string[] {
 
 const TRAILING_PLUS_RX = /\+\s*\+\s*$/;
 
-function emitExpression(node: CompilableExpression): string {
+function emitExpression(node: CompilableExpression, localFunctions: Set<string>): string {
   switch (node.type) {
     case "Literal":
       return JSON.stringify(node.value);
@@ -181,23 +198,27 @@ function emitExpression(node: CompilableExpression): string {
       const bits: string[] = [];
       node.quasis.forEach((quasi, index) => {
         bits.push(JSON.stringify(quasi.value.cooked ?? ""));
-
         if (node.expressions.length > index) {
-          bits.push(`+(${emitExpression(node.expressions[index])})+`);
+          bits.push(`+(${emitExpression(node.expressions[index], localFunctions)})+`);
         }
       });
-
       return bits.join("").replace(TRAILING_PLUS_RX, "") || '""';
     }
     case "ParenthesizedExpression":
-      return `(${emitExpression(node.expression)})`;
+      return `(${emitExpression(node.expression, localFunctions)})`;
     case "UnaryExpression":
-      return `${node.operator}${emitExpression(node.argument)}`;
+      return `${node.operator}${emitExpression(node.argument, localFunctions)}`;
     case "BinaryExpression":
     case "LogicalExpression":
-      return `(${emitExpression(node.left)} ${node.operator} ${emitExpression(node.right)})`;
+      return `(${emitExpression(node.left, localFunctions)} ${node.operator} ${emitExpression(
+        node.right,
+        localFunctions
+      )})`;
     case "ConditionalExpression":
-      return `(${emitExpression(node.test)}?${emitExpression(node.consequent)}:${emitExpression(node.alternate)})`;
+      return `(${emitExpression(node.test, localFunctions)}?${emitExpression(
+        node.consequent,
+        localFunctions
+      )}:${emitExpression(node.alternate, localFunctions)})`;
     case "ArrayExpression":
       return `[${node.elements
         .map((element) => {
@@ -205,56 +226,56 @@ function emitExpression(node: CompilableExpression): string {
             return "undefined";
           }
           if (element.type === "SpreadElement") {
-            return `...${emitExpression(element.argument as CompilableExpression)}`;
+            return `...${emitExpression(element.argument as CompilableExpression, localFunctions)}`;
           }
-          return emitExpression(element as CompilableExpression);
+          return emitExpression(element as CompilableExpression, localFunctions);
         })
         .join(", ")}]`;
     case "ObjectExpression": {
       const keyValuePairs = node.properties
         .map((property) => {
           if (property.type === "SpreadElement") {
-            return `...${emitExpression(property.argument as CompilableExpression)}`;
+            return `...${emitExpression(property.argument as CompilableExpression, localFunctions)}`;
           }
-
           const key = getAstKeyString(property.key as Identifier | Literal);
-          return `${key}: ${emitExpression(property.value)}`;
+          return `${key}: ${emitExpression(property.value, localFunctions)}`;
         })
         .join(", ");
       return `{ ${keyValuePairs} }`;
     }
     case "MemberExpression": {
-      const obj = emitExpression(node.object);
+      const obj = emitExpression(node.object, localFunctions);
       let prop: string;
       if (node.computed) {
-        prop = `[${emitExpression(node.property)}]`;
+        prop = `[${emitExpression(node.property, localFunctions)}]`;
       } else {
         prop = `.${getAstKeyString(node.property as Identifier | Literal)}`;
       }
       return `${obj}${prop}`;
     }
     case "CallExpression": {
-      const callee = emitExpression(node.callee);
+      const callee = emitExpression(node.callee, localFunctions);
       const args = node.arguments
         .map((argument) => {
           if (argument.type === "SpreadElement") {
-            return `...${emitExpression(argument.argument as CompilableExpression)}`;
+            return `...${emitExpression(argument.argument as CompilableExpression, localFunctions)}`;
           }
-          return emitExpression(argument as CompilableExpression);
+          return emitExpression(argument as CompilableExpression, localFunctions);
         })
         .join(", ");
       return `${callee}(${args})`;
     }
     case "ArrowFunctionExpression": {
-      const params = node.params.map((param) => emitExpression(param as CompilableExpression)).join(", ");
-      // analyze() ensures this is not a BlockStatement
-      const body = emitExpression(node.body as CompilableExpression);
+      const params = node.params
+        .map((param) => emitExpression(param as CompilableExpression, localFunctions))
+        .join(", ");
+      const body = emitExpression(node.body as CompilableExpression, localFunctions);
       return `(${params}) => ${body}`;
     }
     case "JSXElement":
-      return emitJsxElement(node);
+      return emitJsxElement(node, localFunctions);
     case "JSXFragment":
-      return emitJsxFragment(node);
+      return emitJsxFragment(node, localFunctions);
     case "JSXEmptyExpression":
       return "null";
     default:
@@ -262,14 +283,83 @@ function emitExpression(node: CompilableExpression): string {
   }
 }
 
+function emitVariableDeclaration(node: VariableDeclaration, localFunctions: Set<string>): string {
+  const decls = node.declarations
+    .map((d) => {
+      const name = (d.id as Identifier).name;
+      const init = d.init ? emitExpression(d.init as CompilableExpression, localFunctions) : "undefined";
+      return `${name} = ${init}`;
+    })
+    .join(", ");
+  return `const ${decls};`;
+}
+
+function emitFunctionDeclaration(node: FunctionDeclaration, localFunctions: Set<string>): string {
+  const name = node.id!.name;
+  const params = node.params.map((p) => emitParam(p, localFunctions)).join(", ");
+  const body = emitFunctionBody(node.body as BlockStatement, localFunctions);
+  return `function ${name}(${params}) ${body}`;
+}
+
+function emitFunctionBody(body: BlockStatement, localFunctions: Set<string>): string {
+  const statements = body.body.map((s) => emitStatement(s, localFunctions));
+  return `{ ${statements.join(" ")} }`;
+}
+
+function emitStatement(statement: Statement, localFunctions: Set<string>): string {
+  switch (statement.type) {
+    case "ReturnStatement":
+      if (!statement.argument) {
+        return "return;";
+      }
+      return `return ${emitExpression(statement.argument as CompilableExpression, localFunctions)};`;
+    case "VariableDeclaration":
+      return emitVariableDeclaration(statement, localFunctions);
+    case "ExpressionStatement":
+      return `${emitExpression(statement.expression as CompilableExpression, localFunctions)};`;
+    default:
+      throw CompilationError.fromNode(`Unsupported statement: ${statement.type}`, statement);
+  }
+}
+
+function emitParam(param: Pattern, localFunctions: Set<string>): string {
+  switch (param.type) {
+    case "Identifier":
+      return (param as Identifier).name;
+    case "ObjectPattern": {
+      const props = (param as any).properties.map((p: any) => {
+        if (p.type === "RestElement") {
+          return `...${emitParam(p.argument, localFunctions)}`;
+        }
+        const key = (p.key as Identifier).name;
+        if (p.value.type === "AssignmentPattern") {
+          return `${key} = ${emitExpression(p.value.right as CompilableExpression, localFunctions)}`;
+        }
+        if (p.value !== p.key && p.value.type === "Identifier" && p.value.name !== key) {
+          return `${key}: ${emitParam(p.value, localFunctions)}`;
+        }
+        return key;
+      });
+      return `{ ${props.join(", ")} }`;
+    }
+    case "AssignmentPattern":
+      return `${emitParam((param as any).left, localFunctions)} = ${emitExpression(
+        (param as any).right as CompilableExpression,
+        localFunctions
+      )}`;
+    case "RestElement":
+      return `...${emitParam((param as any).argument, localFunctions)}`;
+    default:
+      throw CompilationError.fromNode(`Unsupported parameter: ${param.type}`, param);
+  }
+}
+
 function getAstKeyString(node: Identifier | Literal): string {
   if (node.type === "Identifier") {
     return node.name;
   } else if (node.type === "Literal") {
     return JSON.stringify(node.value);
   } else {
-    // This should never happen due to type constraints but
-    // if JSX ever changes this could be possible!
     throw CompilationError.fromNode("Unsupported key type", node);
   }
 }