@jasonshimmy/vite-plugin-cer-app 0.1.0

package/src/plugin/index.ts

@@ -0,0 +1,330 @@
+import { resolve, join } from 'pathe'
+import type { Plugin, ViteDevServer, ModuleNode } from 'vite'
+import type { CerAppConfig } from '../types/config.js'
+import type { ResolvedCerConfig } from './dev-server.js'
+import { cerPlugin } from '@jasonshimmy/custom-elements-runtime/vite-plugin'
+import { autoImportTransform } from './transforms/auto-import.js'
+import { scanComposableExports, writeAutoImportDts, writeTsconfigPaths } from './dts-generator.js'
+import { configureCerDevServer } from './dev-server.js'
+import { generateRoutesCode } from './virtual/routes.js'
+import { generateLayoutsCode } from './virtual/layouts.js'
+import { generateComponentsCode } from './virtual/components.js'
+import { generateComposablesCode } from './virtual/composables.js'
+import { generatePluginsCode } from './virtual/plugins.js'
+import { generateMiddlewareCode } from './virtual/middleware.js'
+import { generateServerApiCode } from './virtual/server-api.js'
+import { generateServerMiddlewareCode } from './virtual/server-middleware.js'
+import { generateLoadingCode } from './virtual/loading.js'
+import { generateErrorCode } from './virtual/error.js'
+import { createWatcher } from './scanner.js'
+
+// Virtual module IDs (raw)
+const VIRTUAL_IDS = {
+  routes: 'virtual:cer-routes',
+  layouts: 'virtual:cer-layouts',
+  components: 'virtual:cer-components',
+  composables: 'virtual:cer-composables',
+  plugins: 'virtual:cer-plugins',
+  middleware: 'virtual:cer-middleware',
+  serverApi: 'virtual:cer-server-api',
+  serverMiddleware: 'virtual:cer-server-middleware',
+  appConfig: 'virtual:cer-app-config',
+  loading: 'virtual:cer-loading',
+  error: 'virtual:cer-error',
+} as const
+
+// Resolved virtual module IDs (prefixed with \0)
+const RESOLVED_IDS = Object.fromEntries(
+  Object.entries(VIRTUAL_IDS).map(([k, v]) => [k, `\0${v}`]),
+) as Record<keyof typeof VIRTUAL_IDS, string>
+
+/**
+ * Fills in default values for all config fields and resolves absolute paths.
+ */
+export function resolveConfig(userConfig: CerAppConfig, root: string = process.cwd()): ResolvedCerConfig {
+  const mode = userConfig.mode ?? 'spa'
+  const srcDir = resolve(root, userConfig.srcDir ?? 'app')
+
+  return {
+    mode,
+    srcDir,
+    root,
+    pagesDir: join(srcDir, 'pages'),
+    layoutsDir: join(srcDir, 'layouts'),
+    componentsDir: join(srcDir, 'components'),
+    composablesDir: join(srcDir, 'composables'),
+    pluginsDir: join(srcDir, 'plugins'),
+    middlewareDir: join(srcDir, 'middleware'),
+    serverApiDir: join(root, 'server/api'),
+    serverMiddlewareDir: join(root, 'server/middleware'),
+    port: userConfig.port ?? 3000,
+    ssr: {
+      dsd: userConfig.ssr?.dsd ?? true,
+      streaming: userConfig.ssr?.streaming ?? false,
+    },
+    ssg: {
+      routes: userConfig.ssg?.routes ?? 'auto',
+      concurrency: userConfig.ssg?.concurrency ?? 4,
+      fallback: userConfig.ssg?.fallback ?? false,
+    },
+    router: {
+      base: userConfig.router?.base,
+      scrollToFragment: userConfig.router?.scrollToFragment,
+    },
+    jitCss: {
+      content: userConfig.jitCss?.content ?? [
+        `${srcDir}/pages/**/*.ts`,
+        `${srcDir}/components/**/*.ts`,
+        `${srcDir}/layouts/**/*.ts`,
+      ],
+      extendedColors: userConfig.jitCss?.extendedColors ?? false,
+    },
+    autoImports: {
+      components: userConfig.autoImports?.components ?? true,
+      composables: userConfig.autoImports?.composables ?? true,
+      directives: userConfig.autoImports?.directives ?? true,
+      runtime: userConfig.autoImports?.runtime ?? true,
+    },
+  }
+}
+
+/**
+ * Maps a resolved virtual ID to the appropriate generator function.
+ */
+async function generateVirtualModule(
+  id: string,
+  config: ResolvedCerConfig,
+): Promise<string | null> {
+  switch (id) {
+    case RESOLVED_IDS.routes:
+      return generateRoutesCode(config.pagesDir)
+    case RESOLVED_IDS.layouts:
+      return generateLayoutsCode(config.layoutsDir)
+    case RESOLVED_IDS.components:
+      return generateComponentsCode(config.componentsDir)
+    case RESOLVED_IDS.composables:
+      return generateComposablesCode(config.composablesDir)
+    case RESOLVED_IDS.plugins:
+      return generatePluginsCode(config.pluginsDir)
+    case RESOLVED_IDS.middleware:
+      return generateMiddlewareCode(config.middlewareDir)
+    case RESOLVED_IDS.serverApi:
+      return generateServerApiCode(config.serverApiDir)
+    case RESOLVED_IDS.serverMiddleware:
+      return generateServerMiddlewareCode(config.serverMiddlewareDir)
+    case RESOLVED_IDS.appConfig:
+      return generateAppConfigModule(config)
+    case RESOLVED_IDS.loading:
+      return generateLoadingCode(config.srcDir)
+    case RESOLVED_IDS.error:
+      return generateErrorCode(config.srcDir)
+    default:
+      return null
+  }
+}
+
+/**
+ * Generates a virtual module that exports the resolved app config.
+ */
+function generateAppConfigModule(config: ResolvedCerConfig): string {
+  const exportedConfig = {
+    mode: config.mode,
+    router: config.router,
+    ssr: config.ssr,
+    ssg: config.ssg,
+  }
+  return `// AUTO-GENERATED by vite-plugin-cer-app\nexport const appConfig = ${JSON.stringify(exportedConfig, null, 2)}\nexport default appConfig\n`
+}
+
+/**
+ * Determines which virtual module IDs should be invalidated when a file changes
+ * in a given directory.
+ */
+function getDirtyVirtualIds(filePath: string, config: ResolvedCerConfig): string[] {
+  const dirty: string[] = []
+
+  if (filePath.startsWith(config.pagesDir)) {
+    dirty.push(RESOLVED_IDS.routes)
+  }
+  if (filePath.startsWith(config.layoutsDir)) {
+    dirty.push(RESOLVED_IDS.layouts)
+  }
+  if (filePath.startsWith(config.componentsDir)) {
+    dirty.push(RESOLVED_IDS.components)
+  }
+  if (filePath.startsWith(config.composablesDir)) {
+    dirty.push(RESOLVED_IDS.composables)
+  }
+  if (filePath.startsWith(config.pluginsDir)) {
+    dirty.push(RESOLVED_IDS.plugins)
+  }
+  if (filePath.startsWith(config.middlewareDir)) {
+    dirty.push(RESOLVED_IDS.middleware)
+  }
+  if (filePath.startsWith(config.serverApiDir)) {
+    dirty.push(RESOLVED_IDS.serverApi)
+  }
+  if (filePath.startsWith(config.serverMiddlewareDir)) {
+    dirty.push(RESOLVED_IDS.serverMiddleware)
+  }
+
+  return dirty
+}
+
+/**
+ * The main cerApp() Vite plugin factory.
+ * Returns an array of plugins: the cer-app orchestrator + the runtime JIT CSS plugin(s).
+ */
+export function cerApp(userConfig: CerAppConfig = {}): Plugin[] {
+  let config: ResolvedCerConfig
+  let composableExports = new Map<string, string>()
+
+  // Cache for generated virtual module code (invalidated on file changes)
+  const moduleCache = new Map<string, string>()
+
+  const cerAppPlugin: Plugin = {
+    name: 'vite-plugin-cer-app',
+
+    config(viteConfig) {
+      const root = viteConfig.root ? resolve(viteConfig.root) : process.cwd()
+      config = resolveConfig(userConfig, root)
+      return {
+        build: {
+          target: 'esnext',
+          rollupOptions: {
+            onwarn(warning, warn) {
+              // loader and meta are optional exports from page files — suppress noise
+              if (
+                warning.code === 'MISSING_EXPORT' &&
+                (warning.binding === 'loader' || warning.binding === 'meta')
+              ) {
+                return
+              }
+              warn(warning)
+            },
+          },
+        },
+      }
+    },
+
+    configResolved(resolvedConfig) {
+      // Re-resolve with the final root
+      config = resolveConfig(userConfig, resolvedConfig.root)
+    },
+
+    resolveId(id: string) {
+      if ((Object.values(VIRTUAL_IDS) as string[]).includes(id)) {
+        return `\0${id}`
+      }
+    },
+
+    async load(id: string) {
+      const allResolved = Object.values(RESOLVED_IDS) as string[]
+      if (!allResolved.includes(id)) return null
+
+      // Return from cache if available
+      if (moduleCache.has(id)) {
+        return moduleCache.get(id)!
+      }
+
+      // Generate and cache
+      const code = await generateVirtualModule(id, config)
+      if (code !== null) {
+        moduleCache.set(id, code)
+        return code
+      }
+
+      return null
+    },
+
+    transform(code: string, id: string) {
+      if (!config) return null
+      if (config.autoImports?.runtime === false) return null
+      // Skip virtual modules
+      if (id.startsWith('\0')) return null
+
+      const result = autoImportTransform(code, id, {
+        srcDir: config.srcDir,
+        composableExports: config.autoImports?.composables !== false ? composableExports : undefined,
+      })
+      if (result === null) return null
+      return { code: result, map: null }
+    },
+
+    async configureServer(server: ViteDevServer) {
+      if (!config) {
+        // config might not be set yet; resolve with cwd
+        config = resolveConfig(userConfig, process.cwd())
+      }
+      // Scan composables and write .d.ts + tsconfig paths on dev server start
+      composableExports = await scanComposableExports(config.composablesDir)
+      await writeAutoImportDts(config.root, config.composablesDir, composableExports)
+      writeTsconfigPaths(config.root, config.srcDir)
+
+      // Watch app/ and server/ directories for file changes
+      const watchDirs = [
+        config.pagesDir,
+        config.layoutsDir,
+        config.componentsDir,
+        config.composablesDir,
+        config.pluginsDir,
+        config.middlewareDir,
+        config.serverApiDir,
+        config.serverMiddlewareDir,
+      ]
+
+      createWatcher(server.watcher, watchDirs, async (event, file) => {
+        if (event === 'add' || event === 'unlink') {
+          // Re-scan composables and regenerate .d.ts if a composable changed
+          if (file.startsWith(config.composablesDir)) {
+            composableExports = await scanComposableExports(config.composablesDir)
+            await writeAutoImportDts(config.root, config.composablesDir, composableExports)
+          }
+          // Invalidate relevant virtual modules
+          const dirtyIds = getDirtyVirtualIds(file, config)
+          for (const resolvedId of dirtyIds) {
+            moduleCache.delete(resolvedId)
+            const mod = server.moduleGraph.getModuleById(resolvedId)
+            if (mod) {
+              server.moduleGraph.invalidateModule(mod)
+            }
+          }
+          // Trigger HMR
+          server.ws.send({ type: 'full-reload' })
+        }
+      })
+
+      // Register dev server middleware for API routes + SSR
+      configureCerDevServer(server, config)
+    },
+
+    async buildStart() {
+      if (!config) {
+        config = resolveConfig(userConfig, process.cwd())
+      }
+      // Scan composables and generate type declarations + tsconfig paths
+      composableExports = await scanComposableExports(config.composablesDir)
+      await writeAutoImportDts(config.root, config.composablesDir, composableExports)
+      writeTsconfigPaths(config.root, config.srcDir)
+      // Warm the virtual module cache
+      for (const resolvedId of Object.values(RESOLVED_IDS)) {
+        const code = await generateVirtualModule(resolvedId, config)
+        if (code !== null) {
+          moduleCache.set(resolvedId, code)
+        }
+      }
+    },
+  }
+
+  // Include cerPlugin from the runtime for JIT CSS support
+  const jitPlugins = cerPlugin({
+    content: userConfig.jitCss?.content ?? [
+      `${userConfig.srcDir ?? 'app'}/pages/**/*.ts`,
+      `${userConfig.srcDir ?? 'app'}/components/**/*.ts`,
+      `${userConfig.srcDir ?? 'app'}/layouts/**/*.ts`,
+    ],
+    ssr: userConfig.ssr?.dsd ? { dsd: true } : undefined,
+  })
+
+  return [cerAppPlugin, ...jitPlugins]
+}

