@sasjs/cli 6.27.2 → 6.27.3

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

@@ -653,6 +653,11 @@ var versionScripts = function (scripts, outputFolder) {
         var src = script.src;
         if (!src)
             return script;
+        // A `?v=<contents>` URL is safe for an asset that pins a subresource-integrity
+        // hash: SRI digests the fetched BYTES, not the URL, so the hash still matches.
+        // The version is what stops a stale copy being served at all - a changed file
+        // gets a new URL, and an unchanged one is byte-identical to what the hash was
+        // computed from.
         var _a = __read(src.split('?'), 2), pathname = _a[0], query = _a[1];
         var file = path_1.default.join(outputFolder, pathname.replace(/^(\.\/|\/)/, ''));
         if (!fs_1.default.existsSync(file))
@@ -688,6 +693,24 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
         warnings.push('no <sasjs> element found - check the adapter configuration manually');
     }
     var scripts = [];
+    /**
+     * Scripts the page marks `data-early`, which stay in the page and run in the
+     * parser instead of through the loader.
+     *
+     * The loader defers every script so the worker is ready before the app asks it
+     * for anything, which is right for the app and wrong for a script that paints:
+     * on the demonstration site the canvas stays unpainted (white) for the seconds
+     * the worker takes to claim the page, so a dark interface announces itself with
+     * a full-screen white flash. A page that marks a script `data-early` is saying
+     * it runs nothing that needs the worker - the theme script reads localStorage
+     * and sets a background - so the parser keeps it where the page put it.
+     *
+     * Only a classic script can be kept: a module is deferred by specification
+     * however it is placed, and an inline one is refused by the page's own policy.
+     * Both are reported and replayed like any other script rather than being
+     * promised something the browser will not do.
+     */
+    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;
@@ -697,6 +720,16 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
         // data blocks stay in the page; they are not scripts to replay
         if (!EXECUTABLE_TYPES.includes(type))
             return tag;
+        if (attributes['data-early'] !== undefined) {
+            if (inlined)
+                warnings.push('a data-early script carries its code inline - only a file can stay in the page, because the page is served under a policy that refuses inline script');
+            else if (type === 'module')
+                warnings.push('a data-early script is a module - a module is deferred by specification, so it cannot run before the loader; it is replayed like any other script');
+            else {
+                early.push({ src: attributes.src, tag: tag });
+                return tag;
+            }
+        }
         var spec = inlined
             ? {}
             : { src: attributes.src };
@@ -729,18 +762,62 @@ var patchIndexHtml = function (html, version, basePath, outputFolder) {
         scripts.push(spec);
         return '';
     });
