@portel/photon 1.32.5 → 1.33.0

package/dist/tsx-compiler.js

@@ -8,62 +8,374 @@
  * Users can override with `@jsxImportSource` pragma or tsconfig.json in the
  * ui/ folder to use React/Preact/Solid if they prefer.
  */
+import * as crypto from 'crypto';
 import * as esbuild from 'esbuild';
 import * as fs from 'fs';
-import * as fsAsync from 'fs/promises';
 import * as os from 'os';
 import * as path from 'path';
 // ─── Built-in JSX Runtime ──────────────────────────────────────────────────
-// Tiny DOM-based JSX factory. `h()` returns real DOM nodes, not virtual nodes.
-// Injected into every TSX build unless the user overrides via tsconfig.
+// Lightweight virtual-DOM with focus-preserving reconciliation. `h()` now
+// returns plain descriptor objects (not DOM nodes); `render()` diffs them
+// against the previous tree and patches the existing DOM in place.
+//
+// Rendering contract (see also docs/tsx-rendering.md):
+//   - DOM nodes are preserved across `render()` calls when the element's
+//     position and type (and key, if present) are stable. Patching keeps
+//     the same node so focus, selection, scrollTop, and other UA state
+//     survive a rerender.
+//   - For form controls (input/textarea/select), the `value` prop only
+//     touches the DOM when it actually differs, and selection/cursor is
+//     restored when the element is focused — controlled inputs work
+//     without losing focus per keystroke.
+//   - Use `defaultValue` (mapped to the DOM attribute) for uncontrolled
+//     inputs you want to manage with refs instead.
+//   - Provide a `key` on items in dynamic lists so reorders preserve the
+//     correct DOM nodes (and their focus/scroll state).
+//   - Event handlers (`onClick`, `onInput`, …) are stored on the node and
+//     dispatched via a single delegating listener per event type, so
+//     rerenders don't stack listeners.
 const JSX_RUNTIME = `
-export function h(type, props, ...children) {
-  if (type === Fragment) {
-    const frag = document.createDocumentFragment();
-    _append(frag, children);
-    return frag;
+export function Fragment() {}
+
+function flattenInto(out, c) {
+  if (c == null || c === false || c === true) return;
+  if (Array.isArray(c)) { for (var i = 0; i < c.length; i++) flattenInto(out, c[i]); return; }
+  if (c && typeof c === 'object' && c.__phv === true && c.type === Fragment) {
+    for (var j = 0; j < c.children.length; j++) flattenInto(out, c.children[j]);
+    return;
   }
-  if (typeof type === 'function') {
-    return type(Object.assign({}, props, { children: children.length <= 1 ? children[0] : children }));
-  }
-  const el = document.createElement(type);
-  if (props) {
-    for (const [k, v] of Object.entries(props)) {
-      if (k === 'children' || v == null || v === false) continue;
-      if (k.startsWith('on') && typeof v === 'function') {
-        el.addEventListener(k[2].toLowerCase() + k.slice(3), v);
-      } else if (k === 'style' && typeof v === 'object') {
-        Object.assign(el.style, v);
-      } else if (k === 'className') {
-        el.setAttribute('class', v);
-      } else if (k === 'htmlFor') {
-        el.setAttribute('for', v);
-      } else if (k === 'dangerouslySetInnerHTML') {
-        el.innerHTML = v.__html;
-      } else if (v === true) {
-        el.setAttribute(k, '');
-      } else {
-        el.setAttribute(k, String(v));
+  out.push(c);
+}
+
+export function h(type, props) {
+  var children = [];
+  for (var ai = 2; ai < arguments.length; ai++) flattenInto(children, arguments[ai]);
+  props = props || {};
+  if (typeof type === 'function' && type !== Fragment) {
+    var cp = {};
+    for (var ck in props) cp[ck] = props[ck];
+    cp.children = children.length <= 1 ? children[0] : children;
+    var rv = type(cp);
+    if (rv == null || rv === false || rv === true) {
+      return { __phv: true, type: Fragment, props: {}, children: [], key: null };
+    }
+    return rv;
+  }
+  return {
+    __phv: true,
+    type: type,
+    props: props,
+    children: children,
+    key: props.key != null ? props.key : null
+  };
+}
+
+function isVNode(x) { return x != null && typeof x === 'object' && x.__phv === true; }
+function isTextLike(x) { return typeof x === 'string' || typeof x === 'number'; }
+function isOnProp(k) {
+  return k.length > 2 && k.charCodeAt(0) === 111 && k.charCodeAt(1) === 110;
+}
+function isFormCtl(el) {
+  var t = el.tagName;
+  return t === 'INPUT' || t === 'TEXTAREA' || t === 'SELECT';
+}
+
+function setProp(el, key, value, prev) {
+  if (key === 'children' || key === 'key' || key === 'ref') return;
+
+  if (isOnProp(key) && typeof value === 'function') {
+    var evt = key.slice(2).toLowerCase();
+    if (!el.__phH) {
+      el.__phH = {};
+      el.__phD = function (e) { var f = el.__phH[e.type]; if (f) f(e); };
+    }
+    if (!el.__phH[evt]) el.addEventListener(evt, el.__phD);
+    el.__phH[evt] = value;
+    return;
+  }
+
+  if (key === 'style' && value && typeof value === 'object') {
+    if (prev && typeof prev === 'object') {
+      for (var pk in prev) if (!(pk in value)) el.style[pk] = '';
+    }
+    for (var sk in value) {
+      var sv = value[sk];
+      el.style[sk] = sv == null ? '' : sv;
+    }
+    return;
+  }
+
+  if (key === 'className') {
+    if (value == null || value === false || value === '') el.removeAttribute('class');
+    else el.setAttribute('class', String(value));
+    return;
+  }
+
+  if (key === 'htmlFor') {
+    if (value == null || value === false) el.removeAttribute('for');
+    else el.setAttribute('for', String(value));
+    return;
+  }
+
+  if (key === 'dangerouslySetInnerHTML') {
+    var nh = value && value.__html != null ? value.__html : '';
+    var ph = prev && prev.__html != null ? prev.__html : null;
+    if (nh !== ph) el.innerHTML = nh;
+    return;
+  }
+
+  // Controlled value: only touch the DOM when the live value differs, and
+  // preserve cursor/selection when the element is focused. This is what
+  // lets <input value={state}> work without losing focus per keystroke.
+  if (key === 'value' && isFormCtl(el)) {
+    var nv = value == null ? '' : String(value);
+    if (el.value !== nv) {
+      var focused = el.ownerDocument && el.ownerDocument.activeElement === el;
+      var s = null, e2 = null;
+      if (focused && 'selectionStart' in el) {
+        try { s = el.selectionStart; e2 = el.selectionEnd; } catch (_) {}
+      }
+      el.value = nv;
+      if (focused && s != null) {
+        try { el.setSelectionRange(s, e2 == null ? s : e2); } catch (_) {}
       }
     }
+    return;
+  }
+
+  if (key === 'checked' && el.tagName === 'INPUT') {
+    var b = !!value;
+    if (el.checked !== b) el.checked = b;
+    return;
+  }
+
+  // 'defaultValue' / 'defaultChecked' map to the corresponding attribute
+  // and only seed the DOM on creation — the runtime never overwrites the
+  // user's input after that.
+  if (key === 'defaultValue' && isFormCtl(el)) {
+    if (prev === undefined) el.setAttribute('value', value == null ? '' : String(value));
+    return;
+  }
+  if (key === 'defaultChecked' && el.tagName === 'INPUT') {
+    if (prev === undefined && value) el.setAttribute('checked', '');
+    return;
+  }
+
+  if (value === false || value == null) { el.removeAttribute(key); return; }
+  if (value === true) { el.setAttribute(key, ''); return; }
+  el.setAttribute(key, String(value));
+}
+
+function unsetProp(el, key, prev) {
+  if (key === 'children' || key === 'key' || key === 'ref') return;
+  if (isOnProp(key) && typeof prev === 'function') {
+    var evt = key.slice(2).toLowerCase();
+    if (el.__phH) delete el.__phH[evt];
+    return;
+  }
+  if (key === 'className') { el.removeAttribute('class'); return; }
+  if (key === 'htmlFor') { el.removeAttribute('for'); return; }
+  if (key === 'style') { el.removeAttribute('style'); return; }
+  if (key === 'value' && isFormCtl(el)) {
+    if (el.value !== '') el.value = '';
+    return;
+  }
+  if (key === 'checked' && el.tagName === 'INPUT') {
+    if (el.checked) el.checked = false;
+    return;
+  }
+  el.removeAttribute(key);
+}
+
+function createDom(vnode) {
+  if (vnode == null || vnode === false || vnode === true) return null;
+  if (isTextLike(vnode)) return document.createTextNode(String(vnode));
+  if (vnode.type === Fragment) {
+    var frag = document.createDocumentFragment();
+    for (var fi = 0; fi < vnode.children.length; fi++) {
+      var fn = createDom(vnode.children[fi]);
+      if (fn) frag.appendChild(fn);
+    }
+    return frag;
+  }
+  var el = document.createElement(vnode.type);
+  el.__phV = vnode;
+  var props = vnode.props || {};
+  for (var pk in props) setProp(el, pk, props[pk], undefined);
+  for (var ci = 0; ci < vnode.children.length; ci++) {
+    var cn = createDom(vnode.children[ci]);
+    if (cn) el.appendChild(cn);
   }
-  _append(el, children);
   return el;
 }
 
-export function Fragment() {}
+function sameType(a, b) {
+  if (isTextLike(a) && isTextLike(b)) return true;
+  if (isVNode(a) && isVNode(b)) {
+    if (a.type !== b.type) return false;
+    // Keys differing for the same type still count as different identities
+    // when reconciliation is keyed. Caller decides via key match first.
+    return true;
+  }
+  return false;
+}
+
+function patchNode(parent, oldV, newV, dom) {
+  if (newV == null || newV === false || newV === true) {
+    if (dom && dom.parentNode === parent) parent.removeChild(dom);
+    return null;
+  }
+  if (!dom) {
+    var fresh = createDom(newV);
+    if (fresh) parent.appendChild(fresh);
+    return fresh;
+  }
+  if (!sameType(oldV, newV)) {
+    var rep = createDom(newV);
+    if (rep) parent.replaceChild(rep, dom);
+    else if (dom.parentNode === parent) parent.removeChild(dom);
+    return rep;
+  }
+  if (isTextLike(newV)) {
+    var s2 = String(newV);
+    if (dom.nodeValue !== s2) dom.nodeValue = s2;
+    return dom;
+  }
+  if (newV.type === Fragment) {
+    var rep2 = createDom(newV);
+    if (rep2) parent.replaceChild(rep2, dom);
+    return rep2;
+  }
+  var oldProps = (isVNode(oldV) && oldV.props) || {};
+  var newProps = newV.props || {};
+  for (var ok in oldProps) {
+    if (!(ok in newProps)) unsetProp(dom, ok, oldProps[ok]);
+  }
+  for (var nk in newProps) {
+    // Always rebind event handler (we swap the stored fn). For others,
+    // skip when reference-equal.
+    if (oldProps[nk] !== newProps[nk] || isOnProp(nk)) {
+      setProp(dom, nk, newProps[nk], oldProps[nk]);
+    }
+  }
+  dom.__phV = newV;
+  patchChildren(dom, isVNode(oldV) ? oldV.children : [], newV.children);
+  return dom;
+}
+
+function patchChildren(parent, oldChildren, newChildren) {
+  var oldLen = oldChildren.length;
+  var newLen = newChildren.length;
+
+  var keyed = false;
+  for (var ki = 0; ki < newLen && !keyed; ki++) {
+    var c = newChildren[ki];
+    if (isVNode(c) && c.key != null) keyed = true;
+  }
+  for (var kj = 0; kj < oldLen && !keyed; kj++) {
+    var oc = oldChildren[kj];
+    if (isVNode(oc) && oc.key != null) keyed = true;
+  }
+
+  var existing = [];
+  for (var dx = parent.firstChild; dx; dx = dx.nextSibling) existing.push(dx);
 
-export function _append(parent, children) {
-  for (const child of children) {
-    if (child == null || child === false || child === true) continue;
-    if (Array.isArray(child)) { _append(parent, child); continue; }
-    parent.append(typeof child === 'object' ? child : String(child));
+  if (!keyed) {
+    var max = oldLen > newLen ? oldLen : newLen;
+    for (var i = 0; i < max; i++) {
+      var oldC = i < oldLen ? oldChildren[i] : undefined;
+      var newC = i < newLen ? newChildren[i] : undefined;
+      var dom = i < existing.length ? existing[i] : null;
+      if (newC === undefined) {
+        if (dom && dom.parentNode === parent) parent.removeChild(dom);
+      } else if (oldC === undefined || dom == null) {
+        var freshU = createDom(newC);
+        if (freshU) parent.appendChild(freshU);
+      } else {
+        patchNode(parent, oldC, newC, dom);
+      }
+    }
+    return;
+  }
+
+  // Keyed reconciliation: move existing nodes by key, create/remove the
+  // rest. Unkeyed siblings are matched by their position among unkeyed
+  // siblings (a forgiving extension to all-or-nothing keying).
+  var oldByKey = {};
+  for (var oi = 0; oi < oldLen; oi++) {
+    var oo = oldChildren[oi];
+    if (isVNode(oo) && oo.key != null) {
+      oldByKey[oo.key] = { v: oo, dom: existing[oi] };
+    }
+  }
+  var unkeyedOld = [];
+  var unkeyedDom = [];
+  for (var oj = 0; oj < oldLen; oj++) {
+    var op = oldChildren[oj];
+    if (!(isVNode(op) && op.key != null)) {
+      unkeyedOld.push(op);
+      unkeyedDom.push(existing[oj]);
+    }
+  }
+  var used = {};
+  var unkCursor = 0;
+  for (var ni = 0; ni < newLen; ni++) {
+    var nc = newChildren[ni];
+    var key = (isVNode(nc) && nc.key != null) ? nc.key : null;
+    var anchor = parent.childNodes[ni] || null;
+    var placed = null;
+    if (key != null && oldByKey[key]) {
+      var entry = oldByKey[key];
+      used[key] = true;
+      placed = patchNode(parent, entry.v, nc, entry.dom);
+    } else if (key == null && unkCursor < unkeyedOld.length) {
+      var oldUn = unkeyedOld[unkCursor];
+      var oldUnDom = unkeyedDom[unkCursor];
+      unkCursor++;
+      if (oldUnDom && sameType(oldUn, nc)) {
+        placed = patchNode(parent, oldUn, nc, oldUnDom);
+      } else {
+        if (oldUnDom && oldUnDom.parentNode === parent) parent.removeChild(oldUnDom);
+        placed = createDom(nc);
+      }
+    } else {
+      placed = createDom(nc);
+    }
+    if (placed && placed !== anchor) {
+      parent.insertBefore(placed, anchor);
+    }
+  }
+
+  // Drop old keyed nodes that the new tree didn't claim.
+  for (var rk in oldByKey) {
+    if (!used[rk]) {
+      var dead = oldByKey[rk].dom;
+      if (dead && dead.parentNode === parent) parent.removeChild(dead);
+    }
+  }
+  // Drop any trailing unkeyed leftovers we didn't consume.
+  while (unkCursor < unkeyedOld.length) {
+    var deadUn = unkeyedDom[unkCursor++];
+    if (deadUn && deadUn.parentNode === parent) parent.removeChild(deadUn);
+  }
+  // Belt-and-braces: trim any excess if our bookkeeping missed something.
+  while (parent.childNodes.length > newLen) {
+    parent.removeChild(parent.lastChild);
   }
 }
 
 export function render(element, container) {
   if (typeof container === 'string') container = document.querySelector(container);
-  container.replaceChildren(element);
+  if (!container) return null;
+  var prevTree = container.__phRoot;
+  var prevChildren = prevTree
+    ? (Array.isArray(prevTree) ? prevTree : [prevTree])
+    : [];
+  var newChildren = (isVNode(element) && element.type === Fragment)
+    ? element.children
+    : [element];
+  patchChildren(container, prevChildren, newChildren);
+  container.__phRoot = newChildren.length === 1 ? newChildren[0] : newChildren;
   return element;
 }
 `.trim();
