@barefootjs/hono 0.1.0

package/dist/index.js

@@ -0,0 +1,632 @@
+// src/adapter/hono-adapter.ts
+import {
+  JsxAdapter,
+  isBooleanAttr,
+  rewriteImportsForTemplate,
+  emitIRNode,
+  emitAttrValue,
+  buildLoopChainExpr
+} from "@barefootjs/jsx";
+import { BF_SCOPE, BF_HOST, BF_AT, BF_ROOT, BF_PROPS } from "@barefootjs/shared";
+function applyHonoLoopChain(loop) {
+  return buildLoopChainExpr({
+    base: loop.array,
+    sortComparator: loop.sortComparator,
+    filterPredicate: loop.filterPredicate,
+    chainOrder: loop.chainOrder
+  });
+}
+
+class HonoAdapter extends JsxAdapter {
+  name = "hono";
+  extension = ".tsx";
+  clientShimSource = "@barefootjs/hono/client-shim";
+  acceptsTemplateCall = () => true;
+  jsxConfig = { preserveTypes: true };
+  options;
+  isClientComponent = false;
+  hasClientInteractivity = false;
+  currentComponentHasProps = false;
+  rewriteRelativeImport;
+  loopKeyStack = [];
+  constructor(options = {}) {
+    super();
+    this.options = {
+      clientJsBasePath: options.clientJsBasePath ?? "/static/components/",
+      barefootJsPath: options.barefootJsPath ?? "/static/components/barefoot.js",
+      clientJsFilename: options.clientJsFilename
+    };
+    if (options.name)
+      this.name = options.name;
+  }
+  generate(ir, options) {
+    this.componentName = ir.metadata.componentName;
+    this.isClientComponent = ir.metadata.isClientComponent;
+    this.rewriteRelativeImport = options?.rewriteRelativeImport;
+    const component = this.generateComponent(ir);
+    const types = this.generateTypes(ir, component);
+    const componentCode = [types, component].filter(Boolean).join(`
+`);
+    const imports = this.generateImports(ir, componentCode);
+    const moduleConstants = this.generateModuleLevelContextBindings(ir);
+    const defaultExport = ir.metadata.hasDefaultExport ? `
+export default ${this.componentName}` : "";
+    const sections = {
+      imports,
+      types: types || "",
+      component,
+      defaultExport,
+      moduleConstants
+    };
+    const template = [imports, moduleConstants, types, component].filter(Boolean).join(`
+
+`) + defaultExport;
+    const result = {
+      template,
+      sections,
+      types: types || undefined,
+      extension: this.extension
+    };
+    this.rewriteRelativeImport = undefined;
+    return result;
+  }
+  generateModuleLevelContextBindings(ir) {
+    const lines = [];
+    for (const c of ir.metadata.localConstants) {
+      if (!c.isModule)
+        continue;
+      if (c.isExported)
+        continue;
+      if (c.systemConstructKind !== "createContext")
+        continue;
+      if (!c.value)
+        continue;
+      const keyword = c.declarationKind ?? "const";
+      const value = this.jsxConfig.preserveTypes ? c.typedValue ?? c.value : c.value;
+      lines.push(`${keyword} ${c.name} = ${value}`);
+    }
+    return lines.join(`
+`);
+  }
+  generateImports(ir, componentCode) {
+    const lines = [];
+    const utilImports = [];
+    for (const util of ["bfComment", "bfText", "bfTextEnd"]) {
+      if (new RegExp(`\\b${util}\\b`).test(componentCode)) {
+        utilImports.push(util);
+      }
+    }
+    if (utilImports.length > 0) {
+      lines.push(`import { ${utilImports.join(", ")} } from '@barefootjs/hono/utils'`);
+    }
+    if (componentCode.includes("<Suspense")) {
+      lines.push(`import { Suspense } from 'hono/jsx/streaming'`);
+    }
+    const templateImports = rewriteImportsForTemplate(ir.metadata.templateImports, this.clientShimSource, this.rewriteRelativeImport);
+    for (const imp of templateImports) {
+      if (imp.specifiers.length === 0) {
+        if (!imp.isTypeOnly) {
+          lines.push(`import '${imp.source}'`);
+        }
+        continue;
+      }
+      if (imp.isTypeOnly) {
+        lines.push(`import type ${this.formatImportSpecifiers(imp.specifiers)} from '${imp.source}'`);
+      } else {
+        lines.push(`import ${this.formatImportSpecifiers(imp.specifiers)} from '${imp.source}'`);
+      }
+    }
+    if (/\bprovideContextSSR\(/.test(componentCode)) {
+      lines.push(`import { provideContextSSR } from '@barefootjs/hono/client-shim'`);
+    }
+    return lines.join(`
+`);
+  }
+  generateTypes(ir, componentBody) {
+    const lines = [];
+    if (componentBody && ir.metadata.typeDefinitions.length > 0) {
+      const propsTypeName2 = this.getPropsTypeName(ir);
+      const seedText = [
+        componentBody,
+        propsTypeName2 && !ir.metadata.propsObjectName ? propsTypeName2 : "",
+        ...ir.metadata.namedExports.filter((block) => block.source === null).flatMap((block) => block.specifiers.map((s) => s.name))
+      ].filter(Boolean).join(`
+`);
+      const included = new Set;
+      for (const typeDef of ir.metadata.typeDefinitions) {
+        if (new RegExp(`\\b${typeDef.name}\\b`).test(seedText)) {
+          included.add(typeDef.name);
+        }
+      }
+      let changed = true;
+      while (changed) {
+        changed = false;
+        for (const typeDef of ir.metadata.typeDefinitions) {
+          if (included.has(typeDef.name))
+            continue;
+          for (const name of included) {
+            const includedDef = ir.metadata.typeDefinitions.find((t) => t.name === name);
+            if (includedDef && new RegExp(`\\b${typeDef.name}\\b`).test(includedDef.definition)) {
+              included.add(typeDef.name);
+              changed = true;
+              break;
+            }
+          }
+        }
+      }
+      for (const typeDef of ir.metadata.typeDefinitions) {
+        if (included.has(typeDef.name))
+          lines.push(typeDef.definition);
+      }
+    } else {
+      for (const typeDef of ir.metadata.typeDefinitions) {
+        lines.push(typeDef.definition);
+      }
+    }
+    const propsTypeName = this.getPropsTypeName(ir);
+    if (propsTypeName && !ir.metadata.propsObjectName) {
+      lines.push("");
+      lines.push(`type ${this.componentName}PropsWithHydration = ${propsTypeName} & {`);
+      lines.push("  __instanceId?: string");
+      lines.push("  __bfScope?: string");
+      lines.push("  __bfChild?: boolean");
+      lines.push("  __bfParentProps?: string");
+      lines.push("  __bfParent?: string");
+      lines.push("  __bfMount?: string");
+      lines.push('  "data-key"?: string | number');
+      lines.push("}");
+    }
+    return lines.length > 0 ? lines.join(`
+`) : null;
+  }
+  getPropsTypeName(ir) {
+    if (ir.metadata.propsType?.raw) {
+      return ir.metadata.propsType.raw;
+    }
+    return null;
+  }
+  generateComponent(ir) {
+    const name = ir.metadata.componentName;
+    const propsTypeName = this.getPropsTypeName(ir);
+    const hasReactivePrimitives = ir.metadata.signals.length > 0 || ir.metadata.memos.length > 0 || ir.metadata.effects.length > 0 || ir.metadata.onMounts.length > 0;
+    if (hasReactivePrimitives && !ir.metadata.isClientComponent) {
+      throw new Error(`Component "${name}" has reactive primitives (signals, memos, effects, or onMounts) ` + `but is not marked as a client component. Add "use client" directive at the top of the file.`);
+    }
+    const needsClientInit = ir.metadata.clientAnalysis?.needsInit ?? false;
+    const hasClientInteractivity = ir.metadata.isClientComponent || needsClientInit;
+    this.hasClientInteractivity = hasClientInteractivity;
+    const propsObjectName = ir.metadata.propsObjectName;
+    let fullPropsDestructure;
+    let typeAnnotation;
+    let propsExtraction = null;
+    const HYDRATION_PROPS_TYPE = '{ __instanceId?: string; __bfScope?: string; __bfChild?: boolean; __bfParentProps?: string; __bfParent?: string; __bfMount?: string; "data-key"?: string | number }';
+    if (propsObjectName) {
+      fullPropsDestructure = `__allProps`;
+      typeAnnotation = propsTypeName ? `: ${propsTypeName} & ${HYDRATION_PROPS_TYPE}` : `: Record<string, unknown> & ${HYDRATION_PROPS_TYPE}`;
+    } else {
+      fullPropsDestructure = "";
+      typeAnnotation = propsTypeName ? `: ${name}PropsWithHydration` : `: ${HYDRATION_PROPS_TYPE}`;
+    }
+    const clientUsedProps = new Set(ir.metadata.clientAnalysis?.usedProps ?? []);
+    const needsInit = ir.metadata.clientAnalysis?.needsInit ?? false;
+    const propsToSerialize = ir.metadata.propsParams.filter((p) => {
+      return !p.name.startsWith("on") && !p.name.startsWith("__") && clientUsedProps.has(p.name);
+    });
+    const hasPropsToSerialize = propsToSerialize.length > 0 && hasClientInteractivity && needsInit;
+    const isIfStatement = ir.root.type === "if-statement";
+    const isRootComponent = ir.root.type === "component";
+    this.currentComponentHasProps = hasPropsToSerialize || hasClientInteractivity && isRootComponent;
+    let jsxBody = isIfStatement ? "" : this.renderNode(ir.root, {
+      isRootOfClientComponent: hasClientInteractivity && isRootComponent
+    });
+    if (!isIfStatement && hasClientInteractivity && isRootComponent) {
+      jsxBody = this.wrapWithScopeComment(jsxBody);
+    }
+    const ifCode = isIfStatement ? this.renderIfStatement(ir.root, { isRootOfClientComponent: true }) : "";
+    const fullBodyText = jsxBody + `
+` + ifCode;
+    const signalInits = this.generateSignalInitializers(ir, fullBodyText);
+    const scopeIdLine = hasClientInteractivity ? `__instanceId` : `__bfScope || __instanceId`;
+    const bodyRefText = [
+      fullBodyText,
+      signalInits,
+      scopeIdLine,
+      hasPropsToSerialize || hasClientInteractivity && isRootComponent ? "__bfParentProps" : ""
+    ].join(`
+`);
+    const bfScopeAlias = /\b__bfScope\b/.test(bodyRefText) ? "__bfScope" : "__bfScope: _bfScope";
+    const bfChildAlias = /\b__bfChild\b/.test(bodyRefText) ? "__bfChild" : "__bfChild: _bfChild";
+    const bfParentPropsAlias = /\b__bfParentProps\b/.test(bodyRefText) ? "__bfParentProps" : "__bfParentProps: _bfParentProps";
+    const bfParentAlias = /\b__bfParent\b/.test(bodyRefText) ? "__bfParent" : "__bfParent: _bfParent";
+    const bfMountAlias = /\b__bfMount\b/.test(bodyRefText) ? "__bfMount" : "__bfMount: _bfMount";
+    const dataKeyAlias = /\b__dataKey\b/.test(bodyRefText) ? '"data-key": __dataKey' : '"data-key": _dataKey';
+    if (propsObjectName) {
+      propsExtraction = `  const { __instanceId, ${bfScopeAlias}, ${bfChildAlias}, ${bfParentPropsAlias}, ${bfParentAlias}, ${bfMountAlias}, ${dataKeyAlias}, ...${propsObjectName} } = __allProps`;
+    } else {
+      const hydrationProps = `__instanceId, ${bfScopeAlias}, ${bfChildAlias}, ${bfParentPropsAlias}, ${bfParentAlias}, ${bfMountAlias}, ${dataKeyAlias}`;
+      const parts = [];
+      const propsParams = ir.metadata.propsParams.map((p) => {
+        const paramName = p.name === "class" ? "className" : p.name;
+        return p.defaultValue ? `${paramName} = ${p.defaultValue}` : paramName;
+      }).join(", ");
+      if (propsParams) {
+        parts.push(propsParams);
+      }
+      parts.push(hydrationProps);
+      const restPropsName = ir.metadata.restPropsName;
+      if (restPropsName) {
+        parts.push(`...${restPropsName}`);
+      }
+      fullPropsDestructure = `{ ${parts.join(", ")} }`;
+    }
+    const lines = [];
+    const exportPrefix = ir.metadata.isExported === false ? "" : "export ";
+    lines.push(`${exportPrefix}function ${name}(${fullPropsDestructure}${typeAnnotation}) {`);
+    if (propsExtraction) {
+      lines.push(propsExtraction);
+    }
+    if (hasClientInteractivity) {
+      lines.push(`  const __scopeId = __instanceId || \`${name}_\${Math.random().toString(36).slice(2, 8)}\``);
+    } else {
+      lines.push(`  const __scopeId = __bfScope || __instanceId || \`${name}_\${Math.random().toString(36).slice(2, 8)}\``);
+    }
+    if (signalInits) {
+      lines.push(signalInits);
+    }
+    if (hasPropsToSerialize) {
+      lines.push("");
+      lines.push(`  // Serialize props for client hydration`);
+      lines.push(`  const __hydrateProps: Record<string, unknown> = {}`);
+      for (const p of propsToSerialize) {
+        const propAccess = propsObjectName ? `${propsObjectName}.${p.name}` : p.name;
+        lines.push(`  if (typeof ${propAccess} !== 'function' && !(typeof ${propAccess} === 'object' && ${propAccess} !== null && 'isEscaped' in ${propAccess})) __hydrateProps['${p.name}'] = ${propAccess}`);
+      }
+      lines.push(`  const __bfPropsJson = __bfParentProps || (Object.keys(__hydrateProps).length > 0 ? JSON.stringify(__hydrateProps) : undefined)`);
+    } else if (hasClientInteractivity && isRootComponent) {
+      lines.push("");
+      lines.push(`  const __bfPropsJson = __bfParentProps`);
+    }
+    lines.push("");
+    if (isIfStatement) {
+      lines.push(ifCode);
+      lines.push(`}`);
+      return lines.join(`
+`);
+    }
+    lines.push(`  return (`);
+    lines.push(`    ${jsxBody}`);
+    lines.push(`  )`);
+    lines.push(`}`);
+    return lines.join(`
+`);
+  }
+  renderNode(node, ctx) {
+    return emitIRNode(node, this, ctx ?? {});
+  }
+  emitElement(node, ctx, _emit) {
+    return this.renderElement(node, ctx);
+  }
+  emitText(node) {
+    return this.renderText(node);
+  }
+  emitExpression(node) {
+    return this.renderExpression(node);
+  }
+  emitConditional(node, _ctx, _emit) {
+    return this.renderConditional(node);
+  }
+  emitLoop(node, _ctx, _emit) {
+    return this.renderLoop(node);
+  }
+  emitComponent(node, ctx, _emit) {
+    return this.renderComponent(node, ctx);
+  }
+  emitFragment(node, _ctx, _emit) {
+    return this.renderFragment(node);
+  }
+  emitSlot(_node) {
+    return "{children}";
+  }
+  emitIfStatement(_node, _ctx, _emit) {
+    return "";
+  }
+  emitProvider(node, _ctx, _emit) {
+    const children = this.renderChildren(node.children);
+    const valueExpr = (() => {
+      const v = node.valueProp.value;
+      switch (v.kind) {
+        case "literal":
+          return JSON.stringify(v.value);
+        case "expression":
+        case "spread":
+          return v.expr;
+        case "template":
+          return this.renderTemplateLiteralParts(v.parts);
+        case "boolean-attr":
+        case "boolean-shorthand":
+          return "true";
+        case "jsx-children":
+          return "undefined";
+      }
+    })();
+    return `<>{provideContextSSR(${node.contextName}, ${valueExpr}, <>${children}</>)}</>`;
+  }
+  emitAsync(node, _ctx, _emit) {
+    return this.renderAsync(node);
+  }
+  renderElement(element, ctx) {
+    const tag = element.tag;
+    const attrs = this.renderAttributes(element);
+    const children = this.renderChildren(element.children);
+    let hydrationAttrs = "";
+    if (element.needsScope) {
+      hydrationAttrs += ` ${BF_SCOPE}={__scopeId}`;
+      hydrationAttrs += ` {...(__bfParent ? { "${BF_HOST}": __bfParent } : {})}`;
+      hydrationAttrs += ` {...(__bfMount ? { "${BF_AT}": __bfMount } : {})}`;
+      hydrationAttrs += ` {...(!__bfChild ? { "${BF_ROOT}": "" } : {})}`;
+      if (this.currentComponentHasProps) {
+        hydrationAttrs += ` {...(!__bfChild && __bfPropsJson ? { "${BF_PROPS}": __bfPropsJson } : {})}`;
+      }
+      hydrationAttrs += ' {...(__dataKey !== undefined ? { "data-key": __dataKey } : {})}';
+    }
+    if (ctx?.isLoopItemRoot && this.loopKeyStack.length > 0) {
+      const loop = this.loopKeyStack[this.loopKeyStack.length - 1];
+      if (loop.key) {
+        const keyAttrName = this.loopKeyStack.length === 1 ? "data-key" : `data-key-${this.loopKeyStack.length - 1}`;
+        hydrationAttrs += ` ${keyAttrName}={String(${loop.key})}`;
+      }
+    }
+    if (element.slotId) {
+      hydrationAttrs += ` bf="${element.slotId}"`;
+    }
+    if (children) {
+      return `<${tag}${attrs}${hydrationAttrs}>${children}</${tag}>`;
+    } else {
+      return `<${tag}${attrs}${hydrationAttrs} />`;
+    }
+  }
+  renderText(text) {
+    return text.value;
+  }
+  renderExpression(expr) {
+    if (expr.expr === "null" || expr.expr === "undefined") {
+      return "null";
+    }
+    if (expr.clientOnly && expr.slotId) {
+      return `{bfComment("client:${expr.slotId}")}`;
+    }
+    if (expr.slotId) {
+      return `{bfText("${expr.slotId}")}{${expr.expr}}{bfTextEnd()}`;
+    }
+    return `{${expr.expr}}`;
+  }
+  renderConditional(cond) {
+    if (cond.clientOnly && cond.slotId) {
+      return `{bfComment("cond-start:${cond.slotId}")}{bfComment("cond-end:${cond.slotId}")}`;
+    }
+    const whenTrue = this.renderNodeRaw(cond.whenTrue);
+    let whenFalse = this.renderNodeRaw(cond.whenFalse);
+    if (!whenFalse || whenFalse === "" || whenFalse === "null") {
+      whenFalse = "null";
+    }
+    if (cond.slotId) {
+      const trueWithMarker = this.wrapWithCondMarker(cond.whenTrue, whenTrue, cond.slotId);
+      const falseWithMarker = cond.whenFalse.type === "expression" && cond.whenFalse.expr === "null" ? `<>{bfComment("cond-start:${cond.slotId}")}{bfComment("cond-end:${cond.slotId}")}</>` : this.wrapWithCondMarker(cond.whenFalse, whenFalse, cond.slotId);
+      return `{${cond.condition} ? ${trueWithMarker} : ${falseWithMarker}}`;
+    }
+    return `{${cond.condition} ? ${whenTrue} : ${whenFalse}}`;
+  }
+  wrapWithCondMarker(node, content, condId) {
+    if (node.type === "component") {
+      return `<>{bfComment("cond-start:${condId}")}${content}{bfComment("cond-end:${condId}")}</>`;
+    }
+    if (content.startsWith("<") && node.type !== "fragment") {
+      const match = content.match(/^<(\w+)/);
+      if (match) {
+        return content.replace(`<${match[1]}`, `<${match[1]} bf-c="${condId}"`);
+      }
+    }
+    if (node.type === "expression") {
+      return `<>{bfComment("cond-start:${condId}")}{${content}}{bfComment("cond-end:${condId}")}</>`;
+    }
+    return `<>{bfComment("cond-start:${condId}")}${content}{bfComment("cond-end:${condId}")}</>`;
+  }
+  renderLoop(loop) {
+    if (loop.clientOnly) {
+      return `{bfComment('loop:${loop.markerId}')}{bfComment('/loop:${loop.markerId}')}`;
+    }
+    const paramAnnotation = loop.paramType ? `: ${loop.paramType}` : "";
+    const indexAnnotation = loop.indexType ? `: ${loop.indexType}` : "";
+    const indexParam = loop.index ? `, ${loop.index}${indexAnnotation}` : "";
+    this.loopKeyStack.push({ key: loop.key, param: loop.param });
+    const children = this.renderChildrenInLoop(loop.children);
+    this.loopKeyStack.pop();
+    let mapExpr;
+    const preamble = loop.typedMapPreamble ?? loop.mapPreamble;
+    let safeChildren = children.startsWith("{") ? `<>${children}</>` : children;
+    if (loop.bodyIsMultiRoot) {
+      safeChildren = `<>{bfComment('bf-loop-i')}${children}</>`;
+    }
+    const chainedArray = applyHonoLoopChain(loop);
+    const iterMethod = loop.method ?? "map";
+    if (loop.flatMapCallback) {
+      mapExpr = `{${chainedArray}.flatMap(${loop.flatMapCallback.params} => ${loop.flatMapCallback.rawBody})}`;
+    } else if (preamble) {
+      mapExpr = `{${chainedArray}.${iterMethod}((${loop.param}${paramAnnotation}${indexParam}) => { ${preamble} return ${safeChildren} })}`;
+    } else {
+      mapExpr = `{${chainedArray}.${iterMethod}((${loop.param}${paramAnnotation}${indexParam}) => ${safeChildren})}`;
+    }
+    return `{bfComment('loop:${loop.markerId}')}${mapExpr}{bfComment('/loop:${loop.markerId}')}`;
+  }
+  renderChildrenInLoop(children) {
+    return children.map((child) => this.renderNode(child, { isInsideLoop: true, isLoopItemRoot: true })).join("");
+  }
+  renderIfStatement(ifStmt, ctx) {
+    const lines = [];
+    for (const v of ifStmt.scopeVariables) {
+      const init = this.jsxConfig.preserveTypes && v.typedInitializer || v.initializer;
+      lines.push(`    const ${v.name} = ${init}`);
+    }
+    const consequent = this.renderNode(ifStmt.consequent, ctx);
+    lines.unshift(`  if (${ifStmt.condition}) {`);
+    lines.push(`    return (`);
+    lines.push(`      ${consequent}`);
+    lines.push(`    )`);
+    lines.push(`  }`);
+    if (ifStmt.alternate) {
+      if (ifStmt.alternate.type === "if-statement") {
+        const elseIfCode = this.renderIfStatement(ifStmt.alternate, ctx);
+        lines.push(elseIfCode.replace(/^\s*if/, "  else if"));
+      } else {
+        const alternate = this.renderNode(ifStmt.alternate, ctx);
+        lines.push(`  return (`);
+        lines.push(`    ${alternate}`);
+        lines.push(`  )`);
+      }
+    } else {
+      lines.push(`  return null`);
+    }
+    return lines.join(`
+`);
+  }
+  renderAsync(node) {
+    const fallback = this.renderNode(node.fallback);
+    const children = this.renderChildren(node.children);
+    return `<Suspense fallback={<>${fallback}</>}>${children}</Suspense>`;
+  }
+  renderComponent(comp, ctx) {
+    const props = this.renderComponentProps(comp);
+    const children = this.renderChildren(comp.children);
+    let scopeAttr;
+    const bfChildAttr = comp.slotId && this.hasClientInteractivity ? " __bfChild={true}" : "";
+    const bfMountAttr = comp.slotId ? ` __bfParent={__scopeId} __bfMount={'${comp.slotId}'}` : "";
+    if (ctx?.isRootOfClientComponent) {
+      const propsPassAttr = this.currentComponentHasProps ? " __bfParentProps={__bfPropsJson}" : "";
+      if (comp.slotId) {
+        scopeAttr = ` __instanceId={\`\${__scopeId}_${comp.slotId}\`}${propsPassAttr}${bfMountAttr}`;
+      } else {
+        scopeAttr = ` __instanceId={__scopeId}${propsPassAttr}`;
+      }
+      scopeAttr += ` ${BF_SCOPE}={__scopeId}`;
+    } else if (ctx?.isInsideLoop) {
+      if (comp.slotId) {
+        scopeAttr = ` __bfScope={\`\${__scopeId}_${comp.slotId}\`}${bfChildAttr}${bfMountAttr}`;
+      } else {
+        scopeAttr = " __bfScope={__scopeId}";
+      }
+    } else if (comp.slotId) {
+      scopeAttr = ` __instanceId={\`\${__scopeId}_${comp.slotId}\`}${bfChildAttr}${bfMountAttr}`;
+    } else {
+      scopeAttr = " __instanceId={__scopeId}";
+    }
+    if (children) {
+      return `<${comp.name}${props}${scopeAttr}>${children}</${comp.name}>`;
+    } else {
+      return `<${comp.name}${props}${scopeAttr} />`;
+    }
+  }
+  renderFragment(fragment) {
+    const children = this.renderChildren(fragment.children);
+    if (fragment.needsScopeComment) {
+      return this.wrapWithScopeComment(children);
+    }
+    return `<>${children}</>`;
+  }
+  wrapWithScopeComment(body) {
+    const hostExpr = '${__bfParent ? `|h=${__bfParent}|m=${__bfMount}` : ""}';
+    const propsExpr = this.currentComponentHasProps ? '${__bfPropsJson ? `|${__bfPropsJson}` : ""}' : "";
+    return `<>{bfComment(\`scope:\${__scopeId}${hostExpr}${propsExpr}\`)}${body}</>`;
+  }
+  elementAttrEmitter = {
+    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitExpression: (value, name) => {
+      if (isBooleanAttr(name) || value.presenceOrUndefined) {
+        return `${name}={(${value.expr}) || undefined}`;
+      }
+      return `${name}={${value.expr}}`;
+    },
+    emitBooleanAttr: (_value, name) => name,
+    emitBooleanShorthand: () => "",
+    emitTemplate: (value, name) => `${name}={${this.renderTemplateLiteralParts(value.parts)}}`,
+    emitSpread: (value) => `{...${value.expr}}`,
+    emitJsxChildren: () => ""
+  };
+  componentPropEmitter = {
+    emitLiteral: (value, name) => `${name}="${value.value}"`,
+    emitExpression: (value, name) => `${name}={${value.expr}}`,
+    emitBooleanAttr: (_value, name) => name,
+    emitBooleanShorthand: (_value, name) => name,
+    emitTemplate: (value, name) => `${name}={${this.renderTemplateLiteralParts(value.parts)}}`,
+    emitSpread: (value) => `{...${value.expr}}`,
+    emitJsxChildren: (value, name) => {
+      const rendered = value.children.map((c) => this.renderNode(c)).join("");
+      return `${name}={<>${rendered}</>}`;
+    }
+  };
+  renderAttributes(element) {
+    const parts = [];
+    for (const attr of element.attrs) {
+      const lowered = emitAttrValue(attr.value, this.elementAttrEmitter, attr.name);
+      if (lowered)
+        parts.push(lowered);
+    }
+    for (const event of element.events) {
+      const handlerName = event.originalAttr ?? `on${event.name.charAt(0).toUpperCase()}${event.name.slice(1)}`;
+      parts.push(`${handlerName}={() => {}}`);
+    }
+    return parts.length > 0 ? " " + parts.join(" ") : "";
+  }
+  renderComponentProps(comp) {
+    const parts = [];
+    let keyValue = null;
+    for (const prop of comp.props) {
+      if (prop.name === "key") {
+        keyValue = this.attrValueToJsExpr(prop.value);
+        continue;
+      }
+      const lowered = emitAttrValue(prop.value, this.componentPropEmitter, prop.name);
+      if (lowered)
+        parts.push(lowered);
+    }
+    if (keyValue) {
+      parts.push(`data-key={${keyValue}}`);
+    }
+    return parts.length > 0 ? " " + parts.join(" ") : "";
+  }
+  attrValueToJsExpr(value) {
+    switch (value.kind) {
+      case "literal":
+        return JSON.stringify(value.value);
+      case "expression":
+      case "spread":
+        return value.expr;
+      case "template":
+        return this.renderTemplateLiteralParts(value.parts);
+      case "boolean-shorthand":
+      case "boolean-attr":
+        return "true";
+      case "jsx-children":
+        return "undefined";
+    }
+  }
+  renderTemplateLiteralParts(parts) {
+    let output = "`";
+    for (const part of parts) {
+      if (part.type === "string") {
+        output += part.value;
+      } else if (part.type === "ternary") {
+        output += `\${${part.condition} ? '${part.whenTrue}' : '${part.whenFalse}'}`;
+      } else if (part.type === "lookup") {
+        const obj = "{" + Object.entries(part.cases).map(([k, v]) => `${JSON.stringify(k)}: ${JSON.stringify(v)}`).join(", ") + "}";
+        output += `\${(${obj})[${part.key}]}`;
+      }
+    }
+    output += "`";
+    return output;
+  }
+}
+var honoAdapter = new HonoAdapter;
+export {
+  honoAdapter,
+  HonoAdapter
+};

package/dist/jsx/jsx-dev-runtime/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * BarefootJS Hono JSX Extension - Development Runtime
+ *
+ * Re-exports `jsxDEV` / `Fragment` from hono/jsx and surfaces the same
+ * JSX namespace as the production runtime so dev builds see identical types.
+ */
+export { jsxDEV, Fragment } from 'hono/jsx/jsx-dev-runtime';
+export type { JSX } from '../jsx-runtime';
+//# sourceMappingURL=index.d.ts.map

package/dist/jsx/jsx-dev-runtime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAC3D,YAAY,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/jsx/jsx-dev-runtime/index.js

@@ -0,0 +1,6 @@
+// src/jsx/jsx-dev-runtime/index.ts
+import { jsxDEV, Fragment } from "hono/jsx/jsx-dev-runtime";
+export {
+  jsxDEV,
+  Fragment
+};

package/dist/jsx/jsx-runtime/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * BarefootJS Hono JSX Extension
+ *
+ * Combines hono/jsx runtime with @barefootjs/jsx type definitions.
+ * - Runtime functions from hono/jsx
+ * - Typed event handlers and IntrinsicElements from @barefootjs/jsx
+ * - JSX.Element from hono/jsx (for Suspense/streaming support)
+ *
+ * Usage in tsconfig.json:
+ *   "jsxImportSource": "@barefootjs/hono/jsx"
+ */
+export { jsx, jsxs, Fragment, jsxAttr, jsxEscape, jsxTemplate } from 'hono/jsx/jsx-runtime';
+import type { JSX as BaseJSX } from '@barefootjs/jsx/jsx-runtime';
+export declare namespace JSX {
+    type Element = import('hono/jsx/jsx-runtime').JSX.Element;
+    type IntrinsicElements = BaseJSX.IntrinsicElements;
+    type IntrinsicAttributes = BaseJSX.IntrinsicAttributes;
+    type ElementChildrenAttribute = BaseJSX.ElementChildrenAttribute;
+}
+/**
+ * BarefootJS compiler built-in: streaming async boundary.
+ *
+ * The compiler intercepts `<Async fallback={...}>` in JSX source and emits it
+ * as a `<Suspense>` node in the Hono adapter output (IRAsync → renderAsync).
+ * This declaration provides TypeScript types for source files; no runtime
+ * implementation is needed because the compiler replaces it before execution.
+ */
+export declare function Async(props: {
+    fallback: JSX.Element;
+    children: JSX.Element | JSX.Element[] | null | undefined;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/jsx/jsx-runtime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAG3F,OAAO,KAAK,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,6BAA6B,CAAA;AAEjE,MAAM,CAAC,OAAO,WAAW,GAAG,CAAC,CAAC;IAE5B,KAAK,OAAO,GAAG,OAAO,sBAAsB,EAAE,GAAG,CAAC,OAAO,CAAA;IAGzD,KAAK,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,CAAA;IAClD,KAAK,mBAAmB,GAAG,OAAO,CAAC,mBAAmB,CAAA;IACtD,KAAK,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAA;CACjE;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE;IACnC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAA;CACzD,GAAG,GAAG,CAAC,OAAO,CAAA"}