rnxsim 0.1.402 → 0.1.404

package/src/metro-production-bundle.ts

@@ -1,9 +1,27 @@
 const RNXSIM_METRO_MODULE_PATHS_PREFIX = 'globalThis.__sootsimModulePaths='
+export const RNX_METRO_MODULE_IDENTITY_VERSION = 2
 
 export type RNXMetroModulePathMap = Record<string, string>
-export interface RNXMetroModuleIdentity {
-  source: string
+export type RNXMetroLogicalSpecifierMap = Record<string, string[]>
+export type RNXMetroModuleIdentitySource =
+  | 'rnx-plugin'
+  | 'contrast-bundler'
+  | 'metro-source-map'
+
+export interface RNXMetroModuleIdentityMetadata {
+  version: typeof RNX_METRO_MODULE_IDENTITY_VERSION
+  identitySource: RNXMetroModuleIdentitySource
   modulePaths: RNXMetroModulePathMap
+  logicalSpecifiers: RNXMetroLogicalSpecifierMap
+}
+
+export interface RNXMetroModuleIdentity extends RNXMetroModuleIdentityMetadata {
+  source: string
+  /**
+   * Metro's trailing `//# sourceMappingURL=` comment when the graph carried
+   * one, already split off `source`. A production graph has none.
+   */
+  sourceMappingUrl: string | null
 }
 
 // the production bundle rnx loads is the app's ORDINARY production bundle.
@@ -19,36 +37,156 @@ export function toRNXProductionBundleUrl(bundleUrl: string): string {
   return relative ? `${url.pathname}${url.search}${url.hash}` : url.toString()
 }
 
-export function createRNXMetroModulePathsFooter(
-  modulePaths: RNXMetroModulePathMap,
+/**
+ * the ordinary development counterpart. Metro keeps `__DEV__` true, verbose
+ * module names, and its source map. `hot` stays false because the artifact is
+ * immutable once produced.
+ */
+export function toRNXDevelopmentBundleUrl(bundleUrl: string): string {
+  const relative = bundleUrl.startsWith('/')
+  const url = new URL(bundleUrl, 'http://rnxsim.local')
+  url.searchParams.set('dev', 'true')
+  url.searchParams.set('hot', 'false')
+  url.searchParams.set('minify', 'false')
+  return relative ? `${url.pathname}${url.search}${url.hash}` : url.toString()
+}
+
+const RNXSIM_METRO_SOURCE_MAP_COMMENT = '//# sourceMappingURL='
+
+export interface RNXMetroDetachedSourceMapUrl {
+  source: string
+  /** the comment's URL, which is a whole inline map when Metro inlined it. */
+  sourceMappingUrl: string | null
+}
+
+/**
+ * splits Metro's trailing `//# sourceMappingURL=` comment off the bundle.
+ *
+ * a development bundle ends with that comment, and Metro inlines the entire
+ * map into it as a data URL whenever the caller did not ask for an external
+ * map file. leaving it attached makes the last `__r(` statement carry the map
+ * as source text: the layout reader would hand megabytes of base64 to the
+ * minifier, and the artifact the runner loads would keep the map resident in
+ * child memory for the life of the simulator.
+ */
+export function detachRNXMetroSourceMapUrl(
+  bundleText: string,
+): RNXMetroDetachedSourceMapUrl {
+  const trimmedEnd = bundleText.replace(/\s+$/, '')
+  const commentStart = trimmedEnd.lastIndexOf(`\n${RNXSIM_METRO_SOURCE_MAP_COMMENT}`)
+  if (commentStart < 0) return { source: bundleText, sourceMappingUrl: null }
+  const url = trimmedEnd.slice(commentStart + 1 + RNXSIM_METRO_SOURCE_MAP_COMMENT.length)
+  if (url.includes('\n')) return { source: bundleText, sourceMappingUrl: null }
+  return { source: trimmedEnd.slice(0, commentStart), sourceMappingUrl: url }
+}
+
+export function createRNXMetroModuleIdentityFooter(
+  identity: RNXMetroModuleIdentityMetadata,
 ): string {
-  const payload = JSON.stringify(modulePaths)
+  const payload = JSON.stringify(identity)
     .replace(/\u2028/g, '\\u2028')
     .replace(/\u2029/g, '\\u2029')
     .replace(/<\//g, '<\\/')
   return `\n${RNXSIM_METRO_MODULE_PATHS_PREFIX}${payload};`
 }
 
+/**
+ * writes the identity footer into a serialized bundle, keeping Metro's
+ * `//# sourceMappingURL=` comment on the last line when the graph has one. a
+ * production graph has no such comment and gets the footer appended, exactly
+ * as before.
+ */
+export function appendRNXMetroModuleIdentityFooter(
+  bundleText: string,
+  identity: RNXMetroModuleIdentityMetadata,
+): string {
+  const footer = createRNXMetroModuleIdentityFooter(identity)
+  const detached = detachRNXMetroSourceMapUrl(bundleText)
+  return detached.sourceMappingUrl === null
+    ? bundleText + footer
+    : `${detached.source}${footer}\n${RNXSIM_METRO_SOURCE_MAP_COMMENT}${detached.sourceMappingUrl}`
+}
+
 export function readRNXMetroModuleIdentity(
   bundleText: string,
 ): RNXMetroModuleIdentity | null {
+  const detached = detachRNXMetroSourceMapUrl(bundleText)
+  const withoutMap = detached.source
   const footerPrefix = `\n${RNXSIM_METRO_MODULE_PATHS_PREFIX}`
-  const footerStart = bundleText.lastIndexOf(footerPrefix)
-  if (footerStart < 0 || !bundleText.endsWith(';')) return null
+  const footerStart = withoutMap.lastIndexOf(footerPrefix)
+  if (footerStart < 0) return null
+  if (!withoutMap.endsWith(';')) {
+    throw new Error('Metro module identity footer is truncated')
+  }
 
-  const parsed: unknown = JSON.parse(
-    bundleText.slice(footerStart + footerPrefix.length, -1),
-  )
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(withoutMap.slice(footerStart + footerPrefix.length, -1))
+  } catch {
+    throw new Error('Metro module identity footer is not valid JSON')
+  }
   if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
-    return null
+    throw new Error('Metro module identity footer is malformed')
+  }
+
+  const version = Reflect.get(parsed, 'version')
+  // stored artifacts from before the versioned footer carry a bare module-path
+  // map with no version field. they are development bundles whose identity
+  // comes from Metro's verbose names, so treat their footer as absent rather
+  // than failing every stored replay.
+  if (version === undefined) return null
+  const identitySource = Reflect.get(parsed, 'identitySource')
+  const parsedModulePaths = Reflect.get(parsed, 'modulePaths')
+  const parsedLogicalSpecifiers = Reflect.get(parsed, 'logicalSpecifiers')
+  if (
+    version !== RNX_METRO_MODULE_IDENTITY_VERSION ||
+    (identitySource !== 'rnx-plugin' &&
+      identitySource !== 'contrast-bundler' &&
+      identitySource !== 'metro-source-map') ||
+    typeof parsedModulePaths !== 'object' ||
+    parsedModulePaths === null ||
+    Array.isArray(parsedModulePaths) ||
+    typeof parsedLogicalSpecifiers !== 'object' ||
+    parsedLogicalSpecifiers === null ||
+    Array.isArray(parsedLogicalSpecifiers)
+  ) {
+    throw new Error('Metro module identity footer is malformed')
   }
 
   const modulePaths: RNXMetroModulePathMap = {}
-  for (const [moduleId, modulePath] of Object.entries(parsed)) {
-    if (typeof modulePath !== 'string') return null
+  for (const [moduleId, modulePath] of Object.entries(parsedModulePaths)) {
+    if (typeof modulePath !== 'string') {
+      throw new Error(`Metro module identity has an invalid path for ${moduleId}`)
+    }
     modulePaths[moduleId] = modulePath
   }
-  return { source: bundleText.slice(0, footerStart), modulePaths }
+  const logicalSpecifiers: RNXMetroLogicalSpecifierMap = {}
+  for (const [moduleId, specifiers] of Object.entries(parsedLogicalSpecifiers)) {
+    if (
+      !Array.isArray(specifiers) ||
+      specifiers.length === 0 ||
+      !specifiers.every(
+        (specifier) => typeof specifier === 'string' && specifier.length > 0,
+      )
+    ) {
+      throw new Error(`Metro module identity has invalid specifiers for ${moduleId}`)
+    }
+    const unique = [...new Set(specifiers)].sort((left, right) =>
+      left.localeCompare(right),
+    )
+    if (unique.length !== specifiers.length) {
+      throw new Error(`Metro module identity repeats a specifier for ${moduleId}`)
+    }
+    logicalSpecifiers[moduleId] = unique
+  }
+  return {
+    source: withoutMap.slice(0, footerStart),
+    version,
+    identitySource,
+    modulePaths,
+    logicalSpecifiers,
+    sourceMappingUrl: detached.sourceMappingUrl,
+  }
 }
 
 // the exact layout Metro's baseJSBundle emits and the rnx runtime contract
@@ -67,6 +205,12 @@ export interface RNXMetroDefine {
   factory: { start: number; end: number }
   /** the dependency array, brackets included. */
   dependencies: { start: number; end: number }
+  /**
+   * the module's verbose name, quotes included, when the graph carries one.
+   * Metro emits it as a fourth `__d` argument on a development graph and omits
+   * it entirely on a production one.
+   */
+  verboseName?: { start: number; end: number }
 }
 
 export interface RNXMetroRun {
@@ -92,12 +236,33 @@ interface DefineTail {
   factoryEnd: number
   dependenciesStart: number
   dependenciesEnd: number
+  verboseNameStart?: number
+  verboseNameEnd?: number
+}
+
+// walks back over a single-quoted or double-quoted string literal ending at
+// `end`, returning the index of its opening quote. an odd run of backslashes
+// before a quote escapes it, so count them before accepting a candidate.
+function readStringLiteralStart(source: string, start: number, end: number): number {
+  const quote = source[end]
+  if (quote !== '"' && quote !== "'") return -1
+  for (let index = end - 1; index > start; index--) {
+    if (source[index] !== quote) continue
+    let backslashes = 0
+    while (index - 1 - backslashes > start && source[index - 1 - backslashes] === '\\') {
+      backslashes++
+    }
+    if (backslashes % 2 === 0) return index
+  }
+  return -1
 }
 
-// each `__d(...)` ends with `),<id>,[dep,dep,...]);?`. the dependency array can
-// be hundreds of entries long, so walk back from `end` instead of searching a
-// fixed tail window: skip trailing `;` and whitespace, consume the closing `)`,
-// balance `[...]` to find its opening bracket, then read the integer before it.
+// each `__d(...)` ends with `),<id>,[dep,dep,...]);?`, and a development graph
+// adds a fourth verbose-name string after the dependency array. the dependency
+// array can be hundreds of entries long, so walk back from `end` instead of
+// searching a fixed tail window: skip trailing `;` and whitespace, consume the
+// closing `)`, take the verbose name when one is there, balance `[...]` to find
+// its opening bracket, then read the integer before it.
 function readDefineTail(source: string, start: number, end: number): DefineTail | null {
   let cursor = end
   while (
@@ -112,6 +277,19 @@ function readDefineTail(source: string, start: number, end: number): DefineTail
   if (source[cursor] !== ')') return null
   cursor--
   while (cursor > start && /\s/.test(source[cursor])) cursor--
+  let verboseNameStart: number | undefined
+  let verboseNameEnd: number | undefined
+  if (source[cursor] === '"' || source[cursor] === "'") {
+    const literalStart = readStringLiteralStart(source, start, cursor)
+    if (literalStart < 0) return null
+    verboseNameStart = literalStart
+    verboseNameEnd = cursor + 1
+    cursor = literalStart - 1
+    while (cursor > start && /\s/.test(source[cursor])) cursor--
+    if (source[cursor] !== ',') return null
+    cursor--
+    while (cursor > start && /\s/.test(source[cursor])) cursor--
+  }
   if (source[cursor] !== ']') return null
   const dependenciesEnd = cursor + 1
   let depth = 1
@@ -132,7 +310,7 @@ function readDefineTail(source: string, start: number, end: number): DefineTail
   // whole numeric literal rather than a run of decimal digits. the factory
   // before it always ends in `}` or `)`, which stops this walk immediately.
   let idStart = idEnd
-  while (idStart > start && /[0-9a-fA-FxX.+\-]/.test(source[idStart - 1])) idStart--
+  while (idStart > start && /[0-9a-fA-FxX.+-]/.test(source[idStart - 1])) idStart--
   const literal = source.slice(idStart, idEnd)
   if (!/^-?(?:0[xXbBoO][0-9a-fA-F]+|\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)$/.test(literal)) {
     return null
@@ -147,6 +325,8 @@ function readDefineTail(source: string, start: number, end: number): DefineTail
     factoryEnd,
     dependenciesStart,
     dependenciesEnd,
+    verboseNameStart,
+    verboseNameEnd,
   }
 }
 
@@ -192,6 +372,9 @@ export function readRNXMetroBundleLayout(source: string): RNXMetroBundleLayout {
       endLineIndex,
       factory: { start: start + '__d('.length, end: tail.factoryEnd },
       dependencies: { start: tail.dependenciesStart, end: tail.dependenciesEnd },
+      ...(tail.verboseNameStart !== undefined && tail.verboseNameEnd !== undefined
+        ? { verboseName: { start: tail.verboseNameStart, end: tail.verboseNameEnd } }
+        : {}),
     })
   }
 
@@ -250,3 +433,14 @@ export function validateRNXMetroModulePaths(
     }
   }
 }
