Add dixiejs version and differentiate through the route

Author: Luis Pardo

experimental/javascript-wc-indexeddb/README.md

@@ -7,6 +7,17 @@ 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.
 
+## 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.

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

@@ -134,10 +134,9 @@ class TodoApp extends HTMLElement {
     }
 
     routeChange(route) {
-        const routeName = route.split("/")[1] || "all";
-        this.list.updateRoute(routeName);
-        this.bottombar.updateRoute(routeName);
-        this.topbar.updateRoute(routeName);
+        this.list.updateRoute(route);
+        this.bottombar.updateRoute(route);
+        this.topbar.updateRoute(route);
     }
 
     connectedCallback() {

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

@@ -1,4 +1,5 @@
 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";
@@ -57,13 +58,32 @@ class TodoBottombar extends HTMLElement {
         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");

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

@@ -6,13 +6,13 @@ template.innerHTML = `
         <div class="todo-status"><span class="todo-count">0</span> item left</div>
         <ul class="filter-list">
             <li class="filter-item">
-                <a id="filter-link-all" class="filter-link selected" href="#/" data-route="all">All</a>
+                <a id="filter-link-all" class="filter-link selected" href="#" data-route="all">All</a>
             </li>
             <li class="filter-item">
-                <a id="filter-link-active" class="filter-link" href="#/active" data-route="active">Active</a>
+                <a id="filter-link-active" class="filter-link" href="#" data-route="active">Active</a>
             </li>
             <li class="filter-item">
-                <a id="filter-link-completed" class="filter-link" href="#/completed" data-route="completed">Completed</a>
+                <a id="filter-link-completed" class="filter-link" href="#" data-route="completed">Completed</a>
             </li>
         </ul>
         <button id="clear-completed" class="clear-completed-button">Clear completed</button>

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

@@ -1,258 +1,14 @@
 import template from "./todo-list.template.js";
 import TodoItem from "../todo-item/todo-item.component.js";
+import { createStorageManager } from "../../storage/storage-factory.js";
 
 import globalStyles from "../../styles/global.constructable.js";
 import listStyles from "../../styles/todo-list.constructable.js";
 
-class IndexedDBManager {
-    constructor() {
-        this.dbName = "todoDB";
-        this.dbVersion = 1;
-        this.storeName = "todos";
-        this.db = null;
-        this.pendingAdditions = 0;
-        this.totalItemsToggled = 0;
-        this.totalItemsDeleted = 0;
-        this.initDB().then(() => {
-            const newDiv = document.createElement("div");
-            newDiv.classList.add("indexeddb-ready");
-            newDiv.style.display = "none";
-            document.body.append(newDiv);
-        });
-    }
-
-    initDB() {
-        return new Promise((resolve, reject) => {
-            // Delete the existing database first for clean state
-            const deleteRequest = indexedDB.deleteDatabase(this.dbName);
-
-            deleteRequest.onerror = (event) => {
-                // Continue despite error in deletion
-                this.openDatabase(resolve, reject);
-            };
-
-            deleteRequest.onsuccess = () => {
-                this.openDatabase(resolve, reject);
-            };
-
-            deleteRequest.onblocked = () => {
-                // Try opening anyway
-                this.openDatabase(resolve, reject);
-            };
-        });
-    }
-
-    openDatabase(resolve, reject) {
-        const request = indexedDB.open(this.dbName, this.dbVersion);
-
-        request.onerror = (event) => {
-            reject(event.target.error);
-        };
-
-        request.onsuccess = (event) => {
-            this.db = event.target.result;
-            resolve(this.db);
-        };
-
-        request.onupgradeneeded = (event) => {
-            const db = event.target.result;
-
-            // Create object store (since we're always creating a fresh DB now)
-            const store = db.createObjectStore(this.storeName, { keyPath: "itemNumber" });
-            store.createIndex("id", "id", { unique: true });
-            store.createIndex("title", "title", { unique: false });
-            store.createIndex("completed", "completed", { unique: false });
-            store.createIndex("priority", "priority", { unique: false });
-        };
-    }
-
-    addTodo(todo) {
-        return new Promise((resolve, reject) => {
-            // Ensure the database connection is established
-            if (!this.db) {
-                this.initDB()
-                    .then(() => this.addTodo(todo))
-                    .then(resolve)
-                    .catch(reject);
-                return;
-            }
-
-            // Add todo item to IndexedDB
-            const transaction = this.db.transaction(this.storeName, "readwrite");
-            const store = transaction.objectStore(this.storeName);
-
-            const request = store.add(todo);
-            this.pendingAdditions++;
-
-            request.onsuccess = () => {
-                if (--this.pendingAdditions === 0)
-                    window.dispatchEvent(new CustomEvent("indexeddb-add-completed", {}));
-
-                resolve(todo);
-            };
-
-            request.onerror = (event) => {
-                reject(event.target.error);
-            };
-        });
-    }
-
-    getTodos(upperItemNumber, count) {
-        return new Promise((resolve, reject) => {
-            // Ensure the database connection is established
-            if (!this.db) {
-                this.initDB()
-                    .then(() => this.getTodos(upperItemNumber, count))
-                    .then(resolve)
-                    .catch(reject);
-                return;
-            }
-
-            const transaction = this.db.transaction(this.storeName, "readonly");
-            const store = transaction.objectStore(this.storeName);
-
-            // Use IDBKeyRange to get items with itemNumber less than upperItemNumber
-            const range = IDBKeyRange.upperBound(upperItemNumber, true); // true = exclusive bound
-
-            // Open a cursor to iterate through records in descending order
-            const request = store.openCursor(range, "prev");
-
-            const items = [];
-            let itemsProcessed = 0;
-
-            request.onsuccess = (event) => {
-                const cursor = event.target.result;
-
-                // Check if we have a valid cursor and haven't reached our count limit
-                if (cursor && itemsProcessed < count) {
-                    items.push(cursor.value);
-                    itemsProcessed++;
-                    cursor.continue(); // Move to next item
-                } else {
-                    // We're done - sort items by itemNumber in descending order
-                    // for proper display order (newest to oldest)
-                    items.sort((a, b) => a.itemNumber - b.itemNumber);
-
-                    resolve(items);
-                }
-            };
-
-            request.onerror = (event) => {
-                reject(event.target.error);
-            };
-
-            // Also handle transaction errors
-            transaction.onerror = (event) => {
-                reject(event.target.error);
-            };
-        });
-    }
-
-    toggleTodo(itemNumber, completed) {
-        return new Promise((resolve, reject) => {
-            // Ensure the database connection is established
-            if (!this.db) {
-                this.initDB()
-                    .then(() => this.toggleTodo(itemNumber, completed))
-                    .then(resolve)
-                    .catch(reject);
-                return;
-            }
-
-            // Access the todo item directly by its itemNumber (keyPath)
-            const transaction = this.db.transaction(this.storeName, "readwrite");
-            const store = transaction.objectStore(this.storeName);
-
-            // Get the todo item directly using its primary key (itemNumber)
-            const getRequest = store.get(itemNumber);
-
-            getRequest.onsuccess = (event) => {
-                const todoItem = getRequest.result;
-
-                if (!todoItem) {
-                    reject(new Error(`Todo item with itemNumber '${itemNumber}' not found`));
-                    return;
-                }
-
-                // Update the completed status
-                todoItem.completed = completed;
-
-                // Save the updated item back to the database
-                const updateRequest = store.put(todoItem);
-
-                updateRequest.onsuccess = () => {
-                    if (window.numberOfItemsToAdd && ++this.totalItemsToggled === window.numberOfItemsToAdd)
-                        window.dispatchEvent(new CustomEvent("indexeddb-toggle-completed", {}));
-
-                    resolve(todoItem);
-                };
-
-                updateRequest.onerror = (event) => {
-                    reject(event.target.error);
-                };
-            };
-
-            getRequest.onerror = (event) => {
-                reject(event.target.error);
-            };
-
-            // Handle potential errors in finding the item
-            transaction.onerror = (event) => {
-                reject(event.target.error);
-            };
-
-            // Handle transaction errors
-            transaction.onerror = (event) => {
-                reject(event.target.error);
-            };
-        });
-    }
-
-    removeTodo(itemNumber) {
-        return new Promise((resolve, reject) => {
-            // Ensure the database connection is established
-            if (!this.db) {
-                this.initDB()
-                    .then(() => this.removeTodo(itemNumber))
-                    .then(resolve)
-                    .catch(reject);
-                return;
-            }
-
-            // Access the todo item directly by its itemNumber (keyPath)
-            const transaction = this.db.transaction(this.storeName, "readwrite");
-            const store = transaction.objectStore(this.storeName);
-
-            // Delete the todo item directly using its primary key (itemNumber)
-            const deleteRequest = store.delete(itemNumber);
-
-            deleteRequest.onsuccess = () => {
-                if (window.numberOfItemsToAdd && ++this.totalItemsDeleted === window.numberOfItemsToAdd)
-                    window.dispatchEvent(new CustomEvent("indexeddb-remove-completed", {}));
-
-                resolve(itemNumber);
-            };
-
-            deleteRequest.onerror = (event) => {
-                reject(event.target.error);
-            };
-
-            // Handle transaction errors
-            transaction.onerror = (event) => {
-                reject(event.target.error);
-            };
-        });
-    }
-}
-
 const MAX_ON_SCREEN_ITEMS = 10;
 
 const customListStyles = new CSSStyleSheet();
 customListStyles.replaceSync(`
-    .todo-list > todo-item {
-        display: block;
-    }
-
     .todo-list[route="completed"] > [itemcompleted="false"] {
         display: none;
     }
@@ -286,7 +42,7 @@ class TodoList extends HTMLElement {
         this.shadow.adoptedStyleSheets = [globalStyles, listStyles, customListStyles];
         this.shadow.append(node);
         this.classList.add("show-priority");
-        this.storageManager = new IndexedDBManager();
+        this.storageManager = createStorageManager();
 
         if (window.extraTodoListCssToAdopt) {
             let extraAdoptedStyleSheet = new CSSStyleSheet();
@@ -354,7 +110,7 @@ class TodoList extends HTMLElement {
                 this.listNode.setAttribute("route", "completed");
                 break;
             case "active":
-                this.listNode.setAttribute("rout", "active");
+                this.listNode.setAttribute("route", "active");
                 break;
             default:
                 this.listNode.setAttribute("route", "all");

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

@@ -7,9 +7,6 @@ import topbarStyles from "../../styles/topbar.constructable.js";
 
 const customListStyles = new CSSStyleSheet();
 customListStyles.replaceSync(`
-    .toggle-all-container {
-        display: block;
-    }
     :host([total-items="0"]) .toggle-all-container {
         display: none;
     }