@sigrea/vue 0.5.0 → 0.6.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sigrea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -33,7 +33,7 @@
 npm install @sigrea/vue @sigrea/core vue
 ```
 
-Requires Vue 3.4+ and Node.js 20 or later.
+Requires Vue 3.4+ and Node.js 24 or later.
 
 ## Quick Start
 
@@ -163,11 +163,11 @@ const model = useDeepSignal(profile);
 
 ```ts
 function useSignal<T>(
-  signal: Signal<T> | ReadonlySignal<T>
+  signal: Signal<T> | ReadonlySignal<T> | Computed<T>
 ): DeepReadonly<ShallowRef<T>>
 ```
 
-Subscribes to a signal or computed value and returns a readonly Vue ref that updates when the signal changes. The subscription is cleaned up when the component unmounts.
+Subscribes to a signal or computed value and returns a readonly Vue ref that updates when the signal changes. The subscription is cleaned up when the component unmounts, or after server rendering, including any `onServerPrefetch()` work, completes.
 
 ### useComputed
 
@@ -175,7 +175,7 @@ Subscribes to a signal or computed value and returns a readonly Vue ref that upd
 function useComputed<T>(source: Computed<T>): DeepReadonly<ShallowRef<T>>
 ```
 
-Subscribes to a computed value and returns a readonly Vue ref that updates when the computed value changes. The subscription is cleaned up when the component unmounts.
+Subscribes to a computed value and returns a readonly Vue ref that updates when the computed value changes. The subscription is cleaned up when the component unmounts, or after server rendering, including any `onServerPrefetch()` work, completes.
 
 ### useDeepSignal
 