+
+export function validateRNXMetroModuleIdentity(identity: RNXMetroModuleIdentity): void {
+  validateRNXMetroModulePaths(identity.source, identity.modulePaths)
+  for (const moduleId of Object.keys(identity.logicalSpecifiers)) {
+    if (!Object.prototype.hasOwnProperty.call(identity.modulePaths, moduleId)) {
+      throw new Error(
+        `Metro module identity has logical specifiers for unknown module ${moduleId}`,
+      )
+    }
+  }
+}

package/src/runtime-assets.ts

@@ -211,6 +211,11 @@ export function serveRuntimeFile(req: any, res: any, fullPath: string) {
   const stat = fs.statSync(fullPath)
   const lastModified = stat.mtime.toUTCString()
   res.setHeader('content-type', MIME_TYPES[ext] || 'application/octet-stream')
+  if (/^canvaskit-graphite-pipelines-[0-9a-f]{8}\.bin$/.test(path.basename(fullPath))) {
+    res.setHeader('cache-control', 'public, max-age=31536000, immutable')
+    fs.createReadStream(fullPath).pipe(res)
+    return
+  }
   // these urls are STABLE across dev rebuilds and runtime version switches
   // (worker.js, canvaskit-graphite.wasm, the html shells are unhashed), so the
   // browser must revalidate every load — the old year-long immutable here made every