@tanstack/router-vite-plugin 1.24.1 → 1.26.6

package/src/index.ts

@@ -1,11 +1,48 @@
 import { isAbsolute, join, normalize } from 'path'
-import { type Config, generator, getConfig } from '@tanstack/router-generator'
+import { fileURLToPath, pathToFileURL } from 'url'
+import { z } from 'zod'
+import {
+  generator,
+  configSchema as generatorConfigSchema,
+  getConfig as getGeneratorConfig,
+} from '@tanstack/router-generator'
+import { compileFile, makeCompile, splitFile } from './compilers'
+import { splitPrefix } from './constants'
 import type { Plugin } from 'vite'
 
+export const configSchema = generatorConfigSchema.extend({
+  enableRouteGeneration: z.boolean().optional(),
+  experimental: z
+    .object({
+      enableCodeSplitting: z.boolean().optional(),
+    })
+    .optional(),
+})
+
+export type Config = z.infer<typeof configSchema>
+
 const CONFIG_FILE_NAME = 'tsr.config.json'
+const debug = false as any
+
+const getConfig = async (inlineConfig: Partial<Config>, root: string) => {
+  const config = await getGeneratorConfig(inlineConfig, root)
+
+  return configSchema.parse({ ...inlineConfig, ...config })
+}
 
