@remix-run/multiple-import-maps-polyfill 0.0.0 → 0.1.0

package/src/lib/features.ts

@@ -0,0 +1,80 @@
+import { hasDocument, nonce, version } from './env.ts'
+import { maybeTrustedInnerHTML, maybeTrustedScript, policy } from './trusted-types.ts'
+
+const supports = hasDocument ? HTMLScriptElement.supports : undefined
+
+export const supportsImportMaps = Boolean(
+  supports && supports.name === 'supports' && supports('importmap'),
+)
+export let supportsMultipleImportMaps = false
+
+export const featureDetectionPromise: Promise<void> = (async function () {
+  if (!hasDocument || !supportsImportMaps) return
+
+  let msgTag = `s${version}`
+  return new Promise<void>((resolve) => {
+    let iframe = document.createElement('iframe')
+    iframe.style.display = 'none'
+    iframe.setAttribute('nonce', nonce)
+    let settled = false
+    let timeout = setTimeout(done, 1000)
+    function done() {
+      if (settled) return
+      settled = true
+      clearTimeout(timeout)
+      if (iframe.parentNode === document.head) document.head.removeChild(iframe)
+      window.removeEventListener('message', cb, false)
+      resolve()
+    }
+
+    function cb({ data }: MessageEvent<unknown>) {
+      if (!Array.isArray(data) || data[0] !== msgTag) return
+      supportsMultipleImportMaps = data[2] === true
+      done()
+    }
+    window.addEventListener('message', cb, false)
+
+    let importMapTest = `<script nonce=${nonce || ''}>${
+      policy
+        ? 't=(window.trustedTypes||window.TrustedTypes).createPolicy("remix/multiple-import-maps-polyfill",{createScript:s=>s});'
+        : ''
+    }b=s=>URL.createObjectURL(new Blob([s],{type:'text/javascript'}));c=u=>import(u).then(()=>true,()=>false);i=innerText=>document.head.appendChild(Object.assign(document.createElement('script'),{type:'importmap',nonce:"${nonce}",text:${
+      policy ? 't.createScript(innerText)' : 'innerText'
+    }}));i(\`{"imports":{"x":"\${b('')}"}}\`);i(\`{"imports":{"y":"\${b('')}"}}\`);Promise.all([true,c('y')]).then(a=>parent.postMessage(['${msgTag}'].concat(a),'*'))<${''}/script>`
+
+    // Safari will call onload eagerly on head injection, but we don't want the Wechat
+    // path to trigger before setting srcdoc, therefore we track the timing
+    let readyForOnload = false,
+      onloadCalledWhileNotReady = false
+    function doOnload() {
+      if (!readyForOnload) {
+        onloadCalledWhileNotReady = true
+        return
+      }
+      // WeChat browser doesn't support setting srcdoc scripts
+      // But iframe sandboxes don't support contentDocument so we do this as a fallback
+      let doc = iframe.contentDocument
+      if (doc && doc.head.childNodes.length === 0) {
+        let script = doc.createElement('script')
+        if (nonce) script.setAttribute('nonce', nonce)
+        script.innerText = maybeTrustedScript(
+          importMapTest.slice(15 + (nonce ? nonce.length : 0), -9),
+        )
+        doc.head.appendChild(script)
+      }
+    }
+
+    iframe.onload = doOnload
+    // WeChat browser requires append before setting srcdoc
+    document.head.appendChild(iframe)
+
+    // setting srcdoc is not supported in React native webviews on iOS
+    // setting src to a blob URL results in a navigation event in webviews
+    // document.write gives usability warnings
+    readyForOnload = true
+    if ('srcdoc' in (iframe as object)) iframe.srcdoc = maybeTrustedInnerHTML(importMapTest)
+    else iframe.contentDocument!.write(importMapTest)
+    // retrigger onload for Safari only if necessary
+    if (onloadCalledWhileNotReady) doOnload()
+  })
+})().catch(() => {})

package/src/lib/native-resolve.ts

