@octanejs/tanstack-start 0.1.1 → 0.1.5

package/src/hydration/visible.tsrx

@@ -0,0 +1,123 @@
+// visible hydration strategy — port of @tanstack/react-start-client's
+// hydration/visible.tsx. Fully self-contained fast path (no shared gate
+// registry): a per-instance promise gate resolved by an IntersectionObserver.
+// `reactUse` feature-detection is dropped — octane's `use` always exists.
+//
+// OCTANE ADAPTATION: upstream's VisibleHydrate is bare-called as a method
+// (`props.when._h(props)`) with the strategy as `this`, running its hooks on
+// the caller's fiber. Octane's compiled components take the
+// `(props, __s, __extra)` ABI and cannot be bare-called, so octane's `Hydrate`
+// renders `_h` as a child component and VisibleHydrate derives its strategy
+// from `props.when` instead of `this` (resolving a function-valued `when` per
+// render, exactly as upstream's Hydrate does).
+import { Suspense, use, useEffect, useRef, useState } from 'octane';
+import type { OctaneNode } from 'octane';
+import { isServer } from '@tanstack/router-core/isServer';
+import type {
+	HydrationPrefetchStrategy,
+	VisibleHydrationOptions,
+} from '@tanstack/start-client-core/hydration';
+import type { HydrateProps, InternalHydrateProps, OctaneHydrationStrategy } from '../Hydrate.tsrx';
+
+type VisibleGate = {
+	p: Promise<void>;
+	r: boolean;
+	s: () => void;
+};
+
+function HydrationBoundary(props: { g: VisibleGate; o?: () => void; children?: OctaneNode }) {
+	const { g, o } = props;
+
+	if (!g.r) {
+		use(g.p);
+	}
+
+	useEffect(() => {
+		o?.();
+	}, [o]);
+
+	return props.children;
+}
+
+export function VisibleHydrate(props: HydrateProps) @{
+	const when = props.when;
+	const strategy = (typeof when === 'function' ? when() : when) as OctaneHydrationStrategy<
+		'visible',
+		true
+	>;
+	const prefetchStrategy = props.prefetch;
+	const preload = (props as InternalHydrateProps).p;
+	const markerRef = useRef<HTMLDivElement | null>(null);
+	const [gate] = useState<VisibleGate>(() => {
+		let resolvePromise: () => void;
+		const nextGate: VisibleGate = {
+			p: new Promise<void>((resolve) => {
+				resolvePromise = resolve;
+			}),
+			r: false,
+			s: () => {
+				nextGate.r = true;
+				resolvePromise();
+			},
+		};
+		if (isServer ?? typeof window === 'undefined') {
+			nextGate.s();
+		}
+
+		return nextGate;
+	});
+
+	useEffect(() => {
+		if (!preload || typeof prefetchStrategy === 'function') {
+			return;
+		}
+
+		return prefetchStrategy?._s?.({
+			element: markerRef.current,
+			prefetch: preload,
+		});
+	}, [prefetchStrategy, preload]);
+
+	useEffect(() => {
+		if (gate.r) return;
+
+		return strategy._s?.({
+			element: markerRef.current,
+			gate: gate as never,
+		});
+	}, [gate, strategy]);
+
+	<div ref={markerRef}>
+		<Suspense fallback={props.fallback}>
+			<HydrationBoundary g={gate} o={props.onHydrated}>{props.children}</HydrationBoundary>
+		</Suspense>
+	</div>
+}
+
+/* @__NO_SIDE_EFFECTS__ */
+export function visible(
+	options?: VisibleHydrationOptions,
+): OctaneHydrationStrategy<'visible', true> & HydrationPrefetchStrategy<'visible'> {
+	const rootMargin = options?.rootMargin ?? '600px';
+	const threshold = options?.threshold ?? 0;
+
+	return {
+		_s: ({ element, gate, prefetch }) => {
+			const callback = prefetch || (gate as never as VisibleGate).s;
+
+			if (!element) {
+				callback();
+				return;
+			}
+
+			const observer = new IntersectionObserver((entries) => {
+				if (!entries[0]!.isIntersecting) return;
+				observer.disconnect();
+				callback();
+			}, { rootMargin, threshold });
+			observer.observe(element);
+			return () => observer.disconnect();
+		},
+		_h: VisibleHydrate,
+	};
+}

