@octanejs/tanstack-router 0.1.30 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/tanstack-router",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -58,7 +58,7 @@
     "isbot": "^5.1.22"
   },
   "peerDependencies": {
-    "octane": "0.1.31"
+    "octane": "0.1.33"
   },
   "devDependencies": {
     "@tanstack/react-router": "1.170.18",
@@ -67,7 +67,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "vitest": "^4.1.10",
-    "octane": "0.1.31"
+    "octane": "0.1.33"
   },
   "scripts": {
     "test": "vitest run"

package/src/Asset.tsrx

@@ -10,6 +10,8 @@ export type AssetProps =
 		target: 'head' | 'body';
 	};
 
+type ManagedAssetProps = AssetProps & { managedKey?: string };
+
 const MANAGED_KEY_ATTR = 'data-tsr-managed-key';
 
 function attributeName(name: string) {
@@ -51,16 +53,17 @@ function findManagedElement(parent: HTMLElement, key: string) {
 	return undefined;
 }
 
-function mountAsset(props: AssetProps) {
+function mountAsset(props: ManagedAssetProps) {
 	const parent =
 		props.target === 'head' ? document.head : document.body;
-	const existing = findManagedElement(parent, props.assetKey);
+	const managedKey = props.managedKey ?? props.assetKey;
+	const existing = findManagedElement(parent, managedKey);
 	if (existing) {
 		return () => existing.remove();
 	}
 
 	const element = document.createElement(props.tag);
-	element.setAttribute(MANAGED_KEY_ATTR, props.assetKey);
+	element.setAttribute(MANAGED_KEY_ATTR, managedKey);
 	setAttributes(element, props.attrs);
 	if (typeof props.children === 'string') {
 		element.textContent = props.children;
@@ -72,10 +75,12 @@ function mountAsset(props: AssetProps) {
 export function Asset(props: AssetProps) @{
 	const router = useRouter();
 	const hydrated = useHydrated();
+	const managedKey = (props as ManagedAssetProps).managedKey ?? props.assetKey;
 
 	if (!(isServer ?? router.isServer)) {
 		useLayoutEffect(() => mountAsset(props), [
 			props.assetKey,
+			managedKey,
 			props.attrs,
 			props.children,
 			props.tag,
@@ -83,38 +88,37 @@ export function Asset(props: AssetProps) @{
 		]);
 	}
 
-	@if ((isServer ?? router.isServer) || props.target === 'body' && !hydrated) {
-		@switch (props.tag) {
-			@case 'title': {
-				<title {...props.attrs} data-tsr-managed-key={props.assetKey}>
-					{props.children ?? '' as string}
-				</title>
-			}
-			@case 'meta': {
-				<meta {...props.attrs} data-tsr-managed-key={props.assetKey} />
-			}
-			@case 'link': {
-				<link {...props.attrs} data-tsr-managed-key={props.assetKey} />
-			}
-			@case 'style': {
-				{createElement('style', {
-					...props.attrs,
-					'data-tsr-managed-key': props.assetKey,
-					dangerouslySetInnerHTML: { __html: props.children ?? '' },
-				})}
-			}
-			@case 'script': {
-				<script
-					{...props.attrs}
-					data-tsr-managed-key={props.assetKey}
-					dangerouslySetInnerHTML={{ __html: props.children ?? '' }}
-				/>
-			}
-			@default: {
-				<></>
-			}
+	const visibleTag =
+		(isServer ?? router.isServer) || props.target === 'body' && !hydrated ? props.tag : undefined;
+
+	@switch (visibleTag) {
+		@case 'title': {
+			<title {...props.attrs} data-tsr-managed-key={managedKey}>
+				{props.children ?? '' as string}
+			</title>
+		}
+		@case 'meta': {
+			<meta {...props.attrs} data-tsr-managed-key={managedKey} />
+		}
+		@case 'link': {
+			<link {...props.attrs} data-tsr-managed-key={managedKey} />
+		}
+		@case 'style': {
+			{createElement('style', {
+				...props.attrs,
+				'data-tsr-managed-key': managedKey,
+				dangerouslySetInnerHTML: { __html: props.children ?? '' },
+			})}
+		}
+		@case 'script': {
+			<script
+				{...props.attrs}
+				data-tsr-managed-key={managedKey}
+				dangerouslySetInnerHTML={{ __html: props.children ?? '' }}
+			/>
+		}
+		@default: {
+			<></>
 		}
-	} @else {
-		<></>
 	}
 }

package/src/HeadContent.tsrx

@@ -1,9 +1,9 @@
-import { createElement, useEffect } from 'octane';
+import { createElement, useEffect, useId } from 'octane';
 import { DEV_STYLES_ATTR } from '@tanstack/router-core';
 import type { AssetCrossOriginConfig } from '@tanstack/router-core';
 import { Asset } from './Asset.tsrx';
 import type { AssetProps } from './Asset.tsrx';
-import { getAssetKey } from './assetKeys.ts';
+import { getAssetKey, getManagedAssetKey } from './assetKeys.ts';
 import { useTags } from './headContentUtils.ts';
 import { useHydrated } from './ClientOnly.tsrx';
 
@@ -12,6 +12,7 @@ export interface HeadContentProps {
 }
 
 export function HeadContent(props: HeadContentProps) @{
+	const owner = useId();
 	const tags = useTags(props.assetCrossOrigin);
 	const hydrated = useHydrated();
 
@@ -27,15 +28,17 @@ export function HeadContent(props: HeadContentProps) @{
 			? tags.filter((tag) => tag.tag !== 'link' || tag.attrs?.[DEV_STYLES_ATTR] !== true)
 			: tags;
 	<>
-		{filteredTags.map(
-			(tag, index) => // `key` is lifted out of props by createElement (React semantics); the
+		{filteredTags.map((tag, index) => {
+			const assetKey = getAssetKey('head', tag, index);
+			// `key` is lifted out of props by createElement (React semantics); the
 			// explicit type argument admits it alongside the AssetProps shape.
-			createElement<AssetProps & { key?: string }>(Asset, {
+			return createElement<AssetProps & { key?: string; managedKey?: string }>(Asset, {
 				...tag,
-				assetKey: getAssetKey('head', tag, index),
+				assetKey,
+				managedKey: getManagedAssetKey('head', owner, index),
 				target: 'head',
-				key: getAssetKey('head', tag, index),
-			}),
-		)}
+				key: assetKey,
+			});
+		})}
 	</>
 }

package/src/Scripts.tsrx

@@ -1,11 +1,12 @@
-import { createElement, useEffect, useState } from 'octane';
+import { createElement, useEffect, useId, useState } from 'octane';
 import { isServer } from '@tanstack/router-core/isServer';
 import type { RouterManagedTag } from '@tanstack/router-core';
-import { getAssetKey } from './assetKeys.ts';
+import { getAssetKey, getManagedAssetKey } from './assetKeys.ts';
 import { useRouter } from './context.ts';
 import { useScripts } from './scriptContentUtils.ts';
 
 export function Scripts() @{
+	const owner = useId();
 	const router = useRouter();
 	const scripts = useScripts();
 	const [hydrating, setHydrating] = useState(true);
@@ -34,7 +35,7 @@ export function Scripts() @{
 			return createElement('script', {
 				...script.attrs,
 				key: assetKey,
-				'data-tsr-managed-key': assetKey,
+				'data-tsr-managed-key': getManagedAssetKey('body', owner, index),
 				dangerouslySetInnerHTML: { __html: script.children ?? '' },
 			});
 		})}

package/src/assetKeys.ts

@@ -9,3 +9,7 @@ export function getAssetKey(scope: 'head' | 'body', asset: RouterManagedTag, ind
 		inlineCss,
 	})}`;
 }
+
+export function getManagedAssetKey(scope: 'head' | 'body', owner: string, index: number) {
+	return `${scope}:${owner}:${index.toString(36)}`;
+}

package/src/useStore.ts

@@ -6,6 +6,7 @@
 // `useSyncExternalStore`. The atoms come from router-core's client store factory
 // (`createAtom` from `@tanstack/store`): `.subscribe(cb) → { unsubscribe }` + `.get()`.
 import { useSyncExternalStore, useCallback, useRef } from 'octane';
+import { isServer } from '@tanstack/router-core/isServer';
 import { subSlot, splitSlot } from './internal';
 
 interface Atom<T> {
@@ -25,6 +26,13 @@ export function useStore<T, S = T>(
 	slot?: symbol,
 ): S;
 export function useStore(...args: any[]): any {
+	const rawAtom = args[0] as Atom<unknown>;
+	if (isServer && typeof rawAtom.subscribe !== 'function') {
+		const value = rawAtom.get();
+		const selector = args[1];
+		return typeof selector === 'function' ? selector(value) : value;
+	}
+
 	const [user, slot] = splitSlot(args);
 	const atom = user[0] as Atom<unknown>;
 	const selector = (user[1] ?? ((s: unknown) => s)) as (s: unknown) => unknown;