@@ -183,7 +183,7 @@ Subscribes to a computed value and returns a readonly Vue ref that updates when
 function useDeepSignal<T extends object>(signal: DeepSignal<T>): ShallowRef<T>
 ```
 
-Subscribes to a deep signal and returns a mutable Vue ref. Updates to the deep signal trigger reactivity, and the subscription is cleaned up when the component unmounts. Templates unwrap the ref automatically, so accessing nested properties requires no `.value`. In script blocks, use `state.value` to access the underlying object.
+Subscribes to a deep signal and returns a mutable Vue ref. Updates to the deep signal trigger reactivity, and the subscription is cleaned up when the component unmounts, or after server rendering, including any `onServerPrefetch()` work, completes. Templates unwrap the ref automatically, so accessing nested properties requires no `.value`. In script blocks, use `state.value` to access the underlying object.
 
 ### useMutableSignal
 
@@ -204,6 +204,10 @@ function useMolecule<TReturn extends object, TProps extends object | void = void
 
 Mounts a molecule factory and returns its MoleculeInstance. Sigrea augments the molecule with lifecycle metadata: `onMount` callbacks run after the component mounts, and `onUnmount` callbacks run before it unmounts.
 
+**Server Rendering**
+
+During server rendering, `useMolecule` creates the molecule instance for the render pass but does not mount it. `onMount`, `watch`, `watchEffect`, `onActivated`, and `onDeactivated` do not run on the server. Unmounted instances created during SSR are disposed automatically in a microtask after server rendering, including any `onServerPrefetch()` work, completes.
+
 **KeepAlive Support**
 
 When used inside Vue's `<KeepAlive>`, molecule side effects are automatically managed for optimal resource efficiency:
@@ -264,7 +268,7 @@ createApp(App).mount("#app");
 
 ## Development
 
-This repo targets Node.js 20 or later.
+This repo targets Node.js 24 or later.
 
 If you use mise:
 

package/dist/index.cjs

@@ -3,6 +3,109 @@
 const vue = require('vue');
 const core = require('@sigrea/core');
 
+const IS_SERVER = typeof window === "undefined";
+const cleanupStates = /* @__PURE__ */ new WeakMap();
+const wrappedSsrRenderComponents = /* @__PURE__ */ new WeakSet();
+function getCleanupState(instance) {
+  const existing = cleanupStates.get(instance);
+  if (existing !== void 0) {
+    return existing;
+  }
+  const state = {
+    cleanups: [],
+    registered: false,
+    renderWrapped: false,
+    flushed: false
+  };
+  cleanupStates.set(instance, state);
+  return state;
+}
+function flushSsrCleanups(instance, state) {
+  if (state.flushed) {
+    return;
+  }
+  state.flushed = true;
+  cleanupStates.delete(instance);
+  const errors = [];
+  const cleanups = state.cleanups.splice(0);
+  for (const cleanup of cleanups) {
+    try {
+      cleanup();
+    } catch (error) {
+      errors.push(error);
+    }
+  }
+  if (errors.length === 1) {
+    throw errors[0];
+  }
+  if (errors.length > 1) {
+    throw new AggregateError(errors, "Failed to run SSR cleanups.");
+  }
+}
+function queueSsrCleanup(instance, state) {
+  queueMicrotask(() => {
+    flushSsrCleanups(instance, state);
+  });
+}
+function wrapInstanceRender(instance, state) {
+  if (state.renderWrapped || state.flushed) {
+    return;
+  }
+  const renderInstance = instance;
+  const render = renderInstance.render;
+  if (typeof render !== "function") {
+    return;
+  }
+  state.renderWrapped = true;
+  renderInstance.render = ((...args) => {
+    try {
+      return render(...args);
+    } finally {
+      queueSsrCleanup(instance, state);
+    }
+  });
+}
+function wrapComponentSsrRender(component) {
+  if (wrappedSsrRenderComponents.has(component)) {
+    return;
+  }
+  const ssrRender = component.ssrRender;
+  if (typeof ssrRender !== "function") {
+    return;
+  }
+  wrappedSsrRenderComponents.add(component);
+  component.ssrRender = ((...args) => {
+    const instance = vue.getCurrentInstance();
+    const state = instance === null ? void 0 : cleanupStates.get(instance);
+    try {
+      return ssrRender(...args);
+    } finally {
+      if (instance !== null && state !== void 0) {
+        queueSsrCleanup(instance, state);
+      }
+    }
+  });
+}
+function registerSsrCleanup(cleanup) {
+  if (!IS_SERVER) {
+    return;
+  }
+  const instance = vue.getCurrentInstance();
+  if (instance === null) {
+    return;
+  }
+  const state = getCleanupState(instance);
+  state.cleanups.push(cleanup);
+  if (state.registered) {
+    return;
+  }
+  state.registered = true;
+  vue.onServerPrefetch(() => {
+    wrapInstanceRender(instance, state);
+    wrapComponentSsrRender(instance.type);
+  });
+}
+
 function useMolecule(molecule, ...args) {
   if (vue.getCurrentInstance() === null) {
     throw new Error(
@@ -16,6 +119,15 @@ function useMolecule(molecule, ...args) {
   const snapshot = props === void 0 ? void 0 : { ...vue.toRaw(props) };
   const moleculeArgs = snapshot === void 0 ? [] : [snapshot];
   const instance = molecule(...moleculeArgs);
+  const disposeState = { disposed: false };
+  const dispose = () => {
+    if (disposeState.disposed) {
+      return;
+    }
+    disposeState.disposed = true;
+    core.disposeMolecule(instance);
+  };
+  registerSsrCleanup(dispose);
   vue.onMounted(() => {
     core.mountMolecule(instance);
   });
@@ -29,7 +141,7 @@ function useMolecule(molecule, ...args) {
     core.unmountMolecule(instance);
   });
   vue.onScopeDispose(() => {
-    core.disposeMolecule(instance);
+    dispose();
   });
   return instance;
 }
@@ -50,8 +162,17 @@ function useSnapshot(handler, options) {
     vue.triggerRef(state);
   };
   const unsubscribe = handler.subscribe(update);
-  vue.onScopeDispose(() => {
+  const unsubscribeState = { active: true };
+  const cleanup = () => {
+    if (!unsubscribeState.active) {
+      return;
+    }
+    unsubscribeState.active = false;
     unsubscribe();
+  };
+  registerSsrCleanup(cleanup);
+  vue.onScopeDispose(() => {
+    cleanup();
   });
   if (options?.mode === "mutable") {
     return state;

package/dist/index.mjs

@@ -1,6 +1,109 @@
-import { getCurrentInstance, toRaw, onMounted, onActivated, onDeactivated, onBeforeUnmount, onScopeDispose, shallowRef, readonly, triggerRef, computed } from 'vue';
+import { getCurrentInstance, onServerPrefetch, toRaw, onMounted, onActivated, onDeactivated, onBeforeUnmount, onScopeDispose, shallowRef, readonly, triggerRef, computed } from 'vue';
 import { mountMolecule, unmountMolecule, disposeMolecule, createSignalHandler, createComputedHandler, createDeepSignalHandler } from '@sigrea/core';
 
+const IS_SERVER = typeof window === "undefined";
+const cleanupStates = /* @__PURE__ */ new WeakMap();
+const wrappedSsrRenderComponents = /* @__PURE__ */ new WeakSet();
+function getCleanupState(instance) {
+  const existing = cleanupStates.get(instance);
+  if (existing !== void 0) {
+    return existing;
+  }
+  const state = {
+    cleanups: [],
+    registered: false,
+    renderWrapped: false,
+    flushed: false
+  };
+  cleanupStates.set(instance, state);
+  return state;
+}
+function flushSsrCleanups(instance, state) {
+  if (state.flushed) {
+    return;
+  }
+  state.flushed = true;
+  cleanupStates.delete(instance);
+  const errors = [];
+  const cleanups = state.cleanups.splice(0);
+  for (const cleanup of cleanups) {
+    try {
+      cleanup();
+    } catch (error) {
+      errors.push(error);
+    }
+  }
+  if (errors.length === 1) {
+    throw errors[0];
+  }
+  if (errors.length > 1) {
+    throw new AggregateError(errors, "Failed to run SSR cleanups.");
+  }
+}
+function queueSsrCleanup(instance, state) {
+  queueMicrotask(() => {
+    flushSsrCleanups(instance, state);
+  });
+}
+function wrapInstanceRender(instance, state) {
+  if (state.renderWrapped || state.flushed) {
+    return;
+  }
+  const renderInstance = instance;
+  const render = renderInstance.render;
+  if (typeof render !== "function") {
+    return;
+  }
+  state.renderWrapped = true;
+  renderInstance.render = ((...args) => {
+    try {
+      return render(...args);
+    } finally {
+      queueSsrCleanup(instance, state);
+    }
+  });
+}
+function wrapComponentSsrRender(component) {
+  if (wrappedSsrRenderComponents.has(component)) {
+    return;
+  }
+  const ssrRender = component.ssrRender;
+  if (typeof ssrRender !== "function") {
+    return;
+  }
+  wrappedSsrRenderComponents.add(component);
+  component.ssrRender = ((...args) => {
+    const instance = getCurrentInstance();
+    const state = instance === null ? void 0 : cleanupStates.get(instance);
+    try {
+      return ssrRender(...args);
+    } finally {
+      if (instance !== null && state !== void 0) {
+        queueSsrCleanup(instance, state);
+      }
+    }
+  });
+}
+function registerSsrCleanup(cleanup) {
+  if (!IS_SERVER) {
+    return;
+  }
+  const instance = getCurrentInstance();
+  if (instance === null) {
+    return;
+  }
+  const state = getCleanupState(instance);
+  state.cleanups.push(cleanup);
+  if (state.registered) {
+    return;
+  }
+  state.registered = true;
+  onServerPrefetch(() => {
+    wrapInstanceRender(instance, state);
+    wrapComponentSsrRender(instance.type);
+  });
+}
+
 function useMolecule(molecule, ...args) {
   if (getCurrentInstance() === null) {
     throw new Error(
@@ -14,6 +117,15 @@ function useMolecule(molecule, ...args) {
   const snapshot = props === void 0 ? void 0 : { ...toRaw(props) };
   const moleculeArgs = snapshot === void 0 ? [] : [snapshot];
   const instance = molecule(...moleculeArgs);
+  const disposeState = { disposed: false };
+  const dispose = () => {
+    if (disposeState.disposed) {
+      return;
+    }
+    disposeState.disposed = true;
+    disposeMolecule(instance);
+  };
+  registerSsrCleanup(dispose);
   onMounted(() => {
     mountMolecule(instance);
   });
@@ -27,7 +139,7 @@ function useMolecule(molecule, ...args) {
     unmountMolecule(instance);
   });
   onScopeDispose(() => {
-    disposeMolecule(instance);
+    dispose();
   });
   return instance;
 }
@@ -48,8 +160,17 @@ function useSnapshot(handler, options) {
     triggerRef(state);
   };
   const unsubscribe = handler.subscribe(update);
-  onScopeDispose(() => {
+  const unsubscribeState = { active: true };
+  const cleanup = () => {
+    if (!unsubscribeState.active) {
+      return;
+    }
+    unsubscribeState.active = false;
     unsubscribe();
+  };
+  registerSsrCleanup(cleanup);
+  onScopeDispose(() => {
+    cleanup();
   });
   if (options?.mode === "mutable") {
     return state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sigrea/vue",
-	"version": "0.5.0",
+	"version": "0.6.1",
 	"description": "Vue adapter bindings for Sigrea molecule modules.",
 	"license": "MIT",
 	"type": "module",
@@ -17,7 +17,7 @@
 		"url": "https://github.com/sigrea/vue/issues"
 	},
 	"engines": {
-		"node": ">=20"
+		"node": ">=24"
 	},
 	"sideEffects": false,
 	"exports": {
@@ -29,16 +29,8 @@
 	},
 	"main": "./dist/index.cjs",
 	"types": "./dist/index.d.ts",
-	"files": [
-		"dist"
-	],
-	"keywords": [
-		"signals",
-		"reactivity",
-		"vue",
-		"molecule",
-		"typescript"
-	],
+	"files": ["dist"],
+	"keywords": ["signals", "reactivity", "vue", "molecule", "typescript"],
 	"scripts": {
 		"dev": "vite --config playground/vite.config.ts",
 		"build": "unbuild",
@@ -53,12 +45,12 @@
 		"cicheck": "pnpm test && pnpm typecheck && pnpm format:fix"
 	},
 	"peerDependencies": {
-		"@sigrea/core": "^0.5.0",
+		"@sigrea/core": "^0.6.0",
 		"vue": "^3.4.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@sigrea/core": "^0.5.0",
+		"@sigrea/core": "^0.6.0",
 		"@vitejs/plugin-vue": "^5.1.4",
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vue/test-utils": "^2.4.0",
@@ -74,9 +66,6 @@
 		"vue": "^3.4.0"
 	},
 	"pnpm": {
-		"onlyBuiltDependencies": [
-			"lefthook",
-			"@biomejs/biome"
-		]
+		"onlyBuiltDependencies": ["lefthook", "@biomejs/biome"]
 	}
 }