WIP: service worker preload support

experimental/javascript-wc-indexeddb/dist/resources.txt

@@ -0,0 +1,39 @@
+index.html
+libs/dexie.mjs
+src/components/todo-app/todo-app.component.js
+src/components/todo-app/todo-app.template.js
+src/components/todo-bottombar/todo-bottombar.component.js
+src/components/todo-bottombar/todo-bottombar.template.js
+src/components/todo-item/todo-item.component.js
+src/components/todo-item/todo-item.template.js
+src/components/todo-list/todo-list.component.js
+src/components/todo-list/todo-list.template.js
+src/components/todo-topbar/todo-topbar.component.js
+src/components/todo-topbar/todo-topbar.template.js
+src/hooks/useDoubleClick.js
+src/hooks/useKeyListener.js
+src/hooks/useRouter.js
+src/index.mjs
+src/speedometer-utils/benchmark.mjs
+src/speedometer-utils/helpers.mjs
+src/speedometer-utils/params.mjs
+src/speedometer-utils/step-runner.mjs
+src/speedometer-utils/step-scheduler.mjs
+src/speedometer-utils/todomvc-utils.mjs
+src/speedometer-utils/translations.mjs
+src/storage/base-storage-manager.js
+src/storage/dexieDB-manager.js
+src/storage/indexedDB-manager.js
+src/storage/storage-factory.js
+src/utils/nanoid.js
+src/workload-test.mjs
+styles/app.constructable.js
+styles/bottombar.constructable.js
+styles/footer.css
+styles/global.constructable.js
+styles/global.css
+styles/header.css
+styles/main.constructable.js
+styles/todo-item.constructable.js
+styles/todo-list.constructable.js
+styles/topbar.constructable.js

experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/benchmark.mjs

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { TestRunner, AsyncTestRunner } from "./test-runner.mjs";
+import { StepRunner, AsyncStepRunner } from "./step-runner.mjs";
 import { Params } from "./params.mjs";
 
 /**
@@ -15,10 +15,10 @@ export class BenchmarkStep {
     }
 
     async runAndRecord(params, suite, test, callback) {
-        const TestRunnerClass = params.useAsyncSteps ? AsyncTestRunner : TestRunner;
+        const StepRunnerClass = params.useAsyncSteps ? AsyncStepRunner : StepRunner;
         const type = params.useAsyncSteps ? "async" : "sync";
-        const testRunner = new TestRunnerClass(null, null, params, suite, test, callback, type);
-        const result = await testRunner.runTest();
+        const stepRunner = new StepRunnerClass(null, null, params, suite, test, callback, type);
+        const result = await stepRunner.runStep();
         return result;
     }
 }

experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/params.mjs

@@ -35,6 +35,10 @@ export class Params {
     measurePrepare = false;
     // External config url to override internal tests.
     config = "";
+    // Resource load delay in ms for the service worker pre-caching.
+    resourceLoadDelay = 0;
+    // Use service worker for resource preloading.
+    preload = false;
 
     constructor(searchParams = undefined) {
         if (searchParams)
@@ -68,6 +72,8 @@ export class Params {
         this.layoutMode = this._parseEnumParam(searchParams, "layoutMode", LAYOUT_MODES);
         this.measurePrepare = this._parseBooleanParam(searchParams, "measurePrepare");
         this.config = this._parseConfig(searchParams);
+        this.resourceLoadDelay = this._parseIntParam(searchParams, "resourceLoadDelay", 0);
+        this.preload = this._parseBooleanParam(searchParams, "preload");
 
         const unused = Array.from(searchParams.keys());
         if (unused.length > 0)
@@ -203,6 +209,10 @@ export class Params {
     toSearchParams() {
         return this.toSearchParamsObject().toString();
     }
+
+    isDefault() {
+        return this === defaultParams;
+    }
 }
 
 function isValidJsonUrl(url) {

experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/test-runner.mjs → experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/step-runner.mjs

@@ -1,18 +1,18 @@
-import { TEST_INVOKER_LOOKUP } from "./test-invoker.mjs";
+import { STEP_SCHEDULER_LOOKUP } from "./step-scheduler.mjs";
 import { forceLayout } from "./helpers.mjs";
 
-export class TestRunner {
+export class StepRunner {
     #frame;
     #page;
     #params;
     #suite;
-    #test;
+    #step;
     #callback;
     #type;
 
-    constructor(frame, page, params, suite, test, callback, type) {
+    constructor(frame, page, params, suite, step, callback, type) {
         this.#suite = suite;
-        this.#test = test;
+        this.#step = step;
         this.#params = params;
         this.#callback = callback;
         this.#page = page;
@@ -24,21 +24,21 @@ export class TestRunner {
         return this.#page;
     }
 
-    get test() {
-        return this.#test;
+    get step() {
+        return this.#step;
     }
 
-    _runSyncStep(test, page) {
-        test.run(page);
+    _runSyncStep(step, page) {
+        step.run(page);
     }
 
-    async runTest() {
+    async runStep() {
         // Prepare all mark labels outside the measuring loop.
         const suiteName = this.#suite.name;
-        const testName = this.#test.name;
-        const syncStartLabel = `${suiteName}.${testName}-start`;
-        const syncEndLabel = `${suiteName}.${testName}-sync-end`;
-        const asyncEndLabel = `${suiteName}.${testName}-async-end`;
+        const stepName = this.#step.name;
+        const syncStartLabel = `${suiteName}.${stepName}-start`;
+        const syncEndLabel = `${suiteName}.${stepName}-sync-end`;
+        const asyncEndLabel = `${suiteName}.${stepName}-async-end`;
 
         let syncTime;
         let asyncStartTime;
@@ -57,9 +57,9 @@ export class TestRunner {
             const syncStartTime = performance.now();
 
             if (this.#type === "async")
-                await this._runSyncStep(this.test, this.page);
+                await this._runSyncStep(this.step, this.page);
             else
-                this._runSyncStep(this.test, this.page);
+                this._runSyncStep(this.step, this.page);
 
             const mark = performance.mark(syncEndLabel);
             const syncEndTime = mark.startTime;
@@ -85,32 +85,32 @@ export class TestRunner {
 
             if (this.#params.warmupBeforeSync)
                 performance.measure("warmup", "warmup-start", "warmup-end");
-            performance.measure(`${suiteName}.${testName}-sync`, syncStartLabel, syncEndLabel);
-            performance.measure(`${suiteName}.${testName}-async`, syncEndLabel, asyncEndLabel);
+            performance.measure(`${suiteName}.${stepName}-sync`, syncStartLabel, syncEndLabel);
+            performance.measure(`${suiteName}.${stepName}-async`, syncEndLabel, asyncEndLabel);
         };
 
-        const report = () => this.#callback(this.#test, syncTime, asyncTime);
-        const invokerType = this.#suite.type === "async" || this.#params.useAsyncSteps ? "async" : this.#params.measurementMethod;
-        const invokerClass = TEST_INVOKER_LOOKUP[invokerType];
-        const invoker = new invokerClass(runSync, measureAsync, report, this.#params);
+        const report = () => this.#callback(this.#step, syncTime, asyncTime);
+        const schedulerType = this.#suite.type === "async" || this.#params.useAsyncSteps ? "async" : this.#params.measurementMethod;
+        const schedulerClass = STEP_SCHEDULER_LOOKUP[schedulerType];
+        const scheduler = new schedulerClass(runSync, measureAsync, report, this.#params);
 
-        return invoker.start();
+        return scheduler.start();
     }
 }
 
-export class AsyncTestRunner extends TestRunner {
-    constructor(frame, page, params, suite, test, callback, type) {
-        super(frame, page, params, suite, test, callback, type);
+export class AsyncStepRunner extends StepRunner {
+    constructor(frame, page, params, suite, step, callback, type) {
+        super(frame, page, params, suite, step, callback, type);
     }
 
-    async _runSyncStep(test, page) {
-        await test.run(page);
+    async _runSyncStep(step, page) {
+        await step.run(page);
     }
 }
 
-export const TEST_RUNNER_LOOKUP = {
+export const STEP_RUNNER_LOOKUP = {
     __proto__: null,
-    default: TestRunner,
-    async: AsyncTestRunner,
-    remote: TestRunner,
+    default: StepRunner,
+    async: AsyncStepRunner,
+    remote: StepRunner,
 };

experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/test-invoker.mjs → experimental/javascript-wc-indexeddb/dist/src/speedometer-utils/step-scheduler.mjs

@@ -1,4 +1,4 @@
-class TestInvoker {
+class StepScheduler {
     constructor(syncCallback, asyncCallback, reportCallback, params) {
         this._syncCallback = syncCallback;
         this._asyncCallback = asyncCallback;
@@ -16,7 +16,7 @@ class TestInvoker {
     }
 }
 
-class RAFTestInvoker extends TestInvoker {
+class RAFStepScheduler extends StepScheduler {
     _scheduleCallbacks(resolve) {
         requestAnimationFrame(() => this._syncCallback());
         requestAnimationFrame(() => {
@@ -31,7 +31,7 @@ class RAFTestInvoker extends TestInvoker {
     }
 }
 
-class AsyncRAFTestInvoker extends TestInvoker {
+class AsyncRAFStepScheduler extends StepScheduler {
     static mc = new MessageChannel();
     _scheduleCallbacks(resolve) {
         let gotTimer = false;
@@ -62,7 +62,7 @@ class AsyncRAFTestInvoker extends TestInvoker {
                 tryTriggerAsyncCallback();
             });
 
-            AsyncRAFTestInvoker.mc.port1.addEventListener(
+            AsyncRAFStepScheduler.mc.port1.addEventListener(
                 "message",
                 async function () {
                     await Promise.resolve();
@@ -71,14 +71,14 @@ class AsyncRAFTestInvoker extends TestInvoker {
                 },
                 { once: true }
             );
-            AsyncRAFTestInvoker.mc.port1.start();
-            AsyncRAFTestInvoker.mc.port2.postMessage("speedometer");
+            AsyncRAFStepScheduler.mc.port1.start();
+            AsyncRAFStepScheduler.mc.port2.postMessage("speedometer");
         });
     }
 }
 
-export const TEST_INVOKER_LOOKUP = {
+export const STEP_SCHEDULER_LOOKUP = {
     __proto__: null,
-    raf: RAFTestInvoker,
-    async: AsyncRAFTestInvoker,
+    raf: RAFStepScheduler,
+    async: AsyncRAFStepScheduler,
 };

experimental/javascript-wc-indexeddb/scripts/build.mjs

@@ -1,6 +1,10 @@
+import path from "path";
+import { generateResourcesFile } from "../../../resources/shared/generate-resources.mjs";
 import fs from "fs/promises";
 import { dirname } from "path";
 
+const __dirname = import.meta.dirname;
+
 /**
  * createDirectory
  *
@@ -97,7 +101,7 @@
     { src: "node_modules/todomvc-css/dist/todo-list.constructable.js", dest: "./dist/styles/todo-list.constructable.js" },
     { src: "node_modules/todomvc-css/dist/todo-item.constructable.js", dest: "./dist/styles/todo-item.constructable.js" },
     { src: "node_modules/dexie/dist/modern/dexie.mjs", dest: "./dist/libs/dexie.mjs" },
-    { src: "node_modules/speedometer-utils/step-scheduler.mjs", dest: "./dist/src/speedometer-utils/test-invoker.mjs" },
+    { src: "node_modules/speedometer-utils/step-scheduler.mjs", dest: "./dist/src/speedometer-utils/step-scheduler.mjs" },
     { src: "node_modules/speedometer-utils/step-runner.mjs", dest: "./dist/src/speedometer-utils/step-runner.mjs" },
     { src: "node_modules/speedometer-utils/params.mjs", dest: "./dist/src/speedometer-utils/params.mjs" },
     { src: "src/speedometer-utils/benchmark.mjs", dest: "./dist/src/speedometer-utils/benchmark.mjs" },
@@ -164,4 +168,5 @@
     console.log("Done with building!");
 };
 
-build();
+await build();
+await generateResourcesFile(path.join(import.meta.dirname, "../dist"));

experimental/javascript-wc-indexeddb/src/speedometer-utils/benchmark.mjs

@@ -1,5 +1,5 @@
 /* eslint-disable no-case-declarations */
-import { TestRunner, AsyncTestRunner } from "./test-runner.mjs";
+import { StepRunner, AsyncStepRunner } from "./step-runner.mjs";
 import { Params } from "/node_modules/speedometer-utils/params.mjs";
 
 /**
@@ -15,10 +15,10 @@ export class BenchmarkStep {
     }
 
     async runAndRecord(params, suite, test, callback) {
-        const TestRunnerClass = params.useAsyncSteps ? AsyncTestRunner : TestRunner;
+        const StepRunnerClass = params.useAsyncSteps ? AsyncStepRunner : StepRunner;
         const type = params.useAsyncSteps ? "async" : "sync";
-        const testRunner = new TestRunnerClass(null, null, params, suite, test, callback, type);
-        const result = await testRunner.runTest();
+        const stepRunner = new StepRunnerClass(null, null, params, suite, test, callback, type);
+        const result = await stepRunner.runStep();
         return result;
     }
 }