@remix-run/assets 0.2.0 → 0.4.0

package/src/lib/scripts/transform.ts

@@ -2,10 +2,13 @@ import * as fs from 'node:fs'
 import * as fsp from 'node:fs/promises'
 import * as path from 'node:path'
 import { getTsconfig } from 'get-tsconfig'
+import MagicString from 'magic-string'
 import { minify } from 'oxc-minify'
+import { parseSync, visitorKeys } from 'oxc-parser'
 import { transform as oxcTransform } from 'oxc-transform'
 import { init as esModuleLexerInit, parse as esModuleLexer } from 'es-module-lexer'
 import type { Cache, TsConfigJsonResolved } from 'get-tsconfig'
+import type { Node, Program } from 'oxc-parser'
 import type { TransformOptions as OxcTransformOptions } from 'oxc-transform'
 
 import { isCommonJS, mayContainCommonJSModuleGlobals } from './cjs-check.ts'
@@ -15,6 +18,11 @@ import {
 } from '../compilation-error.ts'
 import type { AssetServerCompilationError } from '../compilation-error.ts'
 import { generateFingerprint } from '../fingerprint.ts'
+import {
+  maskAuthoredInjectedPackageSpecifier,
+  mayContainInjectedPackageSpecifier,
+  restoreAuthoredInjectedPackageSpecifier,
+} from '../injected-packages.ts'
 import type { ModuleRecord, ModuleTracking } from '../module-store.ts'
 import { normalizeFilePath } from '../paths.ts'
 import type { CompiledRoutes } from '../routes.ts'
@@ -205,7 +213,7 @@ export async function transformModule(
     })
 
     analysis.unresolvedImports = analysis.unresolvedImports.filter(
-      (unresolved) => !args.externalSet.has(unresolved.specifier),
+      (unresolved) => !args.externalSet.has(getDisplayImportSpecifier(unresolved.specifier)),
     )
 
     if (mayContainCommonJSModuleGlobals(sourceText) && isCommonJS(analysis.rawCode)) {
@@ -253,7 +261,7 @@ export async function transformModule(
                 content: sourceText,
               }),
         identityPath: record.identityPath,
-        importerDir: path.dirname(resolvedPath),
+        importerDir: path.dirname(record.identityPath),
         packageSpecifiers: analysis.unresolvedImports
           .filter((unresolved) => isPackageImportSpecifier(unresolved.specifier))
           .map((unresolved) => unresolved.specifier),
