@tanstack/router-plugin 1.20.3-alpha.1

package/src/core/router-generator-plugin.ts

@@ -0,0 +1,172 @@
+import { isAbsolute, join, normalize, resolve } from 'node:path'
+import { generator, resolveConfigPath } from '@tanstack/router-generator'
+
+import { getConfig } from './config'
+import type { FSWatcher } from 'chokidar'
+import type { UnpluginFactory } from 'unplugin'
+import type { Config } from './config'
+
+let lock = false
+const checkLock = () => lock
+const setLock = (bool: boolean) => {
+  lock = bool
+}
+
+const PLUGIN_NAME = 'unplugin:router-generator'
+
+export const unpluginRouterGeneratorFactory: UnpluginFactory<
+  Partial<Config> | undefined
+> = (options = {}) => {
+  let ROOT: string = process.cwd()
+  let userConfig = options as Config
+
+  const getRoutesDirectoryPath = () => {
+    return isAbsolute(userConfig.routesDirectory)
+      ? userConfig.routesDirectory
+      : join(ROOT, userConfig.routesDirectory)
+  }
+
+  const generate = async () => {
+    if (checkLock()) {
+      return
+    }
+
+    setLock(true)
+
+    try {
+      await generator(userConfig, process.cwd())
+    } catch (err) {
+      console.error(err)
+      console.info()
+    } finally {
+      setLock(false)
+    }
+  }
+
+  const handleFile = async (
+    file: string,
+    event: 'create' | 'update' | 'delete',
+  ) => {
+    const filePath = normalize(file)
+
+    if (filePath === resolveConfigPath({ configDirectory: ROOT })) {
+      userConfig = getConfig(options, ROOT)
+      return
+    }
+
+    if (
+      event === 'update' &&
+      filePath === resolve(userConfig.generatedRouteTree)
+    ) {
+      // skip generating routes if the generated route tree is updated
+      return
+    }
+
+    const routesDirectoryPath = getRoutesDirectoryPath()
+    if (filePath.startsWith(routesDirectoryPath)) {
+      await generate()
+    }
+  }
+
+  const run: (cb: () => Promise<void> | void) => Promise<void> = async (cb) => {
+    if (userConfig.enableRouteGeneration ?? true) {
+      await cb()
+    }
+  }
+
+  return {
+    name: 'router-generator-plugin',
+    async watchChange(id, { event }) {
+      await run(async () => {
+        await handleFile(id, event)
+      })
+    },
+    vite: {
+      configResolved(config) {
+        ROOT = config.root
+        userConfig = getConfig(options, ROOT)
+
+        // if (config.command === 'serve') {
+        //   await run(generate)
+        // }
+      },
+      async buildStart() {
+        if (this.environment.name === 'server') {
+          // When building in environment mode, we only need to generate routes
+          // for the client environment
+          return
+        }
+        await run(generate)
+      },
+      sharedDuringBuild: true,
+    },
+    rspack(compiler) {
+      userConfig = getConfig(options, ROOT)
+
+      let handle: FSWatcher | null = null
+
+      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, async () => {
+        await run(generate)
+      })
+
+      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async () => {
+        if (handle) {
+          return
+        }
+
+        // rspack watcher doesn't register newly created files
+        const routesDirectoryPath = getRoutesDirectoryPath()
+        const chokidar = await import('chokidar')
+        handle = chokidar
+          .watch(routesDirectoryPath, { ignoreInitial: true })
+          .on('add', async () => {
+            await run(generate)
+          })
+
+        await run(generate)
+      })
+
+      compiler.hooks.watchClose.tap(PLUGIN_NAME, async () => {
+        if (handle) {
+          await handle.close()
+        }
+      })
+    },
+    webpack(compiler) {
+      userConfig = getConfig(options, ROOT)
+
+      let handle: FSWatcher | null = null
+
+      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, async () => {
+        await run(generate)
+      })
+
+      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async () => {
+        if (handle) {
+          return
+        }
+
+        // webpack watcher doesn't register newly created files
+        const routesDirectoryPath = getRoutesDirectoryPath()
+        const chokidar = await import('chokidar')
+        handle = chokidar
+          .watch(routesDirectoryPath, { ignoreInitial: true })
+          .on('add', async () => {
+            await run(generate)
+          })
+
+        await run(generate)
+      })
+
+      compiler.hooks.watchClose.tap(PLUGIN_NAME, async () => {
+        if (handle) {
+          await handle.close()
+        }
+      })
+
+      compiler.hooks.done.tap(PLUGIN_NAME, () => {
+        console.info('✅ ' + PLUGIN_NAME + ': route-tree generation done')
+      })
+    },
+  }
+}

