add comment re styles / nanoid

resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-app/todo-app.component.js

@@ -1,6 +1,8 @@
 import template from "./todo-app.template.js";
 import { useRouter } from "../../hooks/useRouter.js";
 
+// [TO-D0]: use local package for styles when available:
+// https://github.com/WebKit/Speedometer/pull/254
 import globalStyles from "../../styles/global.constructable.js";
 import appStyles from "../../styles/app.constructable.js";
 import mainStyles from "../../styles/main.constructable.js";

resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-bottombar/todo-bottombar.component.js

@@ -1,5 +1,7 @@
 import template from "./todo-bottombar.template.js";
 
+// [TO-D0]: use local package for styles when available:
+// https://github.com/WebKit/Speedometer/pull/254
 import globalStyles from "../../styles/global.constructable.js";
 import bottombarStyles from "../../styles/bottombar.constructable.js";
 

resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-item/todo-item.component.js

@@ -2,6 +2,8 @@ import template from "./todo-item.template.js";
 import { useDoubleClick } from "../../hooks/useDoubleClick.js";
 import { useKeyListener } from "../../hooks/useKeyListener.js";
 
+// [TO-D0]: use local package for styles when available:
+// https://github.com/WebKit/Speedometer/pull/254
 import globalStyles from "../../styles/global.constructable.js";
 import itemStyles from "../../styles/todo-item.constructable.js";
 

resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-list/todo-list.component.js

@@ -1,6 +1,8 @@
 import template from "./todo-list.template.js";
 import TodoItem from "../todo-item/todo-item.component.js";
 
+// [TO-D0]: use local package for styles when available:
+// https://github.com/WebKit/Speedometer/pull/254
 import globalStyles from "../../styles/global.constructable.js";
 import listStyles from "../../styles/todo-list.constructable.js";
 

resources/todomvc/vanilla-examples/javascript-web-components/src/components/todo-topbar/todo-topbar.component.js

@@ -1,20 +1,12 @@
 import template from "./todo-topbar.template.js";
 import { useKeyListener } from "../../hooks/useKeyListener.js";
+import { nanoid } from "../../utils/nanoid.js";
 
+// [TO-D0]: use local package for styles when available:
+// https://github.com/WebKit/Speedometer/pull/254
 import globalStyles from "../../styles/global.constructable.js";
 import topbarStyles from "../../styles/topbar.constructable.js";
 
-let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
-
-function nanoid(size = 21) {
-    let id = "";
-    let i = size;
-    while (i--)
-        id += urlAlphabet[(Math.random() * 64) | 0];
-
-    return id;
-}
-
 class TodoTopbar extends HTMLElement {
     static get observedAttributes() {
         return ["total-items", "active-items", "completed-items"];

resources/todomvc/vanilla-examples/javascript-web-components/src/utils/nanoid.js

@@ -0,0 +1,42 @@
+
+/* Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
+
+The MIT License (MIT)
+
+Copyright 2017 Andrey Sitnik <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */
+
+// This alphabet uses `A-Za-z0-9_-` symbols.
+// The order of characters is optimized for better gzip and brotli compression.
+// References to the same file (works both for gzip and brotli):
+// `'use`, `andom`, and `rict'`
+// References to the brotli default dictionary:
+// `-26T`, `1983`, `40px`, `75px`, `bush`, `jack`, `mind`, `very`, and `wolf`
+let urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+
+export function nanoid(size = 21) {
+    let id = "";
+    // A compact alternative for `for (var i = 0; i < step; i++)`.
+    let i = size;
+    while (i--) {
+        // `| 0` is more compact and faster than `Math.floor()`.
+        id += urlAlphabet[(Math.random() * 64) | 0];
+    }
+    return id;
+}