@sasjs/cli 6.30.0 → 6.30.1

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

@@ -37,7 +37,6 @@
  */
 importScripts('host/runtime-core.js')
 importScripts('host/api-browser.js')
-importScripts('host/lint-browser.js')
 
 const R = self.SASjsMockRuntime
 
@@ -47,10 +46,6 @@ const R = self.SASjsMockRuntime
 // and the few capabilities a static origin does not have, which the package
 // reports as a 501 naming the missing service.
 const API = self.SASjsApi
-// The linter, bundled at build time from the installed @sasjs/api/code and
-// @sasjs/lint (see mockSite.ts). It is a separate script because the linter is
-// not part of the root package a service worker can import.
-const CODE = self.SASjsCode
 
 const DRIVE_STORE = R.driveStore
 
@@ -968,6 +963,53 @@ const homeService = API.createHomeService(async () => {
  */
 const LINT_CONFIG_FILE = '.sasjslint'
 
+/**
+ * The linter, bundled at build time from the installed @sasjs/api/code and
+ * @sasjs/lint (see mockSite.ts).
+ *
+ * Imported on the first code route rather than by the worker at boot: it is
+ * around 40KB of the worker's payload for two routes (`code/lint` and
+ * `code/format`), and the install has to finish before the page may make its
+ * first request - so every visit pays it, including the ones that never open the
+ * editor. The build stamps the version into the URL below, so the copy fetched
+ * here is cache-busted with the rest of the host.
+ */
+let codeService
+let linter
+
+const code = () => {
+  if (codeService) return codeService
+  importScripts('host/lint-browser.js')
+  linter = self.SASjsCode
+  codeService = linter.createCodeService({ lintConfig })
+  return codeService
+}
+
+/**
+ * The package's code service, resolved on first use.
+ *
+ * A proxy rather than an object listing `lint` and `format`: the package decides
+ * which methods a service has, and a facade would answer `undefined` for one a
+ * later version adds. Dispatch reads `services.code` once per request and only
+ * touches a method on a code route, so nothing below the first method access
+ * loads the linter.
+ */
+const lazyCode = () =>
+  new Proxy(
+    {},
+    {
+      get: (target, property) => {
+        // probing for a promise is not a method lookup: answering it must not
+        // pull 40KB
+        if (typeof property === 'symbol' || property === 'then')
+          return undefined
+        const service = code()
+        const value = service[property]
+        return typeof value === 'function' ? value.bind(service) : value
+      }
+    }
+  )
+
 const lintConfig = async (filePath) => {
   // A path that escapes the drive has no folder to walk from, and a buffer that
   // names no file has none either: both take the drive root's rules, which is
@@ -977,9 +1019,14 @@ const lintConfig = async (filePath) => {
   for (;;) {
     const configPath =
       folder === '/' ? `/${LINT_CONFIG_FILE}` : `${folder}/${LINT_CONFIG_FILE}`
-    const contents = await DRIVE_STORE.read(configPath).catch(() => null)
+    const contents = await DRIVE_STORE.read(configPath).catch((e) => {
+      // a piece that is still on the site is not a folder with no rules file:
+      // swallowing it here would lint against the defaults and never fetch it
+      if (e && e.code === R.PENDING_CODE) throw e
+      return null
+    })
     const parsed = parseLintConfig(contents)
-    if (parsed) return new CODE.LintConfig(parsed)
+    if (parsed) return new linter.LintConfig(parsed)
     if (folder === '/') return undefined
     folder = API.dirname(folder)
   }
@@ -1026,7 +1073,7 @@ const SERVICES = {
   // own rules: a buffer is linted and formatted against the nearest
   // `.sasjslint` at or above its folder, so editing that file changes the
   // editor here exactly as it does on a server
-  code: CODE.createCodeService({ lintConfig })
+  code: lazyCode()
 }
 
 /** The routes this host performs itself, because the answer is not JSON. */
@@ -1355,6 +1402,15 @@ const subjectOf = async (request, query) => {
  * `_debug` means - is still the package's decision.
  */
 const runRoute = async (routeId, payload, subject) => {
+  // A program may read any file it likes - the drive is its filesystem - so
+  // every piece of a sharded drive is fetched here rather than guessed from the
+  // request. That is deliberately the whole drive and not just the app being
+  // run: replaying a program because a read failed would run its writes twice,
+  // so the safe choice costs the download of every other app's bundle the first
+  // time anything runs on a cold visit. A page that only lists apps never pays
+  // it; the saving this change is for is on that page.
+  await R.ensureAll()
+
   const query = payload.query
   const body = payload.body
   const tables = payload.files.map((file) => ({
@@ -1446,7 +1502,38 @@ const contentsResponse = (answer, path) => {
   })
 }
 
-const routeRequest = async (request, url) => {
+/**
+ * The shards a request names, fetched before it is answered.
+ *
+ * The drive of a sharded site is not in memory: the build splits a capture so a
+ * first page does not download every app's bundle, and a route that reads a path
+ * has to ask for the piece holding it. The two query parameters below are where
+ * a request names a path outright, which is the common case and the cheap one -
+ * whatever a route resolves from the drive itself is left to the retry in
+ * `routeRequest`, which knows the path from the read that failed rather than
+ * guessing at it from the URL.
+ */
+const ensureForRequest = async (url) => {
+  const paths = []
+  for (const name of ['_filePath', '_program']) {
+    const value = url.searchParams.get(name)
+    if (value) paths.push(value)
+  }
+  if (paths.length) await R.ensurePaths(paths)
+}
+
+/**
+ * One attempt at a request, with the body source a retry can copy again.
+ *
+ * A Request's body can only be read once, and a retry (see the catch below) is a
+ * second read of the same request - so the first attempt keeps an unread copy
+ * beside it and every attempt after that is made from a copy of the copy. Only a
+ * request with a body needs one, and `source` is what carries it through the
+ * recursion.
+ */
+const routeRequest = async (request, url, attempts = 0, source = null) => {
+  const hasBody = request.method !== 'GET' && request.method !== 'HEAD'
+  const replay = hasBody ? source || request.clone() : null
   const path = withoutBase(url.pathname).replace(/\/+$/, '') || '/'
   // `/api` is the short spelling of the API, and `/SASjsApi` the canonical one:
   // both are answered, so the alias is stripped once here and everything below -
@@ -1462,6 +1549,7 @@ const routeRequest = async (request, url) => {
     // (a static asset fetch raced by an API call) must not answer as nobody
     await ensureIdentity()
     await R.ensureReady()
+    await ensureForRequest(url)
 
     // The app stream is the server's own web surface rather than part of the
     // API: the listing, the landing page and the redirect from one to the other
@@ -1577,6 +1665,20 @@ const routeRequest = async (request, url) => {
       )
     return json(answer.body, answer.status)
   } catch (e) {
+    // A read of a file that is still on the site: the route reached a path the
+    // request did not name - an app asset, a `.sasjslint` above the edited file,
+    // a join a service resolves from the drive. The failure names the path, so
+    // the first attempt fetches exactly that piece; a second one in the same
+    // request means it wants more than one, so the rest of the drive comes in.
+    // Bounded, because a refusal that keeps repeating is a real one.
+    if (e && e.code === R.PENDING_CODE && attempts < 2) {
+      if (!attempts && e.path) await R.ensurePaths([e.path])
+      else await R.ensureAll()
+      // a fresh copy per attempt: the one this attempt read is spent
+      const next = replay ? replay.clone() : request
+      return await routeRequest(next, url, attempts + 1, replay)
+    }
+
     const message = (e && e.stack) || String(e)
     const status = (e && e.status) || 500
     const refusal = status >= 400 && status < 500
@@ -1681,7 +1783,7 @@ self.addEventListener('message', (event) => {
     case 'sasjs-load':
       event.waitUntil(
         bootIdentity(data)
-          .then(() => R.load(data.files || {}))
+          .then(() => R.load(data.files || {}, data.deleted || []))
           .then(async () => {
             await persistChanges()
             reply({
@@ -1844,7 +1946,22 @@ self.addEventListener('message', (event) => {
     }
 
     case 'sasjs-snapshot':
-      reply({ type: 'sasjs-snapshot', files: R.dumpAll() })
+      // a sharded drive is not all in memory, and the caller is exporting it -
+      // for persistence after a change, or as `mock-snapshot.json` for the next
+      // build. Whole means whole: the pieces nobody read are fetched first, or
+      // the export would quietly lose every app bundle it had not opened.
+      event.waitUntil(
+        R.ensureReady()
+          .then(() => R.ensureAll())
+          .then(() => reply({ type: 'sasjs-snapshot', files: R.dumpAll() }))
+          .catch((e) =>
+            reply({
+              type: 'sasjs-snapshot',
+              files: R.dumpAll(),
+              error: (e && e.message) || String(e)
+            })
+          )
+      )
       break
 
     case 'sasjs-stats':

package/build/commands/build/internal/mockSite/mockSite.d.ts

@@ -9,6 +9,11 @@ export interface MockSiteResult {
     webFileCount: number;
     /** True when a captured drive snapshot was shipped with the site. */
     snapshot: boolean;
+    /**
+     * How many pieces the captured drive ships in: the boot shard plus one per
+     * large folder or file. Zero when the site ships no snapshot.
+     */
+    snapshotShards: number;
     /** True when a recorded SAS session was shipped, for .sas runs to answer. */
     sasTranscript: boolean;
     /**
@@ -64,6 +69,24 @@ export declare const MAX_SEED_BYTES: number;
  * marker format changes.
  */
 export declare const DRIVE_FORMAT = 1;
+/**
+ * The size at which a captured file is fetched on its own rather than with its
+ * folder.
+ *
+ * A shard is a download the visitor waits for, and an app's folder holds both
+ * its bundles and the small files a listing shows - its logo, a config. Splitting
+ * on size keeps one from dragging the other: the tile asks for the folder's small
+ * files, the app's own page asks for the bundle.
+ */
+export declare const SHARD_FILE_BYTES: number;
+/**
+ * The size below which a folder's files ride in the boot shard.
+ *
+ * The boot shard is fetched before the first page renders, so it is paid by every
+ * visit. Folders under this size are cheaper there than as a request of their
+ * own; folders over it are only fetched when something reads them.
+ */
+export declare const SHARD_GROUP_BYTES: number;
 /**
  * Builds a static site that runs the project's JS services (its mocks) in the
  * browser, so a frontend can be tested with no server and no SAS.

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

@@ -79,7 +79,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DRIVE_FORMAT = exports.MAX_SEED_BYTES = exports.MAX_BINARY_SEED_BYTES = exports.buildLintBundle = exports.WEBOUT_SENTINELS = void 0;
+exports.SHARD_GROUP_BYTES = exports.SHARD_FILE_BYTES = exports.DRIVE_FORMAT = exports.MAX_SEED_BYTES = exports.MAX_BINARY_SEED_BYTES = exports.buildLintBundle = exports.WEBOUT_SENTINELS = void 0;
 exports.buildMockSite = buildMockSite;
 var crypto_1 = require("crypto");
 var fs_1 = __importDefault(require("fs"));
@@ -512,6 +512,137 @@ var countPrograms = function (files, extension) {
         return inProgramFolder && key.toLowerCase().endsWith(extension);
     }).length;
 };
+/**
+ * The size at which a captured file is fetched on its own rather than with its
+ * folder.
+ *
+ * A shard is a download the visitor waits for, and an app's folder holds both
+ * its bundles and the small files a listing shows - its logo, a config. Splitting
+ * on size keeps one from dragging the other: the tile asks for the folder's small
+ * files, the app's own page asks for the bundle.
+ */
+exports.SHARD_FILE_BYTES = 256 * 1024;
+/**
+ * The size below which a folder's files ride in the boot shard.
+ *
+ * The boot shard is fetched before the first page renders, so it is paid by every
+ * visit. Folders under this size are cheaper there than as a request of their
+ * own; folders over it are only fetched when something reads them.
+ */
+exports.SHARD_GROUP_BYTES = 64 * 1024;
+/** The folder a captured path is grouped under: its first three segments. */
+var shardFolderFor = function (filePath) {
+    var prefix = '/sasjs/drive/files/';
+    if (!filePath.startsWith(prefix))
+        return path_1.default.dirname(filePath);
+    var parts = filePath.slice(prefix.length).split('/');
+    // a file at the drive root groups with the other root files, which is where
+    // the index, the linter rules and a project's configs live
+    return (prefix +
+        parts
+            .slice(0, Math.max(0, parts.length - 1))
+            .slice(0, 3)
+            .join('/'));
+};
+/**
+ * Splits a captured drive into a boot shard and the pieces fetched on demand.
+ *
+ * A site that ships its whole drive as one file makes every visitor download all
+ * of it before the first page renders - on a demonstration site that is every
+ * app's bundle, behind a list of tiles that names them. The split is by what a
+ * page reads, not by what the drive holds:
+ *
+ * - a file at or over `SHARD_FILE_BYTES` gets a shard of its own;
+ * - the rest are grouped by folder, and a folder under `SHARD_GROUP_BYTES` joins
+ *   the boot shard (id 0), so no visit pays a round trip for a logo;
+ * - everything over it becomes a shard, fetched when a path in it is read.
+ *
+ * The index carries every path with its shard and byte count, so a listing, a
+ * stat and an existence check answer for the whole drive with nothing fetched.
+ */
+var shardSnapshot = function (files) {
+    var e_7, _a, e_8, _b, _c;
+    var paths = Object.keys(files).sort();
+    var bytesOf = function (filePath) {
+        return Buffer.byteLength(String(files[filePath]));
+    };
+    var groups = new Map();
+    try {
+        for (var paths_1 = __values(paths), paths_1_1 = paths_1.next(); !paths_1_1.done; paths_1_1 = paths_1.next()) {
+            var filePath = paths_1_1.value;
+            var big = bytesOf(filePath) >= exports.SHARD_FILE_BYTES;
+            var key = big ? "file:".concat(filePath) : "dir:".concat(shardFolderFor(filePath));
+            groups.set(key, (groups.get(key) || []).concat(filePath));
+        }
+    }
+    catch (e_7_1) { e_7 = { error: e_7_1 }; }
+    finally {
+        try {
+            if (paths_1_1 && !paths_1_1.done && (_a = paths_1.return)) _a.call(paths_1);
+        }
+        finally { if (e_7) throw e_7.error; }
+    }
+    var shards = [{ paths: [], bytes: 0 }];
+    try {
+        for (var _d = __values(__spreadArray([], __read(groups.keys()), false).sort()), _e = _d.next(); !_e.done; _e = _d.next()) {
+            var key = _e.value;
+            var members = groups.get(key);
+            var bytes = members.reduce(function (total, filePath) { return total + bytesOf(filePath); }, 0);
+            var ridesInBoot = key.startsWith('dir:') && bytes <= exports.SHARD_GROUP_BYTES;
+            if (ridesInBoot) {
+                (_c = shards[0].paths).push.apply(_c, __spreadArray([], __read(members), false));
+                shards[0].bytes += bytes;
+                continue;
+            }
+            shards.push({ paths: members, bytes: bytes });
+        }
+    }
+    catch (e_8_1) { e_8 = { error: e_8_1 }; }
+    finally {
+        try {
+            if (_e && !_e.done && (_b = _d.return)) _b.call(_d);
+        }
+        finally { if (e_8) throw e_8.error; }
+    }
+    var entries = {};
+    shards.forEach(function (shard, id) {
+        var e_9, _a;
+        try {
+            for (var _b = __values(shard.paths), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var filePath = _c.value;
+                entries[filePath] = { shard: id, bytes: bytesOf(filePath) };
+            }
+        }
+        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_9) throw e_9.error; }
+        }
+    });
+    return {
+        index: {
+            format: exports.DRIVE_FORMAT,
+            sharded: true,
+            boot: 0,
+            files: paths.length,
+            entries: entries,
+            shards: shards.map(function (shard, id) { return ({
+                id: id,
+                file: "host/vfs-snapshot-".concat(id, ".json"),
+                bytes: shard.bytes,
+                files: shard.paths.length
+            }); })
+        },
+        shards: shards.map(function (shard, id) { return ({
+            id: id,
+            file: "vfs-snapshot-".concat(id, ".json"),
+            bytes: shard.bytes,
+            files: Object.fromEntries(shard.paths.map(function (filePath) { return [filePath, files[filePath]]; }))
+        }); })
+    };
+};
 /** The script-tag attributes that change how an app's script runs. */
 var REPLAYED_ATTRIBUTES = {
     type: 'type',
@@ -520,6 +651,20 @@ var REPLAYED_ATTRIBUTES = {
     integrity: 'integrity',
     nomodule: 'noModule'
 };
+/**
+ * Script types a preload may name.
+ *
+ * The loader only re-runs a tag once the worker controls the page, so without a
+ * hint the app's bundle is not requested until the install has finished - the
+ * largest asset on the site behind the largest prerequisite. A preload link
+ * executes nothing, so the download can start while the worker is still
+ * installing.
+ *
+ * `module` is excluded on purpose: a module is fetched with different
+ * credentials semantics from a classic script, so `as="script"` does not match
+ * the later tag and the file is fetched twice - slower than no hint at all.
+ */
+var PRELOADABLE_TYPES = ['', 'text/javascript', 'application/javascript'];
 var parseAttributes = function (source) {
     var _a, _b, _c;
     var attributes = {};
@@ -538,6 +683,45 @@ var escapeAttribute = function (value) {
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;');
 };
+/** Puts markup at the end of the head, or leaves the page alone when it has none. */
+var insertIntoHead = function (html, markup) {
+    var head = /<head(\s[^>]*)?>/i.exec(html);
+    if (!head)
+        return html;
+    var start = head.index + head[0].length;
+    var close = html.toLowerCase().indexOf('</head>', start);
+    var at = close < 0 ? start : close;
+    return html.slice(0, at) + markup + html.slice(at);
+};
+/**
+ * Hints the app scripts the loader will replay, so their download starts while
+ * the worker installs rather than after it.
+ *
+ * Only scripts this build owns are hinted - the file has to be in the output for
+ * the version query to be meaningful - and only classic ones. A `type="module"`
+ * tag is fetched with different credentials semantics, so an `as="script"`
+ * preload does not match it; and a cross-origin src would need `crossorigin` on
+ * the hint to match its tag. Either mismatch fetches the file twice, which is
+ * worse than no hint.
+ */
+var preloadHints = function (scripts, outputFolder) {
+    return scripts
+        .filter(function (script) {
+        if (!script.src)
+            return false;
+        if (!PRELOADABLE_TYPES.includes((script.type || '').trim().toLowerCase()))
+            return false;
+        if (script.crossOrigin)
+            return false;
+        if (/^([a-z]+:)?\/\//i.test(script.src))
+            return false;
+        if (!outputFolder)
+            return true;
+        var pathname = script.src.split('?')[0];
+        return fs_1.default.existsSync(path_1.default.join(outputFolder, pathname.replace(/^(\.\/|\/)/, '')));
+    })
+        .map(function (script) { return "<link rel=\"preload\" as=\"script\" href=\"".concat(script.src, "\" />"); });
+};
 /**
  * The boot loader is a FILE rather than an inline script: an app with a strict
  * Content-Security-Policy (`default-src 'self'`, no `unsafe-inline`) refuses an
@@ -714,7 +898,7 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
     var early = [];
     var tagPattern = /<script\b([^>]*)>([\s\S]*?)<\/script>[ \t]*\r?\n?/gi;
     patched = patched.replace(tagPattern, function (tag, source, body) {
-        var e_7, _a;
+        var e_10, _a;
         var attributes = parseAttributes(source);
         var type = (attributes.type || '').trim().toLowerCase();
         var inlined = !attributes.src;
@@ -753,12 +937,12 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
                 spec[name_2] = attribute === 'nomodule' ? 'true' : attributes[attribute];
             }
         }
-        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+        catch (e_10_1) { e_10 = { error: e_10_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_7) throw e_7.error; }
+            finally { if (e_10) throw e_10.error; }
         }
         scripts.push(spec);
         return '';
@@ -767,6 +951,9 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
         var versioned = outputFolder
             ? versionScripts(scripts, outputFolder)
             : scripts;
+        var hints = preloadHints(versioned, outputFolder);
+        if (hints.length)
+            patched = insertIntoHead(patched, hints.join(''));
         var tag_1 = bootTag(versioned, version, basePath);
         // a function, not a replacement string: the tag carries the page's own srcs
         // in `data-scripts`, and a `$&` in one would expand to the matched markup
@@ -837,11 +1024,11 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
  */
 function buildMockSite(target) {
     return __awaiter(this, void 0, void 0, function () {
-        var projectDir, appLocRaw, appLoc, buildFolder, basePath, webSourceRaw, webFolder, outputFolder, streamConfig, excluded, _a, seed, skipped, jsPrograms, sasPrograms, driveEntries, identity, webFileCount, hostFolder, _b, _c, asset, hostVersion, buildStamp, swPath, snapshotSource, hasSnapshot, transcriptSource, hasTranscript, indexPath, _d, patched, warnings;
-        var e_8, _e;
-        var _f, _g, _h, _j, _k, _l;
-        return __generator(this, function (_m) {
-            switch (_m.label) {
+        var projectDir, appLocRaw, appLoc, buildFolder, basePath, webSourceRaw, webFolder, outputFolder, streamConfig, excluded, _a, seed, skipped, jsPrograms, sasPrograms, driveEntries, identity, webFileCount, hostFolder, _b, _c, asset, hostVersion, buildStamp, swPath, snapshotSource, hasSnapshot, snapshotShards, capture, files, split, _d, _e, shard, transcriptSource, hasTranscript, indexPath, _f, patched, warnings;
+        var e_11, _g, e_12, _h;
+        var _j, _k, _l, _m, _o, _p;
+        return __generator(this, function (_q) {
+            switch (_q.label) {
                 case 0:
                     projectDir = process.projectDir || process.cwd();
                     appLocRaw = target.appLoc;
@@ -853,24 +1040,24 @@ function buildMockSite(target) {
                         path_1.default.join(projectDir, 'sasjsbuild');
                     return [4 /*yield*/, (0, utils_1.folderExists)(buildFolder)];
                 case 1:
-                    if (!(_m.sent())) {
+                    if (!(_q.sent())) {
                         throw new Error("Build folder not found: ".concat(buildFolder, ". Run `sasjs compile` first."));
                     }
-                    basePath = normaliseBasePath((_f = target.streamConfig) === null || _f === void 0 ? void 0 : _f.mockWebBasePath);
-                    webSourceRaw = (_g = target.streamConfig) === null || _g === void 0 ? void 0 : _g.webSourcePath;
+                    basePath = normaliseBasePath((_j = target.streamConfig) === null || _j === void 0 ? void 0 : _j.mockWebBasePath);
+                    webSourceRaw = (_k = target.streamConfig) === null || _k === void 0 ? void 0 : _k.webSourcePath;
                     if (!webSourceRaw) {
                         throw new Error('No built web app. Set streamConfig.webSourcePath on the target (for example ./client/dist), and build the frontend first.');
                     }
                     webFolder = path_1.default.resolve(projectDir, webSourceRaw);
                     return [4 /*yield*/, (0, utils_1.folderExists)(webFolder)];
                 case 2:
-                    if (!(_m.sent())) {
+                    if (!(_q.sent())) {
                         throw new Error("Web source folder not found: ".concat(webFolder, ". Check streamConfig.webSourcePath - build the frontend first."));
                     }
                     if (!fs_1.default.existsSync(path_1.default.join(webFolder, 'index.html'))) {
                         throw new Error("".concat(webFolder, " does not contain an index.html - is streamConfig.webSourcePath pointing at the built app?"));
                     }
-                    outputFolder = ((_h = target.streamConfig) === null || _h === void 0 ? void 0 : _h.mockWebFolder)
+                    outputFolder = ((_l = target.streamConfig) === null || _l === void 0 ? void 0 : _l.mockWebFolder)
                         ? path_1.default.resolve(projectDir, target.streamConfig.mockWebFolder)
                         : path_1.default.join(buildFolder, 'mock');
                     assertSafeOutputFolder(outputFolder, projectDir, buildFolder, webFolder);
@@ -891,14 +1078,14 @@ function buildMockSite(target) {
                     // without a SAS licence and without a login. What they cannot do is run here,
                     // so the build says so rather than letting a Run button be the surprise.
                     if (jsPrograms === 0 && sasPrograms > 0) {
-                        (_j = process.logger) === null || _j === void 0 ? void 0 : _j.warn("".concat(sasPrograms, " SAS program(s) and no JavaScript in ").concat(buildFolder, ": they are placed on the drive to read, and cannot run in a browser."));
+                        (_m = process.logger) === null || _m === void 0 ? void 0 : _m.warn("".concat(sasPrograms, " SAS program(s) and no JavaScript in ").concat(buildFolder, ": they are placed on the drive to read, and cannot run in a browser."));
                     }
                     // No PROGRAMS is a different thing again: a compile that produced nothing, or
                     // a stale sasjsbuild from an unrelated command - `sasjs doc` leaves a folder
                     // behind that is not a program folder but does reach the drive, so the count
                     // that decides this is of programs, not of files.
                     if (jsPrograms + sasPrograms === 0) {
-                        (_k = process.logger) === null || _k === void 0 ? void 0 : _k.warn("No compiled programs in ".concat(buildFolder, ": this site ships with an empty drive. ") +
+                        (_o = process.logger) === null || _o === void 0 ? void 0 : _o.warn("No compiled programs in ".concat(buildFolder, ": this site ships with an empty drive. ") +
                             'That is expected for an interface with no services; for anything else, check that compile wrote the target.');
                     }
                     // The package supplies the drive rules the worker answers with, so an install
@@ -911,7 +1098,7 @@ function buildMockSite(target) {
                             'or check that @sasjs/api still publishes build/browser.js.');
                     }
                     if (skipped.length) {
-                        (_l = process.logger) === null || _l === void 0 ? void 0 : _l.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: ") +
+                        (_p = process.logger) === null || _p === void 0 ? void 0 : _p.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
                                 .slice(0, 3)
                                 .map(function (file) {
@@ -942,12 +1129,12 @@ function buildMockSite(target) {
                             fs_1.default.copyFileSync(path_1.default.join(ASSETS_FOLDER, asset), path_1.default.join(hostFolder, asset));
                         }
                     }
-                    catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                    catch (e_11_1) { e_11 = { error: e_11_1 }; }
                     finally {
                         try {
-                            if (_c && !_c.done && (_e = _b.return)) _e.call(_b);
+                            if (_c && !_c.done && (_g = _b.return)) _g.call(_b);
                         }
-                        finally { if (e_8) throw e_8.error; }
+                        finally { if (e_11) throw e_11.error; }
                     }
                     fs_1.default.copyFileSync(API_BROWSER_BUILD, path_1.default.join(hostFolder, 'api-browser.js'));
                     // 2. the linter, bundled from the installed packages so the code routes answer
@@ -959,7 +1146,7 @@ function buildMockSite(target) {
                 case 3:
                     // 2. the linter, bundled from the installed packages so the code routes answer
                     // with the rules this CLI resolved rather than a second implementation
-                    _m.sent();
+                    _q.sent();
                     // 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'));
@@ -1015,8 +1202,34 @@ function buildMockSite(target) {
                         .replace("importScripts('host/lint-browser.js')", "importScripts('host/lint-browser.js?v=".concat(hostVersion, "')")));
                     snapshotSource = path_1.default.join(buildFolder, 'mock-snapshot.json');
                     hasSnapshot = fs_1.default.existsSync(snapshotSource);
+                    snapshotShards = 0;
                     if (hasSnapshot) {
-                        fs_1.default.copyFileSync(snapshotSource, path_1.default.join(hostFolder, 'vfs-snapshot.json'));
+                        capture = JSON.parse(fs_1.default.readFileSync(snapshotSource, 'utf8'));
+                        if (capture &&
+                            capture.format !== undefined &&
+                            capture.format !== exports.DRIVE_FORMAT)
+                            throw new Error("The captured drive at ".concat(snapshotSource, " is format ") +
+                                "".concat(JSON.stringify(capture.format), ", and this build writes format ") +
+                                "".concat(exports.DRIVE_FORMAT, ". Seed the drive again with window.SASjsMock.download()."));
+                        files = capture && capture.files ? capture.files : capture;
+                        if (!files || typeof files !== 'object')
+                            throw new Error("The captured drive at ".concat(snapshotSource, " carries no files - the export is a JSON object of path to contents."));
+                        split = shardSnapshot(files);
+                        try {
+                            for (_d = __values(split.shards), _e = _d.next(); !_e.done; _e = _d.next()) {
+                                shard = _e.value;
+                                fs_1.default.writeFileSync(path_1.default.join(hostFolder, shard.file), JSON.stringify({ format: exports.DRIVE_FORMAT, files: shard.files }));
+                            }
+                        }
+                        catch (e_12_1) { e_12 = { error: e_12_1 }; }
+                        finally {
+                            try {
+                                if (_e && !_e.done && (_h = _d.return)) _h.call(_d);
+                            }
+                            finally { if (e_12) throw e_12.error; }
+                        }
+                        fs_1.default.writeFileSync(path_1.default.join(hostFolder, 'vfs-snapshot.json'), JSON.stringify(split.index, null, 2));
+                        snapshotShards = split.shards.length;
                     }
                     transcriptSource = path_1.default.join(buildFolder, 'sas-transcript.json');
                     hasTranscript = fs_1.default.existsSync(transcriptSource);
@@ -1031,13 +1244,14 @@ function buildMockSite(target) {
                         jsPrograms: jsPrograms,
                         programFolders: PROGRAM_FOLDERS,
                         snapshot: hasSnapshot,
+                        snapshotShards: snapshotShards,
                         sasTranscript: hasTranscript,
                         identity: identity.source,
                         buildStamp: buildStamp,
                         builtAt: new Date().toISOString()
                     }, null, 2));
                     indexPath = path_1.default.join(outputFolder, 'index.html');
-                    _d = patchIndexHtml(fs_1.default.readFileSync(indexPath, 'utf8'), hostVersion, basePath, outputFolder), patched = _d.patched, warnings = _d.warnings;
+                    _f = patchIndexHtml(fs_1.default.readFileSync(indexPath, 'utf8'), hostVersion, basePath, outputFolder), patched = _f.patched, warnings = _f.warnings;
                     fs_1.default.writeFileSync(indexPath, patched);
                     warnings.forEach(function (warning) { var _a; return (_a = process.logger) === null || _a === void 0 ? void 0 : _a.warn(warning); });
                     return [2 /*return*/, {
@@ -1047,6 +1261,7 @@ function buildMockSite(target) {
                             jsPrograms: jsPrograms,
                             webFileCount: webFileCount,
                             snapshot: hasSnapshot,
+                            snapshotShards: snapshotShards,
                             sasTranscript: hasTranscript,
                             identitySource: identity.source
                         }];