diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 79382d59b3..c06881dd6f 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 @@ -85,8 +85,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { path.parentPath.node.arguments[0], ) - let found = false - const hasImportedOrDefinedIdentifier = (name: string) => { return programPath.scope.hasBinding(name) } @@ -150,14 +148,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { prop.value = template.expression( `lazyRouteComponent($$splitComponentImporter, 'component')`, )() - - programPath.pushContainer('body', [ - template.statement( - `function DummyComponent() { return null }`, - )(), - ]) - - found = true } } else if (prop.key.name === 'loader') { const value = prop.value @@ -207,8 +197,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { prop.value = template.expression( `lazyFn($$splitLoaderImporter, 'loader')`, )() - - found = true } } } @@ -218,11 +206,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() { return null }`, + )(), + ]) } }, }, @@ -362,23 +352,24 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { splitNode = binding?.path.node } + let componentId = + splitType === 'component' ? 'SplitComponent' : 'SplitLoader' + // Add the node to the program if (splitNode) { if (t.isFunctionDeclaration(splitNode)) { + componentId = splitNode.id?.name || 'SplitComponent' 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) || @@ -388,7 +379,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { 'body', t.variableDeclaration('const', [ t.variableDeclarator( - t.identifier(splitType), + t.identifier(componentId), splitNode as any, ), ]), @@ -401,7 +392,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { 'body', t.variableDeclaration('const', [ t.variableDeclarator( - t.identifier(splitType), + t.identifier(componentId), splitNode.local, ), ]), @@ -429,7 +420,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 { @@ -453,7 +444,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { programPath.pushContainer('body', [ t.exportNamedDeclaration(null, [ t.exportSpecifier( - t.identifier(splitType), + t.identifier(componentId), t.identifier(splitType), ), ]), @@ -478,7 +469,7 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { ), ), t.stringLiteral( - opts.filename.split(`?${splitPrefix}`)[0] as string, + opts.filename.split(`?${splitToken}`)[0] as string, ), ), ) @@ -502,7 +493,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/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 c9de306416..a29a12501a 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -6,7 +6,7 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' -import { splitPrefix } from './constants' +import { splitToken } from './constants' import type { Config } from './config' import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' @@ -56,9 +56,6 @@ plugins: [ } } -const PLUGIN_NAME = 'unplugin:router-code-splitter' -const JoinedSplitPrefix = splitPrefix + ':' - export const unpluginRouterCodeSplitterFactory: UnpluginFactory< Partial | undefined > = (options = {}, { framework }) => { @@ -110,18 +107,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 @@ -131,7 +116,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) && @@ -158,15 +143,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 } @@ -179,58 +158,19 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< userConfig = getConfig(options, ROOT) }, + // handleHotUpdate({ file, server, modules }) { + // return [] + // }, }, - rspack(compiler) { + rspack() { 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) { + webpack() { 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) - - if ( - userConfig.autoCodeSplitting && - compiler.options.mode === 'production' - ) { - compiler.hooks.done.tap(PLUGIN_NAME, () => { - console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!') - setTimeout(() => { - process.exit(0) - }) - }) - } }, } } diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 31633185a3..af7bea451c 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -1,12 +1,12 @@ -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 { 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/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..1072bd3d73 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_Dummy_Component() { + 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..9915a10509 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_Dummy_Component() { + 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
; -}; -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..432c593b55 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_Dummy_Component() { + 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..69d2ae1a38 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_Dummy_Component() { + 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..dd073cfbfa 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_Dummy_Component() { + 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..1a15da0128 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_Dummy_Component() { + 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..a48e2e21ed 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_Dummy_Component() { + 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..6ce2453978 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_Dummy_Component() { + 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..2e8e77cbd5 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_Dummy_Component() { + 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/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx index 886cad2399..56dd36c308 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'; @@ -24,4 +24,7 @@ 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() { + return null; +} \ No newline at end of file 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-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx index 69e27260d4..2cf695e7e2 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,7 @@ 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() { + return null; +} \ 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..58bf8b542d 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,7 @@ 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() { + return null; +} \ 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..96e25fa0f6 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() { @@ -11,4 +11,7 @@ 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() { + return null; +} \ No newline at end of file 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 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx index 40459b369f..f260d730af 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_Dummy_Component() { + 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..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