@@ -0,0 +1,69 @@
+import {
+  asURL,
+  resolveAndComposeImportMap,
+  resolveIfNotPlainOrUrl,
+  resolveImportMap,
+} from './resolve.ts'
+import type { ImportMap } from './resolve.ts'
+
+let importMap: ImportMap = { imports: {}, scopes: {}, integrity: {} }
+const processedScripts = new WeakSet<HTMLScriptElement>()
+const selector = 'script[type="importmap"]'
+const observer =
+  typeof document === 'undefined' ? undefined : new MutationObserver(processMutations)
+
+if (observer) {
+  observer.observe(document, { childList: true })
+  observer.observe(document.head, { childList: true })
+  processImportMaps()
+}
+
+export function resolveModuleUrl(specifier: string, parentUrl: string): string {
+  if (observer) processMutations(observer.takeRecords())
+  processImportMaps()
+  let normalized = resolveIfNotPlainOrUrl(specifier, parentUrl) || asURL(specifier) || specifier
+  let resolved = resolveImportMap(importMap, normalized, parentUrl)
+  if (!resolved) throw new TypeError(`Unable to resolve specifier '${specifier}' from ${parentUrl}`)
+  return resolved
+}
+
+function processImportMaps(): void {
+  for (let script of document.querySelectorAll<HTMLScriptElement>(selector))
+    processImportMap(script)
+}
+
+function processMutations(mutations: MutationRecord[]): void {
+  for (let mutation of mutations) {
+    for (let node of mutation.addedNodes) {
+      if (node instanceof HTMLScriptElement && node.matches(selector)) processImportMap(node)
+    }
+  }
+}
+
+function processImportMap(script: HTMLScriptElement): void {
+  if (processedScripts.has(script)) return
+  processedScripts.add(script)
+  if (script.src) return
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(script.textContent ?? '')
+  } catch {
+    return
+  }
+  if (!isRecord(parsed)) return
+  let scopes: Record<string, Record<string, unknown>> = {}
+  if (isRecord(parsed.scopes)) {
+    for (let [scope, entries] of Object.entries(parsed.scopes)) {
+      if (isRecord(entries)) scopes[scope] = entries
+    }
+  }
+  importMap = resolveAndComposeImportMap(
+    { imports: isRecord(parsed.imports) ? parsed.imports : undefined, scopes },
+    script.baseURI,
+    importMap,
+  )
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === 'object' && !Array.isArray(value)
+}

package/src/lib/polyfill.ts

@@ -0,0 +1,89 @@
+import { featureDetectionPromise, supportsMultipleImportMaps } from './features.ts'
+import { resolveModuleUrl } from './native-resolve.ts'
+
+type ModuleNamespace = Record<string, unknown>
+
+interface Runtime {
+  importShim(specifier: string, parentUrl?: string): Promise<ModuleNamespace>
+  preloadShim(specifiers: string | readonly string[], parentUrl?: string): Promise<void>
+  registerNativeModule(url: string): void
+}
+
+let runtimePromise: Promise<Runtime> | undefined
+const multipleImportMapSupportPromise = featureDetectionPromise.then(() => {
+  let supported = supportsMultipleImportMaps
+  // A later import observes the cached rejection; the background warm-up must not be unhandled.
+  if (!supported && typeof document !== 'undefined') void getRuntime().catch(() => {})
+  return supported
+})
+
+/**
+ * Detects whether the current document can install multiple import maps.
+ *
+ * Returns `true` only when an isolated feature test verifies support. If the test cannot run or
+ * complete under the document's Content Security Policy, this returns `false`. When the polyfill
+ * is required, its runtime begins loading in the background.
+ *
+ * @returns Whether multiple import map support was verified.
+ */
+export function detectMultipleImportMapSupport(): Promise<boolean> {
+  return multipleImportMapSupportPromise
+}
+
+/**
+ * Loads a JavaScript module, using the multiple import map polyfill when required.
+ *
+ * @param specifier Module specifier to load.
+ * @param parentUrl URL to resolve the specifier from. (default: `document.baseURI`)
+ * @returns The loaded module namespace.
+ */
+export async function importModule(
+  specifier: string,
+  parentUrl: string = document.baseURI,
+): Promise<ModuleNamespace> {
+  if (await detectMultipleImportMapSupport()) return import(resolveModuleUrl(specifier, parentUrl))
+  return importShim(specifier, parentUrl)
+}
+
+/**
+ * Loads a JavaScript module through the polyfill using every import map currently installed in the
+ * document. This function does not detect native multiple import map support.
+ *
+ * @param specifier Module specifier to load.
+ * @param parentUrl URL to resolve the specifier from. (default: `document.baseURI`)
+ * @returns The loaded module namespace.
+ */
+export async function importShim(
+  specifier: string,
+  parentUrl: string = document.baseURI,
+): Promise<ModuleNamespace> {
+  let runtime = await getRuntime()
+  return runtime.importShim(specifier, parentUrl)
+}
+
+/**
+ * Fetches one or more JavaScript modules through the polyfill for a later polyfilled import. This
+ * function does not use native module preloads.
+ *
+ * Preload failures are ignored. A later import reports the failure if the module is required.
+ *
+ * @param specifiers Module specifier or specifiers to preload.
+ * @param parentUrl URL to resolve the specifiers from. (default: `document.baseURI`)
+ * @returns A promise that settles after all module fetches have completed.
+ */
+export async function preloadShim(
+  specifiers: string | readonly string[],
+  parentUrl: string = document.baseURI,
+): Promise<void> {
+  try {
+    let runtime = await getRuntime()
+    await runtime.preloadShim(specifiers, parentUrl)
+  } catch {}
+}
+
+async function getRuntime(): Promise<Runtime> {
+  runtimePromise ??= import('./core.ts')
+  let runtime = await runtimePromise
+  runtime.registerNativeModule(import.meta.url)
+  return runtime
+}

