@jasonshimmy/vite-plugin-cer-app 0.1.0

package/src/plugin/dev-server.ts

@@ -0,0 +1,266 @@
+import type { ViteDevServer } from 'vite'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { resolve } from 'pathe'
+
+export interface ResolvedCerConfig {
+  mode: 'spa' | 'ssr' | 'ssg'
+  srcDir: string
+  root: string
+  pagesDir: string
+  layoutsDir: string
+  componentsDir: string
+  composablesDir: string
+  pluginsDir: string
+  middlewareDir: string
+  serverApiDir: string
+  serverMiddlewareDir: string
+  port: number
+  ssr: { dsd: boolean; streaming: boolean }
+  ssg: { routes: 'auto' | string[]; concurrency: number; fallback: boolean }
+  router: { base?: string; scrollToFragment?: boolean | object }
+  jitCss: { content: string[]; extendedColors: boolean }
+  autoImports: { components: boolean; composables: boolean; directives: boolean; runtime: boolean }
+}
+
+/**
+ * Reads the raw body from an IncomingMessage as a Buffer.
+ */
+function readBody(req: IncomingMessage): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = []
+    req.on('data', (chunk: Buffer) => chunks.push(chunk))
+    req.on('end', () => resolve(Buffer.concat(chunks)))
+    req.on('error', reject)
+  })
+}
+
+/**
+ * Parses the request body for JSON content types.
+ * Attaches the parsed body (or raw buffer) to `(req as any).body`.
+ */
+async function parseBody(req: IncomingMessage): Promise<unknown> {
+  const contentType = req.headers['content-type'] ?? ''
+  const method = req.method?.toUpperCase() ?? 'GET'
+
+  if (!['POST', 'PUT', 'PATCH'].includes(method)) {
+    return undefined
+  }
+
+  const buf = await readBody(req)
+
+  if (contentType.includes('application/json')) {
+    try {
+      return JSON.parse(buf.toString('utf-8'))
+    } catch {
+      return undefined
+    }
+  }
+
+  return buf
+}
+
+/**
+ * Extracts route params from a path pattern.
+ * e.g. pattern="/api/users/:id", path="/api/users/42" -> { id: "42" }
+ */
+function matchApiPath(
+  pattern: string,
+  urlPath: string,
+): Record<string, string> | null {
+  const patternParts = pattern.split('/')
+  const urlParts = urlPath.split('?')[0].split('/')
+
+  if (patternParts.length !== urlParts.length) return null
+
+  const params: Record<string, string> = {}
+  for (let i = 0; i < patternParts.length; i++) {
+    const p = patternParts[i]
+    const u = urlParts[i]
+    if (p.startsWith(':')) {
+      params[p.slice(1)] = decodeURIComponent(u)
+    } else if (p !== u) {
+      return null
+    }
+  }
+
+  return params
+}
+
+/**
+ * Parses URL query string into a plain object.
+ */
+function parseQuery(url: string): Record<string, string> {
+  const qIndex = url.indexOf('?')
+  if (qIndex === -1) return {}
+  const qs = url.slice(qIndex + 1)
+  const result: Record<string, string> = {}
+  for (const part of qs.split('&')) {
+    if (!part) continue
+    const eqIdx = part.indexOf('=')
+    if (eqIdx === -1) {
+      result[decodeURIComponent(part)] = ''
+    } else {
+      result[decodeURIComponent(part.slice(0, eqIdx))] = decodeURIComponent(
+        part.slice(eqIdx + 1),
+      )
+    }
+  }
+  return result
+}
+
+/**
+ * Configures the Vite dev server with:
+ * 1. API route handlers from server/api/
+ * 2. Server middleware from server/middleware/
+ * 3. SSR HTML rendering (when mode is 'ssr')
+ */
+export function configureCerDevServer(
+  server: ViteDevServer,
+  config: ResolvedCerConfig,
+): void {
+  server.middlewares.use(async (req: IncomingMessage, res: ServerResponse, next: () => void) => {
+    const url = req.url ?? '/'
+    const method = req.method?.toUpperCase() ?? 'GET'
+
+    // 1. Server middleware from server/middleware/ runs first (CORS, auth, logging, etc.)
+    try {
+      const smMod = await server.ssrLoadModule('virtual:cer-server-middleware')
+      const serverMiddleware = (smMod.serverMiddleware ?? smMod.default ?? []) as Array<{
+        name: string
+        handler: (req: IncomingMessage, res: ServerResponse, next: () => void) => void | Promise<void>
+      }>
+
+      for (const { handler } of serverMiddleware) {
+        if (typeof handler === 'function') {
+          let calledNext = false
+          await handler(req, res, () => {
+            calledNext = true
+          })
+          if (!calledNext) return
+        }
+      }
+    } catch {
+      // middleware module not ready — continue
+    }
+
+    // 2. API route handlers from server/api/
+    try {
+      const mod = await server.ssrLoadModule('virtual:cer-server-api')
+      const apiRoutes: Array<{ path: string; handlers: Record<string, unknown> }> =
+        mod.apiRoutes ?? mod.default?.apiRoutes ?? []
+
+      for (const route of apiRoutes) {
+        const params = matchApiPath(route.path, url.split('?')[0])
+        if (params === null) continue
+
+        const query = parseQuery(url)
+        const body = await parseBody(req)
+
+        // Augment request
+        const augmentedReq = req as IncomingMessage & {
+          params: Record<string, string>
+          query: Record<string, string>
+          body: unknown
+        }
+        augmentedReq.params = params
+        augmentedReq.query = query
+        augmentedReq.body = body
+
+        // Augment response with json() and status() helpers
+        const augmentedRes = res as ServerResponse & {
+          json(data: unknown): void
+          status(code: number): typeof augmentedRes
+          _statusCode?: number
+        }
+
+        augmentedRes.json = function (data: unknown) {
+          const json = JSON.stringify(data)
+          this.setHeader('Content-Type', 'application/json')
+          this.end(json)
+        }
+
+        augmentedRes.status = function (code: number) {
+          this.statusCode = code
+          return this
+        }
+
+        // Try to find a handler for the HTTP method. Exports may be GET/POST (uppercase)
+        // or get/post (lowercase); try both plus a 'default' fallback.
+        const handlerKey = method.toLowerCase()
+        const handler =
+          (route.handlers[handlerKey] as Function | undefined) ??
+          (route.handlers[method.toUpperCase()] as Function | undefined) ??
+          (route.handlers['default'] as Function | undefined)
+
+        if (typeof handler === 'function') {
+          try {
+            await handler(augmentedReq, augmentedRes)
+          } catch (err) {
+            server.ssrFixStacktrace(err as Error)
+            console.error(`[cer-app] API handler error at ${route.path}:`, err)
+            res.statusCode = 500
+            res.setHeader('Content-Type', 'application/json')
+            res.end(JSON.stringify({ error: 'Internal Server Error' }))
+          }
+          return
+        }
+      }
+    } catch {
+      // virtual:cer-server-api not yet ready or empty — continue
+    }
+
+    // 3. SSR mode: intercept HTML requests
+    if (config.mode === 'ssr') {
+      const acceptsHtml =
+        (req.headers['accept'] ?? '').includes('text/html') ||
+        url === '/' ||
+        (!url.includes('.') && !url.startsWith('/api/'))
+
+      if (acceptsHtml) {
+        try {
+          // Load the SSR entry module
+          const ssrEntry = await server.ssrLoadModule(
+            resolve(config.srcDir, 'entry-server.ts'),
+          )
+
+          const handler =
+            ssrEntry.handler ?? ssrEntry.default?.handler
+
+          if (typeof handler === 'function') {
+            await handler(req, res)
+            return
+          }
+
+          // Fallback: render using template + ssrEntry render function
+          const renderFn = ssrEntry.render ?? ssrEntry.default?.render
+
+          if (typeof renderFn === 'function') {
+            const template = await server.transformIndexHtml(
+              url,
+              `<!DOCTYPE html><html><head></head><body><div id="app"></div></body></html>`,
+            )
+
+            const result = await renderFn({ url, req })
+            const rendered = template.replace(
+              '<div id="app"></div>',
+              `<div id="app">${result.html ?? ''}</div>`,
+            )
+
+            res.setHeader('Content-Type', 'text/html; charset=utf-8')
+            res.end(rendered)
+            return
+          }
+        } catch (err) {
+          server.ssrFixStacktrace(err as Error)
+          console.error('[cer-app] SSR render error:', err)
+          res.statusCode = 500
+          res.setHeader('Content-Type', 'text/plain')
+          res.end('SSR Error: ' + String(err))
+          return
+        }
+      }
+    }
+
+    next()
+  })
+}

