@jasonshimmy/vite-plugin-cer-app 0.23.2 → 0.24.0

package/src/plugin/path-utils.ts

@@ -1,186 +0,0 @@
-import { basename, 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

@@ -1,65 +0,0 @@
-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)
-  }
-}

package/src/plugin/transforms/auto-import.ts

@@ -1,206 +0,0 @@
-import MagicString from 'magic-string'
-import { normalize } from 'pathe'
-
-export interface AutoImportOptions {
-  srcDir: string
-  /** Absolute path to server/middleware/ directory */
-  serverMiddlewareDir?: string
-  /** Map of composable export name → absolute file path */
-  composableExports?: Map<string, string>
-}
-
-// P1-5: Per-identifier import maps. Only the identifiers actually referenced in
-// a file are injected — this eliminates the full-group injection that prevented
-// tree-shaking when a page used only one framework composable.
-
-/** Maps each runtime identifier to its source module. All from the main runtime package. */
-const RUNTIME_MAP: Record<string, string> = {
-  component: '@jasonshimmy/custom-elements-runtime',
-  defineAsyncComponent: '@jasonshimmy/custom-elements-runtime',
-  html: '@jasonshimmy/custom-elements-runtime',
-  css: '@jasonshimmy/custom-elements-runtime',
-  ref: '@jasonshimmy/custom-elements-runtime',
-  computed: '@jasonshimmy/custom-elements-runtime',
-  watch: '@jasonshimmy/custom-elements-runtime',
-  watchEffect: '@jasonshimmy/custom-elements-runtime',
-  useProps: '@jasonshimmy/custom-elements-runtime',
-  useEmit: '@jasonshimmy/custom-elements-runtime',
-  useOnConnected: '@jasonshimmy/custom-elements-runtime',
-  useOnDisconnected: '@jasonshimmy/custom-elements-runtime',
-  useOnAttributeChanged: '@jasonshimmy/custom-elements-runtime',
-  useOnError: '@jasonshimmy/custom-elements-runtime',
-  useStyle: '@jasonshimmy/custom-elements-runtime',
-  useDesignTokens: '@jasonshimmy/custom-elements-runtime',
-  useGlobalStyle: '@jasonshimmy/custom-elements-runtime',
-  useExpose: '@jasonshimmy/custom-elements-runtime',
-  useSlots: '@jasonshimmy/custom-elements-runtime',
-  provide: '@jasonshimmy/custom-elements-runtime',
-  inject: '@jasonshimmy/custom-elements-runtime',
-  createComposable: '@jasonshimmy/custom-elements-runtime',
-  nextTick: '@jasonshimmy/custom-elements-runtime',
-  defineModel: '@jasonshimmy/custom-elements-runtime',
-  getCurrentComponentContext: '@jasonshimmy/custom-elements-runtime',
-  isReactiveState: '@jasonshimmy/custom-elements-runtime',
-  unsafeHTML: '@jasonshimmy/custom-elements-runtime',
-  decodeEntities: '@jasonshimmy/custom-elements-runtime',
-  useTeleport: '@jasonshimmy/custom-elements-runtime',
-}
-
-/** Maps each directive identifier to its source module (directives sub-path). */
-const DIRECTIVE_MAP: Record<string, string> = {
-  when: '@jasonshimmy/custom-elements-runtime/directives',
-  each: '@jasonshimmy/custom-elements-runtime/directives',
-  match: '@jasonshimmy/custom-elements-runtime/directives',
-  anchorBlock: '@jasonshimmy/custom-elements-runtime/directives',
-}
-
-/** Maps each framework composable to its source module. */
-const FRAMEWORK_MAP: Record<string, string> = {
-  useHead: '@jasonshimmy/vite-plugin-cer-app/composables',
-  usePageData: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useInject: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useRuntimeConfig: '@jasonshimmy/vite-plugin-cer-app/composables',
-  defineMiddleware: '@jasonshimmy/vite-plugin-cer-app/composables',
-  defineServerMiddleware: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useSeoMeta: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useCookie: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useSession: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useAuth: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useFetch: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useRoute: '@jasonshimmy/vite-plugin-cer-app/composables',
-  navigateTo: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useState: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useLocale: '@jasonshimmy/vite-plugin-cer-app/composables',
-  queryContent: '@jasonshimmy/vite-plugin-cer-app/composables',
-  useContentSearch: '@jasonshimmy/vite-plugin-cer-app/composables',
-}
-
-// All identifier maps — processed in order. Earlier maps take precedence for
-// the "already imported from this module" duplicate check.
-const ALL_MAPS = [RUNTIME_MAP, DIRECTIVE_MAP, FRAMEWORK_MAP]
-
-/**
- * Returns true if the file already manually imports from the given source module.
- * When true, we skip auto-injecting identifiers from that module to avoid duplicates.
- */
-function isAlreadyImported(code: string, sourceModule: string): boolean {
-  return (
-    code.includes(`from '${sourceModule}'`) ||
-    code.includes(`from "${sourceModule}"`)
-  )
-}
-
-/**
- * Builds minimal import statements containing only the identifiers actually
- * referenced in the file. Groups identifiers by source module. Skips modules
- * that the file already imports from manually.
- *
- * Returns an array of import statement strings (one per source module used).
- */
-function buildMinimalImportStatements(code: string, maps: Record<string, string>[]): string[] {
-  // Group identifier → source module, collecting only used ones.
-  const grouped = new Map<string, string[]>()
-
-  for (const map of maps) {
-    for (const [identifier, sourceModule] of Object.entries(map)) {
-      // Skip if the file already imports from this module.
-      if (isAlreadyImported(code, sourceModule)) continue
-      // Skip if identifier not referenced in the file.
-      const pattern = new RegExp(`\\b${identifier}\\b`)
-      if (!pattern.test(code)) continue
-
-      const existing = grouped.get(sourceModule) ?? []
-      existing.push(identifier)
-      grouped.set(sourceModule, existing)
-    }
-  }
-
-  return Array.from(grouped.entries()).map(
-    ([mod, ids]) => `import { ${ids.join(', ')} } from '${mod}';`,
-  )
-}
-
-/**
- * Auto-import transform: injects runtime and directive imports at the top of
- * files inside app/pages/, app/layouts/, or app/components/ if those
- * identifiers are not already imported.
- *
- * Returns the transformed code string, or null if no injection was needed.
- */
-export function autoImportTransform(
-  code: string,
-  id: string,
-  opts: AutoImportOptions,
-): string | null {
-  const normalizedId = normalize(id)
-  const srcDir = normalize(opts.srcDir)
-
-  // Transform files inside app/pages/, app/layouts/, app/components/, app/middleware/
-  // AND special convention files directly in app/ (loading.ts, error.ts, etc.)
-  const isSubDir =
-    normalizedId.startsWith(srcDir + '/pages/') ||
-    normalizedId.startsWith(srcDir + '/layouts/') ||
-    normalizedId.startsWith(srcDir + '/components/') ||
-    normalizedId.startsWith(srcDir + '/middleware/') ||
-    normalizedId.startsWith(srcDir + '/composables/')
-  // Files directly in srcDir root (e.g. app/loading.ts, app/error.ts)
-  const isRootConventionFile =
-    normalizedId.startsWith(srcDir + '/') &&
-    !normalizedId.slice(srcDir.length + 1).includes('/')
-  // server/middleware/ files also get framework auto-imports
-  const serverMiddlewareDir = opts.serverMiddlewareDir ? normalize(opts.serverMiddlewareDir) : null
-  const isServerMiddleware = serverMiddlewareDir != null && normalizedId.startsWith(serverMiddlewareDir + '/')
-  const isTargetDir = isSubDir || isRootConventionFile || isServerMiddleware
-
-  if (!isTargetDir) return null
-
-  // Skip virtual modules and non-ts files
-  if (id.startsWith('\0') || (!id.endsWith('.ts') && !id.endsWith('.js'))) return null
-
-  // Skip virtual:cer-composables injection for files inside app/composables/ to
-  // avoid circular imports (the virtual module re-exports from all composable files).
-  const isComposablesDir = normalizedId.startsWith(srcDir + '/composables/')
-  const composableImport = isComposablesDir ? null : buildComposableImport(code, opts.composableExports)
-
-  // Build per-identifier import statements from all maps.
-  const importLines = buildMinimalImportStatements(code, ALL_MAPS)
-
-  if (importLines.length === 0 && !composableImport) return null
-
-  const ms = new MagicString(code)
-  const injectLines: string[] = [...importLines]
-
-  if (composableImport) {
-    injectLines.push(composableImport)
-  }
-
-  ms.prepend(injectLines.join('\n') + '\n')
-
-  return ms.toString()
-}
-
-/**
- * Builds an import statement for any composable names used in the file
- * that are not already imported.
- * Returns null if no injection is needed.
- */
-function buildComposableImport(code: string, composableExports?: Map<string, string>): string | null {
-  if (!composableExports || composableExports.size === 0) return null
-
-  // Skip if already importing from virtual:cer-composables
-  if (code.includes("from 'virtual:cer-composables'") || code.includes('from "virtual:cer-composables"')) {
-    return null
-  }
-
-  const needed: string[] = []
-  for (const name of composableExports.keys()) {
-    const pattern = new RegExp(`\\b${name}\\b`)
-    if (pattern.test(code)) {
-      needed.push(name)
-    }
-  }
-
-  if (needed.length === 0) return null
-
-  return `import { ${needed.join(', ')} } from 'virtual:cer-composables';`
-}