package/src/lib/resolve.ts

@@ -0,0 +1,225 @@
+const backslashRegEx = /\\/g
+
+export interface ImportMap {
+  imports: Record<string, string | null>
+  scopes: Record<string, Record<string, string | null>>
+  integrity: Record<string, string>
+}
+
+export interface ImportMapJson {
+  imports?: Record<string, unknown>
+  scopes?: Record<string, Record<string, unknown>>
+  integrity?: Record<string, string>
+}
+
+export const asURL = (url: string): string | undefined => {
+  try {
+    if (url.indexOf(':') !== -1) return new URL(url).href
+  } catch (_) {}
+}
+
+export const resolveUrl = (relUrl: string, parentUrl: string): string =>
+  (resolveIfNotPlainOrUrl(relUrl, parentUrl) ||
+    asURL(relUrl) ||
+    resolveIfNotPlainOrUrl('./' + relUrl, parentUrl))!
+
+export const resolveIfNotPlainOrUrl = (relUrl: string, parentUrl: string): string | undefined => {
+  let hIdx = parentUrl.indexOf('#'),
+    qIdx = parentUrl.indexOf('?')
+  if (hIdx + qIdx > -2)
+    parentUrl = parentUrl.slice(0, hIdx === -1 ? qIdx : qIdx === -1 || qIdx > hIdx ? hIdx : qIdx)
+  if (relUrl.indexOf('\\') !== -1) relUrl = relUrl.replace(backslashRegEx, '/')
+  // protocol-relative
+  if (relUrl[0] === '/' && relUrl[1] === '/') {
+    return parentUrl.slice(0, parentUrl.indexOf(':') + 1) + relUrl
+  }
+  // relative-url
+  else if (
+    (relUrl[0] === '.' &&
+      (relUrl[1] === '/' ||
+        (relUrl[1] === '.' && (relUrl[2] === '/' || (relUrl.length === 2 && (relUrl += '/')))) ||
+        (relUrl.length === 1 && (relUrl += '/')))) ||
+    relUrl[0] === '/'
+  ) {
+    let parentProtocol = parentUrl.slice(0, parentUrl.indexOf(':') + 1)
+    if (parentProtocol === 'blob:') {
+      throw new TypeError(
+        `Failed to resolve module specifier "${relUrl}". Invalid relative url or base scheme isn't hierarchical.`,
+      )
+    }
+    // Disabled, but these cases will give inconsistent results for deep backtracking
+    //if (parentUrl[parentProtocol.length] !== '/')
+    //  throw new Error('Cannot resolve');
+    // read pathname from parent URL
+    // pathname taken to be part after leading "/"
+    let pathname
+    if (parentUrl[parentProtocol.length + 1] === '/') {
+      // resolving to a :// so we need to read out the auth and host
+      if (parentProtocol !== 'file:') {
+        pathname = parentUrl.slice(parentProtocol.length + 2)
+        pathname = pathname.slice(pathname.indexOf('/') + 1)
+      } else {
+        pathname = parentUrl.slice(8)
+      }
+    } else {
+      // resolving to :/ so pathname is the /... part
+      pathname = parentUrl.slice(
+        parentProtocol.length + Number(parentUrl[parentProtocol.length] === '/'),
+      )
+    }
+
+    if (relUrl[0] === '/')
+      return parentUrl.slice(0, parentUrl.length - pathname.length - 1) + relUrl
+
+    // join together and split for removal of .. and . segments
+    // looping the string instead of anything fancy for perf reasons
+    // '../../../../../z' resolved to 'x/y' is just 'z'
+    let segmented = pathname.slice(0, pathname.lastIndexOf('/') + 1) + relUrl
+
+    let output = []
+    let segmentIndex = -1
+    for (let i = 0; i < segmented.length; i++) {
+      // busy reading a segment - only terminate on '/'
+      if (segmentIndex !== -1) {
+        if (segmented[i] === '/') {
+          output.push(segmented.slice(segmentIndex, i + 1))
+          segmentIndex = -1
+        }
+        continue
+      }
+      // new segment - check if it is relative
+      else if (segmented[i] === '.') {
+        // ../ segment
+        if (segmented[i + 1] === '.' && (segmented[i + 2] === '/' || i + 2 === segmented.length)) {
+          output.pop()
+          i += 2
+          continue
+        }
+        // ./ segment
+        else if (segmented[i + 1] === '/' || i + 1 === segmented.length) {
+          i += 1
+          continue
+        }
+      }
+      // it is the start of a new segment
+      while (segmented[i] === '/') i++
+      segmentIndex = i
+    }
+    // finish reading out the last segment
+    if (segmentIndex !== -1) output.push(segmented.slice(segmentIndex))
+    return parentUrl.slice(0, parentUrl.length - pathname.length) + output.join('')
+  }
+}
+
+export const resolveAndComposeImportMap = (
+  json: ImportMapJson,
+  baseUrl: string,
+  parentMap: ImportMap,
+): ImportMap => {
+  let outMap = {
+    imports: { ...parentMap.imports },
+    scopes: Object.fromEntries(
+      Object.entries(parentMap.scopes).map(([scope, imports]) => [scope, { ...imports }]),
+    ),
+    integrity: { ...parentMap.integrity },
+  }
+
+  if (json.imports) resolveAndComposePackages(json.imports, outMap.imports, baseUrl, parentMap)
+
+  if (json.scopes)
+    for (let s in json.scopes) {
+      let resolvedScope = resolveUrl(s, baseUrl)
+      resolveAndComposePackages(
+        json.scopes[s],
+        outMap.scopes[resolvedScope] || (outMap.scopes[resolvedScope] = {}),
+        baseUrl,
+        parentMap,
+      )
+    }
+
+  if (json.integrity) resolveAndComposeIntegrity(json.integrity, outMap.integrity, baseUrl)
+
+  return outMap
+}
+
+const getMatch = <value>(path: string, matchObj: Record<string, value>): string | undefined => {
+  if (matchObj[path]) return path
+  let sepIndex = path.length
+  do {
+    let segment = path.slice(0, sepIndex + 1)
+    if (segment in matchObj) return segment
+  } while ((sepIndex = path.lastIndexOf('/', sepIndex - 1)) !== -1)
+}
+
+const applyPackages = (id: string, packages: Record<string, string | null>): string | undefined => {
+  let pkgName = getMatch(id, packages)
+  if (pkgName) {
+    let pkg = packages[pkgName]
+    if (pkg === null) return
+    return pkg + id.slice(pkgName.length)
+  }
+}
+
+export const resolveImportMap = (
+  importMap: ImportMap,
+  resolvedOrPlain: string,
+  parentUrl: string,
+): string | false | undefined => {
+  let scopeUrl = parentUrl && getMatch(parentUrl, importMap.scopes)
+  while (scopeUrl) {
+    let packageResolution = applyPackages(resolvedOrPlain, importMap.scopes[scopeUrl])
+    if (packageResolution) return packageResolution
+    scopeUrl = getMatch(scopeUrl.slice(0, scopeUrl.lastIndexOf('/')), importMap.scopes)
+  }
+  return (
+    applyPackages(resolvedOrPlain, importMap.imports) ||
+    (resolvedOrPlain.indexOf(':') !== -1 && resolvedOrPlain)
+  )
+}
+
+const resolveAndComposePackages = (
+  packages: Record<string, unknown>,
+  outPackages: Record<string, string | null>,
+  baseUrl: string,
+  parentMap: ImportMap,
+): void => {
+  for (let p in packages) {
+    let resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p
+    if (outPackages[resolvedLhs] && outPackages[resolvedLhs] !== packages[resolvedLhs]) {
+      console.warn(
+        `remix/multiple-import-maps-polyfill: Rejected map override "${resolvedLhs}" from ${outPackages[resolvedLhs]} to ${packages[resolvedLhs]}.`,
+      )
+      continue
+    }
+    let target = packages[p]
+    if (typeof target !== 'string') continue
+    let mapped = resolveImportMap(
+      parentMap,
+      resolveIfNotPlainOrUrl(target, baseUrl) || target,
+      baseUrl,
+    )
+    if (mapped) {
+      outPackages[resolvedLhs] = mapped
+      continue
+    }
+    console.warn(
+      `remix/multiple-import-maps-polyfill: Mapping "${p}" -> "${packages[p]}" does not resolve`,
+    )
+  }
+}
+
+const resolveAndComposeIntegrity = (
+  integrity: Record<string, string>,
+  outIntegrity: Record<string, string>,
+  baseUrl: string,
+): void => {
+  for (let p in integrity) {
+    let resolvedLhs = resolveIfNotPlainOrUrl(p, baseUrl) || p
+    if (outIntegrity[resolvedLhs] && outIntegrity[resolvedLhs] !== integrity[resolvedLhs]) {
+      console.warn(
+        `remix/multiple-import-maps-polyfill: Rejected map integrity override "${resolvedLhs}" from ${outIntegrity[resolvedLhs]} to ${integrity[resolvedLhs]}.`,
+      )
+    }
+    outIntegrity[resolvedLhs] = integrity[p]
+  }
+}