package/src/plugin/dts-generator.ts

@@ -0,0 +1,214 @@
+import { writeFileSync } from 'node:fs'
+import { readFileSync, existsSync } from 'node:fs'
+import { join, relative } from 'pathe'
+import { scanDirectory } from './scanner.js'
+
+/**
+ * Writes `cer-tsconfig.json` to the project root containing path aliases for
+ * the `~/` prefix. Users extend it from their `tsconfig.json`:
+ *   { "extends": "./cer-tsconfig.json" }
+ */
+export function writeTsconfigPaths(root: string, srcDir: string): void {
+  const rel = './' + relative(root, srcDir).replace(/\\/g, '/')
+  const paths: Record<string, string[]> = {
+    '~/*': [`${rel}/*`],
+    '~/pages/*': [`${rel}/pages/*`],
+    '~/layouts/*': [`${rel}/layouts/*`],
+    '~/components/*': [`${rel}/components/*`],
+    '~/composables/*': [`${rel}/composables/*`],
+    '~/plugins/*': [`${rel}/plugins/*`],
+    '~/middleware/*': [`${rel}/middleware/*`],
+    '~/assets/*': [`${rel}/assets/*`],
+  }
+  const content = JSON.stringify({ compilerOptions: { paths } }, null, 2) + '\n'
+  writeFileSync(join(root, 'cer-tsconfig.json'), content, 'utf-8')
+}
+
+const RUNTIME_GLOBALS = [
+  'component',
+  'html',
+  'css',
+  'ref',
+  'computed',
+  'watch',
+  'watchEffect',
+  'useProps',
+  'useEmit',
+  'useOnConnected',
+  'useOnDisconnected',
+  'useOnAttributeChanged',
+  'useOnError',
+  'useStyle',
+  'useDesignTokens',
+  'useGlobalStyle',
+  'useExpose',
+  'useSlots',
+  'provide',
+  'inject',
+  'createComposable',
+  'nextTick',
+  'defineModel',
+  'getCurrentComponentContext',
+  'isReactiveState',
+  'unsafeHTML',
+  'decodeEntities',
+  'useTeleport',
+]
+
+const DIRECTIVE_GLOBALS = ['when', 'each', 'match', 'anchorBlock']
+
+const FRAMEWORK_GLOBALS = ['useHead', 'usePageData']
+
+/**
+ * Scans a composables directory and returns a map of export name → file path.
+ * Uses a simple regex to find exported identifiers.
+ */
+export async function scanComposableExports(composablesDir: string): Promise<Map<string, string>> {
+  const result = new Map<string, string>()
+  if (!existsSync(composablesDir)) return result
+
+  const files = await scanDirectory('**/*.ts', composablesDir)
+  const exportPattern = /export\s+(?:async\s+)?(?:function|const|let|var|class)\s+(\w+)/g
+
+  for (const file of files) {
+    const code = readFileSync(file, 'utf-8')
+    exportPattern.lastIndex = 0
+    let match
+    while ((match = exportPattern.exec(code)) !== null) {
+      result.set(match[1], file)
+    }
+  }
+
+  return result
+}
+
+/**
+ * Generates the content of `cer-auto-imports.d.ts`.
+ * @param root - project root (where the .d.ts file will be written)
+ */
+export async function generateAutoImportDts(
+  root: string,
+  composablesDir: string,
+  composableExports?: Map<string, string>,
+): Promise<string> {
+  const exports = composableExports ?? await scanComposableExports(composablesDir)
+
+  const lines: string[] = [
+    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// Do not edit — regenerated automatically on dev server start and build.',
+    '',
+    'export {}',
+    '',
+    'declare global {',
+  ]
+
+  for (const name of RUNTIME_GLOBALS) {
+    lines.push(`  const ${name}: typeof import('@jasonshimmy/custom-elements-runtime')['${name}']`)
+  }
+
+  lines.push('')
+
+  for (const name of DIRECTIVE_GLOBALS) {
+    lines.push(`  const ${name}: typeof import('@jasonshimmy/custom-elements-runtime/directives')['${name}']`)
+  }
+
+  lines.push('')
+
+  for (const name of FRAMEWORK_GLOBALS) {
+    lines.push(`  const ${name}: typeof import('vite-plugin-cer-app/composables')['${name}']`)
+  }
+
+  if (exports.size > 0) {
+    lines.push('')
+    for (const [name, filePath] of exports) {
+      // Use a path relative to the project root so the .d.ts is portable
+      const rel = './' + relative(root, filePath).replace(/\.ts$/, '')
+      lines.push(`  const ${name}: typeof import('${rel}')['${name}']`)
+    }
+  }
+
+  lines.push('')
+  lines.push('  // SSR loader data injected as window.__CER_DATA__ by the server.')
+  lines.push('  // Consumed once by usePageData() during client hydration.')
+  lines.push('  // eslint-disable-next-line @typescript-eslint/no-explicit-any')
+  lines.push('  var __CER_DATA__: any')
+  lines.push('}')
+  lines.push('')
+
+  return lines.join('\n')
+}
+
+/**
+ * Generates the content of `cer-env.d.ts` — a script (non-module) file
+ * containing ambient `declare module` declarations for all virtual modules.
+ * Must NOT contain `export {}` or any top-level imports/exports.
+ */
+export async function generateVirtualModuleDts(
+  root: string,
+  composablesDir: string,
+  composableExports?: Map<string, string>,
+): Promise<string> {
+  const exports = composableExports ?? await scanComposableExports(composablesDir)
+
+  const lines: string[] = [
+    '// AUTO-GENERATED by vite-plugin-cer-app',
+    '// Do not edit — regenerated automatically on dev server start and build.',
+    '',
+    `declare module 'virtual:cer-routes' {`,
+    `  import type { Route } from '@jasonshimmy/custom-elements-runtime/router'`,
+    `  const routes: Route[]`,
+    `  export default routes`,
+    `}`,
+    '',
+    `declare module 'virtual:cer-layouts' {}`,
+    `declare module 'virtual:cer-components' {}`,
+    '',
+    `declare module 'virtual:cer-plugins' {`,
+    `  import type { AppPlugin } from 'vite-plugin-cer-app/types'`,
+    `  const plugins: AppPlugin[]`,
+    `  export default plugins`,
+    `}`,
+    '',
+    `declare module 'virtual:cer-composables' {`,
+  ]
+
+  for (const [name, filePath] of exports) {
+    const rel = './' + relative(root, filePath).replace(/\.ts$/, '')
+    lines.push(`  export { ${name} } from '${rel}'`)
+  }
+
+  lines.push(`}`)
+  lines.push('')
+  lines.push(`declare module 'virtual:cer-middleware' {`)
+  lines.push(`  const middleware: Record<string, Function>`)
+  lines.push(`  export { middleware }`)
+  lines.push(`}`)
+  lines.push('')
+  lines.push(`declare module 'virtual:cer-loading' {`)
+  lines.push(`  export const hasLoading: boolean`)
+  lines.push(`  export const loadingTag: string | null`)
+  lines.push(`}`)
+  lines.push('')
+  lines.push(`declare module 'virtual:cer-error' {`)
+  lines.push(`  export const hasError: boolean`)
+  lines.push(`  export const errorTag: string | null`)
+  lines.push(`}`)
+  lines.push('')
+
+  return lines.join('\n')
+}
+
+/**
+ * Writes both `cer-auto-imports.d.ts` and `cer-env.d.ts` to the project root.
+ */
+export async function writeAutoImportDts(
+  root: string,
+  composablesDir: string,
+  composableExports?: Map<string, string>,
+): Promise<void> {
+  const scanned = composableExports ?? await scanComposableExports(composablesDir)
+  const autoImportsContent = await generateAutoImportDts(root, composablesDir, scanned)
+  const envContent = await generateVirtualModuleDts(root, composablesDir, scanned)
+  writeFileSync(join(root, 'cer-auto-imports.d.ts'), autoImportsContent, 'utf-8')
+  writeFileSync(join(root, 'cer-env.d.ts'), envContent, 'utf-8')
+}