rnxsim 0.1.402 → 0.1.403

package/src/metro-plugin.ts

@@ -24,7 +24,8 @@ import {
   isReplacementModuleRequestUrl,
 } from './host/replacement-module-handler'
 import {
-  createRNXMetroModulePathsFooter,
+  appendRNXMetroModulePathsFooter,
+  toRNXDevelopmentBundleUrl,
   toRNXProductionBundleUrl,
 } from './metro-production-bundle'
 import {
@@ -36,13 +37,10 @@ import {
 } from './runtime-assets'
 
 const prefix = '/__soot'
-export { toRNXProductionBundleUrl }
+export { toRNXDevelopmentBundleUrl, toRNXProductionBundleUrl }
 
 type MetroSerializerGraph = {
   dependencies?: ReadonlyMap<unknown, { path: string }>
-  transformOptions?: {
-    dev?: boolean
-  }
 }
 
 type MetroSerializerOptions = {
@@ -70,6 +68,12 @@ export interface RNXMetroOptions {
    * bundle the app ships and rnx can load it directly.
    */
   productionBundles?: boolean
+  /**
+   * append the `moduleId -> sourcePath` identity footer to every development
+   * bundle. resolution and transforms stay ordinary, while Metro keeps verbose
+   * module names and its source map.
+   */
+  developmentBundles?: boolean
 }
 
 // the slice of metro's config we touch — keeps `T` open for whatever
@@ -130,11 +134,10 @@ function createMetroDefaultSerializer(projectRoot: string): MetroSerializer {
   }
 }
 
-// the only thing rnx adds to a production bundle. Metro drops the fourth `__d`
-// argument when `dev` is false, so nothing in the artifact names its modules;
-// the engine's `__d` trap needs those names to swap react, react-native, and
-// the native-seam packages for its own. the footer restores exactly that, and
-// is inert everywhere else — on a device it assigns one unused global.
+// the only thing rnx adds to an ordinary Metro bundle. production needs the
+// footer because Metro drops the fourth `__d` argument when `dev` is false;
+// development keeps that verbose name and receives the same identity without
+// changing resolution, transforms, or the trailing source map.
 function appendRNXModulePaths(
   result: MetroSerializerResult,
   graph: MetroSerializerGraph,
@@ -144,9 +147,7 @@ function appendRNXModulePaths(
   const dependencies = graph.dependencies
   const createModuleId = options.createModuleId
   if (!dependencies || !createModuleId) {
-    throw new Error(
-      'rnxsim: Metro did not provide the production module graph and createModuleId',
-    )
+    throw new Error('rnxsim: Metro did not provide the module graph and createModuleId')
   }
 
   const modulePaths: Record<string, string> = {}
@@ -156,20 +157,26 @@ function appendRNXModulePaths(
       .replaceAll(path.sep, '/')
   }
   if (Object.keys(modulePaths).length !== dependencies.size) {
-    throw new Error('rnxsim: production module IDs were not unique')
+    throw new Error('rnxsim: bundle module IDs were not unique')
   }
 
-  const footer = createRNXMetroModulePathsFooter(modulePaths)
   return typeof result === 'string'
-    ? result + footer
-    : { ...result, code: result.code + footer }
+    ? appendRNXMetroModulePathsFooter(result, modulePaths)
+    : { ...result, code: appendRNXMetroModulePathsFooter(result.code, modulePaths) }
 }
 
 export function withRNX<T extends Record<string, unknown>>(
   config: T,
   options: RNXMetroOptions = {},
 ): T {
-  if (!options.devServer && !options.open && !options.productionBundles) return config
+  if (
+    !options.devServer &&
+    !options.open &&
+    !options.productionBundles &&
+    !options.developmentBundles
+  ) {
+    return config
+  }
 
   const cfgProjectRoot = (config as MetroConfigWithServer).projectRoot || process.cwd()
   const appName = resolveRnxDesktopAppName(options.open, cfgProjectRoot)
@@ -191,7 +198,7 @@ export function withRNX<T extends Record<string, unknown>>(
   const existingSerializer = cfgSerializer?.customSerializer
   let productionConfig: Partial<MetroConfigWithServer> = {}
 
-  if (options.productionBundles) {
+  if (options.productionBundles || options.developmentBundles) {
     let defaultSerializer: MetroSerializer | undefined
 
     productionConfig = {
@@ -212,10 +219,9 @@ export function withRNX<T extends Record<string, unknown>>(
             graph,
             serializerOptions,
           )
-          // every production build gets the footer, so the artifact the app
-          // already ships is the one rnx loads. a development build keeps
-          // Metro's fourth `__d` argument and needs nothing.
-          return graph.transformOptions?.dev === false
+          const dev = serializerOptions.dev
+          return (dev === false && options.productionBundles === true) ||
+            (dev === true && options.developmentBundles === true)
             ? appendRNXModulePaths(result, graph, serializerOptions, cfgProjectRoot)
             : result
         },

package/src/metro-production-bundle.ts

@@ -4,6 +4,11 @@ export type RNXMetroModulePathMap = Record<string, string>
 export interface RNXMetroModuleIdentity {
   source: string
   modulePaths: RNXMetroModulePathMap
+  /**
+   * 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,6 +24,49 @@ export function toRNXProductionBundleUrl(bundleUrl: string): string {
   return relative ? `${url.pathname}${url.search}${url.hash}` : url.toString()
 }
 
+/**
+ * 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 createRNXMetroModulePathsFooter(
   modulePaths: RNXMetroModulePathMap,
 ): string {
@@ -29,15 +77,34 @@ export function createRNXMetroModulePathsFooter(
   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 appendRNXMetroModulePathsFooter(
+  bundleText: string,
+  modulePaths: RNXMetroModulePathMap,
+): string {
+  const footer = createRNXMetroModulePathsFooter(modulePaths)
+  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 || !withoutMap.endsWith(';')) return null
 
   const parsed: unknown = JSON.parse(
-    bundleText.slice(footerStart + footerPrefix.length, -1),
+    withoutMap.slice(footerStart + footerPrefix.length, -1),
   )
   if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
     return null
@@ -48,7 +115,11 @@ export function readRNXMetroModuleIdentity(
     if (typeof modulePath !== 'string') return null
     modulePaths[moduleId] = modulePath
   }
-  return { source: bundleText.slice(0, footerStart), modulePaths }
+  return {
+    source: withoutMap.slice(0, footerStart),
+    modulePaths,
+    sourceMappingUrl: detached.sourceMappingUrl,
+  }
 }
 
 // the exact layout Metro's baseJSBundle emits and the rnx runtime contract
@@ -67,6 +138,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 +169,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 +210,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
@@ -147,6 +258,8 @@ function readDefineTail(source: string, start: number, end: number): DefineTail
     factoryEnd,
     dependenciesStart,
     dependenciesEnd,
+    verboseNameStart,
+    verboseNameEnd,
   }
 }
 
@@ -192,6 +305,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 } }
+        : {}),
     })
   }
 

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