react-hcl 0.1.0

package/dist/index.js

@@ -0,0 +1,320 @@
+// src/hcl-serializer.ts
+var RAW_HCL_SYMBOL = /* @__PURE__ */ Symbol.for("react-hcl:RawHCL");
+function raw(value) {
+  return {
+    [RAW_HCL_SYMBOL]: true,
+    value,
+    toString() {
+      return value;
+    }
+  };
+}
+var BLOCK_HCL_SYMBOL = /* @__PURE__ */ Symbol.for("react-hcl:BlockHCL");
+function block(value) {
+  return { [BLOCK_HCL_SYMBOL]: true, value };
+}
+var ATTRIBUTE_HCL_SYMBOL = /* @__PURE__ */ Symbol.for("react-hcl:AttributeHCL");
+function attribute(value) {
+  return { [ATTRIBUTE_HCL_SYMBOL]: true, value };
+}
+function adjustIndent(text, targetIndent = 2) {
+  const rawLines = text.split("\n");
+  let start = 0;
+  while (start < rawLines.length && rawLines[start].trim() === "") start++;
+  let end = rawLines.length - 1;
+  while (end > start && rawLines[end].trim() === "") end--;
+  const lines = rawLines.slice(start, end + 1);
+  if (lines.length === 0) return "";
+  let minIndent = Infinity;
+  for (const line of lines) {
+    if (line.trim() === "") continue;
+    const leadingSpaces = line.search(/\S|$/);
+    if (leadingSpaces < minIndent) minIndent = leadingSpaces;
+  }
+  if (minIndent === Infinity) minIndent = 0;
+  const pad = " ".repeat(targetIndent);
+  return lines.map((line) => {
+    if (line.trim() === "") return "";
+    return pad + line.slice(minIndent);
+  }).join("\n");
+}
+
+// src/components/data-source.ts
+function DataSource(props) {
+  const { type, name, ref, children, attributes: extraAttrs, ...rest } = props;
+  const attributes = { ...rest, ...extraAttrs };
+  if (ref) {
+    ref.__refMeta = { blockType: "data", type, name };
+  }
+  if (attributes.provider?.__refMeta) {
+    const meta = attributes.provider.__refMeta;
+    attributes.provider = raw(`${meta.type}.${meta.alias || meta.name}`);
+  }
+  if (attributes.depends_on && Array.isArray(attributes.depends_on)) {
+    attributes.depends_on = attributes.depends_on.map((dep) => {
+      if (dep.__refMeta) {
+        const meta = dep.__refMeta;
+        if (meta.blockType === "data") {
+          return raw(`data.${meta.type}.${meta.name}`);
+        }
+        return raw(`${meta.type}.${meta.name}`);
+      }
+      return dep;
+    });
+  }
+  const rawChildren = Array.isArray(children) ? children[0] : children;
+  const hasInnerText = typeof rawChildren === "string";
+  return {
+    blockType: "data",
+    type,
+    name,
+    attributes: hasInnerText ? {} : attributes,
+    ...hasInnerText ? { innerText: adjustIndent(rawChildren, 2) } : {}
+  };
+}
+
+// src/components/locals.ts
+function Locals(props) {
+  const { children, ...attributes } = props;
+  return { blockType: "locals", attributes };
+}
+
+// src/components/module.ts
+function Module(props) {
+  const { name, ref, children, attributes: extraAttrs, ...rest } = props;
+  const attributes = { ...rest, ...extraAttrs };
+  if (ref) {
+    ref.__refMeta = { blockType: "module", type: "module", name };
+  }
+  if (attributes.depends_on && Array.isArray(attributes.depends_on)) {
+    attributes.depends_on = attributes.depends_on.map((dep) => {
+      if (dep.__refMeta) {
+        const meta = dep.__refMeta;
+        if (meta.blockType === "module") {
+          return raw(`module.${meta.name}`);
+        }
+        if (meta.blockType === "data") {
+          return raw(`data.${meta.type}.${meta.name}`);
+        }
+        return raw(`${meta.type}.${meta.name}`);
+      }
+      return dep;
+    });
+  }
+  if (attributes.providers && typeof attributes.providers === "object" && !Array.isArray(attributes.providers)) {
+    const resolved = {};
+    for (const [key, val] of Object.entries(attributes.providers)) {
+      if (val?.__refMeta) {
+        const meta = val.__refMeta;
+        resolved[key] = raw(`${meta.type}.${meta.alias || meta.name}`);
+      } else {
+        resolved[key] = val;
+      }
+    }
+    attributes.providers = attribute(resolved);
+  }
+  const rawChildren = Array.isArray(children) ? children[0] : children;
+  const hasInnerText = typeof rawChildren === "string";
+  return {
+    blockType: "module",
+    name,
+    attributes: hasInnerText ? {} : attributes,
+    ...hasInnerText ? { innerText: adjustIndent(rawChildren, 2) } : {}
+  };
+}
+
+// src/components/output.ts
+function Output(props) {
+  const { name, children, ...attributes } = props;
+  return { blockType: "output", name, attributes };
+}
+
+// src/components/provider.ts
+function Provider(props) {
+  const { type, ref, alias, children, ...rest } = props;
+  if (ref) {
+    ref.__refMeta = {
+      blockType: "provider",
+      type,
+      name: alias || type,
+      ...alias ? { alias } : {}
+    };
+  }
+  const attributes = alias ? { alias, ...rest } : rest;
+  return { blockType: "provider", type, attributes };
+}
+
+// src/components/resource.ts
+function Resource(props) {
+  const { type, name, ref, children, attributes: extraAttrs, ...rest } = props;
+  const attributes = { ...rest, ...extraAttrs };
+  if (ref) {
+    ref.__refMeta = { blockType: "resource", type, name };
+  }
+  if (attributes.provider?.__refMeta) {
+    const meta = attributes.provider.__refMeta;
+    attributes.provider = raw(`${meta.type}.${meta.alias || meta.name}`);
+  }
+  if (attributes.depends_on && Array.isArray(attributes.depends_on)) {
+    attributes.depends_on = attributes.depends_on.map((dep) => {
+      if (dep.__refMeta) {
+        const meta = dep.__refMeta;
+        if (meta.blockType === "data") {
+          return raw(`data.${meta.type}.${meta.name}`);
+        }
+        return raw(`${meta.type}.${meta.name}`);
+      }
+      return dep;
+    });
+  }
+  const rawChildren = Array.isArray(children) ? children[0] : children;
+  const hasInnerText = typeof rawChildren === "string";
+  return {
+    blockType: "resource",
+    type,
+    name,
+    attributes: hasInnerText ? {} : attributes,
+    ...hasInnerText ? { innerText: adjustIndent(rawChildren, 2) } : {}
+  };
+}
+
+// src/components/terraform.ts
+function Terraform(props) {
+  const { children, ...attributes } = props;
+  const terraformAttributes = { ...attributes };
+  const requiredProviders = terraformAttributes.required_providers;
+  if (typeof requiredProviders === "object" && requiredProviders !== null && !Array.isArray(requiredProviders)) {
+    terraformAttributes.required_providers = block(requiredProviders);
+  }
+  const rawChildren = Array.isArray(children) ? children[0] : children;
+  const hasInnerText = typeof rawChildren === "string";
+  return {
+    blockType: "terraform",
+    attributes: hasInnerText ? {} : terraformAttributes,
+    ...hasInnerText ? { innerText: rawChildren } : {}
+  };
+}
+
+// src/components/variable.ts
+function Variable(props) {
+  const { name, type, children, ...rest } = props;
+  const attributes = type ? { type: raw(type), ...rest } : rest;
+  return { blockType: "variable", name, attributes };
+}
+
+// src/helpers/tf.ts
+var tf = {
+  /** tf.var("name") → var.name */
+  var(name) {
+    return raw(`var.${name}`);
+  },
+  /** tf.local("name") → local.name */
+  local(name) {
+    return raw(`local.${name}`);
+  }
+};
+
+// src/hooks/use-ref.ts
+var RAW_HCL_SYMBOL2 = /* @__PURE__ */ Symbol.for("react-hcl:RawHCL");
+var HOOK_KEY = /* @__PURE__ */ Symbol.for("react-hcl:hookState");
+function getState() {
+  if (!globalThis[HOOK_KEY]) {
+    globalThis[HOOK_KEY] = { hookIndex: 0, hookStore: [] };
+  }
+  return globalThis[HOOK_KEY];
+}
+function buildPrefix(meta) {
+  if (meta.blockType === "module") {
+    return `module.${meta.name}`;
+  }
+  if (meta.blockType === "data") {
+    return `data.${meta.type}.${meta.name}`;
+  }
+  return `${meta.type}.${meta.name}`;
+}
+var UNRESOLVED_PLACEHOLDER = "__UNRESOLVED_REF__";
+function createLazyRawHCL(resolvePath) {
+  const base = {
+    [RAW_HCL_SYMBOL2]: true,
+    get value() {
+      return resolvePath();
+    },
+    toString() {
+      return resolvePath();
+    }
+  };
+  return new Proxy(base, {
+    get(target, prop) {
+      if (typeof prop === "symbol") {
+        return target[prop];
+      }
+      if (prop === "value" || prop === "toString") {
+        return target[prop];
+      }
+      return createLazyRawHCL(() => `${resolvePath()}.${prop}`);
+    }
+  });
+}
+function useRef() {
+  const state = getState();
+  const idx = state.hookIndex++;
+  if (idx < state.hookStore.length) {
+    return state.hookStore[idx];
+  }
+  let meta;
+  const getMeta = () => {
+    if (!meta) {
+      return {
+        blockType: "resource",
+        type: UNRESOLVED_PLACEHOLDER,
+        name: UNRESOLVED_PLACEHOLDER
+      };
+    }
+    return meta;
+  };
+  const proxy = new Proxy({}, {
+    get(_target, prop) {
+      if (typeof prop === "symbol") return void 0;
+      if (prop === "__refMeta") {
+        return meta;
+      }
+      if (prop === "__dependsOnValue") {
+        return createLazyRawHCL(() => buildPrefix(getMeta()));
+      }
+      if (prop === "__providerValue") {
+        return createLazyRawHCL(() => {
+          const m = getMeta();
+          return `${m.type}.${m.alias || m.name}`;
+        });
+      }
+      return createLazyRawHCL(() => `${buildPrefix(getMeta())}.${prop}`);
+    },
+    set(_target, prop, value) {
+      if (prop === "__refMeta") {
+        meta = value;
+        return true;
+      }
+      return true;
+    }
+  });
+  state.hookStore.push(proxy);
+  return proxy;
+}
+
+// src/jsx-runtime.ts
+var Fragment = "Fragment";
+export {
+  DataSource,
+  Fragment,
+  Locals,
+  Module,
+  Output,
+  Provider,
+  Resource,
+  Terraform,
+  Variable,
+  block,
+  raw,
+  tf,
+  useRef
+};

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Custom JSX runtime for react-hcl.
+ *
+ * This is NOT React — it is a minimal JSX runtime that produces plain JSXElement objects
+ * (a simple { type, props, children } structure) instead of React elements.
+ *
+ * How it integrates:
+ *   - esbuild's `jsx: "automatic"` + `jsxImportSource: "react-hcl"` causes
+ *     TSX files to import jsx/jsxs from "react-hcl/jsx-runtime" automatically.
+ *   - When users write <Resource type="aws_vpc" name="main" />, esbuild transforms it to
+ *     jsx(Resource, { type: "aws_vpc", name: "main" }) which returns a JSXElement.
+ *   - The CLI (cli.ts) then renders the JSXElement tree by calling component functions
+ *     and collecting their output.
+ *
+ * JSX automatic runtime contract:
+ *   - `jsx(type, props)` is called for elements with 0 or 1 child
+ *   - `jsxs(type, props)` is called for elements with 2+ children
+ *   - `children` is passed inside `props` (not as a separate argument)
+ *   - `Fragment` is used for <> ... </> syntax
+ */
+type ComponentFunction = Function;
+/** The runtime representation of a JSX element, produced by jsx() and jsxs(). */
+export type JSXElement = {
+    type: string | ComponentFunction;
+    props: Record<string, any>;
+    children: any[];
+};
+/**
+ * Called by the JSX automatic transform for elements with 0 or 1 child.
+ * Separates `children` from props and wraps a single child in an array.
+ */
+export declare function jsx(type: string | ComponentFunction, props: Record<string, any>): JSXElement;
+/**
+ * Called by the JSX automatic transform for elements with 2+ children.
+ * Children are already an array from the transform; normalizes edge cases.
+ */
+export declare function jsxs(type: string | ComponentFunction, props: Record<string, any>): JSXElement;
+/** Fragment component — used for <> ... </> grouping without a wrapper element. */
+export declare const Fragment = "Fragment";
+export {};

