@remix-run/assets 0.1.0 → 0.2.0

package/src/lib/scripts/transform.ts

@@ -15,11 +15,15 @@ import {
 } from '../compilation-error.ts'
 import type { AssetServerCompilationError } from '../compilation-error.ts'
 import { generateFingerprint } from '../fingerprint.ts'
+import type { ModuleRecord, ModuleTracking } from '../module-store.ts'
 import { normalizeFilePath } from '../paths.ts'
 import type { CompiledRoutes } from '../routes.ts'
-import type { ScriptsTarget } from '../asset-server.ts'
-import type { ModuleRecord } from './store.ts'
 import { composeSourceMaps, rewriteSourceMapSources, stringifySourceMap } from '../source-maps.ts'
+import type { EmittedModule } from './emit.ts'
+import type { ResolvedScriptTarget } from '../target.ts'
+import type { ResolvedModule } from './resolve.ts'
+
+type ScriptRecord = ModuleRecord<TransformedModule, ResolvedModule, EmittedModule>
 
 type SourceLanguage = 'js' | 'jsx' | 'ts' | 'tsx'
 
@@ -72,19 +76,18 @@ export type TransformedModule = {
   unresolvedImports: UnresolvedImport[]
 }
 
-export type TransformFailureState = {
-  trackedFiles: readonly string[]
-}
-
-type TransformResult =
+type TransformResult = {
+  tracking: ModuleTracking
+} & (
   | {
       ok: true
       value: TransformedModule
     }
-  | ({
+  | {
       ok: false
       error: AssetServerCompilationError
-    } & TransformFailureState)
+    }
+)
 
 type TsconfigTransformOptions = {
   trackedFiles: string[]
@@ -103,7 +106,7 @@ export type TransformArgs = {
   routes: CompiledRoutes
   sourceMapSourcePaths: 'absolute' | 'url'
   sourceMaps: 'external' | 'inline' | null
-  target: ScriptsTarget | null
+  target: ResolvedScriptTarget | null
   tsconfigTransformOptionsResolver: TsconfigTransformOptionsResolver
 }
 
@@ -144,17 +147,19 @@ export function createTsconfigTransformOptionsResolver() {
 }
 
 export async function transformModule(
-  record: ModuleRecord,
+  record: ScriptRecord,
   args: TransformArgs,
 ): Promise<TransformResult> {
   let resolvedPath = args.resolveActualPath(record.identityPath)
   if (!resolvedPath) {
     return {
       ok: false,
-      error: createAssetServerCompilationError(`Module not found: ${record.identityPath}`, {
-        code: 'MODULE_NOT_FOUND',
+      error: createAssetServerCompilationError(`File not found: ${record.identityPath}`, {
+        code: 'FILE_NOT_FOUND',
       }),
-      trackedFiles: args.isWatchIgnored(record.identityPath) ? [] : [record.identityPath],
+      tracking: {
+        trackedFiles: args.isWatchIgnored(record.identityPath) ? [] : [record.identityPath],
+      },
     }
   }
 
@@ -173,17 +178,21 @@ export async function transformModule(
     if (isNoEntityError(error)) {
       return {
         ok: false,
-        error: createAssetServerCompilationError(`Module not found: ${resolvedPath}`, {
+        error: createAssetServerCompilationError(`File not found: ${resolvedPath}`, {
           cause: error,
-          code: 'MODULE_NOT_FOUND',
+          code: 'FILE_NOT_FOUND',
         }),
-        trackedFiles,
+        tracking: {
+          trackedFiles,
+        },
       }
     }
     return {
       ok: false,
       error: toTransformFailedError(error, resolvedPath),
-      trackedFiles,
+      tracking: {
+        trackedFiles,
+      },
     }
   }
 
@@ -205,7 +214,7 @@ export async function transformModule(
           `This module uses CommonJS (require/module.exports) which is not supported. ` +
           `Please use an ESM-compatible module.`,
         {
-          code: 'MODULE_COMMONJS_NOT_SUPPORTED',
+          code: 'COMMONJS_NOT_SUPPORTED',
         },
       )
     }
@@ -213,9 +222,9 @@ export async function transformModule(
     let stableUrlPathname = args.routes.toUrlPathname(record.identityPath)
     if (!stableUrlPathname) {
       throw createAssetServerCompilationError(
-        `Module ${record.identityPath} is outside all configured fileMap entries.`,
+        `File ${record.identityPath} is outside all configured fileMap entries.`,
         {
-          code: 'MODULE_OUTSIDE_FILE_MAP',
+          code: 'FILE_OUTSIDE_FILE_MAP',
         },
       )
     }
@@ -226,11 +235,15 @@ export async function transformModule(
           resolvedPath,
           stableUrlPathname,
           args.sourceMapSourcePaths,
+          sourceText,
         )
       : null
 
     return {
       ok: true,
+      tracking: {
+        trackedFiles,
+      },
       value: {
         fingerprint:
           args.buildId === null
@@ -256,7 +269,9 @@ export async function transformModule(
     return {
       ok: false,
       error: toTransformFailedError(error, resolvedPath),
-      trackedFiles,
+      tracking: {
+        trackedFiles,
+      },
     }
   }
 }
@@ -288,7 +303,7 @@ async function analyzeModuleSource(
     define?: Record<string, string>
     minify: boolean
     sourceMaps?: 'external' | 'inline'
-    target?: ScriptsTarget
+    target?: ResolvedScriptTarget
   },
 ) {
   let transformResult: { code: string; errors?: Array<{ message?: string }>; map?: unknown }
@@ -302,10 +317,10 @@ async function analyzeModuleSource(
   } catch (error) {
     if (isAssetServerCompilationError(error)) throw error
     throw createAssetServerCompilationError(
-      `Failed to transform module ${resolvedPath}. ${formatUnknownError(error)}`,
+      `Failed to transform script ${resolvedPath}. ${formatUnknownError(error)}`,
       {
         cause: error,
-        code: 'MODULE_TRANSFORM_FAILED',
+        code: 'TRANSFORM_FAILED',
       },
     )
   }
@@ -335,7 +350,7 @@ async function analyzeModuleSource(
 async function minifyModule(
   rawCode: string,
   resolvedPath: string,
-  target: string | undefined,
+  target: ResolvedScriptTarget | undefined,
   sourceMaps?: 'external' | 'inline',
 ) {
   try {
@@ -350,10 +365,10 @@ async function minifyModule(
   } catch (error) {
     if (isAssetServerCompilationError(error)) throw error
     throw createAssetServerCompilationError(
-      `Failed to minify module ${resolvedPath}. ${formatUnknownError(error)}`,
+      `Failed to minify script ${resolvedPath}. ${formatUnknownError(error)}`,
       {
         cause: error,
-        code: 'MODULE_TRANSFORM_FAILED',
+        code: 'TRANSFORM_FAILED',
       },
     )
   }
@@ -365,7 +380,7 @@ function getTransformOptions(
   options: {
     define?: Record<string, string>
     sourceMaps?: 'external' | 'inline'
-    target?: string
+    target?: ResolvedScriptTarget
   },
 ): OxcTransformOptions {
   let compilerOptions = transformOptions.tsconfigRaw?.compilerOptions as
@@ -436,7 +451,7 @@ function getJsxOptions(
       `Unsupported tsconfig compilerOptions.jsx = "${jsx}" for ${resolvedPath}. ` +
         `Asset server must compile JSX to browser-runnable JavaScript.`,
       {
-        code: 'MODULE_TRANSFORM_FAILED',
+        code: 'TRANSFORM_FAILED',
       },
     )
   }
@@ -500,9 +515,9 @@ function assertNoCompilerErrors(
   if (!errors || errors.length === 0) return
 
   throw createAssetServerCompilationError(
-    `Failed to ${operation} module ${resolvedPath}. ${errors[0].message ?? 'Unknown error'}`,
+    `Failed to ${operation} script ${resolvedPath}. ${errors[0].message ?? 'Unknown error'}`,
     {
-      code: 'MODULE_TRANSFORM_FAILED',
+      code: 'TRANSFORM_FAILED',
     },
   )
 }
@@ -579,10 +594,10 @@ function toTransformFailedError(error: unknown, resolvedPath: string): AssetServ
   if (isAssetServerCompilationError(error)) return error
 
   return createAssetServerCompilationError(
-    `Failed to transform module ${resolvedPath}. ${formatUnknownError(error)}`,
+    `Failed to transform script ${resolvedPath}. ${formatUnknownError(error)}`,
     {
       cause: error,
-      code: 'MODULE_TRANSFORM_FAILED',
+      code: 'TRANSFORM_FAILED',
     },
   )
 }

package/src/lib/source-maps.ts

@@ -52,17 +52,24 @@ export function rewriteSourceMapSources(
   resolvedPath: string,
   stableUrlPathname: string,
   sourceMapSourcePaths: 'absolute' | 'url',
+  sourceContent?: string,
 ): string {
-  let json = JSON.parse(sourceMap) as { sources?: string[] }
+  let json = JSON.parse(sourceMap) as { sources?: string[]; sourcesContent?: string[] }
   json.sources = [
     sourceMapSourcePaths === 'absolute' ? normalizeFilePath(resolvedPath) : stableUrlPathname,
   ]
+  if (sourceContent !== undefined) {
+    json.sourcesContent = [sourceContent]
+  }
   return JSON.stringify(json)
 }
 
 export function stringifySourceMap(map: unknown): string | null {
   if (!map) return null
   if (typeof map === 'string') return map
+  if (map instanceof Uint8Array) {
+    return Buffer.from(map).toString('utf8')
+  }
   if (typeof map === 'object' && map !== null) return JSON.stringify(map)
   return String(map)
 }

package/src/lib/styles/compiler.ts

@@ -0,0 +1,400 @@
+import * as os from 'node:os'
+import * as path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { IfNoneMatch } from '@remix-run/headers'
+import { createFileMatcher } from '../file-matcher.ts'
+import { formatFingerprintedPathname } from '../fingerprint.ts'
+import { createModuleStore } from '../module-store.ts'
+import type { ModuleRecord, ModuleStore } from '../module-store.ts'
+import { normalizeFilePath, resolveFilePath } from '../paths.ts'
+import type { CompiledRoutes } from '../routes.ts'
+import type { ResolvedStyleTarget } from '../target.ts'
+import { emitResolvedStyle } from './emit.ts'
+import type { EmittedAsset, EmittedStyle } from './emit.ts'
+import { resolveServedStyleOrThrow, resolveStyle } from './resolve.ts'
+import type { ResolveArgs, ResolvedStyle } from './resolve.ts'
+import { transformStyle } from './transform.ts'
+import type { TransformArgs, TransformedStyle } from './transform.ts'
+
+type StyleRecord = ModuleRecord<TransformedStyle, ResolvedStyle, EmittedStyle>
+type StyleStore = ModuleStore<TransformedStyle, ResolvedStyle, EmittedStyle>
+
+type StyleCompileResult = {
+  code: EmittedAsset
+  fingerprint: string | null
+  sourceMap: EmittedAsset | null
+}
+
+type StyleGetResult =
+  | {
+      style: StyleCompileResult
+      type: 'style'
+    }
+  | {
+      etag: string
+      type: 'not-modified'
+    }
+
+type StyleGetOptions = {
+  ifNoneMatch: string | null
+  isSourceMapRequest: boolean
+  requestedFingerprint: string | null
+}
+
+type StyleCompilerOptions = {
+  buildId?: string
+  fingerprintAssets: boolean
+  isAllowed(absolutePath: string): boolean
+  minify: boolean
+  onWatchDirectoriesChange?: (delta: { add: string[]; remove: string[] }) => void
+  rootDir: string
+  routes: CompiledRoutes
+  sourceMapSourcePaths: 'absolute' | 'url'
+  sourceMaps?: 'external' | 'inline'
+  targets?: ResolvedStyleTarget
+  watchIgnore?: readonly string[]
+}
+
+type StyleCompiler = {
+  getHref(filePath: string): Promise<string>
+  getPreloadLayers(filePath: string | readonly string[]): Promise<string[][]>
+  getStyle(filePath: string, options: StyleGetOptions): Promise<StyleGetResult>
+  handleFileEvent(filePath: string, event: 'add' | 'change' | 'unlink'): Promise<void>
+}
+
+const preloadConcurrency = Math.max(1, Math.min(8, os.availableParallelism() - 1))
+const styleExtension = '.css'
+
+export function createStyleCompiler(options: StyleCompilerOptions): StyleCompiler {
+  let resolvedOptions = {
+    ...options,
+    watchIgnoreMatchers: (options.watchIgnore ?? []).map((pattern) =>
+      createFileMatcher(pattern, options.rootDir),
+    ),
+  }
+  let styleStore: StyleStore = createModuleStore<TransformedStyle, ResolvedStyle, EmittedStyle>({
+    onWatchDirectoriesChange: options.onWatchDirectoriesChange,
+  })
+  let resolveInFlightByCacheKey = new Map<string, Promise<ResolvedStyle>>()
+  let emitInFlightByCacheKey = new Map<string, Promise<EmittedStyle>>()
+  let resolveArgs: ResolveArgs = {
+    isAllowed: resolvedOptions.isAllowed,
+    isWatchIgnored,
+    routes: resolvedOptions.routes,
+  }
+  let transformArgs: TransformArgs = {
+    buildId: resolvedOptions.buildId ?? null,
+    isWatchIgnored,
+    minify: resolvedOptions.minify,
+    routes: resolvedOptions.routes,
+    sourceMapSourcePaths: resolvedOptions.sourceMapSourcePaths,
+    sourceMaps: resolvedOptions.sourceMaps ?? null,
+    targets: resolvedOptions.targets ?? null,
+  }
+
+  return {
+    async getHref(filePath) {
+      let resolvedStyle = resolveServedStyleOrThrow(resolveInputFilePath(filePath), resolveArgs)
+      return getServedUrl(resolvedStyle.identityPath)
+    },
+
+    async getPreloadLayers(filePath) {
+      let resolvedEntries: string[] = []
+      let seen = new Set<string>()
+
+      for (let resolvedStyle of (Array.isArray(filePath) ? filePath : [filePath]).map((nextPath) =>
+        resolveServedStyleOrThrow(resolveInputFilePath(nextPath), resolveArgs),
+      )) {
+        if (seen.has(resolvedStyle.identityPath)) continue
+        seen.add(resolvedStyle.identityPath)
+        resolvedEntries.push(resolvedStyle.identityPath)
+      }
+
+      let visited = new Set(resolvedEntries)
+      let queue = [...resolvedEntries]
+      let layers: string[][] = []
+
+      while (queue.length > 0) {
+        let frontier = queue
+        queue = []
+        let resolvedStyles = await getOrCreateResolvedStyles(
+          frontier.map((identityPath) => styleStore.get(identityPath)),
+        )
+        let layer: string[] = []
+
+        for (let resolvedStyle of resolvedStyles) {
+          layer.push(getServedUrlForResolvedStyle(resolvedStyle))
+
+          for (let dep of resolvedStyle.deps) {
+            if (visited.has(dep)) continue
+            visited.add(dep)
+            queue.push(dep)
+          }
+        }
+
+        layers.push(layer)
+      }
+
+      return layers
+    },
+
+    async getStyle(filePath, getOptions) {
+      let resolvedStyle = resolveServedStyleOrThrow(resolveInputFilePath(filePath), resolveArgs)
+      let record = styleStore.get(resolvedStyle.identityPath)
+      let notModified = getNotModifiedStyle(record.emitted, getOptions)
+      if (notModified) return notModified
+
+      let emitted = await getOrCreateEmittedStyle(record)
+      return {
+        style: toStyleCompileResult(emitted),
+        type: 'style',
+      }
+    },
+
+    async handleFileEvent(filePath, event) {
+      let normalizedFilePath = normalizeFilePath(filePath)
+      if (isWatchIgnored(normalizedFilePath)) return
+      styleStore.invalidateForFileEvent(normalizedFilePath, event)
+    },
+  }
+
+  function resolveInputFilePath(filePath: string): string {
+    if (filePath.startsWith('file://')) {
+      return normalizeFilePath(fileURLToPath(new URL(filePath)))
+    }
+
+    if (filePath.includes('://')) {
+      throw new TypeError(`Expected a file path or file:// URL, received "${filePath}"`)
+    }
+
+    return resolveFilePath(resolvedOptions.rootDir, filePath)
+  }
+
+  async function getOrCreateResolvedStyles(records: StyleRecord[]): Promise<ResolvedStyle[]> {
+    return mapWithConcurrency(records, preloadConcurrency, (record) =>
+      getOrCreateResolvedStyle(record),
+    )
+  }
+
+  async function getOrCreateResolvedStyle(record: StyleRecord): Promise<ResolvedStyle> {
+    if (record.resolved) return record.resolved
+
+    let cacheKey = getRecordCacheKey(record)
+    let existing = resolveInFlightByCacheKey.get(cacheKey)
+    if (existing) return existing
+
+    let promise = (async () => {
+      let startedVersion = record.invalidationVersion
+      let transformedStyle = await getOrCreateTransformedStyle(record)
+      let resolvedStyleResult = await resolveStyle(record, transformedStyle, resolveArgs)
+
+      if (!resolvedStyleResult.ok) {
+        if (isFresh(record, startedVersion)) {
+          styleStore.clearResolved(record.identityPath, [resolvedStyleResult.tracking])
+        }
+        throw resolvedStyleResult.error
+      }
+
+      if (isFresh(record, startedVersion)) {
+        styleStore.setResolved(record.identityPath, resolvedStyleResult.value, [
+          resolvedStyleResult.tracking,
+        ])
+      }
+
+      return resolvedStyleResult.value
+    })()
+
+    resolveInFlightByCacheKey.set(cacheKey, promise)
+
+    try {
+      return await promise
+    } finally {
+      if (resolveInFlightByCacheKey.get(cacheKey) === promise) {
+        resolveInFlightByCacheKey.delete(cacheKey)
+      }
+    }
+  }
+
+  async function getOrCreateTransformedStyle(record: StyleRecord): Promise<TransformedStyle> {
+    if (record.transformed) return record.transformed
+
+    let startedVersion = record.invalidationVersion
+    let transformStyleResult = await transformStyle(record, transformArgs)
+
+    if (!transformStyleResult.ok) {
+      if (isFresh(record, startedVersion)) {
+        styleStore.clearTransformed(record.identityPath, [transformStyleResult.tracking])
+      }
+      throw transformStyleResult.error
+    }
+
+    if (isFresh(record, startedVersion)) {
+      styleStore.setTransformed(record.identityPath, transformStyleResult.value, [
+        transformStyleResult.tracking,
+      ])
+    }
+
+    return transformStyleResult.value
+  }
+
+  async function getOrCreateEmittedStyle(record: StyleRecord): Promise<EmittedStyle> {
+    if (record.emitted) return record.emitted
+
+    let cacheKey = getRecordCacheKey(record)
+    let existing = emitInFlightByCacheKey.get(cacheKey)
+    if (existing) return existing
+
+    let promise = (async () => {
+      let startedVersion = record.invalidationVersion
+      let resolvedStyle = await getOrCreateResolvedStyle(record)
+      let emitResolvedStyleResult = await emitResolvedStyle(resolvedStyle, {
+        getServedUrl,
+        sourceMaps: resolvedOptions.sourceMaps,
+      })
+
+      if (!emitResolvedStyleResult.ok) {
+        throw emitResolvedStyleResult.error
+      }
+
+      if (isFresh(record, startedVersion)) {
+        styleStore.setEmitted(record.identityPath, emitResolvedStyleResult.value, null)
+      }
+
+      return emitResolvedStyleResult.value
+    })()
+
+    emitInFlightByCacheKey.set(cacheKey, promise)
+
+    try {
+      return await promise
+    } finally {
+      if (emitInFlightByCacheKey.get(cacheKey) === promise) {
+        emitInFlightByCacheKey.delete(cacheKey)
+      }
+    }
+  }
+
+  async function getServedUrl(identityPath: string): Promise<string> {
+    return getServedUrlForResolvedStyle(
+      await getOrCreateResolvedStyle(styleStore.get(identityPath)),
+    )
+  }
+
+  function getServedUrlForResolvedStyle(resolvedStyle: ResolvedStyle): string {
+    return formatFingerprintedPathname(
+      resolvedStyle.stableUrlPathname,
+      resolvedOptions.fingerprintAssets ? resolvedStyle.fingerprint : null,
+    )
+  }
+
+  function isWatchIgnored(filePath: string): boolean {
+    return resolvedOptions.watchIgnoreMatchers.some((matcher) => matcher(filePath))
+  }
+}
+
+function getRecordCacheKey(record: StyleRecord): string {
+  return `${record.identityPath}\0${record.invalidationVersion}`
+}
+
+function isFresh(record: StyleRecord, version: number): boolean {
+  return record.invalidationVersion === version
+}
+
+function getNotModifiedStyle(
+  emittedStyle: EmittedStyle | undefined,
+  options: StyleGetOptions,
+): StyleGetResult | null {
+  if (!emittedStyle || options.ifNoneMatch === null) return null
+
+  if (
+    options.requestedFingerprint !== null &&
+    emittedStyle.fingerprint !== options.requestedFingerprint
+  ) {
+    return null
+  }
+
+  let asset = getEmittedAssetForRequest(emittedStyle, options.isSourceMapRequest)
+  if (!asset) return null
+
+  if (!IfNoneMatch.from(options.ifNoneMatch).matches(asset.etag)) return null
+  return { etag: asset.etag, type: 'not-modified' }
+}
+
+function getEmittedAssetForRequest(
+  emittedStyle: EmittedStyle,
+  isSourceMapRequest: boolean,
+): EmittedAsset | null {
+  return isSourceMapRequest ? emittedStyle.sourceMap : emittedStyle.code
+}
+
+async function mapWithConcurrency<item, result>(
+  items: item[],
+  concurrency: number,
+  mapper: (item: item, index: number) => Promise<result>,
+): Promise<result[]> {
+  if (items.length === 0) return []
+
+  let results = new Array<result>(items.length)
+  let nextIndex = 0
+
+  async function worker() {
+    while (nextIndex < items.length) {
+      let index = nextIndex++
+      results[index] = await mapper(items[index], index)
+    }
+  }
+
+  await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, () => worker()))
+  return results
+}
+
+function toStyleCompileResult(emittedStyle: EmittedStyle): StyleCompileResult {
+  return {
+    code: emittedStyle.code,
+    fingerprint: emittedStyle.fingerprint,
+    sourceMap: emittedStyle.sourceMap,
+  }
+}
+
+export function isStyleFilePath(filePath: string): boolean {
+  return path.extname(filePath).toLowerCase() === styleExtension
+}
+
+export function createResponseForStyle(
+  result: StyleCompileResult,
+  options: {
+    cacheControl: string
+    ifNoneMatch: string | null
+    isSourceMapRequest: boolean
+    method: string
+  },
+): Response {
+  let body: string | null
+  let etag: string
+  let contentType: string
+
+  if (options.isSourceMapRequest) {
+    if (!result.sourceMap) {
+      return new Response('Not found', { status: 404 })
+    }
+    body = options.method === 'HEAD' ? null : result.sourceMap.content
+    etag = result.sourceMap.etag
+    contentType = 'application/json; charset=utf-8'
+  } else {
+    body = options.method === 'HEAD' ? null : result.code.content
+    etag = result.code.etag
+    contentType = 'text/css; charset=utf-8'
+  }
+
+  if (IfNoneMatch.from(options.ifNoneMatch).matches(etag)) {
+    return new Response(null, { status: 304, headers: { ETag: etag } })
+  }
+
+  return new Response(body, {
+    headers: {
+      'Cache-Control': options.cacheControl,
+      'Content-Type': contentType,
+      ETag: etag,
+    },
+  })
+}