@@ -76,8 +388,103 @@ function getRuntimePath() {
     }
     return _runtimePath;
 }
-// In-memory cache: filePath → { mtimeMs, html }
+// In-memory cache: filePath → { sig, result }. `sig` is the newest mtime
+// across the whole input graph, so a change to any imported module — not
+// just the entry file — invalidates the cache.
 const cache = new Map();
+/** Resolve esbuild metafile input keys to absolute paths. */
+function resolveInputs(metafile) {
+    if (!metafile)
+        return [];
+    const out = [];
+    for (const key of Object.keys(metafile.inputs)) {
+        // Skip esbuild virtual/injected entries (e.g. the JSX runtime shim).
+        if (key.includes('<') || key.startsWith('\0'))
+            continue;
+        out.push(path.resolve(process.cwd(), key));
+    }
+    return out;
+}
+/** Newest mtime across the input graph; -1 if any input is missing. */
+function inputsSignature(inputs) {
+    let newest = 0;
+    for (const f of inputs) {
+        try {
+            newest = Math.max(newest, fs.statSync(f).mtimeMs);
+        }
+        catch {
+            return -1; // a vanished input forces a rebuild
+        }
+    }
+    return newest;
+}
+/** Stable per-source cache directory under the OS temp dir. */
+function cacheDirFor(filePath) {
+    const key = crypto.createHash('sha256').update(path.resolve(filePath)).digest('hex').slice(0, 16);
+    return path.join(os.tmpdir(), 'photon-tsx-cache', key);
+}
+/** Content hash of the bundle, salted with the esbuild version. */
+function hashBundle(js) {
+    return crypto
+        .createHash('sha256')
+        .update(`${js}:::esbuild@${esbuild.version}`)
+        .digest('hex')
+        .slice(0, 12);
+}
+/**
+ * Write the shell + hashed JS to the cache dir and return the descriptor.
+ * Stale `*.js` from a previous hash are pruned so the dir stays bounded
+ * and a `photon build` copy never ships an orphaned old bundle.
+ */
+function writeArtifactsSync(filePath, js, inputs) {
+    const dir = cacheDirFor(filePath);
+    fs.mkdirSync(dir, { recursive: true });
+    const base = path.basename(filePath, path.extname(filePath)).replace(/[^a-zA-Z0-9_-]/g, '_');
+    const hash = hashBundle(js);
+    const jsFileName = `${base}.${hash}.js`;
+    const html = wrapInHtml(jsFileName);
+    for (const entry of fs.readdirSync(dir)) {
+        if (entry.endsWith('.js') && entry !== jsFileName) {
+            try {
+                fs.unlinkSync(path.join(dir, entry));
+            }
+            catch {
+                // best-effort prune
+            }
+        }
+    }
+    const jsPath = path.join(dir, jsFileName);
+    const htmlPath = path.join(dir, 'index.html');
+    fs.writeFileSync(jsPath, js);
+    fs.writeFileSync(htmlPath, html);
+    const entryAbs = path.resolve(filePath);
+    const allInputs = inputs.length ? Array.from(new Set([entryAbs, ...inputs])) : [entryAbs];
+    return { hash, jsFileName, html, js, dir, htmlPath, jsPath, inputs: allInputs };
+}
+/** Build-error descriptor: an HTML error page, no JS sidecar. */
+function errorResult(filePath, error) {
+    const dir = cacheDirFor(filePath);
+    const html = wrapError(filePath, error);
+    let htmlPath = '';
+    try {
+        fs.mkdirSync(dir, { recursive: true });
+        htmlPath = path.join(dir, 'index.html');
+        fs.writeFileSync(htmlPath, html);
+    }
+    catch {
+        // serving paths fall back to the in-memory `html`
+    }
+    return {
+        hash: '',
+        jsFileName: '',
+        html,
+        js: '',
+        dir,
+        htmlPath,
+        jsPath: '',
+        inputs: [path.resolve(filePath)],
+    };
+}
 /**
  * Find the nearest tsconfig.json walking up from startDir.
  * Stops at the photon asset folder root (parent of ui/).
@@ -163,6 +570,9 @@ function buildOptions(filePath, tsconfigPath) {
         entryPoints: [filePath],
         bundle: true,
         write: false,
+        // Needed to invalidate the cache on any imported module change, not
+        // just the entry file — `metafile.inputs` lists the full graph.
+        metafile: true,
         format: 'esm',
         platform: 'browser',
         target: 'es2020',
@@ -188,9 +598,35 @@ function buildOptions(filePath, tsconfigPath) {
     };
 }
 /**
- * Wrap bundled JS in a self-contained HTML document.
+ * The HTML shell. Carries no application code — it only references the
+ * content-hashed bundle as a sibling module, so the document itself is
+ * tiny and safe to serve with short-lived/revalidated caching while the
+ * hashed bundle is cached immutably. The reference is relative so it
+ * resolves to `/api/ui/<id>/<jsFileName>` (and the equivalent CF asset
+ * path) regardless of the mount point.
+ */
+function wrapInHtml(jsFileName) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>*, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }</style>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="./${jsFileName}"></script>
+</body>
+</html>`;
+}
+/**
+ * Self-contained document with the bundle inlined. Used only by the MCP
+ * resource path (Claude Desktop apps): an MCP-app webview renders the
+ * returned HTML with no HTTP origin, so a `./<hash>.js` sibling reference
+ * would not resolve. Cache-busting is irrelevant there — the client
+ * re-reads the resource on every `resources/read`.
  */
-function wrapInHtml(js) {
+export function inlineHtml(js) {
     return `<!doctype html>
 <html lang="en">
 <head>
