From 240a642294d15877d032b513fbdc3171ebf5ce12 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Wed, 4 Sep 2024 13:49:15 -0600 Subject: [PATCH 01/14] checkpoint --- .../start-basic/app/components/Example.tsx | 3 +++ .../react/start-basic/app/routes/__root.tsx | 4 ++-- .../react/start-basic/app/routes/index.tsx | 4 +++- packages/start/src/config/index.ts | 18 ++++++++++++++++-- 4 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 examples/react/start-basic/app/components/Example.tsx diff --git a/examples/react/start-basic/app/components/Example.tsx b/examples/react/start-basic/app/components/Example.tsx new file mode 100644 index 0000000000..66623454a7 --- /dev/null +++ b/examples/react/start-basic/app/components/Example.tsx @@ -0,0 +1,3 @@ +export function Example() { + return

Changing th

+} diff --git a/examples/react/start-basic/app/routes/__root.tsx b/examples/react/start-basic/app/routes/__root.tsx index 4ef88cfb27..a4464d8b7f 100644 --- a/examples/react/start-basic/app/routes/__root.tsx +++ b/examples/react/start-basic/app/routes/__root.tsx @@ -61,7 +61,7 @@ export const Route = createRootRoute({ component: RootComponent, }) -function RootComponent() { +export function RootComponent() { return ( @@ -84,7 +84,7 @@ function RootDocument({ children }: { children: React.ReactNode }) { }} activeOptions={{ exact: true }} > - Home + Homeasdfasd {' '} -

Welcome Home!!!

+

Welcome Homs

+ ) } diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts index 8c42a3f708..2dc596e8c3 100644 --- a/packages/start/src/config/index.ts +++ b/packages/start/src/config/index.ts @@ -255,7 +255,9 @@ export function defineConfig( dir: './public', base: '/', }, - withStartPlugins(tsrConfig)({ + withStartPlugins(tsrConfig, { + enableRouteGeneration: true, + })({ name: 'client', type: 'client', target: 'browser', @@ -293,6 +295,7 @@ export function defineConfig( experimental: { ...tsrConfig.experimental, }, + enableRouteGeneration: false, }), ])({ name: 'api', @@ -334,6 +337,11 @@ export function defineConfig( serverTransform({ runtime: '@tanstack/start/server-runtime', }), + // reactRefresh({ + // babel: opts.react?.babel, + // exclude: opts.react?.exclude, + // include: opts.react?.include, + // }), config('start-ssr', { ssr: { external: ['@vinxi/react-server-dom/client'], @@ -406,7 +414,12 @@ function withPlugins(plugins: Array) { } } -function withStartPlugins(tsrConfig: z.infer) { +function withStartPlugins( + tsrConfig: z.infer, + opts?: { + enableRouteGeneration?: boolean + }, +) { return withPlugins([ config('start-vite', { ssr: { @@ -422,6 +435,7 @@ function withStartPlugins(tsrConfig: z.infer) { experimental: { ...tsrConfig.experimental, }, + enableRouteGeneration: opts?.enableRouteGeneration ?? false, }), TanStackStartVite(), ]) From 2ff677168c1b23f0918ba35ad7cffb598cd0e818 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 10 Sep 2024 13:57:56 -0600 Subject: [PATCH 02/14] fix: simplify and fix HMR for router generator --- .../src/core/code-splitter/compilers.ts | 38 +-- packages/router-plugin/src/core/constants.ts | 2 +- .../src/core/router-code-splitter-plugin.ts | 56 +--- .../router-plugin/tests/code-splitter.test.ts | 4 +- packages/start/src/config/index.ts | 295 ++++++++++-------- 5 files changed, 200 insertions(+), 195 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index b7feabd10c..e4c8dede1b 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -4,7 +4,7 @@ import _generate from '@babel/generator' import * as template from '@babel/template' import { deadCodeElimination } from 'babel-dead-code-elimination' -import { splitPrefix } from '../constants' +import { splitToken } from '../constants' import { parseAst } from './ast' import type { ParseAstOptions } from './ast' @@ -49,7 +49,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { enter(programPath, programState) { const state = programState as unknown as State - const splitUrl = `${splitPrefix}:${opts.filename}?${splitPrefix}` + const splitUrl = `${opts.filename}?${splitToken}` /** * If the component for the route is being imported from @@ -142,7 +142,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { programPath.pushContainer('body', [ template.statement( - `function DummyComponent() { return null }`, + `export function TSR_DummyComponent() { return null }`, )(), ]) @@ -319,23 +319,23 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { splitNode = binding?.path.node } + let componentId = 'SplitComponent' + // Add the node to the program if (splitNode) { if (t.isFunctionDeclaration(splitNode)) { + componentId = splitNode.id?.name || componentId programPath.pushContainer( 'body', - t.variableDeclaration('const', [ - t.variableDeclarator( - t.identifier(splitType), - t.functionExpression( - splitNode.id || null, // Anonymize the function expression - splitNode.params, - splitNode.body, - splitNode.generator, - splitNode.async, - ), - ), - ]), + // Push the function declaration to the program + // but change the name to the componentId + t.functionDeclaration( + t.identifier(componentId), + splitNode.params, + splitNode.body, + splitNode.generator, + splitNode.async, + ), ) } else if ( t.isFunctionExpression(splitNode) || @@ -345,7 +345,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { 'body', t.variableDeclaration('const', [ t.variableDeclarator( - t.identifier(splitType), + t.identifier(componentId), splitNode as any, ), ]), @@ -358,7 +358,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { 'body', t.variableDeclaration('const', [ t.variableDeclarator( - t.identifier(splitType), + t.identifier(componentId), splitNode.local, ), ]), @@ -410,7 +410,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { programPath.pushContainer('body', [ t.exportNamedDeclaration(null, [ t.exportSpecifier( - t.identifier(splitType), + t.identifier(componentId), t.identifier(splitType), ), ]), @@ -435,7 +435,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { ), ), t.stringLiteral( - opts.filename.split(`?${splitPrefix}`)[0] as string, + opts.filename.split(`?${splitToken}`)[0] as string, ), ), ) diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index d80c7c068e..ae716e938f 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -1,2 +1,2 @@ export const CONFIG_FILE_NAME = 'tsr.config.json' -export const splitPrefix = 'tsr-split' +export const splitToken = 'tsr-split' diff --git a/packages/router-plugin/src/core/router-code-splitter-plugin.ts b/packages/router-plugin/src/core/router-code-splitter-plugin.ts index 6498eab428..9698b8b90e 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -1,12 +1,14 @@ -import { isAbsolute, join } from 'node:path' +import { basename, dirname, isAbsolute, join, resolve } from 'node:path' import { fileURLToPath, pathToFileURL } from 'node:url' +import { existsSync, readFileSync } from 'node:fs' import { getConfig } from './config' import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' -import { splitPrefix } from './constants' +import { splitToken } from './constants' +import type { ModuleNode } from 'vite' import type { Config } from './config' import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' @@ -52,7 +54,8 @@ plugins: [ } const PLUGIN_NAME = 'unplugin:router-code-splitter' -const JoinedSplitPrefix = splitPrefix + ':' +// a regex for either ?splitToken or &splitToken +const splitTokenRegex = new RegExp(`[?&]${splitToken}`) export const unpluginRouterCodeSplitterFactory: UnpluginFactory< Partial | undefined @@ -105,18 +108,6 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< return { name: 'router-code-splitter-plugin', enforce: 'pre', - - resolveId(source) { - if (!userConfig.autoCodeSplitting) { - return null - } - - if (source.startsWith(splitPrefix + ':')) { - return source.replace(splitPrefix + ':', '') - } - return null - }, - transform(code, id) { if (!userConfig.autoCodeSplitting) { return null @@ -126,7 +117,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< url.searchParams.delete('v') id = fileURLToPath(url).replace(/\\/g, '/') - if (id.includes(splitPrefix)) { + if (id.includes(splitToken)) { return handleSplittingFile(code, id) } else if ( fileIsInRoutesDirectory(id, userConfig.routesDirectory) && @@ -153,15 +144,9 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< return undefined } - let id = transformId - - if (id.startsWith(JoinedSplitPrefix)) { - id = id.replace(JoinedSplitPrefix, '') - } - if ( - fileIsInRoutesDirectory(id, userConfig.routesDirectory) || - id.includes(splitPrefix) + fileIsInRoutesDirectory(transformId, userConfig.routesDirectory) || + transformId.includes(splitToken) ) { return true } @@ -174,26 +159,13 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< userConfig = getConfig(options, ROOT) }, + // handleHotUpdate({ file, server, modules }) { + // return [] + // }, }, rspack(compiler) { ROOT = process.cwd() - - compiler.hooks.beforeCompile.tap(PLUGIN_NAME, (self) => { - self.normalModuleFactory.hooks.beforeResolve.tap( - PLUGIN_NAME, - (resolveData: { request: string }) => { - if (resolveData.request.includes(JoinedSplitPrefix)) { - resolveData.request = resolveData.request.replace( - JoinedSplitPrefix, - '', - ) - } - }, - ) - }) - - userConfig = getConfig(options, ROOT) }, webpack(compiler) { @@ -203,9 +175,9 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< self.normalModuleFactory.hooks.beforeResolve.tap( PLUGIN_NAME, (resolveData: { request: string }) => { - if (resolveData.request.includes(JoinedSplitPrefix)) { + if (resolveData.request.match(splitTokenRegex)) { resolveData.request = resolveData.request.replace( - JoinedSplitPrefix, + splitTokenRegex, '', ) } diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 31633185a3..31b95e41bd 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -6,7 +6,7 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from '../src/core/code-splitter/compilers' -import { splitPrefix } from '../src/core/constants' +import { splitToken } from '../src/core/constants' async function getFilenames() { return await readdir(path.resolve(__dirname, './code-splitter/test-files')) @@ -46,7 +46,7 @@ describe('code-splitter works', async () => { const splitResult = compileCodeSplitVirtualRoute({ code: code, root: './code-splitter/test-files', - filename: `${filename}?${splitPrefix}`, + filename: `${filename}?${splitToken}`, }) await expect(splitResult.code).toMatchFileSnapshot( diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts index 2dc596e8c3..798e6b20e4 100644 --- a/packages/start/src/config/index.ts +++ b/packages/start/src/config/index.ts @@ -1,7 +1,7 @@ import path from 'node:path' -import { existsSync, readFileSync } from 'node:fs' -import { readFile } from 'node:fs/promises' +import * as fs from 'node:fs' import { fileURLToPath } from 'node:url' +import { dir } from 'node:console' import reactRefresh from '@vitejs/plugin-react' import { resolve } from 'import-meta-resolve' import { TanStackRouterVite } from '@tanstack/router-plugin/vite' @@ -25,12 +25,12 @@ import { serverFunctions } from '@vinxi/server-functions/plugin' // @ts-expect-error import { serverTransform } from '@vinxi/server-functions/server' import { z } from 'zod' +import type * as vite from 'vite' import type { AppOptions as VinxiAppOptions, RouterSchemaInput as VinxiRouterSchemaInput, } from 'vinxi' import type { Manifest } from '@tanstack/react-router' -import type * as vite from 'vite' /** * Not all the deployment presets are fully functional or tested. @@ -237,7 +237,7 @@ export function defineConfig( const ssrEntry = opts.routers?.ssr?.entry || './app/ssr.tsx' const apiEntry = opts.routers?.api?.entry || './app/api.ts' - const apiEntryExists = existsSync(apiEntry) + const apiEntryExists = fs.existsSync(apiEntry) return createApp({ server: { @@ -255,20 +255,35 @@ export function defineConfig( dir: './public', base: '/', }, - withStartPlugins(tsrConfig, { - enableRouteGeneration: true, - })({ - name: 'client', - type: 'client', - target: 'browser', - handler: clientEntry, - base: clientBase, - build: { - sourcemap: true, + withPlugins( + { + name: 'client', + type: 'client', + target: 'browser', + handler: clientEntry, + base: clientBase, + build: { + sourcemap: true, + }, }, - plugins: () => [ - ...(opts.vite?.plugins?.() || []), - ...(opts.routers?.client?.vite?.plugins?.() || []), + (prev) => [ + config('start-vite', { + ssr: { + noExternal: ['@tanstack/start', 'tsr:routes-manifest'], + }, + // optimizeDeps: { + // include: ['@tanstack/start/server-runtime'], + // }, + }), + TanStackRouterVite({ + ...tsrConfig, + autoCodeSplitting: true, + experimental: { + ...tsrConfig.experimental, + }, + enableRouteGeneration: true, + }), + TanStackStartVite(), serverFunctions.client({ runtime: '@tanstack/start/client-runtime', }), @@ -279,88 +294,141 @@ export function defineConfig( }), // TODO: RSCS - enable this // serverComponents.client(), + // This will log the final source of every file that is transformed by Vite + // (() => { + // let rootDir = process.cwd() + + // return { + // name: 'log-final-source', + // enforce: 'post', // Ensures this is one of the last plugins to apply transformations + // configResolved(config: any) { + // // store the root directory of the project + // rootDir = config.root + // }, + // resolveId(id: string) { + // console.log(id) + // }, + // transform(code: string, id: string) { + // // if we're in dev, write every file to a temp directory for debugging + // if (process.env.NODE_ENV === 'development') { + // const normalizedPath = vite.normalizePath(id) + + // if (normalizedPath.startsWith(rootDir)) { + // const relativePath = normalizedPath.replace(rootDir, '') + // const filePath = path.join(rootDir, '.temp', relativePath) + // const directoryPath = path.dirname(filePath) + // // Ensure the directory exists + // fs.mkdirSync(directoryPath, { + // recursive: true, + // }) + // fs.writeFileSync(filePath, code) + // } + // } + + // return null // Return null to indicate no transformation is applied + // }, + // } + // })(), + ...prev, + ...(opts.vite?.plugins?.() || []), + ...(opts.routers?.client?.vite?.plugins?.() || []), ], - }), + ), ...(apiEntryExists ? [ - withPlugins([ - config('start-vite', { - ssr: { - noExternal: ['@tanstack/start', 'tsr:routes-manifest'], - }, - }), - TanStackRouterVite({ - ...tsrConfig, - autoCodeSplitting: true, - experimental: { - ...tsrConfig.experimental, - }, - enableRouteGeneration: false, - }), - ])({ - name: 'api', - type: 'http', - target: 'server', - base: apiBase, - handler: apiEntry, - routes: tsrFileRouter({ tsrConfig, apiBase }), - plugins: () => [ + withPlugins( + { + name: 'api', + type: 'http', + target: 'server', + base: apiBase, + handler: apiEntry, + routes: tsrFileRouter({ tsrConfig, apiBase }), + }, + (prev) => [ + config('start-vite', { + ssr: { + noExternal: ['@tanstack/start', 'tsr:routes-manifest'], + }, + }), + TanStackRouterVite({ + ...tsrConfig, + autoCodeSplitting: true, + experimental: { + ...tsrConfig.experimental, + }, + enableRouteGeneration: false, + }), + ...prev, ...(opts.vite?.plugins?.() || []), ...(opts.routers?.ssr?.vite?.plugins?.() || []), - // serverTransform({ - // runtime: '@tanstack/start/server-runtime', - // }), - // config('start-api', { - // ssr: { - // external: ['@vinxi/react-server-dom/client'], - // }, - // }), ], - // link: { - // client: 'client', - // }, - }), + ), ] : []), - withStartPlugins(tsrConfig)({ - name: 'ssr', - type: 'http', - target: 'server', - handler: ssrEntry, - plugins: () => [ + withPlugins( + { + name: 'ssr', + type: 'http', + target: 'server', + handler: ssrEntry, + link: { + client: 'client', + }, + }, + (prev) => [ + config('start-ssr', { + ssr: { + noExternal: ['@tanstack/start', 'tsr:routes-manifest'], + external: ['@vinxi/react-server-dom/client'], + }, + }), + TanStackRouterVite({ + ...tsrConfig, + autoCodeSplitting: true, + experimental: { + ...tsrConfig.experimental, + }, + enableRouteGeneration: true, + }), + TanStackStartVite(), tsrRoutesManifest({ tsrConfig, clientBase, }), - ...(opts.vite?.plugins?.() || []), - ...(opts.routers?.ssr?.vite?.plugins?.() || []), serverTransform({ runtime: '@tanstack/start/server-runtime', }), - // reactRefresh({ - // babel: opts.react?.babel, - // exclude: opts.react?.exclude, - // include: opts.react?.include, - // }), - config('start-ssr', { + ...prev, + ...(opts.vite?.plugins?.() || []), + ...(opts.routers?.ssr?.vite?.plugins?.() || []), + ], + ), + withPlugins( + { + name: 'server', + type: 'http', + target: 'server', + base: serverBase, + // TODO: RSCS - enable this + // worker: true, + handler: importToProjectRelative('@tanstack/start/server-handler'), + }, + (prev) => [ + config('start-server', { ssr: { - external: ['@vinxi/react-server-dom/client'], + noExternal: ['@tanstack/start', 'tsr:routes-manifest'], }, }), - ], - link: { - client: 'client', - }, - }), - withStartPlugins(tsrConfig)({ - name: 'server', - type: 'http', - target: 'server', - base: serverBase, - // TODO: RSCS - enable this - // worker: true, - handler: importToProjectRelative('@tanstack/start/server-handler'), - plugins: () => [ + TanStackRouterVite({ + ...tsrConfig, + autoCodeSplitting: true, + experimental: { + ...tsrConfig.experimental, + }, + enableRouteGeneration: true, + }), + TanStackStartVite(), serverFunctions.server({ runtime: '@tanstack/start/react-server-runtime', // TODO: RSCS - remove this @@ -368,23 +436,11 @@ export function defineConfig( conditions: [], }, }), - // TODO: RSCs - add this - // serverComponents.serverActions({ - // resolve: { - // conditions: [ - // 'react-server', - // // 'node', - // 'import', - // process.env.NODE_ENV, - // ], - // }, - // runtime: '@vinxi/react-server-dom/runtime', - // transpileDeps: ['react', 'react-dom', '@vinxi/react-server-dom'], - // }), + ...prev, ...(opts.vite?.plugins?.() || []), - ...(opts.routers?.server?.vite?.plugins?.() || []), + ...(opts.routers?.ssr?.vite?.plugins?.() || []), ], - }), + ), ], }) } @@ -405,40 +461,15 @@ type TempRouter = Extract< } } -function withPlugins(plugins: Array) { - return (router: TempRouter) => { - return { - ...router, - plugins: async () => [...plugins, ...((await router.plugins?.()) ?? [])], - } - } -} - -function withStartPlugins( - tsrConfig: z.infer, - opts?: { - enableRouteGeneration?: boolean - }, +function withPlugins( + router: TempRouter, + plugins: (r: Array) => Array, ) { - return withPlugins([ - config('start-vite', { - ssr: { - noExternal: ['@tanstack/start', 'tsr:routes-manifest'], - }, - // optimizeDeps: { - // include: ['@tanstack/start/server-runtime'], - // }, - }), - TanStackRouterVite({ - ...tsrConfig, - autoCodeSplitting: true, - experimental: { - ...tsrConfig.experimental, - }, - enableRouteGeneration: opts?.enableRouteGeneration ?? false, - }), - TanStackStartVite(), - ]) + return { + ...router, + plugins: async (r: any) => + plugins((await router.plugins?.(r)) || router.plugins || []), + } } // function resolveRelativePath(p: string) { @@ -501,7 +532,9 @@ function tsrRoutesManifest(opts: { let manifest: ViteManifest try { - manifest = JSON.parse(await readFile(clientViteManifestPath, 'utf-8')) + manifest = JSON.parse( + fs.readFileSync(clientViteManifestPath, 'utf-8'), + ) } catch (err) { console.error(err) throw new Error( @@ -516,7 +549,7 @@ function tsrRoutesManifest(opts: { let routeTreeContent: string try { - routeTreeContent = readFileSync(routeTreePath, 'utf-8') + routeTreeContent = fs.readFileSync(routeTreePath, 'utf-8') } catch (err) { throw new Error( `Could not find the generated route tree at '${path.resolve( From 7e4de9f65021635d675684603dea6ecbf76b0351 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 10 Sep 2024 14:05:05 -0600 Subject: [PATCH 03/14] fix: revert example changes --- examples/react/start-basic/app/components/Example.tsx | 3 --- examples/react/start-basic/app/routes/__root.tsx | 4 ++-- examples/react/start-basic/app/routes/index.tsx | 4 +--- 3 files changed, 3 insertions(+), 8 deletions(-) delete mode 100644 examples/react/start-basic/app/components/Example.tsx diff --git a/examples/react/start-basic/app/components/Example.tsx b/examples/react/start-basic/app/components/Example.tsx deleted file mode 100644 index 66623454a7..0000000000 --- a/examples/react/start-basic/app/components/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function Example() { - return

Changing th

-} diff --git a/examples/react/start-basic/app/routes/__root.tsx b/examples/react/start-basic/app/routes/__root.tsx index a4464d8b7f..4ef88cfb27 100644 --- a/examples/react/start-basic/app/routes/__root.tsx +++ b/examples/react/start-basic/app/routes/__root.tsx @@ -61,7 +61,7 @@ export const Route = createRootRoute({ component: RootComponent, }) -export function RootComponent() { +function RootComponent() { return ( @@ -84,7 +84,7 @@ function RootDocument({ children }: { children: React.ReactNode }) { }} activeOptions={{ exact: true }} > - Homeasdfasd + Home {' '} -

Welcome Homs

- +

Welcome Home!!!

) } From 227e48c3f1cb64ec06e68dc582233b70225ac305 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:21:27 +1200 Subject: [PATCH 04/14] fix(start): force root to be HMR ready from #2286 Forces the root to be HMR ready Co-Authored-By: Kenta Iwasaki <63115601+lithdew@users.noreply.github.com> --- .../react/start-basic/app/components/Test.tsx | 7 +++++++ examples/react/start-basic/app/routes/index.tsx | 4 +++- .../react/start-basic/app/routes/posts.index.tsx | 2 +- examples/react/start-basic/app/routes/posts.tsx | 1 + packages/start/src/config/index.ts | 15 +++++++++++++-- packages/start/src/router-manifest/index.ts | 15 ++++++++++++++- 6 files changed, 39 insertions(+), 5 deletions(-) create mode 100644 examples/react/start-basic/app/components/Test.tsx diff --git a/examples/react/start-basic/app/components/Test.tsx b/examples/react/start-basic/app/components/Test.tsx new file mode 100644 index 0000000000..17fd046417 --- /dev/null +++ b/examples/react/start-basic/app/components/Test.tsx @@ -0,0 +1,7 @@ +export function TestComponent() { + return ( +
+

Welcome TESTTTTTTTTT 123

+
+ ) +} diff --git a/examples/react/start-basic/app/routes/index.tsx b/examples/react/start-basic/app/routes/index.tsx index 09a907cb18..e28f7f24e2 100644 --- a/examples/react/start-basic/app/routes/index.tsx +++ b/examples/react/start-basic/app/routes/index.tsx @@ -1,4 +1,5 @@ import { createFileRoute } from '@tanstack/react-router' +import { TestComponent } from '~/components/Test' export const Route = createFileRoute('/')({ component: Home, @@ -7,7 +8,8 @@ export const Route = createFileRoute('/')({ function Home() { return (
-

Welcome Home!!!

+

Welcome Home!!! 123 123123

+
) } diff --git a/examples/react/start-basic/app/routes/posts.index.tsx b/examples/react/start-basic/app/routes/posts.index.tsx index 5b5f08f95b..eb6ead57e9 100644 --- a/examples/react/start-basic/app/routes/posts.index.tsx +++ b/examples/react/start-basic/app/routes/posts.index.tsx @@ -5,5 +5,5 @@ export const Route = createFileRoute('/posts/')({ }) function PostsIndexComponent() { - return
Select a post.
+ return
Select a post. 123
} diff --git a/examples/react/start-basic/app/routes/posts.tsx b/examples/react/start-basic/app/routes/posts.tsx index ae49032459..8d3f950426 100644 --- a/examples/react/start-basic/app/routes/posts.tsx +++ b/examples/react/start-basic/app/routes/posts.tsx @@ -11,6 +11,7 @@ function PostsComponent() { return (
+
Hello world
    {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( (post) => { diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts index 798e6b20e4..c61ede0e23 100644 --- a/packages/start/src/config/index.ts +++ b/packages/start/src/config/index.ts @@ -1,7 +1,6 @@ import path from 'node:path' import * as fs from 'node:fs' import { fileURLToPath } from 'node:url' -import { dir } from 'node:console' import reactRefresh from '@vitejs/plugin-react' import { resolve } from 'import-meta-resolve' import { TanStackRouterVite } from '@tanstack/router-plugin/vite' @@ -274,6 +273,9 @@ export function defineConfig( // optimizeDeps: { // include: ['@tanstack/start/server-runtime'], // }, + define: { + CLIENT_BASE: JSON.stringify(clientBase), + }, }), TanStackRouterVite({ ...tsrConfig, @@ -350,6 +352,9 @@ export function defineConfig( ssr: { noExternal: ['@tanstack/start', 'tsr:routes-manifest'], }, + define: { + 'process.env.CLIENT_BASE': JSON.stringify(clientBase), + }, }), TanStackRouterVite({ ...tsrConfig, @@ -382,6 +387,9 @@ export function defineConfig( noExternal: ['@tanstack/start', 'tsr:routes-manifest'], external: ['@vinxi/react-server-dom/client'], }, + define: { + 'process.env.CLIENT_BASE': JSON.stringify(clientBase), + }, }), TanStackRouterVite({ ...tsrConfig, @@ -419,6 +427,9 @@ export function defineConfig( ssr: { noExternal: ['@tanstack/start', 'tsr:routes-manifest'], }, + define: { + 'process.env.CLIENT_BASE': JSON.stringify(clientBase), + }, }), TanStackRouterVite({ ...tsrConfig, @@ -506,7 +517,7 @@ function tsrRoutesManifest(opts: { } return }, - async load(id) { + load(id) { if (id === 'tsr:routes-manifest') { // If we're in development, return a dummy manifest diff --git a/packages/start/src/router-manifest/index.ts b/packages/start/src/router-manifest/index.ts index 7d5b4cfdc6..fa3c617f02 100644 --- a/packages/start/src/router-manifest/index.ts +++ b/packages/start/src/router-manifest/index.ts @@ -11,6 +11,14 @@ import type { Manifest } from '@tanstack/react-router' export function getFullRouterManifest() { const routerManifest = tsrGetManifest() as Manifest + const CLIENT_BASE = process.env.CLIENT_BASE + + if (!CLIENT_BASE) { + throw new Error( + 'Something went wrong. CLIENT_BASE is not defined in the environment for getFullRouterManifest', + ) + } + const rootRoute = (routerManifest.routes.__root__ = routerManifest.routes.__root__ || {}) @@ -20,7 +28,12 @@ export function getFullRouterManifest() { if (process.env.NODE_ENV === 'development') { rootRoute.assets.push({ tag: 'script', - children: `window.__vite_plugin_react_preamble_installed__ = true`, + attrs: { type: 'module' }, + children: `import RefreshRuntime from "${CLIENT_BASE}/@react-refresh"; +RefreshRuntime.injectIntoGlobalHook(window) +window.$RefreshReg$ = () => {} +window.$RefreshSig$ = () => (type) => type +window.__vite_plugin_react_preamble_installed__ = true`, }) } From 35fe64775c76ae42c414cd737ec68f2c40768502 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:23:05 +1200 Subject: [PATCH 05/14] chore: oops, undo these changes to the example --- examples/react/start-basic/app/components/Test.tsx | 7 ------- examples/react/start-basic/app/routes/index.tsx | 2 -- examples/react/start-basic/app/routes/posts.index.tsx | 2 +- examples/react/start-basic/app/routes/posts.tsx | 1 - 4 files changed, 1 insertion(+), 11 deletions(-) delete mode 100644 examples/react/start-basic/app/components/Test.tsx diff --git a/examples/react/start-basic/app/components/Test.tsx b/examples/react/start-basic/app/components/Test.tsx deleted file mode 100644 index 17fd046417..0000000000 --- a/examples/react/start-basic/app/components/Test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function TestComponent() { - return ( -
    -

    Welcome TESTTTTTTTTT 123

    -
    - ) -} diff --git a/examples/react/start-basic/app/routes/index.tsx b/examples/react/start-basic/app/routes/index.tsx index e28f7f24e2..48df254daa 100644 --- a/examples/react/start-basic/app/routes/index.tsx +++ b/examples/react/start-basic/app/routes/index.tsx @@ -1,5 +1,4 @@ import { createFileRoute } from '@tanstack/react-router' -import { TestComponent } from '~/components/Test' export const Route = createFileRoute('/')({ component: Home, @@ -9,7 +8,6 @@ function Home() { return (

    Welcome Home!!! 123 123123

    -
    ) } diff --git a/examples/react/start-basic/app/routes/posts.index.tsx b/examples/react/start-basic/app/routes/posts.index.tsx index eb6ead57e9..5b5f08f95b 100644 --- a/examples/react/start-basic/app/routes/posts.index.tsx +++ b/examples/react/start-basic/app/routes/posts.index.tsx @@ -5,5 +5,5 @@ export const Route = createFileRoute('/posts/')({ }) function PostsIndexComponent() { - return
    Select a post. 123
    + return
    Select a post.
    } diff --git a/examples/react/start-basic/app/routes/posts.tsx b/examples/react/start-basic/app/routes/posts.tsx index 8d3f950426..ae49032459 100644 --- a/examples/react/start-basic/app/routes/posts.tsx +++ b/examples/react/start-basic/app/routes/posts.tsx @@ -11,7 +11,6 @@ function PostsComponent() { return (
    -
    Hello world
      {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }].map( (post) => { From 17ca4a2c67976335077b3a94fc7f0a0abe895631 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 00:30:13 +0200 Subject: [PATCH 06/14] fix bugs --- packages/router-plugin/src/core/code-splitter/compilers.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index e4c8dede1b..2067711ab4 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -319,12 +319,13 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { splitNode = binding?.path.node } - let componentId = 'SplitComponent' + let componentId = + splitType === 'component' ? 'SplitComponent' : 'SplitLoader' // Add the node to the program if (splitNode) { if (t.isFunctionDeclaration(splitNode)) { - componentId = splitNode.id?.name || componentId + componentId = splitNode.id?.name || 'SplitComponent' programPath.pushContainer( 'body', // Push the function declaration to the program @@ -386,7 +387,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { programPath.pushContainer( 'body', t.variableDeclaration('const', [ - t.variableDeclarator(t.identifier(splitType), expression), + t.variableDeclarator(t.identifier(componentId), expression), ]), ) } else { From 61f2dc16baf11a0c0dc885f08e76f388b81961a7 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 00:30:21 +0200 Subject: [PATCH 07/14] removed unused imports --- .../router-plugin/src/core/router-code-splitter-plugin.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/router-plugin/src/core/router-code-splitter-plugin.ts b/packages/router-plugin/src/core/router-code-splitter-plugin.ts index 9698b8b90e..822286774f 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -1,14 +1,12 @@ -import { basename, dirname, isAbsolute, join, resolve } from 'node:path' +import { isAbsolute, join } from 'node:path' import { fileURLToPath, pathToFileURL } from 'node:url' -import { existsSync, readFileSync } from 'node:fs' import { getConfig } from './config' import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' import { splitToken } from './constants' -import type { ModuleNode } from 'vite' import type { Config } from './config' import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' From 8d2740db73ad2c0e3a4c991a7381a0632542c02e Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 00:31:33 +0200 Subject: [PATCH 08/14] update snapshots --- .../destructured-react-memo-imported-component.tsx | 9 ++++++--- ...estructured-react-memo-imported-component@split.tsx | 8 ++++---- .../code-splitter/snapshots/function-declaration.tsx | 9 ++++++--- .../snapshots/function-declaration@split.tsx | 10 +++++----- .../imported-default-component-destructured-loader.tsx | 9 ++++++--- ...ted-default-component-destructured-loader@split.tsx | 8 ++++---- .../snapshots/imported-default-component.tsx | 7 +++++-- .../snapshots/imported-default-component@split.tsx | 4 ++-- .../tests/code-splitter/snapshots/imported.tsx | 9 ++++++--- .../tests/code-splitter/snapshots/imported@split.tsx | 8 ++++---- .../tests/code-splitter/snapshots/inline.tsx | 7 +++++-- .../tests/code-splitter/snapshots/inline@split.tsx | 4 ++-- .../tests/code-splitter/snapshots/random-number.tsx | 9 ++++++--- .../code-splitter/snapshots/random-number@split.tsx | 10 +++++----- .../code-splitter/snapshots/react-memo-component.tsx | 9 ++++++--- .../snapshots/react-memo-component@split.tsx | 8 ++++---- .../snapshots/react-memo-imported-component.tsx | 9 ++++++--- .../snapshots/react-memo-imported-component@split.tsx | 8 ++++---- .../code-splitter/snapshots/useStateDestructure.tsx | 7 +++++-- .../snapshots/useStateDestructure@split.tsx | 6 +++--- 20 files changed, 94 insertions(+), 64 deletions(-) diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx index 446bb12344..0f8547c14a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx @@ -1,9 +1,12 @@ -const $$splitLoaderImporter = () => import('tsr-split:destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('tsr-split:destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx index 93f0e29a19..5d248932f2 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx @@ -3,7 +3,7 @@ import { importedLoader } from '../shared/imported'; function Component() { return
      Component
      ; } -const component = memo(Component); -export { component }; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitComponent = memo(Component); +export { SplitComponent as component }; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx index 20796bb911..b44a3903cc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx @@ -1,9 +1,12 @@ -const $$splitComponentImporter = () => import('tsr-split:function-declaration.tsx?tsr-split'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('tsr-split:function-declaration.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ loader: lazyFn($$splitLoaderImporter, 'loader'), component: lazyRouteComponent($$splitComponentImporter, 'component') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx index 0a31bfe7b2..587ae41a75 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx @@ -1,7 +1,7 @@ import { Link, Outlet } from '@tanstack/react-router'; import { fetchPosts } from '../posts'; import { Route } from "function-declaration.tsx"; -const component = function PostsComponent() { +function PostsComponent() { const posts = Route.useLoaderData(); return
        @@ -23,7 +23,7 @@ const component = function PostsComponent() {
      ; -}; -export { component }; -const loader = fetchPosts; -export { loader }; \ No newline at end of file +} +export { PostsComponent as component }; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx index 3d7bb3b9a5..c1d549b18b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx @@ -1,9 +1,12 @@ -const $$splitLoaderImporter = () => import('tsr-split:imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('tsr-split:imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx index b3ad7d5dae..36b0a4fd34 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx @@ -1,5 +1,5 @@ import importedComponent, { importedLoader } from '../shared/imported'; -const component = importedComponent; -export { component }; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitComponent = importedComponent; +export { SplitComponent as component }; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx index a0884d96ba..5d06e839b4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx @@ -1,6 +1,9 @@ -const $$splitComponentImporter = () => import('tsr-split:imported-default-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx index 8e63ff2710..c52d2691b4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx @@ -1,3 +1,3 @@ import ImportedDefaultComponent from '../shared/imported'; -const component = ImportedDefaultComponent; -export { component }; \ No newline at end of file +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx index 7541aab98d..98fe50b712 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx @@ -1,9 +1,12 @@ -const $$splitLoaderImporter = () => import('tsr-split:imported.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('tsr-split:imported.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx index 92c972eb28..47c62497db 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx @@ -1,5 +1,5 @@ import { importedComponent, importedLoader } from '../shared/imported'; -const component = importedComponent; -export { component }; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitComponent = importedComponent; +export { SplitComponent as component }; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx index fef81abf89..0e4a94226a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx @@ -1,8 +1,11 @@ -const $$splitComponentImporter = () => import('tsr-split:inline.tsx?tsr-split'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component') }); Route.addChildren([]); -export const test = 'test'; \ No newline at end of file +export const test = 'test'; +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx index 445e11011d..dd352c63ae 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx @@ -8,11 +8,11 @@ const Button = (props: { import { Route } from "inline.tsx"; Route.addChildren([]); import { test } from "inline.tsx"; -const component = () => { +const SplitComponent = () => { return
      {test}

      {TEST_DATA.welcome}

      ; }; -export { component }; \ No newline at end of file +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx index e19b36838d..a1afa1249d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('tsr-split:random-number.tsx?tsr-split'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('tsr-split:random-number.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const textColors = [`text-rose-500`, `text-yellow-500`, `text-teal-500`, `text-blue-500`]; @@ -8,4 +8,7 @@ export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-tea export const Route = createFileRoute('/')({ loader: lazyFn($$splitLoaderImporter, 'loader'), component: lazyRouteComponent($$splitComponentImporter, 'component') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx index e52a00145a..f71cf37d1e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx @@ -5,7 +5,7 @@ import { sample } from '~/utils/utils'; import { textColors } from "random-number.tsx"; import { gradients } from "random-number.tsx"; import { Route } from "random-number.tsx"; -const component = function Index() { +function Index() { const { randomNumber } = Route.useLoaderData(); @@ -16,12 +16,12 @@ const component = function Index() { {gradient} {textColor} ; -}; -export { component }; -const loader = () => { +} +export { Index as component }; +const SplitLoader = () => { return { randomNumber: Math.random(), sponsorsPromise: defer(getSponsorsForSponsorPack()) }; }; -export { loader }; \ No newline at end of file +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx index 31d5f1f3b3..dab4570229 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx @@ -1,9 +1,12 @@ -const $$splitLoaderImporter = () => import('tsr-split:react-memo-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('tsr-split:react-memo-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx index 99d8095bbc..2ccf4684ae 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx @@ -3,7 +3,7 @@ import { importedLoader } from '../shared/imported'; function Component() { return
      Component
      ; } -const component = React.memo(Component); -export { component }; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx index ea3ecc703a..4a1b674c4a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx @@ -1,9 +1,12 @@ -const $$splitLoaderImporter = () => import('tsr-split:react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('tsr-split:react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx index 57b51bb7b3..f8e62e3e2b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { importedLoader, importedComponent } from '../shared/imported'; -const component = React.memo(importedComponent); -export { component }; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx index 40459b369f..d274469a51 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('tsr-split:useStateDestructure.tsx?tsr-split'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; @@ -9,4 +9,7 @@ export const Route = createFileRoute('/_libraries/start/$version/')({ title: startProject.name, description: startProject.description }) -}); \ No newline at end of file +}); +export function TSR_DummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx index e3753b7b09..8f1bfee165 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx @@ -442,7 +442,7 @@ Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`fle
    ; } -const component = function VersionIndex() { +function VersionIndex() { const { sponsorsPromise } = librariesRouteApi.useLoaderData(); @@ -601,5 +601,5 @@ Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`fle {}
; -}; -export { component }; \ No newline at end of file +} +export { VersionIndex as component }; \ No newline at end of file From 89ff13de9b73dd3687f35391e9b458987bffeab1 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 00:32:11 +0200 Subject: [PATCH 09/14] revert index --- examples/react/start-basic/app/routes/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/react/start-basic/app/routes/index.tsx b/examples/react/start-basic/app/routes/index.tsx index 48df254daa..09a907cb18 100644 --- a/examples/react/start-basic/app/routes/index.tsx +++ b/examples/react/start-basic/app/routes/index.tsx @@ -7,7 +7,7 @@ export const Route = createFileRoute('/')({ function Home() { return (
-

Welcome Home!!! 123 123123

+

Welcome Home!!!

) } From 8e7ae0ca8f0776339f71e2a96db24375a1b1b1e2 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 00:39:55 +0200 Subject: [PATCH 10/14] adapt bundlers --- .../src/core/router-code-splitter-plugin.ts | 32 ++----------------- 1 file changed, 3 insertions(+), 29 deletions(-) diff --git a/packages/router-plugin/src/core/router-code-splitter-plugin.ts b/packages/router-plugin/src/core/router-code-splitter-plugin.ts index 822286774f..3788f7cb6a 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -162,40 +162,14 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< // }, }, - rspack(compiler) { + rspack() { ROOT = process.cwd() + userConfig = getConfig(options, ROOT) }, - webpack(compiler) { + webpack() { ROOT = process.cwd() - - compiler.hooks.beforeCompile.tap(PLUGIN_NAME, (self) => { - self.normalModuleFactory.hooks.beforeResolve.tap( - PLUGIN_NAME, - (resolveData: { request: string }) => { - if (resolveData.request.match(splitTokenRegex)) { - resolveData.request = resolveData.request.replace( - splitTokenRegex, - '', - ) - } - }, - ) - }) - userConfig = getConfig(options, ROOT) - - if ( - userConfig.autoCodeSplitting && - compiler.options.mode === 'production' - ) { - compiler.hooks.done.tap(PLUGIN_NAME, () => { - console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!') - setTimeout(() => { - process.exit(0) - }) - }) - } }, } } From 01a6c43f6012e101222d904cc1e0057c99a57b72 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Fri, 13 Sep 2024 01:32:13 +0200 Subject: [PATCH 11/14] removed unused variables --- .../router-plugin/src/core/router-code-splitter-plugin.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/router-plugin/src/core/router-code-splitter-plugin.ts b/packages/router-plugin/src/core/router-code-splitter-plugin.ts index 3788f7cb6a..12b69d6860 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -51,10 +51,6 @@ plugins: [ } } -const PLUGIN_NAME = 'unplugin:router-code-splitter' -// a regex for either ?splitToken or &splitToken -const splitTokenRegex = new RegExp(`[?&]${splitToken}`) - export const unpluginRouterCodeSplitterFactory: UnpluginFactory< Partial | undefined > = (options = {}, { framework }) => { From 5c194905c0e633c9f575fe0344761a2a261b7d5f Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Fri, 20 Sep 2024 08:50:31 +1200 Subject: [PATCH 12/14] fix: whatever was broken from the branch update --- .../src/core/code-splitter/compilers.ts | 19 ++++++------------- .../router-plugin/tests/code-splitter.test.ts | 4 ++-- .../snapshots/retain-export-component.tsx | 2 +- .../retain-export-component@split.tsx | 4 ++-- .../snapshots/retain-exports-loader.tsx | 2 +- .../snapshots/retain-exports-loader@split.tsx | 6 +++--- 6 files changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index f26c756bb5..f1e52a611e 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -101,6 +101,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { let shouldSplit = true if (t.isIdentifier(value)) { + console.log('is identifier', value) existingCompImportPath = getImportSpecifierAndPathFromLocalName( programPath, @@ -113,11 +114,14 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { const isExported = hasExport(ast, value) shouldSplit = !isExported + console.log('inner shouldSplit', shouldSplit) if (shouldSplit) { removeIdentifierLiteral(path, value) } } + console.log('outer shouldSplit', shouldSplit) + if (shouldSplit) { // Prepend the import statement to the program along with the importer function // Check to see if lazyRouteComponent is already imported before attempting @@ -158,18 +162,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { ]) } - prop.value = template.expression( - `lazyRouteComponent($$splitComponentImporter, 'component')`, - )() - - programPath.pushContainer('body', [ - template.statement( - `export function TSR_DummyComponent() { return null }`, - )(), - ]) - - found = true - } + found = true } else if (prop.key.name === 'loader') { const value = prop.value @@ -514,7 +507,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { return str }, '') - const warningMessage = `These exports from "${opts.filename.replace('?' + splitPrefix, '')}" are not being code-split and will increase your bundle size: ${list}\nThese should either have their export statements removed or be imported from another file that is not a route.` + const warningMessage = `These exports from "${opts.filename.replace('?' + splitToken, '')}" are not being code-split and will increase your bundle size: ${list}\nThese should either have their export statements removed or be imported from another file that is not a route.` console.warn(warningMessage) // append this warning to the file using a template diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 31b95e41bd..af7bea451c 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -1,5 +1,5 @@ -import { readFile, readdir } from 'fs/promises' -import path from 'path' +import { readFile, readdir } from 'node:fs/promises' +import path from 'node:path' import { describe, expect, it } from 'vitest' import { diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx index 886cad2399..5e41828800 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx @@ -1,4 +1,4 @@ -const $$splitLoaderImporter = () => import('tsr-split:retain-export-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute, Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../shared/imported'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx index b53badb34f..0df3e28da9 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx @@ -1,4 +1,4 @@ console.warn("These exports from \"retain-export-component.tsx\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); import { importedLoader } from '../shared/imported'; -const loader = importedLoader; -export { loader }; \ No newline at end of file +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx index d514b8fd86..558f5589e8 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('tsr-split:retain-exports-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export function loaderFn() { diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx index f74980eee1..3eb5aaf487 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx @@ -2,7 +2,7 @@ console.warn("These exports from \"retain-exports-loader.tsx\" are not being cod import { Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../shared/imported'; const HEADER_HEIGHT = '63px'; -const component = function Layout() { +function Layout() { return
; -}; -export { component }; \ No newline at end of file +} +export { Layout as component }; \ No newline at end of file From f85171db28441b10ba8ea8e18d4a3c8e442b698e Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Fri, 20 Sep 2024 09:08:36 +1200 Subject: [PATCH 13/14] fix: add the dummy component export back in --- .../src/core/code-splitter/compilers.ts | 22 +-- ...ructured-react-memo-imported-component.tsx | 4 +- .../snapshots/function-declaration.tsx | 4 +- ...-default-component-destructured-loader.tsx | 4 +- .../snapshots/imported-default-component.tsx | 4 +- .../code-splitter/snapshots/imported.tsx | 4 +- .../tests/code-splitter/snapshots/inline.tsx | 4 +- .../code-splitter/snapshots/random-number.tsx | 4 +- .../snapshots/react-memo-component.tsx | 4 +- .../react-memo-imported-component.tsx | 4 +- .../snapshots/retain-export-component.tsx | 3 +- .../snapshots/retain-exports-const.tsx | 3 +- .../snapshots/retain-exports-function.tsx | 3 +- .../snapshots/retain-exports-loader.tsx | 3 +- .../snapshots/useStateDestructure.tsx | 4 +- .../snapshots/useStateDestructure@split.tsx | 162 +----------------- .../test-files/useStateDestructure.tsx | 2 +- 17 files changed, 27 insertions(+), 211 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index f1e52a611e..1ecd455b32 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -101,7 +101,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { let shouldSplit = true if (t.isIdentifier(value)) { - console.log('is identifier', value) existingCompImportPath = getImportSpecifierAndPathFromLocalName( programPath, @@ -114,14 +113,11 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { const isExported = hasExport(ast, value) shouldSplit = !isExported - console.log('inner shouldSplit', shouldSplit) if (shouldSplit) { removeIdentifierLiteral(path, value) } } - console.log('outer shouldSplit', shouldSplit) - if (shouldSplit) { // Prepend the import statement to the program along with the importer function // Check to see if lazyRouteComponent is already imported before attempting @@ -154,12 +150,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { prop.value = template.expression( `lazyRouteComponent($$splitComponentImporter, 'component')`, )() - - programPath.pushContainer('body', [ - template.statement( - `function DummyComponent() { return null }`, - )(), - ]) } found = true @@ -222,11 +212,13 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { }) } - if (found as boolean) { - programPath.pushContainer('body', [ - template.statement(`function TSR_Dummy_Component() {}`)(), - ]) - } + // if (found as boolean) { + // } + programPath.pushContainer('body', [ + template.statement( + `export function TSR_Dummy_Component() {}`, + )(), + ]) } }, }, diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx index 0f8547c14a..811f912ac4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx index b44a3903cc..0578d50137 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/posts')({ loader: lazyFn($$splitLoaderImporter, 'loader'), component: lazyRouteComponent($$splitComponentImporter, 'component') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx index c1d549b18b..d55d2c442a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx index 5d06e839b4..a4103ed9c9 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx @@ -4,6 +4,4 @@ import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx index 98fe50b712..46cb10e353 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx index 0e4a94226a..8178165ac1 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx @@ -6,6 +6,4 @@ export const Route = createFileRoute('/')({ }); Route.addChildren([]); export const test = 'test'; -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx index a1afa1249d..896bcf3ffc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx @@ -9,6 +9,4 @@ export const Route = createFileRoute('/')({ loader: lazyFn($$splitLoaderImporter, 'loader'), component: lazyRouteComponent($$splitComponentImporter, 'component') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx index dab4570229..a0bbec3cf4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx index 4a1b674c4a..de00df9e10 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx @@ -7,6 +7,4 @@ export const Route = createFileRoute('/')({ component: lazyRouteComponent($$splitComponentImporter, 'component'), loader: lazyFn($$splitLoaderImporter, 'loader') }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx index 5e41828800..1c835539a7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx @@ -24,4 +24,5 @@ export const Route = createFileRoute('/_layout')({ loader: lazyFn($$splitLoaderImporter, 'loader') }); const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file +export const SIDEBAR_WIDTH = '150px'; +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx index 69e27260d4..7dd945e11a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx @@ -27,4 +27,5 @@ export const Route = createFileRoute('/_layout')({ const HEADER_HEIGHT = '63px'; export const SIDEBAR_WIDTH = '150px'; export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file +export default Layout; +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx index 8162228c27..75275489d5 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx @@ -27,4 +27,5 @@ export const Route = createFileRoute('/_layout')({ const HEADER_HEIGHT = '63px'; export const SIDEBAR_WIDTH = '150px'; export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file +export default Layout; +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx index 558f5589e8..3bc860dd30 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx @@ -11,4 +11,5 @@ export const Route = createFileRoute('/_layout')({ loader: loaderFn }); export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; \ No newline at end of file +export const SIDEBAR_MINI_WIDTH = '80px'; +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx index d274469a51..f294e0368d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx @@ -10,6 +10,4 @@ export const Route = createFileRoute('/_libraries/start/$version/')({ description: startProject.description }) }); -export function TSR_DummyComponent() { - return null; -} \ No newline at end of file +export function TSR_Dummy_Component() {} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx index 8f1bfee165..74feb57686 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx @@ -50,7 +50,7 @@ const menu = [{ }]; import { Route } from "useStateDestructure.tsx"; const librariesRouteApi = getRouteApi('/_libraries'); -export default function VersionIndex() { +function VersionIndex() { const { sponsorsPromise } = librariesRouteApi.useLoaderData(); @@ -442,164 +442,4 @@ Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`fle