-export function TanStackRouterVite(inlineConfig: Partial<Config> = {}): Plugin {
-  const ROOT: string = process.cwd()
+export function TanStackRouterVite(
+  inlineConfig: Partial<Config> = {},
+): Array<Plugin> {
+  return [
+    TanStackRouterViteGenerator(inlineConfig),
+    TanStackRouterViteCodeSplitter(inlineConfig),
+  ]
+}
+
+export function TanStackRouterViteGenerator(
+  inlineConfig: Partial<Config> = {},
+): Plugin {
+  let ROOT: string = process.cwd()
   let userConfig: Config
 
   const generate = async () => {
@@ -32,15 +69,137 @@ export function TanStackRouterVite(inlineConfig: Partial<Config> = {}): Plugin {
   }
 
   return {
-    name: 'vite-plugin-tanstack-router',
-    configResolved: async () => {
+    name: 'vite-plugin-tanstack-router-generator',
+    configResolved: async (config) => {
+      ROOT = config.root
       userConfig = await getConfig(inlineConfig, ROOT)
-      await generate()
+
+      if (userConfig.enableRouteGeneration ?? true) {
+        await generate()
+      }
     },
     watchChange: async (file, context) => {
-      if (['create', 'update', 'delete'].includes(context.event)) {
-        await handleFile(file)
+      if (userConfig.enableRouteGeneration ?? true) {
+        if (['create', 'update', 'delete'].includes(context.event)) {
+          await handleFile(file)
+        }
       }
     },
   }
 }
+
+function fileIsInRoutesDirectory(filePath: string, routesDirectory: string) {
+  const routesDirectoryPath = isAbsolute(routesDirectory)
+    ? routesDirectory
+    : join(process.cwd(), routesDirectory)
+
+  return filePath.startsWith(routesDirectoryPath)
+}
+
+export function TanStackRouterViteCodeSplitter(
+  inlineConfig: Partial<Config> = {},
+): Plugin {
+  let ROOT: string = process.cwd()
+  let userConfig: Config
+
+  return {
+    name: 'vite-plugin-tanstack-router-code-splitter',
+    enforce: 'pre',
+    configResolved: async (config) => {
+      ROOT = config.root
+      userConfig = await getConfig(inlineConfig, ROOT)
+    },
+    resolveId(source) {
+      if (!userConfig.experimental?.enableCodeSplitting) {
+        return null
+      }
+
+      if (source.startsWith(splitPrefix + ':')) {
+        return source.replace(splitPrefix + ':', '')
+      }
+      return null
+    },
+    async transform(code, id, transformOptions) {
+      if (!userConfig.experimental?.enableCodeSplitting) {
+        return null
+      }
+
+      const url = pathToFileURL(id)
+      url.searchParams.delete('v')
+      id = fileURLToPath(url).replace(/\\/g, '/')
+
+      const compile = makeCompile({
+        root: ROOT,
+      })
+
+      if (id.includes(splitPrefix)) {
+        if (debug) console.info('Splitting route: ', id)
+        // const ref = new URLSearchParams(id.split('?')[1]).get('ref') || ''
+
+        const compiled = await splitFile({
+          code,
+          compile,
+          filename: id,
+          // ref,
+        })
+
+        if (debug) console.info('')
+        if (debug) console.info('Split Output')
+        if (debug) console.info('')
+        if (debug) console.info(compiled.code)
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+
+        return compiled
+      } else if (
+        fileIsInRoutesDirectory(id, userConfig.routesDirectory) &&
+        (code.includes('createRoute(') || code.includes('createFileRoute('))
+      ) {
+        if (code.includes('@react-refresh')) {
+          throw new Error(
+            `We detected that the '@vitejs/plugin-react' was passed before '@tanstack/router-vite-plugin'. Please make sure that '@tanstack/router-vite-plugin' is passed before '@vitejs/plugin-react' and try again: 
+e.g.
+
+plugins: [
+  TanStackRouterVite(), // Place this before viteReact()
+  viteReact(),
+]
+`,
+          )
+        }
+
+        if (debug) console.info('Handling createRoute: ', id)
+        const compiled = await compileFile({
+          code,
+          compile,
+          filename: id,
+        })
+
+        if (debug) console.info('')
+        if (debug) console.info('Compiled Output')
+        if (debug) console.info('')
+        if (debug) console.info(compiled.code)
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+        if (debug) console.info('')
+
+        return compiled
+      }
+
+      return null
+    },
+  }
+}

package/src/tests/index.test.ts

@@ -0,0 +1,60 @@
+import { readFile, readdir } from 'fs/promises'
+import path from 'path'
+import { expect, test } from 'vitest'
+import { compileFile, makeCompile, splitFile } from '../compilers'
+import { splitPrefix } from '../constants'
+
+test('it compiles and splits', async () => {
+  // get the list of files from the /test-files directory
+  const files = await readdir(path.resolve(__dirname, './test-files'))
+  for (const file of files) {
+    console.log('Testing:', file)
+    await compileTestFile({ file })
+    await splitTestFile({ file })
+  }
+})
+
+async function compileTestFile(opts: { file: string }) {
+  const code = (
+    await readFile(path.resolve(__dirname, `./test-files/${opts.file}`))
+  ).toString()
+
+  // console.log('Compiling...')
+  // console.log('⬇️⬇️⬇️⬇️⬇️')
+  // console.log()
+  const result = await compileFile({
+    code,
+    compile: makeCompile({
+      root: path.resolve(__dirname, './test-files'),
+    }),
+    filename: `${opts.file}`,
+  })
+
+  // console.log(result.code)
+  // console.log()
+
+  await expect(result.code).toMatchFileSnapshot(`./snapshots/${opts.file}`)
+}
+
+async function splitTestFile(opts: { file: string }) {
+  const code = (
+    await readFile(path.resolve(__dirname, `./test-files/${opts.file}`))
+  ).toString()
+
+  // console.log('Splitting...')
+  // console.log('⬇️⬇️⬇️⬇️⬇️')
+  // console.log()
+  const result = await splitFile({
+    code,
+    compile: makeCompile({
+      root: path.resolve(__dirname, './test-files'),
+    }),
+    filename: `${opts.file}?${splitPrefix}`,
+  })
+
+  // console.log(result.code)
+  // console.log()
+  await expect(result.code).toMatchFileSnapshot(
+    `./snapshots/${opts.file.replace('.tsx', '')}?split.tsx`,
+  )
+}

package/src/tests/shared/imported.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export const importedComponent = () => {
+  return <div>I am imported</div>
+}
+
+export const importedLoader = () => {
+  return {
+    randomNumber: Math.random(),
+  }
+}

package/src/tests/snapshots/function-declaration.tsx

@@ -0,0 +1,10 @@
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/function-declaration.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/function-declaration.tsx?tsr-split');
+import { createFileRoute } from '@tanstack/react-router';
+import '../posts';
+export const Route = createFileRoute('/posts')({
+  loader: lazyFn($$splitLoaderImporter, 'loader'),
+  component: lazyRouteComponent($$splitComponentImporter, 'component')
+});

package/src/tests/snapshots/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 <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, {
+        id: 'i-do-not-exist',
+        title: 'Non-existent Post'
+      }]?.map(post => {
+        return <li key={post.id} className="whitespace-nowrap">
+                <Link to="/posts/$postId" params={{
+            postId: post.id
+          }} className="block py-1 text-blue-800 hover:text-blue-600" activeProps={{
+            className: 'text-black font-bold'
+          }}>
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>;
+      })}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>;
+};
+export { component };
+const loader = fetchPosts;
+export { loader };

package/src/tests/snapshots/imported.tsx

@@ -0,0 +1,10 @@
+import { lazyFn } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/imported.tsx?tsr-split');
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/imported.tsx?tsr-split');
+import { createFileRoute } from '@tanstack/react-router';
+import '../shared/imported';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component'),
+  loader: lazyFn($$splitLoaderImporter, 'loader')
+});

package/src/tests/snapshots/imported?split.tsx

@@ -0,0 +1,5 @@
+import { importedComponent, importedLoader } from '../shared/imported';
+const component = importedComponent;
+export { component };
+const loader = importedLoader;
+export { loader };

package/src/tests/snapshots/inline.tsx

@@ -0,0 +1,8 @@
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/inline.tsx?tsr-split');
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: lazyRouteComponent($$splitComponentImporter, 'component')
+});
+Route.addChildren([]);
+export const test = 'test';

