@pyreon/vue-compat 0.4.0 → 0.5.1

package/lib/jsx-runtime.js

@@ -0,0 +1,93 @@
+import { Fragment, h, onUnmount } from "@pyreon/core";
+import { runUntracked, signal } from "@pyreon/reactivity";
+
+//#region src/jsx-runtime.ts
+let _currentCtx = null;
+let _hookIndex = 0;
+function beginRender(ctx) {
+	_currentCtx = ctx;
+	_hookIndex = 0;
+	ctx.pendingEffects = [];
+	ctx.pendingLayoutEffects = [];
+}
+function endRender() {
+	_currentCtx = null;
+	_hookIndex = 0;
+}
+function runLayoutEffects(entries) {
+	for (const entry of entries) {
+		if (entry.cleanup) entry.cleanup();
+		const cleanup = entry.fn();
+		entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+	}
+}
+function scheduleEffects(ctx, entries) {
+	if (entries.length === 0) return;
+	queueMicrotask(() => {
+		for (const entry of entries) {
+			if (ctx.unmounted) return;
+			if (entry.cleanup) entry.cleanup();
+			const cleanup = entry.fn();
+			entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+		}
+	});
+}
+const _wrapperCache = /* @__PURE__ */ new WeakMap();
+function wrapCompatComponent(vueComponent) {
+	let wrapped = _wrapperCache.get(vueComponent);
+	if (wrapped) return wrapped;
+	wrapped = ((props) => {
+		const ctx = {
+			hooks: [],
+			scheduleRerender: () => {},
+			pendingEffects: [],
+			pendingLayoutEffects: [],
+			unmounted: false,
+			unmountCallbacks: []
+		};
+		const version = signal(0);
+		let updateScheduled = false;
+		ctx.scheduleRerender = () => {
+			if (ctx.unmounted || updateScheduled) return;
+			updateScheduled = true;
+			queueMicrotask(() => {
+				updateScheduled = false;
+				if (!ctx.unmounted) version.set(version.peek() + 1);
+			});
+		};
+		onUnmount(() => {
+			ctx.unmounted = true;
+			for (const cb of ctx.unmountCallbacks) cb();
+		});
+		return () => {
+			version();
+			beginRender(ctx);
+			const result = runUntracked(() => vueComponent(props));
+			const layoutEffects = ctx.pendingLayoutEffects;
+			const effects = ctx.pendingEffects;
+			endRender();
+			runLayoutEffects(layoutEffects);
+			scheduleEffects(ctx, effects);
+			return result;
+		};
+	});
+	_wrapperCache.set(vueComponent, wrapped);
+	return wrapped;
+}
+function jsx(type, props, key) {
+	const { children, ...rest } = props;
+	const propsWithKey = key != null ? {
+		...rest,
+		key
+	} : rest;
+	if (typeof type === "function") return h(wrapCompatComponent(type), children !== void 0 ? {
+		...propsWithKey,
+		children
+	} : propsWithKey);
+	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
+}
+const jsxs = jsx;
+
+//#endregion
+export { Fragment, jsx, jsxs };
+//# sourceMappingURL=jsx-runtime.js.map