package/src/hydration/visible.tsrx.d.ts

@@ -0,0 +1,12 @@
+import type { OctaneNode } from 'octane';
+import type {
+	HydrationPrefetchStrategy,
+	VisibleHydrationOptions,
+} from '@tanstack/start-client-core/hydration';
+import type { HydrateProps, OctaneHydrationStrategy } from '../Hydrate.tsrx';
+
+export declare function VisibleHydrate(props: HydrateProps): OctaneNode;
+
+export declare function visible(
+	options?: VisibleHydrationOptions,
+): OctaneHydrationStrategy<'visible', true> & HydrationPrefetchStrategy<'visible'>;

package/src/hydration.d.ts

@@ -0,0 +1,20 @@
+export { condition, interaction, media } from './hydration/generic.js';
+export { idle } from './hydration/idle.js';
+export { load } from './hydration/load.tsrx';
+export { never } from './hydration/never.tsrx';
+export { visible } from './hydration/visible.tsrx';
+export type {
+	HydrationCondition,
+	HydrationInteractionEvent,
+	HydrationInteractionEvents,
+	IdleHydrationOptions,
+	HydrationPrefetchContext,
+	HydrationPrefetchFunction,
+	HydrationPrefetchWhen,
+	HydrationPrefetchStrategy,
+	HydrationPrefetchWaitReason,
+	HydrationStrategyTypes,
+	HydrationWhen,
+	VisibleHydrationOptions,
+} from '@tanstack/start-client-core/hydration';
+export type { HydrationStrategy, OctaneHydrationStrategy } from './Hydrate.tsrx';

package/src/hydration.js

@@ -0,0 +1,8 @@
+// `@octanejs/tanstack-start/hydration` — port of @tanstack/react-start's
+// hydration.ts subpath: the hydration strategy factories consumed by
+// `<Hydrate when={...}>`.
+export { condition, interaction, media } from './hydration/generic.js';
+export { idle } from './hydration/idle.js';
+export { load } from './hydration/load.tsrx';
+export { never } from './hydration/never.tsrx';
+export { visible } from './hydration/visible.tsrx';

package/src/index.d.ts

@@ -1,5 +1,16 @@
 export { useServerFn } from './use-server-fn.js';
 export * from '@tanstack/start-client-core';
