@sasjs/cli 6.27.2 → 6.28.0

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/build/commands/build/internal/mockSite/spec/runtime-core.spec.js

@@ -58,7 +58,12 @@ var loadRuntime = function () {
     ;
     global.self = {};
     jest.resetModules();
-    return require('../assets/runtime-core.js');
+    var runtime = require('../assets/runtime-core.js');
+    // the host declares its run times, and the site's worker does the same from its own
+    // `RUN_TIMES` (sw.js): an extension-less program is resolved in that order, so a runtime
+    // driven without a declaration resolves exact paths only
+    runtime.setRunTimes(['js', 'sas']);
+    return runtime;
 };
 var jsonResponse = function (body) { return ({
     ok: true,