package/src/core/router-hmr-plugin.ts

@@ -0,0 +1,65 @@
+import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
+import { getConfig } from './config'
+import { routeHmrStatement } from './route-hmr-statement'
+import { debug, fileIsInRoutesDirectory } from './utils'
+import type { Config } from './config'
+import type { UnpluginFactory } from 'unplugin'
+
+/**
+ * This plugin adds HMR support for file routes.
+ * It is only added to the composed plugin in dev when autoCodeSplitting is disabled, since the code splitting plugin
+ * handles HMR for code-split routes itself.
+ */
+export const unpluginRouterHmrFactory: UnpluginFactory<
+  Partial<Config> | undefined
+> = (options = {}) => {
+  let ROOT: string = process.cwd()
+  let userConfig = options as Config
+
+  return {
+    name: 'router-hmr-plugin',
+    enforce: 'pre',
+
+    transform(code, id) {
+      if (!code.includes('export const Route = createFileRoute(')) {
+        return null
+      }
+
+      if (debug) console.info('Adding HMR handling to route ', id)
+
+      const ast = parseAst({ code })
+      ast.program.body.push(routeHmrStatement)
+      const result = generateFromAst(ast, {
+        sourceMaps: true,
+        filename: id,
+        sourceFileName: id,
+      })
+      if (debug) {
+        logDiff(code, result.code)
+        console.log('Output:\n', result.code + '\n\n')
+      }
+      return result
+    },
+
+    transformInclude(id) {
+      return fileIsInRoutesDirectory(id, userConfig.routesDirectory)
+    },
+
+    vite: {
+      configResolved(config) {
+        ROOT = config.root
+        userConfig = getConfig(options, ROOT)
+      },
+    },
+
+    rspack() {
+      ROOT = process.cwd()
+      userConfig = getConfig(options, ROOT)
+    },
+
+    webpack() {
+      ROOT = process.cwd()
+      userConfig = getConfig(options, ROOT)
+    },
+  }
+}

package/src/core/utils.ts

@@ -0,0 +1,18 @@
+import { isAbsolute, join, normalize } from 'node:path'
+
+export const debug =
+  process.env.TSR_VITE_DEBUG &&
+  ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG)
+
+export function fileIsInRoutesDirectory(
+  filePath: string,
+  routesDirectory: string,
+): boolean {
+  const routesDirectoryPath = isAbsolute(routesDirectory)
+    ? routesDirectory
+    : join(process.cwd(), routesDirectory)
+
+  const path = normalize(filePath)
+
+  return path.startsWith(routesDirectoryPath)
+}

package/src/esbuild.ts