package/lib/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","names":[],"sources":["../src/jsx-runtime.ts"],"sourcesContent":["/**\n * Compat JSX runtime for Vue compatibility mode.\n *\n * When `jsxImportSource` is redirected to `@pyreon/vue-compat` (via the vite\n * plugin's `compat: \"vue\"` option), OXC rewrites JSX to import from this file.\n *\n * For component VNodes, we wrap the component function so it returns a reactive\n * accessor — enabling Vue-style re-renders on state change while Pyreon's\n * existing renderer handles all DOM work.\n *\n * Key difference from react/preact compat: the component body runs inside\n * `runUntracked` to prevent `.value` reads (which access underlying signals)\n * from being tracked by the reactive accessor. Only the version signal\n * triggers re-renders.\n */\n\nimport type { ComponentFn, Props, VNode, VNodeChild } from \"@pyreon/core\"\nimport { Fragment, h, onUnmount } from \"@pyreon/core\"\nimport { runUntracked, signal } from \"@pyreon/reactivity\"\n\nexport { Fragment }\n\n// ─── Render context (used by hooks) ──────────────────────────────────────────\n\nexport interface RenderContext {\n  hooks: unknown[]\n  scheduleRerender: () => void\n  /** Effect entries pending execution after render */\n  pendingEffects: EffectEntry[]\n  /** Layout effect entries pending execution after render */\n  pendingLayoutEffects: EffectEntry[]\n  /** Set to true when the component is unmounted */\n  unmounted: boolean\n  /** Callbacks to run on unmount (lifecycle + effect cleanups) */\n  unmountCallbacks: (() => void)[]\n}\n\nexport interface EffectEntry {\n  // biome-ignore lint/suspicious/noConfusingVoidType: matches Vue's effect signature\n  fn: () => (() => void) | void\n  deps: unknown[] | undefined\n  cleanup: (() => void) | undefined\n}\n\nlet _currentCtx: RenderContext | null = null\nlet _hookIndex = 0\n\nexport function getCurrentCtx(): RenderContext | null {\n  return _currentCtx\n}\n\nexport function getHookIndex(): number {\n  return _hookIndex++\n}\n\nexport function beginRender(ctx: RenderContext): void {\n  _currentCtx = ctx\n  _hookIndex = 0\n  ctx.pendingEffects = []\n  ctx.pendingLayoutEffects = []\n}\n\nexport function endRender(): void {\n  _currentCtx = null\n  _hookIndex = 0\n}\n\n// ─── Effect runners ──────────────────────────────────────────────────────────\n\nfunction runLayoutEffects(entries: EffectEntry[]): void {\n  for (const entry of entries) {\n    if (entry.cleanup) entry.cleanup()\n    const cleanup = entry.fn()\n    entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n  }\n}\n\nfunction scheduleEffects(ctx: RenderContext, entries: EffectEntry[]): void {\n  if (entries.length === 0) return\n  queueMicrotask(() => {\n    for (const entry of entries) {\n      if (ctx.unmounted) return\n      if (entry.cleanup) entry.cleanup()\n      const cleanup = entry.fn()\n      entry.cleanup = typeof cleanup === \"function\" ? cleanup : undefined\n    }\n  })\n}\n\n// ─── Component wrapping ──────────────────────────────────────────────────────\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nconst _wrapperCache = new WeakMap<Function, ComponentFn>()\n\n// biome-ignore lint/complexity/noBannedTypes: Function is needed for generic component wrapping\nfunction wrapCompatComponent(vueComponent: Function): ComponentFn {\n  let wrapped = _wrapperCache.get(vueComponent)\n  if (wrapped) return wrapped\n\n  // The wrapper returns a reactive accessor (() => VNodeChild) which Pyreon's\n  // mountChild treats as a reactive expression via mountReactive.\n  wrapped = ((props: Props) => {\n    const ctx: RenderContext = {\n      hooks: [],\n      scheduleRerender: () => {\n        // Will be replaced below after version signal is created\n      },\n      pendingEffects: [],\n      pendingLayoutEffects: [],\n      unmounted: false,\n      unmountCallbacks: [],\n    }\n\n    const version = signal(0)\n    let updateScheduled = false\n\n    ctx.scheduleRerender = () => {\n      if (ctx.unmounted || updateScheduled) return\n      updateScheduled = true\n      queueMicrotask(() => {\n        updateScheduled = false\n        if (!ctx.unmounted) version.set(version.peek() + 1)\n      })\n    }\n\n    // Register cleanup when component unmounts\n    onUnmount(() => {\n      ctx.unmounted = true\n      for (const cb of ctx.unmountCallbacks) cb()\n    })\n\n    // Return reactive accessor — Pyreon's mountChild calls mountReactive\n    return () => {\n      version() // tracked read — triggers re-execution when state changes\n      beginRender(ctx)\n      // runUntracked prevents .value signal reads from being tracked by this accessor —\n      // only the version signal should trigger re-renders\n      const result = runUntracked(() => (vueComponent as ComponentFn)(props))\n      const layoutEffects = ctx.pendingLayoutEffects\n      const effects = ctx.pendingEffects\n      endRender()\n\n      runLayoutEffects(layoutEffects)\n      scheduleEffects(ctx, effects)\n\n      return result\n    }\n  }) as unknown as ComponentFn\n\n  _wrapperCache.set(vueComponent, wrapped)\n  return wrapped\n}\n\n// ─── JSX functions ───────────────────────────────────────────────────────────\n\nexport function jsx(\n  type: string | ComponentFn | symbol,\n  props: Props & { children?: VNodeChild | VNodeChild[] },\n  key?: string | number | null,\n): VNode {\n  const { children, ...rest } = props\n  const propsWithKey = (key != null ? { ...rest, key } : rest) as Props\n\n  if (typeof type === \"function\") {\n    // Wrap Vue-style component for re-render support\n    const wrapped = wrapCompatComponent(type)\n    const componentProps = children !== undefined ? { ...propsWithKey, children } : propsWithKey\n    return h(wrapped, componentProps)\n  }\n\n  // DOM element or symbol (Fragment): children go in vnode.children\n  const childArray = children === undefined ? [] : Array.isArray(children) ? children : [children]\n\n  return h(type, propsWithKey, ...(childArray as VNodeChild[]))\n}\n\nexport const jsxs = jsx\nexport const jsxDEV = jsx\n"],"mappings":";;;;AA4CA,IAAI,cAAoC;AACxC,IAAI,aAAa;AAUjB,SAAgB,YAAY,KAA0B;AACpD,eAAc;AACd,cAAa;AACb,KAAI,iBAAiB,EAAE;AACvB,KAAI,uBAAuB,EAAE;;AAG/B,SAAgB,YAAkB;AAChC,eAAc;AACd,cAAa;;AAKf,SAAS,iBAAiB,SAA8B;AACtD,MAAK,MAAM,SAAS,SAAS;AAC3B,MAAI,MAAM,QAAS,OAAM,SAAS;EAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,QAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;;AAI9D,SAAS,gBAAgB,KAAoB,SAA8B;AACzE,KAAI,QAAQ,WAAW,EAAG;AAC1B,sBAAqB;AACnB,OAAK,MAAM,SAAS,SAAS;AAC3B,OAAI,IAAI,UAAW;AACnB,OAAI,MAAM,QAAS,OAAM,SAAS;GAClC,MAAM,UAAU,MAAM,IAAI;AAC1B,SAAM,UAAU,OAAO,YAAY,aAAa,UAAU;;GAE5D;;AAMJ,MAAM,gCAAgB,IAAI,SAAgC;AAG1D,SAAS,oBAAoB,cAAqC;CAChE,IAAI,UAAU,cAAc,IAAI,aAAa;AAC7C,KAAI,QAAS,QAAO;AAIpB,aAAY,UAAiB;EAC3B,MAAM,MAAqB;GACzB,OAAO,EAAE;GACT,wBAAwB;GAGxB,gBAAgB,EAAE;GAClB,sBAAsB,EAAE;GACxB,WAAW;GACX,kBAAkB,EAAE;GACrB;EAED,MAAM,UAAU,OAAO,EAAE;EACzB,IAAI,kBAAkB;AAEtB,MAAI,yBAAyB;AAC3B,OAAI,IAAI,aAAa,gBAAiB;AACtC,qBAAkB;AAClB,wBAAqB;AACnB,sBAAkB;AAClB,QAAI,CAAC,IAAI,UAAW,SAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE;KACnD;;AAIJ,kBAAgB;AACd,OAAI,YAAY;AAChB,QAAK,MAAM,MAAM,IAAI,iBAAkB,KAAI;IAC3C;AAGF,eAAa;AACX,YAAS;AACT,eAAY,IAAI;GAGhB,MAAM,SAAS,mBAAoB,aAA6B,MAAM,CAAC;GACvE,MAAM,gBAAgB,IAAI;GAC1B,MAAM,UAAU,IAAI;AACpB,cAAW;AAEX,oBAAiB,cAAc;AAC/B,mBAAgB,KAAK,QAAQ;AAE7B,UAAO;;;AAIX,eAAc,IAAI,cAAc,QAAQ;AACxC,QAAO;;AAKT,SAAgB,IACd,MACA,OACA,KACO;CACP,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,eAAgB,OAAO,OAAO;EAAE,GAAG;EAAM;EAAK,GAAG;AAEvD,KAAI,OAAO,SAAS,WAIlB,QAAO,EAFS,oBAAoB,KAAK,EAClB,aAAa,SAAY;EAAE,GAAG;EAAc;EAAU,GAAG,aAC/C;AAMnC,QAAO,EAAE,MAAM,cAAc,GAFV,aAAa,SAAY,EAAE,GAAG,MAAM,QAAQ,SAAS,GAAG,WAAW,CAAC,SAAS,CAEnC;;AAG/D,MAAa,OAAO"}

