WebKit · lpardosixtosMs · Jun 19, 2025 · Jun 20, 2025 · Jun 20, 2025 · Jun 20, 2025
diff --git a/experimental/javascript-wc-indexeddb/.gitignore b/experimental/javascript-wc-indexeddb/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules
diff --git a/experimental/javascript-wc-indexeddb/README.md b/experimental/javascript-wc-indexeddb/README.md
@@ -0,0 +1,72 @@
+# 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 search parameters:
+
+-   **Vanilla IndexedDB** (default): Uses the native IndexedDB API
+    -   Access via: `http://localhost:7005/?storageType=vanilla` or `http://localhost:7005/`
+-   **Dexie.js**: Uses the Dexie.js wrapper library for IndexedDB
+    -   Access via: `http://localhost:7005/?storageType=dexie`
+
+Simply use the URL parameters to switch between implementations. The database will be reset when switching between storage types.
+
+Navigation within the app uses simple hash-based routes like `#/active`, `#/completed`, or `#/` for all todos.
+
+## 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/
+```
diff --git a/experimental/javascript-wc-indexeddb/dist/index.html b/experimental/javascript-wc-indexeddb/dist/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="A TodoMVC workload app for Speedometer!" />
+        <title>TodoMVC: JavaScript Web Components</title>
+        <link rel="stylesheet" href="styles/global.css" />
+        <link rel="stylesheet" href="styles/header.css" />
+        <link rel="stylesheet" href="styles/footer.css" />
+        <!-- load these first, so that they are registered by the time the app components needs them -->
+        <script type="module" src="src/components/todo-topbar/todo-topbar.component.js"></script>
+        <script type="module" src="src/components/todo-list/todo-list.component.js"></script>
+        <script type="module" src="src/components/todo-bottombar/todo-bottombar.component.js"></script>
+        <script type="module" src="src/components/todo-app/todo-app.component.js"></script>
+    </head>
+
+    <body>
+        <header class="header">
+            <a href="#" style="text-decoration: none"><h1 class="title">todos</h1></a>
+        </header>
+        <todo-app></todo-app>
+        <footer class="footer">
+            <p class="footer-text">Click on input field to write your todo.</p>
+            <p class="footer-text">At least one character is needed to be a valid entry.</p>
+            <p class="footer-text">Press 'enter' to add the todo.</p>
+            <p class="footer-text">Double-click to edit a todo</p>
+        </footer>
+        <script type="module" src="src/index.mjs"></script>
+    </body>
+</html>