From a31bf7e9315b58f1c9546aebc83dd8b2113ddf1a Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Fri, 7 Feb 2025 23:06:32 +1300 Subject: [PATCH 01/35] feat(router-plugin): implementation for splitting loader and component separately --- .../src/core/code-splitter/compilers.ts | 51 +++++++++++------ packages/router-plugin/src/core/constants.ts | 7 ++- .../src/core/router-code-splitter-plugin.ts | 56 ++++++++++++++----- 3 files changed, 80 insertions(+), 34 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 7885f49da2..8d9ccf06ef 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -3,9 +3,11 @@ import babel from '@babel/core' import * as template from '@babel/template' import { deadCodeElimination } from 'babel-dead-code-elimination' import { generateFromAst, parseAst } from '@tanstack/router-utils' -import { splitPrefix } from '../constants' +import { splitPrefixes } from '../constants' import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils' +import type { SplitPrefix } from '../constants' +// eslint-disable-next-line unused-imports/no-unused-vars const debug = process.env.TSR_VITE_DEBUG type SplitModulesById = Record< @@ -26,18 +28,9 @@ interface State { splitModulesById: SplitModulesById } -function addSplitSearchParamToFilename(filename: string) { - const [bareFilename] = filename.split('?') - return `${bareFilename}?${splitPrefix}` -} - -function removeSplitSearchParamFromFilename(filename: string) { - const [bareFilename] = filename.split('?') - return bareFilename! -} - type SplitRouteIdentNodes = 'component' | 'loader' type SplitNodeMeta = { + codesplitPrefix: SplitPrefix routeIdent: SplitRouteIdentNodes splitStrategy: 'normal' | 'react-component' localImporterIdent: string @@ -48,6 +41,7 @@ const SPLIT_NOES_CONFIG = new Map([ [ 'component', { + codesplitPrefix: splitPrefixes.ROUTE_COMPONENT, routeIdent: 'component', localImporterIdent: '$$splitComponentImporter', // const $$splitComponentImporter = () => import('...') splitStrategy: 'react-component', @@ -58,6 +52,7 @@ const SPLIT_NOES_CONFIG = new Map([ [ 'loader', { + codesplitPrefix: splitPrefixes.ROUTE_LOADER, routeIdent: 'loader', localImporterIdent: '$$splitLoaderImporter', // const $$splitLoaderImporter = () => import('...') splitStrategy: 'normal', @@ -68,6 +63,19 @@ const SPLIT_NOES_CONFIG = new Map([ ]) const SPLIT_ROUTE_IDENT_NODES = [...SPLIT_NOES_CONFIG.keys()] as const +function addSplitSearchParamToFilename( + filename: string, + splitNode: SplitNodeMeta, +) { + const [bareFilename] = filename.split('?') + return `${bareFilename}?${splitNode.codesplitPrefix}` +} + +function removeSplitSearchParamFromFilename(filename: string) { + const [bareFilename] = filename.split('?') + return bareFilename! +} + export function compileCodeSplitReferenceRoute( opts: ParseAstOptions, ): GeneratorResult { @@ -78,10 +86,6 @@ export function compileCodeSplitReferenceRoute( enter(programPath, programState) { const state = programState as unknown as State - // We need to extract the existing search params from the filename, if any - // and add the splitPrefix to them, then write them back to the filename - const splitUrl = addSplitSearchParamToFilename(opts.filename) - /** * If the component for the route is being imported from * another file, this is to track the path to that file @@ -136,6 +140,13 @@ export function compileCodeSplitReferenceRoute( const splitNodeMeta = SPLIT_NOES_CONFIG.get(key as any)! + // We need to extract the existing search params from the filename, if any + // and add the relevant codesplitPrefix to them, then write them back to the filename + const splitUrl = addSplitSearchParamToFilename( + opts.filename, + splitNodeMeta, + ) + if (splitNodeMeta.splitStrategy === 'react-component') { const value = prop.value @@ -320,10 +331,14 @@ export function compileCodeSplitReferenceRoute( } export function compileCodeSplitVirtualRoute( - opts: ParseAstOptions, + opts: ParseAstOptions & { + splitTargets: Array + }, ): GeneratorResult { const ast = parseAst(opts) + const intendedSplitNodes = new Set(opts.splitTargets) + const knownExportedIdents = new Set() babel.traverse(ast, { @@ -407,7 +422,7 @@ export function compileCodeSplitVirtualRoute( state, ) - SPLIT_ROUTE_IDENT_NODES.forEach((SPLIT_TYPE) => { + intendedSplitNodes.forEach((SPLIT_TYPE) => { const splitKey = trackedNodesToSplitByType[SPLIT_TYPE] if (!splitKey) { @@ -575,7 +590,7 @@ export function compileCodeSplitVirtualRoute( 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}" 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 4e63aeea77..8a9bf8c41a 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -1 +1,6 @@ -export const splitPrefix = 'tsr-split' +export const splitPrefixes = { + ROUTE_COMPONENT: 'tsr-split-component', + ROUTE_LOADER: 'tsr-split-loader', +} as const + +export type SplitPrefix = (typeof splitPrefixes)[keyof typeof splitPrefixes] 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 f07c4b36ee..c90d92f88b 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -7,10 +7,14 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' -import { splitPrefix } from './constants' +import { splitPrefixes } from './constants' import type { Config } from './config' -import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' +import type { + UnpluginContextMeta, + UnpluginFactory, + TransformResult as UnpluginTransformResult, +} from 'unplugin' const debug = process.env.TSR_VITE_DEBUG && @@ -63,30 +67,52 @@ plugins: [ const PLUGIN_NAME = 'unplugin:router-code-splitter' +const splitPrefixesArray = Object.values(splitPrefixes) + export const unpluginRouterCodeSplitterFactory: UnpluginFactory< Partial | undefined > = (options = {}, { framework }) => { let ROOT: string = process.cwd() let userConfig = options as Config - const handleSplittingFile = (code: string, id: string) => { + const _isProduction = process.env.NODE_ENV === 'production' + + const handleSplittingFile = ( + code: string, + id: string, + ): UnpluginTransformResult => { if (debug) console.info('Splitting Route: ', id) - const compiledVirtualRoute = compileCodeSplitVirtualRoute({ - code, - root: ROOT, - filename: id, - }) + let result: UnpluginTransformResult = { code: 'empty' } + + if (id.includes(splitPrefixes.ROUTE_COMPONENT)) { + result = compileCodeSplitVirtualRoute({ + code, + root: ROOT, + filename: id, + splitTargets: ['component'], + }) + } else if (id.includes(splitPrefixes.ROUTE_LOADER)) { + result = compileCodeSplitVirtualRoute({ + code, + root: ROOT, + filename: id, + splitTargets: ['loader'], + }) + } if (debug) { - logDiff(code, compiledVirtualRoute.code) - console.log('Output:\n', compiledVirtualRoute.code) + logDiff(code, result.code) + console.log('Output:\n', result.code + '\n\n') } - return compiledVirtualRoute + return result } - const handleCompilingFile = (code: string, id: string) => { + const handleCompilingFile = ( + code: string, + id: string, + ): UnpluginTransformResult => { if (debug) console.info('Compiling Route: ', id) const compiledReferenceRoute = compileCodeSplitReferenceRoute({ @@ -116,7 +142,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< url.searchParams.delete('v') id = fileURLToPath(url).replace(/\\/g, '/') - if (id.includes(splitPrefix)) { + if (splitPrefixesArray.some((prefix) => id.includes(prefix))) { return handleSplittingFile(code, id) } else if ( fileIsInRoutesDirectory(id, userConfig.routesDirectory) && @@ -145,7 +171,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< if ( fileIsInRoutesDirectory(id, userConfig.routesDirectory) || - id.includes(splitPrefix) + splitPrefixesArray.some((prefix) => id.includes(prefix)) ) { return true } @@ -160,7 +186,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< }, }, - rspack(compiler) { + rspack(_compiler) { ROOT = process.cwd() userConfig = getConfig(options, ROOT) }, From 091b583a3c253d6fc94305b2a7b7a25faabc0e3f Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Fri, 7 Feb 2025 23:27:43 +1300 Subject: [PATCH 02/35] test(router-plugin): update test suite --- .../router-plugin/tests/code-splitter.test.ts | 36 +- .../snapshots/development/arrow-function.tsx | 4 +- ...split.tsx => arrow-function@component.tsx} | 5 +- .../development/arrow-function@loader.tsx | 3 + .../snapshots/development/chinese.tsx | 2 +- ...hinese@split.tsx => chinese@component.tsx} | 0 .../snapshots/development/chinese@loader.tsx | 3 + ...ructured-react-memo-imported-component.tsx | 4 +- ...eact-memo-imported-component@component.tsx | 6 + ...-react-memo-imported-component@loader.tsx} | 0 ...ed-react-memo-imported-component@split.tsx | 9 - ...@split.tsx => destructuring@component.tsx} | 0 .../destructuring@loader.tsx} | 0 ...sx => function-as-parameter@component.tsx} | 0 .../function-as-parameter@loader.tsx} | 0 .../development/function-declaration.tsx | 4 +- .../function-declaration@component.tsx} | 5 +- .../function-declaration@loader.tsx | 3 + .../snapshots/development/importAttribute.tsx | 2 +- ...plit.tsx => importAttribute@component.tsx} | 0 ...t@split.tsx => importAttribute@loader.tsx} | 0 ...-default-component-destructured-loader.tsx | 4 +- ...omponent-destructured-loader@component.tsx | 3 + ...-component-destructured-loader@loader.tsx} | 0 ...lt-component-destructured-loader@split.tsx | 5 - .../imported-default-component.tsx | 2 +- ... imported-default-component@component.tsx} | 0 ... => imported-default-component@loader.tsx} | 0 .../snapshots/development/imported.tsx | 4 +- .../development/imported@component.tsx | 3 + .../snapshots/development/imported@loader.tsx | 3 + .../snapshots/development/imported@split.tsx | 5 - .../snapshots/development/inline.tsx | 2 +- ...{inline@split.tsx => inline@component.tsx} | 0 .../snapshots/development/inline@loader.tsx | 2 + .../snapshots/development/random-number.tsx | 4 +- ...@split.tsx => random-number@component.tsx} | 11 +- .../development/random-number@loader.tsx | 9 + .../development/react-memo-component.tsx | 4 +- .../react-memo-component@component.tsx | 6 + .../react-memo-component@loader.tsx | 3 + .../react-memo-component@split.tsx | 9 - .../react-memo-imported-component.tsx | 4 +- ...eact-memo-imported-component@component.tsx | 4 + .../react-memo-imported-component@loader.tsx | 3 + .../react-memo-imported-component@split.tsx | 6 - .../development/retain-export-component.tsx | 2 +- .../retain-export-component@component.tsx} | 0 .../retain-export-component@loader.tsx | 3 + .../retain-exports-const@component.tsx} | 0 .../retain-exports-const@loader.tsx | 0 .../retain-exports-function@component.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../development/retain-exports-loader.tsx | 2 +- ...sx => retain-exports-loader@component.tsx} | 0 .../retain-exports-loader@loader.tsx | 0 .../development/useStateDestructure.tsx | 2 +- ....tsx => useStateDestructure@component.tsx} | 0 .../useStateDestructure@loader.tsx | 444 ++++++++++++++++++ .../snapshots/production/arrow-function.tsx | 4 +- ...split.tsx => arrow-function@component.tsx} | 5 +- .../production/arrow-function@loader.tsx | 3 + .../snapshots/production/chinese.tsx | 2 +- ...hinese@split.tsx => chinese@component.tsx} | 0 .../snapshots/production/chinese@loader.tsx | 3 + ...ructured-react-memo-imported-component.tsx | 4 +- ...eact-memo-imported-component@component.tsx | 6 + ...d-react-memo-imported-component@loader.tsx | 3 + ...ed-react-memo-imported-component@split.tsx | 9 - .../production/destructuring@component.tsx | 11 + .../production/destructuring@loader.tsx | 11 + .../function-as-parameter@component.tsx | 19 + .../function-as-parameter@loader.tsx | 19 + .../production/function-declaration.tsx | 4 +- .../function-declaration@component.tsx} | 5 +- .../function-declaration@loader.tsx | 3 + .../snapshots/production/importAttribute.tsx | 2 +- ...plit.tsx => importAttribute@component.tsx} | 0 .../production/importAttribute@loader.tsx | 0 ...-default-component-destructured-loader.tsx | 4 +- ...omponent-destructured-loader@component.tsx | 3 + ...t-component-destructured-loader@loader.tsx | 3 + ...lt-component-destructured-loader@split.tsx | 5 - .../production/imported-default-component.tsx | 2 +- ... imported-default-component@component.tsx} | 0 .../imported-default-component@loader.tsx | 0 .../snapshots/production/imported.tsx | 4 +- .../production/imported@component.tsx | 3 + .../snapshots/production/imported@loader.tsx | 3 + .../snapshots/production/imported@split.tsx | 5 - .../snapshots/production/inline.tsx | 2 +- ...{inline@split.tsx => inline@component.tsx} | 0 .../snapshots/production/inline@loader.tsx | 2 + .../snapshots/production/random-number.tsx | 4 +- ...@split.tsx => random-number@component.tsx} | 11 +- .../production/random-number@loader.tsx | 9 + .../production/react-memo-component.tsx | 4 +- .../react-memo-component@component.tsx | 6 + .../react-memo-component@loader.tsx | 3 + .../production/react-memo-component@split.tsx | 9 - .../react-memo-imported-component.tsx | 4 +- ...eact-memo-imported-component@component.tsx | 4 + .../react-memo-imported-component@loader.tsx | 3 + .../react-memo-imported-component@split.tsx | 6 - .../production/retain-export-component.tsx | 2 +- .../retain-export-component@component.tsx | 0 .../retain-export-component@loader.tsx | 3 + .../retain-exports-const@component.tsx | 0 .../retain-exports-const@loader.tsx | 0 .../retain-exports-function@component.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../production/retain-exports-loader.tsx | 2 +- ...sx => retain-exports-loader@component.tsx} | 0 .../retain-exports-loader@loader.tsx | 0 .../production/useStateDestructure.tsx | 2 +- ....tsx => useStateDestructure@component.tsx} | 0 .../production/useStateDestructure@loader.tsx | 444 ++++++++++++++++++ 117 files changed, 1143 insertions(+), 157 deletions(-) rename packages/router-plugin/tests/code-splitter/snapshots/development/{arrow-function@split.tsx => arrow-function@component.tsx} (85%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{chinese@split.tsx => chinese@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{retain-export-component@split.tsx => destructured-react-memo-imported-component@loader.tsx} (100%) delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{destructuring@split.tsx => destructuring@component.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/destructuring@split.tsx => development/destructuring@loader.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/development/{function-as-parameter@split.tsx => function-as-parameter@component.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/function-as-parameter@split.tsx => development/function-as-parameter@loader.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/function-declaration@split.tsx => development/function-declaration@component.tsx} (85%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{importAttribute@split.tsx => importAttribute@component.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/development/{retain-exports-const@split.tsx => importAttribute@loader.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-export-component@split.tsx => development/imported-default-component-destructured-loader@loader.tsx} (100%) delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{imported-default-component@split.tsx => imported-default-component@component.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/development/{retain-exports-function@split.tsx => imported-default-component@loader.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{inline@split.tsx => inline@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{random-number@split.tsx => random-number@component.tsx} (61%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-const@split.tsx => development/retain-export-component@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-function@split.tsx => development/retain-exports-const@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{retain-exports-loader@split.tsx => retain-exports-loader@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/development/{useStateDestructure@split.tsx => useStateDestructure@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{arrow-function@split.tsx => arrow-function@component.tsx} (85%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{chinese@split.tsx => chinese@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{development/function-declaration@split.tsx => production/function-declaration@component.tsx} (85%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{importAttribute@split.tsx => importAttribute@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{imported-default-component@split.tsx => imported-default-component@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{inline@split.tsx => inline@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{random-number@split.tsx => random-number@component.tsx} (61%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{retain-exports-loader@split.tsx => retain-exports-loader@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/production/{useStateDestructure@split.tsx => useStateDestructure@component.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 398490e9d2..04ffad5a23 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 { splitPrefixes } from '../src/core/constants' async function getFilenames() { return await readdir(path.resolve(__dirname, './code-splitter/test-files')) @@ -19,7 +19,7 @@ describe.each(['development', 'production'])( const filenames = await getFilenames() it.each(filenames)( - 'should handle the compiling of "%s"', + 'should handle the "reference" compiling of "%s"', async (filename) => { const file = await readFile( path.resolve(__dirname, `./code-splitter/test-files/${filename}`), @@ -39,7 +39,7 @@ describe.each(['development', 'production'])( ) it.each(filenames)( - 'should handle the splitting of "%s"', + 'should handle the "component" splitting of "%s"', async (filename) => { const file = await readFile( path.resolve(__dirname, `./code-splitter/test-files/${filename}`), @@ -49,11 +49,33 @@ describe.each(['development', 'production'])( const splitResult = compileCodeSplitVirtualRoute({ code: code, root: './code-splitter/test-files', - filename: `${filename}?${splitPrefix}`, + filename: `${filename}?${splitPrefixes.ROUTE_COMPONENT}`, + splitTargets: ['component'], }) await expect(splitResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@split.tsx`, + `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@component.tsx`, + ) + }, + ) + + it.each(filenames)( + 'should handle the "loader" splitting of "%s"', + async (filename) => { + const file = await readFile( + path.resolve(__dirname, `./code-splitter/test-files/${filename}`), + ) + const code = file.toString() + + const splitResult = compileCodeSplitVirtualRoute({ + code: code, + root: './code-splitter/test-files', + filename: `${filename}?${splitPrefixes.ROUTE_LOADER}`, + splitTargets: ['loader'], + }) + + await expect(splitResult.code).toMatchFileSnapshot( + `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@loader.tsx`, ) }, ) diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx index 284e796894..249f67963a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx index 620b059230..be5c0086de 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx @@ -1,5 +1,4 @@ import { Link, Outlet } from '@tanstack/react-router'; -import { fetchPosts } from '../posts'; import { Route } from "arrow-function.tsx"; const SplitComponent = () => { const posts = Route.useLoaderData(); @@ -24,6 +23,4 @@ const SplitComponent = () => { ; }; -export { SplitComponent as component }; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ 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/development/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx index 470bfea7fb..9facefe74e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx index e227fe3b62..43ebf7dade 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx deleted file mode 100644 index 5d248932f2..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { memo } from 'react'; -import { importedLoader } from '../shared/imported'; -function Component() { - return
Component
; -} -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/development/destructuring@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx index 5d8eb0f877..2cb13dc0b8 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx index 7ecd525a8b..544f6ffcbc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx @@ -1,5 +1,4 @@ import { Link, Outlet } from '@tanstack/react-router'; -import { fetchPosts } from '../posts'; import { Route } from "function-declaration.tsx"; const SplitComponent = function PostsComponent() { const posts = Route.useLoaderData(); @@ -24,6 +23,4 @@ const SplitComponent = function PostsComponent() { ; }; -export { SplitComponent as component }; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ 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/development/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx index 643100983a..07c990f459 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx index 5816128ff5..bff9785320 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx deleted file mode 100644 index 36b0a4fd34..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import importedComponent, { importedLoader } from '../shared/imported'; -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/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx index 0afffe7fab..91bbafe612 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx index 1c83cbef17..588310bf6c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx deleted file mode 100644 index 47c62497db..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { importedComponent, importedLoader } from '../shared/imported'; -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/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx index fc048e9ee8..3ba7e085a8 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/inline@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/inline@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx index e81ba56b5b..0c1f9a375a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split-loader'); 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`]; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx similarity index 61% rename from packages/router-plugin/tests/code-splitter/snapshots/development/random-number@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx index 7aaa5496f4..76ed9ff5e0 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx @@ -1,5 +1,3 @@ -import { defer } from '@tanstack/react-router'; -import { getSponsorsForSponsorPack } from '~/server/sponsors'; import discordImage from '~/images/discord-logo-white.svg'; import { sample } from '~/utils/utils'; import { textColors } from "random-number.tsx"; @@ -17,11 +15,4 @@ const SplitComponent = function Index() { {textColor} ; }; -export { SplitComponent as component }; -const SplitLoader = () => { - return { - randomNumber: Math.random(), - sponsorsPromise: defer(getSponsorsForSponsorPack()) - }; -}; -export { SplitLoader as loader }; \ 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/development/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx new file mode 100644 index 0000000000..3dff7886f7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx @@ -0,0 +1,9 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx index ec6e86b561..3f17903ec6 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx deleted file mode 100644 index 2ccf4684ae..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { importedLoader } from '../shared/imported'; -function Component() { - return
Component
; -} -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/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx index 38e4fd6de0..5726053824 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx deleted file mode 100644 index f8e62e3e2b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { importedLoader, importedComponent } from '../shared/imported'; -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/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx index 5e41828800..78d93d4369 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx @@ -1,4 +1,4 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split-loader'); 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/production/retain-exports-const@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx index c6fe8d5b93..9a3a590d86 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split-component'); 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/development/retain-exports-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx index 7814e05ec6..ead266d792 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx index 284e796894..249f67963a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx index 620b059230..be5c0086de 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx @@ -1,5 +1,4 @@ import { Link, Outlet } from '@tanstack/react-router'; -import { fetchPosts } from '../posts'; import { Route } from "arrow-function.tsx"; const SplitComponent = () => { const posts = Route.useLoaderData(); @@ -24,6 +23,4 @@ const SplitComponent = () => {
; }; -export { SplitComponent as component }; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ 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/production/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx index 470bfea7fb..9facefe74e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx index e227fe3b62..43ebf7dade 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx deleted file mode 100644 index 5d248932f2..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { memo } from 'react'; -import { importedLoader } from '../shared/imported'; -function Component() { - return
Component
; -} -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/production/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@component.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@component.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx index 5d8eb0f877..2cb13dc0b8 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx index 7ecd525a8b..544f6ffcbc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx @@ -1,5 +1,4 @@ import { Link, Outlet } from '@tanstack/react-router'; -import { fetchPosts } from '../posts'; import { Route } from "function-declaration.tsx"; const SplitComponent = function PostsComponent() { const posts = Route.useLoaderData(); @@ -24,6 +23,4 @@ const SplitComponent = function PostsComponent() { ; }; -export { SplitComponent as component }; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ 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/production/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx index 643100983a..07c990f459 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx index 5816128ff5..bff9785320 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx deleted file mode 100644 index 36b0a4fd34..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import importedComponent, { importedLoader } from '../shared/imported'; -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/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx index 0afffe7fab..91bbafe612 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx index 1c83cbef17..588310bf6c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx deleted file mode 100644 index 47c62497db..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { importedComponent, importedLoader } from '../shared/imported'; -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/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx index fc048e9ee8..3ba7e085a8 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx index e81ba56b5b..0c1f9a375a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split-loader'); 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`]; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx similarity index 61% rename from packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx index 7aaa5496f4..76ed9ff5e0 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx @@ -1,5 +1,3 @@ -import { defer } from '@tanstack/react-router'; -import { getSponsorsForSponsorPack } from '~/server/sponsors'; import discordImage from '~/images/discord-logo-white.svg'; import { sample } from '~/utils/utils'; import { textColors } from "random-number.tsx"; @@ -17,11 +15,4 @@ const SplitComponent = function Index() { {textColor} ; }; -export { SplitComponent as component }; -const SplitLoader = () => { - return { - randomNumber: Math.random(), - sponsorsPromise: defer(getSponsorsForSponsorPack()) - }; -}; -export { SplitLoader as loader }; \ 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/production/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx new file mode 100644 index 0000000000..3dff7886f7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx @@ -0,0 +1,9 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx index ec6e86b561..3f17903ec6 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@split.tsx deleted file mode 100644 index 2ccf4684ae..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@split.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { importedLoader } from '../shared/imported'; -function Component() { - return
Component
; -} -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/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx index 38e4fd6de0..5726053824 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@split.tsx deleted file mode 100644 index f8e62e3e2b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@split.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { importedLoader, importedComponent } from '../shared/imported'; -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/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx index 5e41828800..78d93d4369 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx @@ -1,4 +1,4 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split-loader'); 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/production/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx index c6fe8d5b93..9a3a590d86 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split-component'); 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/production/retain-exports-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx index 7814e05ec6..ead266d792 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file From 59b0b1233738a6eb52e7fba56f6ce8fa96cd3919 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 00:00:09 +1300 Subject: [PATCH 03/35] chore(router-plugin): add comment explaining why 'intendedSplitNodes' was not used at location --- packages/router-plugin/src/core/code-splitter/compilers.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index e793972ac1..ca9cfd2288 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -381,6 +381,8 @@ export function compileCodeSplitVirtualRoute( if (t.isObjectExpression(options)) { options.properties.forEach((prop) => { if (t.isObjectProperty(prop)) { + // do not use `intendedSplitNodes` here + // since we want to correctly find the nodes in this run through SPLIT_ROUTE_IDENT_NODES.forEach((splitType) => { if ( !t.isIdentifier(prop.key) || From abedfdd968457d0c569892714605f0b6891a389c Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 00:00:52 +1300 Subject: [PATCH 04/35] chore(router-plugin): fix variable spelling --- .../src/core/code-splitter/compilers.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index ca9cfd2288..fc80c09f18 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -37,7 +37,7 @@ type SplitNodeMeta = { exporterIdent: string localExporterIdent: string } -const SPLIT_NOES_CONFIG = new Map([ +const SPLIT_NODES_CONFIG = new Map([ [ 'component', { @@ -61,7 +61,7 @@ const SPLIT_NOES_CONFIG = new Map([ }, ], ]) -const SPLIT_ROUTE_IDENT_NODES = [...SPLIT_NOES_CONFIG.keys()] as const +const SPLIT_ROUTE_IDENT_NODES = [...SPLIT_NODES_CONFIG.keys()] as const function addSplitSearchParamToFilename( filename: string, @@ -130,7 +130,7 @@ export function compileCodeSplitReferenceRoute( if (t.isIdentifier(prop.key)) { const key = prop.key.name // find key in nodeSplitConfig - const isNodeConfigAvailable = SPLIT_NOES_CONFIG.has( + const isNodeConfigAvailable = SPLIT_NODES_CONFIG.has( key as any, ) @@ -138,7 +138,9 @@ export function compileCodeSplitReferenceRoute( return } - const splitNodeMeta = SPLIT_NOES_CONFIG.get(key as any)! + const splitNodeMeta = SPLIT_NODES_CONFIG.get( + key as any, + )! // We need to extract the existing search params from the filename, if any // and add the relevant codesplitPrefix to them, then write them back to the filename @@ -406,7 +408,7 @@ export function compileCodeSplitVirtualRoute( if (isExported && t.isIdentifier(value)) { removeExports(ast, value) } else { - const meta = SPLIT_NOES_CONFIG.get(splitType)! + const meta = SPLIT_NODES_CONFIG.get(splitType)! trackedNodesToSplitByType[splitType] = { node: prop.value, meta, From b82d499e54abb2cb42722f139d8657defb0dacca Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 00:13:24 +1300 Subject: [PATCH 05/35] chore(router-plugin): more notes for future adventurers --- .../router-plugin/src/core/code-splitter/compilers.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index fc80c09f18..94f19237cc 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -61,7 +61,7 @@ const SPLIT_NODES_CONFIG = new Map([ }, ], ]) -const SPLIT_ROUTE_IDENT_NODES = [...SPLIT_NODES_CONFIG.keys()] as const +const KNOWN_SPLIT_ROUTE_IDENTS = [...SPLIT_NODES_CONFIG.keys()] as const function addSplitSearchParamToFilename( filename: string, @@ -357,7 +357,7 @@ export function compileCodeSplitVirtualRoute( loader: undefined, } - // Find the node + // Find and track all the known splittable nodes programPath.traverse( { CallExpression: (path) => { @@ -384,8 +384,9 @@ export function compileCodeSplitVirtualRoute( options.properties.forEach((prop) => { if (t.isObjectProperty(prop)) { // do not use `intendedSplitNodes` here - // since we want to correctly find the nodes in this run through - SPLIT_ROUTE_IDENT_NODES.forEach((splitType) => { + // since we have special considerations that need + // to be accounted for like (not splitting exported identifiers) + KNOWN_SPLIT_ROUTE_IDENTS.forEach((splitType) => { if ( !t.isIdentifier(prop.key) || prop.key.name !== splitType @@ -427,6 +428,7 @@ export function compileCodeSplitVirtualRoute( state, ) + // Start the transformation to only exported the intended split nodes intendedSplitNodes.forEach((SPLIT_TYPE) => { const splitKey = trackedNodesToSplitByType[SPLIT_TYPE] From 449fcd3ecb331e81fb2743453985c2734c534aeb Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 03:38:08 +1300 Subject: [PATCH 06/35] test(router-plugin): update tests for the new changes --- .../snapshots/development/conditional-properties.tsx | 4 ++-- .../development/conditional-properties@component.tsx | 5 +++++ .../snapshots/development/conditional-properties@loader.tsx | 5 +++++ .../snapshots/production/conditional-properties.tsx | 4 ++-- .../production/conditional-properties@component.tsx | 5 +++++ .../snapshots/production/conditional-properties@loader.tsx | 5 +++++ 6 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx index 66e234f08c..83c321ab48 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx new file mode 100644 index 0000000000..e10f305ddc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx index ae8ce80fc6..e6101869b0 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split'); +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split-loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split-component'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx new file mode 100644 index 0000000000..e10f305ddc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; \ No newline at end of file From f8f14f0a37e6df2cf8553de54edbb0c2ff8384db Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 11:43:59 +1300 Subject: [PATCH 07/35] chore(router-plugin): swap positions of functions --- .../src/core/router-code-splitter-plugin.ts | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 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 a00ec128bd..5c89e0c804 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -77,6 +77,27 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< const isProduction = process.env.NODE_ENV === 'production' + const handleCompilingFile = ( + code: string, + id: string, + ): UnpluginTransformResult => { + if (debug) console.info('Compiling Route: ', id) + + const compiledReferenceRoute = compileCodeSplitReferenceRoute({ + code, + root: ROOT, + filename: id, + isProduction, + }) + + if (debug) { + logDiff(code, compiledReferenceRoute.code) + console.log('Output:\n', compiledReferenceRoute.code + '\n\n') + } + + return compiledReferenceRoute + } + const handleSplittingFile = ( code: string, id: string, @@ -109,27 +130,6 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< return result } - const handleCompilingFile = ( - code: string, - id: string, - ): UnpluginTransformResult => { - if (debug) console.info('Compiling Route: ', id) - - const compiledReferenceRoute = compileCodeSplitReferenceRoute({ - code, - root: ROOT, - filename: id, - isProduction, - }) - - if (debug) { - logDiff(code, compiledReferenceRoute.code) - console.log('Output:\n', compiledReferenceRoute.code + '\n\n') - } - - return compiledReferenceRoute - } - return { name: 'router-code-splitter-plugin', enforce: 'pre', From ccf8dbff2738356da7335f1accaf1cc690c50453 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 12:11:16 +1300 Subject: [PATCH 08/35] refactor(router-plugin): prepare for the custom behaviours --- .../src/core/code-splitter/compilers.ts | 3 +-- packages/router-plugin/src/core/config.ts | 20 +++++++++++++++++++ packages/router-plugin/src/core/constants.ts | 9 +++++++++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index cc264df876..671a44a336 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -5,7 +5,7 @@ import { deadCodeElimination } from 'babel-dead-code-elimination' import { generateFromAst, parseAst } from '@tanstack/router-utils' import { splitPrefixes } from '../constants' import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils' -import type { SplitPrefix } from '../constants' +import type { SplitPrefix, SplitRouteIdentNodes } from '../constants' // eslint-disable-next-line unused-imports/no-unused-vars const debug = process.env.TSR_VITE_DEBUG @@ -28,7 +28,6 @@ interface State { splitModulesById: SplitModulesById } -type SplitRouteIdentNodes = 'component' | 'loader' type SplitNodeMeta = { codesplitPrefix: SplitPrefix routeIdent: SplitRouteIdentNodes diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 3fccb42cc8..2247e901ee 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -3,9 +3,29 @@ import { configSchema as generatorConfigSchema, getConfig as getGeneratorConfig, } from '@tanstack/router-generator' +import type { SplitRouteIdentNodes } from './constants' + +type SplitBehaviour = Array> + +const _defaultCodeSplitBehaviour: SplitBehaviour = [['component']] + +export type CodeSplittingOptions = { + /** + * + * @default [["component"]] + */ + defaultBehaviour?: SplitBehaviour +} + +const codeSplittingOptionsSchema = z.object({ + defaultBehaviour: z.array(z.string()).optional(), +}) export const configSchema = generatorConfigSchema.extend({ enableRouteGeneration: z.boolean().optional(), + codeSplittingOptions: z.custom( + codeSplittingOptionsSchema.parse, + ), }) export const getConfig = (inlineConfig: Partial, root: string) => { diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index 8a9bf8c41a..aae8135427 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -4,3 +4,12 @@ export const splitPrefixes = { } as const export type SplitPrefix = (typeof splitPrefixes)[keyof typeof splitPrefixes] + +export const splitRouteIdentNodeMap = { + component: 'component', + loader: 'loader', +} as const +export const splitRouteIdentNodes = [ + ...Object.values(splitRouteIdentNodeMap), +] as const +export type SplitRouteIdentNodes = (typeof splitRouteIdentNodes)[number] From a63a0eb0879482721a77fb329358d56d1447f7ca Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 12:52:24 +1300 Subject: [PATCH 09/35] refactor(router-plugin): move around again --- packages/router-plugin/src/core/config.ts | 8 ++------ packages/router-plugin/src/core/constants.ts | 3 +++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 2247e901ee..a78230c0fb 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -3,18 +3,14 @@ import { configSchema as generatorConfigSchema, getConfig as getGeneratorConfig, } from '@tanstack/router-generator' -import type { SplitRouteIdentNodes } from './constants' - -type SplitBehaviour = Array> - -const _defaultCodeSplitBehaviour: SplitBehaviour = [['component']] +import type { SplitGroupings } from './constants' export type CodeSplittingOptions = { /** * * @default [["component"]] */ - defaultBehaviour?: SplitBehaviour + defaultBehaviour?: SplitGroupings } const codeSplittingOptionsSchema = z.object({ diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index aae8135427..58303f055f 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -13,3 +13,6 @@ export const splitRouteIdentNodes = [ ...Object.values(splitRouteIdentNodeMap), ] as const export type SplitRouteIdentNodes = (typeof splitRouteIdentNodes)[number] +export type SplitGroupings = Array> + +const _defaultCodeSplitGroupings: SplitGroupings = [['component']] From 3c0e466d89c9e5306e9616fde8467de80abfe0e3 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 13:03:01 +1300 Subject: [PATCH 10/35] chore(router-plugin): duh! make the config optional! --- packages/router-plugin/src/core/config.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index a78230c0fb..d032b615cd 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -19,9 +19,9 @@ const codeSplittingOptionsSchema = z.object({ export const configSchema = generatorConfigSchema.extend({ enableRouteGeneration: z.boolean().optional(), - codeSplittingOptions: z.custom( - codeSplittingOptionsSchema.parse, - ), + codeSplittingOptions: z + .custom(codeSplittingOptionsSchema.parse) + .optional(), }) export const getConfig = (inlineConfig: Partial, root: string) => { From 7784ed7e678cffca426d083c60d48d8a18dac12e Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 14:39:29 +1300 Subject: [PATCH 11/35] feat(router-plugin): more validation behaviours for the user input of the split groupings --- packages/router-plugin/src/core/config.ts | 23 +++++++++++++++++++- packages/router-plugin/src/core/constants.ts | 8 +------ 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index d032b615cd..8618d1a34b 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -3,8 +3,29 @@ import { configSchema as generatorConfigSchema, getConfig as getGeneratorConfig, } from '@tanstack/router-generator' +import { splitRouteIdentNodes } from './constants' import type { SplitGroupings } from './constants' +const splitBehaviourSchema = z + .array(z.array(z.enum(splitRouteIdentNodes)), { + message: + "Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + }) + .superRefine((val, ctx) => { + const flattened = val.flat() + const unique = [...new Set(flattened)] + + // Elements must be unique, + // ie. this shouldn't be allows [['component'], ['component', 'loader']] + if (unique.length !== flattened.length) { + ctx.addIssue({ + code: 'custom', + message: + "Split behaviour groupings must be unique and not repeated. i.e. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + }) + } + }) + export type CodeSplittingOptions = { /** * @@ -14,7 +35,7 @@ export type CodeSplittingOptions = { } const codeSplittingOptionsSchema = z.object({ - defaultBehaviour: z.array(z.string()).optional(), + defaultBehaviour: splitBehaviourSchema.optional(), }) export const configSchema = generatorConfigSchema.extend({ diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index 58303f055f..0530577ce3 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -5,13 +5,7 @@ export const splitPrefixes = { export type SplitPrefix = (typeof splitPrefixes)[keyof typeof splitPrefixes] -export const splitRouteIdentNodeMap = { - component: 'component', - loader: 'loader', -} as const -export const splitRouteIdentNodes = [ - ...Object.values(splitRouteIdentNodeMap), -] as const +export const splitRouteIdentNodes = ['component', 'loader'] as const export type SplitRouteIdentNodes = (typeof splitRouteIdentNodes)[number] export type SplitGroupings = Array> From c4717df29a27c299150ef9764f2c536b29be3d57 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:02:36 +1300 Subject: [PATCH 12/35] feat(router-plugin): implementation --- .../src/core/code-splitter/compilers.ts | 65 ++++++++++----- .../src/core/code-splitter/path-ids.ts | 39 +++++++++ packages/router-plugin/src/core/config.ts | 10 +-- packages/router-plugin/src/core/constants.ts | 11 +-- .../src/core/router-code-splitter-plugin.ts | 80 +++++++++++++------ 5 files changed, 144 insertions(+), 61 deletions(-) create mode 100644 packages/router-plugin/src/core/code-splitter/path-ids.ts diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 671a44a336..83e7ef924e 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -3,9 +3,10 @@ import babel from '@babel/core' import * as template from '@babel/template' import { deadCodeElimination } from 'babel-dead-code-elimination' import { generateFromAst, parseAst } from '@tanstack/router-utils' -import { splitPrefixes } from '../constants' +import { tsrSplit } from '../constants' +import { createIdentifier } from './path-ids' import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils' -import type { SplitPrefix, SplitRouteIdentNodes } from '../constants' +import type { CodeSplitGroupings, SplitRouteIdentNodes } from '../constants' // eslint-disable-next-line unused-imports/no-unused-vars const debug = process.env.TSR_VITE_DEBUG @@ -29,7 +30,6 @@ interface State { } type SplitNodeMeta = { - codesplitPrefix: SplitPrefix routeIdent: SplitRouteIdentNodes splitStrategy: 'normal' | 'react-component' localImporterIdent: string @@ -40,7 +40,6 @@ const SPLIT_NODES_CONFIG = new Map([ [ 'component', { - codesplitPrefix: splitPrefixes.ROUTE_COMPONENT, routeIdent: 'component', localImporterIdent: '$$splitComponentImporter', // const $$splitComponentImporter = () => import('...') splitStrategy: 'react-component', @@ -51,7 +50,6 @@ const SPLIT_NODES_CONFIG = new Map([ [ 'loader', { - codesplitPrefix: splitPrefixes.ROUTE_LOADER, routeIdent: 'loader', localImporterIdent: '$$splitLoaderImporter', // const $$splitLoaderImporter = () => import('...') splitStrategy: 'normal', @@ -64,10 +62,14 @@ const KNOWN_SPLIT_ROUTE_IDENTS = [...SPLIT_NODES_CONFIG.keys()] as const function addSplitSearchParamToFilename( filename: string, - splitNode: SplitNodeMeta, + grouping: Array, ) { const [bareFilename] = filename.split('?') - return `${bareFilename}?${splitNode.codesplitPrefix}` + + const params = new URLSearchParams() + params.append(tsrSplit, createIdentifier(grouping)) + + return `${bareFilename}?${params.toString()}` } function removeSplitSearchParamFromFilename(filename: string) { @@ -76,10 +78,19 @@ function removeSplitSearchParamFromFilename(filename: string) { } export function compileCodeSplitReferenceRoute( - opts: ParseAstOptions & { isProduction: boolean }, + opts: ParseAstOptions & { + runtimeEnv: 'dev' | 'prod' + codeSplitGroupings: CodeSplitGroupings + }, ): GeneratorResult { const ast = parseAst(opts) + function findIndexForSplitNode(str: string) { + return opts.codeSplitGroupings.findIndex((group) => + group.includes(str as any), + ) + } + babel.traverse(ast, { Program: { enter(programPath, programState) { @@ -94,8 +105,7 @@ export function compileCodeSplitReferenceRoute( * * `import '../shared/imported'` */ - let existingCompImportPath: string | null = null - let existingLoaderImportPath: string | null = null + const removableImportPaths = new Set([]) programPath.traverse( { @@ -127,6 +137,17 @@ export function compileCodeSplitReferenceRoute( options.properties.forEach((prop) => { if (t.isObjectProperty(prop)) { if (t.isIdentifier(prop.key)) { + // If the user has not specified a split grouping for this key + // then we should not split it + const codeSplitGroupingByKey = findIndexForSplitNode( + prop.key.name, + ) + if (codeSplitGroupingByKey === -1) { + return + } + const codeSplitGroup = + opts.codeSplitGroupings[codeSplitGroupingByKey]! + const key = prop.key.name // find key in nodeSplitConfig const isNodeConfigAvailable = SPLIT_NODES_CONFIG.has( @@ -145,7 +166,7 @@ export function compileCodeSplitReferenceRoute( // and add the relevant codesplitPrefix to them, then write them back to the filename const splitUrl = addSplitSearchParamToFilename( opts.filename, - splitNodeMeta, + codeSplitGroup, ) if (splitNodeMeta.splitStrategy === 'react-component') { @@ -154,11 +175,14 @@ export function compileCodeSplitReferenceRoute( let shouldSplit = true if (t.isIdentifier(value)) { - existingCompImportPath = + const existingImportPath = getImportSpecifierAndPathFromLocalName( programPath, value.name, ).path + if (existingImportPath) { + removableImportPaths.add(existingImportPath) + } // exported identifiers should not be split // since they are already being imported @@ -218,7 +242,7 @@ export function compileCodeSplitReferenceRoute( // If the TSRDummyComponent is not defined, define it if ( - !opts.isProduction && // only in development + opts.runtimeEnv !== 'prod' && // only in development !hasImportedOrDefinedIdentifier('TSRDummyComponent') ) { programPath.pushContainer('body', [ @@ -235,11 +259,14 @@ export function compileCodeSplitReferenceRoute( let shouldSplit = true if (t.isIdentifier(value)) { - existingLoaderImportPath = + const existingImportPath = getImportSpecifierAndPathFromLocalName( programPath, value.name, ).path + if (existingImportPath) { + removableImportPaths.add(existingImportPath) + } // exported identifiers should not be split // since they are already being imported @@ -303,17 +330,11 @@ export function compileCodeSplitReferenceRoute( * from the program, by checking that the import has no * specifiers */ - if ( - (existingCompImportPath as string | null) || - (existingLoaderImportPath as string | null) - ) { + if (removableImportPaths.size > 0) { programPath.traverse({ ImportDeclaration(path) { if (path.node.specifiers.length > 0) return - if ( - path.node.source.value === existingCompImportPath || - path.node.source.value === existingLoaderImportPath - ) { + if (removableImportPaths.has(path.node.source.value)) { path.remove() } }, diff --git a/packages/router-plugin/src/core/code-splitter/path-ids.ts b/packages/router-plugin/src/core/code-splitter/path-ids.ts new file mode 100644 index 0000000000..037345549a --- /dev/null +++ b/packages/router-plugin/src/core/code-splitter/path-ids.ts @@ -0,0 +1,39 @@ +export function createIdentifier(strings: Array): string { + if (strings.length === 0) { + throw new Error('Cannot create an identifier from an empty array') + } + + const sortedStrings = [...strings].sort() + const combinedString = sortedStrings.join('---') // Delimiter + + // Replace unsafe characters + let safeString = combinedString.replace(/\//g, '--slash--') + safeString = safeString.replace(/\\/g, '--backslash--') + safeString = safeString.replace(/\?/g, '--question--') + safeString = safeString.replace(/%/g, '--percent--') + safeString = safeString.replace(/#/g, '--hash--') + safeString = safeString.replace(/\+/g, '--plus--') + safeString = safeString.replace(/=/g, '--equals--') + safeString = safeString.replace(/&/g, '--ampersand--') + safeString = safeString.replace(/\s/g, '_') // Replace spaces with underscores + + return safeString +} + +export function decodeIdentifier(identifier: string): Array { + if (!identifier) { + return [] + } + + let combinedString = identifier.replace(/--slash--/g, '/') + combinedString = combinedString.replace(/--backslash--/g, '\\') + combinedString = combinedString.replace(/--question--/g, '?') + combinedString = combinedString.replace(/--percent--/g, '%') + combinedString = combinedString.replace(/--hash--/g, '#') + combinedString = combinedString.replace(/--plus--/g, '+') + combinedString = combinedString.replace(/--equals--/g, '=') + combinedString = combinedString.replace(/--ampersand--/g, '&') + combinedString = combinedString.replace(/_/g, ' ') // Restore spaces + + return combinedString.split('---') +} diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 8618d1a34b..a22c2fba1a 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -4,9 +4,9 @@ import { getConfig as getGeneratorConfig, } from '@tanstack/router-generator' import { splitRouteIdentNodes } from './constants' -import type { SplitGroupings } from './constants' +import type { CodeSplitGroupings } from './constants' -const splitBehaviourSchema = z +const splitGroupingsSchema = z .array(z.array(z.enum(splitRouteIdentNodes)), { message: "Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", @@ -21,7 +21,7 @@ const splitBehaviourSchema = z ctx.addIssue({ code: 'custom', message: - "Split behaviour groupings must be unique and not repeated. i.e. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + "Split groupings must be unique and not repeated. i.e. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", }) } }) @@ -31,11 +31,11 @@ export type CodeSplittingOptions = { * * @default [["component"]] */ - defaultBehaviour?: SplitGroupings + defaultBehaviour?: CodeSplitGroupings } const codeSplittingOptionsSchema = z.object({ - defaultBehaviour: splitBehaviourSchema.optional(), + defaultGroupings: splitGroupingsSchema.optional(), }) export const configSchema = generatorConfigSchema.extend({ diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index 0530577ce3..3da6a68057 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -1,12 +1,7 @@ -export const splitPrefixes = { - ROUTE_COMPONENT: 'tsr-split-component', - ROUTE_LOADER: 'tsr-split-loader', -} as const - -export type SplitPrefix = (typeof splitPrefixes)[keyof typeof splitPrefixes] +export const tsrSplit = 'tsr-split' export const splitRouteIdentNodes = ['component', 'loader'] as const export type SplitRouteIdentNodes = (typeof splitRouteIdentNodes)[number] -export type SplitGroupings = Array> +export type CodeSplitGroupings = Array> -const _defaultCodeSplitGroupings: SplitGroupings = [['component']] +export const defaultCodeSplitGroupings: CodeSplitGroupings = [['component']] 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 5c89e0c804..c297131a85 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -7,7 +7,8 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' -import { splitPrefixes } from './constants' +import { defaultCodeSplitGroupings, tsrSplit } from './constants' +import type { CodeSplitGroupings } from './constants' import type { Config } from './config' import type { @@ -15,6 +16,7 @@ import type { UnpluginFactory, TransformResult as UnpluginTransformResult, } from 'unplugin' +import { decodeIdentifier } from './code-splitter/path-ids' const debug = process.env.TSR_VITE_DEBUG && @@ -67,8 +69,6 @@ plugins: [ const PLUGIN_NAME = 'unplugin:router-code-splitter' -const splitPrefixesArray = Object.values(splitPrefixes) - export const unpluginRouterCodeSplitterFactory: UnpluginFactory< Partial | undefined > = (options = {}, { framework }) => { @@ -77,17 +77,27 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< const isProduction = process.env.NODE_ENV === 'production' - const handleCompilingFile = ( + const getGlobalCodeSplitGroupings = () => { + return ( + userConfig.codeSplittingOptions?.defaultBehaviour || + defaultCodeSplitGroupings + ) + } + + const handleCompilingReferenceFile = ( code: string, id: string, ): UnpluginTransformResult => { if (debug) console.info('Compiling Route: ', id) + const splitGroupings: CodeSplitGroupings = getGlobalCodeSplitGroupings() + const compiledReferenceRoute = compileCodeSplitReferenceRoute({ code, root: ROOT, filename: id, - isProduction, + runtimeEnv: isProduction ? 'prod' : 'dev', + codeSplitGroupings: splitGroupings, }) if (debug) { @@ -98,30 +108,48 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< return compiledReferenceRoute } - const handleSplittingFile = ( + const handleCompilingVirtualFile = ( code: string, id: string, ): UnpluginTransformResult => { if (debug) console.info('Splitting Route: ', id) - let result: UnpluginTransformResult = { code: 'empty' } - - if (id.includes(splitPrefixes.ROUTE_COMPONENT)) { - result = compileCodeSplitVirtualRoute({ - code, - root: ROOT, - filename: id, - splitTargets: ['component'], - }) - } else if (id.includes(splitPrefixes.ROUTE_LOADER)) { - result = compileCodeSplitVirtualRoute({ - code, - root: ROOT, - filename: id, - splitTargets: ['loader'], - }) + const [_, ...urlParts] = id.split('?') + const searchParams = new URLSearchParams(urlParts.join('?')) + const splitValue = searchParams.get(tsrSplit) + + if (!splitValue) { + throw new Error( + `The split value for the virtual route "${id}" was not found.`, + ) } + const grouping = decodeIdentifier(splitValue) + + const result = compileCodeSplitVirtualRoute({ + code, + root: ROOT, + filename: id, + // TODO: Solve this typing issue + splitTargets: grouping as any, + }) + + // if (id.includes(splitPrefixes.ROUTE_COMPONENT)) { + // result = compileCodeSplitVirtualRoute({ + // code, + // root: ROOT, + // filename: id, + // splitTargets: ['component'], + // }) + // } else if (id.includes(splitPrefixes.ROUTE_LOADER)) { + // result = compileCodeSplitVirtualRoute({ + // code, + // root: ROOT, + // filename: id, + // splitTargets: ['loader'], + // }) + // } + if (debug) { logDiff(code, result.code) console.log('Output:\n', result.code + '\n\n') @@ -143,8 +171,8 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< url.searchParams.delete('v') id = fileURLToPath(url).replace(/\\/g, '/') - if (splitPrefixesArray.some((prefix) => id.includes(prefix))) { - return handleSplittingFile(code, id) + if (id.includes(tsrSplit)) { + return handleCompilingVirtualFile(code, id) } else if ( fileIsInRoutesDirectory(id, userConfig.routesDirectory) && (code.includes('createRoute(') || code.includes('createFileRoute(')) @@ -159,7 +187,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< } } - return handleCompilingFile(code, id) + return handleCompilingReferenceFile(code, id) } return null @@ -172,7 +200,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< if ( fileIsInRoutesDirectory(id, userConfig.routesDirectory) || - splitPrefixesArray.some((prefix) => id.includes(prefix)) + id.includes(tsrSplit) ) { return true } From 9d1ea1c7699eb5e47f19749ca063c7735ebc66ae Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:02:52 +1300 Subject: [PATCH 13/35] test(router-plugin): snapshots --- .../router-plugin/tests/code-splitter.test.ts | 221 +++++-- .../1-default/development/arrow-function.tsx | 11 + .../development/arrow-function@component.tsx | 26 + .../1-default/development/chinese.tsx | 12 + .../development/chinese@component.tsx | 22 + .../development/conditional-properties.tsx | 13 + .../conditional-properties@component.tsx | 5 + ...ructured-react-memo-imported-component.tsx | 11 + ...eact-memo-imported-component@component.tsx | 6 + .../1-default/development/destructuring.tsx | 11 + .../development/destructuring@component.tsx | 11 + .../development/function-as-parameter.tsx | 19 + .../function-as-parameter@component.tsx | 19 + .../development/function-declaration.tsx | 11 + .../function-declaration@component.tsx | 26 + .../1-default/development/importAttribute.tsx | 9 + .../development/importAttribute@component.tsx | 3 + ...-default-component-destructured-loader.tsx | 11 + ...omponent-destructured-loader@component.tsx | 3 + .../imported-default-component.tsx | 9 + .../imported-default-component@component.tsx | 3 + .../1-default/development/imported.tsx | 11 + .../development/imported@component.tsx | 3 + .../1-default/development/inline.tsx | 11 + .../development/inline@component.tsx | 18 + .../1-default/development/random-number.tsx | 18 + .../development/random-number@component.tsx | 18 + .../development/react-memo-component.tsx | 11 + .../react-memo-component@component.tsx | 6 + .../react-memo-imported-component.tsx | 11 + ...eact-memo-imported-component@component.tsx | 4 + .../development/retain-export-component.tsx | 25 + .../retain-export-component@component.tsx | 0 .../development/retain-exports-const.tsx | 30 + .../retain-exports-const@component.tsx | 0 .../development/retain-exports-function.tsx | 30 + .../retain-exports-function@component.tsx | 0 .../development/retain-exports-loader.tsx | 17 + .../retain-exports-loader@component.tsx | 21 + .../development/useStateDestructure.tsx | 15 + .../useStateDestructure@component.tsx | 605 ++++++++++++++++++ .../1-default/production/arrow-function.tsx | 8 + .../production/arrow-function@component.tsx | 26 + .../1-default/production/chinese.tsx | 9 + .../production/chinese@component.tsx | 22 + .../production/conditional-properties.tsx | 10 + .../conditional-properties@component.tsx | 5 + ...ructured-react-memo-imported-component.tsx | 8 + ...eact-memo-imported-component@component.tsx | 6 + .../1-default/production/destructuring.tsx | 11 + .../production/destructuring@component.tsx | 11 + .../production/function-as-parameter.tsx | 19 + .../function-as-parameter@component.tsx | 19 + .../production/function-declaration.tsx | 8 + .../function-declaration@component.tsx | 26 + .../1-default/production/importAttribute.tsx | 6 + .../production/importAttribute@component.tsx | 3 + ...-default-component-destructured-loader.tsx | 8 + ...omponent-destructured-loader@component.tsx | 3 + .../production/imported-default-component.tsx | 6 + .../imported-default-component@component.tsx | 3 + .../1-default/production/imported.tsx | 8 + .../production/imported@component.tsx | 3 + .../snapshots/1-default/production/inline.tsx | 8 + .../1-default/production/inline@component.tsx | 18 + .../1-default/production/random-number.tsx | 15 + .../production/random-number@component.tsx | 18 + .../production/react-memo-component.tsx | 8 + .../react-memo-component@component.tsx | 6 + .../react-memo-imported-component.tsx | 8 + ...eact-memo-imported-component@component.tsx | 4 + .../production/retain-export-component.tsx | 25 + .../retain-export-component@component.tsx | 0 .../production/retain-exports-const.tsx | 30 + .../retain-exports-const@component.tsx | 0 .../production/retain-exports-function.tsx | 30 + .../retain-exports-function@component.tsx | 0 .../production/retain-exports-loader.tsx | 14 + .../retain-exports-loader@component.tsx | 21 + .../production/useStateDestructure.tsx | 12 + .../useStateDestructure@component.tsx | 605 ++++++++++++++++++ .../development/arrow-function.tsx | 12 + .../development/arrow-function@component.tsx | 26 + .../development/arrow-function@loader.tsx | 3 + .../2-separated/development/chinese.tsx | 12 + .../development/chinese@component.tsx | 22 + .../development/chinese@loader.tsx | 3 + .../development/conditional-properties.tsx | 12 + .../conditional-properties@component.tsx | 5 + .../conditional-properties@loader.tsx | 5 + ...ructured-react-memo-imported-component.tsx | 12 + ...eact-memo-imported-component@component.tsx | 6 + ...d-react-memo-imported-component@loader.tsx | 3 + .../2-separated/development/destructuring.tsx | 11 + .../development/destructuring@component.tsx | 11 + .../development/destructuring@loader.tsx | 11 + .../development/function-as-parameter.tsx | 19 + .../function-as-parameter@component.tsx | 19 + .../function-as-parameter@loader.tsx | 19 + .../development/function-declaration.tsx | 12 + .../function-declaration@component.tsx | 26 + .../function-declaration@loader.tsx | 3 + .../development/importAttribute.tsx | 9 + .../development/importAttribute@component.tsx | 3 + .../development/importAttribute@loader.tsx | 0 ...-default-component-destructured-loader.tsx | 12 + ...omponent-destructured-loader@component.tsx | 3 + ...t-component-destructured-loader@loader.tsx | 3 + .../imported-default-component.tsx | 9 + .../imported-default-component@component.tsx | 3 + .../imported-default-component@loader.tsx | 0 .../2-separated/development/imported.tsx | 12 + .../development/imported@component.tsx | 3 + .../development/imported@loader.tsx | 3 + .../2-separated/development/inline.tsx | 11 + .../development/inline@component.tsx | 18 + .../2-separated/development/inline@loader.tsx | 2 + .../2-separated/development/random-number.tsx | 14 + .../development/random-number@component.tsx | 18 + .../development/random-number@loader.tsx | 9 + .../development/react-memo-component.tsx | 12 + .../react-memo-component@component.tsx | 6 + .../react-memo-component@loader.tsx | 3 + .../react-memo-imported-component.tsx | 12 + ...eact-memo-imported-component@component.tsx | 4 + .../react-memo-imported-component@loader.tsx | 3 + .../development/retain-export-component.tsx | 27 + .../retain-export-component@component.tsx | 0 .../retain-export-component@loader.tsx | 3 + .../development/retain-exports-const.tsx | 30 + .../retain-exports-const@component.tsx | 0 .../retain-exports-const@loader.tsx | 0 .../development/retain-exports-function.tsx | 30 + .../retain-exports-function@component.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../development/retain-exports-loader.tsx | 17 + .../retain-exports-loader@component.tsx | 21 + .../retain-exports-loader@loader.tsx | 0 .../development/useStateDestructure.tsx | 15 + .../useStateDestructure@component.tsx | 605 ++++++++++++++++++ .../useStateDestructure@loader.tsx | 444 +++++++++++++ .../2-separated/production/arrow-function.tsx | 9 + .../production/arrow-function@component.tsx | 26 + .../production/arrow-function@loader.tsx | 3 + .../2-separated/production/chinese.tsx | 9 + .../production/chinese@component.tsx | 22 + .../2-separated/production/chinese@loader.tsx | 3 + .../production/conditional-properties.tsx | 9 + .../conditional-properties@component.tsx | 5 + .../conditional-properties@loader.tsx | 5 + ...ructured-react-memo-imported-component.tsx | 9 + ...eact-memo-imported-component@component.tsx | 6 + ...d-react-memo-imported-component@loader.tsx | 3 + .../2-separated/production/destructuring.tsx | 11 + .../production/destructuring@component.tsx | 11 + .../production/destructuring@loader.tsx | 11 + .../production/function-as-parameter.tsx | 19 + .../function-as-parameter@component.tsx | 19 + .../function-as-parameter@loader.tsx | 19 + .../production/function-declaration.tsx | 9 + .../function-declaration@component.tsx | 26 + .../function-declaration@loader.tsx | 3 + .../production/importAttribute.tsx | 6 + .../production/importAttribute@component.tsx | 3 + .../production/importAttribute@loader.tsx | 0 ...-default-component-destructured-loader.tsx | 9 + ...omponent-destructured-loader@component.tsx | 3 + ...t-component-destructured-loader@loader.tsx | 3 + .../production/imported-default-component.tsx | 6 + .../imported-default-component@component.tsx | 3 + .../imported-default-component@loader.tsx | 0 .../2-separated/production/imported.tsx | 9 + .../production/imported@component.tsx | 3 + .../production/imported@loader.tsx | 3 + .../2-separated/production/inline.tsx | 8 + .../production/inline@component.tsx | 18 + .../2-separated/production/inline@loader.tsx | 2 + .../2-separated/production/random-number.tsx | 11 + .../production/random-number@component.tsx | 18 + .../production/random-number@loader.tsx | 9 + .../production/react-memo-component.tsx | 9 + .../react-memo-component@component.tsx | 6 + .../react-memo-component@loader.tsx | 3 + .../react-memo-imported-component.tsx | 9 + ...eact-memo-imported-component@component.tsx | 4 + .../react-memo-imported-component@loader.tsx | 3 + .../production/retain-export-component.tsx | 27 + .../retain-export-component@component.tsx | 0 .../retain-export-component@loader.tsx | 3 + .../production/retain-exports-const.tsx | 30 + .../retain-exports-const@component.tsx | 0 .../retain-exports-const@loader.tsx | 0 .../production/retain-exports-function.tsx | 30 + .../retain-exports-function@component.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../production/retain-exports-loader.tsx | 14 + .../retain-exports-loader@component.tsx | 21 + .../retain-exports-loader@loader.tsx | 0 .../production/useStateDestructure.tsx | 12 + .../useStateDestructure@component.tsx | 605 ++++++++++++++++++ .../production/useStateDestructure@loader.tsx | 444 +++++++++++++ .../3-mixed/development/arrow-function.tsx | 12 + .../arrow-function@component---loader.tsx | 29 + .../snapshots/3-mixed/development/chinese.tsx | 12 + .../chinese@component---loader.tsx | 22 + .../development/conditional-properties.tsx | 12 + ...ditional-properties@component---loader.tsx | 7 + ...ructured-react-memo-imported-component.tsx | 12 + ...-imported-component@component---loader.tsx | 9 + .../3-mixed/development/destructuring.tsx | 11 + .../destructuring@component---loader.tsx | 11 + .../development/function-as-parameter.tsx | 19 + ...nction-as-parameter@component---loader.tsx | 19 + .../development/function-declaration.tsx | 12 + ...unction-declaration@component---loader.tsx | 29 + .../3-mixed/development/importAttribute.tsx | 9 + .../importAttribute@component---loader.tsx | 3 + ...-default-component-destructured-loader.tsx | 12 + ...destructured-loader@component---loader.tsx | 5 + .../imported-default-component.tsx | 9 + ...d-default-component@component---loader.tsx | 3 + .../3-mixed/development/imported.tsx | 12 + .../imported@component---loader.tsx | 5 + .../snapshots/3-mixed/development/inline.tsx | 11 + .../development/inline@component---loader.tsx | 18 + .../3-mixed/development/random-number.tsx | 14 + .../random-number@component---loader.tsx | 27 + .../development/react-memo-component.tsx | 12 + ...eact-memo-component@component---loader.tsx | 9 + .../react-memo-imported-component.tsx | 12 + ...-imported-component@component---loader.tsx | 6 + .../development/retain-export-component.tsx | 27 + ...in-export-component@component---loader.tsx | 3 + .../development/retain-exports-const.tsx | 30 + ...etain-exports-const@component---loader.tsx | 0 .../development/retain-exports-function.tsx | 30 + ...in-exports-function@component---loader.tsx | 0 .../development/retain-exports-loader.tsx | 17 + ...tain-exports-loader@component---loader.tsx | 21 + .../development/useStateDestructure.tsx | 15 + ...useStateDestructure@component---loader.tsx | 605 ++++++++++++++++++ .../3-mixed/production/arrow-function.tsx | 9 + .../arrow-function@component---loader.tsx | 29 + .../snapshots/3-mixed/production/chinese.tsx | 9 + .../production/chinese@component---loader.tsx | 22 + .../production/conditional-properties.tsx | 9 + ...ditional-properties@component---loader.tsx | 7 + ...ructured-react-memo-imported-component.tsx | 9 + ...-imported-component@component---loader.tsx | 9 + .../3-mixed/production/destructuring.tsx | 11 + .../destructuring@component---loader.tsx | 11 + .../production/function-as-parameter.tsx | 19 + ...nction-as-parameter@component---loader.tsx | 19 + .../production/function-declaration.tsx | 9 + ...unction-declaration@component---loader.tsx | 29 + .../3-mixed/production/importAttribute.tsx | 6 + .../importAttribute@component---loader.tsx | 3 + ...-default-component-destructured-loader.tsx | 9 + ...destructured-loader@component---loader.tsx | 5 + .../production/imported-default-component.tsx | 6 + ...d-default-component@component---loader.tsx | 3 + .../snapshots/3-mixed/production/imported.tsx | 9 + .../imported@component---loader.tsx | 5 + .../snapshots/3-mixed/production/inline.tsx | 8 + .../production/inline@component---loader.tsx | 18 + .../3-mixed/production/random-number.tsx | 11 + .../random-number@component---loader.tsx | 27 + .../production/react-memo-component.tsx | 9 + ...eact-memo-component@component---loader.tsx | 9 + .../react-memo-imported-component.tsx | 9 + ...-imported-component@component---loader.tsx | 6 + .../production/retain-export-component.tsx | 27 + ...in-export-component@component---loader.tsx | 3 + .../production/retain-exports-const.tsx | 30 + ...etain-exports-const@component---loader.tsx | 0 .../production/retain-exports-function.tsx | 30 + ...in-exports-function@component---loader.tsx | 0 .../production/retain-exports-loader.tsx | 14 + ...tain-exports-loader@component---loader.tsx | 21 + .../production/useStateDestructure.tsx | 12 + ...useStateDestructure@component---loader.tsx | 605 ++++++++++++++++++ 281 files changed, 7700 insertions(+), 70 deletions(-) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader@component---loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 4d83fbe9d1..e29fe5aa60 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -6,79 +6,160 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from '../src/core/code-splitter/compilers' -import { splitPrefixes } from '../src/core/constants' +import { createIdentifier } from '../src/core/code-splitter/path-ids' +import { defaultCodeSplitGroupings } from '../src/core/constants' +import type { CodeSplitGroupings } from '../src/core/constants' async function getFilenames() { return await readdir(path.resolve(__dirname, './code-splitter/test-files')) } -describe.each(['development', 'production'])( - 'code-splitter works, NODE_ENV=%s ', - async (NODE_ENV) => { - process.env.NODE_ENV = NODE_ENV - const filenames = await getFilenames() - - it.each(filenames)( - 'should handle the "reference" compiling of "%s"', - async (filename) => { - const file = await readFile( - path.resolve(__dirname, `./code-splitter/test-files/${filename}`), - ) - const code = file.toString() - - const compileResult = compileCodeSplitReferenceRoute({ - code, - root: './code-splitter/test-files', - filename, - isProduction: NODE_ENV === 'production', - }) - - await expect(compileResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${NODE_ENV}/${filename}`, - ) - }, - ) - - it.each(filenames)( - 'should handle the "component" splitting of "%s"', - async (filename) => { - const file = await readFile( - path.resolve(__dirname, `./code-splitter/test-files/${filename}`), - ) - const code = file.toString() - - const splitResult = compileCodeSplitVirtualRoute({ - code: code, - root: './code-splitter/test-files', - filename: `${filename}?${splitPrefixes.ROUTE_COMPONENT}`, - splitTargets: ['component'], - }) - - await expect(splitResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@component.tsx`, - ) - }, - ) - - it.each(filenames)( - 'should handle the "loader" splitting of "%s"', - async (filename) => { - const file = await readFile( - path.resolve(__dirname, `./code-splitter/test-files/${filename}`), - ) - const code = file.toString() - - const splitResult = compileCodeSplitVirtualRoute({ - code: code, - root: './code-splitter/test-files', - filename: `${filename}?${splitPrefixes.ROUTE_LOADER}`, - splitTargets: ['loader'], - }) - - await expect(splitResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@loader.tsx`, - ) - }, - ) +const testGroups = [ + { + name: '1-default', + groupings: defaultCodeSplitGroupings, }, -) + { + name: '2-separated', + groupings: [['loader'], ['component']], + }, + { + name: '3-mixed', + groupings: [['loader', 'component']], + }, +] as Array<{ name: string; groupings: CodeSplitGroupings }> + +describe('code-splitter works', () => { + describe.each(testGroups)( + 'SPLIT_GROUP=$name', + async ({ groupings: grouping, name: groupName }) => { + const filenames = await getFilenames() + + describe.each(['development', 'production'])( + 'NODE_ENV=%s ', + (NODE_ENV) => { + process.env.NODE_ENV = NODE_ENV + + it.each(filenames)( + `should compile "reference" for "%s"`, + async (filename) => { + const file = await readFile( + path.resolve( + __dirname, + `./code-splitter/test-files/${filename}`, + ), + ) + const code = file.toString() + + const compileResult = compileCodeSplitReferenceRoute({ + code, + root: './code-splitter/test-files', + filename, + runtimeEnv: NODE_ENV === 'production' ? 'prod' : 'dev', + codeSplitGroupings: grouping, + }) + + await expect(compileResult.code).toMatchFileSnapshot( + `./code-splitter/snapshots/${groupName}/${NODE_ENV}/${filename}`, + ) + }, + ) + + it.each(filenames)( + `should compile "virtual" for "%s"`, + async (filename) => { + const file = await readFile( + path.resolve( + __dirname, + `./code-splitter/test-files/${filename}`, + ), + ) + const code = file.toString() + + for (const targets of grouping) { + const ident = createIdentifier(targets) + + const splitResult = compileCodeSplitVirtualRoute({ + code, + root: './code-splitter/test-files', + filename: `${filename}?${ident}`, + splitTargets: targets, + }) + + await expect(splitResult.code).toMatchFileSnapshot( + `./code-splitter/snapshots/${groupName}/${NODE_ENV}/${filename.replace( + '.tsx', + '', + )}@${ident}.tsx`, + ) + } + }, + ) + }, + ) + }, + ) +}) + +// it.each(filenames)( +// 'should handle the "reference" compiling of "%s"', +// async (filename) => { +// const file = await readFile( +// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), +// ) +// const code = file.toString() + +// const compileResult = compileCodeSplitReferenceRoute({ +// code, +// root: './code-splitter/test-files', +// filename, +// isProduction: NODE_ENV === 'production', +// }) + +// await expect(compileResult.code).toMatchFileSnapshot( +// `./code-splitter/snapshots/${NODE_ENV}/${filename}`, +// ) +// }, +// ) + +// it.each(filenames)( +// 'should handle the "component" splitting of "%s"', +// async (filename) => { +// const file = await readFile( +// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), +// ) +// const code = file.toString() + +// const splitResult = compileCodeSplitVirtualRoute({ +// code: code, +// root: './code-splitter/test-files', +// filename: `${filename}?${splitPrefixes.ROUTE_COMPONENT}`, +// splitTargets: ['component'], +// }) + +// await expect(splitResult.code).toMatchFileSnapshot( +// `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@component.tsx`, +// ) +// }, +// ) + +// it.each(filenames)( +// 'should handle the "loader" splitting of "%s"', +// async (filename) => { +// const file = await readFile( +// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), +// ) +// const code = file.toString() + +// const splitResult = compileCodeSplitVirtualRoute({ +// code: code, +// root: './code-splitter/test-files', +// filename: `${filename}?${splitPrefixes.ROUTE_LOADER}`, +// splitTargets: ['loader'], +// }) + +// await expect(splitResult.code).toMatchFileSnapshot( +// `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@loader.tsx`, +// ) +// }, +// ) diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function.tsx new file mode 100644 index 0000000000..ed12a9b49e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +export const Route = createFileRoute('/posts')({ + loader: fetchPosts, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@component.tsx new file mode 100644 index 0000000000..be5c0086de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "arrow-function.tsx"; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese.tsx new file mode 100644 index 0000000000..9bf9da7298 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@component.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@component.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties.tsx new file mode 100644 index 0000000000..26de4ca825 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties.tsx @@ -0,0 +1,13 @@ +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: isEnabled ? TrueImport.loader : falseLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..500078adc8 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@component.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@component.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@component.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@component.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration.tsx new file mode 100644 index 0000000000..92a3bf04dd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +export const Route = createFileRoute('/posts')({ + loader: fetchPosts, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@component.tsx new file mode 100644 index 0000000000..544f6ffcbc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "function-declaration.tsx"; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute.tsx new file mode 100644 index 0000000000..8a221122d7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@component.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@component.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..2617767d26 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component.tsx new file mode 100644 index 0000000000..968e6633d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported.tsx new file mode 100644 index 0000000000..9e843466e2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline.tsx new file mode 100644 index 0000000000..3d4163335f --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@component.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@component.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number.tsx new file mode 100644 index 0000000000..f95c3f5dfe --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number.tsx @@ -0,0 +1,18 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute, defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +export const textColors = [`text-rose-500`, `text-yellow-500`, `text-teal-500`, `text-blue-500`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; + }, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@component.tsx new file mode 100644 index 0000000000..76ed9ff5e0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@component.tsx @@ -0,0 +1,18 @@ +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component.tsx new file mode 100644 index 0000000000..cab16f8c71 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component.tsx new file mode 100644 index 0000000000..0c7d4f0cbb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component.tsx new file mode 100644 index 0000000000..0446cde9bb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component.tsx @@ -0,0 +1,25 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: importedLoader +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader.tsx new file mode 100644 index 0000000000..17a52407a1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader.tsx @@ -0,0 +1,17 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@component.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@component.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure.tsx new file mode 100644 index 0000000000..d3a8cb93a1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure.tsx @@ -0,0 +1,15 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@component.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@component.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function.tsx new file mode 100644 index 0000000000..6b2e1dcace --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +export const Route = createFileRoute('/posts')({ + loader: fetchPosts, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@component.tsx new file mode 100644 index 0000000000..be5c0086de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "arrow-function.tsx"; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese.tsx new file mode 100644 index 0000000000..fa348ee8d5 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@component.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@component.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties.tsx new file mode 100644 index 0000000000..efec873519 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties.tsx @@ -0,0 +1,10 @@ +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: isEnabled ? TrueImport.loader : falseLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..7c7eb4d911 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@component.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@component.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@component.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@component.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration.tsx new file mode 100644 index 0000000000..21900709e4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +export const Route = createFileRoute('/posts')({ + loader: fetchPosts, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@component.tsx new file mode 100644 index 0000000000..544f6ffcbc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "function-declaration.tsx"; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute.tsx new file mode 100644 index 0000000000..d4283ffced --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@component.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@component.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..f2935c4ec6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component.tsx new file mode 100644 index 0000000000..65202cff33 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported.tsx new file mode 100644 index 0000000000..c921da7a08 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline.tsx new file mode 100644 index 0000000000..0df06d99cd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@component.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@component.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number.tsx new file mode 100644 index 0000000000..1d6cae8c03 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number.tsx @@ -0,0 +1,15 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute, defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +export const textColors = [`text-rose-500`, `text-yellow-500`, `text-teal-500`, `text-blue-500`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; + }, + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@component.tsx new file mode 100644 index 0000000000..76ed9ff5e0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@component.tsx @@ -0,0 +1,18 @@ +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component.tsx new file mode 100644 index 0000000000..f012eb1d88 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component.tsx new file mode 100644 index 0000000000..6c55a9e5e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +import { importedLoader } from '../shared/imported'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: importedLoader +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component.tsx new file mode 100644 index 0000000000..0446cde9bb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component.tsx @@ -0,0 +1,25 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: importedLoader +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader.tsx new file mode 100644 index 0000000000..f9000ca496 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@component.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@component.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure.tsx new file mode 100644 index 0000000000..2d4e7962bd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@component.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@component.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx new file mode 100644 index 0000000000..17421168f3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=loader'); +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', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx new file mode 100644 index 0000000000..be5c0086de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "arrow-function.tsx"; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx new file mode 100644 index 0000000000..9bf9da7298 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx new file mode 100644 index 0000000000..a273adebd8 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx new file mode 100644 index 0000000000..e10f305ddc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..12bab7e278 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx new file mode 100644 index 0000000000..c3d5f02ff8 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=loader'); +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', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx new file mode 100644 index 0000000000..544f6ffcbc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "function-declaration.tsx"; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx new file mode 100644 index 0000000000..8a221122d7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..41baa16104 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx new file mode 100644 index 0000000000..968e6633d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx new file mode 100644 index 0000000000..e0c05e815e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx new file mode 100644 index 0000000000..3d4163335f --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx new file mode 100644 index 0000000000..4ee2015806 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=loader'); +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`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx new file mode 100644 index 0000000000..76ed9ff5e0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx @@ -0,0 +1,18 @@ +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx new file mode 100644 index 0000000000..3dff7886f7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx @@ -0,0 +1,9 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx new file mode 100644 index 0000000000..3775fd368c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx new file mode 100644 index 0000000000..fda2daef65 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx new file mode 100644 index 0000000000..fd6c6de54c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx @@ -0,0 +1,27 @@ +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx new file mode 100644 index 0000000000..17a52407a1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx @@ -0,0 +1,17 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@component.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@component.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx new file mode 100644 index 0000000000..d3a8cb93a1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx @@ -0,0 +1,15 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx new file mode 100644 index 0000000000..3dc82be7f6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=loader'); +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', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx new file mode 100644 index 0000000000..be5c0086de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "arrow-function.tsx"; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx new file mode 100644 index 0000000000..fa348ee8d5 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx new file mode 100644 index 0000000000..6460e38a9a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx new file mode 100644 index 0000000000..aaf3410c69 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent } from '@modules/false-component'; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx new file mode 100644 index 0000000000..e10f305ddc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx @@ -0,0 +1,5 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..0e0f4a3f5c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..446d55e26b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx @@ -0,0 +1,6 @@ +import { memo } from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx new file mode 100644 index 0000000000..4b496d7359 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=loader'); +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', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx new file mode 100644 index 0000000000..544f6ffcbc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx @@ -0,0 +1,26 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { Route } from "function-declaration.tsx"; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx new file mode 100644 index 0000000000..d9ed4ea7af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx @@ -0,0 +1,3 @@ +import { fetchPosts } from '../posts'; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx new file mode 100644 index 0000000000..d4283ffced --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..98baf76978 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx new file mode 100644 index 0000000000..e9cae51951 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx @@ -0,0 +1,3 @@ +import importedComponent from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx new file mode 100644 index 0000000000..65202cff33 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx new file mode 100644 index 0000000000..42726b514a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx new file mode 100644 index 0000000000..85355cf3a2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx @@ -0,0 +1,3 @@ +import { importedComponent } from '../shared/imported'; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx new file mode 100644 index 0000000000..0df06d99cd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx new file mode 100644 index 0000000000..e7210028d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=loader'); +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`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx new file mode 100644 index 0000000000..76ed9ff5e0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx @@ -0,0 +1,18 @@ +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx new file mode 100644 index 0000000000..3dff7886f7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx @@ -0,0 +1,9 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx new file mode 100644 index 0000000000..eac7d8dde9 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx new file mode 100644 index 0000000000..dfef29c9e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +function Component() { + return
Component
; +} +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx new file mode 100644 index 0000000000..32b23c519c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx new file mode 100644 index 0000000000..5a6456643b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { importedComponent } from '../shared/imported'; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx new file mode 100644 index 0000000000..fd6c6de54c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx @@ -0,0 +1,27 @@ +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=loader'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@component.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx new file mode 100644 index 0000000000..f9000ca496 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@component.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@component.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx new file mode 100644 index 0000000000..2d4e7962bd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx new file mode 100644 index 0000000000..9ebc84c292 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); +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', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx new file mode 100644 index 0000000000..7dd37cda89 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "arrow-function.tsx"; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx new file mode 100644 index 0000000000..4f7287d9e7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx new file mode 100644 index 0000000000..92953a8d73 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx new file mode 100644 index 0000000000..857b130de7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx @@ -0,0 +1,7 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent, falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..4f61756448 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx new file mode 100644 index 0000000000..b6748bb51b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx @@ -0,0 +1,9 @@ +import { memo } from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx new file mode 100644 index 0000000000..65a721d8d3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +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', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx new file mode 100644 index 0000000000..6eadf0e795 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "function-declaration.tsx"; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx new file mode 100644 index 0000000000..143213424d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..97ea93c487 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx new file mode 100644 index 0000000000..7ca09fd5d7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx @@ -0,0 +1,5 @@ +import importedComponent, { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx new file mode 100644 index 0000000000..c6f26f9073 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx new file mode 100644 index 0000000000..c689d65863 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx new file mode 100644 index 0000000000..d7310c1c94 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx @@ -0,0 +1,5 @@ +import { importedComponent, importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx new file mode 100644 index 0000000000..a4e404abc0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx new file mode 100644 index 0000000000..4846391189 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader'); +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`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx new file mode 100644 index 0000000000..1faa5012de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx @@ -0,0 +1,27 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx new file mode 100644 index 0000000000..dc6302c229 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx new file mode 100644 index 0000000000..8831513c0e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx new file mode 100644 index 0000000000..62bdfc7fe3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx @@ -0,0 +1,12 @@ +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx new file mode 100644 index 0000000000..b979ac5fa4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { importedLoader, importedComponent } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx new file mode 100644 index 0000000000..062f12705d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx @@ -0,0 +1,27 @@ +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component@component---loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component@component---loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const@component---loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function@component---loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx new file mode 100644 index 0000000000..8b58ea42de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx @@ -0,0 +1,17 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader@component---loader.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader@component---loader.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx new file mode 100644 index 0000000000..21827b08a3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx @@ -0,0 +1,15 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx new file mode 100644 index 0000000000..9fbe97111c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); +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', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx new file mode 100644 index 0000000000..7dd37cda89 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "arrow-function.tsx"; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; +const SplitComponent = () => { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx new file mode 100644 index 0000000000..1a973d7242 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx new file mode 100644 index 0000000000..6e6df2f4eb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const SplitComponent = function HomeComponent() { + return
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx new file mode 100644 index 0000000000..b16b32587c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx new file mode 100644 index 0000000000..857b130de7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx @@ -0,0 +1,7 @@ +import { isEnabled } from '@features/feature-flags'; +import TrueImport from '@modules/true-component'; +import { FalseComponent, falseLoader } from '@modules/false-component'; +const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; +export { SplitLoader as loader }; +const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx new file mode 100644 index 0000000000..2146af3018 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx new file mode 100644 index 0000000000..b6748bb51b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx @@ -0,0 +1,9 @@ +import { memo } from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx new file mode 100644 index 0000000000..11b059af9f --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +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', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx new file mode 100644 index 0000000000..6eadf0e795 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "function-declaration.tsx"; +const SplitLoader = fetchPosts; +export { SplitLoader as loader }; +const SplitComponent = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+
    + {[...posts, { + id: 'i-do-not-exist', + title: 'Non-existent Post' + }]?.map(post => { + return
  • + +
    {post.title.substring(0, 20)}
    + +
    • ; + })} +
+
+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx new file mode 100644 index 0000000000..db0611d8f2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx new file mode 100644 index 0000000000..f34d3c6408 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx @@ -0,0 +1,3 @@ +import { test } from './test' with { type: 'macro' }; +const SplitComponent = () => test; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx new file mode 100644 index 0000000000..8951bf0526 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx new file mode 100644 index 0000000000..7ca09fd5d7 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx @@ -0,0 +1,5 @@ +import importedComponent, { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx new file mode 100644 index 0000000000..0b07f9a22e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx new file mode 100644 index 0000000000..f0f7fd76e1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx new file mode 100644 index 0000000000..d7310c1c94 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx @@ -0,0 +1,5 @@ +import { importedComponent, importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = importedComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx new file mode 100644 index 0000000000..76e5015e8b --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx new file mode 100644 index 0000000000..dd352c63ae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx @@ -0,0 +1,18 @@ +import * as styles from '../style.css'; +import { TEST_DATA } from '../test.const'; +const Button = (props: { + children: any; +}) => { + return ; +}; +import { Route } from "inline.tsx"; +Route.addChildren([]); +import { test } from "inline.tsx"; +const SplitComponent = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx new file mode 100644 index 0000000000..e2769df980 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader'); +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`]; +export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; +export const Route = createFileRoute('/')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx new file mode 100644 index 0000000000..1faa5012de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx @@ -0,0 +1,27 @@ +import { defer } from '@tanstack/react-router'; +import { getSponsorsForSponsorPack } from '~/server/sponsors'; +import discordImage from '~/images/discord-logo-white.svg'; +import { sample } from '~/utils/utils'; +import { textColors } from "random-number.tsx"; +import { gradients } from "random-number.tsx"; +import { Route } from "random-number.tsx"; +const SplitLoader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { SplitLoader as loader }; +const SplitComponent = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx new file mode 100644 index 0000000000..cc55612e2d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx new file mode 100644 index 0000000000..8831513c0e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = React.memo(Component); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx new file mode 100644 index 0000000000..1428efceb6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, 'loader') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx new file mode 100644 index 0000000000..b979ac5fa4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { importedLoader, importedComponent } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; +const SplitComponent = React.memo(importedComponent); +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx new file mode 100644 index 0000000000..062f12705d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx @@ -0,0 +1,27 @@ +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +export function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: lazyFn($$splitLoaderImporter, 'loader') +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component@component---loader.tsx new file mode 100644 index 0000000000..c187fe188e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component@component---loader.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const SplitLoader = importedLoader; +export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export const loaderFn = () => { + return importedLoader(); +}; +const Layout = () => { + return
+
+ +
+ + +
; +}; +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const@component---loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx @@ -0,0 +1,30 @@ +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; +export function loaderFn() { + return importedLoader(); +} +function Layout() { + return
+
+ +
+ + +
; +} +export const Route = createFileRoute('/_layout')({ + component: Layout, + loader: loaderFn +}); +const HEADER_HEIGHT = '63px'; +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; +export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function@component---loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx new file mode 100644 index 0000000000..e566036f96 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export function loaderFn() { + return { + foo: 'bar' + }; +} +export const Route = createFileRoute('/_layout')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: loaderFn +}); +export const SIDEBAR_WIDTH = '150px'; +export const SIDEBAR_MINI_WIDTH = '80px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader@component---loader.tsx new file mode 100644 index 0000000000..dde7ab5b9d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader@component---loader.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const SplitComponent = function Layout() { + return
+
+ +
+ + +
; +}; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx new file mode 100644 index 0000000000..253de7d8d5 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { startProject } from '~/projects/start'; +import { createFileRoute } from '@tanstack/react-router'; +import { seo } from '~/utils/seo'; +export const Route = createFileRoute('/_libraries/start/$version/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + meta: () => seo({ + title: startProject.name, + description: startProject.description + }) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx new file mode 100644 index 0000000000..10f2c2d667 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx @@ -0,0 +1,605 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} +const SplitComponent = function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {} +
+ Coming Soon! + {} +
+ {} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {} + + {} + + {} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {} + + {} + + {} +
+
; +}; +export { SplitComponent as component }; \ No newline at end of file From fbf8e1b7a6550f8591bfd3fb38447d797d4aa36a Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:11:43 +1300 Subject: [PATCH 14/35] feat(router-plugin): handle errorComponent, pendingComponent, notFoundComponent --- .../src/core/code-splitter/compilers.ts | 47 ++++++++++++++++--- packages/router-plugin/src/core/constants.ts | 15 +++++- .../src/core/router-code-splitter-plugin.ts | 30 +++++------- 3 files changed, 64 insertions(+), 28 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 83e7ef924e..2f4183d34d 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -37,6 +37,16 @@ type SplitNodeMeta = { localExporterIdent: string } const SPLIT_NODES_CONFIG = new Map([ + [ + 'loader', + { + routeIdent: 'loader', + localImporterIdent: '$$splitLoaderImporter', // const $$splitLoaderImporter = () => import('...') + splitStrategy: 'normal', + localExporterIdent: 'SplitLoader', // const SplitLoader = ... + exporterIdent: 'loader', // export { SplitLoader as loader } + }, + ], [ 'component', { @@ -48,13 +58,33 @@ const SPLIT_NODES_CONFIG = new Map([ }, ], [ - 'loader', + 'pendingComponent', { - routeIdent: 'loader', - localImporterIdent: '$$splitLoaderImporter', // const $$splitLoaderImporter = () => import('...') - splitStrategy: 'normal', - localExporterIdent: 'SplitLoader', // const SplitLoader = ... - exporterIdent: 'loader', // export { SplitLoader as loader } + routeIdent: 'pendingComponent', + localImporterIdent: '$$splitPendingComponentImporter', // const $$splitPendingComponentImporter = () => import('...') + splitStrategy: 'react-component', + localExporterIdent: 'SplitPendingComponent', // const SplitPendingComponent = ... + exporterIdent: 'pendingComponent', // export { SplitPendingComponent as pendingComponent } + }, + ], + [ + 'errorComponent', + { + routeIdent: 'errorComponent', + localImporterIdent: '$$splitErrorComponentImporter', // const $$splitErrorComponentImporter = () => import('...') + splitStrategy: 'react-component', + localExporterIdent: 'SplitErrorComponent', // const SplitErrorComponent = ... + exporterIdent: 'errorComponent', // export { SplitErrorComponent as errorComponent } + }, + ], + [ + 'notFoundComponent', + { + routeIdent: 'notFoundComponent', + localImporterIdent: '$$splitNotFoundComponentImporter', // const $$splitNotFoundComponentImporter = () => import('...') + splitStrategy: 'react-component', + localExporterIdent: 'SplitNotFoundComponent', // const SplitNotFoundComponent = ... + exporterIdent: 'notFoundComponent', // export { SplitNotFoundComponent as notFoundComponent } }, ], ]) @@ -375,9 +405,12 @@ export function compileCodeSplitVirtualRoute( > = { component: undefined, loader: undefined, + pendingComponent: undefined, + errorComponent: undefined, + notFoundComponent: undefined, } - // Find and track all the known splittable nodes + // Find and track all the known split-able nodes programPath.traverse( { CallExpression: (path) => { diff --git a/packages/router-plugin/src/core/constants.ts b/packages/router-plugin/src/core/constants.ts index 3da6a68057..690c079888 100644 --- a/packages/router-plugin/src/core/constants.ts +++ b/packages/router-plugin/src/core/constants.ts @@ -1,7 +1,18 @@ export const tsrSplit = 'tsr-split' -export const splitRouteIdentNodes = ['component', 'loader'] as const +export const splitRouteIdentNodes = [ + 'loader', + 'component', + 'pendingComponent', + 'errorComponent', + 'notFoundComponent', +] as const export type SplitRouteIdentNodes = (typeof splitRouteIdentNodes)[number] export type CodeSplitGroupings = Array> -export const defaultCodeSplitGroupings: CodeSplitGroupings = [['component']] +export const defaultCodeSplitGroupings: CodeSplitGroupings = [ + ['component'], + ['pendingComponent'], + ['errorComponent'], + ['notFoundComponent'], +] 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 c297131a85..7a6da63f8d 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -8,6 +8,7 @@ import { compileCodeSplitVirtualRoute, } from './code-splitter/compilers' import { defaultCodeSplitGroupings, tsrSplit } from './constants' +import { decodeIdentifier } from './code-splitter/path-ids' import type { CodeSplitGroupings } from './constants' import type { Config } from './config' @@ -16,7 +17,6 @@ import type { UnpluginFactory, TransformResult as UnpluginTransformResult, } from 'unplugin' -import { decodeIdentifier } from './code-splitter/path-ids' const debug = process.env.TSR_VITE_DEBUG && @@ -114,8 +114,16 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ): UnpluginTransformResult => { if (debug) console.info('Splitting Route: ', id) - const [_, ...urlParts] = id.split('?') - const searchParams = new URLSearchParams(urlParts.join('?')) + const [_, ...pathnameParts] = id + // replace backslashes with forward slashes + .replace(/\\/g, '/') + .split('/') + [ + // Only the last part of the pathname is used to determine the split value + -1 + ]!.split('?') + + const searchParams = new URLSearchParams(pathnameParts.join('?')) const splitValue = searchParams.get(tsrSplit) if (!splitValue) { @@ -134,22 +142,6 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< splitTargets: grouping as any, }) - // if (id.includes(splitPrefixes.ROUTE_COMPONENT)) { - // result = compileCodeSplitVirtualRoute({ - // code, - // root: ROOT, - // filename: id, - // splitTargets: ['component'], - // }) - // } else if (id.includes(splitPrefixes.ROUTE_LOADER)) { - // result = compileCodeSplitVirtualRoute({ - // code, - // root: ROOT, - // filename: id, - // splitTargets: ['loader'], - // }) - // } - if (debug) { logDiff(code, result.code) console.log('Output:\n', result.code + '\n\n') From 13ebf7028d9b24e640804074dac50e1716a69f9c Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:19:53 +1300 Subject: [PATCH 15/35] test(router-plugin): update testing --- .../router-plugin/tests/code-splitter.test.ts | 14 +- .../arrow-function@errorComponent.tsx} | 0 .../arrow-function@notFoundComponent.tsx} | 0 .../arrow-function@pendingComponent.tsx} | 0 .../development/chinese@errorComponent.tsx} | 0 .../chinese@notFoundComponent.tsx} | 0 .../development/chinese@pendingComponent.tsx} | 0 ...conditional-properties@errorComponent.tsx} | 0 ...ditional-properties@notFoundComponent.tsx} | 0 ...nditional-properties@pendingComponent.tsx} | 0 ...emo-imported-component@errorComponent.tsx} | 0 ...-imported-component@notFoundComponent.tsx} | 0 ...o-imported-component@pendingComponent.tsx} | 0 .../destructuring@errorComponent.tsx} | 0 .../destructuring@notFoundComponent.tsx} | 0 .../destructuring@pendingComponent.tsx} | 0 .../function-as-parameter@errorComponent.tsx} | 0 ...nction-as-parameter@notFoundComponent.tsx} | 0 ...unction-as-parameter@pendingComponent.tsx} | 0 .../function-declaration@errorComponent.tsx} | 0 ...unction-declaration@notFoundComponent.tsx} | 0 ...function-declaration@pendingComponent.tsx} | 0 .../importAttribute@errorComponent.tsx} | 0 .../importAttribute@notFoundComponent.tsx} | 0 .../importAttribute@pendingComponent.tsx} | 0 ...nt-destructured-loader@errorComponent.tsx} | 0 ...destructured-loader@notFoundComponent.tsx} | 0 ...-destructured-loader@pendingComponent.tsx} | 0 ...rted-default-component@errorComponent.tsx} | 0 ...d-default-component@notFoundComponent.tsx} | 0 ...ed-default-component@pendingComponent.tsx} | 0 .../development/imported@errorComponent.tsx} | 0 .../imported@notFoundComponent.tsx} | 0 .../imported@pendingComponent.tsx} | 0 .../development/inline@errorComponent.tsx} | 0 .../development/inline@notFoundComponent.tsx} | 0 .../development/inline@pendingComponent.tsx} | 0 .../random-number@errorComponent.tsx} | 0 .../random-number@notFoundComponent.tsx} | 0 .../random-number@pendingComponent.tsx} | 0 .../react-memo-component@errorComponent.tsx} | 0 ...eact-memo-component@notFoundComponent.tsx} | 0 ...react-memo-component@pendingComponent.tsx} | 0 ...emo-imported-component@errorComponent.tsx} | 0 ...-imported-component@notFoundComponent.tsx} | 0 ...o-imported-component@pendingComponent.tsx} | 0 ...etain-export-component@errorComponent.tsx} | 0 ...in-export-component@notFoundComponent.tsx} | 0 ...ain-export-component@pendingComponent.tsx} | 0 .../retain-exports-const@errorComponent.tsx | 0 ...retain-exports-const@notFoundComponent.tsx | 0 .../retain-exports-const@pendingComponent.tsx | 0 ...retain-exports-function@errorComponent.tsx | 0 ...ain-exports-function@notFoundComponent.tsx | 0 ...tain-exports-function@pendingComponent.tsx | 0 .../retain-exports-loader@errorComponent.tsx | 0 ...etain-exports-loader@notFoundComponent.tsx | 0 ...retain-exports-loader@pendingComponent.tsx | 0 .../useStateDestructure@errorComponent.tsx} | 0 ...useStateDestructure@notFoundComponent.tsx} | 0 .../useStateDestructure@pendingComponent.tsx} | 0 .../arrow-function@errorComponent.tsx | 0 .../arrow-function@notFoundComponent.tsx | 0 .../arrow-function@pendingComponent.tsx | 0 .../production/chinese@errorComponent.tsx} | 0 .../production/chinese@notFoundComponent.tsx | 3 + .../production/chinese@pendingComponent.tsx | 3 + .../conditional-properties@errorComponent.tsx | 0 ...nditional-properties@notFoundComponent.tsx | 0 ...onditional-properties@pendingComponent.tsx | 0 ...memo-imported-component@errorComponent.tsx | 0 ...o-imported-component@notFoundComponent.tsx | 0 ...mo-imported-component@pendingComponent.tsx | 0 .../destructuring@errorComponent.tsx} | 0 .../destructuring@notFoundComponent.tsx} | 0 .../destructuring@pendingComponent.tsx} | 0 .../function-as-parameter@errorComponent.tsx} | 0 ...nction-as-parameter@notFoundComponent.tsx} | 0 ...unction-as-parameter@pendingComponent.tsx} | 0 .../function-declaration@errorComponent.tsx | 0 ...function-declaration@notFoundComponent.tsx | 0 .../function-declaration@pendingComponent.tsx | 0 .../importAttribute@errorComponent.tsx | 0 .../importAttribute@notFoundComponent.tsx | 0 .../importAttribute@pendingComponent.tsx | 0 ...ent-destructured-loader@errorComponent.tsx | 0 ...-destructured-loader@notFoundComponent.tsx | 0 ...t-destructured-loader@pendingComponent.tsx | 0 ...orted-default-component@errorComponent.tsx | 0 ...ed-default-component@notFoundComponent.tsx | 0 ...ted-default-component@pendingComponent.tsx | 0 .../production/imported@errorComponent.tsx | 0 .../production/imported@notFoundComponent.tsx | 0 .../production/imported@pendingComponent.tsx | 0 .../production/inline@errorComponent.tsx} | 0 .../production/inline@notFoundComponent.tsx | 2 + .../production/inline@pendingComponent.tsx | 2 + .../random-number@errorComponent.tsx | 0 .../random-number@notFoundComponent.tsx | 0 .../random-number@pendingComponent.tsx | 0 .../react-memo-component@errorComponent.tsx | 0 ...react-memo-component@notFoundComponent.tsx | 0 .../react-memo-component@pendingComponent.tsx | 0 ...memo-imported-component@errorComponent.tsx | 0 ...o-imported-component@notFoundComponent.tsx | 0 ...mo-imported-component@pendingComponent.tsx | 0 ...retain-export-component@errorComponent.tsx | 0 ...ain-export-component@notFoundComponent.tsx | 0 ...tain-export-component@pendingComponent.tsx | 0 .../retain-exports-const@errorComponent.tsx | 0 ...retain-exports-const@notFoundComponent.tsx | 0 .../retain-exports-const@pendingComponent.tsx | 0 ...retain-exports-function@errorComponent.tsx | 0 ...ain-exports-function@notFoundComponent.tsx | 0 ...tain-exports-function@pendingComponent.tsx | 0 .../retain-exports-loader@errorComponent.tsx | 0 ...etain-exports-loader@notFoundComponent.tsx | 0 ...retain-exports-loader@pendingComponent.tsx | 0 .../useStateDestructure@errorComponent.tsx} | 0 ...useStateDestructure@notFoundComponent.tsx} | 163 +------ .../useStateDestructure@pendingComponent.tsx} | 163 +------ .../development/arrow-function.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/arrow-function@loader.tsx | 0 .../development/chinese.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/chinese@loader.tsx | 3 + .../development/conditional-properties.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../conditional-properties@loader.tsx | 0 ...ructured-react-memo-imported-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...d-react-memo-imported-component@loader.tsx | 0 .../development/destructuring.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/destructuring@loader.tsx | 0 .../development/function-as-parameter.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-as-parameter@loader.tsx | 0 .../development/function-declaration.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-declaration@loader.tsx | 0 .../development/importAttribute.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/importAttribute@loader.tsx | 0 ...-default-component-destructured-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...t-component-destructured-loader@loader.tsx | 0 .../imported-default-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../imported-default-component@loader.tsx | 0 .../development/imported.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/imported@loader.tsx | 0 .../development/inline.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/inline@loader.tsx | 2 + .../development/random-number.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/random-number@loader.tsx | 0 .../development/react-memo-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-component@loader.tsx | 0 .../react-memo-imported-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-imported-component@loader.tsx | 0 .../development/retain-export-component.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-export-component@loader.tsx | 0 .../development/retain-exports-const.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-const@loader.tsx | 0 .../development/retain-exports-function.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../development/retain-exports-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../retain-exports-loader@loader.tsx | 0 .../development/useStateDestructure.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../useStateDestructure@loader.tsx | 444 ++++++++++++++++++ .../production/arrow-function.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/arrow-function@loader.tsx | 0 .../production/chinese.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/chinese@loader.tsx | 3 + .../production/conditional-properties.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../conditional-properties@loader.tsx | 0 ...ructured-react-memo-imported-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...d-react-memo-imported-component@loader.tsx | 0 .../production/destructuring.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/destructuring@loader.tsx | 0 .../production/function-as-parameter.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-as-parameter@loader.tsx | 0 .../production/function-declaration.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-declaration@loader.tsx | 0 .../production/importAttribute.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/importAttribute@loader.tsx | 0 ...-default-component-destructured-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...t-component-destructured-loader@loader.tsx | 0 .../production/imported-default-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../imported-default-component@loader.tsx | 0 .../production/imported.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/imported@loader.tsx | 0 .../production/inline.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/inline@loader.tsx | 2 + .../production/random-number.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/random-number@loader.tsx | 0 .../production/react-memo-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-component@loader.tsx | 0 .../react-memo-imported-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-imported-component@loader.tsx | 0 .../production/retain-export-component.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-export-component@loader.tsx | 0 .../production/retain-exports-const.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-const@loader.tsx | 0 .../production/retain-exports-function.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-function@loader.tsx | 0 .../production/retain-exports-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../retain-exports-loader@loader.tsx | 0 .../production/useStateDestructure.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/useStateDestructure@loader.tsx | 444 ++++++++++++++++++ .../development/importAttribute.tsx | 9 - .../2-separated/production/chinese.tsx | 9 - .../development/arrow-function.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../arrow-function@errorComponent.tsx | 0 .../development/chinese.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/chinese@errorComponent.tsx | 3 + .../development/conditional-properties.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../conditional-properties@errorComponent.tsx | 0 ...ructured-react-memo-imported-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...memo-imported-component@errorComponent.tsx | 0 .../development/destructuring.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../destructuring@errorComponent.tsx} | 0 .../development/function-as-parameter.tsx | 0 ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-as-parameter@errorComponent.tsx} | 0 .../development/function-declaration.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-declaration@errorComponent.tsx | 0 .../development/importAttribute.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../importAttribute@errorComponent.tsx | 0 ...-default-component-destructured-loader.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...ent-destructured-loader@errorComponent.tsx | 0 .../imported-default-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...orted-default-component@errorComponent.tsx | 0 .../development/imported.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/imported@errorComponent.tsx | 0 .../development/inline.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../development/inline@errorComponent.tsx | 2 + .../development/random-number.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../random-number@errorComponent.tsx | 0 .../development/react-memo-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-component@errorComponent.tsx | 0 .../react-memo-imported-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...memo-imported-component@errorComponent.tsx | 0 .../development}/retain-export-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...retain-export-component@errorComponent.tsx | 0 .../development/retain-exports-const.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-const@errorComponent.tsx | 0 .../development/retain-exports-function.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 ...retain-exports-function@errorComponent.tsx | 0 .../development/retain-exports-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../retain-exports-loader@errorComponent.tsx | 0 .../development/useStateDestructure.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../useStateDestructure@errorComponent.tsx | 444 ++++++++++++++++++ .../production/arrow-function.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../arrow-function@errorComponent.tsx | 0 .../production/chinese.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/chinese@errorComponent.tsx | 3 + .../production/conditional-properties.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../conditional-properties@errorComponent.tsx | 0 ...ructured-react-memo-imported-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...memo-imported-component@errorComponent.tsx | 0 .../production/destructuring.tsx} | 0 ...--notFoundComponent---pendingComponent.tsx | 11 + .../destructuring@errorComponent.tsx | 11 + .../production/function-as-parameter.tsx} | 0 ...--notFoundComponent---pendingComponent.tsx | 19 + .../function-as-parameter@errorComponent.tsx | 19 + .../production/function-declaration.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../function-declaration@errorComponent.tsx | 0 .../production/importAttribute.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../importAttribute@errorComponent.tsx | 0 ...-default-component-destructured-loader.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...ent-destructured-loader@errorComponent.tsx | 0 .../production/imported-default-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...orted-default-component@errorComponent.tsx | 0 .../production/imported.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/imported@errorComponent.tsx | 0 .../production/inline.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../production/inline@errorComponent.tsx | 2 + .../production/random-number.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../random-number@errorComponent.tsx | 0 .../production/react-memo-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../react-memo-component@errorComponent.tsx | 0 .../react-memo-imported-component.tsx | 4 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...memo-imported-component@errorComponent.tsx | 0 .../production}/retain-export-component.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 ...retain-export-component@errorComponent.tsx | 0 .../production/retain-exports-const.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 .../retain-exports-const@errorComponent.tsx | 0 .../production/retain-exports-function.tsx | 0 ...--notFoundComponent---pendingComponent.tsx | 0 ...retain-exports-function@errorComponent.tsx | 0 .../production/retain-exports-loader.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../retain-exports-loader@errorComponent.tsx | 0 .../production/useStateDestructure.tsx | 2 +- ...-notFoundComponent---pendingComponent.tsx} | 0 .../useStateDestructure@errorComponent.tsx | 444 ++++++++++++++++++ .../3-mixed/development/arrow-function.tsx | 12 - .../snapshots/3-mixed/development/chinese.tsx | 12 - .../development/conditional-properties.tsx | 12 - ...ructured-react-memo-imported-component.tsx | 12 - ...-default-component-destructured-loader.tsx | 12 - .../imported-default-component.tsx | 9 - .../3-mixed/development/imported.tsx | 12 - .../snapshots/3-mixed/development/inline.tsx | 11 - .../development/react-memo-component.tsx | 12 - .../react-memo-imported-component.tsx | 12 - .../development/retain-exports-loader.tsx | 17 - .../development/useStateDestructure.tsx | 15 - .../3-mixed/production/arrow-function.tsx | 9 - .../production/conditional-properties.tsx | 9 - ...ructured-react-memo-imported-component.tsx | 9 - .../production/function-declaration.tsx | 9 - ...-default-component-destructured-loader.tsx | 9 - .../snapshots/3-mixed/production/imported.tsx | 9 - .../snapshots/3-mixed/production/inline.tsx | 8 - .../3-mixed/production/random-number.tsx | 11 - .../production/react-memo-component.tsx | 9 - .../react-memo-imported-component.tsx | 9 - .../production/retain-export-component.tsx | 27 -- .../production/useStateDestructure.tsx | 12 - .../development/arrow-function@component.tsx | 26 - .../development/arrow-function@loader.tsx | 3 - .../development/chinese@component.tsx | 22 - .../conditional-properties@component.tsx | 5 - .../conditional-properties@loader.tsx | 5 - .../conditional-properties@split.tsx | 7 - ...eact-memo-imported-component@component.tsx | 6 - ...d-react-memo-imported-component@loader.tsx | 3 - .../development/function-declaration.tsx | 12 - .../function-declaration@component.tsx | 26 - .../function-declaration@loader.tsx | 3 - .../development/importAttribute@component.tsx | 3 - ...omponent-destructured-loader@component.tsx | 3 - ...t-component-destructured-loader@loader.tsx | 3 - .../imported-default-component@component.tsx | 3 - .../development/imported@component.tsx | 3 - .../snapshots/development/imported@loader.tsx | 3 - .../development/inline@component.tsx | 18 - .../snapshots/development/random-number.tsx | 14 - .../development/random-number@component.tsx | 18 - .../development/random-number@loader.tsx | 9 - .../react-memo-component@component.tsx | 6 - .../react-memo-component@loader.tsx | 3 - ...eact-memo-imported-component@component.tsx | 4 - .../react-memo-imported-component@loader.tsx | 3 - .../development/retain-export-component.tsx | 27 -- .../retain-export-component@loader.tsx | 3 - .../development/retain-exports-const.tsx | 30 -- .../development/retain-exports-function.tsx | 30 -- .../retain-exports-loader@component.tsx | 21 - .../production/arrow-function@component.tsx | 26 - .../production/arrow-function@loader.tsx | 3 - .../production/chinese@component.tsx | 22 - .../conditional-properties@component.tsx | 5 - .../conditional-properties@loader.tsx | 5 - .../conditional-properties@split.tsx | 7 - ...eact-memo-imported-component@component.tsx | 6 - ...d-react-memo-imported-component@loader.tsx | 3 - .../function-declaration@component.tsx | 26 - .../function-declaration@loader.tsx | 3 - .../snapshots/production/importAttribute.tsx | 6 - .../production/importAttribute@component.tsx | 3 - ...omponent-destructured-loader@component.tsx | 3 - ...t-component-destructured-loader@loader.tsx | 3 - .../production/imported-default-component.tsx | 6 - .../imported-default-component@component.tsx | 3 - .../production/imported@component.tsx | 3 - .../snapshots/production/imported@loader.tsx | 3 - .../snapshots/production/inline@component.tsx | 18 - .../production/random-number@component.tsx | 18 - .../production/random-number@loader.tsx | 9 - .../react-memo-component@component.tsx | 6 - .../react-memo-component@loader.tsx | 3 - ...eact-memo-imported-component@component.tsx | 4 - .../react-memo-imported-component@loader.tsx | 3 - .../retain-export-component@loader.tsx | 3 - .../production/retain-exports-const.tsx | 30 -- .../production/retain-exports-function.tsx | 30 -- .../production/retain-exports-loader.tsx | 14 - .../retain-exports-loader@component.tsx | 21 - 447 files changed, 1958 insertions(+), 1321 deletions(-) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/importAttribute@loader.tsx => 1-default/development/arrow-function@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/imported-default-component@loader.tsx => 1-default/development/arrow-function@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-export-component@component.tsx => 1-default/development/arrow-function@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/chinese@loader.tsx => 1-default/development/chinese@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/chinese@loader.tsx => 1-default/development/chinese@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/chinese@loader.tsx => 1-default/development/chinese@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-const@component.tsx => 1-default/development/conditional-properties@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-const@loader.tsx => 1-default/development/conditional-properties@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-function@component.tsx => 1-default/development/conditional-properties@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-function@loader.tsx => 1-default/development/destructured-react-memo-imported-component@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-loader@loader.tsx => 1-default/development/destructured-react-memo-imported-component@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/importAttribute@loader.tsx => 1-default/development/destructured-react-memo-imported-component@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/destructuring.tsx => 1-default/development/destructuring@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/destructuring@component.tsx => 1-default/development/destructuring@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/destructuring@loader.tsx => 1-default/development/destructuring@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/function-as-parameter.tsx => 1-default/development/function-as-parameter@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/function-as-parameter@component.tsx => 1-default/development/function-as-parameter@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/function-as-parameter@loader.tsx => 1-default/development/function-as-parameter@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/imported-default-component@loader.tsx => 1-default/development/function-declaration@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-export-component@component.tsx => 1-default/development/function-declaration@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-const@component.tsx => 1-default/development/function-declaration@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-const@loader.tsx => 1-default/development/importAttribute@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-function@component.tsx => 1-default/development/importAttribute@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-function@loader.tsx => 1-default/development/importAttribute@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-loader@loader.tsx => 1-default/development/imported-default-component-destructured-loader@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/retain-exports-const@component---loader.tsx => 1-default/development/imported-default-component-destructured-loader@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/retain-exports-function@component---loader.tsx => 1-default/development/imported-default-component-destructured-loader@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/retain-exports-const@component---loader.tsx => 1-default/development/imported-default-component@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/retain-exports-function@component---loader.tsx => 1-default/development/imported-default-component@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/importAttribute@loader.tsx => 1-default/development/imported-default-component@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/imported-default-component@loader.tsx => 1-default/development/imported@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-export-component@component.tsx => 1-default/development/imported@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-exports-const@component.tsx => 1-default/development/imported@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/inline@loader.tsx => 1-default/development/inline@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/inline@loader.tsx => 1-default/development/inline@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/inline@loader.tsx => 1-default/development/inline@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-exports-const@loader.tsx => 1-default/development/random-number@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-exports-function@component.tsx => 1-default/development/random-number@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-exports-function@loader.tsx => 1-default/development/random-number@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/retain-exports-loader@loader.tsx => 1-default/development/react-memo-component@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/importAttribute@loader.tsx => 1-default/development/react-memo-component@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/imported-default-component@loader.tsx => 1-default/development/react-memo-component@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-export-component@component.tsx => 1-default/development/react-memo-imported-component@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-const@component.tsx => 1-default/development/react-memo-imported-component@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-const@loader.tsx => 1-default/development/react-memo-imported-component@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-function@component.tsx => 1-default/development/retain-export-component@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-function@loader.tsx => 1-default/development/retain-export-component@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/retain-exports-loader@loader.tsx => 1-default/development/retain-export-component@pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/useStateDestructure@loader.tsx => 1-default/development/useStateDestructure@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/useStateDestructure@loader.tsx => 1-default/development/useStateDestructure@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/useStateDestructure@loader.tsx => 1-default/development/useStateDestructure@pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/chinese@loader.tsx => 1-default/production/chinese@errorComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/destructuring.tsx => 1-default/production/destructuring@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/destructuring@component.tsx => 1-default/production/destructuring@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/destructuring@loader.tsx => 1-default/production/destructuring@pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/function-as-parameter.tsx => 1-default/production/function-as-parameter@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/function-as-parameter@component.tsx => 1-default/production/function-as-parameter@notFoundComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/function-as-parameter@loader.tsx => 1-default/production/function-as-parameter@pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/inline@loader.tsx => 1-default/production/inline@errorComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/useStateDestructure@loader.tsx => 1-default/production/useStateDestructure@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/useStateDestructure@component.tsx => 1-default/production/useStateDestructure@notFoundComponent.tsx} (72%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/useStateDestructure@component.tsx => 1-default/production/useStateDestructure@pendingComponent.tsx} (72%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/arrow-function.tsx (87%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/arrow-function@component.tsx => 2-components-combined-loader-separate/development/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/arrow-function@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/chinese.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/chinese@component.tsx => 2-components-combined-loader-separate/development/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/conditional-properties.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/conditional-properties@component.tsx => 2-components-combined-loader-separate/development/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/conditional-properties@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/destructured-react-memo-imported-component.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/destructured-react-memo-imported-component@component.tsx => 2-components-combined-loader-separate/development/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/destructured-react-memo-imported-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/development/destructuring.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/destructuring@component---loader.tsx => 2-components-combined-loader-separate/development/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/destructuring@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/development/function-as-parameter.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/function-as-parameter@component---loader.tsx => 2-components-combined-loader-separate/development/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/function-as-parameter@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/function-declaration.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/function-declaration@component.tsx => 2-components-combined-loader-separate/development/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/function-declaration@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/development/importAttribute.tsx (81%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/importAttribute@component.tsx => 2-components-combined-loader-separate/development/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/imported-default-component-destructured-loader.tsx (83%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/imported-default-component-destructured-loader@component.tsx => 2-components-combined-loader-separate/development/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/imported-default-component-destructured-loader@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/imported-default-component.tsx (80%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/imported-default-component@component.tsx => 2-components-combined-loader-separate/development/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/imported.tsx (88%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/imported@component.tsx => 2-components-combined-loader-separate/development/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/imported@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/inline.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/inline@component.tsx => 2-components-combined-loader-separate/development/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/random-number.tsx (90%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/random-number@component.tsx => 2-components-combined-loader-separate/development/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/random-number@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/react-memo-component.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/react-memo-component@component.tsx => 2-components-combined-loader-separate/development/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/react-memo-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/react-memo-imported-component.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/react-memo-imported-component@component.tsx => 2-components-combined-loader-separate/development/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/react-memo-imported-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/retain-export-component.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/retain-export-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/retain-exports-const.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/development/retain-exports-function.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/retain-exports-loader.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/retain-exports-loader@component.tsx => 2-components-combined-loader-separate/development/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/development/useStateDestructure.tsx (87%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/development/useStateDestructure@component.tsx => 2-components-combined-loader-separate/development/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/arrow-function.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/arrow-function@component.tsx => 2-components-combined-loader-separate/production/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/arrow-function@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/production/chinese.tsx (82%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/chinese@component.tsx => 2-components-combined-loader-separate/production/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/conditional-properties.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/conditional-properties@component.tsx => 2-components-combined-loader-separate/production/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/conditional-properties@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/destructured-react-memo-imported-component.tsx (82%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/destructured-react-memo-imported-component@component.tsx => 2-components-combined-loader-separate/production/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/destructured-react-memo-imported-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/production/destructuring.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/destructuring@component---loader.tsx => 2-components-combined-loader-separate/production/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/production/destructuring@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/production/function-as-parameter.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/function-as-parameter@component---loader.tsx => 2-components-combined-loader-separate/production/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/production/function-as-parameter@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/function-declaration.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/function-declaration@component.tsx => 2-components-combined-loader-separate/production/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/function-declaration@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/importAttribute.tsx (79%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/importAttribute@component.tsx => 2-components-combined-loader-separate/production/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/imported-default-component-destructured-loader.tsx (82%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/imported-default-component-destructured-loader@component.tsx => 2-components-combined-loader-separate/production/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/imported-default-component-destructured-loader@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 2-components-combined-loader-separate}/production/imported-default-component.tsx (77%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/imported-default-component@component.tsx => 2-components-combined-loader-separate/production/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/imported.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/imported@component.tsx => 2-components-combined-loader-separate/production/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/imported@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 2-components-combined-loader-separate}/production/inline.tsx (83%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/inline@component.tsx => 2-components-combined-loader-separate/production/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/random-number.tsx (90%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/random-number@component.tsx => 2-components-combined-loader-separate/production/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/random-number@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/react-memo-component.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/react-memo-component@component.tsx => 2-components-combined-loader-separate/production/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/react-memo-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/react-memo-imported-component.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/react-memo-imported-component@component.tsx => 2-components-combined-loader-separate/production/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/react-memo-imported-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/retain-export-component.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/retain-export-component@loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/retain-exports-const.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/retain-exports-function.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/retain-exports-loader.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/retain-exports-loader@component.tsx => 2-components-combined-loader-separate/production/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader@loader.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 2-components-combined-loader-separate}/production/useStateDestructure.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated/production/useStateDestructure@component.tsx => 2-components-combined-loader-separate/production/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/arrow-function.tsx (79%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/arrow-function@component---loader.tsx => 3-all-combined-errorComponent-separate/development/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/chinese.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/chinese@component---loader.tsx => 3-all-combined-errorComponent-separate/development/chinese@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/conditional-properties.tsx (77%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/conditional-properties@component---loader.tsx => 3-all-combined-errorComponent-separate/development/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/destructured-react-memo-imported-component.tsx (72%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx => 3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/destructuring.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/destructuring@component.tsx => 3-all-combined-errorComponent-separate/development/destructuring@component---loader---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/destructuring.tsx => 3-all-combined-errorComponent-separate/development/destructuring@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/function-as-parameter.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{development/function-as-parameter@component.tsx => 3-all-combined-errorComponent-separate/development/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{production/function-as-parameter.tsx => 3-all-combined-errorComponent-separate/development/function-as-parameter@errorComponent.tsx} (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/development/function-declaration.tsx (77%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/function-declaration@component---loader.tsx => 3-all-combined-errorComponent-separate/development/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/importAttribute.tsx (83%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/importAttribute@component---loader.tsx => 3-all-combined-errorComponent-separate/development/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/imported-default-component-destructured-loader.tsx (72%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx => 3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/development/imported-default-component.tsx (81%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/imported-default-component@component---loader.tsx => 3-all-combined-errorComponent-separate/development/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/imported.tsx (80%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/imported@component---loader.tsx => 3-all-combined-errorComponent-separate/development/imported@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/development/inline.tsx (86%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/inline@component---loader.tsx => 3-all-combined-errorComponent-separate/development/inline@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/development/random-number.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/random-number@component---loader.tsx => 3-all-combined-errorComponent-separate/development/random-number@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/react-memo-component.tsx (77%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/react-memo-component@component---loader.tsx => 3-all-combined-errorComponent-separate/development/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/development/react-memo-imported-component.tsx (75%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/react-memo-imported-component@component---loader.tsx => 3-all-combined-errorComponent-separate/development/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production => 3-all-combined-errorComponent-separate/development}/retain-export-component.tsx (90%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/retain-export-component@component---loader.tsx => 3-all-combined-errorComponent-separate/development/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/development/retain-exports-const.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/development/retain-exports-function.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/development/retain-exports-loader.tsx (87%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/retain-exports-loader@component---loader.tsx => 3-all-combined-errorComponent-separate/development/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/development/useStateDestructure.tsx (88%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development/useStateDestructure@component---loader.tsx => 3-all-combined-errorComponent-separate/development/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/arrow-function.tsx (77%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/arrow-function@component---loader.tsx => 3-all-combined-errorComponent-separate/production/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/chinese.tsx (84%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/chinese@component---loader.tsx => 3-all-combined-errorComponent-separate/production/chinese@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/conditional-properties.tsx (75%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/conditional-properties@component---loader.tsx => 3-all-combined-errorComponent-separate/production/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/destructured-react-memo-imported-component.tsx (70%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx => 3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/destructuring@component.tsx => 3-all-combined-errorComponent-separate/production/destructuring.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{production/function-as-parameter@component.tsx => 3-all-combined-errorComponent-separate/production/function-as-parameter.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/function-declaration.tsx (75%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/function-declaration@component---loader.tsx => 3-all-combined-errorComponent-separate/production/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/production/importAttribute.tsx (81%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/importAttribute@component---loader.tsx => 3-all-combined-errorComponent-separate/production/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/imported-default-component-destructured-loader.tsx (69%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx => 3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/production/imported-default-component.tsx (78%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/imported-default-component@component---loader.tsx => 3-all-combined-errorComponent-separate/production/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/imported.tsx (78%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/imported@component---loader.tsx => 3-all-combined-errorComponent-separate/production/imported@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{2-separated => 3-all-combined-errorComponent-separate}/production/inline.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/inline@component---loader.tsx => 3-all-combined-errorComponent-separate/production/inline@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/random-number.tsx (83%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/random-number@component---loader.tsx => 3-all-combined-errorComponent-separate/production/random-number@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/react-memo-component.tsx (75%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/react-memo-component@component---loader.tsx => 3-all-combined-errorComponent-separate/production/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/react-memo-imported-component.tsx (73%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/react-memo-imported-component@component---loader.tsx => 3-all-combined-errorComponent-separate/production/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/development => 3-all-combined-errorComponent-separate/production}/retain-export-component.tsx (90%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/retain-export-component@component---loader.tsx => 3-all-combined-errorComponent-separate/production/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/production/retain-exports-const.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/production/retain-exports-function.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed => 3-all-combined-errorComponent-separate}/production/retain-exports-loader.tsx (85%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/retain-exports-loader@component---loader.tsx => 3-all-combined-errorComponent-separate/production/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader@errorComponent.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => 3-all-combined-errorComponent-separate}/production/useStateDestructure.tsx (87%) rename packages/router-plugin/tests/code-splitter/snapshots/{3-mixed/production/useStateDestructure@component---loader.tsx => 3-all-combined-errorComponent-separate/production/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx} (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@errorComponent.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@split.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@split.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index e29fe5aa60..e915f08f43 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -20,12 +20,18 @@ const testGroups = [ groupings: defaultCodeSplitGroupings, }, { - name: '2-separated', - groupings: [['loader'], ['component']], + name: '2-components-combined-loader-separate', + groupings: [ + ['loader'], + ['component', 'pendingComponent', 'errorComponent', 'notFoundComponent'], + ], }, { - name: '3-mixed', - groupings: [['loader', 'component']], + name: '3-all-combined-errorComponent-separate', + groupings: [ + ['loader', 'component', 'pendingComponent', 'notFoundComponent'], + ['errorComponent'], + ], }, ] as Array<{ name: string; groupings: CodeSplitGroupings }> diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/arrow-function@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/chinese@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/chinese@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/conditional-properties@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructured-react-memo-imported-component@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructuring@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/destructuring@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-as-parameter@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-as-parameter@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/function-declaration@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/importAttribute@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component-destructured-loader@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-default-component@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/inline@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/inline@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/random-number@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-component@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/react-memo-imported-component@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-export-component@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-const@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-function@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/retain-exports-loader@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/development/useStateDestructure@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/arrow-function@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/chinese@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@notFoundComponent.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@notFoundComponent.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@pendingComponent.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/chinese@pendingComponent.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/conditional-properties@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructured-react-memo-imported-component@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructuring@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/destructuring@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@notFoundComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@notFoundComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-as-parameter@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-as-parameter@pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/function-declaration@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/importAttribute@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component-destructured-loader@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-default-component@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/inline@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@notFoundComponent.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@notFoundComponent.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@pendingComponent.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/inline@pendingComponent.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/random-number@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-component@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/react-memo-imported-component@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-export-component@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-const@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-function@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/retain-exports-loader@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@notFoundComponent.tsx similarity index 72% rename from packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@notFoundComponent.tsx index 10f2c2d667..2c2aba5396 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@notFoundComponent.tsx @@ -441,165 +441,4 @@ Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`fle
*/}
; -} -const SplitComponent = function VersionIndex() { - const { - sponsorsPromise - } = librariesRouteApi.useLoaderData(); - const { - version - } = Route.useParams(); - const [, setIsDark] = React.useState(true); - React.useEffect(() => { - setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); - }, []); - const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; - return
-
- {menu?.map((item, i) => { - const label =
{item.label}
; - return
- {item.to.startsWith('http') ? {label} : - {label} - } -
; - })} -
-
-
-

- TanStack Start -

-
- {} -
- Coming Soon! - {} -
- {} -

- Full-stack React framework{' '} - - powered by TanStack Router - {' '} -

-

- Full-document SSR, Streaming, Server Functions, bundling and more, - powered by TanStack Router, Vinxi,{' '} - Nitro and Vite. Ready to deploy to - your favorite hosting provider. -

-
-
-
- So when can I use it? -
-
-
- TanStack Start is currently in development and is - not yet available for public use. We are working hard to bring you - the best possible experience and will be releasing more details - soon. In the meantime, you can follow along with the development - process by watching the commits on this very website! -
-
- Yes, you heard that right!{' '} - - TanStack.com is already being built and deployed using TanStack - Start - - ! We are eating our own dog food and are excited to share the - results with you soon! -
-
- -
- {} - - {} - - {} - -
-

- Partners -

-
-
- - Start You? - -
-
- We're looking for a TanStack Start OSS Partner to go above and - beyond the call of sponsorship. Are you as invested in TanStack - Start as we are? Let's push the boundaries of Start together! -
- - Let's chat - -
-
-
- -
-

- Sponsors -

-
- } children={sponsors => { - return ; - }} /> -
- -
- -
-
- -
- - This ad helps us be happy about our invested time and not burn out and - rage-quit OSS. Yay money! 😉 - -
- - {} - - {} - - {} -
-
; -}; -export { SplitComponent as component }; \ No newline at end of file +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@pendingComponent.tsx similarity index 72% rename from packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@pendingComponent.tsx index 10f2c2d667..2c2aba5396 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/useStateDestructure@pendingComponent.tsx @@ -441,165 +441,4 @@ Check it out at https://tanstack.com/start/`)}`} target="_blank" className={`fle
*/}
; -} -const SplitComponent = function VersionIndex() { - const { - sponsorsPromise - } = librariesRouteApi.useLoaderData(); - const { - version - } = Route.useParams(); - const [, setIsDark] = React.useState(true); - React.useEffect(() => { - setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); - }, []); - const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; - return
-
- {menu?.map((item, i) => { - const label =
{item.label}
; - return
- {item.to.startsWith('http') ? {label} : - {label} - } -
; - })} -
-
-
-