package/lib/types/jsx-runtime.d.ts

@@ -0,0 +1,92 @@
+import { Fragment, h, onUnmount } from "@pyreon/core";
+import { runUntracked, signal } from "@pyreon/reactivity";
+
+//#region src/jsx-runtime.ts
+
+function beginRender(ctx) {
+  _currentCtx = ctx;
+  _hookIndex = 0;
+  ctx.pendingEffects = [];
+  ctx.pendingLayoutEffects = [];
+}
+function endRender() {
+  _currentCtx = null;
+  _hookIndex = 0;
+}
+function runLayoutEffects(entries) {
+  for (const entry of entries) {
+    if (entry.cleanup) entry.cleanup();
+    const cleanup = entry.fn();
+    entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+  }
+}
+function scheduleEffects(ctx, entries) {
+  if (entries.length === 0) return;
+  queueMicrotask(() => {
+    for (const entry of entries) {
+      if (ctx.unmounted) return;
+      if (entry.cleanup) entry.cleanup();
+      const cleanup = entry.fn();
+      entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+    }
+  });
+}
+function wrapCompatComponent(vueComponent) {
+  let wrapped = _wrapperCache.get(vueComponent);
+  if (wrapped) return wrapped;
+  wrapped = props => {
+    const ctx = {
+      hooks: [],
+      scheduleRerender: () => {},
+      pendingEffects: [],
+      pendingLayoutEffects: [],
+      unmounted: false,
+      unmountCallbacks: []
+    };
+    const version = signal(0);
+    let updateScheduled = false;
+    ctx.scheduleRerender = () => {
+      if (ctx.unmounted || updateScheduled) return;
+      updateScheduled = true;
+      queueMicrotask(() => {
+        updateScheduled = false;
+        if (!ctx.unmounted) version.set(version.peek() + 1);
+      });
+    };
+    onUnmount(() => {
+      ctx.unmounted = true;
+      for (const cb of ctx.unmountCallbacks) cb();
+    });
+    return () => {
+      version();
+      beginRender(ctx);
+      const result = runUntracked(() => vueComponent(props));
+      const layoutEffects = ctx.pendingLayoutEffects;
+      const effects = ctx.pendingEffects;
+      endRender();
+      runLayoutEffects(layoutEffects);
+      scheduleEffects(ctx, effects);
+      return result;
+    };
+  };
+  _wrapperCache.set(vueComponent, wrapped);
+  return wrapped;
+}
+function jsx(type, props, key) {
+  const {
+    children,
+    ...rest
+  } = props;
+  const propsWithKey = key != null ? {
+    ...rest,
+    key
+  } : rest;
+  if (typeof type === "function") return h(wrapCompatComponent(type), children !== void 0 ? {
+    ...propsWithKey,
+    children
+  } : propsWithKey);
+  return h(type, propsWithKey, ...(children === void 0 ? [] : Array.isArray(children) ? children : [children]));
+}
+//#endregion
+export { Fragment, jsx, jsxs };
+//# sourceMappingURL=jsx-runtime.d.ts.map