@@ -206,6 +642,45 @@ ${js}
 </body>
 </html>`;
 }
+/** Immutable: hash in the URL changes whenever the bundle changes. */
+export const TSX_JS_CACHE_CONTROL = 'public, max-age=31536000, immutable';
+/** Tiny, code-free shell — always revalidate so a new hash is picked up. */
+export const TSX_SHELL_CACHE_CONTROL = 'no-cache';
+/**
+ * Resolve an HTTP request for a compiled `.tsx` view into a response.
+ *
+ * - `restPath` empty / `index.html` → the HTML shell (revalidated, ETag).
+ * - `restPath` === the hashed JS filename → the bundle (immutable).
+ * - anything else → 404 (caller may then try its own sibling resolution).
+ *
+ * Used by every browser-facing serving path (local server, Beam,
+ * streamable-http, and — via precompiled files — the Cloudflare
+ * [assets] binding) so the cache contract is identical everywhere.
+ */
+export function tsxHttpResponse(result, restPath) {
+    const rest = restPath.replace(/^\/+/, '');
+    if (rest === '' || rest === 'index.html') {
+        const headers = {
+            'Content-Type': 'text/html',
+            'Cache-Control': TSX_SHELL_CACHE_CONTROL,
+        };
+        // No hash on a build-error page — let it always revalidate without a tag.
+        if (result.hash)
+            headers['ETag'] = `"${result.hash}"`;
+        return { status: 200, body: result.html, headers };
+    }
+    if (result.jsFileName && rest === result.jsFileName) {
+        return {
+            status: 200,
+            body: result.js,
+            headers: {
+                'Content-Type': 'text/javascript; charset=utf-8',
+                'Cache-Control': TSX_JS_CACHE_CONTROL,
+            },
+        };
+    }
+    return { status: 404, body: 'Not found', headers: {} };
+}
 /**
  * Detect the "esbuild binary not installed" failure shape. Fires when
  * Bun blocked esbuild's postinstall (default for non-trusted packages),
@@ -249,31 +724,35 @@ pre { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-heigh
 </html>`;
 }
 /**
- * Compile a TSX file into a self-contained HTML document.
+ * Compile a TSX file into a hashed JS bundle plus an HTML shell.
  */
 export async function compileTsx(filePath) {
     const tsconfigPath = findTsconfig(path.dirname(filePath));
     try {
         const result = await esbuild.build(buildOptions(filePath, tsconfigPath));
         const js = result.outputFiles?.[0]?.text ?? '';
-        return wrapInHtml(js);
+        return writeArtifactsSync(filePath, js, resolveInputs(result.metafile));
     }
     catch (err) {
-        return wrapError(filePath, err);
+        return errorResult(filePath, err);
     }
 }
 /**
- * Compile with mtime-based caching. Re-transpiles only when the file changes.
+ * Compile with dependency-graph-aware caching. Re-transpiles when the
+ * entry file OR any imported module changes (the previous mtime-only
+ * cache silently served a stale bundle after an imported-component edit).
  */
 export async function compileTsxCached(filePath) {
-    const stat = await fsAsync.stat(filePath);
     const cached = cache.get(filePath);
-    if (cached && cached.mtimeMs === stat.mtimeMs) {
-        return cached.html;
+    if (cached) {
+        const sig = inputsSignature(cached.result.inputs);
+        if (sig !== -1 && sig === cached.sig) {
+            return cached.result;
+        }
     }
-    const html = await compileTsx(filePath);
-    cache.set(filePath, { mtimeMs: stat.mtimeMs, html });
-    return html;
+    const result = await compileTsx(filePath);
+    cache.set(filePath, { sig: inputsSignature(result.inputs), result });
+    return result;
 }
 /**
  * Synchronous variant for the build command (uses esbuild.buildSync).
@@ -283,10 +762,10 @@ export function compileTsxSync(filePath) {
     try {
         const result = esbuild.buildSync(buildOptions(filePath, tsconfigPath));
         const js = result.outputFiles?.[0]?.text ?? '';
-        return wrapInHtml(js);
+        return writeArtifactsSync(filePath, js, resolveInputs(result.metafile));
     }
     catch (err) {
-        return wrapError(filePath, err);
+        return errorResult(filePath, err);
     }
 }
 //# sourceMappingURL=tsx-compiler.js.map