- TanStack Start -

-
- {} -
- Coming Soon! - {} -
- {} -

- Full-stack React framework{' '} - - powered by TanStack Router - {' '} -

-

- Full-document SSR, Streaming, Server Functions, bundling and more, - powered by TanStack Router, Vinxi,{' '} - Nitro and Vite. Ready to deploy to - your favorite hosting provider. -

-
-
-
- So when can I use it? -
-
-
- TanStack Start is currently in development and is - not yet available for public use. We are working hard to bring you - the best possible experience and will be releasing more details - soon. In the meantime, you can follow along with the development - process by watching the commits on this very website! -
-
- Yes, you heard that right!{' '} - - TanStack.com is already being built and deployed using TanStack - Start - - ! We are eating our own dog food and are excited to share the - results with you soon! -
-
- -
- {} - - {} - - {} - -
-

- Partners -

-
-
- - Start You? - -
-
- We're looking for a TanStack Start OSS Partner to go above and - beyond the call of sponsorship. Are you as invested in TanStack - Start as we are? Let's push the boundaries of Start together! -
- - Let's chat - -
-
-
- -
-

- Sponsors -

-
- } children={sponsors => { - return ; - }} /> -
- -
- -
-
- -
- - This ad helps us be happy about our invested time and not burn out and - rage-quit OSS. Yay money! 😉 - -
- - {} - - {} - - {} -
-
; -}; -export { SplitComponent as component }; \ No newline at end of file +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function.tsx similarity index 87% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function.tsx index 17421168f3..a84401590d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/arrow-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/arrow-function@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese.tsx index 9bf9da7298..6f7cce7a75 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/chinese@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties.tsx index a273adebd8..a126bb6807 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/conditional-properties@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/conditional-properties@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component.tsx index 12bab7e278..65f2bfb918 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/destructured-react-memo-imported-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructured-react-memo-imported-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructuring@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/destructuring@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-as-parameter@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-as-parameter@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration.tsx index c3d5f02ff8..81124d1df4 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/function-declaration@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/function-declaration@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute.tsx similarity index 81% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute.tsx index 143213424d..b89aede427 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/importAttribute@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader.tsx similarity index 83% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader.tsx index 41baa16104..9169f0b966 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component-destructured-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component-destructured-loader@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component.tsx similarity index 80% rename from packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component.tsx index 91bbafe612..9b38429966 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-default-component@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported.tsx similarity index 88% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported.tsx index e0c05e815e..b8c6e8c0ff 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline.tsx index 3ba7e085a8..70ca28064d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number.tsx similarity index 90% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number.tsx index 4ee2015806..281e1d4a13 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/random-number@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/random-number@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component.tsx index 3775fd368c..bf8ae8af25 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component.tsx index fda2daef65..5987f84c0a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/react-memo-imported-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/react-memo-imported-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-export-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-export-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-const.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader.tsx index 9a3a590d86..822135ddb1 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); 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/2-separated/development/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure.tsx similarity index 87% rename from packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure.tsx index ead266d792..2aa29a876a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function.tsx index 3dc82be7f6..0a7cee7f7a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/arrow-function@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/arrow-function@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese.tsx similarity index 82% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese.tsx index 1a973d7242..8810334727 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@loader.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/chinese@loader.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties.tsx index 6460e38a9a..68f5556447 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/conditional-properties@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/conditional-properties@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component.tsx similarity index 82% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component.tsx index 0e0f4a3f5c..265b803a90 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/destructured-react-memo-imported-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructured-react-memo-imported-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructuring@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/destructuring@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-as-parameter@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-as-parameter@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration.tsx index 4b496d7359..29d3043856 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/function-declaration@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/function-declaration@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute.tsx similarity index 79% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute.tsx index d4283ffced..eb52fbee2e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/importAttribute@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/importAttribute@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader.tsx similarity index 82% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader.tsx index 98baf76978..37cd9799d7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component-destructured-loader@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component-destructured-loader@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component.tsx similarity index 77% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component.tsx index 0b07f9a22e..00e081670b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-default-component@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported.tsx index 42726b514a..96c6256f57 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline.tsx similarity index 83% rename from packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline.tsx index 47d2a6b626..c97b3c36a5 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@loader.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/inline@loader.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number.tsx similarity index 90% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number.tsx index e7210028d4..48f67bc96a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/random-number@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/random-number@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component.tsx index eac7d8dde9..19e2d97b6f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component.tsx index 32b23c519c..a52cdbad09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=loader'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/react-memo-imported-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/react-memo-imported-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component@loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-export-component@loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-export-component@loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-const.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-const@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-function@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader.tsx index f9000ca496..9d9f580e24 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); 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/2-separated/production/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/retain-exports-loader@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/retain-exports-loader@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure.tsx index 2d4e7962bd..0e8fcc2257 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/useStateDestructure@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@component---errorComponent---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@loader.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/useStateDestructure@loader.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx deleted file mode 100644 index 8a221122d7..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/importAttribute.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx deleted file mode 100644 index fa348ee8d5..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/chinese.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -interface DemoProps { - title: string; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function.tsx similarity index 79% rename from packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function.tsx index 249f67963a..e55be6765d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/arrow-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese.tsx index 9facefe74e..c065d14a4a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@errorComponent.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/chinese@errorComponent.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties.tsx similarity index 77% rename from packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties.tsx index 83c321ab48..279773de15 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/conditional-properties@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component.tsx similarity index 72% rename from packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component.tsx index 43ebf7dade..0fe0b8418d 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructured-react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/destructuring@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter@errorComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-as-parameter@errorComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration.tsx similarity index 77% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration.tsx index 65a721d8d3..dda89e55de 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/function-declaration@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/function-declaration@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute.tsx similarity index 83% rename from packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute.tsx index 07c990f459..d8355986bf 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/importAttribute@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/importAttribute@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader.tsx similarity index 72% rename from packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader.tsx index bff9785320..4e0beddab5 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component-destructured-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component.tsx similarity index 81% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component.tsx index 968e6633d4..b749bed2ea 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-default-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported.tsx similarity index 80% rename from packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported.tsx index 588310bf6c..c397f9dccc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline.tsx similarity index 86% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline.tsx index 3d4163335f..fd3669b108 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@errorComponent.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/inline@errorComponent.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number.tsx index 4846391189..9a267bfdb0 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader'); +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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`]; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/random-number@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/random-number@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component.tsx similarity index 77% rename from packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component.tsx index 3f17903ec6..66da0c232a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component.tsx similarity index 75% rename from packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component.tsx index 5726053824..8db833f30c 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component.tsx similarity index 90% rename from packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component.tsx index 78d93d4369..8373e85c77 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component.tsx @@ -1,4 +1,4 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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/3-mixed/development/retain-export-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-export-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-const.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-const@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader.tsx similarity index 87% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader.tsx index 17a52407a1..0befce3a09 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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/3-mixed/development/retain-exports-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/retain-exports-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure.tsx similarity index 88% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure.tsx index d3a8cb93a1..414db66c2e 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/development/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@errorComponent.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/useStateDestructure@errorComponent.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function.tsx similarity index 77% rename from packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function.tsx index 2246798629..36facc8ac7 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/arrow-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese.tsx similarity index 84% rename from packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese.tsx index dd0e986218..0902b78c6a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/chinese@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@errorComponent.tsx new file mode 100644 index 0000000000..f5392fada0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/chinese@errorComponent.tsx @@ -0,0 +1,3 @@ +interface DemoProps { + title: string; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties.tsx similarity index 75% rename from packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties.tsx index e6101869b0..fe3a1fa350 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/conditional-properties@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component.tsx similarity index 70% rename from packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component.tsx index c7dd641979..1edba360e1 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructured-react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@errorComponent.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/destructuring@errorComponent.tsx @@ -0,0 +1,11 @@ +import thing from 'thing'; +export function test() { + const { + foo: { + bar: { + destructured + } + } + } = thing; + return destructured; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@errorComponent.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-as-parameter@errorComponent.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +// @ts-expect-error +import { useMemo } from 'tan-react'; +const ReactUseMemoCall1 = React.useMemo(function performAction() { + return 'true'; +}, []); +console.info(ReactUseMemoCall1); +const ReactUseMemoCall2 = React.useMemo(() => { + return 'true'; +}, []); +console.info(ReactUseMemoCall2); +const UseMemoCall1 = useMemo(function performAction() { + return 'true'; +}, []); +console.info(UseMemoCall1); +const UseMemoCall2 = useMemo(() => { + return 'true'; +}, []); +console.info(UseMemoCall2); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration.tsx similarity index 75% rename from packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration.tsx index cce7a425a9..13b2b8cc9f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/posts')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/function-declaration@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute.tsx similarity index 81% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute.tsx index db0611d8f2..847ad400fc 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/importAttribute@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/importAttribute@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader.tsx similarity index 69% rename from packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader.tsx index b92fb50bd0..a110778506 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component-destructured-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component.tsx similarity index 78% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component.tsx index 65202cff33..bd196be036 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/imported-default-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-default-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported.tsx similarity index 78% rename from packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported.tsx index da17c0c1a5..0bbac9035a 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline.tsx index 0df06d99cd..5655e25a26 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/2-separated/production/inline.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component'); +const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@errorComponent.tsx new file mode 100644 index 0000000000..a9c5d2b6de --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/inline@errorComponent.tsx @@ -0,0 +1,2 @@ +import { Route } from "inline.tsx"; +Route.addChildren([]); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number.tsx similarity index 83% rename from packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number.tsx index a54c17ca45..e2b0321f7f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number.tsx @@ -1,6 +1,6 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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`]; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/random-number@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component.tsx similarity index 75% rename from packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component.tsx index 0d4b69b83b..1043478308 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component.tsx similarity index 73% rename from packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component.tsx index d1c01924fc..c3f6ce2057 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component.tsx @@ -1,6 +1,6 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split-loader'); +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { createFileRoute } from '@tanstack/react-router'; export const Route = createFileRoute('/')({ diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/react-memo-imported-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component.tsx similarity index 90% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component.tsx index 062f12705d..8373e85c77 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-export-component.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component.tsx @@ -1,4 +1,4 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader'); +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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/3-mixed/production/retain-export-component@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-export-component@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-const.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-const@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-function@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader.tsx similarity index 85% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader.tsx index e566036f96..72982be00f 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader'); +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); 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/3-mixed/production/retain-exports-loader@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-exports-loader@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/retain-exports-loader@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure.tsx similarity index 87% rename from packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure.tsx index d8d650d7fb..ba8e58205b 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure.tsx @@ -1,4 +1,4 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split-component'); +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); import { lazyRouteComponent } from '@tanstack/react-router'; import { startProject } from '~/projects/start'; import { createFileRoute } from '@tanstack/react-router'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure@component---loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@component---loader---notFoundComponent---pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@errorComponent.tsx new file mode 100644 index 0000000000..2c2aba5396 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/useStateDestructure@errorComponent.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { CgCornerUpLeft, CgSpinner } from 'react-icons/cg'; +import { FaDiscord, FaGithub, FaTshirt, FaTwitter } from 'react-icons/fa'; +import { Await, Link, getRouteApi } from '@tanstack/react-router'; +import { Carbon } from '~/components/Carbon'; +import { Footer } from '~/components/Footer'; +import { TbHeartHandshake } from 'react-icons/tb'; +import SponsorPack from '~/components/SponsorPack'; +import { startProject } from '~/projects/start'; +const menu = [{ + label:
+ TanStack +
, + to: '/' +}, +// { +// label: ( +//
+// Examples +//
+// ), +// to: './docs/react/examples/basic', +// }, +// { +// label: ( +//
+// Docs +//
+// ), +// to: './docs/', +// }, +// { +// label: ( +//
+// GitHub +//
+// ), +// to: `https://github.com/${startProject.repo}`, +// }, +{ + label:
+ Discord +
, + to: 'https://tlinz.com/discord' +}, { + label:
+ Merch +
, + to: `https://cottonbureau.com/people/tanstack` +}]; +import { Route } from "useStateDestructure.tsx"; +const librariesRouteApi = getRouteApi('/_libraries'); +export default function VersionIndex() { + const { + sponsorsPromise + } = librariesRouteApi.useLoaderData(); + const { + version + } = Route.useParams(); + const [, setIsDark] = React.useState(true); + React.useEffect(() => { + setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches); + }, []); + const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${startProject.colorFrom} ${startProject.colorTo}`; + return
+
+ {menu?.map((item, i) => { + const label =
{item.label}
; + return
+ {item.to.startsWith('http') ? {label} : + {label} + } +
; + })} +
+
+
+

+ TanStack Start +

+
+ {/*
*/} +
+ Coming Soon! + {/* {version === 'latest' ? latestVersion : version} */} +
+ {/*
*/} +

+ Full-stack React framework{' '} + + powered by TanStack Router + {' '} +

+

+ Full-document SSR, Streaming, Server Functions, bundling and more, + powered by TanStack Router, Vinxi,{' '} + Nitro and Vite. Ready to deploy to + your favorite hosting provider. +

+
+
+
+ So when can I use it? +
+
+
+ TanStack Start is currently in development and is + not yet available for public use. We are working hard to bring you + the best possible experience and will be releasing more details + soon. In the meantime, you can follow along with the development + process by watching the commits on this very website! +
+
+ Yes, you heard that right!{' '} + + TanStack.com is already being built and deployed using TanStack + Start + + ! We are eating our own dog food and are excited to share the + results with you soon! +
+
+ +
+ {/*
+
+ +
+

+ Built on TanStack Router +

+

+ Writing your data fetching logic by hand is over. Tell TanStack + Query where to get your data and how fresh you need it to be and + the rest is automatic. It handles{' '} + + caching, background updates and stale data out of the box with + zero-configuration + + . +

+
+
+
+
+ +
+
+

+ Simple & Familiar +

+

+ If you know how to work with promises or async/await, then you + already know how to use TanStack Query. There's{' '} + + no global state to manage, reducers, normalization systems or + heavy configurations to understand + + . Simply pass a function that resolves your data (or throws an + error) and the rest is history. +

+
+
+
+
+ +
+
+

+ Extensible +

+

+ TanStack Query is configurable down to each observer instance of a + query with knobs and options to fit every use-case. It comes wired + up with{' '} + + dedicated devtools, infinite-loading APIs, and first class + mutation tools that make updating your data a breeze + + . Don't worry though, everything is pre-configured for success! +

+
+
+
*/} + + {/*
+
+

+ No dependencies. All the Features. +

+

+ With zero dependencies, TanStack Query is extremely lean given the + dense feature set it provides. From weekend hobbies all the way to + enterprise e-commerce systems (Yes, I'm lookin' at you Walmart! 😉), + TanStack Query is the battle-hardened tool to help you succeed at + the speed of your creativity. +

+
+
+ {[ + 'Backend agnostic', + 'Dedicated Devtools', + 'Auto Caching', + 'Auto Refetching', + 'Window Focus Refetching', + 'Polling/Realtime Queries', + 'Parallel Queries', + 'Dependent Queries', + 'Mutations API', + 'Automatic Garbage Collection', + 'Paginated/Cursor Queries', + 'Load-More/Infinite Scroll Queries', + 'Scroll Recovery', + 'Request Cancellation', + 'Suspense Ready!', + 'Render-as-you-fetch', + 'Prefetching', + 'Variable-length Parallel Queries', + 'Offline Support', + 'SSR Support', + 'Data Selectors', + ].map((d, i) => { + return ( + + {d} + + ) + })} +
+
*/} + + {/*
+
+ Trusted in Production by +
+ +
+ {(new Array(4) as string[]) + .fill('') + .reduce( + (all) => [...all, ...all], + [ + 'Google', + 'Walmart', + 'Facebook', + 'PayPal', + 'Amazon', + 'American Express', + 'Microsoft', + 'Target', + 'Ebay', + 'Autodesk', + 'CarFAX', + 'Docusign', + 'HP', + 'MLB', + 'Volvo', + 'Ocado', + 'UPC.ch', + 'EFI.com', + 'ReactBricks', + 'Nozzle.io', + 'Uber', + ] + ) + .map((d, i) => ( + + {d} + + ))} +
+ +
*/} + +
+

+ Partners +

+
+
+ + Start You? + +
+
+ We're looking for a TanStack Start OSS Partner to go above and + beyond the call of sponsorship. Are you as invested in TanStack + Start as we are? Let's push the boundaries of Start together! +
+ + Let's chat + +
+
+
+ +
+

+ Sponsors +

+
+ } children={sponsors => { + return ; + }} /> +
+ +
+ +
+
+ +
+ + This ad helps us be happy about our invested time and not burn out and + rage-quit OSS. Yay money! 😉 + +
+ + {/*
+
+

+ Less code, fewer edge cases. +

+

+ Instead of writing reducers, caching logic, timers, retry logic, + complex async/await scripting (I could keep going...), you literally + write a tiny fraction of the code you normally would. You will be + surprised at how little code you're writing or how much code you're + deleting when you use TanStack Query. Try it out with one of the + examples below! +

+
+ {( + [ + { label: 'Angular', value: 'angular' }, + { label: 'React', value: 'react' }, + { label: 'Solid', value: 'solid' }, + { label: 'Svelte', value: 'svelte' }, + { label: 'Vue', value: 'vue' }, + ] as const + ).map((item) => ( + + ))} +
+
+
*/} + + {/* {[''].includes(framework) ? ( +
+
+ Looking for the @tanstack/{framework}-query{' '} + example? We could use your help to build the{' '} + @tanstack/{framework}-query adapter! Join the{' '} + + TanStack Discord Server + {' '} + and let's get to work! +
+
+ ) : ( +
+ +
+ )} */} + + {/*
+
+ Wow, you've come a long way! +
+
+ Only one thing left to do... +
+
+ + Read the Docs! + +
+
*/} +
+
; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx deleted file mode 100644 index 9ebc84c292..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/arrow-function.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); -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', () => Route.ssr) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx deleted file mode 100644 index 4f7287d9e7..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/chinese.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitComponentImporter = () => import('chinese.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -interface DemoProps { - title: string; -} -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx deleted file mode 100644 index 92953a8d73..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/conditional-properties.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/posts')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx deleted file mode 100644 index 4f61756448..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/destructured-react-memo-imported-component.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx deleted file mode 100644 index 97ea93c487..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component-destructured-loader.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx deleted file mode 100644 index c6f26f9073..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported-default-component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx deleted file mode 100644 index c689d65863..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/imported.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx deleted file mode 100644 index a4e404abc0..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/inline.tsx +++ /dev/null @@ -1,11 +0,0 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -Route.addChildren([]); -export const test = 'test'; -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx deleted file mode 100644 index dc6302c229..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-component.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx deleted file mode 100644 index 62bdfc7fe3..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/react-memo-imported-component.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx deleted file mode 100644 index 8b58ea42de..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/retain-exports-loader.tsx +++ /dev/null @@ -1,17 +0,0 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export function loaderFn() { - return { - foo: 'bar' - }; -} -export const Route = createFileRoute('/_layout')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: loaderFn -}); -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx deleted file mode 100644 index 21827b08a3..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/development/useStateDestructure.tsx +++ /dev/null @@ -1,15 +0,0 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { startProject } from '~/projects/start'; -import { createFileRoute } from '@tanstack/react-router'; -import { seo } from '~/utils/seo'; -export const Route = createFileRoute('/_libraries/start/$version/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - meta: () => seo({ - title: startProject.name, - description: startProject.description - }) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx deleted file mode 100644 index 9fbe97111c..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/arrow-function.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split=component---loader'); -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', () => Route.ssr) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx deleted file mode 100644 index b16b32587c..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/conditional-properties.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('conditional-properties.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/posts')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx deleted file mode 100644 index 2146af3018..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/destructured-react-memo-imported-component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx deleted file mode 100644 index 11b059af9f..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/function-declaration.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split=component---loader'); -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', () => Route.ssr) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx deleted file mode 100644 index 8951bf0526..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported-default-component-destructured-loader.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx deleted file mode 100644 index f0f7fd76e1..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/imported.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('imported.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('imported.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx deleted file mode 100644 index 76e5015e8b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/inline.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const $$splitComponentImporter = () => import('inline.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -Route.addChildren([]); -export const test = 'test'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx deleted file mode 100644 index e2769df980..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/random-number.tsx +++ /dev/null @@ -1,11 +0,0 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split=component---loader'); -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`]; -export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; -export const Route = createFileRoute('/')({ - loader: lazyFn($$splitLoaderImporter, 'loader'), - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx deleted file mode 100644 index cc55612e2d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx deleted file mode 100644 index 1428efceb6..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/react-memo-imported-component.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: lazyFn($$splitLoaderImporter, 'loader') -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx deleted file mode 100644 index 062f12705d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/retain-export-component.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split=component---loader'); -import { lazyFn } from '@tanstack/react-router'; -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent } from '../shared/imported'; -export function Layout() { - return
-
- -
- - -
; -} -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx deleted file mode 100644 index 253de7d8d5..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/3-mixed/production/useStateDestructure.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split=component---loader'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { startProject } from '~/projects/start'; -import { createFileRoute } from '@tanstack/react-router'; -import { seo } from '~/utils/seo'; -export const Route = createFileRoute('/_libraries/start/$version/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - meta: () => seo({ - title: startProject.name, - description: startProject.description - }) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx deleted file mode 100644 index be5c0086de..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Link, Outlet } from '@tanstack/react-router'; -import { Route } from "arrow-function.tsx"; -const SplitComponent = () => { - const posts = Route.useLoaderData(); - return
-
    - {[...posts, { - id: 'i-do-not-exist', - title: 'Non-existent Post' - }]?.map(post => { - return
  • - -
    {post.title.substring(0, 20)}
    - -
    • ; - })} -
-
- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx deleted file mode 100644 index d9ed4ea7af..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { fetchPosts } from '../posts'; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx deleted file mode 100644 index 6e6df2f4eb..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@component.tsx +++ /dev/null @@ -1,22 +0,0 @@ -interface DemoProps { - title: string; -} -function Demo({ - title -}: DemoProps) { - return

- {title} -

; -} -const SplitComponent = function HomeComponent() { - return
- - -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx deleted file mode 100644 index aaf3410c69..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@component.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { FalseComponent } from '@modules/false-component'; -const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx deleted file mode 100644 index e10f305ddc..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@loader.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { falseLoader } from '@modules/false-component'; -const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@split.tsx deleted file mode 100644 index d483dd047c..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/conditional-properties@split.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { FalseComponent, falseLoader } from '@modules/false-component'; -const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; -export { SplitComponent as component }; -const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx deleted file mode 100644 index 446d55e26b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@component.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { memo } from 'react'; -function Component() { - return
Component
; -} -const SplitComponent = memo(Component); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx deleted file mode 100644 index 2cb13dc0b8..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split-component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split-loader'); -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', () => Route.ssr) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx deleted file mode 100644 index 544f6ffcbc..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Link, Outlet } from '@tanstack/react-router'; -import { Route } from "function-declaration.tsx"; -const SplitComponent = function PostsComponent() { - const posts = Route.useLoaderData(); - return
-
    - {[...posts, { - id: 'i-do-not-exist', - title: 'Non-existent Post' - }]?.map(post => { - return
  • - -
    {post.title.substring(0, 20)}
    - -
    • ; - })} -
-
- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx deleted file mode 100644 index d9ed4ea7af..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { fetchPosts } from '../posts'; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx deleted file mode 100644 index f34d3c6408..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/importAttribute@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { test } from './test' with { type: 'macro' }; -const SplitComponent = () => test; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx deleted file mode 100644 index e9cae51951..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import importedComponent from '../shared/imported'; -const SplitComponent = importedComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx deleted file mode 100644 index c52d2691b4..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import ImportedDefaultComponent from '../shared/imported'; -const SplitComponent = ImportedDefaultComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx deleted file mode 100644 index 85355cf3a2..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedComponent } from '../shared/imported'; -const SplitComponent = importedComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/imported@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx deleted file mode 100644 index dd352c63ae..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/inline@component.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as styles from '../style.css'; -import { TEST_DATA } from '../test.const'; -const Button = (props: { - children: any; -}) => { - return ; -}; -import { Route } from "inline.tsx"; -Route.addChildren([]); -import { test } from "inline.tsx"; -const SplitComponent = () => { - return
- {test} -

{TEST_DATA.welcome}

- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx deleted file mode 100644 index 0c1f9a375a..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx +++ /dev/null @@ -1,14 +0,0 @@ -const $$splitComponentImporter = () => import('random-number.tsx?tsr-split-component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split-loader'); -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`]; -export const gradients = [`from-rose-500 to-yellow-500`, `from-yellow-500 to-teal-500`, `from-teal-500 to-violet-500`, `from-blue-500 to-pink-500`]; -export const Route = createFileRoute('/')({ - loader: lazyFn($$splitLoaderImporter, 'loader'), - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); -export function TSRDummyComponent() { - return null; -} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx deleted file mode 100644 index 76ed9ff5e0..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@component.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import discordImage from '~/images/discord-logo-white.svg'; -import { sample } from '~/utils/utils'; -import { textColors } from "random-number.tsx"; -import { gradients } from "random-number.tsx"; -import { Route } from "random-number.tsx"; -const SplitComponent = function Index() { - const { - randomNumber - } = Route.useLoaderData(); - const gradient = sample(gradients, randomNumber); - const textColor = sample(textColors, randomNumber); - return <> - {discordImage} - {gradient} - {textColor} - ; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx deleted file mode 100644 index 3dff7886f7..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@loader.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { defer } from '@tanstack/react-router'; -import { getSponsorsForSponsorPack } from '~/server/sponsors'; -const SplitLoader = () => { - return { - randomNumber: Math.random(), - sponsorsPromise: defer(getSponsorsForSponsorPack()) - }; -}; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx deleted file mode 100644 index dfef29c9e3..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@component.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -function Component() { - return
Component
; -} -const SplitComponent = React.memo(Component); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx deleted file mode 100644 index 5a6456643b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@component.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React from 'react'; -import { importedComponent } from '../shared/imported'; -const SplitComponent = React.memo(importedComponent); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx deleted file mode 100644 index 78d93d4369..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx +++ /dev/null @@ -1,27 +0,0 @@ -const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split-loader'); -import { lazyFn } from '@tanstack/react-router'; -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent } from '../shared/imported'; -export function Layout() { - return
-
- -
- - -
; -} -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: lazyFn($$splitLoaderImporter, 'loader') -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.tsx deleted file mode 100644 index 69e27260d4..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; -export const loaderFn = () => { - return importedLoader(); -}; -const Layout = () => { - return
-
- -
- - -
; -}; -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: loaderFn -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.tsx deleted file mode 100644 index 8162228c27..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; -export function loaderFn() { - return importedLoader(); -} -function Layout() { - return
-
- -
- - -
; -} -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: loaderFn -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx deleted file mode 100644 index dde7ab5b9d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@component.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent } from '../shared/imported'; -const HEADER_HEIGHT = '63px'; -const SplitComponent = function Layout() { - return
-
- -
- - -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx deleted file mode 100644 index be5c0086de..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Link, Outlet } from '@tanstack/react-router'; -import { Route } from "arrow-function.tsx"; -const SplitComponent = () => { - const posts = Route.useLoaderData(); - return
-
    - {[...posts, { - id: 'i-do-not-exist', - title: 'Non-existent Post' - }]?.map(post => { - return
  • - -
    {post.title.substring(0, 20)}
    - -
    • ; - })} -
-
- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx deleted file mode 100644 index d9ed4ea7af..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { fetchPosts } from '../posts'; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx deleted file mode 100644 index 6e6df2f4eb..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@component.tsx +++ /dev/null @@ -1,22 +0,0 @@ -interface DemoProps { - title: string; -} -function Demo({ - title -}: DemoProps) { - return

- {title} -

; -} -const SplitComponent = function HomeComponent() { - return
- - -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx deleted file mode 100644 index aaf3410c69..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@component.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { FalseComponent } from '@modules/false-component'; -const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx deleted file mode 100644 index e10f305ddc..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@loader.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { falseLoader } from '@modules/false-component'; -const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@split.tsx deleted file mode 100644 index d483dd047c..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/conditional-properties@split.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { isEnabled } from '@features/feature-flags'; -import TrueImport from '@modules/true-component'; -import { FalseComponent, falseLoader } from '@modules/false-component'; -const SplitComponent = isEnabled ? TrueImport.Component : FalseComponent; -export { SplitComponent as component }; -const SplitLoader = isEnabled ? TrueImport.loader : falseLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx deleted file mode 100644 index 446d55e26b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@component.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { memo } from 'react'; -function Component() { - return
Component
; -} -const SplitComponent = memo(Component); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx deleted file mode 100644 index 544f6ffcbc..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Link, Outlet } from '@tanstack/react-router'; -import { Route } from "function-declaration.tsx"; -const SplitComponent = function PostsComponent() { - const posts = Route.useLoaderData(); - return
-
    - {[...posts, { - id: 'i-do-not-exist', - title: 'Non-existent Post' - }]?.map(post => { - return
  • - -
    {post.title.substring(0, 20)}
    - -
    • ; - })} -
-
- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx deleted file mode 100644 index d9ed4ea7af..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { fetchPosts } from '../posts'; -const SplitLoader = fetchPosts; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx deleted file mode 100644 index 6fecb33f78..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute.tsx +++ /dev/null @@ -1,6 +0,0 @@ -const $$splitComponentImporter = () => import('importAttribute.tsx?tsr-split-component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx deleted file mode 100644 index f34d3c6408..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/importAttribute@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { test } from './test' with { type: 'macro' }; -const SplitComponent = () => test; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx deleted file mode 100644 index e9cae51951..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import importedComponent from '../shared/imported'; -const SplitComponent = importedComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx deleted file mode 100644 index 4d8d04a8be..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx +++ /dev/null @@ -1,6 +0,0 @@ -const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split-component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export const Route = createFileRoute('/')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) -}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx deleted file mode 100644 index c52d2691b4..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import ImportedDefaultComponent from '../shared/imported'; -const SplitComponent = ImportedDefaultComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx deleted file mode 100644 index 85355cf3a2..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@component.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedComponent } from '../shared/imported'; -const SplitComponent = importedComponent; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/imported@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx deleted file mode 100644 index dd352c63ae..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@component.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as styles from '../style.css'; -import { TEST_DATA } from '../test.const'; -const Button = (props: { - children: any; -}) => { - return ; -}; -import { Route } from "inline.tsx"; -Route.addChildren([]); -import { test } from "inline.tsx"; -const SplitComponent = () => { - return
- {test} -

{TEST_DATA.welcome}

- -
; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx deleted file mode 100644 index 76ed9ff5e0..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@component.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import discordImage from '~/images/discord-logo-white.svg'; -import { sample } from '~/utils/utils'; -import { textColors } from "random-number.tsx"; -import { gradients } from "random-number.tsx"; -import { Route } from "random-number.tsx"; -const SplitComponent = function Index() { - const { - randomNumber - } = Route.useLoaderData(); - const gradient = sample(gradients, randomNumber); - const textColor = sample(textColors, randomNumber); - return <> - {discordImage} - {gradient} - {textColor} - ; -}; -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx deleted file mode 100644 index 3dff7886f7..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@loader.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { defer } from '@tanstack/react-router'; -import { getSponsorsForSponsorPack } from '~/server/sponsors'; -const SplitLoader = () => { - return { - randomNumber: Math.random(), - sponsorsPromise: defer(getSponsorsForSponsorPack()) - }; -}; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx deleted file mode 100644 index dfef29c9e3..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@component.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -function Component() { - return
Component
; -} -const SplitComponent = React.memo(Component); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx deleted file mode 100644 index 5a6456643b..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@component.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React from 'react'; -import { importedComponent } from '../shared/imported'; -const SplitComponent = React.memo(importedComponent); -export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx deleted file mode 100644 index c187fe188e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@loader.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { importedLoader } from '../shared/imported'; -const SplitLoader = importedLoader; -export { SplitLoader as loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const.tsx deleted file mode 100644 index 69e27260d4..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; -export const loaderFn = () => { - return importedLoader(); -}; -const Layout = () => { - return
-
- -
- - -
; -}; -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: loaderFn -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function.tsx deleted file mode 100644 index 8162228c27..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createFileRoute, Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent, importedLoader } from '../shared/imported'; -export function loaderFn() { - return importedLoader(); -} -function Layout() { - return
-
- -
- - -
; -} -export const Route = createFileRoute('/_layout')({ - component: Layout, - loader: loaderFn -}); -const HEADER_HEIGHT = '63px'; -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; -export default Layout; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx deleted file mode 100644 index 6228d1c51d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx +++ /dev/null @@ -1,14 +0,0 @@ -const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split-component'); -import { lazyRouteComponent } from '@tanstack/react-router'; -import { createFileRoute } from '@tanstack/react-router'; -export function loaderFn() { - return { - foo: 'bar' - }; -} -export const Route = createFileRoute('/_layout')({ - component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), - loader: loaderFn -}); -export const SIDEBAR_WIDTH = '150px'; -export const SIDEBAR_MINI_WIDTH = '80px'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx deleted file mode 100644 index dde7ab5b9d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@component.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Outlet } from '@tanstack/react-router'; -import { importedComponent as ImportedComponent } from '../shared/imported'; -const HEADER_HEIGHT = '63px'; -const SplitComponent = function Layout() { - return
-
- -
- - -
; -}; -export { SplitComponent as component }; \ No newline at end of file From dab006fa0ce35fe22491801adc7c9bbad9d94b50 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:26:57 +1300 Subject: [PATCH 16/35] test(router-plugin): add more test files --- .../tests/code-splitter/shared/imported.tsx | 12 ++++++++++++ .../development/imported-errorComponent.tsx | 11 +++++++++++ .../imported-errorComponent@component.tsx | 3 +++ .../imported-errorComponent@errorComponent.tsx | 3 +++ .../imported-errorComponent@notFoundComponent.tsx | 0 .../imported-errorComponent@pendingComponent.tsx | 0 .../development/imported-notFoundComponent.tsx | 11 +++++++++++ .../imported-notFoundComponent@component.tsx | 3 +++ .../imported-notFoundComponent@errorComponent.tsx | 0 .../imported-notFoundComponent@notFoundComponent.tsx | 3 +++ .../imported-notFoundComponent@pendingComponent.tsx | 0 .../development/imported-pendingComponent.tsx | 11 +++++++++++ .../imported-pendingComponent@component.tsx | 3 +++ .../imported-pendingComponent@errorComponent.tsx | 0 .../imported-pendingComponent@notFoundComponent.tsx | 0 .../imported-pendingComponent@pendingComponent.tsx | 3 +++ .../1-default/production/imported-errorComponent.tsx | 8 ++++++++ .../production/imported-errorComponent@component.tsx | 3 +++ .../imported-errorComponent@errorComponent.tsx | 3 +++ .../imported-errorComponent@notFoundComponent.tsx | 0 .../imported-errorComponent@pendingComponent.tsx | 0 .../production/imported-notFoundComponent.tsx | 8 ++++++++ .../imported-notFoundComponent@component.tsx | 3 +++ .../imported-notFoundComponent@errorComponent.tsx | 0 .../imported-notFoundComponent@notFoundComponent.tsx | 3 +++ .../imported-notFoundComponent@pendingComponent.tsx | 0 .../production/imported-pendingComponent.tsx | 8 ++++++++ .../imported-pendingComponent@component.tsx | 3 +++ .../imported-pendingComponent@errorComponent.tsx | 0 .../imported-pendingComponent@notFoundComponent.tsx | 0 .../imported-pendingComponent@pendingComponent.tsx | 3 +++ .../development/imported-errorComponent.tsx | 11 +++++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../development/imported-errorComponent@loader.tsx | 0 .../development/imported-notFoundComponent.tsx | 11 +++++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../imported-notFoundComponent@loader.tsx | 0 .../development/imported-pendingComponent.tsx | 11 +++++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../development/imported-pendingComponent@loader.tsx | 0 .../production/imported-errorComponent.tsx | 8 ++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../production/imported-errorComponent@loader.tsx | 0 .../production/imported-notFoundComponent.tsx | 8 ++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../production/imported-notFoundComponent@loader.tsx | 0 .../production/imported-pendingComponent.tsx | 8 ++++++++ ...ponent---notFoundComponent---pendingComponent.tsx | 5 +++++ .../production/imported-pendingComponent@loader.tsx | 0 .../development/imported-errorComponent.tsx | 11 +++++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 3 +++ .../imported-errorComponent@errorComponent.tsx | 3 +++ .../development/imported-notFoundComponent.tsx | 11 +++++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 5 +++++ .../imported-notFoundComponent@errorComponent.tsx | 0 .../development/imported-pendingComponent.tsx | 11 +++++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 5 +++++ .../imported-pendingComponent@errorComponent.tsx | 0 .../production/imported-errorComponent.tsx | 8 ++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 3 +++ .../imported-errorComponent@errorComponent.tsx | 3 +++ .../production/imported-notFoundComponent.tsx | 8 ++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 5 +++++ .../imported-notFoundComponent@errorComponent.tsx | 0 .../production/imported-pendingComponent.tsx | 8 ++++++++ ...loader---notFoundComponent---pendingComponent.tsx | 5 +++++ .../imported-pendingComponent@errorComponent.tsx | 0 .../test-files/imported-errorComponent.tsx | 10 ++++++++++ .../test-files/imported-notFoundComponent.tsx | 10 ++++++++++ .../test-files/imported-pendingComponent.tsx | 10 ++++++++++ 70 files changed, 311 insertions(+) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/test-files/imported-errorComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/test-files/imported-notFoundComponent.tsx create mode 100644 packages/router-plugin/tests/code-splitter/test-files/imported-pendingComponent.tsx diff --git a/packages/router-plugin/tests/code-splitter/shared/imported.tsx b/packages/router-plugin/tests/code-splitter/shared/imported.tsx index 521bb54ffc..3613d31eb8 100644 --- a/packages/router-plugin/tests/code-splitter/shared/imported.tsx +++ b/packages/router-plugin/tests/code-splitter/shared/imported.tsx @@ -4,6 +4,18 @@ export const importedComponent = () => { return
I am imported
} +export const importedErrorComponent = () => { + return
I am an error imported
+} + +export const importedNotFoundComponent = () => { + return
I am a not found imported
+} + +export const importedPendingComponent = () => { + return
I am a pending imported
+} + export const importedLoader = () => { return { randomNumber: Math.random(), diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent.tsx new file mode 100644 index 0000000000..0701029aa3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent.tsx @@ -0,0 +1,11 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=errorComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@errorComponent.tsx new file mode 100644 index 0000000000..1d7f487fd2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@errorComponent.tsx @@ -0,0 +1,3 @@ +import { importedErrorComponent } from '../shared/imported'; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-errorComponent@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..63787a44d6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent.tsx @@ -0,0 +1,11 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=notFoundComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..b3e0a2bdcd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@notFoundComponent.tsx @@ -0,0 +1,3 @@ +import { importedNotFoundComponent } from '../shared/imported'; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-notFoundComponent@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent.tsx new file mode 100644 index 0000000000..143fe9c5e3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent.tsx @@ -0,0 +1,11 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@pendingComponent.tsx new file mode 100644 index 0000000000..08170fadcd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/development/imported-pendingComponent@pendingComponent.tsx @@ -0,0 +1,3 @@ +import { importedPendingComponent } from '../shared/imported'; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent.tsx new file mode 100644 index 0000000000..a7b2f8702a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent.tsx @@ -0,0 +1,8 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=errorComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@errorComponent.tsx new file mode 100644 index 0000000000..1d7f487fd2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@errorComponent.tsx @@ -0,0 +1,3 @@ +import { importedErrorComponent } from '../shared/imported'; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-errorComponent@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..0f9a8a66b6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent.tsx @@ -0,0 +1,8 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=notFoundComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..b3e0a2bdcd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@notFoundComponent.tsx @@ -0,0 +1,3 @@ +import { importedNotFoundComponent } from '../shared/imported'; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-notFoundComponent@pendingComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent.tsx new file mode 100644 index 0000000000..4b0c7bd790 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent.tsx @@ -0,0 +1,8 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@component.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@component.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@notFoundComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@pendingComponent.tsx new file mode 100644 index 0000000000..08170fadcd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/1-default/production/imported-pendingComponent@pendingComponent.tsx @@ -0,0 +1,3 @@ +import { importedPendingComponent } from '../shared/imported'; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent.tsx new file mode 100644 index 0000000000..108ad65fde --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent.tsx @@ -0,0 +1,11 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..a8e97d693c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedErrorComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-errorComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..4df3a0edc2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent.tsx @@ -0,0 +1,11 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e4e3e353fd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedNotFoundComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-notFoundComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent.tsx new file mode 100644 index 0000000000..8a12860d09 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent.tsx @@ -0,0 +1,11 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..aaa3ecd4f9 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedPendingComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/development/imported-pendingComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent.tsx new file mode 100644 index 0000000000..ae97f66663 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent.tsx @@ -0,0 +1,8 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..a8e97d693c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedErrorComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-errorComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..a0d6a07a7f --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent.tsx @@ -0,0 +1,8 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e4e3e353fd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedNotFoundComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-notFoundComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent.tsx new file mode 100644 index 0000000000..f8cd11e614 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent.tsx @@ -0,0 +1,8 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---errorComponent---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..aaa3ecd4f9 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@component---errorComponent---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedPendingComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/2-components-combined-loader-separate/production/imported-pendingComponent@loader.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent.tsx new file mode 100644 index 0000000000..26951c2d0a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent.tsx @@ -0,0 +1,11 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=errorComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@errorComponent.tsx new file mode 100644 index 0000000000..1d7f487fd2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-errorComponent@errorComponent.tsx @@ -0,0 +1,3 @@ +import { importedErrorComponent } from '../shared/imported'; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..54565ca6f1 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent.tsx @@ -0,0 +1,11 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e4e3e353fd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedNotFoundComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-notFoundComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent.tsx new file mode 100644 index 0000000000..02997dc053 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent.tsx @@ -0,0 +1,11 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); +export function TSRDummyComponent() { + return null; +} \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..aaa3ecd4f9 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedPendingComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/development/imported-pendingComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent.tsx new file mode 100644 index 0000000000..f58664d12a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent.tsx @@ -0,0 +1,8 @@ +const $$splitErrorComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=errorComponent'); +const $$splitComponentImporter = () => import('imported-errorComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + errorComponent: lazyRouteComponent($$splitErrorComponentImporter, 'errorComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..c52d2691b4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@errorComponent.tsx new file mode 100644 index 0000000000..1d7f487fd2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-errorComponent@errorComponent.tsx @@ -0,0 +1,3 @@ +import { importedErrorComponent } from '../shared/imported'; +const SplitErrorComponent = importedErrorComponent; +export { SplitErrorComponent as errorComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..3880466641 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent.tsx @@ -0,0 +1,8 @@ +const $$splitNotFoundComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-notFoundComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + notFoundComponent: lazyRouteComponent($$splitNotFoundComponentImporter, 'notFoundComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..e4e3e353fd --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedNotFoundComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitNotFoundComponent = importedNotFoundComponent; +export { SplitNotFoundComponent as notFoundComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-notFoundComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent.tsx new file mode 100644 index 0000000000..939c087ebb --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent.tsx @@ -0,0 +1,8 @@ +const $$splitPendingComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +const $$splitComponentImporter = () => import('imported-pendingComponent.tsx?tsr-split=component---loader---notFoundComponent---pendingComponent'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + pendingComponent: lazyRouteComponent($$splitPendingComponentImporter, 'pendingComponent') +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx new file mode 100644 index 0000000000..aaa3ecd4f9 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@component---loader---notFoundComponent---pendingComponent.tsx @@ -0,0 +1,5 @@ +import ImportedDefaultComponent, { importedPendingComponent } from '../shared/imported'; +const SplitComponent = ImportedDefaultComponent; +export { SplitComponent as component }; +const SplitPendingComponent = importedPendingComponent; +export { SplitPendingComponent as pendingComponent }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@errorComponent.tsx b/packages/router-plugin/tests/code-splitter/snapshots/3-all-combined-errorComponent-separate/production/imported-pendingComponent@errorComponent.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/test-files/imported-errorComponent.tsx b/packages/router-plugin/tests/code-splitter/test-files/imported-errorComponent.tsx new file mode 100644 index 0000000000..d05333e320 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/test-files/imported-errorComponent.tsx @@ -0,0 +1,10 @@ +import { createFileRoute } from '@tanstack/react-router' + +import ImportedDefaultComponent, { + importedErrorComponent, +} from '../shared/imported' + +export const Route = createFileRoute('/')({ + component: ImportedDefaultComponent, + errorComponent: importedErrorComponent, +}) diff --git a/packages/router-plugin/tests/code-splitter/test-files/imported-notFoundComponent.tsx b/packages/router-plugin/tests/code-splitter/test-files/imported-notFoundComponent.tsx new file mode 100644 index 0000000000..08d0cd0335 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/test-files/imported-notFoundComponent.tsx @@ -0,0 +1,10 @@ +import { createFileRoute } from '@tanstack/react-router' + +import ImportedDefaultComponent, { + importedNotFoundComponent, +} from '../shared/imported' + +export const Route = createFileRoute('/')({ + component: ImportedDefaultComponent, + notFoundComponent: importedNotFoundComponent, +}) diff --git a/packages/router-plugin/tests/code-splitter/test-files/imported-pendingComponent.tsx b/packages/router-plugin/tests/code-splitter/test-files/imported-pendingComponent.tsx new file mode 100644 index 0000000000..42cccb0639 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/test-files/imported-pendingComponent.tsx @@ -0,0 +1,10 @@ +import { createFileRoute } from '@tanstack/react-router' + +import ImportedDefaultComponent, { + importedPendingComponent, +} from '../shared/imported' + +export const Route = createFileRoute('/')({ + component: ImportedDefaultComponent, + pendingComponent: importedPendingComponent, +}) From 3fbb8c0074375230c7f2afbd6550792bfbb5ab8a Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:33:46 +1300 Subject: [PATCH 17/35] chore: update jsdocs --- packages/router-plugin/src/core/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index a22c2fba1a..770728601b 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -29,7 +29,7 @@ const splitGroupingsSchema = z export type CodeSplittingOptions = { /** * - * @default [["component"]] + * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] */ defaultBehaviour?: CodeSplitGroupings } From 2af1d0b3fd9f9a7abab89da88cdd882a0595d482 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 16:39:22 +1300 Subject: [PATCH 18/35] chore(router-plugin): internal typing --- .../src/core/router-code-splitter-plugin.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 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 7a6da63f8d..d3d3aeb63d 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -7,9 +7,13 @@ import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, } from './code-splitter/compilers' -import { defaultCodeSplitGroupings, tsrSplit } from './constants' +import { + defaultCodeSplitGroupings, + splitRouteIdentNodes, + tsrSplit, +} from './constants' import { decodeIdentifier } from './code-splitter/path-ids' -import type { CodeSplitGroupings } from './constants' +import type { CodeSplitGroupings, SplitRouteIdentNodes } from './constants' import type { Config } from './config' import type { @@ -132,14 +136,16 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ) } - const grouping = decodeIdentifier(splitValue) + const rawGrouping = decodeIdentifier(splitValue) + const grouping = [...new Set(rawGrouping)].filter((p) => + splitRouteIdentNodes.includes(p as any), + ) as Array const result = compileCodeSplitVirtualRoute({ code, root: ROOT, filename: id, - // TODO: Solve this typing issue - splitTargets: grouping as any, + splitTargets: grouping, }) if (debug) { From 60d5e9fdb1cda6435abe025edb0386c629a4e560 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 17:05:02 +1300 Subject: [PATCH 19/35] fix(router-plugin): revert the chaining --- .../src/core/router-code-splitter-plugin.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 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 d3d3aeb63d..978d416343 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -118,14 +118,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ): UnpluginTransformResult => { if (debug) console.info('Splitting Route: ', id) - const [_, ...pathnameParts] = id - // replace backslashes with forward slashes - .replace(/\\/g, '/') - .split('/') - [ - // Only the last part of the pathname is used to determine the split value - -1 - ]!.split('?') + const [_, ...pathnameParts] = id.split('?') const searchParams = new URLSearchParams(pathnameParts.join('?')) const splitValue = searchParams.get(tsrSplit) From 0f3486ecb979725a2346a7ab1fcc2cca0395f28a Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 17:17:41 +1300 Subject: [PATCH 20/35] fix(router-plugin): handle type-assertions --- .../src/core/code-splitter/compilers.ts | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 2f4183d34d..833b4ac16d 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -595,6 +595,18 @@ export function compileCodeSplitVirtualRoute( ), ]), ) + } else if (t.isTSAsExpression(splitNode)) { + // remove the type assertion + splitNode = splitNode.expression + programPath.pushContainer( + 'body', + t.variableDeclaration('const', [ + t.variableDeclarator( + t.identifier(splitMeta.localExporterIdent), + splitNode, + ), + ]), + ) } else { console.info('Unexpected splitNode type:', splitNode) throw new Error(`Unexpected splitNode type ☝️: ${splitNode.type}`) @@ -679,6 +691,14 @@ export function compileCodeSplitVirtualRoute( }) } +export function detectCodeSplitGroupingsFromRoute( + opts: ParseAstOptions, +): Array | undefined { + const ast = parseAst(opts) + + return undefined +} + function getImportSpecifierAndPathFromLocalName( programPath: babel.NodePath, name: string, From 38965388e399c2a8f328e4e9b8650ee45aec7d17 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:14:32 +1300 Subject: [PATCH 21/35] feat(router-plugin): implement codesplitting by static analysis --- .../src/core/code-splitter/compilers.ts | 76 +++++++++++- .../src/core/router-code-splitter-plugin.ts | 10 +- .../router-plugin/tests/code-splitter.test.ts | 67 +---------- .../detect-route-codesplit-groupings.test.ts | 111 ++++++++++++++++++ 4 files changed, 196 insertions(+), 68 deletions(-) create mode 100644 packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 833b4ac16d..b239ffc7af 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -691,12 +691,84 @@ export function compileCodeSplitVirtualRoute( }) } +/** + * This function should read get the options from by searching for the key `codeSplitGroupings` + * on createFileRoute and return it's values if it exists, else return undefined + */ export function detectCodeSplitGroupingsFromRoute( opts: ParseAstOptions, -): Array | undefined { +): CodeSplitGroupings | undefined { const ast = parseAst(opts) - return undefined + let codeSplitGroupings: CodeSplitGroupings | undefined = undefined + + babel.traverse(ast, { + Program: { + enter(programPath) { + programPath.traverse({ + CallExpression(path) { + if (!t.isIdentifier(path.node.callee)) { + return + } + + if ( + !( + path.node.callee.name === 'createRoute' || + path.node.callee.name === 'createFileRoute' + ) + ) { + return + } + + if (t.isCallExpression(path.parentPath.node)) { + const options = resolveIdentifier( + path, + path.parentPath.node.arguments[0], + ) + + if (t.isObjectExpression(options)) { + options.properties.forEach((prop) => { + if (t.isObjectProperty(prop)) { + if (t.isIdentifier(prop.key)) { + if (prop.key.name === 'codeSplitGroupings') { + const value = prop.value + + if (t.isArrayExpression(value)) { + codeSplitGroupings = value.elements.map((group) => { + if (t.isArrayExpression(group)) { + return group.elements.map((node) => { + if (!t.isStringLiteral(node)) { + throw new Error( + 'You must provide a string literal for the codeSplitGroupings', + ) + } + + return node.value + }) as Array + } + + throw new Error( + 'You must provide arrays with codeSplitGroupings options.', + ) + }) + } else { + throw new Error( + 'You must provide an array of arrays for the codeSplitGroupings.', + ) + } + } + } + } + }) + } + } + }, + }) + }, + }, + }) + + return codeSplitGroupings } function getImportSpecifierAndPathFromLocalName( 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 978d416343..9efd0894af 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -6,6 +6,7 @@ import { getConfig } from './config' import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, + detectCodeSplitGroupingsFromRoute, } from './code-splitter/compilers' import { defaultCodeSplitGroupings, @@ -94,7 +95,14 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ): UnpluginTransformResult => { if (debug) console.info('Compiling Route: ', id) - const splitGroupings: CodeSplitGroupings = getGlobalCodeSplitGroupings() + const groupingFromCode = detectCodeSplitGroupingsFromRoute({ + code, + root: ROOT, + filename: id, + }) + + const splitGroupings: CodeSplitGroupings = + groupingFromCode || getGlobalCodeSplitGroupings() const compiledReferenceRoute = compileCodeSplitReferenceRoute({ code, diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index e915f08f43..7f0c468c98 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -14,7 +14,7 @@ async function getFilenames() { return await readdir(path.resolve(__dirname, './code-splitter/test-files')) } -const testGroups = [ +const testGroups: Array<{ name: string; groupings: CodeSplitGroupings }> = [ { name: '1-default', groupings: defaultCodeSplitGroupings, @@ -33,7 +33,7 @@ const testGroups = [ ['errorComponent'], ], }, -] as Array<{ name: string; groupings: CodeSplitGroupings }> +] describe('code-splitter works', () => { describe.each(testGroups)( @@ -106,66 +106,3 @@ describe('code-splitter works', () => { }, ) }) - -// it.each(filenames)( -// 'should handle the "reference" compiling of "%s"', -// async (filename) => { -// const file = await readFile( -// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), -// ) -// const code = file.toString() - -// const compileResult = compileCodeSplitReferenceRoute({ -// code, -// root: './code-splitter/test-files', -// filename, -// isProduction: NODE_ENV === 'production', -// }) - -// await expect(compileResult.code).toMatchFileSnapshot( -// `./code-splitter/snapshots/${NODE_ENV}/${filename}`, -// ) -// }, -// ) - -// it.each(filenames)( -// 'should handle the "component" splitting of "%s"', -// async (filename) => { -// const file = await readFile( -// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), -// ) -// const code = file.toString() - -// const splitResult = compileCodeSplitVirtualRoute({ -// code: code, -// root: './code-splitter/test-files', -// filename: `${filename}?${splitPrefixes.ROUTE_COMPONENT}`, -// splitTargets: ['component'], -// }) - -// await expect(splitResult.code).toMatchFileSnapshot( -// `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@component.tsx`, -// ) -// }, -// ) - -// it.each(filenames)( -// 'should handle the "loader" splitting of "%s"', -// async (filename) => { -// const file = await readFile( -// path.resolve(__dirname, `./code-splitter/test-files/${filename}`), -// ) -// const code = file.toString() - -// const splitResult = compileCodeSplitVirtualRoute({ -// code: code, -// root: './code-splitter/test-files', -// filename: `${filename}?${splitPrefixes.ROUTE_LOADER}`, -// splitTargets: ['loader'], -// }) - -// await expect(splitResult.code).toMatchFileSnapshot( -// `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@loader.tsx`, -// ) -// }, -// ) diff --git a/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts b/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts new file mode 100644 index 0000000000..a450337580 --- /dev/null +++ b/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts @@ -0,0 +1,111 @@ +import { describe, expect, it } from 'vitest' +import { detectCodeSplitGroupingsFromRoute } from '../src/core/code-splitter/compilers' +import { defaultCodeSplitGroupings } from '../src/core/constants' +import type { CodeSplitGroupings } from '../src/core/constants' + +const successCases: Array<{ + name: string + expected: CodeSplitGroupings | undefined + code: string +}> = [ + { + name: 'defaults', + code: ` +import {createFileRoute} from '@tanstack/react-router' +export const Route = createFileRoute('/')({ +codeSplitGroupings: [ + ['component'], + ['pendingComponent'], + ['errorComponent'], + ['notFoundComponent'] +] +}) +`, + expected: defaultCodeSplitGroupings, + }, + { + name: 'loader-separate-components-combined', + code: ` +import {createFileRoute} from '@tanstack/react-router' +export const Route = createFileRoute('/')({ +codeSplitGroupings: [ + ['loader'], + ['component', 'pendingComponent', 'errorComponent', 'notFoundComponent'] +] +}) +`, + expected: [ + ['loader'], + ['component', 'pendingComponent', 'errorComponent', 'notFoundComponent'], + ], + }, + { + name: 'limited-loader-and-component', + code: ` +import {createFileRoute} from '@tanstack/react-router' +export const Route = createFileRoute('/')({ +codeSplitGroupings: [ + ['loader', 'component'], + ['pendingComponent', 'errorComponent', 'notFoundComponent'] +] +}) +`, + expected: [ + ['loader', 'component'], + ['pendingComponent', 'errorComponent', 'notFoundComponent'], + ], + }, + { + name: 'empty', + code: ` +import {createFileRoute} from '@tanstack/react-router' +export const Route = createFileRoute('/')({}) +`, + expected: undefined, + }, +] + +describe('detectCodeSplitGroupingsFromRoute - success', () => { + it.each(successCases)( + 'should detect code split groupings for $name', + ({ code, expected }) => { + const result = detectCodeSplitGroupingsFromRoute({ + code: code, + filename: 'test.ts', + root: '/src', + }) + + expect(result).toEqual(expected) + }, + ) +}) + +const failCases: Array<{ + name: string + code: string +}> = [ + { + name: 'not-nested-array', + code: ` + import {createFileRoute} from '@tanstack/react-router' + export const Route = createFileRoute('/')({ + codeSplitGroupings: [ + 'loader', + ] + }) + `, + }, + { + name: 'reference-variable', + code: ` +import {createFileRoute} from '@tanstack/react-router' +const groupings = [ + ['loader'], + ['component'], +] +export const Route = createFileRoute('/')({ +codeSplitGroupings: groupings +}) +`, + }, +] From 1e76ddec16f0d6391f8a7f0dda94d0e0b8ab9963 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:21:00 +1300 Subject: [PATCH 22/35] test: don't fail during build --- .../basic-file-based-code-splitting/src/routes/posts.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx index c7a09ed7f8..87947eeda6 100644 --- a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx +++ b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx @@ -5,6 +5,8 @@ import { fetchPosts } from '../posts' export const Route = createFileRoute('/posts')({ loader: fetchPosts, component: PostsComponent, + // @ts-expect-error + codeSplitGroupings: [['component']], }) function PostsComponent() { From fb1c706a4cc171c8e083d24a4f3e45901f5c9849 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 18:21:16 +1300 Subject: [PATCH 23/35] chore(router-plugin): validate user input --- packages/router-plugin/src/core/config.ts | 2 +- .../router-plugin/src/core/router-code-splitter-plugin.ts | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 770728601b..2b34bbf18e 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -6,7 +6,7 @@ import { import { splitRouteIdentNodes } from './constants' import type { CodeSplitGroupings } from './constants' -const splitGroupingsSchema = z +export const splitGroupingsSchema = z .array(z.array(z.enum(splitRouteIdentNodes)), { message: "Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", 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 9efd0894af..36b21d2cd9 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -2,7 +2,7 @@ import { isAbsolute, join, normalize } from 'node:path' import { fileURLToPath, pathToFileURL } from 'node:url' import { logDiff } from '@tanstack/router-utils' -import { getConfig } from './config' +import { getConfig, splitGroupingsSchema } from './config' import { compileCodeSplitReferenceRoute, compileCodeSplitVirtualRoute, @@ -101,6 +101,10 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< filename: id, }) + if (groupingFromCode) { + splitGroupingsSchema.parse(groupingFromCode) + } + const splitGroupings: CodeSplitGroupings = groupingFromCode || getGlobalCodeSplitGroupings() From 766f50f174febd96afb79a82a89e273a713925d9 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 19:13:00 +1300 Subject: [PATCH 24/35] refactor(router-plugin): also extract the routeId --- .../src/core/code-splitter/compilers.ts | 21 +++++++--- .../src/core/router-code-splitter-plugin.ts | 8 ++-- .../detect-route-codesplit-groupings.test.ts | 40 ++++++++++++++----- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index b239ffc7af..bd6b70a069 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -695,11 +695,14 @@ export function compileCodeSplitVirtualRoute( * This function should read get the options from by searching for the key `codeSplitGroupings` * on createFileRoute and return it's values if it exists, else return undefined */ -export function detectCodeSplitGroupingsFromRoute( - opts: ParseAstOptions, -): CodeSplitGroupings | undefined { +export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): { + groupings: CodeSplitGroupings | undefined + routeId: string +} { const ast = parseAst(opts) + let routeId = '' + let codeSplitGroupings: CodeSplitGroupings | undefined = undefined babel.traverse(ast, { @@ -721,11 +724,19 @@ export function detectCodeSplitGroupingsFromRoute( } if (t.isCallExpression(path.parentPath.node)) { + // Extract out the routeId + if (t.isCallExpression(path.parentPath.node.callee)) { + const callee = path.parentPath.node.callee + if (t.isStringLiteral(callee.arguments[0])) { + routeId = callee.arguments[0].value + } + } + + // Continue with extracting the codeSplitGroupings const options = resolveIdentifier( path, path.parentPath.node.arguments[0], ) - if (t.isObjectExpression(options)) { options.properties.forEach((prop) => { if (t.isObjectProperty(prop)) { @@ -768,7 +779,7 @@ export function detectCodeSplitGroupingsFromRoute( }, }) - return codeSplitGroupings + return { groupings: codeSplitGroupings, routeId } } function getImportSpecifierAndPathFromLocalName( 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 36b21d2cd9..0a7b46091d 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -95,18 +95,18 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ): UnpluginTransformResult => { if (debug) console.info('Compiling Route: ', id) - const groupingFromCode = detectCodeSplitGroupingsFromRoute({ + const fromCode = detectCodeSplitGroupingsFromRoute({ code, root: ROOT, filename: id, }) - if (groupingFromCode) { - splitGroupingsSchema.parse(groupingFromCode) + if (fromCode.groupings) { + splitGroupingsSchema.parse(fromCode) } const splitGroupings: CodeSplitGroupings = - groupingFromCode || getGlobalCodeSplitGroupings() + fromCode.groupings || getGlobalCodeSplitGroupings() const compiledReferenceRoute = compileCodeSplitReferenceRoute({ code, diff --git a/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts b/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts index a450337580..69fec8ce11 100644 --- a/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts +++ b/packages/router-plugin/tests/detect-route-codesplit-groupings.test.ts @@ -5,14 +5,15 @@ import type { CodeSplitGroupings } from '../src/core/constants' const successCases: Array<{ name: string - expected: CodeSplitGroupings | undefined code: string + expectedGrouping: CodeSplitGroupings | undefined + expectedRouteId: string }> = [ { name: 'defaults', code: ` import {createFileRoute} from '@tanstack/react-router' -export const Route = createFileRoute('/')({ +export const Route = createFileRoute('/posts')({ codeSplitGroupings: [ ['component'], ['pendingComponent'], @@ -21,61 +22,66 @@ codeSplitGroupings: [ ] }) `, - expected: defaultCodeSplitGroupings, + expectedGrouping: defaultCodeSplitGroupings, + expectedRouteId: '/posts', }, { name: 'loader-separate-components-combined', code: ` import {createFileRoute} from '@tanstack/react-router' -export const Route = createFileRoute('/')({ +export const Route = createFileRoute('/posts')({ codeSplitGroupings: [ ['loader'], ['component', 'pendingComponent', 'errorComponent', 'notFoundComponent'] ] }) `, - expected: [ + expectedGrouping: [ ['loader'], ['component', 'pendingComponent', 'errorComponent', 'notFoundComponent'], ], + expectedRouteId: '/posts', }, { name: 'limited-loader-and-component', code: ` import {createFileRoute} from '@tanstack/react-router' -export const Route = createFileRoute('/')({ +export const Route = createFileRoute('/posts')({ codeSplitGroupings: [ ['loader', 'component'], ['pendingComponent', 'errorComponent', 'notFoundComponent'] ] }) `, - expected: [ + expectedGrouping: [ ['loader', 'component'], ['pendingComponent', 'errorComponent', 'notFoundComponent'], ], + expectedRouteId: '/posts', }, { name: 'empty', code: ` import {createFileRoute} from '@tanstack/react-router' -export const Route = createFileRoute('/')({}) +export const Route = createFileRoute('/posts')({}) `, - expected: undefined, + expectedGrouping: undefined, + expectedRouteId: '/posts', }, ] describe('detectCodeSplitGroupingsFromRoute - success', () => { it.each(successCases)( 'should detect code split groupings for $name', - ({ code, expected }) => { + ({ code, expectedGrouping, expectedRouteId }) => { const result = detectCodeSplitGroupingsFromRoute({ code: code, filename: 'test.ts', root: '/src', }) - expect(result).toEqual(expected) + expect(result.groupings).toEqual(expectedGrouping) + expect(result.routeId).toEqual(expectedRouteId) }, ) }) @@ -109,3 +115,15 @@ codeSplitGroupings: groupings `, }, ] + +describe('detectCodeSplitGroupingsFromRoute - fail', () => { + it.each(failCases)('should throw error for $name', ({ code }) => { + expect(() => + detectCodeSplitGroupingsFromRoute({ + code: code, + filename: 'test.ts', + root: '/src', + }), + ).toThrowError() + }) +}) From 971f420a2791e0eb6a19a6796097160b39859c60 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 20:50:04 +1300 Subject: [PATCH 25/35] feat(router-plugin): add the `shouldSplit` fn --- .../basic-file-based/vite.config.js | 14 +++++++++++++- packages/router-plugin/src/core/config.ts | 12 +++++++++++- .../src/core/router-code-splitter-plugin.ts | 17 ++++++++++++++++- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/e2e/react-router/basic-file-based/vite.config.js b/e2e/react-router/basic-file-based/vite.config.js index 9cb8cad864..d6f982d4b2 100644 --- a/e2e/react-router/basic-file-based/vite.config.js +++ b/e2e/react-router/basic-file-based/vite.config.js @@ -4,5 +4,17 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [TanStackRouterVite(), react()], + plugins: [ + TanStackRouterVite({ + autoCodeSplitting: true, + codeSplittingOptions: { + shouldSplit: ({ routeId }) => { + if (routeId === '/posts') { + return [['component', 'pendingComponent']] + } + }, + }, + }), + react(), + ], }) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 2b34bbf18e..23045d35ee 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -4,6 +4,7 @@ import { getConfig as getGeneratorConfig, } from '@tanstack/router-generator' import { splitRouteIdentNodes } from './constants' +import type { RegisteredRouter, RouteIds } from '@tanstack/react-router' import type { CodeSplitGroupings } from './constants' export const splitGroupingsSchema = z @@ -28,13 +29,22 @@ export const splitGroupingsSchema = z export type CodeSplittingOptions = { /** - * + * Use this function to programmatically control the code splitting behaviour + * based on the `routeId` for each route. + * @param params + */ + shouldSplit?: (params: { + routeId: RouteIds + }) => CodeSplitGroupings | undefined | void + /** + * The default/global configuration to control your code splitting behaviour per route. * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] */ defaultBehaviour?: CodeSplitGroupings } const codeSplittingOptionsSchema = z.object({ + shouldSplit: z.function().optional(), defaultGroupings: splitGroupingsSchema.optional(), }) 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 0a7b46091d..0a303b29e6 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -88,6 +88,9 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< defaultCodeSplitGroupings ) } + const getShouldSplitFn = () => { + return userConfig.codeSplittingOptions?.shouldSplit + } const handleCompilingReferenceFile = ( code: string, @@ -105,8 +108,20 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< splitGroupingsSchema.parse(fromCode) } + const userShouldSplitFn = getShouldSplitFn() + + const pluginSplitBehaviour = userShouldSplitFn?.({ + routeId: fromCode.routeId, + }) + + if (pluginSplitBehaviour) { + splitGroupingsSchema.parse(pluginSplitBehaviour) + } + const splitGroupings: CodeSplitGroupings = - fromCode.groupings || getGlobalCodeSplitGroupings() + fromCode.groupings || + pluginSplitBehaviour || + getGlobalCodeSplitGroupings() const compiledReferenceRoute = compileCodeSplitReferenceRoute({ code, From 72b892f0c21c6d3d7a96846f71a261cdf92eefb7 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 21:43:29 +1300 Subject: [PATCH 26/35] fix(router-plugin): issue with pulling out the routeId --- .../vite.config.ts | 18 +++++++++++++++++- .../basic-file-based/vite.config.js | 14 +------------- .../src/core/code-splitter/compilers.ts | 3 ++- packages/router-plugin/src/core/config.ts | 6 ++++-- 4 files changed, 24 insertions(+), 17 deletions(-) diff --git a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts index 3cc73e272d..23bd91a308 100644 --- a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts +++ b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts @@ -4,5 +4,21 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [TanStackRouterVite({ autoCodeSplitting: true }), react()], + plugins: [ + TanStackRouterVite({ + autoCodeSplitting: true, + codeSplittingOptions: { + shouldSplit: ({ routeId }) => { + if (routeId === '/posts/$postId') { + return [ + ['loader'], + ['component'], + ['pendingComponent', 'notFoundComponent', 'errorComponent'], + ] + } + }, + }, + }), + react(), + ], }) diff --git a/e2e/react-router/basic-file-based/vite.config.js b/e2e/react-router/basic-file-based/vite.config.js index d6f982d4b2..9cb8cad864 100644 --- a/e2e/react-router/basic-file-based/vite.config.js +++ b/e2e/react-router/basic-file-based/vite.config.js @@ -4,17 +4,5 @@ import { TanStackRouterVite } from '@tanstack/router-plugin/vite' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [ - TanStackRouterVite({ - autoCodeSplitting: true, - codeSplittingOptions: { - shouldSplit: ({ routeId }) => { - if (routeId === '/posts') { - return [['component', 'pendingComponent']] - } - }, - }, - }), - react(), - ], + plugins: [TanStackRouterVite(), react()], }) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index bd6b70a069..363d1484c0 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -729,10 +729,11 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): { const callee = path.parentPath.node.callee if (t.isStringLiteral(callee.arguments[0])) { routeId = callee.arguments[0].value + return } } - // Continue with extracting the codeSplitGroupings + // Extracting the codeSplitGroupings const options = resolveIdentifier( path, path.parentPath.node.arguments[0], diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 23045d35ee..b1d80415cf 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -4,7 +4,6 @@ import { getConfig as getGeneratorConfig, } from '@tanstack/router-generator' import { splitRouteIdentNodes } from './constants' -import type { RegisteredRouter, RouteIds } from '@tanstack/react-router' import type { CodeSplitGroupings } from './constants' export const splitGroupingsSchema = z @@ -31,11 +30,14 @@ export type CodeSplittingOptions = { /** * Use this function to programmatically control the code splitting behaviour * based on the `routeId` for each route. + * + * If you just need to change the default behaviour, you can use the `defaultBehaviour` option. * @param params */ shouldSplit?: (params: { - routeId: RouteIds + routeId: string }) => CodeSplitGroupings | undefined | void + /** * The default/global configuration to control your code splitting behaviour per route. * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] From 7dfa4b4b78c11945374c67ed5c16db871ce08231 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:20:41 +1300 Subject: [PATCH 27/35] fix(router-plugin): more runtime fixing --- .../router-plugin/src/core/code-splitter/compilers.ts | 9 ++++++--- packages/router-plugin/src/core/config.ts | 4 ++-- .../src/core/router-code-splitter-plugin.ts | 4 ++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 363d1484c0..0f49c18c47 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -727,9 +727,12 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): { // Extract out the routeId if (t.isCallExpression(path.parentPath.node.callee)) { const callee = path.parentPath.node.callee - if (t.isStringLiteral(callee.arguments[0])) { - routeId = callee.arguments[0].value - return + + if (t.isIdentifier(callee.callee)) { + const firstArg = callee.arguments[0] + if (t.isStringLiteral(firstArg)) { + routeId = firstArg.value + } } } diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index b1d80415cf..bf3bfec309 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -34,7 +34,7 @@ export type CodeSplittingOptions = { * If you just need to change the default behaviour, you can use the `defaultBehaviour` option. * @param params */ - shouldSplit?: (params: { + splitBehaviour?: (params: { routeId: string }) => CodeSplitGroupings | undefined | void @@ -46,7 +46,7 @@ export type CodeSplittingOptions = { } const codeSplittingOptionsSchema = z.object({ - shouldSplit: z.function().optional(), + splitBehaviour: z.function().optional(), defaultGroupings: splitGroupingsSchema.optional(), }) 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 0a303b29e6..736e106ac4 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -89,7 +89,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< ) } const getShouldSplitFn = () => { - return userConfig.codeSplittingOptions?.shouldSplit + return userConfig.codeSplittingOptions?.splitBehaviour } const handleCompilingReferenceFile = ( @@ -105,7 +105,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< }) if (fromCode.groupings) { - splitGroupingsSchema.parse(fromCode) + splitGroupingsSchema.parse(fromCode.groupings) } const userShouldSplitFn = getShouldSplitFn() From db3a750c69f788255ca46ca1944ea18e54cef369 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:21:05 +1300 Subject: [PATCH 28/35] feat(react-router): add the `codeSplitGroupings` type --- packages/react-router/src/route.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts index 5ed7040e38..e8fdf12260 100644 --- a/packages/react-router/src/route.ts +++ b/packages/react-router/src/route.ts @@ -466,6 +466,15 @@ export interface UpdatableRouteOptions< meta?: AnyRouteMatch['meta'] } ssr?: boolean + codeSplitGroupings?: Array< + Array< + | 'loader' + | 'component' + | 'pendingComponent' + | 'notFoundComponent' + | 'errorComponent' + > + > } export type RouteLoaderFn< From a9c94063d67119238f334f562faed24129278d81 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:21:15 +1300 Subject: [PATCH 29/35] chore(examples): examples --- .../src/routes/posts.$postId.tsx | 4 ++++ .../basic-file-based-code-splitting/src/routes/posts.tsx | 2 -- .../basic-file-based-code-splitting/vite.config.ts | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx index febb02ab2f..47d1148be2 100644 --- a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx +++ b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.$postId.tsx @@ -10,6 +10,10 @@ export const Route = createFileRoute('/posts/$postId')({ return