package/lib/types/jsx-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.d.ts","names":[],"sources":["../../src/jsx-runtime.ts"],"mappings":"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"}

package/lib/types/jsx-runtime2.d.ts

@@ -0,0 +1,10 @@
+import { ComponentFn, Fragment, Props, VNode, VNodeChild } from "@pyreon/core";
+
+//#region src/jsx-runtime.d.ts
+declare function jsx(type: string | ComponentFn | symbol, props: Props & {
+  children?: VNodeChild | VNodeChild[];
+}, key?: string | number | null): VNode;
+declare const jsxs: typeof jsx;
+//#endregion
+export { Fragment, jsx, jsxs };
+//# sourceMappingURL=jsx-runtime2.d.ts.map

package/lib/types/jsx-runtime2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime2.d.ts","names":[],"sources":["../../src/jsx-runtime.ts"],"mappings":";;;iBA2JgB,GAAA,CACd,IAAA,WAAe,WAAA,WACf,KAAA,EAAO,KAAA;EAAU,QAAA,GAAW,UAAA,GAAa,UAAA;AAAA,GACzC,GAAA,4BACC,KAAA;AAAA,cAiBU,IAAA,SAAI,GAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/vue-compat",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Vue 3-compatible Composition API shim for Pyreon — write Vue-style code that runs on Pyreon's reactive engine",
   "license": "MIT",
   "repository": {
@@ -49,9 +49,9 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.4.0",
-    "@pyreon/reactivity": "^0.4.0",
-    "@pyreon/runtime-dom": "^0.4.0"
+    "@pyreon/core": "^0.5.1",
+    "@pyreon/reactivity": "^0.5.1",
+    "@pyreon/runtime-dom": "^0.5.1"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",

package/src/jsx-dev-runtime.ts

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from "./jsx-runtime"