@sasjs/cli 6.10.1 → 6.12.0

package/build/commands/build/internal/mockSite/assets/runtime-core.js

@@ -207,6 +207,15 @@ const cleanedBase64 = (contents) => {
   return clean
 }
 
+/**
+ * The stored base64 of a byte entry, once it is known to decode: the run's read
+ * of the webout file uses this, so a corrupt entry fails the run that produced it
+ * rather than reaching the worker's decoder without the drive's name in the
+ * message. Drive *reads* go through `driveStore`, which decodes through the same
+ * check.
+ */
+const validateEntry = (contents) => cleanedBase64(contents)
+
 const corruptEntry = () => {
   const error = new Error('Corrupt binary entry on the drive: not valid base64')
   error.status = 500
@@ -973,6 +982,16 @@ const resolveProgram = (program) => {
  */
 const SEEDED_HEADERS = 'content-type: text/html; charset=utf-8\n'
 
+/**
+ * The largest body a single upload may carry.
+ *
+ * A browser worker holds the whole payload in memory, so an oversized upload is
+ * an out-of-memory failure rather than a limit a client can act on. This is the
+ * same 10 MB a deploy allows for one file, and it is checked from the File's
+ * `size` before the body is read.
+ */
+const MAX_UPLOAD_BYTES = 10 * 1024 * 1024
+
 const runProgram = ({ program, code, params = {}, tables = [] }) => {
   const payloadCode = code
   const codePath = program ? resolveProgram(program) : null
@@ -1120,91 +1139,215 @@ return _webout;
   }
 }
 
-const listFolder = (folderPath) => {
-  const abs = folderPath
-    ? P.resolve(
-        DRIVE_APP,
-        String(folderPath)
-          .replace(/^\/+/, '')
-          .replace(new RegExp('^' + APP_LOC + '/'), '')
-      )
-    : DRIVE_APP
-  const alt = folderPath
-    ? P.resolve(DRIVE_ROOT, 'files', String(folderPath).replace(/^\/+/, ''))
-    : DRIVE_APP
-  const target = DIRS.has(abs) ? abs : alt
-  if (!DIRS.has(target) && !FILES.has(target)) {
-    const err = new Error(`Folder doesn't exist.`)
-    err.status = 404
-    throw err
-  }
-  const pre = target === '/' ? '/' : target + '/'
-  const files = []
-  const folders = []
-  for (const k of FILES.keys()) {
-    if (k.startsWith(pre)) {
-      const rest = k.slice(pre.length)
-      if (!rest.includes('/')) files.push(rest)
-    }
-  }
-  for (const d of DIRS) {
-    if (d.startsWith(pre)) {
-      const rest = d.slice(pre.length)
-      if (rest && !rest.includes('/')) folders.push(rest)
-    }
+const DRIVE_FILES = () => `${DRIVE_ROOT}/files`
+
+/**
+ * Writes one entry: bytes stay bytes (behind the base64 marker the drive reads
+ * them back from), a string is text, and the entry is marked for persistence.
+ *
+ * An upload arrives as bytes and is stored as bytes, which is also what the
+ * server does: multer writes the request body to disk and `saveFile` moves that
+ * file, so an uploaded CSV is a byte file there too - a program reading it
+ * without an encoding gets a Buffer on both hosts, and with `'utf8'` a string.
+ * The difference a client actually sees is the content type a download is served
+ * with, and that is decided by the extension on the GET route, as `sendFile`
+ * does on the server.
+ */
+const storeEntry = (abs, data) => {
+  const bytes = asBytes(data)
+  FILES.set(
+    abs,
+    bytes
+      ? BINARY_PREFIX + bytesToBase64(bytes)
+      : encodeText(String(data === undefined || data === null ? '' : data))
+  )
+  SIZES.delete(abs)
+  markDirty(abs)
+}
+
+/**
+ * The ancestor of a path that is itself a file, if there is one.
+ *
+ * `mkdirp` would happily turn `/data/x.csv` into a folder to hold
+ * `/data/x.csv/child`, leaving a path that is a file and has children at the
+ * same time - a state the server never reaches, because the filesystem refuses
+ * it (ENOTDIR). The server answers that with a 500, so this does too: it is a
+ * refusal either way, and reproducing the host failure is the point.
+ */
+const fileAncestorOf = (abs) => {
+  const parts = abs.split('/').filter(Boolean)
+  let acc = ''
+  for (const part of parts.slice(0, -1)) {
+    acc += '/' + part
+    if (FILES.has(acc)) return acc
   }
-  return { files: files.sort(), folders: folders.sort() }
+  return null
 }
 
-const readDriveFile = (filePath) => {
-  const abs = P.resolve(
-    DRIVE_ROOT,
-    'files',
-    String(filePath).replace(/^\/+/, '')
+/**
+ * A drive-relative path - the form the API uses - as the key the map holds.
+ *
+ * The containment test is the storage boundary's own rule, not a second copy of
+ * the API's: `driveStore` is handed out on `self.SASjsMockRuntime`, so a caller
+ * that skips the package can still name `../..` and this must not resolve it out
+ * of the drive. The API refuses such a path first, with the wording a client
+ * sees; reaching this refusal means something bypassed it.
+ */
+const absDrivePath = (driveRelative) => {
+  const relative = String(
+    driveRelative === undefined || driveRelative === null ? '' : driveRelative
   )
-  if (!FILES.has(abs)) {
-    const err = new Error('File not found')
-    err.status = 404
+    .replace(/\\/g, '/')
+    .replace(/^\/+/, '')
+  const root = DRIVE_FILES()
+  const abs = relative ? P.resolve(root, relative) : root
+  if (abs !== root && !abs.startsWith(root + '/')) {
+    const err = new Error(
+      `Can't reach a path outside the drive: ${driveRelative}`
+    )
+    err.status = 400
     throw err
   }
-  const contents = FILES.get(abs)
-  // the host turns a base64 entry back into bytes before it answers with it,
-  // and takes the escape off a text entry. A corrupt entry is refused here, so
-  // the answer is the same error the service gets when it reads the file.
-  return isBinary(contents)
-    ? { contents: validateEntry(contents), binary: true }
-    : { contents: entryText(contents), binary: false }
+  return abs
 }
 
-/** The stored base64 of a byte entry, once it is known to decode. */
-const validateEntry = (contents) => cleanedBase64(contents)
+/** The drive-relative form of an absolute key, for a message a client reads. */
+const driveRelative = (abs) => abs.slice(DRIVE_FILES().length) || '/'
 
-const buildTree = () => {
-  const walk = (dir) => {
-    const node = {
-      name: P.basename(dir) || 'files',
-      relativePath: dir.slice(DRIVE_ROOT.length + '/files'.length),
-      absolutePath: dir,
-      isFolder: true,
-      children: []
+/**
+ * The drive as the API package's storage port.
+ *
+ * `@sasjs/api` owns the drive's *rules* - the statuses, the messages, the order
+ * of the checks, whether a path climbs out of the drive - and asks a host for
+ * eight operations over the bytes. This is those eight over the map above, which
+ * is also what a program running in this host sees through `FS`: a file written
+ * by a service and a file uploaded over HTTP are the same entry.
+ *
+ * Paths arrive drive-relative (`data/x.csv`), the way the API names them; the
+ * drive's own root is added here and never appears in an answer.
+ */
+const driveStore = {
+  async read(drivePath) {
+    const abs = absDrivePath(drivePath)
+    const stored = FILES.get(abs)
+    if (stored === undefined) {
+      // the API checks existence first, so this is a store that was handed a
+      // path it does not hold - refused in the drive's own words rather than
+      // answering undefined
+      const err = new Error(`File doesn't exist.`)
+      err.status = 404
+      throw err
     }
-    node.relativePath = node.relativePath === '' ? '' : node.relativePath
-    for (const child of FS.readdirSync(dir)) {
-      const childAbs = `${dir}/${child}`
-      if (DIRS.has(childAbs)) node.children.push(walk(childAbs))
-      else {
-        node.children.push({
-          name: child,
-          relativePath: childAbs.slice(DRIVE_ROOT.length + '/files'.length),
-          absolutePath: childAbs,
-          isFolder: false,
-          children: []
-        })
+    return isBinary(stored) ? entryBytes(stored) : entryText(stored)
+  },
+
+  async write(drivePath, contents) {
+    const abs = absDrivePath(drivePath)
+    const ancestor = fileAncestorOf(abs)
+    if (ancestor)
+      throw new Error(
+        `ENOTDIR: an ancestor of the path is a file: ${driveRelative(ancestor)}`
+      )
+    mkdirp(P.dirname(abs))
+    storeEntry(abs, contents)
+  },
+
+  async exists(drivePath) {
+    const abs = absDrivePath(drivePath)
+    return FILES.has(abs) || DIRS.has(abs)
+  },
+
+  async stat(drivePath) {
+    const abs = absDrivePath(drivePath)
+    if (DIRS.has(abs)) return { directory: true, size: 0 }
+    if (FILES.has(abs)) return { directory: false, size: entrySizeAt(abs) }
+    const err = new Error(
+      `ENOENT: no such file or directory, stat '${drivePath}'`
+    )
+    err.code = 'ENOENT'
+    throw err
+  },
+
+  async list(drivePath) {
+    const abs = absDrivePath(drivePath)
+    const pre = abs === '/' ? '/' : abs + '/'
+    const files = []
+    const folders = []
+    for (const key of FILES.keys()) {
+      if (!key.startsWith(pre)) continue
+      const rest = key.slice(pre.length)
+      if (rest && !rest.includes('/')) files.push(rest)
+    }
+    for (const dir of DIRS) {
+      if (!dir.startsWith(pre)) continue
+      const rest = dir.slice(pre.length)
+      if (rest && !rest.includes('/')) folders.push(rest)
+    }
+    return { files: files.sort(), folders: folders.sort() }
+  },
+
+  async mkdirp(drivePath) {
+    mkdirp(absDrivePath(drivePath))
+  },
+
+  /**
+   * Removes a file, or a folder with everything under it. The drive is a flat
+   * map of paths, so this is the entries' prefix rather than a directory walk -
+   * and each file it removes is marked dirty (as a deletion) so the page drops
+   * it from IndexedDB too. An empty folder is not represented in the persisted
+   * drive, which is a map of files; see the note on the docs page.
+   */
+  async remove(drivePath) {
+    const abs = absDrivePath(drivePath)
+    if (FILES.has(abs)) {
+      FILES.delete(abs)
+      SIZES.delete(abs)
+      markDirty(abs)
+      return
+    }
+    const prefix = abs + '/'
+    for (const path of [...FILES.keys()]) {
+      if (!path.startsWith(prefix)) continue
+      FILES.delete(path)
+      SIZES.delete(path)
+      markDirty(path)
+    }
+    for (const dir of [...DIRS]) {
+      if (dir === abs || dir.startsWith(prefix)) DIRS.delete(dir)
+    }
+  },
+
+  /** Moves a file, or a folder with everything under it, and marks both ends. */
+  async move(fromPath, toPath) {
+    const from = absDrivePath(fromPath)
+    const to = absDrivePath(toPath)
+    const moveEntry = (source, target) => {
+      FILES.set(target, FILES.get(source))
+      FILES.delete(source)
+      SIZES.delete(source)
+      mkdirp(P.dirname(target))
+      markDirty(target)
+      markDirty(source)
+    }
+
+    if (FILES.has(from)) {
+      moveEntry(from, to)
+      return
+    }
+    if (!DIRS.has(from)) throw new Error(`ENOENT: no such folder '${fromPath}'`)
+
+    const prefix = from + '/'
+    mkdirp(P.dirname(to))
+    for (const dir of [...DIRS]) {
+      if (dir === from || dir.startsWith(prefix)) {
+        DIRS.delete(dir)
+        mkdirp(to + dir.slice(from.length))
       }
     }
-    return node
+    for (const path of [...FILES.keys()]) {
+      if (path.startsWith(prefix)) moveEntry(path, to + path.slice(from.length))
+    }
   }
-  return { status: 'success', tree: walk(`${DRIVE_ROOT}/files`) }
 }
 
 // -------------------------------------------------------------------- boot
@@ -1354,12 +1497,15 @@ const api = {
     bytes: [...FILES.keys()].reduce((total, abs) => total + entrySizeAt(abs), 0)
   }),
   run: (payload) => runProgram(payload),
-  list: (folder) => listFolder(folder),
-  read: (file) => readDriveFile(file),
-  tree: () => buildTree(),
+  // the drive's bytes, for @sasjs/api's services: the rules that decide a
+  // status are the package's, so this host hands over storage and nothing else
+  driveStore,
   // the content type a session's header file is seeded with, so the worker can
   // tell a default from a declaration rather than carrying a second literal
   HEADERS_SEED: SEEDED_HEADERS,
+  // the largest single upload the host accepts, so the worker can refuse a body
+  // before materialising it and the specs and docs read the same number
+  MAX_UPLOAD_BYTES: MAX_UPLOAD_BYTES,
   // the format the snapshot download stamps, so persist.js writes the number
   // this runtime reads rather than a second literal
   DRIVE_FORMAT

package/build/commands/build/internal/mockSite/assets/sw.js

@@ -11,16 +11,34 @@
  * receives the changed files back after every run.
  *
  * TRUST MODEL: this is a single-user, no-auth host. It answers every /SASjsApi/
- * path on the site's origin, runs whatever program the request names, and runs
- * the code a code/execute request carries - the same contract a SASjs server
- * offers, minus the server. Nothing here is a boundary: a page at this origin
- * can already do all of it, because a visitor's own browser is the client. So
- * a site holding anything private, or one served from a shared origin, belongs
- * behind a real server rather than a static host.
+ * path on the site's origin, writes to the drive when a drive request names a
+ * path, runs whatever program the request names, and runs the code a
+ * code/execute request carries - the same contract a SASjs server offers, minus
+ * the server. Nothing here is a boundary: a page at this origin can already do
+ * all of it, because a visitor's own browser is the client. So a site holding
+ * anything private, or one served from a shared origin, belongs behind a real
+ * server rather than a static host.
  */
 importScripts('/host/runtime-core.js')
+importScripts('/host/api-browser.js')
 
 const R = self.SASjsMockRuntime
+
+// @sasjs/api is the package sasjs/server answers with: the drive's rules - the
+// statuses, the messages, the order of the checks - are its, and this worker is
+// one of its two hosts. `HANDLED_ROUTES` is what it answers today, so the routes
+// below are the ones this host still owns (info, the program routes, session).
+const SASJS_API = self.SASjsApi
+const DRIVE_SERVICES = { drive: SASJS_API.createDriveService(R.driveStore) }
+// The services above are the drive's, so only the drive's operations are
+// dispatched: a route the package adds outside /SASjsApi/drive/ would otherwise
+// be sent to a host that has no service behind it, instead of falling through to
+// the routes below that this worker owns (info, the program routes, session).
+const DRIVE_ROUTES = new Set(
+  SASJS_API.HANDLED_ROUTES.filter((id) =>
+    id.split(' ')[1].includes('/SASjsApi/drive/')
+  )
+)
 const LOGS_SEPARATOR = 'SASJS_LOGS_SEPARATOR_163ee17b6ff24f028928972d80a26784'
 
 self.addEventListener('install', () => self.skipWaiting())
@@ -107,7 +125,7 @@ const parseHeaders = (content) => {
  * so the value is taken from it rather than repeated here: a byte body that
  * carries only this type is an undeclared download, not a text/html one.
  */
-const SEEDED_HEADERS = String(R.HEADERS_SEED)
+const SEEDED_HEADER_LINE = String(R.HEADERS_SEED)
 
 /**
  * The reply a run produces: the webout, in the shape and under the name the
@@ -126,7 +144,7 @@ const weboutResponse = (result, debug) => {
     // declares nothing: it keeps the type an undeclared download gets. Compared as
     // the raw text rather than as the parsed value, so a service that declares
     // this same content type itself keeps it - only the untouched seed is dropped.
-    if (String(result.headers) === SEEDED_HEADERS)
+    if (String(result.headers) === SEEDED_HEADER_LINE)
       delete headers['content-type']
     if (!headers['content-type'])
       headers['content-type'] = 'application/octet-stream'
@@ -173,6 +191,128 @@ const readPayload = async (request) => {
   return { params: body.params || {}, tables: body.tables || [], json: body }
 }
 
+// ---------------------------------------------------------------- requests
+/** A request body as JSON, and {} when it is not JSON - a client that posts a
+ * form where the route wants JSON gets the missing-field answer rather than a
+ * parse error. */
+const readJson = async (request) => {
+  try {
+    return (await request.json()) || {}
+  } catch (e) {
+    return {}
+  }
+}
+
+const badRequest = (message) => {
+  const error = new Error(message)
+  error.status = 400
+  return error
+}
+
+const payloadTooLarge = (limit) => {
+  const error = new Error(
+    `The upload is larger than the browser host allows (${Math.round(
+      limit / (1024 * 1024)
+    )} MB).`
+  )
+  error.status = 413
+  return error
+}
+
+/** The bytes of an uploaded file, from the multipart field the API names. */
+const uploadBytes = async (request) => {
+  const form = await request.formData().catch(() => null)
+  const upload = form && form.get('file')
+  if (!upload || typeof upload === 'string')
+    throw badRequest('"file" is not present.')
+  // refused from the File's size, before the body is read: a worker holds the
+  // whole payload in memory, so an oversized upload there is an out-of-memory
+  // failure rather than an answer a client can act on
+  if (typeof upload.size === 'number' && upload.size > R.MAX_UPLOAD_BYTES)
+    throw payloadTooLarge(R.MAX_UPLOAD_BYTES)
+  const target = form.get('filePath')
+  return {
+    name: upload.name,
+    bytes: new Uint8Array(await upload.arrayBuffer()),
+    filePath: target === null ? undefined : target
+  }
+}
+
+/**
+ * The content type `sendFile` would answer with for this path - by extension,
+ * because that is what express does, and because a byte entry would otherwise be
+ * served as `application/octet-stream` however text-like it is.
+ */
+const CONTENT_TYPES = {
+  '.csv': 'text/csv',
+  '.json': 'application/json',
+  '.sas': 'text/plain',
+  '.txt': 'text/plain',
+  '.log': 'text/plain',
+  '.html': 'text/html',
+  '.htm': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.zip': 'application/zip',
+  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.xls': 'application/vnd.ms-excel',
+  '.pdf': 'application/pdf',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml'
+}
+
+const contentTypeFor = (filePath, binary) => {
+  const name = String(filePath || '').toLowerCase()
+  const dot = name.lastIndexOf('.')
+  const known = dot > 0 ? CONTENT_TYPES[name.slice(dot)] : undefined
+  if (known) return known
+  return binary ? 'application/octet-stream' : 'text/plain'
+}
+
+/**
+ * One drive operation, answered by the package.
+ *
+ * The transport stays here - a Request is not an ApiRequest, and a multipart body
+ * has to be read before anything can look at it - and the decisions are the
+ * package's. A write is followed by `persistChanges()` because the worker can be
+ * terminated between requests: the answer is only durable once the page has put
+ * it in IndexedDB.
+ */
+const driveRoute = async (route, request, query) => {
+  const apiRequest = { query }
+  const contentType = request.headers.get('content-type') || ''
+
+  if (request.method === 'POST' || request.method === 'PATCH') {
+    if (contentType.includes('multipart/form-data')) {
+      const upload = await uploadBytes(request)
+      apiRequest.file = { name: upload.name, contents: upload.bytes }
+      if (upload.filePath !== undefined)
+        apiRequest.body = { filePath: upload.filePath }
+    } else {
+      // the routes that take their paths as JSON: folder create, rename
+      apiRequest.body = await readJson(request)
+    }
+  }
+
+  const answer = await SASJS_API.dispatch(DRIVE_SERVICES, route.id, apiRequest)
+  if (request.method !== 'GET') await persistChanges()
+
+  // the one route that answers with the file itself rather than JSON
+  if (answer.contents !== undefined) {
+    const binary = typeof answer.contents !== 'string'
+    return new Response(answer.contents, {
+      status: answer.status,
+      headers: {
+        'content-type': contentTypeFor(query._filePath, binary)
+      }
+    })
+  }
+  return json(answer.body, answer.status)
+}
+
 const handle = async (request, url) => {
   const path = url.pathname.replace(/\/+$/, '')
   const query = {}
@@ -191,22 +331,12 @@ const handle = async (request, url) => {
       })
     }
 
-    if (path.endsWith('/SASjsApi/drive/folder')) {
-      return json(await R.list(query._folderPath || ''))
-    }
-
-    if (path.endsWith('/SASjsApi/drive/filetree')) {
-      return json(R.tree())
-    }
-
-    if (path.endsWith('/SASjsApi/drive/file') && request.method === 'GET') {
-      const file = R.read(query._filePath || '')
-      return file.binary
-        ? new Response(toBytes(file.contents), {
-            headers: { 'content-type': 'application/octet-stream' }
-          })
-        : text(file.contents)
-    }
+    // the nine drive operations are the package's, matched off its own table
+    // rather than a suffix chain, so a path this host does not own falls through
+    // to its routes below instead of being answered twice
+    const matched = SASJS_API.findRoute(request.method, path)
+    if (matched && DRIVE_ROUTES.has(matched.route.id))
+      return await driveRoute(matched.route, request, query)
 
     if (
       path.endsWith('/SASjsApi/stp/execute') ||
@@ -252,6 +382,12 @@ const handle = async (request, url) => {
   } catch (e) {
     const message = (e && e.stack) || String(e)
     broadcast({ type: 'sasjs-host-error', path, message })
+    // A drive refusal is the message itself, in plain text: the server answers
+    // these with `res.status(code).send(err.message)`, and its own suite asserts
+    // `res.text`. The other routes answer JSON, because a program failure
+    // carries more than a message (`status`, `error`), so they keep the envelope.
+    if (path.includes('/SASjsApi/drive/') && e && e.status)
+      return text((e && e.message) || String(e), e.status)
     return json(
       { message: (e && e.message) || String(e) },
       (e && e.status) || 500

package/build/commands/build/internal/mockSite/mockSite.js

@@ -100,6 +100,21 @@ exports.WEBOUT_SENTINELS = {
     apiServerUrl: '__SASJS_WEBOUT_APIURL__'
 };
 var ASSETS_FOLDER = path_1.default.join(__dirname, 'assets');
+/**
+ * The browser build of @sasjs/api, from the installed package rather than a copy
+ * in this folder: the worker answers the drive with the same rules sasjs/server
+ * does, so the version that ships is the version the CLI resolves - and a stale
+ * second copy is exactly the drift the package exists to remove.
+ *
+ * The path is walked from `require.resolve` because `exports` in @sasjs/api
+ * exposes only the package root - `require.resolve('@sasjs/api/browser.js')`
+ * fails with ERR_PACKAGE_PATH_NOT_EXPORTED, and no subpath can reach
+ * `build/browser.js`. The walk lands on that file only while `main` stays
+ * `build/cjs/index.js`; a change to `main` or `exports` in the package repoints
+ * it silently, so a missing file is reported by name rather than as a bare
+ * ENOENT three levels up.
+ */
+var API_BROWSER_BUILD = path_1.default.join(path_1.default.dirname(require.resolve('@sasjs/api')), '..', '..', 'build', 'browser.js');
 var toPosix = function (value) { return value.split(path_1.default.sep).join('/'); };
 var listFiles = function (folder, base) {
     var e_1, _a;
@@ -417,6 +432,15 @@ function buildMockSite(target) {
                         throw new Error("No .js programs in ".concat(buildFolder, "/services, /jobs or /tests. This target builds SAS code, which cannot run in a browser. ") +
                             'Build a target whose services are JavaScript (typically a mocks project).');
                     }
+                    // The package supplies the drive rules the worker answers with, so an install
+                    // without its browser build is a build that cannot run. Checked here, with the
+                    // other refusals, so a missing dependency leaves the previous site in place -
+                    // and named, rather than a bare ENOENT from a path three levels up.
+                    if (!fs_1.default.existsSync(API_BROWSER_BUILD)) {
+                        throw new Error("The @sasjs/api browser build is missing: expected it at ".concat(API_BROWSER_BUILD, ". ") +
+                            'Reinstall dependencies (npm ci) so the package that ships the drive rules is present, ' +
+                            'or check that @sasjs/api still publishes build/browser.js.');
+                    }
                     if (skipped.length) {
                         (_h = process.logger) === null || _h === void 0 ? void 0 : _h.warn("Left ".concat(skipped.length, " file(s) off the mock drive, over the ").concat(megabytes(exports.MAX_BINARY_SEED_BYTES), " per-file or ").concat(megabytes(exports.MAX_SEED_BYTES), " total the browser build seeds: ") +
                             "".concat(skipped
@@ -454,6 +478,7 @@ function buildMockSite(target) {
                         }
                         finally { if (e_6) throw e_6.error; }
                     }
+                    fs_1.default.copyFileSync(API_BROWSER_BUILD, path_1.default.join(hostFolder, 'api-browser.js'));
                     // sw.js sits at the site root: a worker can only control the folder it is
                     // served from, and the app has to be controlled from /
                     fs_1.default.copyFileSync(path_1.default.join(ASSETS_FOLDER, 'sw.js'), path_1.default.join(outputFolder, 'sw.js'));
@@ -473,7 +498,13 @@ function buildMockSite(target) {
                         })
                     }));
                     hostVersion = (0, crypto_1.createHash)('md5')
-                        .update(['runtime-core.js', 'persist.js', 'intercept.js', 'webout-prelude.json']
+                        .update([
+                        'runtime-core.js',
+                        'persist.js',
+                        'intercept.js',
+                        'api-browser.js',
+                        'webout-prelude.json'
+                    ]
                         .map(function (asset) { return fs_1.default.readFileSync(path_1.default.join(hostFolder, asset)); })
                         .reduce(function (all, buf) { return Buffer.concat([all, buf]); }, Buffer.alloc(0)))
                         .digest('hex')
@@ -481,7 +512,8 @@ function buildMockSite(target) {
                     swPath = path_1.default.join(outputFolder, 'sw.js');
                     fs_1.default.writeFileSync(swPath, fs_1.default
                         .readFileSync(swPath, 'utf8')
-                        .replace("importScripts('/host/runtime-core.js')", "importScripts('/host/runtime-core.js?v=".concat(hostVersion, "')")));
+                        .replace("importScripts('/host/runtime-core.js')", "importScripts('/host/runtime-core.js?v=".concat(hostVersion, "')"))
+                        .replace("importScripts('/host/api-browser.js')", "importScripts('/host/api-browser.js?v=".concat(hostVersion, "')")));
                     snapshotSource = path_1.default.join(buildFolder, 'mock-snapshot.json');
                     hasSnapshot = fs_1.default.existsSync(snapshotSource);
                     if (hasSnapshot) {