-    if (scripts.length) {
+    if (scripts.length || early.length) {
         var versioned = outputFolder
             ? versionScripts(scripts, outputFolder)
             : scripts;
-        var tag = bootTag(versioned, version, basePath);
+        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
         patched = /<\/body>/i.test(patched)
-            ? patched.replace(/<\/body>/i, "".concat(tag, "\n</body>"))
-            : patched + tag;
+            ? patched.replace(/<\/body>/i, function () { return "".concat(tag_1, "\n</body>"); })
+            : patched + tag_1;
     }
     else {
         warnings.push('no script tags found - the mock loader was not installed');
     }
+    // The early scripts keep their place in the page, and their URL follows the
+    // file's contents for the same reason the replayed ones do: the host caches an
+    // asset for two hours and a theme script that never changes its URL is a theme
+    // script a returning reader keeps from the previous build.
+    if (early.length && outputFolder) {
+        var versioned_1 = versionScripts(early.map(function (entry) { return ({ src: entry.src }); }), outputFolder);
+        early.forEach(function (entry, index) {
+            // Function replacements throughout: a replacement STRING interprets `$&`,
+            // `$1` and the rest of the replacement patterns, and both the tag and the
+            // src are the page's own text - a `$&` in a file name would splice the
+            // surrounding markup into the src.
+            var withVersion = entry.tag.replace(entry.src, function () { return versioned_1[index].src; });
+            patched = patched.replace(entry.tag, function () { return withVersion; });
+        });
+    }
+    // A stylesheet the page links is a page asset like a script, and the one that
+    // paints the canvas is the reason this matters: a palette change behind an
+    // unchanged URL reaches a returning reader up to two hours late, which is a
+    // white flash the fix was meant to remove. Its URL follows the file's contents
+    // for the same reason a script's does. An `integrity` attribute travels with
+    // it untouched - SRI digests the bytes, so a versioned URL still satisfies it.
+    //
+    // A `rel=preload as=style` for the same file is versioned too: leaving it at
+    // the unversioned URL warms one cache entry while the stylesheet is fetched
+    // cold at another, which is the request the preload existed to save.
+    if (outputFolder) {
+        patched = patched.replace(/<link\b([^>]*)>/gi, function (tag, source) {
+            var attributes = parseAttributes(source);
+            var rel = (attributes.rel || '').trim().toLowerCase().split(/\s+/);
+            var preloadsStyle = rel.includes('preload') &&
+                (attributes.as || '').trim().toLowerCase() === 'style';
+            if (!rel.includes('stylesheet') && !preloadsStyle)
+                return tag;
+            var href = attributes.href;
+            if (!href)
+                return tag;
+            var _a = __read(versionScripts([{ src: href }], outputFolder), 1), versioned = _a[0];
+            return versioned.src === href
+                ? tag
+                : tag.replace(href, function () { return versioned.src; });
+        });
+    }
     return { patched: patched, warnings: warnings };
 };
 /**

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

@@ -57,6 +57,31 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -81,11 +106,22 @@ var createProject = function (root) {
     write(path_1.default.join(build, 'server-ci.sas'), '%put build pack;\n');
     write(path_1.default.join(build, 'server-ci.json'), '{"members":[]}\n');
     write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
-        '<!doctype html><html><head><title>App</title></head><body>',
+        '<!doctype html><html><head><title>App</title>',
+        '<link rel="stylesheet" href="theme-boot.css" />',
+        // a paint-critical script: it runs nothing that needs the worker, so the
+        // page marks it to stay in the parser rather than being deferred
+        '<script src="theme-boot.js" data-early></script>',
+        // the same marker on a module cannot be honoured - a module is deferred by
+        // specification - so the build must replay it and say why
+        '<script src="deferred.js" type="module" data-early></script>',
+        '</head><body>',
         "<sasjs serverurl=\"https://sas.example.com\" apploc=\"".concat(appLoc, "\" servertype=\"SASJS\" loginmechanism=\"Redirected\"></sasjs>"),
         '<script src="main.abc123.js" type="module"></script>',
         '</body></html>'
     ].join('\n'));
+    write(path_1.default.join(root, 'client', 'dist', 'theme-boot.css'), 'html { background-color: #121212 }\n');
+    write(path_1.default.join(root, 'client', 'dist', 'deferred.js'), 'console.log("deferred")\n');
+    write(path_1.default.join(root, 'client', 'dist', 'theme-boot.js'), 'document.documentElement.style.backgroundColor = "#121212"\n');
     write(path_1.default.join(root, 'client', 'dist', 'main.abc123.js'), 'console.log(1)\n');
 };
 describe('browser-hosted build', function () {
@@ -467,6 +503,182 @@ describe('browser-hosted build', function () {
             }
         });
     }); });
+    /**
+     * A page's paint-critical script must run before the worker exists.
+     *
+     * The loader defers every script so the worker is ready before the app asks it
+     * for anything - right for the app, wrong for a script whose job is the canvas:
+     * the page stays unpainted (white) for the seconds the worker takes to claim
+     * it, which is the white flash a dark interface shows on every load. A tag the
+     * page marks `data-early` says it needs no worker, so the parser keeps it.
+     */
+    it('leaves a data-early script to the parser, in the page', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html, specs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    specs = JSON.parse(html
+                        .match(/data-scripts='([^']*)'/)[1]
+                        .replace(/&#39;/g, "'")
+                        .replace(/&amp;/g, '&'));
+                    // still in the page, before the loader, and not replayed through it
+                    expect(html).toMatch(/<script src="theme-boot\.js\?v=[0-9a-f]{10}" data-early><\/script>/);
+                    expect(specs.map(function (spec) { return spec.src; })).not.toContain(expect.stringMatching(/theme-boot/));
+                    expect(html.indexOf('theme-boot.js')).toBeLessThan(html.indexOf('host/boot.js'));
+                    // the same marker on a module cannot be honoured: a module is deferred by
+                    // specification, so it is replayed and the author is told
+                    expect(html).not.toContain('<script src="deferred.js');
+                    expect(specs.map(function (spec) { return spec.src; })).toContainEqual(expect.stringMatching(/^deferred\.js\?v=/));
+                    expect(process.logger.warn).toHaveBeenCalledWith(expect.stringContaining('a data-early script is a module'));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('gives a linked stylesheet a URL that follows its contents', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // the host caches an asset for two hours: a palette change behind an
+                // unchanged URL reaches a returning reader late, which for the canvas
+                // stylesheet is the white flash the fix exists to remove
+                return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    // the host caches an asset for two hours: a palette change behind an
+                    // unchanged URL reaches a returning reader late, which for the canvas
+                    // stylesheet is the white flash the fix exists to remove
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    expect(html).toMatch(/<link rel="stylesheet" href="theme-boot\.css\?v=[0-9a-f]{10}" \/>/);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("leaves a stylesheet alone when the file is not this build's", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html, specs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // a file this build does not own: guessing a version for it would break it.
+                    // A URL that pins an `integrity` hash is versioned like any other - SRI
+                    // digests the fetched bytes, so a `?v=` URL still satisfies the hash.
+                    write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
+                        '<!doctype html><html><head><title>App</title>',
+                        '<link rel="stylesheet" href="https://cdn.example.com/lib.css" />',
+                        '<link rel="stylesheet" href="theme-boot.css" integrity="sha384-abc" crossorigin="anonymous" />',
+                        '</head><body>',
+                        "<sasjs serverurl=\"https://sas.example.com\" apploc=\"".concat(appLoc, "\"></sasjs>"),
+                        '<script src="main.abc123.js" type="module" integrity="sha384-def"></script>',
+                        '</body></html>'
+                    ].join('\n'));
+                    return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    specs = JSON.parse(html
+                        .match(/data-scripts='([^']*)'/)[1]
+                        .replace(/&#39;/g, "'")
+                        .replace(/&amp;/g, '&'));
+                    // not owned by this build: untouched
+                    expect(html).toContain('href="https://cdn.example.com/lib.css"');
+                    // owned, hashed: versioned, hash carried through
+                    expect(html).toMatch(/href="theme-boot\.css\?v=[0-9a-f]{10}" integrity="sha384-abc" crossorigin="anonymous"/);
+                    expect(specs[0].src).toMatch(/^main\.abc123\.js\?v=[0-9a-f]{10}$/);
+                    expect(specs[0].integrity).toBe('sha384-def');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not let a $ in a file name rewrite the page', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // `String.prototype.replace` interprets `$&`, `$1` and the rest in a
+                    // replacement STRING, and these tags carry the page's own file names - so a
+                    // `$&` in one would splice the matched markup into the src
+                    write(path_1.default.join(root, 'client', 'dist', '$&x.js'), 'console.log("dollar")\n');
+                    write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
+                        '<!doctype html><html><head><title>App</title>',
+                        '<script src="$&x.js" data-early></script>',
+                        '</head><body>',
+                        "<sasjs serverurl=\"https://sas.example.com\" apploc=\"".concat(appLoc, "\"></sasjs>"),
+                        '<script src="main.abc123.js"></script>',
+                        '</body></html>'
+                    ].join('\n'));
+                    return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    expect(html).toContain("<script src=\"$&x.js?v=".concat(require('crypto')
+                        .createHash('md5')
+                        .update(fs_1.default.readFileSync(path_1.default.join(root, 'client', 'dist', '$&x.js')))
+                        .digest('hex')
+                        .slice(0, 10), "\" data-early></script>"));
+                    // one script tag, not a nested one spliced in by the expansion
+                    expect(html.split('<script').length - 1).toBe(2); // the early tag + the loader
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('versions a preload of the same stylesheet', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html, urls;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // a preload left at the unversioned URL warms one cache entry while the
+                    // stylesheet is fetched cold at another, which is the request it existed to save
+                    write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
+                        '<!doctype html><html><head><title>App</title>',
+                        '<link rel="preload" as="style" href="theme-boot.css" />',
+                        '<link rel="stylesheet" href="theme-boot.css" />',
+                        '</head><body>',
+                        "<sasjs serverurl=\"https://sas.example.com\" apploc=\"".concat(appLoc, "\"></sasjs>"),
+                        '<script src="main.abc123.js"></script>',
+                        '</body></html>'
+                    ].join('\n'));
+                    return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    urls = __spreadArray([], __read(html.matchAll(/theme-boot\.css\?v=([0-9a-f]{10})/g)), false).map(function (match) { return match[1]; });
+                    expect(urls).toHaveLength(2);
+                    expect(urls[0]).toBe(urls[1]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('installs the loader for a page whose only script runs early', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var html, specs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // the loader is what installs the worker, the bridge and the drive: a page
+                    // whose one script is kept in the parser still needs it, and must not be told
+                    // it has no scripts
+                    write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
+                        '<!doctype html><html><head><title>App</title>',
+                        '<script src="theme-boot.js" data-early></script>',
+                        '</head><body>',
+                        "<sasjs serverurl=\"https://sas.example.com\" apploc=\"".concat(appLoc, "\"></sasjs>"),
+                        '</body></html>'
+                    ].join('\n'));
+                    return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
+                case 1:
+                    _a.sent();
+                    html = fs_1.default.readFileSync(path_1.default.join(out(), 'index.html'), 'utf8');
+                    specs = html.match(/data-scripts='([^']*)'/)[1];
+                    expect(html).toContain('<script src="host/boot.js?v=');
+                    expect(html).toContain('data-early');
+                    expect(specs).toBe('[]');
+                    expect(process.logger.warn).not.toHaveBeenCalledWith(expect.stringContaining('no script tags found'));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('points the app at itself and installs the boot loader', function () { return __awaiter(void 0, void 0, void 0, function () {
         var html, specs;
         return __generator(this, function (_a) {
@@ -490,9 +702,12 @@ describe('browser-hosted build', function () {
                         .match(/data-scripts='([^']*)'/)[1]
                         .replace(/&#39;/g, "'")
                         .replace(/&amp;/g, '&'));
-                    expect(specs).toHaveLength(1);
-                    expect(specs[0].type).toBe('module');
-                    expect(specs[0].src).toMatch(/^main\.abc123\.js\?v=[0-9a-f]{10}$/);
+                    // two: the module the page marked data-early (replayed, with a warning),
+                    // then the bundle - both in the order the page had them
+                    expect(specs).toHaveLength(2);
+                    expect(specs[0].src).toMatch(/^deferred\.js\?v=[0-9a-f]{10}$/);
+                    expect(specs[1].type).toBe('module');
+                    expect(specs[1].src).toMatch(/^main\.abc123\.js\?v=[0-9a-f]{10}$/);
                     return [2 /*return*/];
             }
         });
@@ -503,7 +718,7 @@ describe('browser-hosted build', function () {
      * bundle's name never changes, so the URL is what has to change.
      */
     it('gives each app script a URL that follows its contents', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var specs, first;
+        var specs, bundleSrc, first;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -512,23 +727,26 @@ describe('browser-hosted build', function () {
                         var tag = html.match(/data-scripts='([^']*)'/);
                         return JSON.parse(tag[1].replace(/&#39;/g, "'").replace(/&amp;/g, '&'));
                     };
+                    bundleSrc = function () {
+                        return specs().find(function (spec) { var _a; return (_a = spec.src) === null || _a === void 0 ? void 0 : _a.startsWith('main.'); });
+                    };
                     return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
                 case 1:
                     _a.sent();
-                    first = specs()[0].src;
+                    first = bundleSrc().src;
                     expect(first).toMatch(/^main\.abc123\.js\?v=[0-9a-f]{10}$/);
                     // the same file twice: nothing about the URL changes
                     return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
                 case 2:
                     // the same file twice: nothing about the URL changes
                     _a.sent();
-                    expect(specs()[0].src).toBe(first);
+                    expect(bundleSrc().src).toBe(first);
                     // a different bundle: a different URL, which is the caching bust
                     write(path_1.default.join(root, 'client', 'dist', 'main.abc123.js'), 'console.log(2)\n');
                     return [4 /*yield*/, (0, mockSite_1.buildMockSite)(target())];
                 case 3:
                     _a.sent();
-                    expect(specs()[0].src).not.toBe(first);
+                    expect(bundleSrc().src).not.toBe(first);
                     // and a script this build does not own is left exactly as the page asked
                     write(path_1.default.join(root, 'client', 'dist', 'index.html'), [
                         '<!doctype html><html><head><title>App</title></head><body>',

package/package.json

@@ -73,7 +73,7 @@
     "@sasjs/adapter": "6.0.2",
     "@sasjs/api": "0.28.0",
     "@sasjs/core": "7.1.12",
-    "@sasjs/lint": "5.1.1",
+    "@sasjs/lint": "5.3.0",
     "@sasjs/utils": "4.11.0",
     "axios": "1.20.0",
     "chalk": "4.1.2",
@@ -125,5 +125,5 @@
     "ws": "8.21.0",
     "nanoid": "3.3.18"
   },
-  "version": "6.27.2"
+  "version": "6.27.3"
 }