package/src/lib/self.ts

@@ -0,0 +1,2 @@
+const self_: typeof globalThis = typeof globalThis !== 'undefined' ? globalThis : self
+export { self_ as self }

package/src/lib/trusted-types.ts

@@ -0,0 +1,49 @@
+import { self } from './self.ts'
+
+type TrustedHTML = string & { readonly __trustedHTML: unique symbol }
+type TrustedScript = string & { readonly __trustedScript: unique symbol }
+
+interface TrustedTypePolicy {
+  createHTML(html: string): TrustedHTML
+  createScript(script: string): TrustedScript
+}
+
+interface TrustedTypePolicyFactory {
+  createPolicy(
+    name: string,
+    rules: {
+      createHTML(html: string): string
+      createScript(script: string): string
+    },
+  ): TrustedTypePolicy
+}
+
+interface TrustedTypesGlobal {
+  trustedTypes?: TrustedTypePolicyFactory
+  TrustedTypes?: TrustedTypePolicyFactory
+}
+
+const trustedTypesGlobal: typeof self & TrustedTypesGlobal = self
+
+export let policy: TrustedTypePolicy | undefined
+if (
+  typeof trustedTypesGlobal !== 'undefined' &&
+  (typeof trustedTypesGlobal.trustedTypes !== 'undefined' ||
+    typeof trustedTypesGlobal.TrustedTypes !== 'undefined')
+) {
+  try {
+    let trustedTypes = (trustedTypesGlobal.trustedTypes || trustedTypesGlobal.TrustedTypes)!
+    policy = trustedTypes.createPolicy('remix/multiple-import-maps-polyfill', {
+      createHTML: (html) => html,
+      createScript: (script) => script,
+    })
+  } catch {}
+}
+
+export function maybeTrustedInnerHTML(html: string): string | TrustedHTML {
+  return policy ? policy.createHTML(html) : html
+}
+
+export function maybeTrustedScript(script: string): string | TrustedScript {
+  return policy ? policy.createScript(script) : script
+}