@@ -0,0 +1,56 @@
+import { createEsbuildPlugin } from 'unplugin'
+
+import { configSchema } from './core/config'
+import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
+import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
+
+import type { Config } from './core/config'
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [TanStackRouterGeneratorEsbuild()],
+ *   // ...
+ * }
+ * ```
+ */
+const TanStackRouterGeneratorEsbuild = createEsbuildPlugin(
+  unpluginRouterGeneratorFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *  plugins: [TanStackRouterCodeSplitterEsbuild()],
+ *  // ...
+ * }
+ * ```
+ */
+const TanStackRouterCodeSplitterEsbuild = createEsbuildPlugin(
+  unpluginRouterCodeSplitterFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   plugins: [TanStackRouterEsbuild()],
+ *   // ...
+ * }
+ * ```
+ */
+const TanStackRouterEsbuild = createEsbuildPlugin(unpluginRouterComposedFactory)
+
+export default TanStackRouterEsbuild
+
+export {
+  configSchema,
+  TanStackRouterGeneratorEsbuild,
+  TanStackRouterCodeSplitterEsbuild,
+  TanStackRouterEsbuild,
+}
+
+export type { Config }

package/src/index.ts

@@ -0,0 +1,4 @@
+export { configSchema } from './core/config'
+export { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
+export { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
+export type { Config } from './core/config'

package/src/rspack.ts

@@ -0,0 +1,67 @@
+import { createRspackPlugin } from 'unplugin'
+
+import { configSchema } from './core/config'
+import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
+import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
+import type { Config } from './core/config'
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterGeneratorRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+const TanStackRouterGeneratorRspack = /* #__PURE__ */ createRspackPlugin(
+  unpluginRouterGeneratorFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterCodeSplitterRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+const TanStackRouterCodeSplitterRspack = /* #__PURE__ */ createRspackPlugin(
+  unpluginRouterCodeSplitterFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   // ...
+ *   tools: {
+ *     rspack: {
+ *       plugins: [TanStackRouterRspack()],
+ *     },
+ *   },
+ * })
+ * ```
+ */
+const TanStackRouterRspack = /* #__PURE__ */ createRspackPlugin(
+  unpluginRouterComposedFactory,
+)
+
+export default TanStackRouterRspack
+export {
+  configSchema,
+  TanStackRouterRspack,
+  TanStackRouterGeneratorRspack,
+  TanStackRouterCodeSplitterRspack,
+}
+export type { Config }

package/src/vite.ts

@@ -0,0 +1,57 @@
+import { createVitePlugin } from 'unplugin'
+
+import { configSchema } from './core/config'
+import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
+import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
+
+import type { Config } from './core/config'
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [TanStackRouterGeneratorVite()],
+ *   // ...
+ * })
+ * ```
+ */
+const TanStackRouterGeneratorVite = createVitePlugin(
+  unpluginRouterGeneratorFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [TanStackRouterCodeSplitterVite()],
+ *   // ...
+ * })
+ * ```
+ */
+const TanStackRouterCodeSplitterVite = createVitePlugin(
+  unpluginRouterCodeSplitterFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default defineConfig({
+ *   plugins: [TanStackRouterVite()],
+ *   // ...
+ * })
+ * ```
+ */
+const TanStackRouterVite = createVitePlugin(unpluginRouterComposedFactory)
+const tanstackRouter = TanStackRouterVite
+
+export default TanStackRouterVite
+export {
+  configSchema,
+  TanStackRouterGeneratorVite,
+  TanStackRouterCodeSplitterVite,
+  TanStackRouterVite,
+  tanstackRouter,
+}
+
+export type { Config }

package/src/webpack.ts

@@ -0,0 +1,55 @@
+import { createWebpackPlugin } from 'unplugin'
+
+import { configSchema } from './core/config'
+import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
+import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
+import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
+import type { Config } from './core/config'
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   // ...
+ *   plugins: [TanStackRouterGeneratorWebpack()],
+ * }
+ * ```
+ */
+const TanStackRouterGeneratorWebpack = /* #__PURE__ */ createWebpackPlugin(
+  unpluginRouterGeneratorFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   // ...
+ *   plugins: [TanStackRouterCodeSplitterWebpack()],
+ * }
+ * ```
+ */
+const TanStackRouterCodeSplitterWebpack = /* #__PURE__ */ createWebpackPlugin(
+  unpluginRouterCodeSplitterFactory,
+)
+
+/**
+ * @example
+ * ```ts
+ * export default {
+ *   // ...
+ *   plugins: [TanStackRouterWebpack()],
+ * }
+ * ```
+ */
+const TanStackRouterWebpack = /* #__PURE__ */ createWebpackPlugin(
+  unpluginRouterComposedFactory,
+)
+
+export default TanStackRouterWebpack
+export {
+  configSchema,
+  TanStackRouterWebpack,
+  TanStackRouterGeneratorWebpack,
+  TanStackRouterCodeSplitterWebpack,
+}
+export type { Config }