package/src/plugin/path-utils.ts

@@ -0,0 +1,186 @@
+import { basename, dirname, join, relative } from 'pathe'
+
+export interface RouteEntry {
+  filePath: string
+  routePath: string
+  tagName: string
+  isDynamic: boolean
+  isCatchAll: boolean
+}
+
+/**
+ * Converts a file path to a route path.
+ * e.g. app/pages/blog/[slug].ts -> /blog/:slug
+ */
+export function fileToRoutePath(filePath: string, pagesRoot: string): string {
+  // Get path relative to pagesRoot, strip extension
+  let rel = relative(pagesRoot, filePath)
+  rel = rel.replace(/\.[jt]s$/, '')
+
+  // Split into segments
+  const segments = rel.split('/')
+
+  const transformed: string[] = []
+  for (const seg of segments) {
+    // Strip route groups: (groupName)
+    if (/^\(.*\)$/.test(seg)) {
+      continue
+    }
+
+    // index becomes empty string (handled by parent)
+    if (seg === 'index') {
+      continue
+    }
+
+    // [...rest] -> :rest*  (named splat so the param is accessible in components)
+    const catchAllMatch = seg.match(/^\[\.\.\.(.+)\]$/)
+    if (catchAllMatch) {
+      transformed.push(`:${catchAllMatch[1]}*`)
+      continue
+    }
+
+    // [param] -> :param
+    const dynamicMatch = seg.match(/^\[(.+)\]$/)
+    if (dynamicMatch) {
+      transformed.push(`:${dynamicMatch[1]}`)
+      continue
+    }
+
+    transformed.push(seg)
+  }
+
+  const path = '/' + transformed.join('/')
+  // Normalize double slashes
+  return path.replace(/\/+/g, '/')
+}
+
+/**
+ * Converts a file path to a kebab-case custom element tag name.
+ * e.g. app/pages/blog/[slug].ts -> page-blog-slug
+ */
+export function fileToTagName(filePath: string, pagesRoot: string): string {
+  let rel = relative(pagesRoot, filePath)
+  rel = rel.replace(/\.[jt]s$/, '')
+
+  // Strip route groups
+  const segments = rel.split('/').filter((seg) => !/^\(.*\)$/.test(seg))
+
+  // Mirror fileToRoutePath: strip 'index' segments unless it's the only segment
+  // e.g. blog/index.ts -> page-blog (not page-blog-index), index.ts -> page-index
+  const tagSegments = segments
+    .map((seg) => seg.replace(/\[/g, '').replace(/\]/g, '').replace(/\./g, ''))
+    .filter((seg, _, arr) => !(seg === 'index' && arr.length > 1))
+
+  // Prefix with 'page-'
+  const name = 'page-' + tagSegments.join('-')
+  // Collapse multiple dashes and convert to lowercase
+  return name
+    .toLowerCase()
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+/**
+ * Converts a layout file path to a kebab-case custom element tag name.
+ * e.g. app/layouts/default.ts -> layout-default
+ */
+export function fileToLayoutTagName(filePath: string, layoutsRoot: string): string {
+  let rel = relative(layoutsRoot, filePath)
+  rel = rel.replace(/\.[jt]s$/, '')
+
+  const segments = rel.split('/')
+  const name = 'layout-' + segments.join('-')
+  return name
+    .toLowerCase()
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+/**
+ * Sorts routes: static first, then dynamic, then catch-all.
+ */
+export function sortRoutes(routes: RouteEntry[]): RouteEntry[] {
+  return [...routes].sort((a, b) => {
+    // Catch-all always last
+    if (a.isCatchAll && !b.isCatchAll) return 1
+    if (!a.isCatchAll && b.isCatchAll) return -1
+
+    // Dynamic after static
+    if (a.isDynamic && !b.isDynamic) return 1
+    if (!a.isDynamic && b.isDynamic) return -1
+
+    // Alphabetical among same type
+    return a.routePath.localeCompare(b.routePath)
+  })
+}
+
+/**
+ * Determines if a route path contains dynamic segments.
+ */
+export function isRouteDynamic(routePath: string): boolean {
+  return routePath.includes(':')
+}
+
+/**
+ * Determines if a route path is a catch-all.
+ */
+export function isRouteCatchAll(routePath: string): boolean {
+  return routePath.includes('*')
+}
+
+/**
+ * Builds a full RouteEntry from a file path.
+ */
+export function buildRouteEntry(filePath: string, pagesRoot: string): RouteEntry {
+  const routePath = fileToRoutePath(filePath, pagesRoot)
+  const tagName = fileToTagName(filePath, pagesRoot)
+  return {
+    filePath,
+    routePath,
+    tagName,
+    isDynamic: isRouteDynamic(routePath),
+    isCatchAll: isRouteCatchAll(routePath),
+  }
+}
+
+/**
+ * Returns the layout name (key) from a layout file path.
+ * e.g. app/layouts/default.ts -> 'default'
+ */
+export function fileToLayoutName(filePath: string, layoutsRoot: string): string {
+  let rel = relative(layoutsRoot, filePath)
+  rel = rel.replace(/\.[jt]s$/, '')
+  return rel.replace(/\//g, '-').toLowerCase()
+}
+
+/**
+ * Returns a safe JS identifier for a file path (for import aliases).
+ */
+export function fileToImportAlias(filePath: string, prefix: string = '_m'): string {
+  const base = basename(filePath).replace(/\.[jt]s$/, '')
+  const safe = base
+    .replace(/[^a-zA-Z0-9_]/g, '_')
+    .replace(/^(\d)/, '_$1')
+  return `${prefix}_${safe}`
+}
+
+/**
+ * Returns the numeric sort prefix from a filename (e.g. "01.store.ts" -> 1).
+ * Returns Infinity if no numeric prefix.
+ */
+export function extractPluginOrder(fileName: string): number {
+  const match = basename(fileName).match(/^(\d+)\./)
+  return match ? parseInt(match[1], 10) : Infinity
+}
+
+/**
+ * Sorts plugin files by leading numeric prefix then alphabetically.
+ */
+export function sortPluginFiles(files: string[]): string[] {
+  return [...files].sort((a, b) => {
+    const aOrder = extractPluginOrder(a)
+    const bOrder = extractPluginOrder(b)
+    if (aOrder !== bOrder) return aOrder - bOrder
+    return a.localeCompare(b)
+  })
+}

package/src/plugin/scanner.ts

@@ -0,0 +1,65 @@
+import fg from 'fast-glob'
+import type { FSWatcher } from 'vite'
+
+/**
+ * Scans a directory for files matching the given glob pattern.
+ * Returns absolute file paths sorted alphabetically.
+ */
+export async function scanDirectory(pattern: string, cwd: string): Promise<string[]> {
+  const files = await fg(pattern, {
+    cwd,
+    absolute: true,
+    onlyFiles: true,
+    ignore: ['**/node_modules/**', '**/.git/**'],
+  })
+  return files.sort()
+}
+
+/**
+ * Creates a file watcher for the given directories using Vite's built-in watcher.
+ * Calls `onChange(event, absoluteFilePath)` on add/unlink events.
+ *
+ * @param watcher - The FSWatcher from Vite's dev server (server.watcher)
+ * @param dirs - Absolute directory paths to watch
+ * @param onChange - Callback invoked with event type and absolute file path
+ * @returns A cleanup function that removes the listeners
+ */
+export function createWatcher(
+  watcher: FSWatcher,
+  dirs: string[],
+  onChange: (event: string, file: string) => void,
+): () => void {
+  // Add directories to Vite's watcher
+  for (const dir of dirs) {
+    watcher.add(dir)
+  }
+
+  const handleAdd = (file: string) => {
+    if (dirs.some((dir) => file.startsWith(dir))) {
+      onChange('add', file)
+    }
+  }
+
+  const handleUnlink = (file: string) => {
+    if (dirs.some((dir) => file.startsWith(dir))) {
+      onChange('unlink', file)
+    }
+  }
+
+  const handleChange = (file: string) => {
+    if (dirs.some((dir) => file.startsWith(dir))) {
+      onChange('change', file)
+    }
+  }
+
+  watcher.on('add', handleAdd)
+  watcher.on('unlink', handleUnlink)
+  watcher.on('change', handleChange)
+
+  // Return cleanup function
+  return () => {
+    watcher.off('add', handleAdd)
+    watcher.off('unlink', handleUnlink)
+    watcher.off('change', handleChange)
+  }
+}