package/dist/jsx-runtime.js

@@ -0,0 +1,23 @@
+// src/jsx-runtime.ts
+function jsx(type, props) {
+  const { children, ...restProps } = props;
+  return {
+    type,
+    props: restProps,
+    children: children != null ? [children] : []
+  };
+}
+function jsxs(type, props) {
+  const { children, ...restProps } = props;
+  return {
+    type,
+    props: restProps,
+    children: Array.isArray(children) ? children : children != null ? [children] : []
+  };
+}
+var Fragment = "Fragment";
+export {
+  Fragment,
+  jsx,
+  jsxs
+};

package/dist/renderer.d.ts

@@ -0,0 +1,12 @@
+import type { Block } from "./blocks";
+import type { JSXElement } from "./jsx-runtime";
+type Renderable = JSXElement | JSXElement[] | string | null;
+type RootRenderable = Renderable | (() => Renderable);
+/**
+ * 2-pass rendering:
+ *   Pass 1: Clear hook store, render tree to collect ref metadata (result discarded).
+ *   Pass 2: Reset hook index only (reuse proxies with metadata), render tree (result kept).
+ *   Validation: Check that all refs in hookStore have __refMeta set.
+ */
+export declare function render(element: RootRenderable): Block[];
+export {};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "react-hcl",
+  "version": "0.1.0",
+  "description": "TSX to Terraform (.tf) transpiler with a custom JSX runtime",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    }
+  },
+  "bin": {
+    "react-hcl": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run build:js && bun run build:types",
+    "build:js": "bun run build:js:cli && bun run build:js:index && bun run build:js:jsx-runtime",
+    "build:js:cli": "bun x esbuild src/cli.ts --outfile=dist/cli.js --format=esm --platform=node --external:esbuild --bundle --banner:js='#!/usr/bin/env node'",
+    "build:js:index": "bun x esbuild src/index.ts --outfile=dist/index.js --format=esm --platform=node --external:esbuild --bundle",
+    "build:js:jsx-runtime": "bun x esbuild src/jsx-runtime.ts --outfile=dist/jsx-runtime.js --format=esm --platform=node --bundle",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "lint": "bunx biome check .",
+    "lint:fix": "bunx biome check --fix .",
+    "test": "bun test",
+    "tf:validate:samples": "bash scripts/terraform-validate-samples.sh",
+    "prepack": "bun run build"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.15",
+    "@types/bun": "^1.3.9",
+    "hcl2-parser": "^1.0.3"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "esbuild": "^0.27.3"
+  }
+}