@octanejs/tanstack-start 0.1.0

package/src/internal/router-plugin/core/router-hmr-plugin.js

@@ -0,0 +1,101 @@
+import { getConfig } from './config.js';
+import { createRouteHmrStatement } from './hmr/select-adapter.js';
+import { debug, normalizePath, routeFactoryCallCodeFilter } from './utils.js';
+import { compileCodeSplitReferenceRoute } from './code-splitter/compilers.js';
+import { getReferenceRouteCompilerPlugins } from './code-splitter/plugins/framework-plugins.js';
+import { validateFrameworkPluginOrder } from './framework-plugin-order.js';
+import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils';
+//#region src/core/router-hmr-plugin.ts
+/**
+ * This plugin adds HMR support for file routes.
+ * It is only added to the composed plugin in dev when autoCodeSplitting is disabled, since the code splitting plugin
+ * handles HMR for code-split routes itself.
+ */
+function createRouterHmrPlugin(options = {}, routerPluginContext) {
+	let ROOT = process.cwd();
+	const resolveUserConfig = () => {
+		return getConfig(typeof options === 'function' ? options() : options, ROOT);
+	};
+	let userConfig = resolveUserConfig();
+	return {
+		name: 'tanstack-router:hmr',
+		enforce: 'pre',
+		transform: {
+			filter: {
+				id: [/\.(m|c)?(j|t)sx?$/, /\.tsrx(?:$|\?)/],
+				code: { include: routeFactoryCallCodeFilter },
+			},
+			handler(code, id) {
+				const normalizedId = normalizePath(id);
+				const routeEntry = routerPluginContext.routesByFile.get(normalizedId);
+				if (!routeEntry) return null;
+				if (debug) console.info('Adding HMR handling to route ', normalizedId);
+				const hmrStyle = userConfig.plugin?.hmr?.style ?? 'vite';
+				if (userConfig.target === 'react') {
+					const compilerPlugins = getReferenceRouteCompilerPlugins({
+						targetFramework: 'react',
+						addHmr: true,
+						hmrStyle,
+					});
+					const compiled = compileCodeSplitReferenceRoute({
+						code,
+						filename: normalizedId,
+						id: normalizedId,
+						addHmr: true,
+						hmrStyle,
+						hmrRouteId: routeEntry.routeId,
+						codeSplitGroupings: [],
+						targetFramework: 'react',
+						compilerPlugins,
+					});
+					if (compiled) {
+						if (debug) {
+							logDiff(code, compiled.code);
+							console.log('Output:\n', compiled.code + '\n\n');
+						}
+						return compiled;
+					}
+				}
+				const ast = parseAst({
+					code,
+					filename: normalizedId,
+				});
+				ast.program.body.push(
+					...createRouteHmrStatement([], {
+						hmrStyle,
+						targetFramework: userConfig.target,
+						routeId: routeEntry.routeId,
+					}),
+				);
+				const result = generateFromAst(ast, {
+					sourceMaps: true,
+					filename: normalizedId,
+					sourceFileName: normalizedId,
+				});
+				if (debug) {
+					logDiff(code, result.code);
+					console.log('Output:\n', result.code + '\n\n');
+				}
+				return result;
+			},
+		},
+		vite: {
+			configResolved(config) {
+				ROOT = config.root;
+				userConfig = resolveUserConfig();
+				validateFrameworkPluginOrder({
+					framework: userConfig.target,
+					plugins: config.plugins,
+					routerPluginName: 'tanstack-router:hmr',
+				});
+			},
+			applyToEnvironment(environment) {
+				if (userConfig.plugin?.vite?.environmentName)
+					return userConfig.plugin.vite.environmentName === environment.name;
+				return true;
+			},
+		},
+	};
+}
+//#endregion
+export { createRouterHmrPlugin };

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

@@ -0,0 +1,5 @@
+import { GetRoutesByFileMapResult } from '#tanstack-start/router-generator';
+export type RouterPluginContext = {
+	routesByFile: GetRoutesByFileMapResult;
+};
+export declare function createRouterPluginContext(): RouterPluginContext;