@@ -306,11 +314,12 @@ async function analyzeModuleSource(
     target?: ResolvedScriptTarget
   },
 ) {
+  let maskedSourceText = maskAuthoredInjectedPackageImports(sourceText, resolvedPath)
   let transformResult: { code: string; errors?: Array<{ message?: string }>; map?: unknown }
   try {
     transformResult = await oxcTransform(
       resolvedPath,
-      sourceText,
+      maskedSourceText,
       getTransformOptions(resolvedPath, transformOptions, options),
     )
     assertNoCompilerErrors(transformResult.errors, resolvedPath, 'transform')
@@ -541,6 +550,99 @@ async function getUnresolvedImportsFromLexer(rawCode: string): Promise<Unresolve
   return unresolvedImports
 }
 
+function getDisplayImportSpecifier(specifier: string): string {
+  return restoreAuthoredInjectedPackageSpecifier(specifier) ?? specifier
+}
+
+function maskAuthoredInjectedPackageImports(sourceText: string, resolvedPath: string): string {
+  if (!mayContainInjectedPackageSpecifier(sourceText)) {
+    return sourceText
+  }
+
+  let parseResult = parseSync(resolvedPath, sourceText, {
+    lang: getSourceLanguageForPath(resolvedPath),
+    sourceType: 'module',
+  })
+  if (parseResult.errors.length > 0) {
+    return sourceText
+  }
+
+  let replacements: Array<{ end: number; specifier: string; start: number }> = []
+
+  walkAst(parseResult.program, (node) => {
+    if (
+      node.type !== 'ImportDeclaration' &&
+      node.type !== 'ExportAllDeclaration' &&
+      node.type !== 'ExportNamedDeclaration' &&
+      node.type !== 'ImportExpression'
+    ) {
+      return
+    }
+
+    let source = 'source' in node ? node.source : null
+    if (!isStringLiteralNode(source)) return
+
+    let maskedSpecifier = maskAuthoredInjectedPackageSpecifier(source.value)
+    if (maskedSpecifier == null) return
+
+    replacements.push({
+      end: source.end - 1,
+      specifier: maskedSpecifier,
+      start: source.start + 1,
+    })
+  })
+
+  if (replacements.length === 0) return sourceText
+
+  let rewrittenSource = new MagicString(sourceText)
+  for (let replacement of replacements) {
+    rewrittenSource.overwrite(replacement.start, replacement.end, replacement.specifier)
+  }
+
+  return rewrittenSource.toString()
+}
+
+function walkAst(node: Program | Node, visit: (node: Program | Node) => void): void {
+  visit(node)
+
+  let keys = visitorKeys[node.type]
+  if (!keys) return
+
+  let walkableNode = node as unknown as Record<string, unknown>
+  for (let key of keys) {
+    let value = walkableNode[key]
+    if (Array.isArray(value)) {
+      for (let child of value) {
+        if (isAstNode(child)) {
+          walkAst(child, visit)
+        }
+      }
+      continue
+    }
+
+    if (isAstNode(value)) {
+      walkAst(value, visit)
+    }
+  }
+}
+
+function isAstNode(value: unknown): value is Node {
+  return typeof value === 'object' && value !== null && 'type' in value
+}
+
+function isStringLiteralNode(node: Node | null | undefined): node is Node & {
+  end: number
+  start: number
+  value: string
+} {
+  return (
+    node?.type === 'Literal' &&
+    typeof node.start === 'number' &&
+    typeof node.end === 'number' &&
+    typeof node.value === 'string'
+  )
+}
+
 function getStaticImportSpecifier(
   source: string,
   imported: ReturnType<typeof esModuleLexer>[0][number],

package/src/lib/styles/compiler.ts

@@ -44,7 +44,14 @@ type StyleGetOptions = {
 type StyleCompilerOptions = {
   buildId?: string
   fingerprintAssets: boolean
+  getServedFileUrl?(
+    identityPath: string,
+    options: {
+      transform: readonly string[] | null
+    },
+  ): Promise<string>
   isAllowed(absolutePath: string): boolean
+  isServedFilePath(filePath: string): boolean
   minify: boolean
   onWatchDirectoriesChange?: (delta: { add: string[]; remove: string[] }) => void
   rootDir: string
@@ -79,6 +86,7 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
   let emitInFlightByCacheKey = new Map<string, Promise<EmittedStyle>>()
   let resolveArgs: ResolveArgs = {
     isAllowed: resolvedOptions.isAllowed,
+    isServedFilePath: resolvedOptions.isServedFilePath,
     isWatchIgnored,
     routes: resolvedOptions.routes,
   }
@@ -248,6 +256,7 @@ export function createStyleCompiler(options: StyleCompilerOptions): StyleCompile
       let startedVersion = record.invalidationVersion
       let resolvedStyle = await getOrCreateResolvedStyle(record)
       let emitResolvedStyleResult = await emitResolvedStyle(resolvedStyle, {
+        getServedFileUrl: resolvedOptions.getServedFileUrl,
         getServedUrl,
         sourceMaps: resolvedOptions.sourceMaps,
       })

package/src/lib/styles/emit.ts

@@ -34,6 +34,12 @@ type EmitResult =
 export async function emitResolvedStyle(
   resolvedStyle: ResolvedStyle,
   options: {
+    getServedFileUrl?(
+      identityPath: string,
+      options: {
+        transform: readonly string[] | null
+      },
+    ): Promise<string>
     getServedUrl(identityPath: string): Promise<string>
     sourceMaps?: 'external' | 'inline'
   },
@@ -77,6 +83,12 @@ async function rewriteDependencies(
   resolvedStyle: ResolvedStyle,
   options: {
     getServedUrl(identityPath: string): Promise<string>
+    getServedFileUrl?(
+      identityPath: string,
+      options: {
+        transform: readonly string[] | null
+      },
+    ): Promise<string>
   },
 ): Promise<{ code: string; sourceMap: string | null }> {
   if (resolvedStyle.dependencies.length === 0) {
@@ -92,7 +104,14 @@ async function rewriteDependencies(
     let replacement =
       dependency.kind === 'external'
         ? dependency.replacement
-        : `${await options.getServedUrl(dependency.depPath)}${dependency.suffix}`
+        : dependency.kind === 'style'
+          ? `${await options.getServedUrl(dependency.depPath)}${dependency.suffix}`
+          : appendUrlSuffix(
+              await getServedFileUrl(options, resolvedStyle.identityPath, dependency.depPath, {
+                transform: dependency.requestTransform,
+              }),
+              dependency.suffix,
+            )
     let start = resolvedStyle.rawCode.indexOf(dependency.placeholder)
     if (start < 0) {
       throw createAssetServerCompilationError(
@@ -117,6 +136,61 @@ async function rewriteDependencies(
   }
 }
 
+function appendUrlSuffix(url: string, suffix: string): string {
+  if (!suffix.startsWith('?') || !url.includes('?')) {
+    return `${url}${suffix}`
+  }
+
+  return `${url}&${suffix.slice(1)}`
+}
+
+async function getServedFileUrl(
+  options: {
+    getServedFileUrl?(
+      identityPath: string,
+      options: {
+        transform: readonly string[] | null
+      },
+    ): Promise<string>
+    getServedUrl(identityPath: string): Promise<string>
+  },
+  importerPath: string,
+  identityPath: string,
+  request: {
+    transform: readonly string[] | null
+  },
+): Promise<string> {
+  if (!options.getServedFileUrl) {
+    throw createAssetServerCompilationError(`Missing file URL resolver for ${identityPath}.`, {
+      code: 'EMIT_FAILED',
+    })
+  }
+
+  try {
+    return await options.getServedFileUrl(identityPath, request)
+  } catch (error) {
+    if (
+      request.transform !== null &&
+      isAssetServerCompilationError(error) &&
+      error.code === 'FILE_TRANSFORM_QUERY_INVALID'
+    ) {
+      console.warn(
+        `Invalid file transform request "${request.transform.join(',')}" in CSS asset ${importerPath} for ${identityPath}: ${error.message}`,
+      )
+      let href = await options.getServedFileUrl(identityPath, { transform: null })
+      let searchParams = new URLSearchParams()
+      for (let transform of request.transform) {
+        searchParams.append('transform', transform)
+      }
+
+      let search = searchParams.toString()
+      return search.length > 0 ? `${href}?${search}` : href
+    }
+
+    throw error
+  }
+}
+
 async function createEmittedAsset(content: string): Promise<EmittedAsset> {
   return {
     content,

package/src/lib/styles/resolve.ts

@@ -1,5 +1,6 @@
 import * as fs from 'node:fs'
 import * as path from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
 
 import {
   createAssetServerCompilationError,
@@ -22,10 +23,17 @@ type ResolvedDependency =
     }
   | {
       depPath: string
-      kind: 'local'
+      kind: 'style'
       placeholder: string
       suffix: string
     }
+  | {
+      depPath: string
+      kind: 'file'
+      placeholder: string
+      requestTransform: readonly string[] | null
+      suffix: string
+    }
 
 export type ResolvedStyle = {
   dependencies: ResolvedDependency[]
@@ -41,6 +49,7 @@ export type ResolvedStyle = {
 
 export type ResolveArgs = {
   isAllowed(absolutePath: string): boolean
+  isServedFilePath(filePath: string): boolean
   isWatchIgnored(filePath: string): boolean
   routes: CompiledRoutes
 }
@@ -58,6 +67,12 @@ type ResolveResult = {
     }
 )
 
+type ParsedRelativeUrl = {
+  hash: string
+  resolvedPath: string
+  search: string
+}
+
 export async function resolveStyle(
   record: StyleRecord,
   transformed: TransformedStyle,
@@ -71,7 +86,7 @@ export async function resolveStyle(
     let trackedFile =
       unresolved.type === 'import'
         ? getTrackedImportFilePath(unresolved.url, transformed.resolvedPath)
-        : null
+        : getTrackedUrlFilePath(unresolved.url, transformed.resolvedPath)
     if (trackedFile && !args.isWatchIgnored(trackedFile)) {
       trackedFiles.add(trackedFile)
     }
@@ -85,14 +100,22 @@ export async function resolveStyle(
               unresolved.placeholder,
               args,
             )
-          : resolveUrlDependency(unresolved.url, unresolved.placeholder)
+          : resolveUrlDependency(
+              unresolved.url,
+              transformed.resolvedPath,
+              unresolved.placeholder,
+              args,
+            )
 
       dependencies.push(resolved)
 
-      if (resolved.kind === 'local') {
+      if (resolved.kind === 'style' || resolved.kind === 'file') {
         if (!args.isWatchIgnored(resolved.depPath)) {
           trackedFiles.add(resolved.depPath)
         }
+      }
+
+      if (resolved.kind === 'style') {
         deps.add(resolved.depPath)
       }
     } catch (error) {
@@ -172,16 +195,8 @@ function resolveImportDependency(
     }
   }
 
-  let { pathname, suffix } = splitUrlSuffix(url)
-  if (pathname.length === 0 || pathname === '#') {
-    return {
-      kind: 'external',
-      placeholder,
-      replacement: url,
-    }
-  }
-
-  if (pathname.startsWith('/')) {
+  let parsedUrl = parseRelativeUrl(url, importerPath)
+  if (parsedUrl === null) {
     return {
       kind: 'external',
       placeholder,
@@ -189,7 +204,8 @@ function resolveImportDependency(
     }
   }
 
-  let resolvedFilePath = normalizeFilePath(path.resolve(path.dirname(importerPath), pathname))
+  let { hash, resolvedPath, search } = parsedUrl
+  let resolvedFilePath = resolvedPath
   let identityPath = resolveExistingFilePath(resolvedFilePath)
   if (!identityPath || !isStyleFilePath(identityPath)) {
     throw createAssetServerCompilationError(
@@ -222,17 +238,82 @@ function resolveImportDependency(
 
   return {
     depPath: identityPath,
-    kind: 'local',
+    kind: 'style',
     placeholder,
-    suffix,
+    suffix: `${search}${hash}`,
   }
 }
 
-function resolveUrlDependency(url: string, placeholder: string): ResolvedDependency {
+function resolveUrlDependency(
+  url: string,
+  importerPath: string,
+  placeholder: string,
+  args: ResolveArgs,
+): ResolvedDependency {
+  if (isExternalUrl(url)) {
+    return {
+      kind: 'external',
+      placeholder,
+      replacement: url,
+    }
+  }
+
+  let parsedUrl = parseRelativeUrl(url, importerPath)
+  if (parsedUrl === null) {
+    return {
+      kind: 'external',
+      placeholder,
+      replacement: url,
+    }
+  }
+
+  let { hash, resolvedPath, search } = parsedUrl
+  let resolvedFilePath = resolvedPath
+  let identityPath = resolveExistingFilePath(resolvedFilePath)
+  if (!identityPath) {
+    throw createAssetServerCompilationError(`Failed to resolve url("${url}") in ${importerPath}.`, {
+      code: 'URL_RESOLUTION_FAILED',
+    })
+  }
+
+  if (!args.isServedFilePath(identityPath)) {
+    throw createAssetServerCompilationError(
+      `URL "${url}" in ${importerPath}, resolved to "${identityPath}", is not a supported file asset. ` +
+        `Add the file extension to files.extensions to serve this asset.`,
+      {
+        code: 'URL_NOT_SUPPORTED',
+      },
+    )
+  }
+
+  if (!args.isAllowed(identityPath)) {
+    throw createAssetServerCompilationError(
+      `URL "${url}" in ${importerPath}, resolved to "${identityPath}", is not allowed by the asset server allow/deny configuration. ` +
+        `Add a matching allow rule for this file path or remove a conflicting deny rule for this file path.`,
+      {
+        code: 'URL_NOT_ALLOWED',
+      },
+    )
+  }
+
+  if (!args.routes.toUrlPathname(identityPath)) {
+    throw createAssetServerCompilationError(
+      `URL "${url}" in ${importerPath}, resolved to "${identityPath}", is outside all configured fileMap entries. ` +
+        `Add a matching fileMap entry for this file path.`,
+      {
+        code: 'URL_OUTSIDE_FILE_MAP',
+      },
+    )
+  }
+
+  let parsedRequest = parseResolvedFileRequest({ hash, search })
+
   return {
-    kind: 'external',
+    depPath: identityPath,
+    kind: 'file',
     placeholder,
-    replacement: url,
+    requestTransform: parsedRequest.transform,
+    suffix: parsedRequest.suffix,
   }
 }
 
@@ -245,34 +326,50 @@ function resolveExistingFilePath(filePath: string): string | null {
   }
 }
 
-function splitUrlSuffix(url: string): {
-  pathname: string
+function parseRelativeUrl(url: string, importerPath: string): ParsedRelativeUrl | null {
+  if (url.length === 0 || url.startsWith('?') || url.startsWith('/') || isExternalUrl(url)) {
+    return null
+  }
+
+  let parsed = new URL(url, pathToFileURL(importerPath))
+
+  return {
+    hash: parsed.hash,
+    resolvedPath: normalizeFilePath(fileURLToPath(parsed)),
+    search: parsed.search,
+  }
+}
+
+function parseResolvedFileRequest(url: Pick<ParsedRelativeUrl, 'hash' | 'search'>): {
   suffix: string
+  transform: readonly string[] | null
 } {
-  let queryIndex = url.indexOf('?')
-  let hashIndex = url.indexOf('#')
-  let endIndex = [queryIndex, hashIndex].filter((index) => index >= 0).sort((a, b) => a - b)[0]
+  let { hash, search } = url
 
-  if (endIndex == null) {
+  if (search.length === 0) {
     return {
-      pathname: url,
-      suffix: '',
+      suffix: hash,
+      transform: null,
     }
   }
 
+  let searchParams = new URLSearchParams(search.slice(1))
+  let transform = searchParams.getAll('transform')
+  searchParams.delete('transform')
+  let remainingSearch = searchParams.toString()
+
   return {
-    pathname: url.slice(0, endIndex),
-    suffix: url.slice(endIndex),
+    suffix: `${remainingSearch.length > 0 ? `?${remainingSearch}` : ''}${hash}`,
+    transform: transform.length > 0 ? transform : null,
   }
 }
 
 function getTrackedImportFilePath(specifier: string, importerPath: string): string | null {
-  let { pathname } = splitUrlSuffix(specifier)
-  if (pathname.startsWith('./') || pathname.startsWith('../')) {
-    return normalizeFilePath(path.resolve(path.dirname(importerPath), pathname))
-  }
+  return parseRelativeUrl(specifier, importerPath)?.resolvedPath ?? null
+}
 
-  return null
+function getTrackedUrlFilePath(url: string, importerPath: string): string | null {
+  return parseRelativeUrl(url, importerPath)?.resolvedPath ?? null
 }
 
 function isStyleFilePath(filePath: string): boolean {

package/src/lib/watch.ts

@@ -17,7 +17,10 @@ export type ChokidarWatcher = ReturnType<typeof chokidar.watch>
 export type AssetServerWatcher = {
   close(): Promise<void>
   getWatchedTargets(): readonly string[]
-  updateWatchedDirectories(delta: { add: readonly string[]; remove: readonly string[] }): void
+  updateWatchedDirectories(
+    delta: { add: readonly string[]; remove: readonly string[] },
+    options?: { includeAncestors?: boolean },
+  ): void
 }
 
 export function createAssetServerWatcher(options: AssetServerWatcherOptions): AssetServerWatcher {
@@ -27,7 +30,8 @@ export function createAssetServerWatcher(options: AssetServerWatcherOptions): As
     ...resolveChokidarWatchOptions(options),
   })
   options.onChokidarWatcherCreated?.(watcher)
-  let watchedDirectories = new Set<string>()
+  let watchedResolutionDirectories = new Set<string>()
+  let watchedFileDirectories = new Set<string>()
   let watchedTargets = new Set<string>()
 
   for (let event of ['add', 'change', 'unlink'] as const) {
@@ -46,8 +50,12 @@ export function createAssetServerWatcher(options: AssetServerWatcherOptions): As
     getWatchedTargets() {
       return [...watchedTargets]
     },
-    updateWatchedDirectories(delta) {
-      let nextWatchedDirectories = new Set(watchedDirectories)
+    updateWatchedDirectories(delta, updateOptions = {}) {
+      let includeAncestors = updateOptions.includeAncestors ?? true
+      let previousDirectories = includeAncestors
+        ? watchedResolutionDirectories
+        : watchedFileDirectories
+      let nextWatchedDirectories = new Set(previousDirectories)
 
       for (let directory of delta.add) {
         nextWatchedDirectories.add(directory)
@@ -56,7 +64,17 @@ export function createAssetServerWatcher(options: AssetServerWatcherOptions): As
         nextWatchedDirectories.delete(directory)
       }
 
-      let nextTargets = getWatchTargetsForDirectories(options.rootDir, [...nextWatchedDirectories])
+      if (includeAncestors) {
+        watchedResolutionDirectories = nextWatchedDirectories
+      } else {
+        watchedFileDirectories = nextWatchedDirectories
+      }
+
+      let nextTargets = getWatchTargets({
+        rootDir: options.rootDir,
+        fileDirectories: [...watchedFileDirectories],
+        resolutionDirectories: [...watchedResolutionDirectories],
+      })
       let targetsToAdd = [...nextTargets].filter((target) => !watchedTargets.has(target))
       let targetsToRemove = [...watchedTargets].filter((target) => !nextTargets.has(target))
 
@@ -67,7 +85,6 @@ export function createAssetServerWatcher(options: AssetServerWatcherOptions): As
         watcher.add(targetsToAdd)
       }
 
-      watchedDirectories = nextWatchedDirectories
       watchedTargets = nextTargets
     },
   }
@@ -88,15 +105,20 @@ function resolveChokidarWatchOptions(
   }
 }
 
-function getWatchTargetsForDirectories(
-  rootDir: string,
-  directories: readonly string[],
-): Set<string> {
-  let normalizedRootDir = normalizeFilePath(rootDir)
+function getWatchTargets(options: {
+  fileDirectories: readonly string[]
+  resolutionDirectories: readonly string[]
+  rootDir: string
+}): Set<string> {
+  let normalizedRootDir = normalizeFilePath(options.rootDir)
   let targets = new Set<string>()
   let configAncestors = new Set<string>()
 
-  for (let directory of directories) {
+  for (let directory of options.fileDirectories) {
+    targets.add(normalizeFilePath(directory).replace(/\/+$/, ''))
+  }
+
+  for (let directory of options.resolutionDirectories) {
     let normalizedDirectory = normalizeFilePath(directory).replace(/\/+$/, '')
 
     targets.add(normalizedDirectory)