From 98e3563d57b58890f2216f4a253e816ba6e057ca Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Sat, 18 Jan 2025 00:00:46 +0100 Subject: [PATCH] fix: do not minify during code splitting fixes #3183 --- .../src/compilers.ts | 1 - .../src/core/code-splitter/compilers.ts | 2 - .../router-plugin/tests/code-splitter.test.ts | 90 +-- .../{ => development}/arrow-function.tsx | 0 .../arrow-function@split.tsx | 0 .../snapshots/development/chinese.tsx | 9 + .../snapshots/development/chinese@split.tsx | 22 + ...ructured-react-memo-imported-component.tsx | 0 ...ed-react-memo-imported-component@split.tsx | 0 .../{ => development}/destructuring.tsx | 0 .../{ => development}/destructuring@split.tsx | 0 .../function-as-parameter.tsx | 0 .../function-as-parameter@split.tsx | 0 .../function-declaration.tsx | 0 .../function-declaration@split.tsx | 0 ...-default-component-destructured-loader.tsx | 0 ...lt-component-destructured-loader@split.tsx | 0 .../imported-default-component.tsx | 0 .../imported-default-component@split.tsx | 0 .../snapshots/{ => development}/imported.tsx | 0 .../{ => development}/imported@split.tsx | 0 .../snapshots/{ => development}/inline.tsx | 0 .../{ => development}/inline@split.tsx | 0 .../{ => development}/random-number.tsx | 0 .../{ => development}/random-number@split.tsx | 0 .../react-memo-component.tsx | 0 .../react-memo-component@split.tsx | 0 .../react-memo-imported-component.tsx | 0 .../react-memo-imported-component@split.tsx | 0 .../retain-export-component.tsx | 0 .../retain-export-component@split.tsx | 3 + .../retain-exports-const.tsx | 0 .../retain-exports-const@split.tsx | 0 .../retain-exports-function.tsx | 0 .../retain-exports-function@split.tsx | 0 .../retain-exports-loader.tsx | 0 .../retain-exports-loader@split.tsx | 1 - .../{ => development}/useStateDestructure.tsx | 0 .../useStateDestructure@split.tsx | 0 .../snapshots/production/arrow-function.tsx | 9 + .../production/arrow-function@split.tsx | 29 + .../snapshots/production/chinese.tsx | 9 + .../snapshots/production/chinese@split.tsx | 22 + ...ructured-react-memo-imported-component.tsx | 9 + ...ed-react-memo-imported-component@split.tsx | 9 + .../snapshots/production/destructuring.tsx | 11 + .../production/destructuring@split.tsx | 11 + .../production/function-as-parameter.tsx | 19 + .../function-as-parameter@split.tsx | 19 + .../production/function-declaration.tsx | 9 + .../production/function-declaration@split.tsx | 29 + ...-default-component-destructured-loader.tsx | 9 + ...lt-component-destructured-loader@split.tsx | 5 + .../production/imported-default-component.tsx | 6 + .../imported-default-component@split.tsx | 3 + .../snapshots/production/imported.tsx | 9 + .../snapshots/production/imported@split.tsx | 5 + .../snapshots/production/inline.tsx | 8 + .../snapshots/production/inline@split.tsx | 18 + .../snapshots/production/random-number.tsx | 11 + .../production/random-number@split.tsx | 27 + .../production/react-memo-component.tsx | 9 + .../production/react-memo-component@split.tsx | 9 + .../react-memo-imported-component.tsx | 9 + .../react-memo-imported-component@split.tsx | 6 + .../production/retain-export-component.tsx | 27 + .../retain-export-component@split.tsx | 3 + .../production/retain-exports-const.tsx | 30 + .../production/retain-exports-const@split.tsx | 0 .../production/retain-exports-function.tsx | 30 + .../retain-exports-function@split.tsx | 0 .../production/retain-exports-loader.tsx | 14 + .../retain-exports-loader@split.tsx | 21 + .../production/useStateDestructure.tsx | 12 + .../production/useStateDestructure@split.tsx | 605 ++++++++++++++++++ .../retain-export-component@split.tsx | 4 - .../snapshots/retain-exports-const@split.tsx | 1 - .../retain-exports-function@split.tsx | 1 - .../code-splitter/test-files/chinese.tsx | 34 + packages/start-plugin/src/compilers.ts | 2 - 80 files changed, 1176 insertions(+), 55 deletions(-) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/arrow-function.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/arrow-function@split.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/destructured-react-memo-imported-component.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/destructured-react-memo-imported-component@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/destructuring.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/destructuring@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/function-as-parameter.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/function-as-parameter@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/function-declaration.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/function-declaration@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported-default-component-destructured-loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported-default-component-destructured-loader@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported-default-component.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported-default-component@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/imported@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/inline.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/inline@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/random-number.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/random-number@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/react-memo-component.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/react-memo-component@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/react-memo-imported-component.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/react-memo-imported-component@split.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/retain-export-component.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/retain-exports-const.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/retain-exports-function.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function@split.tsx rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/retain-exports-loader.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/retain-exports-loader@split.tsx (66%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/useStateDestructure.tsx (100%) rename packages/router-plugin/tests/code-splitter/snapshots/{ => development}/useStateDestructure@split.tsx (100%) create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx create 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.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx create 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.tsx create 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.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx create mode 100644 packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@split.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const@split.tsx delete mode 100644 packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function@split.tsx create mode 100644 packages/router-plugin/tests/code-splitter/test-files/chinese.tsx diff --git a/packages/directive-functions-plugin/src/compilers.ts b/packages/directive-functions-plugin/src/compilers.ts index 38971bc008..1006d32530 100644 --- a/packages/directive-functions-plugin/src/compilers.ts +++ b/packages/directive-functions-plugin/src/compilers.ts @@ -126,7 +126,6 @@ export function compileDirectives(opts: CompileDirectivesOpts) { const compiledResult = generate(ast, { sourceMaps: true, sourceFileName: opts.filename, - minified: process.env.NODE_ENV === 'production', }) return { diff --git a/packages/router-plugin/src/core/code-splitter/compilers.ts b/packages/router-plugin/src/core/code-splitter/compilers.ts index a5554cdc78..86d9bff287 100644 --- a/packages/router-plugin/src/core/code-splitter/compilers.ts +++ b/packages/router-plugin/src/core/code-splitter/compilers.ts @@ -268,7 +268,6 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) { return generate(ast, { sourceMaps: true, sourceFileName: opts.filename, - minified: process.env.NODE_ENV === 'production', }) } @@ -528,7 +527,6 @@ export function compileCodeSplitVirtualRoute(opts: ParseAstOptions) { return generate(ast, { sourceMaps: true, sourceFileName: opts.filename, - minified: process.env.NODE_ENV === 'production', }) } diff --git a/packages/router-plugin/tests/code-splitter.test.ts b/packages/router-plugin/tests/code-splitter.test.ts index 31633185a3..398490e9d2 100644 --- a/packages/router-plugin/tests/code-splitter.test.ts +++ b/packages/router-plugin/tests/code-splitter.test.ts @@ -12,46 +12,50 @@ async function getFilenames() { return await readdir(path.resolve(__dirname, './code-splitter/test-files')) } -describe('code-splitter works', async () => { - const filenames = await getFilenames() - - it.each(filenames)( - 'should handle the 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, - }) - - await expect(compileResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${filename}`, - ) - }, - ) - - it.each(filenames)( - 'should handle the 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}?${splitPrefix}`, - }) - - await expect(splitResult.code).toMatchFileSnapshot( - `./code-splitter/snapshots/${filename.replace('.tsx', '')}@split.tsx`, - ) - }, - ) -}) +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 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, + }) + + await expect(compileResult.code).toMatchFileSnapshot( + `./code-splitter/snapshots/${NODE_ENV}/${filename}`, + ) + }, + ) + + it.each(filenames)( + 'should handle the 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}?${splitPrefix}`, + }) + + await expect(splitResult.code).toMatchFileSnapshot( + `./code-splitter/snapshots/${NODE_ENV}/${filename.replace('.tsx', '')}@split.tsx`, + ) + }, + ) + }, +) diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/arrow-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/arrow-function@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/arrow-function@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx new file mode 100644 index 0000000000..19724978c2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split'); +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/chinese@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx new file mode 100644 index 0000000000..f33a7ffe4c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/chinese@split.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const component = function HomeComponent() { + return
+ + +
; +}; +export { component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/destructured-react-memo-imported-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructured-react-memo-imported-component@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/destructuring.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructuring.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/destructuring@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/destructuring@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/destructuring@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-as-parameter.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/function-as-parameter.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-as-parameter@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/function-as-parameter@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-as-parameter@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/function-declaration.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/function-declaration@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/function-declaration@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported-default-component-destructured-loader@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component-destructured-loader@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported-default-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported-default-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported-default-component@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/imported@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/imported@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/inline.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/inline.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/inline.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/inline@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/inline@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/inline@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/random-number.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/random-number.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/random-number@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/random-number@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/random-number@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/react-memo-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/react-memo-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-component@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/react-memo-imported-component@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/react-memo-imported-component@split.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/retain-export-component.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component.tsx 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/retain-export-component@split.tsx new file mode 100644 index 0000000000..986b66ee9a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-export-component@split.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const loader = importedLoader; +export { loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-const.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/retain-exports-const@split.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-function.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/retain-exports-function@split.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@split.tsx similarity index 66% rename from packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@split.tsx index f74980eee1..a250f7ae07 100644 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-loader@split.tsx +++ b/packages/router-plugin/tests/code-splitter/snapshots/development/retain-exports-loader@split.tsx @@ -1,4 +1,3 @@ -console.warn("These exports from \"retain-exports-loader.tsx\" are not being code-split and will increase your bundle size: \n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); import { Outlet } from '@tanstack/react-router'; import { importedComponent as ImportedComponent } from '../shared/imported'; const HEADER_HEIGHT = '63px'; diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure.tsx diff --git a/packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@split.tsx similarity index 100% rename from packages/router-plugin/tests/code-splitter/snapshots/useStateDestructure@split.tsx rename to packages/router-plugin/tests/code-splitter/snapshots/development/useStateDestructure@split.tsx 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 new file mode 100644 index 0000000000..1b49b7ff9a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('arrow-function.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('arrow-function.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file 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@split.tsx new file mode 100644 index 0000000000..1a07e3c317 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/arrow-function@split.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "arrow-function.tsx"; +const component = () => { + const posts = Route.useLoaderData(); + return
+ +
+ +
; +}; +export { component }; +const loader = fetchPosts; +export { 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 new file mode 100644 index 0000000000..19724978c2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('chinese.tsx?tsr-split'); +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/production/chinese@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx new file mode 100644 index 0000000000..f33a7ffe4c --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/chinese@split.tsx @@ -0,0 +1,22 @@ +interface DemoProps { + title: string; +} +function Demo({ + title +}: DemoProps) { + return

+ {title} +

; +} +const component = function HomeComponent() { + return
+ + +
; +}; +export { component }; \ 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 new file mode 100644 index 0000000000..63033a97e2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('destructured-react-memo-imported-component.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, '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 new file mode 100644 index 0000000000..93f0e29a19 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructured-react-memo-imported-component@split.tsx @@ -0,0 +1,9 @@ +import { memo } from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const component = memo(Component); +export { component }; +const loader = importedLoader; +export { loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/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/production/destructuring@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.tsx new file mode 100644 index 0000000000..858c5c0e05 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/destructuring@split.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.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/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/production/function-as-parameter@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.tsx new file mode 100644 index 0000000000..34b469f860 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-as-parameter@split.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 new file mode 100644 index 0000000000..fa3fa3f6b3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration.tsx @@ -0,0 +1,9 @@ +const $$splitComponentImporter = () => import('function-declaration.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('function-declaration.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/posts')({ + loader: lazyFn($$splitLoaderImporter, 'loader'), + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx new file mode 100644 index 0000000000..0a31bfe7b2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/function-declaration@split.tsx @@ -0,0 +1,29 @@ +import { Link, Outlet } from '@tanstack/react-router'; +import { fetchPosts } from '../posts'; +import { Route } from "function-declaration.tsx"; +const component = function PostsComponent() { + const posts = Route.useLoaderData(); + return
+ +
+ +
; +}; +export { component }; +const loader = fetchPosts; +export { loader }; \ No newline at end of file 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 new file mode 100644 index 0000000000..b4f926eb1f --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported-default-component-destructured-loader.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, '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 new file mode 100644 index 0000000000..b3ad7d5dae --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component-destructured-loader@split.tsx @@ -0,0 +1,5 @@ +import importedComponent, { importedLoader } from '../shared/imported'; +const component = importedComponent; +export { component }; +const loader = importedLoader; +export { 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 new file mode 100644 index 0000000000..d8ca2602d0 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component.tsx @@ -0,0 +1,6 @@ +const $$splitComponentImporter = () => import('imported-default-component.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); \ No newline at end of file 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@split.tsx new file mode 100644 index 0000000000..8e63ff2710 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported-default-component@split.tsx @@ -0,0 +1,3 @@ +import ImportedDefaultComponent from '../shared/imported'; +const component = ImportedDefaultComponent; +export { component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx new file mode 100644 index 0000000000..e3484305f6 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('imported.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('imported.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, '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 new file mode 100644 index 0000000000..92c972eb28 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/imported@split.tsx @@ -0,0 +1,5 @@ +import { importedComponent, importedLoader } from '../shared/imported'; +const component = importedComponent; +export { component }; +const loader = importedLoader; +export { 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 new file mode 100644 index 0000000000..4f94f8bdd2 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/inline.tsx @@ -0,0 +1,8 @@ +const $$splitComponentImporter = () => import('inline.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr) +}); +Route.addChildren([]); +export const test = 'test'; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.tsx new file mode 100644 index 0000000000..445e11011d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/inline@split.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 component = () => { + return
+ {test} +

{TEST_DATA.welcome}

+ +
; +}; +export { component }; \ 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 new file mode 100644 index 0000000000..f194be898d --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number.tsx @@ -0,0 +1,11 @@ +const $$splitComponentImporter = () => import('random-number.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +const $$splitLoaderImporter = () => import('random-number.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const textColors = [`text-rose-500`, `text-yellow-500`, `text-teal-500`, `text-blue-500`]; +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/production/random-number@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.tsx new file mode 100644 index 0000000000..e52a00145a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/random-number@split.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 component = function Index() { + const { + randomNumber + } = Route.useLoaderData(); + const gradient = sample(gradients, randomNumber); + const textColor = sample(textColors, randomNumber); + return <> + {discordImage} + {gradient} + {textColor} + ; +}; +export { component }; +const loader = () => { + return { + randomNumber: Math.random(), + sponsorsPromise: defer(getSponsorsForSponsorPack()) + }; +}; +export { 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 new file mode 100644 index 0000000000..c80202c1af --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-component.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-component.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, '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 new file mode 100644 index 0000000000..99d8095bbc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-component@split.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { importedLoader } from '../shared/imported'; +function Component() { + return
Component
; +} +const component = React.memo(Component); +export { component }; +const loader = importedLoader; +export { loader }; \ No newline at end of file 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 new file mode 100644 index 0000000000..fd823829bc --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component.tsx @@ -0,0 +1,9 @@ +const $$splitLoaderImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +const $$splitComponentImporter = () => import('react-memo-imported-component.tsx?tsr-split'); +import { lazyRouteComponent } from '@tanstack/react-router'; +import { createFileRoute } from '@tanstack/react-router'; +export const Route = createFileRoute('/')({ + component: lazyRouteComponent($$splitComponentImporter, 'component', () => Route.ssr), + loader: lazyFn($$splitLoaderImporter, '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 new file mode 100644 index 0000000000..57b51bb7b3 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/react-memo-imported-component@split.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { importedLoader, importedComponent } from '../shared/imported'; +const component = React.memo(importedComponent); +export { component }; +const loader = importedLoader; +export { loader }; \ No newline at end of file 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 new file mode 100644 index 0000000000..5e41828800 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component.tsx @@ -0,0 +1,27 @@ +const $$splitLoaderImporter = () => import('retain-export-component.tsx?tsr-split'); +import { lazyFn } from '@tanstack/react-router'; +import { createFileRoute, Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +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/production/retain-export-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@split.tsx new file mode 100644 index 0000000000..986b66ee9a --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-export-component@split.tsx @@ -0,0 +1,3 @@ +import { importedLoader } from '../shared/imported'; +const loader = importedLoader; +export { 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 new file mode 100644 index 0000000000..69e27260d4 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/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/production/retain-exports-const@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-const@split.tsx new file mode 100644 index 0000000000..e69de29bb2 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 new file mode 100644 index 0000000000..8162228c27 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/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/production/retain-exports-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-function@split.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 new file mode 100644 index 0000000000..4ed9513983 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader.tsx @@ -0,0 +1,14 @@ +const $$splitComponentImporter = () => import('retain-exports-loader.tsx?tsr-split'); +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@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@split.tsx new file mode 100644 index 0000000000..a250f7ae07 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/retain-exports-loader@split.tsx @@ -0,0 +1,21 @@ +import { Outlet } from '@tanstack/react-router'; +import { importedComponent as ImportedComponent } from '../shared/imported'; +const HEADER_HEIGHT = '63px'; +const component = function Layout() { + return
+
+ +
+ + +
; +}; +export { component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx new file mode 100644 index 0000000000..f847174b9e --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure.tsx @@ -0,0 +1,12 @@ +const $$splitComponentImporter = () => import('useStateDestructure.tsx?tsr-split'); +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/production/useStateDestructure@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@split.tsx new file mode 100644 index 0000000000..e3753b7b09 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/snapshots/production/useStateDestructure@split.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! +
+
+
+ + View TanStack.com Source + + + Tweet about it! + {' '} +
+
+ {/*
+
+ +
+

+ 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 ; + }} /> +
+
+ + Become a Sponsor! + +
+
+ +
+
+ +
+ + 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 component = 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! +
+
+
+ + View TanStack.com Source + + + Tweet about it! + {' '} +
+
+ {} + + {} + + {} + +
+

+ 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 { component }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx deleted file mode 100644 index b53badb34f..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-export-component@split.tsx +++ /dev/null @@ -1,4 +0,0 @@ -console.warn("These exports from \"retain-export-component.tsx\" are not being code-split and will increase your bundle size: \n- Layout\nThese should either have their export statements removed or be imported from another file that is not a route."); -import { importedLoader } from '../shared/imported'; -const loader = importedLoader; -export { loader }; \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const@split.tsx deleted file mode 100644 index 7d4c85634d..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-const@split.tsx +++ /dev/null @@ -1 +0,0 @@ -console.warn("These exports from \"retain-exports-const.tsx\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function@split.tsx b/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function@split.tsx deleted file mode 100644 index f54a3bd29e..0000000000 --- a/packages/router-plugin/tests/code-splitter/snapshots/retain-exports-function@split.tsx +++ /dev/null @@ -1 +0,0 @@ -console.warn("These exports from \"retain-exports-function.tsx\" are not being code-split and will increase your bundle size: \n- Layout\n- loaderFn\nThese should either have their export statements removed or be imported from another file that is not a route."); \ No newline at end of file diff --git a/packages/router-plugin/tests/code-splitter/test-files/chinese.tsx b/packages/router-plugin/tests/code-splitter/test-files/chinese.tsx new file mode 100644 index 0000000000..260ca5e7f8 --- /dev/null +++ b/packages/router-plugin/tests/code-splitter/test-files/chinese.tsx @@ -0,0 +1,34 @@ +import * as React from 'react' +import { createFileRoute } from '@tanstack/react-router' + +export const Route = createFileRoute('/')({ + component: HomeComponent, +}) + +function HomeComponent() { + return ( +
+ + +
+ ) +} + +interface DemoProps { + title: string +} + +function Demo({ title }: DemoProps) { + return ( +

+ {title} +

+ ) +} diff --git a/packages/start-plugin/src/compilers.ts b/packages/start-plugin/src/compilers.ts index e5f769429b..23c8367a78 100644 --- a/packages/start-plugin/src/compilers.ts +++ b/packages/start-plugin/src/compilers.ts @@ -22,7 +22,6 @@ export function compileEliminateDeadCode(opts: ParseAstOptions) { return generate(ast, { sourceMaps: true, sourceFileName: opts.filename, - minified: process.env.NODE_ENV === 'production', filename: opts.filename, }) } @@ -190,7 +189,6 @@ export function compileStartOutput(opts: ParseAstOptions) { sourceMaps: true, sourceFileName: opts.filename, filename: opts.filename, - minified: process.env.NODE_ENV === 'production', }) }