Add TodoMVC with indexedDB storage

experimental/javascript-wc-indexeddb/.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules

experimental/javascript-wc-indexeddb/README.md

@@ -0,0 +1,70 @@
+# Speedometer 3.0: TodoMVC: Web Components IndexedDB
+
+## Description
+
+A todoMVC application implemented with native web components and indexedDB as the backing storage.
+It utilizes custom elements and html templates to build reusable components.
+
+In contrast to other workloads, this application uses an updated set of css rules and an optimized dom structure to ensure the application follows best practices in regards to accessibility.
+
+### Benchmark steps
+
+In contrast to other versions of the todoMVC workload, this one only shows 10 todo items at a time.
+
+#### Add 100 items.
+
+All the items are added to the DOM and to the database, it uses CSS to show only 10 of the items on screen.
+
+The measured time stops when the last item has been added to the DOM, it doesn't measure the time spent to complete the database update.
+
+#### Complete 100 items.
+
+The benchmark runs a loop of 10 iterations. On each iteration 10 items are marked completed (in the DOM and in the database), and the "Next page" button is clicked. When moving to the next page the items in the "current page" are deleted from the DOM.
+
+The measured time stops when the last item has been marked as completed, it doesn't measure the time spent to complete the database update.
+
+#### Delete 100 items.
+
+The benchmarks runs a loop of 10 iterations. On each iteration the 10 items in the current page are deleted (from the DOM and the database), and the "Previous page" button is clicked.
+
+When moving to the previous page the previous 10 items are loaded from the database, this is included in the measured time.
+
+## Storage Options
+
+This application supports two different IndexedDB implementations that can be selected via URL hash:
+
+-   **Vanilla IndexedDB** (default): Uses the native IndexedDB API
+    -   Access via: `http://localhost:7005/#/indexeddb` or `http://localhost:7005/`
+-   **Dexie.js**: Uses the Dexie.js wrapper library for IndexedDB
+    -   Access via: `http://localhost:7005/#/dexie`
+
+Simply click on the storage API links in the header to switch between implementations. The database will be reset when switching between storage types.
+
+## Built steps
+
+A simple build script copies all necessary files to a `dist` folder.
+It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
+
+```
+npm run build
+```
+
+## Requirements
+
+The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
+
+```
+* Node (min version: 18.13.0)
+* NPM (min version: 8.19.3)
+```
+
+## Local preview
+
+```
+terminal:
+1. npm install
+2. npm run dev
+
+browser:
+1. http://localhost:7005/
+```

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.component.js

