one 1.2.57 → 1.2.59

package/src/vite/one.ts

@@ -22,6 +22,7 @@ import { createFileSystemRouterPlugin } from './plugins/fileSystemRouterPlugin'
 import { fixDependenciesPlugin } from './plugins/fixDependenciesPlugin'
 import { generateFileSystemRouteTypesPlugin } from './plugins/generateFileSystemRouteTypesPlugin'
 import { imageDataPlugin } from './plugins/imageDataPlugin'
+import { sourceInspectorPlugin } from './plugins/sourceInspectorPlugin'
 import { SSRCSSPlugin } from './plugins/SSRCSSPlugin'
 import { virtualEntryId } from './plugins/virtualEntryConstants'
 import { createVirtualEntry } from './plugins/virtualEntryPlugin'
@@ -678,5 +679,17 @@ export function one(options: One.PluginOptions = {}): PluginOption {
     SSRCSSPlugin({
       entries: [virtualEntryId],
     }),
+
+    // Source inspector - show source file location on hover with Shift+Ctrl/Cmd
+    ...(() => {
+      // devtools defaults to true
+      const devtools = options.devtools ?? true
+      if (devtools === false) return []
+
+      // if devtools is true, enable all tools
+      // if devtools is object, check individual settings (default true)
+      const inspector = devtools === true || (devtools.inspector ?? true)
+      return inspector ? sourceInspectorPlugin() : []
+    })(),
   ]
 }

package/src/vite/plugins/SSRCSSPlugin.ts

@@ -3,6 +3,11 @@ import { VIRTUAL_SSR_CSS_ENTRY, VIRTUAL_SSR_CSS_HREF } from '../../constants'
 
 // thanks to hi-ogawa https://github.com/hi-ogawa/vite-plugins/tree/main/packages/ssr-css
 