package/src/tests/snapshots/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 <button>{props.children}</button>;
+};
+import { Route } from "inline.tsx";
+Route.addChildren([]);
+import { test } from "inline.tsx";
+const component = () => {
+  return <div className="p-2">
+        {test}
+        <h3 className={styles.indexPageTitle}>{TEST_DATA.welcome}</h3>
+        <Button>Click me</Button>
+      </div>;
+};
+export { component };

package/src/tests/snapshots/random-number.tsx

@@ -0,0 +1,11 @@
+import { lazyRouteComponent } from '@tanstack/react-router';
+const $$splitComponentImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/random-number.tsx?tsr-split');
+import { lazyFn } from '@tanstack/react-router';
+const $$splitLoaderImporter = () => import('tsr-split:/Users/tannerlinsley/GitHub/router/packages/router-vite-plugin/random-number.tsx?tsr-split');
+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')
+});

package/src/tests/snapshots/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 };

package/src/tests/test-files/function-declaration.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router'
+import { fetchPosts } from '../posts'
+
+export const Route = createFileRoute('/posts')({
+  loader: fetchPosts,
+  component: PostsComponent,
+})
+
+function PostsComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div className="p-2 flex gap-2">
+      <ul className="list-disc pl-4">
+        {[...posts, { id: 'i-do-not-exist', title: 'Non-existent Post' }]?.map(
+          (post) => {
+            return (
+              <li key={post.id} className="whitespace-nowrap">
+                <Link
+                  to="/posts/$postId"
+                  params={{
+                    postId: post.id,
+                  }}
+                  className="block py-1 text-blue-800 hover:text-blue-600"
+                  activeProps={{ className: 'text-black font-bold' }}
+                >
+                  <div>{post.title.substring(0, 20)}</div>
+                </Link>
+              </li>
+            )
+          },
+        )}
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}

package/src/tests/test-files/imported.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { importedComponent, importedLoader } from '../shared/imported'
+
+export const Route = createFileRoute('/')({
+  component: importedComponent,
+  loader: importedLoader,
+})

package/src/tests/test-files/inline.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+import * as styles from '../style.css'
+import { TEST_DATA } from '../test.const'
+
+const Button = (props: { children: any }) => {
+  return <button>{props.children}</button>
+}
+
+export const Route = createFileRoute('/')({
+  component: () => {
+    return (
+      <div className="p-2">
+        {test}
+        <h3 className={styles.indexPageTitle}>{TEST_DATA.welcome}</h3>
+        <Button>Click me</Button>
+      </div>
+    )
+  },
+})
+
+Route.addChildren([])
+
+export const test = 'test'

package/src/tests/test-files/random-number.tsx

@@ -0,0 +1,83 @@
+import { Await, Link, createFileRoute, defer } from '@tanstack/react-router'
+import { Carbon } from '~/components/Carbon'
+import { twMerge } from 'tailwind-merge'
+import { FaDiscord, FaGithub, FaTshirt } from 'react-icons/fa'
+import { CgMusicSpeaker, CgSpinner } from 'react-icons/cg'
+import { Footer } from '~/components/Footer'
+import SponsorPack from '~/components/SponsorPack'
+import { LogoColor } from '~/components/LogoColor'
+import { getSponsorsForSponsorPack } from '~/server/sponsors'
+import discordImage from '~/images/discord-logo-white.svg'
+import agGridImage from '~/images/ag-grid.png'
+import nozzleImage from '~/images/nozzle.png'
+import bytesImage from '~/images/bytes.svg'
+import bytesUidotdevImage from '~/images/bytes-uidotdev.png'
+import { useMutation } from '~/hooks/useMutation'
+import { sample } from '~/utils/utils'
+
+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`,
+]
+
+const courses = [
+  {
+    name: 'The Official TanStack React Query Course',
+    cardStyles: `border-t-4 border-red-500 hover:(border-green-500)`,
+    href: 'https://query.gg/?s=tanstack',
+    description: `Learn how to build enterprise quality apps with TanStack's React Query the easy way with our brand new course.`,
+  },
+]
+
+export const Route = createFileRoute('/')({
+  loader: () => {
+    return {
+      randomNumber: Math.random(),
+      sponsorsPromise: defer(getSponsorsForSponsorPack()),
+    }
+  },
+  component: Index,
+})
+
+async function bytesSignupServerFn({ email }: { email: string }) {
+  'use server'
+
+  return fetch(`https://bytes.dev/api/bytes-optin-cors`, {
+    method: 'POST',
+    body: JSON.stringify({
+      email,
+      influencer: 'tanstack',
+    }),
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
+function Index() {
+  const bytesSignupMutation = useMutation({
+    fn: bytesSignupServerFn,
+  })
+
+  const { sponsorsPromise, randomNumber, testing2 } = Route.useLoaderData()
+  const gradient = sample(gradients, randomNumber)
+  const textColor = sample(textColors, randomNumber)
+
+  return (
+    <>
+      {discordImage}
+      {gradient}
+      {textColor}
+    </>
+  )
+}