package/src/internal/router-plugin/core/router-plugin-context.js

@@ -0,0 +1,6 @@
+//#region src/core/router-plugin-context.ts
+function createRouterPluginContext() {
+	return { routesByFile: /* @__PURE__ */ new Map() };
+}
+//#endregion
+export { createRouterPluginContext };

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

@@ -0,0 +1,17 @@
+import { default as babel } from '@babel/core';
+import * as t from '@babel/types';
+export declare const debug: boolean | '' | undefined;
+/**
+ * Normalizes a file path by converting Windows backslashes to forward slashes.
+ * This ensures consistent path handling across different bundlers and operating systems.
+ *
+ * The route generator stores paths with forward slashes, but rspack/webpack on Windows
+ * pass native paths with backslashes to transform handlers.
+ */
+export declare function normalizePath(path: string): string;
+export declare const routeFactoryCallCodeFilter: RegExp[];
+export declare function getObjectPropertyKeyName(prop: t.ObjectProperty): string | undefined;
+export declare function getUniqueProgramIdentifier(
+	programPath: babel.NodePath<t.Program>,
+	baseName: string,
+): t.Identifier;

package/src/internal/router-plugin/core/utils.js

@@ -0,0 +1,47 @@
+import * as t from '@babel/types';
+//#region src/core/utils.ts
+var debug =
+	process.env.TSR_VITE_DEBUG && ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG);
+/**
+ * Normalizes a file path by converting Windows backslashes to forward slashes.
+ * This ensures consistent path handling across different bundlers and operating systems.
+ *
+ * The route generator stores paths with forward slashes, but rspack/webpack on Windows
+ * pass native paths with backslashes to transform handlers.
+ */
+function normalizePath(path) {
+	return path.replace(/\\/g, '/');
+}
+var routeFactoryCallCodeFilter = [
+	/\bcreateFileRoute\s*\(/,
+	/\bcreateRootRoute\s*\(/,
+	/\bcreateRootRouteWithContext\s*(?:<|\()/,
+];
+function getObjectPropertyKeyName(prop) {
+	if (prop.computed) return;
+	if (t.isIdentifier(prop.key)) return prop.key.name;
+	if (t.isStringLiteral(prop.key)) return prop.key.value;
+}
+function getUniqueProgramIdentifier(programPath, baseName) {
+	let name = baseName;
+	let suffix = 2;
+	const programScope = programPath.scope.getProgramParent();
+	while (
+		programScope.hasBinding(name) ||
+		programScope.hasGlobal(name) ||
+		programScope.hasReference(name)
+	) {
+		name = `${baseName}${suffix}`;
+		suffix++;
+	}
+	programScope.references[name] = true;
+	return t.identifier(name);
+}
+//#endregion
+export {
+	debug,
+	getObjectPropertyKeyName,
+	getUniqueProgramIdentifier,
+	normalizePath,
+	routeFactoryCallCodeFilter,
+};

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

@@ -0,0 +1,197 @@
+import { configSchema, CodeSplittingOptions, Config } from './core/config.js';
+import { RouterPluginContext } from './core/router-plugin-context.js';
+type RouterPluginOptions = Partial<Config | (() => Config)> | undefined;
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [TanStackRouterGeneratorEsbuild()],
+ *   // ...
+ * }
+ * ```
+ */
+declare const TanStackRouterGeneratorEsbuild: (
+	options?: RouterPluginOptions,
+	routerPluginContext?: RouterPluginContext,
+) => import('unplugin').EsbuildPlugin;
+/**
+ * @example
+ * ```ts
+ * export default {
+ *  plugins: [TanStackRouterCodeSplitterEsbuild()],
+ *  // ...
+ * }
+ * ```
+ */
+declare const TanStackRouterCodeSplitterEsbuild: (
+	options?: RouterPluginOptions,
+	routerPluginContext?: RouterPluginContext,
+) => import('unplugin').EsbuildPlugin;
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [tanstackRouter()],
+ *   // ...
+ * }
+ * ```
+ */
+declare const TanStackRouterEsbuild: (
+	options?:
+		| Partial<
+				| {
+						target: 'vue' | 'react' | 'solid' | 'octane';
+						routeFileIgnorePrefix: string;
+						routesDirectory: string;
+						quoteStyle: 'single' | 'double';
+						semicolons: boolean;
+						disableLogging: boolean;
+						routeTreeFileHeader: string[];
+						indexToken:
+							| string
+							| RegExp
+							| {
+									regex: string;
+									flags?: string | undefined;
+							  };
+						routeToken:
+							| string
+							| RegExp
+							| {
+									regex: string;
+									flags?: string | undefined;
+							  };
+						generatedRouteTree: string;
+						disableTypes: boolean;
+						addExtensions: string | boolean;
+						enableRouteTreeFormatting: boolean;
+						tmpDir: string;
+						importRoutesUsingAbsolutePaths: boolean;
+						virtualRouteConfig?:
+							| string
+							| import('@tanstack/virtual-file-routes').VirtualRootRoute
+							| undefined;
+						routeFilePrefix?: string | undefined;
+						routeFileIgnorePattern?: string | undefined;
+						pathParamsAllowedCharacters?:
+							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
+							| undefined;
+						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
+						autoCodeSplitting?: boolean | undefined;
+						customScaffolding?:
+							| {
+									routeTemplate?: string | undefined;
+									lazyRouteTemplate?: string | undefined;
+							  }
+							| undefined;
+						experimental?:
+							| {
+									enableCodeSplitting?: boolean | undefined;
+							  }
+							| undefined;
+						plugins?: import('#tanstack-start/router-generator').GeneratorPlugin[] | undefined;
+						enableRouteGeneration?: boolean | undefined;
+						codeSplittingOptions?: CodeSplittingOptions | undefined;
+						plugin?:
+							| {
+									hmr?:
+										| {
+												style?: 'vite' | 'webpack' | undefined;
+										  }
+										| undefined;
+									vite?:
+										| {
+												environmentName?: string | undefined;
+										  }
+										| undefined;
+							  }
+							| undefined;
+				  }
+				| (() => Config)
+		  >
+		| undefined,
+) => import('unplugin').EsbuildPlugin;
+declare const tanstackRouter: (
+	options?:
+		| Partial<
+				| {
+						target: 'vue' | 'react' | 'solid' | 'octane';
+						routeFileIgnorePrefix: string;
+						routesDirectory: string;
+						quoteStyle: 'single' | 'double';
+						semicolons: boolean;
+						disableLogging: boolean;
+						routeTreeFileHeader: string[];
+						indexToken:
+							| string
+							| RegExp
+							| {
+									regex: string;
+									flags?: string | undefined;
+							  };
+						routeToken:
+							| string
+							| RegExp
+							| {
+									regex: string;
+									flags?: string | undefined;
+							  };
+						generatedRouteTree: string;
+						disableTypes: boolean;
+						addExtensions: string | boolean;
+						enableRouteTreeFormatting: boolean;
+						tmpDir: string;
+						importRoutesUsingAbsolutePaths: boolean;
+						virtualRouteConfig?:
+							| string
+							| import('@tanstack/virtual-file-routes').VirtualRootRoute
+							| undefined;
+						routeFilePrefix?: string | undefined;
+						routeFileIgnorePattern?: string | undefined;
+						pathParamsAllowedCharacters?:
+							| (':' | '$' | ';' | '@' | '&' | '=' | '+' | ',')[]
+							| undefined;
+						routeTreeFileFooter?: string[] | (() => Array<string>) | undefined;
+						autoCodeSplitting?: boolean | undefined;
+						customScaffolding?:
+							| {
+									routeTemplate?: string | undefined;
+									lazyRouteTemplate?: string | undefined;
+							  }
+							| undefined;
+						experimental?:
+							| {
+									enableCodeSplitting?: boolean | undefined;
+							  }
+							| undefined;
+						plugins?: import('#tanstack-start/router-generator').GeneratorPlugin[] | undefined;
+						enableRouteGeneration?: boolean | undefined;
+						codeSplittingOptions?: CodeSplittingOptions | undefined;
+						plugin?:
+							| {
+									hmr?:
+										| {
+												style?: 'vite' | 'webpack' | undefined;
+										  }
+										| undefined;
+									vite?:
+										| {
+												environmentName?: string | undefined;
+										  }
+										| undefined;
+							  }
+							| undefined;
+				  }
+				| (() => Config)
+		  >
+		| undefined,
+) => import('unplugin').EsbuildPlugin;
+export default TanStackRouterEsbuild;
+export {
+	configSchema,
+	TanStackRouterGeneratorEsbuild,
+	TanStackRouterCodeSplitterEsbuild,
+	TanStackRouterEsbuild,
+	tanstackRouter,
+};
+export type { Config, CodeSplittingOptions, RouterPluginContext };

package/src/internal/router-plugin/esbuild.js

@@ -0,0 +1,58 @@
+import { configSchema } from './core/config.js';
+import { createRouterPluginContext } from './core/router-plugin-context.js';
+import { createRouterCodeSplitterPlugin } from './core/router-code-splitter-plugin.js';
+import { createRouterGeneratorPlugin } from './core/router-generator-plugin.js';
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin.js';
+import { createEsbuildPlugin } from 'unplugin';
+//#region src/esbuild.ts
+var defaultRouterPluginContext = createRouterPluginContext();
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [TanStackRouterGeneratorEsbuild()],
+ *   // ...
+ * }
+ * ```
+ */
+var TanStackRouterGeneratorEsbuild = (options, routerPluginContext) => {
+	const pluginContext = routerPluginContext ?? defaultRouterPluginContext;
+	return createEsbuildPlugin((pluginOptions) =>
+		createRouterGeneratorPlugin(pluginOptions, pluginContext),
+	)(options);
+};
+/**
+ * @example
+ * ```ts
+ * export default {
+ *  plugins: [TanStackRouterCodeSplitterEsbuild()],
+ *  // ...
+ * }
+ * ```
+ */
+var TanStackRouterCodeSplitterEsbuild = (options, routerPluginContext) => {
+	const pluginContext = routerPluginContext ?? defaultRouterPluginContext;
+	return createEsbuildPlugin((pluginOptions) =>
+		createRouterCodeSplitterPlugin(pluginOptions, pluginContext),
+	)(options);
+};
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [tanstackRouter()],
+ *   // ...
+ * }
+ * ```
+ */
+var TanStackRouterEsbuild = createEsbuildPlugin(unpluginRouterComposedFactory);
+var tanstackRouter = TanStackRouterEsbuild;
+//#endregion
+export {
+	TanStackRouterCodeSplitterEsbuild,
+	TanStackRouterEsbuild,
+	TanStackRouterEsbuild as default,
+	TanStackRouterGeneratorEsbuild,
+	configSchema,
+	tanstackRouter,
+};

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

@@ -0,0 +1,19 @@
+export { configSchema, getConfig } from './core/config.js';
+export { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin.js';
+export { unpluginRouterGeneratorFactory } from './core/router-generator-plugin.js';
+export { createRouterPluginContext } from './core/router-plugin-context.js';
+export type {
+	Config,
+	ConfigInput,
+	ConfigOutput,
+	CodeSplittingOptions,
+	DeletableNodes,
+	HmrOptions,
+} from './core/config.js';
+export type { RouterPluginContext } from './core/router-plugin-context.js';
+export { getObjectPropertyKeyName } from './core/utils.js';
+export type {
+	ReferenceRouteCompilerPlugin,
+	ReferenceRouteCompilerPluginContext,
+} from './core/code-splitter/plugins.js';
+export { tsrSplit, splitRouteIdentNodes, defaultCodeSplitGroupings } from './core/constants.js';

package/src/internal/router-plugin/index.js

@@ -0,0 +1,17 @@
+import { configSchema, getConfig } from './core/config.js';
+import { defaultCodeSplitGroupings, splitRouteIdentNodes, tsrSplit } from './core/constants.js';
+import { getObjectPropertyKeyName } from './core/utils.js';
+import { createRouterPluginContext } from './core/router-plugin-context.js';
+import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin.js';
+import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin.js';
+export {
+	configSchema,
+	createRouterPluginContext,
+	defaultCodeSplitGroupings,
+	getConfig,
+	getObjectPropertyKeyName,
+	splitRouteIdentNodes,
+	tsrSplit,
+	unpluginRouterCodeSplitterFactory,
+	unpluginRouterGeneratorFactory,
+};

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

@@ -0,0 +1,61 @@
+import { configSchema, CodeSplittingOptions, Config } from './core/config.js';
+import { RouterPluginContext } from './core/router-plugin-context.js';
+type RspackRouterPluginOptions = Partial<Config> | (() => Partial<Config>);
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterGeneratorRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const TanStackRouterGeneratorRspack: (
+	options?: RspackRouterPluginOptions,
+	routerPluginContext?: RouterPluginContext,
+) => import('unplugin').RspackPluginInstance;
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterCodeSplitterRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const TanStackRouterCodeSplitterRspack: (
+	options?: RspackRouterPluginOptions,
+	routerPluginContext?: RouterPluginContext,
+) => import('unplugin').RspackPluginInstance;
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [tanstackRouter()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const TanStackRouterRspack: (options?: unknown) => import('unplugin').RspackPluginInstance;
+declare const tanstackRouter: (options?: unknown) => import('unplugin').RspackPluginInstance;
+export default TanStackRouterRspack;
+export {
+	configSchema,
+	TanStackRouterRspack,
+	TanStackRouterGeneratorRspack,
+	TanStackRouterCodeSplitterRspack,
+	tanstackRouter,
+};
+export type { Config, CodeSplittingOptions, RouterPluginContext };

package/src/internal/router-plugin/rspack.js

@@ -0,0 +1,92 @@
+import { configSchema } from './core/config.js';
+import { createRouterPluginContext } from './core/router-plugin-context.js';
+import { createRouterCodeSplitterPlugin } from './core/router-code-splitter-plugin.js';
+import { createRouterGeneratorPlugin } from './core/router-generator-plugin.js';
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin.js';
+import { createRspackPlugin } from 'unplugin';
+//#region src/rspack.ts
+var defaultRouterPluginContext = createRouterPluginContext();
+/**
+ * Rspack uses webpack-compatible `module.hot` / `import.meta.webpackHot` HMR.
+ * Force `plugin.hmr.style = 'webpack'` so the router HMR adapter emits
+ * `module.hot`-style accept/dispose code instead of Vite's callback-receive
+ * variant, regardless of what the user passes (or doesn't pass).
+ */
+function withWebpackHmrStyle(options) {
+	const mergeHmrStyle = (config) => ({
+		...config,
+		plugin: {
+			...config?.plugin,
+			hmr: {
+				...config?.plugin?.hmr,
+				style: 'webpack',
+			},
+		},
+	});
+	if (typeof options === 'function') return () => mergeHmrStyle(options());
+	return mergeHmrStyle(options);
+}
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterGeneratorRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+var TanStackRouterGeneratorRspack = (options, routerPluginContext) => {
+	const pluginContext = routerPluginContext ?? defaultRouterPluginContext;
+	return createRspackPlugin((pluginOptions) =>
+		createRouterGeneratorPlugin(pluginOptions, pluginContext),
+	)(options);
+};
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterCodeSplitterRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+var TanStackRouterCodeSplitterRspack = (options, routerPluginContext) => {
+	const pluginContext = routerPluginContext ?? defaultRouterPluginContext;
+	return createRspackPlugin((pluginOptions) =>
+		createRouterCodeSplitterPlugin(withWebpackHmrStyle(pluginOptions), pluginContext),
+	)(options);
+};
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [tanstackRouter()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+var TanStackRouterRspack = /* @__PURE__ */ createRspackPlugin((options, meta) =>
+	unpluginRouterComposedFactory(withWebpackHmrStyle(options), meta),
+);
+var tanstackRouter = TanStackRouterRspack;
+//#endregion
+export {
+	TanStackRouterCodeSplitterRspack,
+	TanStackRouterGeneratorRspack,
+	TanStackRouterRspack,
+	TanStackRouterRspack as default,
+	configSchema,
+	tanstackRouter,
+};