package/src/plugin/transforms/head-inject.ts

@@ -1,161 +0,0 @@
-export interface HeadTag {
-  tag: string
-  attrs?: Record<string, string>
-  innerHTML?: string
-}
-
-export interface HeadInput {
-  title?: string
-  meta?: Array<Record<string, string>>
-  link?: Array<Record<string, string>>
-  script?: Array<Record<string, string>>
-  style?: Array<Record<string, string>>
-}
-
-/**
- * Inserts stringified head tags before the closing </head> tag.
- * If no </head> is found, prepends to the document.
- */
-export function injectHead(html: string, headTags: HeadTag[]): string {
-  if (headTags.length === 0) return html
-
-  const serialized = headTags.map(serializeTag).join('\n')
-
-  const closeHeadIdx = html.indexOf('</head>')
-  if (closeHeadIdx !== -1) {
-    return html.slice(0, closeHeadIdx) + serialized + '\n' + html.slice(closeHeadIdx)
-  }
-
-  // No </head> found: prepend
-  return serialized + '\n' + html
-}
-
-/**
- * Serializes a single HeadTag to an HTML string.
- */
-function serializeTag(tag: HeadTag): string {
-  const attrs = tag.attrs
-    ? Object.entries(tag.attrs)
-        .map(([k, v]) => (v === '' ? k : `${k}="${escapeAttr(v)}"`))
-        .join(' ')
-    : ''
-
-  const openTag = attrs ? `<${tag.tag} ${attrs}>` : `<${tag.tag}>`
-
-  if (tag.innerHTML !== undefined) {
-    return `${openTag}${tag.innerHTML}</${tag.tag}>`
-  }
-
-  // Self-closing for void elements
-  const voidTags = new Set(['meta', 'link', 'base', 'br', 'hr', 'img', 'input'])
-  if (voidTags.has(tag.tag)) {
-    return attrs ? `<${tag.tag} ${attrs}>` : `<${tag.tag}>`
-  }
-
-  return `${openTag}</${tag.tag}>`
-}
-
-function escapeAttr(value: string): string {
-  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-}
-
-/**
- * HeadCollector gathers HeadInput objects during SSR and serializes them
- * to an HTML string for injection into the document head.
- */
-export class HeadCollector {
-  private readonly _collected: HeadInput[] = []
-
-  collect(tags: HeadInput): void {
-    this._collected.push(tags)
-  }
-
-  serialize(): string {
-    const tags = headInputToTags(this._collected)
-    return tags.map(serializeTag).join('\n')
-  }
-
-  reset(): void {
-    this._collected.length = 0
-  }
-
-  getCollected(): HeadInput[] {
-    return [...this._collected]
-  }
-}
-
-/**
- * Converts an array of HeadInput objects to a flat array of HeadTags.
- * Later entries override earlier ones for title; meta/link/script/style are merged.
- */
-function headInputToTags(inputs: HeadInput[]): HeadTag[] {
-  const tags: HeadTag[] = []
-
-  // Collect title — last one wins
-  let title: string | undefined
-  for (const input of inputs) {
-    if (input.title !== undefined) {
-      title = input.title
-    }
-  }
-  if (title !== undefined) {
-    tags.push({ tag: 'title', innerHTML: escapeHtml(title) })
-  }
-
-  // Collect meta tags (deduplicate by name/property)
-  const metaMap = new Map<string, Record<string, string>>()
-  for (const input of inputs) {
-    if (input.meta) {
-      for (const meta of input.meta) {
-        const key = meta.name ?? meta.property ?? meta.charset ?? JSON.stringify(meta)
-        metaMap.set(key, meta)
-      }
-    }
-  }
-  for (const attrs of metaMap.values()) {
-    tags.push({ tag: 'meta', attrs })
-  }
-
-  // Collect link tags (deduplicate by rel+href)
-  const linkMap = new Map<string, Record<string, string>>()
-  for (const input of inputs) {
-    if (input.link) {
-      for (const link of input.link) {
-        const key = `${link.rel ?? ''}:${link.href ?? ''}`
-        linkMap.set(key, link)
-      }
-    }
-  }
-  for (const attrs of linkMap.values()) {
-    tags.push({ tag: 'link', attrs })
-  }
-
-  // Collect script tags
-  for (const input of inputs) {
-    if (input.script) {
-      for (const script of input.script) {
-        const { innerHTML, ...attrs } = script as Record<string, string>
-        tags.push({ tag: 'script', attrs, innerHTML })
-      }
-    }
-  }
-
-  // Collect style tags
-  for (const input of inputs) {
-    if (input.style) {
-      for (const style of input.style) {
-        const { innerHTML, ...attrs } = style as Record<string, string>
-        tags.push({ tag: 'style', attrs, innerHTML })
-      }
-    }
-  }
-
-  return tags
-}
-
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-}

package/src/plugin/virtual/composables.ts

@@ -1,28 +0,0 @@
-import { existsSync } from 'node:fs'
-import { scanDirectory } from '../scanner.js'
-
-/**
- * Generates the virtual:cer-composables module code.
- * Scans app/composables/ and re-exports all composable functions.
- */
-export async function generateComposablesCode(composablesDir: string): Promise<string> {
-  if (!existsSync(composablesDir)) {
-    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No composables directory found\n`
-  }
-
-  const files = await scanDirectory('**/*.ts', composablesDir)
-
-  if (files.length === 0) {
-    return `// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app\n// No composables found\n`
-  }
-
-  const lines: string[] = ['// AUTO-GENERATED by @jasonshimmy/vite-plugin-cer-app', '']
-
-  for (const file of files) {
-    lines.push(`export * from ${JSON.stringify(file)}`)
-  }
-
-  lines.push('')
-
-  return lines.join('\n')
-}