@remix-run/assets 0.0.0 → 0.2.0

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,
+    },
+  })
+}

package/src/lib/styles/emit.ts

@@ -0,0 +1,137 @@
+import MagicString from 'magic-string'
+
+import {
+  createAssetServerCompilationError,
+  isAssetServerCompilationError,
+} from '../compilation-error.ts'
+import { hashContent } from '../fingerprint.ts'
+import { composeSourceMaps } from '../source-maps.ts'
+import type { AssetServerCompilationError } from '../compilation-error.ts'
+import type { ResolvedStyle } from './resolve.ts'
+
+export type EmittedAsset = {
+  content: string
+  etag: string
+}
+
+export type EmittedStyle = {
+  code: EmittedAsset
+  fingerprint: string | null
+  importUrls: string[]
+  sourceMap: EmittedAsset | null
+}
+
+type EmitResult =
+  | {
+      ok: true
+      value: EmittedStyle
+    }
+  | {
+      error: AssetServerCompilationError
+      ok: false
+    }
+
+export async function emitResolvedStyle(
+  resolvedStyle: ResolvedStyle,
+  options: {
+    getServedUrl(identityPath: string): Promise<string>
+    sourceMaps?: 'external' | 'inline'
+  },
+): Promise<EmitResult> {
+  try {
+    let importUrls = await Promise.all(
+      resolvedStyle.deps.map((depPath) => options.getServedUrl(depPath)),
+    )
+    let rewriteResult = await rewriteDependencies(resolvedStyle, options)
+    let finalCode = rewriteResult.code
+
+    if (rewriteResult.sourceMap) {
+      if (options.sourceMaps === 'inline') {
+        let encoded = Buffer.from(rewriteResult.sourceMap).toString('base64')
+        finalCode += `\n/*# sourceMappingURL=data:application/json;base64,${encoded} */`
+      } else if (options.sourceMaps === 'external') {
+        finalCode += `\n/*# sourceMappingURL=${await options.getServedUrl(resolvedStyle.identityPath)}.map */`
+      }
+    }
+
+    return {
+      ok: true,
+      value: {
+        code: await createEmittedAsset(finalCode),
+        fingerprint: resolvedStyle.fingerprint,
+        importUrls,
+        sourceMap: rewriteResult.sourceMap
+          ? await createEmittedAsset(rewriteResult.sourceMap)
+          : null,
+      },
+    }
+  } catch (error) {
+    return {
+      error: toEmitError(error, resolvedStyle.identityPath),
+      ok: false,
+    }
+  }
+}
+
+async function rewriteDependencies(
+  resolvedStyle: ResolvedStyle,
+  options: {
+    getServedUrl(identityPath: string): Promise<string>
+  },
+): Promise<{ code: string; sourceMap: string | null }> {
+  if (resolvedStyle.dependencies.length === 0) {
+    return {
+      code: resolvedStyle.rawCode,
+      sourceMap: resolvedStyle.sourceMap,
+    }
+  }
+
+  let rewrittenSource = new MagicString(resolvedStyle.rawCode)
+
+  for (let dependency of resolvedStyle.dependencies) {
+    let replacement =
+      dependency.kind === 'external'
+        ? dependency.replacement
+        : `${await options.getServedUrl(dependency.depPath)}${dependency.suffix}`
+    let start = resolvedStyle.rawCode.indexOf(dependency.placeholder)
+    if (start < 0) {
+      throw createAssetServerCompilationError(
+        `Missing dependency placeholder "${dependency.placeholder}" while emitting style ${resolvedStyle.identityPath}.`,
+        {
+          code: 'EMIT_FAILED',
+        },
+      )
+    }
+
+    rewrittenSource.overwrite(start, start + dependency.placeholder.length, replacement)
+  }
+
+  return {
+    code: rewrittenSource.toString(),
+    sourceMap: resolvedStyle.sourceMap
+      ? composeSourceMaps(
+          rewrittenSource.generateMap({ hires: true }).toString(),
+          resolvedStyle.sourceMap,
+        )
+      : null,
+  }
+}
+
+async function createEmittedAsset(content: string): Promise<EmittedAsset> {
+  return {
+    content,
+    etag: `W/"${await hashContent(content)}"`,
+  }
+}
+
+function toEmitError(error: unknown, identityPath: string): AssetServerCompilationError {
+  if (isAssetServerCompilationError(error)) return error
+
+  return createAssetServerCompilationError(
+    `Failed to emit style ${identityPath}. ${error instanceof Error ? error.message : String(error)}`,
+    {
+      cause: error,
+      code: 'EMIT_FAILED',
+    },
+  )
+}