@remix-run/assets 0.6.0 → 0.7.0

package/src/lib/files/compiler.ts

@@ -10,7 +10,7 @@ import {
   isAssetServerCompilationError,
 } from '../compilation-error.ts'
 import type { AssetServerCompilationError } from '../compilation-error.ts'
-import { formatFingerprintedPathname, generateFingerprint, hashContent } from '../fingerprint.ts'
+import { formatFingerprintedPathname, hashContent } from '../fingerprint.ts'
 import { normalizeFilePath, resolveFilePath } from '../paths.ts'
 import type { CompiledRoutes } from '../routes.ts'
 import type { AssetFileTransformResult, ResolvedAssetRequestTransformMap } from './config.ts'
@@ -56,8 +56,8 @@ type FileGetHrefOptions = {
 }
 
 type FileCompilerOptions = {
-  buildId?: string
   cache?: FileStorage
+  cacheKey?: string
   extensions: readonly string[]
   fingerprintAssets: boolean
   globalTransforms: readonly {
@@ -128,7 +128,7 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
   let transformedAssetMetadataByCacheKey = new Map<string, EmittedFileMetadata>()
   let transformedCacheKeysByIdentityPath = new Map<string, Set<string>>()
   let transformedEmitInFlightByCacheKey = new Map<string, Promise<EmittedFile>>()
-  let cacheEpoch = resolvedOptions.buildId ?? crypto.randomUUID()
+  let cacheKey = resolvedOptions.cacheKey ?? crypto.randomUUID()
   let resolveArgs: ResolveArgs = {
     extensions: resolvedOptions.extensionSet,
     isAllowed: resolvedOptions.isAllowed,
@@ -140,9 +140,13 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
       let resolvedFile = resolveServedFileOrThrow(resolveInputFilePath(filePath), resolveArgs)
       let record = getFreshSourceFileRecord(resolvedFile.identityPath)
       if (shouldUseTransformPipeline(getOptions.transform)) {
-        let cacheKey = getTransformedRecordCacheKey(cacheEpoch, record, getOptions.transform)
+        let transformedCacheKey = getTransformedRecordCacheKey(
+          cacheKey,
+          record,
+          getOptions.transform,
+        )
         let notModified = getNotModifiedFile(
-          transformedAssetMetadataByCacheKey.get(cacheKey),
+          transformedAssetMetadataByCacheKey.get(transformedCacheKey),
           getOptions,
         )
         if (notModified) return notModified
@@ -179,12 +183,13 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
     async getHref(filePath, hrefOptions) {
       let resolvedFile = resolveServedFileOrThrow(resolveInputFilePath(filePath), resolveArgs)
       let record = getFreshSourceFileRecord(resolvedFile.identityPath)
-      let href = resolvedOptions.fingerprintAssets
-        ? formatFingerprintedPathname(
-            resolvedFile.stableUrlPathname,
-            (await getOrCreateSourceFileMetadata(record)).fingerprint,
-          )
-        : resolvedFile.stableUrlPathname
+      let href = resolvedFile.stableUrlPathname
+      if (resolvedOptions.fingerprintAssets) {
+        let emittedFile = shouldUseTransformPipeline(hrefOptions.transform)
+          ? await getOrCreateTransformedFile(record, hrefOptions.transform)
+          : await getOrCreateSourceFile(record)
+        href = formatFingerprintedPathname(href, emittedFile.fingerprint)
+      }
 
       if (shouldUseTransformPipeline(hrefOptions.transform)) {
         return appendTransformQuery(href, hrefOptions.transform)
@@ -291,19 +296,15 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
       resolvedOptions.transforms,
       resolvedOptions.maxRequestTransforms,
     )
-    let cacheKey = getTransformedRecordCacheKey(cacheEpoch, record, transformQuery)
-    let existing = transformedEmitInFlightByCacheKey.get(cacheKey)
+    let transformedCacheKey = getTransformedRecordCacheKey(cacheKey, record, transformQuery)
+    let existing = transformedEmitInFlightByCacheKey.get(transformedCacheKey)
     if (existing) return existing
 
     let promise = (async () => {
-      let sourceFile = await getOrCreateSourceFile(record)
-      let cachedFile = await getCachedTransformedFile(
-        cacheKey,
-        record.identityPath,
-        sourceFile.fingerprint,
-      )
+      let cachedFile = await getCachedTransformedFile(transformedCacheKey, record.identityPath)
       if (cachedFile) return cachedFile
 
+      let sourceFile = await getOrCreateSourceFile(record)
       let transformedFile = await applyTransforms(record.identityPath, sourceFile, parsedTransforms)
       if (transformedFile === null) {
         return sourceFile
@@ -312,24 +313,23 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
       let emittedFile = await createEmittedFile(transformedFile.body, {
         extension: transformedFile.extension,
         filePath: record.identityPath,
-        fingerprint: sourceFile.fingerprint,
       })
       rememberTransformedAssetMetadata(
-        cacheKey,
+        transformedCacheKey,
         record.identityPath,
         toEmittedFileMetadata(emittedFile),
       )
-      await setCachedTransformedFile(cacheKey, record.identityPath, emittedFile)
+      await setCachedTransformedFile(transformedCacheKey, record.identityPath, emittedFile)
       return emittedFile
     })()
 
-    transformedEmitInFlightByCacheKey.set(cacheKey, promise)
+    transformedEmitInFlightByCacheKey.set(transformedCacheKey, promise)
 
     try {
       return await promise
     } finally {
-      if (transformedEmitInFlightByCacheKey.get(cacheKey) === promise) {
-        transformedEmitInFlightByCacheKey.delete(cacheKey)
+      if (transformedEmitInFlightByCacheKey.get(transformedCacheKey) === promise) {
+        transformedEmitInFlightByCacheKey.delete(transformedCacheKey)
       }
     }
   }
@@ -338,13 +338,6 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
     return createEmittedFile(body, {
       extension: path.extname(identityPath).toLowerCase(),
       filePath: identityPath,
-      fingerprint:
-        resolvedOptions.fingerprintAssets && resolvedOptions.buildId
-          ? await generateFingerprint({
-              buildId: resolvedOptions.buildId,
-              content: body,
-            })
-          : null,
     })
   }
 
@@ -439,7 +432,6 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
   async function getCachedTransformedFile(
     cacheKey: string,
     identityPath: string,
-    fingerprint: string | null,
   ): Promise<EmittedFile | null> {
     if (!resolvedOptions.cache) return null
 
@@ -452,7 +444,6 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
       (await createEmittedFileMetadata(body, {
         extension: path.extname(file.name).toLowerCase(),
         filePath: identityPath,
-        fingerprint,
       }))
 
     rememberTransformedAssetMetadata(cacheKey, identityPath, metadata)
@@ -484,7 +475,6 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
     options: {
       extension: string
       filePath: string
-      fingerprint: string | null
     },
   ): Promise<EmittedFile> {
     let metadata = await createEmittedFileMetadata(body, options)
@@ -522,9 +512,9 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
     options: {
       extension: string
       filePath: string
-      fingerprint: string | null
     },
   ): Promise<EmittedFileMetadata> {
+    let contentHash = await hashContent(body)
     let contentType =
       detectContentType(`file${options.extension}`) ??
       detectContentType(options.filePath) ??
@@ -532,9 +522,9 @@ export function createFileCompiler(options: FileCompilerOptions): FileCompiler {
 
     return {
       contentType,
-      etag: `W/"${await hashContent(body)}"`,
+      etag: `W/"${contentHash}"`,
       extension: options.extension,
-      fingerprint: options.fingerprint,
+      fingerprint: resolvedOptions.fingerprintAssets ? contentHash : null,
     }
   }
 }
@@ -609,12 +599,12 @@ function getRecordCacheKey(record: SourceFileRecord): string {
 }
 
 function getTransformedRecordCacheKey(
-  cacheEpoch: string,
+  cacheKey: string,
   record: SourceFileRecord,
   transformQuery: readonly string[] | null,
 ): string {
   return [
-    encodeCacheKeyPart(cacheEpoch),
+    encodeCacheKeyPart(cacheKey),
     encodeCacheKeyPart(record.identityPath),
     String(record.invalidationVersion),
     encodeCacheKeyPart(JSON.stringify(transformQuery ?? [])),

package/src/lib/files/config.ts

@@ -115,10 +115,16 @@ export interface AssetServerFilesOptions<transforms extends AssetRequestTransfor
    * Optional backing store for cached transformed file outputs.
    */
   cache?: FileStorage
+  /**
+   * Optional namespace for cached transformed file outputs. Use a stable value such as a
+   * commit SHA to reuse transformed files across server restarts for the same deployment.
+   */
+  cacheKey?: string
 }
 
 export interface ResolvedAssetServerFilesOptions {
   cache?: FileStorage
+  cacheKey?: string
   extensions: readonly string[]
   globalTransforms: readonly ResolvedAssetGlobalTransform[]
   hasTransforms: boolean
@@ -303,8 +309,19 @@ export function normalizeFilesOptions<transforms extends AssetRequestTransformMa
     }
   }
 
+  if (files.cacheKey !== undefined) {
+    if (typeof files.cacheKey !== 'string') {
+      throw new TypeError('files.cacheKey must be a string')
+    }
+
+    if (files.cacheKey.length === 0) {
+      throw new TypeError('files.cacheKey must be a non-empty string')
+    }
+  }
+
   return {
     cache: files.cache,
+    cacheKey: files.cacheKey,
     extensions: normalizedExtensions,
     globalTransforms: normalizedGlobalTransforms,
     hasTransforms: normalizedTransforms.size > 0 || normalizedGlobalTransforms.length > 0,

package/src/lib/fingerprint.ts

@@ -7,15 +7,6 @@ export async function hashContent(content: string | Uint8Array<ArrayBufferLike>)
   return Buffer.from(hashBuffer).toString('base64url').slice(0, 6)
 }
 
-export async function generateFingerprint(args: {
-  buildId: string
-  content: string | Uint8Array<ArrayBufferLike>
-}): Promise<string> {
-  let content =
-    typeof args.content === 'string' ? args.content : Buffer.from(args.content).toString('base64')
-  return hashContent(JSON.stringify([content, args.buildId]))
-}
-
 export function parseFingerprintSuffix(pathname: string): {
   pathname: string
   requestedFingerprint: string | null

package/src/lib/hmr.ts

@@ -16,6 +16,11 @@ export type HmrPayload =
         | {
             /** Importing module whose dependency-accept handler accepts this update. */
             acceptedPath?: string
+            /** Import map entries required before this update can be evaluated. */
+            importMap?: {
+              imports: Record<string, string>
+              scopes?: Record<string, Record<string, string>>
+            }
             /** Public URL of the changed JavaScript module. */
             path: string
             /** Identifies a JavaScript module update. */
@@ -38,8 +43,18 @@ export type HmrPayload =
       type: 'browser:reload'
     }
 
-export function createHmrClientSource(options: { eventPathname: string }): string {
+export function createHmrClientSource(options: {
+  dataKey: string
+  eventPathname: string
+  moduleImporter: string | null
+}): string {
   return `
+${
+  options.moduleImporter
+    ? `import { importModule as __remixImport } from ${JSON.stringify(options.moduleImporter)}`
+    : 'const __remixImport = (specifier) => import(specifier)'
+}
+
 const contexts = new Map()
 const dataByPath = new Map()
 
@@ -111,6 +126,13 @@ let reconnectPending = false
 let pageReloadTimer
 let failedJavaScriptUpdates = new Map()
 let stylesheetUpdatePromise = Promise.resolve()
+let installedImportMap = { imports: new Map(), scopes: new Map() }
+let processedScripts = new WeakSet()
+
+let observer = new MutationObserver(processMutations)
+observer.observe(document, { childList: true })
+observer.observe(document.head, { childList: true })
+processImportMaps()
 
 let events = new EventSource(${JSON.stringify(options.eventPathname)})
 
@@ -136,11 +158,18 @@ events.onerror = () => {
 
 events.onmessage = (event) => {
   let payload = JSON.parse(event.data)
+  if (payload.type === 'browser:update') {
+    let update = payload.data?.[${JSON.stringify(options.dataKey)}]
+    if (!update) return
+    handleBrowserUpdate(update).catch((error) => {
+      console.error('[remix] HMR update failed', error)
+      if (update.updates.some((entry) => entry.type !== 'js')) reloadPage()
+    })
+    return
+  }
   handlePayload(payload).catch((error) => {
     console.error('[remix] HMR update failed', error)
-    if (payload.type !== 'browser:update' || payload.updates.some((update) => update.type !== 'js')) {
-      reloadPage()
-    }
+    reloadPage()
   })
 }
 
@@ -155,27 +184,28 @@ async function handlePayload(payload) {
     await dispatchCustomEvent(payload.type, payload)
     return
   }
+}
 
-  if (payload.type === 'browser:update') {
-    for (let update of payload.updates) {
-      if (update.type === 'css') {
-        let updated = await queueStylesheetUpdate(update.path, payload.timestamp)
-        if (updated) console.debug('[remix] HMR updated stylesheet', update.path)
-        continue
-      }
+async function handleBrowserUpdate(payload) {
+  for (let update of payload.updates) {
+    if (update.type === 'css') {
+      let updated = await queueStylesheetUpdate(update.path, payload.timestamp)
+      if (updated) console.debug('[remix] HMR updated stylesheet', update.path)
+      continue
+    }
 
-      try {
-        let updated = await updateJavaScriptModule(
-          update.path,
-          update.acceptedPath ?? update.path,
-          payload.timestamp,
-        )
-        failedJavaScriptUpdates.delete(update.path)
-        if (updated) console.debug('[remix] HMR accepted update', update.path)
-      } catch (error) {
-        failedJavaScriptUpdates.set(update.path, update.acceptedPath ?? update.path)
-        throw error
-      }
+    try {
+      if (update.importMap && !installImportMap(update.importMap)) return
+      let updated = await updateJavaScriptModule(
+        update.path,
+        update.acceptedPath ?? update.path,
+        payload.timestamp,
+      )
+      failedJavaScriptUpdates.delete(update.path)
+      if (updated) console.debug('[remix] HMR accepted update', update.path)
+    } catch (error) {
+      failedJavaScriptUpdates.set(update.path, update.acceptedPath ?? update.path)
+      throw error
     }
   }
 }
@@ -244,7 +274,7 @@ async function updateJavaScriptModule(path, acceptedPath, timestamp) {
       await callback(previousContext.data)
     }
 
-    let updatedModule = await import(withTimestamp(path, timestamp))
+    let updatedModule = await __remixImport(withTimestamp(path, timestamp), import.meta.url)
     previousContext.invalidated = false
     previousContext.updating = true
     try {
@@ -267,7 +297,7 @@ async function updateJavaScriptModule(path, acceptedPath, timestamp) {
     }
   }
 
-  let updatedModule = await import(withTimestamp(acceptedPath, timestamp))
+  let updatedModule = await __remixImport(withTimestamp(acceptedPath, timestamp), import.meta.url)
   previousContext.invalidated = false
   previousContext.updating = true
   try {
@@ -298,7 +328,7 @@ async function propagateInvalidatedJavaScriptModule(path, timestamp) {
       await callback(importerContext.data)
     }
 
-    let updatedModule = await import(withTimestamp(path, timestamp))
+    let updatedModule = await __remixImport(withTimestamp(path, timestamp), import.meta.url)
     importerContext.invalidated = false
     importerContext.updating = true
     try {
@@ -386,6 +416,160 @@ function withTimestamp(path, timestamp) {
   return url.pathname + url.search
 }
 
+function installImportMap(importMap) {
+  processMutations(observer.takeRecords())
+  processImportMaps()
+  let delta = getImportMapDelta(installedImportMap, importMap)
+  if (delta === null) {
+    reloadPage()
+    return false
+  }
+  if (!delta) return true
+
+  let script = document.createElement('script')
+  script.setAttribute('data-rmx-import-map', '')
+  script.type = 'importmap'
+  script.textContent = JSON.stringify(delta)
+  document.head.appendChild(script)
+  processedScripts.add(script)
+  mergeImportMap(installedImportMap, delta)
+  return true
+}
+
+function processImportMap(script) {
+  if (processedScripts.has(script)) return
+  processedScripts.add(script)
+
+  let importMap
+  try {
+    importMap = JSON.parse(script.textContent ?? '')
+  } catch {
+    return
+  }
+  if (!importMap || typeof importMap !== 'object') return
+  mergeImportMap(installedImportMap, importMap)
+}
+
+function processImportMaps() {
+  for (let script of document.querySelectorAll('script[type="importmap"]')) {
+    processImportMap(script)
+  }
+}
+
+function processMutations(mutations) {
+  for (let mutation of mutations) {
+    if (mutation.type !== 'childList') continue
+    for (let node of mutation.addedNodes) {
+      if (node instanceof HTMLScriptElement && node.matches('script[type="importmap"]')) {
+        processImportMap(node)
+      }
+    }
+  }
+}
+
+function getImportMapDelta(installed, importMap) {
+  let imports = getImportMapImportsDelta(installed.imports, importMap.imports)
+  if (imports === null) return null
+
+  let scopes
+  if (importMap.scopes && typeof importMap.scopes === 'object') {
+    scopes = {}
+    for (let [scope, entries] of Object.entries(importMap.scopes)) {
+      let normalizedScope = normalizeImportMapUrl(scope)
+      if (!normalizedScope || !entries || typeof entries !== 'object') continue
+      let installedEntries = installed.scopes.get(normalizedScope) ?? new Map()
+      let entriesDelta = getImportMapImportsDelta(installedEntries, entries, scope)
+      if (entriesDelta === null) return null
+      if (entriesDelta) scopes[scope] = entriesDelta
+    }
+    if (Object.keys(scopes).length === 0) scopes = undefined
+  }
+
+  if (!imports && !scopes) return undefined
+  return {
+    ...(imports ? { imports } : null),
+    ...(scopes ? { scopes } : null),
+  }
+}
+
+function getImportMapImportsDelta(installed, entries, scope) {
+  if (!entries || typeof entries !== 'object') return undefined
+  let delta = {}
+  for (let [specifier, href] of Object.entries(entries)) {
+    if (href !== null && typeof href !== 'string') continue
+    let normalizedSpecifier = normalizeImportMapSpecifier(specifier)
+    if (!normalizedSpecifier) continue
+    let normalizedHref = normalizeImportMapAddress(href)
+    let existing = installed.get(normalizedSpecifier)
+    if (existing === normalizedHref) continue
+    if (existing !== undefined) {
+      let scopeDescription = scope ? \` in scope "\${scope}"\` : ''
+      console.warn(
+        \`[remix] HMR reloading page after import map conflict for "\${specifier}"\${scopeDescription}: \` +
+          formatImportMapAddress(existing) +
+          ' is already installed, but the new map points to ' +
+          formatImportMapAddress(normalizedHref),
+      )
+      return null
+    }
+    delta[specifier] = href
+  }
+  return Object.keys(delta).length > 0 ? delta : undefined
+}
+
+function mergeImportMap(installed, importMap) {
+  mergeImportMapImports(installed.imports, importMap.imports)
+  if (!importMap.scopes || typeof importMap.scopes !== 'object') return
+  for (let [scope, entries] of Object.entries(importMap.scopes)) {
+    let normalizedScope = normalizeImportMapUrl(scope)
+    if (!normalizedScope || !entries || typeof entries !== 'object') continue
+    let installedEntries = installed.scopes.get(normalizedScope)
+    if (!installedEntries) {
+      installedEntries = new Map()
+      installed.scopes.set(normalizedScope, installedEntries)
+    }
+    mergeImportMapImports(installedEntries, entries)
+  }
+}
+
+function mergeImportMapImports(installed, entries) {
+  if (!entries || typeof entries !== 'object') return
+  for (let [specifier, href] of Object.entries(entries)) {
+    if (href !== null && typeof href !== 'string') continue
+    let normalizedSpecifier = normalizeImportMapSpecifier(specifier)
+    if (!normalizedSpecifier || installed.has(normalizedSpecifier)) continue
+    installed.set(normalizedSpecifier, normalizeImportMapAddress(href))
+  }
+}
+
+function normalizeImportMapSpecifier(specifier) {
+  if (
+    specifier.startsWith('/') ||
+    specifier.startsWith('./') ||
+    specifier.startsWith('../') ||
+    URL.canParse(specifier)
+  ) {
+    return normalizeImportMapUrl(specifier)
+  }
+  return specifier
+}
+
+function normalizeImportMapAddress(href) {
+  return href === null ? null : normalizeImportMapUrl(href)
+}
+
+function formatImportMapAddress(href) {
+  return href === null ? 'null' : '"' + href + '"'
+}
+
+function normalizeImportMapUrl(value) {
+  try {
+    return new URL(value, document.baseURI).href
+  } catch {
+    return null
+  }
+}
+
 function reloadPage() {
   if (pageReloadTimer) clearTimeout(pageReloadTimer)
   pageReloadTimer = setTimeout(() => {

package/src/lib/routes.ts

@@ -137,7 +137,7 @@ function normalizeMountUrlRoot(urlRoot: string): string {
   return url.pathname.replace(/\/+$/, '') || '/'
 }
 
-function resolveMountFileRoot(rootDir: string, fileRoot: string): string {
+export function resolveMountFileRoot(rootDir: string, fileRoot: string): string {
   let resolvedRoot = resolveFilePath(rootDir, fileRoot)
 
   try {