@typed/vite-plugin 0.0.19 → 0.0.21

package/src/vite-plugin.ts

@@ -1,6 +1,7 @@
-import { existsSync } from 'fs'
+import { existsSync, readFileSync, writeFileSync } from 'fs'
 import { readFile } from 'fs/promises'
-import { basename, dirname, relative, resolve } from 'path'
+import { EOL } from 'os'
+import { basename, dirname, join, relative, resolve } from 'path'
 
 import effectTransformer from '@effect/language-service/transformer'
 import {
@@ -11,12 +12,16 @@ import {
   readModules,
   readApiModules,
   makeApiModule,
+  type ApiModuleTreeJson,
+  type ModuleTreeJsonWithFallback,
+  moduleTreeToJson,
+  apiModuleTreeToJson,
 } from '@typed/compiler'
 import glob from 'fast-glob'
 import { Project, SourceFile, ts, type CompilerOptions } from 'ts-morph'
 // @ts-expect-error Unable to resolve types w/ NodeNext
 import vavite from 'vavite'
-import type { ConfigEnv, Plugin, PluginOption, UserConfig, ViteDevServer } from 'vite'
+import type { ConfigEnv, Logger, Plugin, PluginOption, UserConfig, ViteDevServer } from 'vite'
 import compression from 'vite-plugin-compression'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
@@ -66,17 +71,28 @@ export interface PluginOptions {
    * If true, will configure the plugin to save all the generated files to disk
    */
   readonly saveGeneratedModules?: boolean
+
+  /**
+   * If true, will configure the plugin to operate in a static build mode.
+   */
+  readonly isStaticBuild?: boolean
 }
 
 const cwd = process.cwd()
 
-const PLUGIN_NAME = '@typed/vite-plugin'
+export const PLUGIN_NAME = '@typed/vite-plugin'
+
+export interface TypedVitePlugin extends Plugin {
+  readonly name: typeof PLUGIN_NAME
+  readonly resolvedOptions: ResolvedOptions
+}
 
 const RUNTIME_VIRTUAL_ENTRYPOINT_PREFIX = 'runtime'
 const BROWSER_VIRTUAL_ENTRYPOINT_PREFIX = 'browser'
 const HTML_VIRTUAL_ENTRYPOINT_PREFIX = 'html'
 const API_VIRTUAL_ENTRYPOINT_PREFIX = 'api'
 const EXPRESS_VIRTUAL_ENTRYPOINT_PREFIX = 'express'
+const TYPED_CONFIG_IMPORT = 'typed:config'
 
 const PREFIXES = [
   RUNTIME_VIRTUAL_ENTRYPOINT_PREFIX,
@@ -88,6 +104,76 @@ const PREFIXES = [
 
 const VIRTUAL_ID_PREFIX = '\0'
 
+export interface Manifest {
+  readonly entryFiles: EntryFile[]
+
+  readonly modules: {
+    [importer: string]: Record<string, ManifestEntry>
+  }
+}
+
+export interface ClientManifest extends Manifest {
+  readonly entryFiles: HtmlEntryFile[]
+
+  readonly modules: {
+    [importer: string]: Record<string, ManifestEntry>
+  }
+}
+
+export type EntryFile = HtmlEntryFile | TsEntryFile
+
+export interface HtmlEntryFile {
+  readonly type: 'html'
+  readonly filePath: string
+  readonly imports: string[]
+  readonly basePath: string
+}
+
+export interface TsEntryFile {
+  readonly type: 'ts'
+  readonly filePath: string
+}
+
+export type ManifestEntry =
+  | ApiManifestEntry
+  | ExpressManifestEntry
+  | HtmlManifestEntry
+  | RuntimeManifestEntry
+  | BrowserManifestEntry
+
+export interface ApiManifestEntry extends ApiModuleTreeJson {
+  readonly type: 'api'
+}
+
+export interface ExpressManifestEntry extends ApiModuleTreeJson {
+  readonly type: 'express'
+}
+
+export interface HtmlManifestEntry {
+  readonly type: 'html'
+  readonly filePath: string
+}
+
+export interface BrowserManifestEntry extends ModuleTreeJsonWithFallback {
+  readonly type: 'browser'
+}
+
+export interface RuntimeManifestEntry extends ModuleTreeJsonWithFallback {
+  readonly type: 'runtime'
+}
+
+export interface ResolvedOptions {
+  readonly sourceDirectory: string
+  readonly tsConfig: string
+  readonly serverFilePath: string
+  readonly clientOutputDirectory: string
+  readonly serverOutputDirectory: string
+  readonly htmlFiles: readonly string[]
+  readonly debug: boolean
+  readonly saveGeneratedModules: boolean
+  readonly isStaticBuild: boolean
+}
+
 export default function makePlugin({
   sourceDirectory: directory,
   tsConfig,
@@ -97,6 +183,7 @@ export default function makePlugin({
   htmlFileGlobs,
   debug = false,
   saveGeneratedModules = false,
+  isStaticBuild = false,
 }: PluginOptions): PluginOption[] {
   // Resolved options
   const sourceDirectory = resolve(cwd, directory)
@@ -120,10 +207,38 @@ export default function makePlugin({
     debug: debug ? defaultIncludeExcludeTs : {},
   }
 
+  const resolvedOptions: ResolvedOptions = {
+    sourceDirectory,
+    tsConfig: tsConfigFilePath,
+    serverFilePath: resolvedServerFilePath,
+    serverOutputDirectory: resolvedServerOutputDirectory,
+    clientOutputDirectory: resolvedClientOutputDirectory,
+    htmlFiles: findHtmlFiles(sourceDirectory, htmlFileGlobs).map((p) =>
+      resolve(sourceDirectory, p),
+    ),
+    debug,
+    saveGeneratedModules,
+    isStaticBuild,
+  }
+
   const dependentsMap = new Map<string, Set<string>>()
   const filePathToModule = new Map<string, SourceFile>()
+  const manifest: Manifest = {
+    entryFiles: [],
+    modules: {},
+  }
+
+  const addManifestEntry = (entry: ManifestEntry, importer: string, id: string) => {
+    if (!manifest.modules[importer]) {
+      manifest.modules[importer] = {}
+    }
+
+    manifest.modules[importer][id] = entry
+  }
 
   let devServer: ViteDevServer
+  let logger: Logger
+  let isSsr = false
   let project: Project
   let transformers: ts.CustomTransformers
 
@@ -133,14 +248,6 @@ export default function makePlugin({
     tsconfigPaths({
       projects: [tsConfigFilePath],
     }),
-    ...(serverExists
-      ? [
-          vavite({
-            serverEntry: resolvedServerFilePath,
-            serveClientAssetsInDev: true,
-          }),
-        ]
-      : []),
   ]
 
   const setupProject = () => {
@@ -148,9 +255,9 @@ export default function makePlugin({
       return
     }
 
-    info(`Setting up TypeScript project...`)
+    info(`Setting up TypeScript project...`, logger)
     project = setupTsProject(tsConfigFilePath)
-    info(`Setup TypeScript project.`)
+    info(`Setup TypeScript project.`, logger)
 
     // Setup transformer for virtual modules.
     transformers = {
@@ -169,7 +276,9 @@ export default function makePlugin({
 
     return {
       ...project.getCompilerOptions(),
-      allowJs: true,
+      inlineSourceMap: false,
+      inlineSources: saveGeneratedModules,
+      sourceMap: true,
     }
   }
 
@@ -196,7 +305,7 @@ export default function makePlugin({
               const mod = devServer.moduleGraph.getModuleById(dependent)
 
               if (mod) {
-                info(`reloading ${dependent}`)
+                info(`reloading ${dependent}`, logger)
 
                 await devServer.reloadModule(mod)
               }
@@ -213,24 +322,32 @@ export default function makePlugin({
     }
   }
 
-  const buildRenderModule = async (importer: string, id: string) => {
+  const buildRuntimeModule = async (importer: string, id: string) => {
     const moduleDirectory = resolve(dirname(importer), parseModulesFromId(id, importer))
     const relativeDirectory = relative(sourceDirectory, moduleDirectory)
     const isBrowser = id.startsWith(BROWSER_VIRTUAL_ENTRYPOINT_PREFIX)
     const moduleType = isBrowser ? 'browser' : 'runtime'
     const filePath = `${moduleDirectory}.${moduleType}.__generated__.ts`
-
-    info(`Building ${moduleType} module for ${relativeDirectory}...`)
-
     const directory = await readDirectory(moduleDirectory)
     const moduleTree = readModules(project, directory)
 
+    addManifestEntry(
+      {
+        type: moduleType,
+        ...moduleTreeToJson(sourceDirectory, moduleTree),
+      },
+      relative(sourceDirectory, importer),
+      id,
+    )
+
     // Setup the TypeScript project if it hasn't been already
     setupProject()
 
     const sourceFile = makeRuntimeModule(project, moduleTree, importer, filePath, isBrowser)
 
-    info(`Built ${moduleType} module for ${relativeDirectory}.`)
+    addDependents(sourceFile)
+
+    info(`Built ${moduleType} module for ${relativeDirectory}.`, logger)
 
     filePathToModule.set(filePath, sourceFile)
 
@@ -247,10 +364,8 @@ export default function makePlugin({
     const relativeHtmlFilePath = relative(sourceDirectory, htmlFilePath)
     let html = ''
 
-    info(`Building html module for ${relativeHtmlFilePath}...`)
-
     // If there's a dev server, use it to transform the HTML for development
-    if (devServer) {
+    if (!isStaticBuild && devServer) {
       html = (await readFile(htmlFilePath, 'utf-8')).toString()
       html = await devServer.transformIndexHtml(
         getRelativePath(sourceDirectory, htmlFilePath),
@@ -271,9 +386,21 @@ export default function makePlugin({
       serverOutputDirectory: resolvedServerOutputDirectory,
       clientOutputDirectory: resolvedClientOutputDirectory,
       devServer,
+      isStaticBuild,
     })
 
-    info(`Built html module for ${relativeHtmlFilePath}.`)
+    addManifestEntry(
+      {
+        type: 'html',
+        filePath: relativeHtmlFilePath,
+      },
+      relative(sourceDirectory, importer),
+      id,
+    )
+
+    addDependents(sourceFile)
+
+    info(`Built html module for ${relativeHtmlFilePath}.`, logger)
 
     const filePath = sourceFile.getFilePath()
 
@@ -291,10 +418,7 @@ export default function makePlugin({
     const moduleName = parseModulesFromId(id, importer)
     const moduleDirectory = resolve(importDirectory, moduleName)
     const relativeDirectory = relative(sourceDirectory, moduleDirectory)
-    const moduleType = id.startsWith(EXPRESS_VIRTUAL_ENTRYPOINT_PREFIX) ? 'express' : 'API'
-
-    info(`Building ${moduleType} module for ${relativeDirectory}...`)
-
+    const moduleType = id.startsWith(EXPRESS_VIRTUAL_ENTRYPOINT_PREFIX) ? 'express' : 'api'
     const directory = await readDirectory(moduleDirectory)
     const moduleTree = readApiModules(project, directory)
     const filePath = `${importDirectory}/${basename(
@@ -309,7 +433,18 @@ export default function makePlugin({
       id.startsWith(EXPRESS_VIRTUAL_ENTRYPOINT_PREFIX),
     )
 
-    info(`Built ${moduleType} module for ${relativeDirectory}.`)
+    addManifestEntry(
+      {
+        type: moduleType,
+        ...apiModuleTreeToJson(sourceDirectory, moduleTree),
+      },
+      relative(sourceDirectory, importer),
+      id,
+    )
+
+    addDependents(sourceFile)
+
+    info(`Built ${moduleType} module for ${relativeDirectory}.`, logger)
 
     filePathToModule.set(filePath, sourceFile)
 
@@ -320,17 +455,32 @@ export default function makePlugin({
     return filePath
   }
 
-  const virtualModulePlugin = {
+  const addDependents = (sourceFile: SourceFile) => {
+    const importer = sourceFile.getFilePath()
+    const imports = sourceFile
+      .getLiteralsReferencingOtherSourceFiles()
+      .map((i) => i.getLiteralValue())
+
+    for (const i of imports) {
+      const dependents = dependentsMap.get(i) ?? new Set()
+
+      dependents.add(importer)
+      dependentsMap.set(i, dependents)
+    }
+  }
+
+  const virtualModulePlugin: TypedVitePlugin = {
     name: PLUGIN_NAME,
+    resolvedOptions,
     config(config: UserConfig, env: ConfigEnv) {
+      isSsr = env.ssrBuild ?? false
+
       // Configure Build steps when running with vavite
       if (env.mode === 'multibuild') {
         const clientBuild: UserConfig['build'] = {
           outDir: resolvedClientOutputDirectory,
           rollupOptions: {
-            input: buildClientInput(
-              findHtmlFiles(sourceDirectory, htmlFileGlobs).map((p) => resolve(sourceDirectory, p)),
-            ),
+            input: buildClientInput(resolvedOptions.htmlFiles),
           },
         }
 
@@ -338,7 +488,9 @@ export default function makePlugin({
           ssr: true,
           outDir: resolvedServerOutputDirectory,
           rollupOptions: {
-            input: resolvedServerFilePath,
+            input: {
+              index: resolvedServerFilePath,
+            },
           },
         }
 
@@ -360,6 +512,35 @@ export default function makePlugin({
 
         return
       }
+
+      if (serverExists) {
+        config.plugins?.push(
+          vavite({
+            serverEntry: resolvedServerFilePath,
+            serveClientAssetsInDev: true,
+          }),
+        )
+      } else {
+        // TODO: Add vavite plugins without reloader
+      }
+    },
+
+    configResolved(resolvedConfig) {
+      logger = resolvedConfig.logger
+
+      const input = resolvedConfig.build.rollupOptions.input
+
+      if (!input) return
+
+      if (typeof input === 'string') {
+        manifest.entryFiles.push(parseEntryFile(sourceDirectory, input))
+      } else if (Array.isArray(input)) {
+        manifest.entryFiles.push(...input.map((i) => parseEntryFile(sourceDirectory, i)))
+      } else {
+        manifest.entryFiles.push(
+          ...Object.values(input).map((i) => parseEntryFile(sourceDirectory, i)),
+        )
+      }
     },
 
     configureServer(server) {
@@ -380,7 +561,7 @@ export default function makePlugin({
       handleFileChange(path, event)
     },
 
-    closeBundle() {
+    async closeBundle() {
       if (project) {
         const diagnostics = project.getPreEmitDiagnostics()
 
@@ -388,6 +569,16 @@ export default function makePlugin({
           this.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
         }
       }
+
+      if (Object.keys(manifest).length > 0) {
+        writeFileSync(
+          resolve(
+            isSsr ? resolvedServerOutputDirectory : resolvedClientOutputDirectory,
+            'typed-manifest.json',
+          ),
+          JSON.stringify(manifest, null, 2) + EOL,
+        )
+      }
     },
 
     async resolveId(id: string, importer?: string) {
@@ -401,13 +592,17 @@ export default function makePlugin({
       ) {
         setupProject()
 
-        return VIRTUAL_ID_PREFIX + (await buildRenderModule(importer, id))
+        const virtualId = VIRTUAL_ID_PREFIX + (await buildRuntimeModule(importer, id))
+
+        return virtualId
       }
 
       if (id.startsWith(HTML_VIRTUAL_ENTRYPOINT_PREFIX)) {
         setupProject()
 
-        return VIRTUAL_ID_PREFIX + (await buildHtmlModule(importer, id))
+        const virtualId = VIRTUAL_ID_PREFIX + (await buildHtmlModule(importer, id))
+
+        return virtualId
       }
 
       if (
@@ -416,7 +611,13 @@ export default function makePlugin({
       ) {
         setupProject()
 
-        return VIRTUAL_ID_PREFIX + (await buildApiModule(importer, id))
+        const virtualId = VIRTUAL_ID_PREFIX + (await buildApiModule(importer, id))
+
+        return virtualId
+      }
+
+      if (id === TYPED_CONFIG_IMPORT) {
+        return VIRTUAL_ID_PREFIX + TYPED_CONFIG_IMPORT
       }
 
       importer = importer.replace(VIRTUAL_ID_PREFIX, '')
@@ -434,24 +635,24 @@ export default function makePlugin({
       const sourceFile = filePathToModule.get(id) ?? project?.getSourceFile(id)
 
       if (sourceFile) {
-        logDiagnostics(project, sourceFile, sourceDirectory, id)
+        logDiagnostics(project, sourceFile, sourceDirectory, id, logger)
 
-        const text = sourceFile.getFullText()
-        const output = ts.transpileModule(text, {
-          fileName: id,
-          compilerOptions: transpilerCompilerOptions(),
-          transformers,
-        })
+        return {
+          code: sourceFile.getFullText(),
+        }
+      }
 
+      if (id === TYPED_CONFIG_IMPORT) {
         return {
-          code: output.outputText,
-          map: output.sourceMapText,
+          code: Object.entries(resolvedOptions)
+            .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)}`)
+            .join(EOL),
         }
       }
     },
 
     transform(text: string, id: string) {
-      if (/.tsx?$/.test(id) || /.m?jsx?$/.test(id)) {
+      if (/.[c|m]?tsx?$/.test(id)) {
         const output = ts.transpileModule(text, {
           fileName: id,
           compilerOptions: transpilerCompilerOptions(),
@@ -464,7 +665,7 @@ export default function makePlugin({
         }
       }
     },
-  } satisfies Plugin
+  }
 
   plugins.push(virtualModulePlugin)
 
@@ -476,21 +677,21 @@ function logDiagnostics(
   sourceFile: SourceFile,
   sourceDirectory: string,
   filePath: string,
+  logger: Logger | undefined,
 ) {
   const diagnostics = sourceFile.getPreEmitDiagnostics()
   const relativeFilePath = relative(sourceDirectory, filePath)
 
   if (diagnostics.length > 0) {
-    info(sourceFile.getFullText())
-    info(project.formatDiagnosticsWithColorAndContext(diagnostics))
-  } else {
-    info(`${relativeFilePath} module successfuly typed-checked.`)
+    info(`Type-checking errors found at ${relativeFilePath}`, logger)
+    info(`Source:` + EOL + sourceFile.getFullText(), logger)
+    info(project.formatDiagnosticsWithColorAndContext(diagnostics), logger)
   }
 }
 
 function findRelativeFile(importer: string, id: string) {
   const dir = dirname(importer)
-  const tsPath = resolve(dir, id.replace(/.js(x)?$/, '.ts$1'))
+  const tsPath = resolve(dir, id.replace(/.([c|m])?js(x)?$/, '.$1ts$2'))
 
   if (existsSync(tsPath)) {
     return tsPath
@@ -530,15 +731,10 @@ function findHtmlFiles(directory: string, htmlFileGlobs?: readonly string[]): re
 }
 
 function buildClientInput(htmlFilePaths: readonly string[]) {
-  const input: Record<string, string> = {}
-
-  for (const htmlFilePath of htmlFilePaths) {
-    const htmlFile = basename(htmlFilePath, '.html')
-
-    input[htmlFile] = htmlFilePath
-  }
-
-  return input
+  return htmlFilePaths.reduce(
+    (acc, htmlFilePath) => ({ ...acc, [basename(htmlFilePath, '.html')]: htmlFilePath }),
+    {},
+  )
 }
 
 function getRelativePath(from: string, to: string) {
@@ -551,8 +747,76 @@ function getRelativePath(from: string, to: string) {
   return path
 }
 
-function info(message: string) {
-  const date = new Date()
+function info(message: string, logger: Logger | undefined) {
+  if (logger) {
+    logger.info(`[${PLUGIN_NAME}]: ${message}`)
+  } else {
+    console.info(`[${PLUGIN_NAME}]:`, `${message}`)
+  }
+}
+
+function parseEntryFile(sourceDirectory: string, filePath: string): EntryFile {
+  if (filePath.endsWith('.html')) {
+    return parseHtmlEntryFile(sourceDirectory, filePath)
+  }
+
+  return parseTsEntryFile(sourceDirectory, filePath)
+}
+
+function parseHtmlEntryFile(sourceDirectory: string, filePath: string): EntryFile {
+  const content = readFileSync(filePath, 'utf-8').toString()
+
+  return {
+    type: 'html',
+    filePath: relative(sourceDirectory, filePath),
+    imports: parseHtmlImports(sourceDirectory, content),
+    basePath: parseBasePath(content),
+  }
+}
+
+function parseHtmlImports(sourceDirectory: string, content: string) {
+  const imports: string[] = []
+
+  const matches = content.match(/<script[^>]*src="([^"]*)"[^>]*>/g)
+
+  if (matches) {
+    for (const match of matches) {
+      // If script is not type=module then skip
+      if (!match.includes('type="module"')) {
+        continue
+      }
 
-  console.info(`[${PLUGIN_NAME}] ${date.toISOString()};`, `${message}`)
+      const src = match.match(/src="([^"]*)"/)?.[1]
+
+      if (src) {
+        const fullPath = join(sourceDirectory, src)
+        const relativePath = relative(sourceDirectory, fullPath)
+
+        imports.push(relativePath)
+      }
+    }
+  }
+
+  return imports
+}
+
+function parseBasePath(content: string) {
+  const baseTag = content.match(/<base[^>]*>/)?.[0]
+
+  if (baseTag) {
+    const href = baseTag.match(/href="([^"]*)"/)?.[1]
+
+    if (href) {
+      return href
+    }
+  }
+
+  return '/'
+}
+
+function parseTsEntryFile(sourceDirectory: string, filePath: string): EntryFile {
+  return {
+    type: 'ts',
+    filePath: relative(sourceDirectory, filePath),
+  }
 }