Post not found

}, component: PostComponent, + codeSplitGroupings: [ + ['component'], + ['pendingComponent', 'errorComponent', 'notFoundComponent'], + ], }) export function PostErrorComponent({ error }: ErrorComponentProps) { diff --git a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx index 87947eeda6..c7a09ed7f8 100644 --- a/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx +++ b/e2e/react-router/basic-file-based-code-splitting/src/routes/posts.tsx @@ -5,8 +5,6 @@ import { fetchPosts } from '../posts' export const Route = createFileRoute('/posts')({ loader: fetchPosts, component: PostsComponent, - // @ts-expect-error - codeSplitGroupings: [['component']], }) function PostsComponent() { diff --git a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts index 23bd91a308..a949df4592 100644 --- a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts +++ b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts @@ -8,8 +8,8 @@ export default defineConfig({ TanStackRouterVite({ autoCodeSplitting: true, codeSplittingOptions: { - shouldSplit: ({ routeId }) => { - if (routeId === '/posts/$postId') { + splitBehaviour: ({ routeId }) => { + if (routeId === '/posts') { return [ ['loader'], ['component'], From 777d72290450c72e9694f59ad0874453187f50d7 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:31:36 +1300 Subject: [PATCH 30/35] fix(router-plugin): better checks for matching the schema --- packages/router-plugin/src/core/config.ts | 5 +++-- .../src/core/router-code-splitter-plugin.ts | 16 ++++++++++++++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index bf3bfec309..313002602d 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -9,7 +9,7 @@ import type { CodeSplitGroupings } from './constants' export const splitGroupingsSchema = z .array(z.array(z.enum(splitRouteIdentNodes)), { message: - "Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + " Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", }) .superRefine((val, ctx) => { const flattened = val.flat() @@ -21,7 +21,8 @@ export const splitGroupingsSchema = z ctx.addIssue({ code: 'custom', message: - "Split groupings must be unique and not repeated. i.e. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + " Split groupings must be unique and not repeated. i.e. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]." + + `\n You input was: ${JSON.stringify(val)}.`, }) } }) 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 736e106ac4..c6c1a6ddb5 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -105,7 +105,13 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< }) if (fromCode.groupings) { - splitGroupingsSchema.parse(fromCode.groupings) + const res = splitGroupingsSchema.safeParse(fromCode.groupings) + if (!res.success) { + const message = res.error.errors.map((e) => e.message).join('. ') + throw new Error( + `The groupings for the route "${id}" are invalid.\n${message}`, + ) + } } const userShouldSplitFn = getShouldSplitFn() @@ -115,7 +121,13 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< }) if (pluginSplitBehaviour) { - splitGroupingsSchema.parse(pluginSplitBehaviour) + const res = splitGroupingsSchema.safeParse(pluginSplitBehaviour) + if (!res.success) { + const message = res.error.errors.map((e) => e.message).join('. ') + throw new Error( + `The groupings returned when using \`splitBehaviour\` for the route "${id}" are invalid.\n${message}`, + ) + } } const splitGroupings: CodeSplitGroupings = From 37627d225a08794aabf5a4a6f22da304503aafb9 Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sat, 8 Feb 2025 22:36:19 +1300 Subject: [PATCH 31/35] fix(router-plugin): by default make it non repeatable --- packages/router-plugin/src/core/code-splitter/compilers.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index 0f49c18c47..2e06d8610d 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -175,8 +175,11 @@ export function compileCodeSplitReferenceRoute( if (codeSplitGroupingByKey === -1) { return } - const codeSplitGroup = - opts.codeSplitGroupings[codeSplitGroupingByKey]! + const codeSplitGroup = [ + ...new Set( + opts.codeSplitGroupings[codeSplitGroupingByKey], + ), + ] const key = prop.key.name // find key in nodeSplitConfig From 1453c0414dda92c41b09ff8e2b00fe3f80b2857f Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Sat, 8 Feb 2025 14:32:52 +0100 Subject: [PATCH 32/35] US spelling for 'behavior' --- .../basic-file-based-code-splitting/vite.config.ts | 2 +- packages/router-plugin/src/core/config.ts | 12 ++++++------ .../src/core/router-code-splitter-plugin.ts | 14 +++++++------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts index a949df4592..8d2e2364d0 100644 --- a/e2e/react-router/basic-file-based-code-splitting/vite.config.ts +++ b/e2e/react-router/basic-file-based-code-splitting/vite.config.ts @@ -8,7 +8,7 @@ export default defineConfig({ TanStackRouterVite({ autoCodeSplitting: true, codeSplittingOptions: { - splitBehaviour: ({ routeId }) => { + splitBehavior: ({ routeId }) => { if (routeId === '/posts') { return [ ['loader'], diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 313002602d..6bcd99fd7d 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -29,25 +29,25 @@ export const splitGroupingsSchema = z export type CodeSplittingOptions = { /** - * Use this function to programmatically control the code splitting behaviour + * Use this function to programmatically control the code splitting behavior * based on the `routeId` for each route. * - * If you just need to change the default behaviour, you can use the `defaultBehaviour` option. + * If you just need to change the default behavior, you can use the `defaultBehavior` option. * @param params */ - splitBehaviour?: (params: { + splitBehavior?: (params: { routeId: string }) => CodeSplitGroupings | undefined | void /** - * The default/global configuration to control your code splitting behaviour per route. + * The default/global configuration to control your code splitting behavior per route. * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] */ - defaultBehaviour?: CodeSplitGroupings + defaultBehavior?: CodeSplitGroupings } const codeSplittingOptionsSchema = z.object({ - splitBehaviour: z.function().optional(), + splitBehavior: z.function().optional(), defaultGroupings: splitGroupingsSchema.optional(), }) 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 c6c1a6ddb5..940169dfdb 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -84,12 +84,12 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< const getGlobalCodeSplitGroupings = () => { return ( - userConfig.codeSplittingOptions?.defaultBehaviour || + userConfig.codeSplittingOptions?.defaultBehavior || defaultCodeSplitGroupings ) } const getShouldSplitFn = () => { - return userConfig.codeSplittingOptions?.splitBehaviour + return userConfig.codeSplittingOptions?.splitBehavior } const handleCompilingReferenceFile = ( @@ -116,23 +116,23 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< const userShouldSplitFn = getShouldSplitFn() - const pluginSplitBehaviour = userShouldSplitFn?.({ + const pluginSplitBehavior = userShouldSplitFn?.({ routeId: fromCode.routeId, }) - if (pluginSplitBehaviour) { - const res = splitGroupingsSchema.safeParse(pluginSplitBehaviour) + if (pluginSplitBehavior) { + const res = splitGroupingsSchema.safeParse(pluginSplitBehavior) if (!res.success) { const message = res.error.errors.map((e) => e.message).join('. ') throw new Error( - `The groupings returned when using \`splitBehaviour\` for the route "${id}" are invalid.\n${message}`, + `The groupings returned when using \`splitBehavior\` for the route "${id}" are invalid.\n${message}`, ) } } const splitGroupings: CodeSplitGroupings = fromCode.groupings || - pluginSplitBehaviour || + pluginSplitBehavior || getGlobalCodeSplitGroupings() const compiledReferenceRoute = compileCodeSplitReferenceRoute({ From f8acd344b4a1d55d0a267cfc41f4f84647273d8a Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Sat, 8 Feb 2025 15:07:35 +0100 Subject: [PATCH 33/35] typesafe routeId --- packages/router-plugin/src/core/config.ts | 65 ++++++++++++------- .../src/core/router-code-splitter-plugin.ts | 2 +- 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 6bcd99fd7d..25c2075921 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -3,14 +3,28 @@ import { configSchema as generatorConfigSchema, getConfig as getGeneratorConfig, } from '@tanstack/router-generator' -import { splitRouteIdentNodes } from './constants' +import type { + RegisteredRouter, + RouteIds, +} from '@tanstack/react-router' import type { CodeSplitGroupings } from './constants' export const splitGroupingsSchema = z - .array(z.array(z.enum(splitRouteIdentNodes)), { - message: - " Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", - }) + .array( + z.array( + z.union([ + z.literal('loader'), + z.literal('component'), + z.literal('pendingComponent'), + z.literal('errorComponent'), + z.literal('notFoundComponent'), + ]), + ), + { + message: + " Must be an Array of Arrays containing the split groupings. i.e. [['component'], ['pendingComponent'], ['errorComponent', 'notFoundComponent']]", + }, + ) .superRefine((val, ctx) => { const flattened = val.flat() const unique = [...new Set(flattened)] @@ -27,34 +41,37 @@ export const splitGroupingsSchema = z } }) -export type CodeSplittingOptions = { - /** - * Use this function to programmatically control the code splitting behavior - * based on the `routeId` for each route. - * - * If you just need to change the default behavior, you can use the `defaultBehavior` option. - * @param params - */ - splitBehavior?: (params: { - routeId: string - }) => CodeSplitGroupings | undefined | void +export type CodeSplittingOptions = + { + /** + * Use this function to programmatically control the code splitting behavior + * based on the `routeId` for each route. + * + * If you just need to change the default behavior, you can use the `defaultBehavior` option. + * @param params + */ + splitBehavior?: (params: { + routeId: RouteIds + }) => CodeSplitGroupings | undefined | void - /** - * The default/global configuration to control your code splitting behavior per route. - * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] - */ - defaultBehavior?: CodeSplitGroupings -} + /** + * The default/global configuration to control your code splitting behavior per route. + * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] + */ + defaultBehavior?: CodeSplitGroupings + } const codeSplittingOptionsSchema = z.object({ splitBehavior: z.function().optional(), - defaultGroupings: splitGroupingsSchema.optional(), + defaultBehavior: splitGroupingsSchema.optional(), }) export const configSchema = generatorConfigSchema.extend({ enableRouteGeneration: z.boolean().optional(), codeSplittingOptions: z - .custom(codeSplittingOptionsSchema.parse) + .custom((v) => { + return codeSplittingOptionsSchema.parse(v) + }) .optional(), }) 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 940169dfdb..c6860c1f4a 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -118,7 +118,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< const pluginSplitBehavior = userShouldSplitFn?.({ routeId: fromCode.routeId, - }) + }) as CodeSplitGroupings | undefined if (pluginSplitBehavior) { const res = splitGroupingsSchema.safeParse(pluginSplitBehavior) From 678f65c0600eb8d46f8afa8bf4b252ed66f3c4c4 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Sat, 8 Feb 2025 15:10:38 +0100 Subject: [PATCH 34/35] fix formatting --- packages/router-plugin/src/core/config.ts | 40 +++++++++---------- .../src/core/router-code-splitter-plugin.ts | 4 +- 2 files changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/router-plugin/src/core/config.ts b/packages/router-plugin/src/core/config.ts index 25c2075921..db83094d10 100644 --- a/packages/router-plugin/src/core/config.ts +++ b/packages/router-plugin/src/core/config.ts @@ -3,10 +3,7 @@ import { configSchema as generatorConfigSchema, getConfig as getGeneratorConfig, } from '@tanstack/router-generator' -import type { - RegisteredRouter, - RouteIds, -} from '@tanstack/react-router' +import type { RegisteredRouter, RouteIds } from '@tanstack/react-router' import type { CodeSplitGroupings } from './constants' export const splitGroupingsSchema = z @@ -41,25 +38,24 @@ export const splitGroupingsSchema = z } }) -export type CodeSplittingOptions = - { - /** - * Use this function to programmatically control the code splitting behavior - * based on the `routeId` for each route. - * - * If you just need to change the default behavior, you can use the `defaultBehavior` option. - * @param params - */ - splitBehavior?: (params: { - routeId: RouteIds - }) => CodeSplitGroupings | undefined | void +export type CodeSplittingOptions = { + /** + * Use this function to programmatically control the code splitting behavior + * based on the `routeId` for each route. + * + * If you just need to change the default behavior, you can use the `defaultBehavior` option. + * @param params + */ + splitBehavior?: (params: { + routeId: RouteIds + }) => CodeSplitGroupings | undefined | void - /** - * The default/global configuration to control your code splitting behavior per route. - * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] - */ - defaultBehavior?: CodeSplitGroupings - } + /** + * The default/global configuration to control your code splitting behavior per route. + * @default [['component'],['pendingComponent'],['errorComponent'],['notFoundComponent']] + */ + defaultBehavior?: CodeSplitGroupings +} const codeSplittingOptionsSchema = z.object({ splitBehavior: z.function().optional(), 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 c6860c1f4a..839cb8cb2e 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -131,9 +131,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory< } const splitGroupings: CodeSplitGroupings = - fromCode.groupings || - pluginSplitBehavior || - getGlobalCodeSplitGroupings() + fromCode.groupings || pluginSplitBehavior || getGlobalCodeSplitGroupings() const compiledReferenceRoute = compileCodeSplitReferenceRoute({ code, From ea187416b01dc57eafccfb337ec91555914e486c Mon Sep 17 00:00:00 2001 From: SeanCassiere <33615041+SeanCassiere@users.noreply.github.com> Date: Sun, 9 Feb 2025 13:45:37 +1300 Subject: [PATCH 35/35] chore(router-plugin): add link to the PR for future adventurers --- .../router-plugin/src/core/router-code-splitter-plugin.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 839cb8cb2e..09ee422cd9 100644 --- a/packages/router-plugin/src/core/router-code-splitter-plugin.ts +++ b/packages/router-plugin/src/core/router-code-splitter-plugin.ts @@ -1,5 +1,9 @@ -import { isAbsolute, join, normalize } from 'node:path' +/** + * It is important to familiarize yourself with how the code-splitting works in this plugin. + * https://github.com/TanStack/router/pull/3355 + */ +import { isAbsolute, join, normalize } from 'node:path' import { fileURLToPath, pathToFileURL } from 'node:url' import { logDiff } from '@tanstack/router-utils' import { getConfig, splitGroupingsSchema } from './config'