(perf) Ported to preact + better lib fix. Halved bundle size, 2x fast…

…er load
dbuezas · Oct 9, 2021 · 460bafc · 460bafc
1 parent f69089e
commit 460bafc
Show file tree

Hide file tree

Showing 12 changed files with 1,165 additions and 914 deletions.
diff --git a/chrome-palette.zip b/chrome-palette.zip
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,19 +1,20 @@
 {
   "name": "chrome-palette",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": false,
   "author": "[email protected]",
   "dependencies": {
-    "@types/node": "^12.20.24",
+    "@types/node": "^16.10.3",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "date-fns": "^2.23.0",
-    "esbuild": "^0.12.28",
+    "esbuild": "^0.13.4",
+    "preact": "^10.5.14",
     "react": "^17.0.2",
     "react-command-palette": "^0.16.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.4.2",
-    "web-vitals": "^1.1.2",
+    "web-vitals": "^2.1.1",
     "webextension-polyfill": "^0.8.0",
     "ws": "^8.2.2"
   },
@@ -24,7 +25,8 @@
   },
   "devDependencies": {
     "@types/webextension-polyfill": "^0.8.0",
-    "@types/ws": "^7.4.7",
+    "@types/ws": "^8.2.0",
+    "esbuild-plugin-alias": "^0.2.0",
     "npm-watch": "^0.11.0"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Chrome Palette",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "manifest_version": 2,
   "description": "Chrome Palette, a command palette for chrome",
   "icons": {

diff --git a/public/popup.html b/public/popup.html
@@ -13,6 +13,9 @@
     <link rel="manifest" href="/manifest.json" />
     <title>Chrome Palette</title>
     <link href="/bundle.css" rel="stylesheet" />
+    <script>
+      console.time('loading')
+    </script>
     <script defer src="/bundle.js"></script>
   </head>
   <body>

diff --git a/script/build.mjs b/script/build.mjs
@@ -3,13 +3,17 @@ import WebSocket, { WebSocketServer } from "ws";
 import chokidar from "chokidar";
 import { execSync } from "child_process";
 import esbuild from "esbuild";
+import alias from 'esbuild-plugin-alias';
 
 const date = new Date().toString();
 const isProd = process.env.NODE_ENV === "production";
 
 const synchPublic = async () => {
   execSync("cp public/* dist/");
 };
+import { createRequire } from 'module';
+const _require = createRequire(import.meta.url);
+
 const watchOptn = {
   // awaitWriteFinish: {stabilityThreshold:100, pollInterval:50},
   ignoreInitial: true,
@@ -22,6 +26,7 @@ async function build() {
   const result = await esbuild.build({
     entryPoints: ["src/index.tsx"],
     bundle: true,
+    inject: ["src/preact-shim.js"],
     minify: isProd,
     metafile: true,
     sourcemap: isProd ? false : "inline",
@@ -32,6 +37,14 @@ async function build() {
       "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
       "process.env.REACT_APP_BUILD_TIME": `"${date}"`,
     },
+    plugins: [
+      alias({
+        "react": _require.resolve("preact/compat"),
+        "react-dom/test-utils": _require.resolve("preact/test-utils"),
+        "react-dom": _require.resolve("preact/compat"),
+        "react/jsx-runtime": _require.resolve("preact/jsx-runtime"),
+      }),
+    ],
   });
   console.timeEnd("build");
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useCommandSuggestions, { Command } from "./hooks/commandsSuggestions";
 //@ts-expect-error
 import CommandPalette from "react-command-palette";
@@ -19,10 +19,40 @@ import { sortByUsed, storeLastUsed } from "./last-used";
 import usePaletteInput from "./hooks/usePaletteInput";
 import { parseInputCommand } from "./hooks/parseInputCommand";
 
+import equal from "fast-deep-equal";
+
 function App() {
   const [, forceRender] = useState({});
   const commandPalette = useRef<any>(null);
+  useEffect(() => {
+    // @TODO: fork and PR original library with fix
+    // @TODO: Add option to lib to show an empty list when the search query matches nothing (instead of falling back to the full list)
+    // Command palette LIB HACK
+    // the library ignores the search string when the commands change.
+    // this fixes it.
+    if (!commandPalette.current) return;
+    commandPalette.current.componentDidUpdate = function (prevProps: any) {
+      const { commands, open } = this.props;
+      if (open !== prevProps.open) {
+        if (open) {
+          this.handleOpenModal();
+        } else {
+          this.handleCloseModal();
+        }
+      }
+
+      if (!equal(prevProps.commands, commands)) {
+        const element: HTMLInputElement | undefined =
+          commandPalette.current.commandPaletteInput?.input;
+        const value = element?.value || "";
+        this.fetchData(); // set this.allCommands
+        this.onSuggestionsFetchRequested({ value }); // updates matching suggestions
+      }
+    };
+  }, [commandPalette.current]);
   const input = usePaletteInput(commandPalette);
+
+  // @TODO: find a full memoization strategy to keep commands list constant and avoid double fuzzy searching
   const commands = sortByUsed([
     ...useCommandSuggestions(input),
     ...useAudibleTabSuggestions(input),
@@ -33,15 +63,6 @@ function App() {
     ...useTemplatedSuggestions(input),
   ]);
 
-  useEffect(() => {
-    // blur + focus hack to let the lib know that it should recompute the matches
-    // even after changing only the commands
-    // When the commands reference changes,
-    // the CommandPalette component does not fuzzyfilter the suggestions and shows all of them instead.
-    // this fixes that
-    input.element?.blur();
-    input.element?.focus();
-  });
   return (
     <CommandPalette
       ref={commandPalette}

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import "./Header.css";
 import browser from "webextension-polyfill";
 
@@ -21,15 +21,19 @@ export default function Header() {
   return (
     <div className="header">
       <span
-      style={{
-        textDecoration: "underline",
-        cursor: "pointer",
-        color: "#4d78cc",
-      }}
-      onClick={() =>
-        browser.tabs.create({ url: "https://github.com/dbuezas/chrome-palette" })
-      }
-      >Chrome Palette</span>
+        style={{
+          textDecoration: "underline",
+          cursor: "pointer",
+          color: "#4d78cc",
+        }}
+        onClick={() =>
+          browser.tabs.create({
+            url: "https://github.com/dbuezas/chrome-palette",
+          })
+        }
+      >
+        Chrome Palette
+      </span>
       <span>
         <kbd>↑↓</kbd> to navigate
       </span>
@@ -49,10 +53,10 @@ export default function Header() {
           onClick={() =>
             browser.tabs.create({ url: "chrome://extensions/shortcuts" })
           }
-          >
+        >
           {shortcut}
         </kbd>
-          shortcut
+        shortcut
       </span>
     </div>
   );

diff --git a/src/SampleAtomCommand.tsx b/src/SampleAtomCommand.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import "./SampleAtomCommand.css";
 
 type Props = {

diff --git a/src/index.tsx b/src/index.tsx
@@ -17,4 +17,4 @@ ReactDOM.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();
diff --git a/src/preact-shim.js b/src/preact-shim.js
@@ -0,0 +1,3 @@
+// react-shim.js
+import { h, Fragment } from 'preact'
+export { h, Fragment }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,10 +14,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
   },
-  "include": [
-    "src",
-    "script"
-  ]
+  "include": ["src", "script"]
 }