+// Track if we've pre-warmed routes and cached CSS
+let cssCache: { css: string; timestamp: number } | null = null
+let routesPreWarmed = false
+const CSS_CACHE_TTL = 1000 // 1 second cache for dev mode
+
 export function SSRCSSPlugin(pluginOpts: { entries: string[] }): Plugin {
   let server: ViteDevServer
 
@@ -12,12 +17,64 @@ export function SSRCSSPlugin(pluginOpts: { entries: string[] }): Plugin {
     configureServer(server_) {
       server = server_
 
+      // Pre-warm route modules on first request to populate the module graph
+      // This ensures CSS from all routes is collected even for lazy imports
+      const preWarmRoutes = async () => {
+        if (routesPreWarmed) return
+        routesPreWarmed = true
+
+        try {
+          // Transform the virtual entry to get route module paths
+          await server.transformRequest(pluginOpts.entries[0])
+
+          // Get all route files from the module graph
+          const routeFiles = await collectRouteFiles(server, pluginOpts.entries)
+
+          // Transform each route file to warm its CSS dependencies
+          await Promise.all(
+            routeFiles.map((file) =>
+              server.transformRequest(file).catch(() => {
+                // Ignore errors - some routes may have issues
+              })
+            )
+          )
+
+          if (process.env.ONE_DEBUG) {
+            console.log(
+              `[one] Pre-warmed ${routeFiles.length} route modules for CSS collection`
+            )
+          }
+        } catch (err) {
+          console.error('[one] Error pre-warming routes:', err)
+        }
+      }
+
+      // Invalidate CSS cache on HMR
+      server.watcher.on('change', () => {
+        cssCache = null
+      })
+
       // invalidate virtual modules for each direct request
       server.middlewares.use(async (req, res, next) => {
         if (req.url?.includes(VIRTUAL_SSR_CSS_HREF)) {
+          // Pre-warm routes on first CSS request
+          await preWarmRoutes()
+
           invalidateModule(server, '\0' + VIRTUAL_SSR_CSS_ENTRY + '?direct')
 
+          // Use cached CSS if fresh
+          const now = Date.now()
+          if (cssCache && now - cssCache.timestamp < CSS_CACHE_TTL) {
+            res.setHeader('Content-Type', 'text/css')
+            res.setHeader('Cache-Control', 'no-store')
+            res.setHeader('Vary', '*')
+            res.write(cssCache.css)
+            res.end()
+            return
+          }
+
           const code = await collectStyle(server, pluginOpts.entries)
+          cssCache = { css: code, timestamp: now }
 
           res.setHeader('Content-Type', 'text/css')
           res.setHeader('Cache-Control', 'no-store')
@@ -175,3 +232,50 @@ async function collectStyleUrls(
 
 // cf. https://github.com/vitejs/vite/blob/d6bde8b03d433778aaed62afc2be0630c8131908/packages/vite/src/node/constants.ts#L49C23-L50
 const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/
+
+// Match route files from dynamic imports in virtual entry
+// Vite transforms import.meta.glob to:
+// const routes = { "./path/to/file.tsx": () => import("./path/to/file.tsx") }
+const DYNAMIC_IMPORT_RE = /import\s*\(\s*["'`]([^"'`]+)["'`]\s*\)/g
+
+/**
+ * Collect all route file paths from the module graph.
+ * This is used to pre-warm route modules so their CSS is included.
+ */
+async function collectRouteFiles(
+  server: ViteDevServer,
+  entries: string[]
+): Promise<string[]> {
+  const routeFiles: string[] = []
+
+  for (const entry of entries) {
+    try {
+      // Get the transformed code for the entry
+      const result = await server.transformRequest(entry)
+      if (!result?.code) continue
+
+      // Extract dynamic import paths from the transformed code
+      let match
+      while ((match = DYNAMIC_IMPORT_RE.exec(result.code)) !== null) {
+        const importPath = match[1]
+        // Only include actual route files, not node_modules or virtual
+        if (
+          importPath &&
+          !importPath.includes('node_modules') &&
+          !importPath.startsWith('\0') &&
+          !importPath.startsWith('virtual:') &&
+          (importPath.endsWith('.tsx') ||
+            importPath.endsWith('.ts') ||
+            importPath.endsWith('.jsx') ||
+            importPath.endsWith('.js'))
+        ) {
+          routeFiles.push(importPath)
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+  }
+
+  return routeFiles
+}

package/src/vite/plugins/clientTreeShakePlugin.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect, it } from 'vitest'
+import { transformTreeShakeClient } from './clientTreeShakePlugin'
+
+describe('clientTreeShakePlugin', () => {
+  describe('transformTreeShakeClient', () => {
+    it('should remove loader export and its imports', async () => {
+      const code = `
+import { serverOnlyModule } from 'server-only-pkg'
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export function loader() {
+  return serverOnlyModule()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{data}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // The server-only import should be removed
+      expect(result!.code).not.toContain('server-only-pkg')
+      // But react-native and one should remain
+      expect(result!.code).toContain('react-native')
+      expect(result!.code).toContain('one')
+    })
+
+    it('should remove loader export with dynamic import', async () => {
+      const code = `
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export async function loader() {
+  const { serverFn } = await import('server-only-pkg')
+  return serverFn()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{data}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // Dynamic import should also be removed along with the loader
+      expect(result!.code).not.toContain('server-only-pkg')
+    })
+
+    it('should remove loader with const arrow function export', async () => {
+      const code = `
+import { serverOnlyModule } from 'server-only-pkg'
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export const loader = async () => {
+  return serverOnlyModule()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{data}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // The server-only import should be removed
+      expect(result!.code).not.toContain('server-only-pkg')
+    })
+
+    it('should handle multiple imports where only some are used in loader', async () => {
+      const code = `
+import { serverFn } from 'server-only-pkg'
+import { sharedUtil } from 'shared-pkg'
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export function loader() {
+  return serverFn()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{sharedUtil(data)}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // server-only-pkg should be removed (only used in loader)
+      expect(result!.code).not.toContain('server-only-pkg')
+      // shared-pkg should remain (used in component)
+      expect(result!.code).toContain('shared-pkg')
+    })
+
+    it('should remove generateStaticParams and its imports', async () => {
+      const code = `
+import { getRoutes } from 'server-only-pkg'
+import { Text } from 'react-native'
+
+export function generateStaticParams() {
+  return getRoutes()
+}
+
+export default function Page() {
+  return <Text>Hello</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/[slug].tsx')
+      expect(result).toBeDefined()
+      expect(result!.code).not.toContain('server-only-pkg')
+    })
+
+    it('should not transform files without loader or generateStaticParams', async () => {
+      const code = `
+import { Text } from 'react-native'
+
+export default function Page() {
+  return <Text>Hello</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeUndefined()
+    })
+
+    it('should preserve type-only imports during tree shaking', async () => {
+      const code = `
+import type { SomeType } from 'types-pkg'
+import { serverFn } from 'server-only-pkg'
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export function loader(): SomeType {
+  return serverFn()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{data}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // Type import should be preserved
+      expect(result!.code).toContain('types-pkg')
+      // Server-only import should be removed
+      expect(result!.code).not.toContain('server-only-pkg')
+    })
+
+    it('should preserve type imports even when used only in loader', async () => {
+      const code = `
+import type { APIGuildMember } from '@discordjs/core'
+import { getClient } from 'discord-client'
+import { Text } from 'react-native'
+import { useLoader } from 'one'
+
+export function loader(): APIGuildMember {
+  return getClient()
+}
+
+export default function Page() {
+  const data = useLoader(loader)
+  return <Text>{JSON.stringify(data)}</Text>
+}
+`
+      const result = await transformTreeShakeClient(code, '/app/index.tsx')
+      expect(result).toBeDefined()
+      // Type import should be preserved (TypeScript erases these at compile time)
+      expect(result!.code).toContain('@discordjs/core')
+      // Runtime import should be removed
+      expect(result!.code).not.toContain('discord-client')
+    })
+  })
+})

package/src/vite/plugins/clientTreeShakePlugin.ts

@@ -2,6 +2,7 @@ import { extname, relative } from 'node:path'
 import BabelGenerate from '@babel/generator'
 import { parse } from '@babel/parser'
 import BabelTraverse from '@babel/traverse'
+import type * as t from '@babel/types'
 import {
   deadCodeElimination,
   findReferencedIdentifiers,
@@ -9,8 +10,46 @@ import {
 import type { Plugin } from 'vite'
 import { EMPTY_LOADER_STRING } from '../constants'
 
-const traverse = BabelTraverse['default'] as typeof BabelTraverse
-const generate = BabelGenerate['default'] as any as typeof BabelGenerate
+const traverse = (BabelTraverse['default'] || BabelTraverse) as typeof BabelTraverse
+const generate = (BabelGenerate['default'] ||
+  BabelGenerate) as any as typeof BabelGenerate
+
+// Collect type-only imports before dead code elimination runs
+// These should never be removed since TypeScript erases them at compile time
+function collectTypeImports(ast: t.File): t.ImportDeclaration[] {
+  const typeImports: t.ImportDeclaration[] = []
+  traverse(ast, {
+    ImportDeclaration(path) {
+      // Check if the entire import is type-only: `import type { X } from '...'`
+      if (path.node.importKind === 'type') {
+        typeImports.push(path.node)
+      }
+    },
+  })
+  return typeImports
+}
+
+// Restore type-only imports that may have been removed by dead code elimination
+function restoreTypeImports(ast: t.File, typeImports: t.ImportDeclaration[]) {
+  if (typeImports.length === 0) return
+
+  // Get existing import sources to avoid duplicates
+  const existingSources = new Set<string>()
+  traverse(ast, {
+    ImportDeclaration(path) {
+      if (path.node.importKind === 'type') {
+        existingSources.add(path.node.source.value)
+      }
+    },
+  })
+
+  // Add back any type imports that were removed
+  for (const typeImport of typeImports) {
+    if (!existingSources.has(typeImport.source.value)) {
+      ast.program.body.unshift(typeImport)
+    }
+  }
+}
 
 export const clientTreeShakePlugin = (): Plugin => {
   return {
@@ -108,8 +147,8 @@ export async function transformTreeShakeClient(code: string, id: string) {
                 declarator.id.name === 'generateStaticParams')
             ) {
               const declaration = path.get('declaration.declarations.' + index)
-              if (!Array.isArray(declaration)) {
-                declaration.remove()
+              if (!Array.isArray(declaration) && declaration) {
+                ;(declaration as any).remove()
                 removed[declarator.id.name] = true
               }
             }
@@ -131,8 +170,15 @@ export async function transformTreeShakeClient(code: string, id: string) {
 
   if (removedFunctions.length) {
     try {
+      // Collect type-only imports before dead code elimination
+      // These should be preserved since TypeScript erases them at compile time
+      const typeImports = collectTypeImports(ast)
+
       deadCodeElimination(ast, referenced)
 
+      // Restore any type imports that were incorrectly removed
+      restoreTypeImports(ast, typeImports)
+
       const out = generate(ast)
 
       // add back in empty or filled loader and genparams

package/src/vite/plugins/fileSystemRouterPlugin.tsx

@@ -360,15 +360,18 @@ export function createFileSystemRouterPlugin(options: One.PluginOptions): Plugin
       const appDir = path.join(process.cwd(), getRouterRootFromOneOptions(options))
 
       // on change ./app stuff lets reload this to pick up any route changes
-      const fileWatcherChangeListener = debounce(async (type: string, changedPath: string) => {
-        if (type === 'add' || type === 'delete') {
-          // resolve to absolute path since watcher may emit relative paths
-          const absolutePath = path.resolve(changedPath)
-          if (absolutePath.startsWith(appDir)) {
-            handleRequest = createRequestHandler()
+      const fileWatcherChangeListener = debounce(
+        async (type: string, changedPath: string) => {
+          if (type === 'add' || type === 'delete') {
+            // resolve to absolute path since watcher may emit relative paths
+            const absolutePath = path.resolve(changedPath)
+            if (absolutePath.startsWith(appDir)) {
+              handleRequest = createRequestHandler()
+            }
           }
-        }
-      }, 100)
+        },
+        100
+      )
 
       server.watcher.addListener('all', fileWatcherChangeListener)
 

package/src/vite/plugins/generateFileSystemRouteTypesPlugin.tsx

@@ -25,6 +25,10 @@ export function generateFileSystemRouteTypesPlugin(options: One.PluginOptions):
         if (type === 'add' || type === 'delete' || type === 'change') {
           // resolve to absolute path since watcher may emit relative paths
           const absolutePath = resolve(path)
+          // skip routes.d.ts itself to avoid infinite loop
+          if (absolutePath === outFile) {
+            return
+          }
           if (absolutePath.startsWith(appDir)) {
             // generate
             generateRouteTypes(

package/src/vite/plugins/sourceInspectorPlugin.ts

@@ -0,0 +1,246 @@
+import path from 'node:path'
+import { parseSync } from 'oxc-parser'
+import { normalizePath } from 'vite'
+import type { Plugin, ViteDevServer } from 'vite'
+
+interface JsxLocation {
+  /** Position right after the tag name where we insert the attribute */
+  insertOffset: number
+  /** Traversal index - stable ordering that's the same on server and client */
+  index: number
+  /** Actual line number for editor navigation */
+  line: number
+  /** Actual column number for editor navigation */
+  column: number
+}
+
+/**
+ * Parse code with oxc and find all JSX opening elements.
+ * Returns insertion points sorted by offset (descending for safe insertion).
+ */
+function findJsxElements(code: string, filename: string): JsxLocation[] {
+  const result = parseSync(filename, code)
+
+  if (result.errors.length > 0) {
+    return []
+  }
+
+  const locations: JsxLocation[] = []
+  let traversalIndex = 0
+
+  function getJsxName(node: any): string | null {
+    if (!node) return null
+    if (node.type === 'JSXIdentifier') return node.name
+    if (node.type === 'JSXMemberExpression') {
+      const obj = getJsxName(node.object)
+      return obj ? `${obj}.${node.property?.name}` : null
+    }
+    return null
+  }
+
+  function getLocation(offset: number): { line: number; column: number } {
+    const before = code.slice(0, offset)
+    const lines = before.split('\n')
+    return {
+      line: lines.length,
+      column: lines[lines.length - 1]!.length + 1,
+    }
+  }
+
+  function walk(node: any): void {
+    if (!node || typeof node !== 'object') return
+
+    if (node.type === 'JSXOpeningElement' && node.name) {
+      const tagName = getJsxName(node.name)
+
+      // Skip Fragment and already-tagged elements
+      if (tagName && tagName !== 'Fragment') {
+        // Check if already has data-one-source
+        const hasSourceAttr = node.attributes?.some(
+          (attr: any) =>
+            attr.type === 'JSXAttribute' && attr.name?.name === 'data-one-source'
+        )
+
+        if (!hasSourceAttr) {
+          // Insert position is right after the tag name
+          const nameEnd = node.name.end
+          const loc = getLocation(node.start)
+
+          locations.push({
+            insertOffset: nameEnd,
+            index: traversalIndex++,
+            line: loc.line,
+            column: loc.column,
+          })
+        }
+      }
+    }
+
+    // Walk all child nodes in consistent order
+    for (const key of Object.keys(node)) {
+      if (key === 'parent') continue
+      const value = node[key]
+      if (Array.isArray(value)) {
+        for (const child of value) {
+          walk(child)
+        }
+      } else if (value && typeof value === 'object') {
+        walk(value)
+      }
+    }
+  }
+
+  walk(result.program)
+
+  // Sort by offset descending so we can insert from end to start without shifting positions
+  return locations.sort((a, b) => b.insertOffset - a.insertOffset)
+}
+
+/**
+ * Transforms JSX to inject data-one-source attributes using oxc-parser.
+ * Uses stable traversal indices instead of line numbers to avoid hydration mismatches.
+ */
+function injectSourceToJsx(
+  code: string,
+  id: string
+): { code: string; map?: null } | undefined {
+  const [filePath] = id.split('?')
+  if (!filePath) return
+
+  const location = filePath.replace(normalizePath(process.cwd()), '')
+
+  // Quick check - skip if no JSX-like content
+  if (!code.includes('<') || !code.includes('>')) {
+    return
+  }
+
+  const jsxLocations = findJsxElements(code, filePath)
+
+  if (jsxLocations.length === 0) {
+    return
+  }
+
+  // Build source info map for this file
+  // Sort by index (ascending) for the map, since jsxLocations is sorted by offset (descending)
+  const sourceInfoEntries = [...jsxLocations]
+    .sort((a, b) => a.index - b.index)
+    .map((jsx) => `${jsx.index}:[${jsx.line},${jsx.column}]`)
+    .join(',')
+
+  // Inject source info registration at the top of the file
+  const sourceInfoScript = `globalThis.__oneSourceInfo=globalThis.__oneSourceInfo||{};globalThis.__oneSourceInfo["${location}"]={${sourceInfoEntries}};`
+
+  let result = code
+
+  // Insert from end to start to preserve offsets
+  for (const jsx of jsxLocations) {
+    // Use stable index instead of line:column
+    const sourceAttr = ` data-one-source="${location}:${jsx.index}"`
+    result =
+      result.slice(0, jsx.insertOffset) + sourceAttr + result.slice(jsx.insertOffset)
+  }
+
+  // Add source info at the very beginning of the file
+  result = sourceInfoScript + result
+
+  return { code: result, map: null }
+}
+
+async function openInEditor(
+  filePath: string,
+  line?: string,
+  column?: string
+): Promise<void> {
+  try {
+    const launch = (await import('launch-editor')).default
+    const fullPath = path.join(process.cwd(), filePath)
+    const location = `${fullPath}${line ? `:${line}` : ''}${column ? `:${column}` : ''}`
+
+    launch(location, undefined, (filename: string, errorMessage: string | null) => {
+      if (errorMessage) {
+        console.warn(
+          `[one:source-inspector] Failed to open ${filename} in editor:`,
+          errorMessage
+        )
+      }
+    })
+  } catch (err) {
+    console.warn('[one:source-inspector] Failed to launch editor:', err)
+  }
+}
+
+export function sourceInspectorPlugin(): Plugin[] {
+  return [
+    // Transform plugin - injects data-one-source attributes
+    {
+      name: 'one:source-inspector-transform',
+      enforce: 'pre',
+      apply: 'serve',
+
+      transform(code, id) {
+        const envName = this.environment?.name
+        // Skip native environments only - transform both client and SSR for consistency
+        if (envName === 'ios' || envName === 'android') return
+
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          id.includes('dist') ||
+          id.includes('build')
+        ) {
+          return
+        }
+
+        if (!id.endsWith('.jsx') && !id.endsWith('.tsx')) return
+
+        return injectSourceToJsx(code, id)
+      },
+    },
+
+    // Note: Inspector UI script is now injected via DevHead.tsx for SSR compatibility
+
+    // Server plugin - handles open-source requests
+    {
+      name: 'one:source-inspector-server',
+      apply: 'serve',
+
+      configureServer(server: ViteDevServer) {
+        server.middlewares.use(async (req, res, next) => {
+          if (!req.url?.startsWith('/__one/open-source')) {
+            return next()
+          }
+
+          try {
+            const url = new URL(req.url, 'http://localhost')
+            const source = url.searchParams.get('source')
+
+            if (!source) {
+              res.statusCode = 400
+              res.end('Missing source parameter')
+              return
+            }
+
+            // Parse the source - now format is "filePath:index"
+            const lastColon = source.lastIndexOf(':')
+            const filePath = source.slice(0, lastColon)
+            const index = source.slice(lastColon + 1)
+
+            // Look up actual line/column from source info
+            // The client will send these if available
+            const line = url.searchParams.get('line')
+            const column = url.searchParams.get('column')
+
+            await openInEditor(filePath, line || undefined, column || undefined)
+
+            res.statusCode = 200
+            res.end('OK')
+          } catch (err) {
+            console.error('[one:source-inspector] Error:', err)
+            res.statusCode = 500
+            res.end('Internal server error')
+          }
+        })
+      },
+    },
+  ]
+}