@@ -0,0 +1,157 @@
+import template from "./todo-app.template.js";
+import { useRouter } from "../../hooks/useRouter.js";
+
+import globalStyles from "../../styles/global.constructable.js";
+import appStyles from "../../styles/app.constructable.js";
+import mainStyles from "../../styles/main.constructable.js";
+class TodoApp extends HTMLElement {
+    #isReady = false;
+    #numberOfItems = 0;
+    #numberOfCompletedItems = 0;
+    constructor() {
+        super();
+
+        const node = document.importNode(template.content, true);
+        this.topbar = node.querySelector("todo-topbar");
+        this.list = node.querySelector("todo-list");
+        this.bottombar = node.querySelector("todo-bottombar");
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.htmlDirection = document.dir || "ltr";
+        this.setAttribute("dir", this.htmlDirection);
+        this.shadow.adoptedStyleSheets = [globalStyles, appStyles, mainStyles];
+        this.shadow.append(node);
+
+        this.addItem = this.addItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+        this.removeItem = this.removeItem.bind(this);
+        this.updateItem = this.updateItem.bind(this);
+        this.toggleItems = this.toggleItems.bind(this);
+        this.clearCompletedItems = this.clearCompletedItems.bind(this);
+        this.routeChange = this.routeChange.bind(this);
+        this.moveToNextPage = this.moveToNextPage.bind(this);
+        this.moveToPreviousPage = this.moveToPreviousPage.bind(this);
+
+        this.router = useRouter();
+    }
+
+    get isReady() {
+        return this.#isReady;
+    }
+
+    getInstance() {
+        return this;
+    }
+
+    addItem(event) {
+        const { detail: item } = event;
+        this.list.addItem(item, this.#numberOfItems++);
+        this.update("add-item", item.id);
+    }
+
+    toggleItem(event) {
+        if (event.detail.completed)
+            this.#numberOfCompletedItems++;
+        else
+            this.#numberOfCompletedItems--;
+
+        this.list.toggleItem(event.detail.itemNumber, event.detail.completed);
+        this.update("toggle-item", event.detail.id);
+    }
+
+    removeItem(event) {
+        if (event.detail.completed)
+            this.#numberOfCompletedItems--;
+
+        this.#numberOfItems--;
+        this.update("remove-item", event.detail.id);
+        this.list.removeItem(event.detail.itemNumber);
+    }
+
+    updateItem(event) {
+        this.update("update-item", event.detail.id);
+    }
+
+    toggleItems(event) {
+        this.list.toggleItems(event.detail.completed);
+    }
+
+    clearCompletedItems() {
+        this.list.removeCompletedItems();
+    }
+
+    moveToNextPage() {
+        this.list.moveToNextPage();
+    }
+
+    moveToPreviousPage() {
+        // Skeleton implementation of previous page navigation
+        this.list.moveToPreviousPage().then(() => {
+            this.bottombar.reenablePreviousPageButton();
+            window.dispatchEvent(new CustomEvent("previous-page-loaded", {}));
+        });
+    }
+
+    update() {
+        const totalItems = this.#numberOfItems;
+        const completedItems = this.#numberOfCompletedItems;
+        const activeItems = totalItems - completedItems;
+
+        this.list.setAttribute("total-items", totalItems);
+
+        this.topbar.setAttribute("total-items", totalItems);
+        this.topbar.setAttribute("active-items", activeItems);
+        this.topbar.setAttribute("completed-items", completedItems);
+
+        this.bottombar.setAttribute("total-items", totalItems);
+        this.bottombar.setAttribute("active-items", activeItems);
+    }
+
+    addListeners() {
+        this.topbar.addEventListener("toggle-all", this.toggleItems);
+        this.topbar.addEventListener("add-item", this.addItem);
+
+        this.list.listNode.addEventListener("toggle-item", this.toggleItem);
+        this.list.listNode.addEventListener("remove-item", this.removeItem);
+        this.list.listNode.addEventListener("update-item", this.updateItem);
+
+        this.bottombar.addEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.addEventListener("next-page", this.moveToNextPage);
+        this.bottombar.addEventListener("previous-page", this.moveToPreviousPage);
+    }
+
+    removeListeners() {
+        this.topbar.removeEventListener("toggle-all", this.toggleItems);
+        this.topbar.removeEventListener("add-item", this.addItem);
+
+        this.list.listNode.removeEventListener("toggle-item", this.toggleItem);
+        this.list.listNode.removeEventListener("remove-item", this.removeItem);
+        this.list.listNode.removeEventListener("update-item", this.updateItem);
+
+        this.bottombar.removeEventListener("clear-completed-items", this.clearCompletedItems);
+        this.bottombar.removeEventListener("next-page", this.moveToNextPage);
+        this.bottombar.removeEventListener("previous-page", this.moveToPreviousPage);
+    }
+
+    routeChange(route) {
+        this.list.updateRoute(route);
+        this.bottombar.updateRoute(route);
+        this.topbar.updateRoute(route);
+    }
+
+    connectedCallback() {
+        this.update("connected");
+        this.addListeners();
+        this.router.initRouter(this.routeChange);
+        this.#isReady = true;
+    }
+
+    disconnectedCallback() {
+        this.removeListeners();
+        this.#isReady = false;
+    }
+}
+
+customElements.define("todo-app", TodoApp);
+
+export default TodoApp;

experimental/javascript-wc-indexeddb/dist/components/todo-app/todo-app.template.js

@@ -0,0 +1,14 @@
+const template = document.createElement("template");
+
+template.id = "todo-app-template";
+template.innerHTML = `
+    <section class="app">
+        <todo-topbar></todo-topbar>
+        <main class="main">
+            <todo-list></todo-list>
+        </main>
+        <todo-bottombar></todo-bottombar>
+    </section>
+`;
+
+export default template;

experimental/javascript-wc-indexeddb/dist/components/todo-bottombar/todo-bottombar.component.js

@@ -0,0 +1,146 @@
+import template from "./todo-bottombar.template.js";
+import { getStorageType } from "../../storage/storage-factory.js";
+
+import globalStyles from "../../styles/global.constructable.js";
+import bottombarStyles from "../../styles/bottombar.constructable.js";
+
+const customStyles = new CSSStyleSheet();
+customStyles.replaceSync(`
+
+    .clear-completed-button, .clear-completed-button:active,
+    .todo-status,
+    .filter-list
+     {
+        position: unset;
+        transform: unset;
+    }
+
+    .bottombar {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: center;
+        justify-items: center;
+    }
+
+    .bottombar > * {
+        grid-column: span 1;
+    }
+
+    .filter-list {
+        grid-column: span 3;
+    }
+
+     :host([total-items="0"]) > .bottombar {
+        display: none;
+    }
+`);
+
+class TodoBottombar extends HTMLElement {
+    static get observedAttributes() {
+        return ["total-items", "active-items"];
+    }
+
+    constructor() {
+        super();
+
+        const node = document.importNode(template.content, true);
+        this.element = node.querySelector(".bottombar");
+        this.clearCompletedButton = node.querySelector(".clear-completed-button");
+        this.todoStatus = node.querySelector(".todo-status");
+        this.filterLinks = node.querySelectorAll(".filter-link");
+
+        this.shadow = this.attachShadow({ mode: "open" });
+        this.htmlDirection = document.dir || "ltr";
+        this.setAttribute("dir", this.htmlDirection);
+        this.shadow.adoptedStyleSheets = [globalStyles, bottombarStyles, customStyles];
+        this.shadow.append(node);
+
+        this.clearCompletedItems = this.clearCompletedItems.bind(this);
+        this.MoveToNextPage = this.MoveToNextPage.bind(this);
+        this.MoveToPreviousPage = this.MoveToPreviousPage.bind(this);
+
+        // Set up filter links with storage type
+        this.setupFilterLinks();
+    }
+
+    setupFilterLinks() {
+        const storagePrefix = getStorageType();
+
+        this.filterLinks.forEach((link) => {
+            const route = link.dataset.route;
+            if (route === "all")
+                link.href = `#/${storagePrefix}`;
+            else
+                link.href = `#/${storagePrefix}/${route}`;
+        });
+    }
+
+    updateDisplay() {
+        this.todoStatus.textContent = `${this["active-items"]} ${this["active-items"] === "1" ? "item" : "items"} left!`;
+    }
+
+    updateRoute(route) {
+        // Update filter links to preserve current storage type
+        this.setupFilterLinks();
+
+        // Update selected state
+        this.filterLinks.forEach((link) => {
+            if (link.dataset.route === route)
+                link.classList.add("selected");
+            else
+                link.classList.remove("selected");
+        });
+    }
+
+    clearCompletedItems() {
+        this.dispatchEvent(new CustomEvent("clear-completed-items"));
+    }
+
+    MoveToNextPage() {
+        this.dispatchEvent(new CustomEvent("next-page"));
+    }
+
+    MoveToPreviousPage() {
+        this.element.querySelector(".previous-page-button").disabled = true;
+        this.dispatchEvent(new CustomEvent("previous-page"));
+    }
+
+    addListeners() {
+        this.clearCompletedButton.addEventListener("click", this.clearCompletedItems);
+        this.element.querySelector(".next-page-button").addEventListener("click", this.MoveToNextPage);
+        this.element.querySelector(".previous-page-button").addEventListener("click", this.MoveToPreviousPage);
+    }
+
+    removeListeners() {
+        this.clearCompletedButton.removeEventListener("click", this.clearCompletedItems);
+        this.getElementById("next-page-button").removeEventListener("click", this.MoveToNextPage);
+        this.getElementById("previous-page-button").removeEventListener("click", this.MoveToPreviousPage);
+    }
+
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        this[property] = newValue;
+
+        if (this.isConnected)
+            this.updateDisplay();
+    }
+
+    reenablePreviousPageButton() {
+        this.element.querySelector(".previous-page-button").disabled = false;
+        window.dispatchEvent(new CustomEvent("previous-page-button-enabled", {}));
+    }
+
+    connectedCallback() {
+        this.updateDisplay();
+        this.addListeners();
+    }
+
+    disconnectedCallback() {
+        this.removeListeners();
+    }
+}
+
+customElements.define("todo-bottombar", TodoBottombar);
+
+export default TodoBottombar;