+export { Hydrate } from './Hydrate.tsrx';
+export type {
+	HydrateOptions,
+	HydrateProps,
+	HydrationInteractionEvent,
+	HydrationInteractionEvents,
+	HydrationPrefetchStrategy,
+	HydrationStrategy,
+	HydrationWhen,
+	OctaneHydrationStrategy,
+} from './Hydrate.tsrx';
 export {
 	createClientOnlyFn,
 	createCsrfMiddleware,

package/src/index.js

@@ -1,4 +1,5 @@
 import { useServerFn } from './use-server-fn.js';
+import { Hydrate } from './Hydrate.tsrx';
 import {
 	createClientOnlyFn,
 	createCsrfMiddleware,
@@ -11,6 +12,7 @@ import {
 
 export * from '@tanstack/start-client-core';
 export {
+	Hydrate,
 	createClientOnlyFn,
 	createCsrfMiddleware,
 	createIsomorphicFn,

package/src/internal/router-generator/filesystem/physical/getRouteNodes.js

@@ -180,12 +180,10 @@ async function getRouteNodes(config, root, tokenRegexes) {
 					}
 					const lastOriginalSegment = originalRoutePath.split('/').filter(Boolean).pop() || '';
 					const indexTokenCandidate = unwrapBracketWrappedSegment(lastOriginalSegment);
-					if (
-						!(
-							lastOriginalSegment !== indexTokenCandidate &&
-							indexTokenSegmentRegex.test(indexTokenCandidate)
-						)
-					) {
+					if (!(
+						lastOriginalSegment !== indexTokenCandidate &&
+						indexTokenSegmentRegex.test(indexTokenCandidate)
+					)) {
 						const updatedRouteSegments = routePath.split('/').filter(Boolean);
 						const updatedLastRouteSegment =
 							updatedRouteSegments[updatedRouteSegments.length - 1] || '';

package/src/internal/router-generator/generator.js

@@ -240,6 +240,9 @@ var Generator = class Generator {
 					} else {
 						const unrecoverableErrors = errArray.filter((e) => !isRerun(e));
 						this.runPromise = void 0;
+						if (process.env.OCTANE_DEBUG_GENERATOR) {
+							for (const e of unrecoverableErrors) console.error('[generator-debug]', e);
+						}
 						throw new Error(unrecoverableErrors.map((e) => e.message).join());
 					}
 				}

package/src/internal/router-plugin/core/code-splitter/compilers.js

@@ -836,12 +836,9 @@ function detectCodeSplitGroupingsFromRoute(opts) {
 				programPath.traverse({
 					CallExpression(path) {
 						if (!t.isIdentifier(path.node.callee)) return;
-						if (
-							!(
-								path.node.callee.name === 'createRoute' ||
-								path.node.callee.name === 'createFileRoute'
-							)
-						)
+						if (!(
+							path.node.callee.name === 'createRoute' || path.node.callee.name === 'createFileRoute'
+						))
 							return;
 						function babelHandleSplittingGroups(routeOptions) {
 							if (t.isObjectExpression(routeOptions))

package/src/internal/router-plugin/core/config.d.ts

@@ -251,9 +251,7 @@ export declare const getConfig: (
 	tmpDir: string;
 	importRoutesUsingAbsolutePaths: boolean;
 	virtualRouteConfig?:
-		| string
-		| import('@tanstack/virtual-file-routes').VirtualRootRoute
-		| undefined;
+		string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
 	routeFilePrefix?: string | undefined;
 	routeFileIgnorePattern?: string | undefined;
 	pathParamsAllowedCharacters?: (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[] | undefined;

package/src/internal/router-plugin/core/router-code-splitter-plugin.js

@@ -34,7 +34,7 @@ function createRouterCodeSplitterPlugin(options = {}, routerPluginContext) {
 		if (typeof options === 'function') userConfig = options();
 		else userConfig = getConfig(options, ROOT);
 	}
-	const isProduction = process.env.NODE_ENV === 'production';
+	let isProduction = process.env.NODE_ENV === 'production';
 	const sharedBindingsMap = /* @__PURE__ */ new Map();
 	const getGlobalCodeSplitGroupings = () => {
 		return userConfig.codeSplittingOptions?.defaultBehavior || defaultCodeSplitGroupings;
@@ -159,6 +159,7 @@ function createRouterCodeSplitterPlugin(options = {}, routerPluginContext) {
 			},
 			vite: {
 				configResolved(config) {
+					isProduction = config.command === 'build';
 					ROOT = config.root;
 					initUserConfig();
 					validateFrameworkPluginOrder({
@@ -173,11 +174,13 @@ function createRouterCodeSplitterPlugin(options = {}, routerPluginContext) {
 					return true;
 				},
 			},
-			rspack() {
+			rspack(compiler) {
+				isProduction = compiler.options.mode === 'production';
 				ROOT = process.cwd();
 				initUserConfig();
 			},
-			webpack() {
+			webpack(compiler) {
+				isProduction = compiler.options.mode === 'production';
 				ROOT = process.cwd();
 				initUserConfig();
 			},

package/src/internal/router-plugin/esbuild.d.ts

@@ -68,14 +68,11 @@ declare const TanStackRouterEsbuild: (
 						tmpDir: string;
 						importRoutesUsingAbsolutePaths: boolean;
 						virtualRouteConfig?:
-							| string
-							| import('@tanstack/virtual-file-routes').VirtualRootRoute
-							| undefined;
+							string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
 						routeFilePrefix?: string | undefined;
 						routeFileIgnorePattern?: string | undefined;
 						pathParamsAllowedCharacters?:
-							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
-							| undefined;
+							(':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[] | undefined;
 						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
 						autoCodeSplitting?: boolean | undefined;
 						customScaffolding?:
@@ -143,14 +140,11 @@ declare const tanstackRouter: (
 						tmpDir: string;
 						importRoutesUsingAbsolutePaths: boolean;
 						virtualRouteConfig?:
-							| string
-							| import('@tanstack/virtual-file-routes').VirtualRootRoute
-							| undefined;
+							string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
 						routeFilePrefix?: string | undefined;
 						routeFileIgnorePattern?: string | undefined;
 						pathParamsAllowedCharacters?:
-							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
-							| undefined;
+							(':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[] | undefined;
 						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
 						autoCodeSplitting?: boolean | undefined;
 						customScaffolding?:

package/src/internal/router-plugin/vite.d.ts

@@ -68,14 +68,11 @@ declare const tanstackRouter: (
 						tmpDir: string;
 						importRoutesUsingAbsolutePaths: boolean;
 						virtualRouteConfig?:
-							| string
-							| import('@tanstack/virtual-file-routes').VirtualRootRoute
-							| undefined;
+							string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
 						routeFilePrefix?: string | undefined;
 						routeFileIgnorePattern?: string | undefined;
 						pathParamsAllowedCharacters?:
-							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
-							| undefined;
+							(':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[] | undefined;
 						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
 						autoCodeSplitting?: boolean | undefined;
 						customScaffolding?:
@@ -146,14 +143,11 @@ declare const TanStackRouterVite: (
 						tmpDir: string;
 						importRoutesUsingAbsolutePaths: boolean;
 						virtualRouteConfig?:
-							| string
-							| import('@tanstack/virtual-file-routes').VirtualRootRoute
-							| undefined;
+							string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
 						routeFilePrefix?: string | undefined;
 						routeFileIgnorePattern?: string | undefined;
 						pathParamsAllowedCharacters?:
-							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
-							| undefined;
+							(':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[] | undefined;
 						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
 						autoCodeSplitting?: boolean | undefined;
 						customScaffolding?:

package/src/internal/start-plugin-core/import-protection/analysis.js

@@ -72,21 +72,22 @@ function collectIdentifiersFromPattern$1(pattern, add) {
 function isValidExportName(name) {
 	if (name === 'default' || name.length === 0) return false;
 	const first = name.charCodeAt(0);
-	if (
-		!((first >= 65 && first <= 90) || (first >= 97 && first <= 122) || first === 95 || first === 36)
-	)
+	if (!(
+		(first >= 65 && first <= 90) ||
+		(first >= 97 && first <= 122) ||
+		first === 95 ||
+		first === 36
+	))
 		return false;
 	for (let i = 1; i < name.length; i++) {
 		const ch = name.charCodeAt(i);
-		if (
-			!(
-				(ch >= 65 && ch <= 90) ||
-				(ch >= 97 && ch <= 122) ||
-				(ch >= 48 && ch <= 57) ||
-				ch === 95 ||
-				ch === 36
-			)
-		)
+		if (!(
+			(ch >= 65 && ch <= 90) ||
+			(ch >= 97 && ch <= 122) ||
+			(ch >= 48 && ch <= 57) ||
+			ch === 95 ||
+			ch === 36
+		))
 			return false;
 	}
 	return true;

package/src/internal/start-plugin-core/import-protection/constants.d.ts

@@ -1,4 +1,3 @@
-export declare const SERVER_FN_LOOKUP_QUERY = '?server-fn-module-lookup';
 export declare const MOCK_MODULE_ID = 'tanstack-start-import-protection:mock';
 export declare const MOCK_BUILD_PREFIX = 'tanstack-start-import-protection:mock:build:';
 export declare const MOCK_EDGE_PREFIX = 'tanstack-start-import-protection:mock-edge:';

package/src/internal/start-plugin-core/import-protection/constants.js

@@ -1,6 +1,4 @@
-import { SERVER_FN_LOOKUP } from '../constants.js';
 //#region src/import-protection/constants.ts
-var SERVER_FN_LOOKUP_QUERY = `?${SERVER_FN_LOOKUP}`;
 var MOCK_MODULE_ID = 'tanstack-start-import-protection:mock';
 var MOCK_BUILD_PREFIX = 'tanstack-start-import-protection:mock:build:';
 var MOCK_EDGE_PREFIX = 'tanstack-start-import-protection:mock-edge:';
@@ -34,6 +32,5 @@ export {
 	MOCK_EDGE_PREFIX,
 	MOCK_MODULE_ID,
 	MOCK_RUNTIME_PREFIX,
-	SERVER_FN_LOOKUP_QUERY,
 	VITE_BROWSER_VIRTUAL_PREFIX,
 };

package/src/internal/start-plugin-core/schema.d.ts

@@ -208,8 +208,7 @@ export declare function parseStartConfig(
 		base: string;
 		disableCsrfMiddlewareWarning: boolean;
 		generateFunctionId?:
-			| ((opts: { filename: string; functionName: string }) => string | undefined)
-			| undefined;
+			((opts: { filename: string; functionName: string }) => string | undefined) | undefined;
 	};
 	pages: {
 		path: string;
@@ -218,14 +217,7 @@ export declare function parseStartConfig(
 					exclude?: boolean | undefined;
 					priority?: number | undefined;
 					changefreq?:
-						| 'never'
-						| 'always'
-						| 'hourly'
-						| 'daily'
-						| 'weekly'
-						| 'monthly'
-						| 'yearly'
-						| undefined;
+						'never' | 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | undefined;
 					lastmod?: string | Date | undefined;
 					alternateRefs?:
 						| {
@@ -297,8 +289,7 @@ export declare function parseStartConfig(
 				retryCount?: number | undefined;
 				retryDelay?: number | undefined;
 				onSuccess?:
-					| ((result: { page: z.infer<typeof pageBaseSchema>; html: string }) => unknown)
-					| undefined;
+					((result: { page: z.infer<typeof pageBaseSchema>; html: string }) => unknown) | undefined;
 				headers?: Record<string, string> | undefined;
 		  })
 		| undefined;
@@ -333,8 +324,7 @@ export declare function parseStartConfig(
 					| undefined;
 				mockAccess?: 'error' | 'warn' | 'off' | undefined;
 				onViolation?:
-					| ((violation: unknown) => boolean | void | Promise<boolean | void>)
-					| undefined;
+					((violation: unknown) => boolean | void | Promise<boolean | void>) | undefined;
 				include?: (string | RegExp)[] | undefined;
 				exclude?: (string | RegExp)[] | undefined;
 				client?:

package/src/internal/start-plugin-core/start-compiler/compiler.d.ts

@@ -12,12 +12,7 @@ type Binding = ModuleInfoBinding & {
 };
 type Kind = 'None' | `Root` | `Builder` | LookupKind;
 export type BuiltInLookupKind =
-	| 'ServerFn'
-	| 'Middleware'
-	| 'IsomorphicFn'
-	| 'ServerOnlyFn'
-	| 'ClientOnlyFn'
-	| 'ClientOnlyJSX';
+	'ServerFn' | 'Middleware' | 'IsomorphicFn' | 'ServerOnlyFn' | 'ClientOnlyFn' | 'ClientOnlyJSX';
 export type ExternalLookupKind = `External:${string}`;
 export type LookupKind = BuiltInLookupKind | ExternalLookupKind;
 export declare function getExternalLookupKind(

package/src/internal/start-plugin-core/start-compiler/compiler.js

@@ -850,7 +850,7 @@ var StartCompiler = class {
 		const binding = (await this.getModuleInfo(id)).bindings.get(ident);
 		if (!binding) return 'None';
 		if (binding.resolvedKind) return binding.resolvedKind;
-		const vKey = `${cleanId(id)}:${ident}`;
+		const vKey = `${id}:${ident}`;
 		if (visited.has(vKey)) return 'None';
 		visited.add(vKey);
 		const resolvedKind = await this.resolveBindingKind(binding, id, visited);
@@ -904,7 +904,7 @@ var StartCompiler = class {
 		if (isBuildMode) this.getExportResolutionCache(moduleInfo.id).set(exportName, null);
 	}
 	async resolveBindingTarget(resolution, visited = /* @__PURE__ */ new Set()) {
-		const key = `${cleanId(resolution.moduleInfo.id)}:${resolution.localName}`;
+		const key = `${resolution.moduleInfo.id}:${resolution.localName}`;
 		if (visited.has(key)) return;
 		visited.add(key);
 		if (resolution.binding.type !== 'import') return resolution;
@@ -936,7 +936,7 @@ var StartCompiler = class {
 				const target = found ? ((await this.resolveBindingTarget(found)) ?? found) : void 0;
 				if (
 					target &&
-					cleanId(resolved.moduleInfo.id) === cleanId(target.moduleInfo.id) &&
+					resolved.moduleInfo.id === target.moduleInfo.id &&
 					resolved.localName === target.localName
 				)
 					return kind;
@@ -965,7 +965,7 @@ var StartCompiler = class {
 			return knownKind;
 		}
 		if (found.binding.resolvedKind) return found.binding.resolvedKind;
-		const vKey = `${cleanId(found.moduleInfo.id)}:${found.localName}`;
+		const vKey = `${found.moduleInfo.id}:${found.localName}`;
 		if (visited.has(vKey)) return 'None';
 		visited.add(vKey);
 		const resolvedKind = await this.resolveBindingKind(found.binding, found.moduleInfo.id, visited);

package/src/internal/start-plugin-core/start-compiler/utils.d.ts

@@ -14,6 +14,13 @@ export declare function codeFrameError(
 	},
 	message: string,
 ): Error;
+/**
+ * Converts a bundler module ID to its physical-file identity for diagnostics,
+ * filesystem matching, and file-based invalidation.
+ *
+ * Do not use this for IDs passed to resolve/load hooks or as module cache keys:
+ * virtual prefixes and queries can be part of the module's semantic identity.
+ */
 export declare function cleanId(id: string): string;
 /**
  * Strips a method call by replacing it with its callee object.

package/src/internal/start-plugin-core/start-compiler/utils.js

@@ -15,6 +15,13 @@ function codeFrameError(code, loc, message) {
 	);
 	return new Error(frame);
 }
+/**
+ * Converts a bundler module ID to its physical-file identity for diagnostics,
+ * filesystem matching, and file-based invalidation.
+ *
+ * Do not use this for IDs passed to resolve/load hooks or as module cache keys:
+ * virtual prefixes and queries can be part of the module's semantic identity.
+ */
 function cleanId(id) {
 	if (id.startsWith('\0')) id = id.slice(1);
 	const queryIndex = id.indexOf('?');

package/src/internal/start-plugin-core/types.d.ts

@@ -22,8 +22,7 @@ export type SerializationAdapterByRuntime = Partial<
 	Record<SerializationRuntime, SerializationAdapterModuleRef>
 >;
 export type SerializationAdapterConfig =
-	| SerializationAdapterModuleRef
-	| SerializationAdapterByRuntime;
+	SerializationAdapterModuleRef | SerializationAdapterByRuntime;
 export type StartCompilerEnvironment = 'client' | 'server';
 export interface StartCompilerImportTransformImport {
 	libName: string;

package/src/internal/start-plugin-core/vite/import-protection-plugin/plugin.js

@@ -1,9 +1,8 @@
-import { VITE_ENVIRONMENT_NAMES } from '../../constants.js';
+import { SERVER_FN_LOOKUP, TRANSFORM_ID_REGEX, VITE_ENVIRONMENT_NAMES } from '../../constants.js';
 import { escapeRegExp, resolveViteId } from '../../utils.js';
 import {
 	IMPORT_PROTECTION_DEBUG,
 	MOCK_BUILD_PREFIX,
-	SERVER_FN_LOOKUP_QUERY,
 	VITE_BROWSER_VIRTUAL_PREFIX,
 } from '../../import-protection/constants.js';
 import {
@@ -64,6 +63,7 @@ import {
 	resolveInternalVirtualModuleId,
 	resolvedMarkerVirtualModuleId,
 } from './virtualModules.js';
+import { hasIdQueryFlag } from '../module-id.js';
 import { dirname, relative } from 'pathe';
 import { writeFileSync } from 'node:fs';
 import { normalizePath } from 'vite';
@@ -415,12 +415,10 @@ function importProtectionPlugin(opts) {
 	) {
 		const normalizedResolvedId = normalizeFilePath(resolvedId);
 		const markerKind = shared.fileMarkerKind.get(normalizedResolvedId);
-		if (
-			!(
-				(envType === 'client' && markerKind === 'server') ||
-				(envType === 'server' && markerKind === 'client')
-			)
-		)
+		if (!(
+			(envType === 'client' && markerKind === 'server') ||
+			(envType === 'server' && markerKind === 'client')
+		))
 			return void 0;
 		return buildViolationInfo(
 			envName,
@@ -696,7 +694,7 @@ function importProtectionPlugin(opts) {
 		let merged = null;
 		if (keySet)
 			for (const k of keySet) {
-				if (k.includes(SERVER_FN_LOOKUP_QUERY)) continue;
+				if (hasIdQueryFlag(k, SERVER_FN_LOOKUP)) continue;
 				const imports = env.postTransformImports.get(k);
 				if (imports)
 					if (!merged) merged = new Set(imports);
@@ -723,7 +721,7 @@ function importProtectionPlugin(opts) {
 		let anyVariantCached = false;
 		if (keySet)
 			for (const k of keySet) {
-				if (k.includes(SERVER_FN_LOOKUP_QUERY)) continue;
+				if (hasIdQueryFlag(k, SERVER_FN_LOOKUP)) continue;
 				const imports = env.postTransformImports.get(k);
 				if (imports) {
 					anyVariantCached = true;
@@ -1081,21 +1079,19 @@ function importProtectionPlugin(opts) {
 					if (internalVirtualId) return internalVirtualId;
 					if (!importer) {
 						const normalizedSource = normalizeFilePath(source);
-						if (
-							!(
-								config.command === 'serve' &&
-								config.bundledDev &&
-								envType === 'client' &&
-								isInsideDirectory(normalizedSource, config.srcDirectory)
-							)
-						)
+						if (!(
+							config.command === 'serve' &&
+							config.bundledDev &&
+							envType === 'client' &&
+							isInsideDirectory(normalizedSource, config.srcDirectory)
+						))
 							env.graph.addEntry(source);
 						await processPendingViolations(env, this.warn.bind(this));
 						return;
 					}
 					if (source.startsWith('\0') || source.startsWith('virtual:')) return;
 					const normalizedImporter = normalizeFilePath(importer);
-					const isDirectLookup = importer.includes(SERVER_FN_LOOKUP_QUERY);
+					const isDirectLookup = hasIdQueryFlag(importer, SERVER_FN_LOOKUP);
 					if (config.command === 'serve' && config.bundledDev && envType === 'client') {
 						if (
 							isInsideDirectory(normalizedImporter, normalizePath(`${config.srcDirectory}/routes`))
@@ -1389,7 +1385,11 @@ function importProtectionPlugin(opts) {
 				return environmentNames.has(env.name);
 			},
 			transform: {
-				filter: { id: { include: [/\.[cm]?[tj]sx?($|\?)/] } },
+				// TRANSFORM_ID_REGEX includes .tsrx — the hand-rolled react-only
+				// regex here silently skipped octane importers, so denied *.client.*
+				// imports were never edge-rewritten/deferred and hard-errored at
+				// resolve instead of tree-shake-verified like react's do.
+				filter: { id: { include: [...TRANSFORM_ID_REGEX] } },
 				async handler(code, id) {
 					perf?.count('transform.calls');
 					const envName = this.environment.name;
@@ -1432,7 +1432,7 @@ function importProtectionPlugin(opts) {
 					}
 					const cacheKey = normalizePath(id);
 					const envState = getEnv(envName);
-					const isServerFnLookup = id.includes(SERVER_FN_LOOKUP_QUERY);
+					const isServerFnLookup = hasIdQueryFlag(id, SERVER_FN_LOOKUP);
 					if (isServerFnLookup) envState.serverFnLookupModules.add(file);
 					const result = {
 						code,