faster builds with esbuild

dbuezas · Sep 16, 2021 · 70de736 · 70de736
1 parent 3c5d7f9
commit 70de736
Show file tree

Hide file tree

Showing 19 changed files with 2,477 additions and 38,211 deletions.
diff --git a/chrome-palette.zip b/chrome-palette.zip
diff --git a/craco.config.js b/craco.config.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,61 +4,27 @@
   "private": false,
   "author": "[email protected]",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
     "@types/node": "^12.20.24",
     "@types/react": "^17.0.20",
     "@types/react-dom": "^17.0.9",
     "date-fns": "^2.23.0",
+    "esbuild": "^0.12.28",
     "react": "^17.0.2",
     "react-command-palette": "^0.16.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
     "typescript": "^4.4.2",
     "web-vitals": "^1.1.2",
-    "webextension-polyfill": "^0.8.0"
+    "webextension-polyfill": "^0.8.0",
+    "ws": "^8.2.2"
   },
   "scripts": {
-    "dev": "cp ./public/popup-dev.html ./dist/popup.html && craco start",
-    "start": "craco start & npm-watch & wait",
-    "build": "./script/build.sh",
-    "test": "craco test",
-    "eject": "craco eject"
-  },
-  "watch": {
-    "build": {
-      "patterns": [
-        "src",
-        "public"
-      ],
-      "extensions": "*"
-    }
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "start": "node script/build.js",
+    "build": "NODE_ENV=production node script/build.js",
+    "upgrade": "npx npm-check -u"
   },
   "devDependencies": {
-    "@craco/craco": "^6.2.0",
     "@types/webextension-polyfill": "^0.8.0",
-    "craco-esbuild": "^0.4.0",
-    "npm-watch": "^0.11.0",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "@types/ws": "^7.4.7",
+    "npm-watch": "^0.11.0"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -31,5 +31,8 @@
         "linux": "Ctrl+Shift+P"
       }
     }
-  }
+  },
+  "web_accessible_resources": [
+    "date.txt"
+  ]
 }
diff --git a/public/popup-dev.html b/public/popup-dev.html
diff --git a/public/popup.html b/public/popup.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Chrome Palette</title>
+    <link href="/bundle.css" rel="stylesheet" />
+    <script defer src="/bundle.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/script/build.js b/script/build.js
@@ -0,0 +1,72 @@
+// @ts-check
+const { WebSocketServer } = (WebSocket = require("ws"));
+const chokidar = require("chokidar");
+const { execSync } = require("child_process");
+const esbuild = require("esbuild");
+
+const date = new Date().toString();
+const isProd = process.env.NODE_ENV === "production";
+
+const synchPublic = async () => {
+  execSync("cp public/* dist/");
+};
+const watchOptn = {
+  // awaitWriteFinish: {stabilityThreshold:100, pollInterval:50},
+  ignoreInitial: true,
+};
+async function build() {
+  execSync("rm -rf dist/");
+  execSync("mkdir dist");
+  await synchPublic();
+  console.time("build");
+  const result = await esbuild.build({
+    entryPoints: ["src/index.tsx"],
+    bundle: true,
+    minify: isProd,
+    metafile: true,
+    sourcemap: isProd ? false : "inline",
+    outfile: "dist/bundle.js",
+    incremental: !isProd,
+    define: {
+      NODE_ENV: process.env.NODE_ENV,
+      "process.env.NODE_ENV": `"${process.env.NODE_ENV}"`,
+      "process.env.REACT_APP_BUILD_TIME": `"${date}"`,
+    },
+  });
+  console.timeEnd("build");
+
+  let text =
+    result.metafile && (await esbuild.analyzeMetafile(result.metafile));
+  console.log(text);
+
+  if (isProd) {
+    execSync("rm chrome-palette.zip");
+    execSync("zip -r chrome-palette.zip dist/");
+  } else {
+    const wss = new WebSocketServer({ port: 8081 });
+    wss.on("connection", () => console.log(wss.clients.size));
+    wss.on("close", () => console.log(wss.clients.size));
+    const sendToClients = (/** @type {{ action: string; }} */ message) => {
+      wss.clients.forEach(function each(
+        /** @type {{ readyState: number; send: (arg0: string) => void; }} */ client
+      ) {
+        if (client.readyState === WebSocket.OPEN) {
+          console.log("sending");
+          client.send(JSON.stringify(message));
+        }
+      });
+    };
+    chokidar.watch("public", watchOptn).on("all", async (...args) => {
+      console.log(args);
+      await synchPublic();
+      sendToClients({ action: "update-app" });
+    });
+    chokidar.watch("src", watchOptn).on("all", async (...args) => {
+      console.log(args);
+      await result.rebuild?.();
+      sendToClients({ action: "update-app" });
+    });
+  }
+}
+
+build();
diff --git a/script/build.sh b/script/build.sh
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,4 @@
-import React, {
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useRef, useState } from "react";
 import useDefaultCommands, { Command } from "./hooks/commands";
 //@ts-expect-error
 import CommandPalette from "react-command-palette";
@@ -13,6 +9,7 @@ import "./App.css";
 import Header from "./Header";
 import SampleAtomCommand from "./SampleAtomCommand";
 import {
+  useAudibleTabSuggestions,
   useHistorySuggestions,
   useSwitchTabSuggestions,
   useTemplatedSuggestions,
@@ -27,6 +24,7 @@ function App() {
   const commandPalette = useRef<any>(null);
   const input = usePaletteInput(commandPalette);
   const commands = sortByUsed([
+    ...useAudibleTabSuggestions(input),
     ...useSwitchTabSuggestions(input),
     ...useHistorySuggestions(input),
     ...useDefaultCommands(input),
@@ -76,7 +74,10 @@ function App() {
       onSelect={(command: Command) => {
         storeLastUsed(command);
       }}
-      placeholder="Search for a commands"
+      onHighlight={(command?: Command) => {
+          command?.onHighlighted?.();
+      }}
+      placeholder="Search for a command"
       renderCommand={SampleAtomCommand}
       showSpinnerOnSelect={false}
     />

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import "./Header.css";
-import browser from "./browser";
+import browser from "webextension-polyfill";
 
 function useShortcut() {
   const [shortcut, setShortcut] = useState("unset");

diff --git a/src/SampleAtomCommand.css b/src/SampleAtomCommand.css
@@ -36,6 +36,7 @@
 .atom-icon {
   float: left;
   height: 15px;
+  width: 15px;
   margin-right: 3px;
 }
 

diff --git a/src/SampleAtomCommand.tsx b/src/SampleAtomCommand.tsx
@@ -22,12 +22,12 @@ export default function SampleAtomCommand({
   return (
     <div className="atom-item">
       <span className={`atom-category ${category}`}>{category}</span>
-      <img className={"atom-icon"} src={icon} alt=""></img>
+      {icon && <img className={"atom-icon"} src={icon} alt=""></img>}
       {highlight ? (
         <span dangerouslySetInnerHTML={{ __html: highlight }} />
-        ) : (
-          <span>{name}</span>
-          )}
+      ) : (
+        <span>{name}</span>
+      )}
       <span className="atom-shortcut">{shortcut}</span>
       <span className="atom-keyword">{keyword}</span>
       <span className="atom-timeAgo">{timeAgo}</span>

diff --git a/src/browser.ts b/src/browser.ts
diff --git a/src/hooks/commands.ts b/src/hooks/commands.ts
@@ -1,7 +1,7 @@
 // adapted from https://github.com/ssundarraj/commander/blob/master/src/js/actions.js
 
 import { useEffect, useState } from "react";
-import browser from "../browser";
+import browser from "webextension-polyfill";
 import { resetHistory } from "../last-used";
 import { parseCommand } from "./parseCommand";
 import { UseSuggestionParam } from "./searchCommands";
@@ -11,6 +11,7 @@ export type Command = {
   shortcut?: string;
   keyword?: string;
   command: Function;
+  onHighlighted?: Function;
 };
 
 function useDefaultCommands({
@@ -342,6 +343,13 @@ function useDefaultCommands({
         },
         keyword: "h>",
       },
+      {
+        name: "Throw error",
+        category: "Dev",
+        command: async function () {
+          throw new Error("on purpose")
+        },
+      },
     ];
     setCommands(commands);
   }, [setInputValue]);

diff --git a/src/hooks/searchCommands.ts b/src/hooks/searchCommands.ts
@@ -2,13 +2,48 @@ import { useEffect, useState } from "react";
 import { Command } from "./commands";
 import { formatDistance } from "date-fns";
 import { parseCommand } from "./parseCommand";
-import browser from "../browser";
+import browser from "webextension-polyfill";
 
 export type UseSuggestionParam = {
   setInputValue: (a: string) => void;
   inputValue: string;
 };
 
+export function useAudibleTabSuggestions({
+  setInputValue,
+  inputValue,
+}: UseSuggestionParam) {
+  const [commands, setCommands] = useState<Command[]>([]);
+  useEffect(() => {
+    const fetch = async () => {
+      if (!browser) return;
+      const allTabs = await browser.tabs.query({ audible:true });
+      const actions:Command[] = allTabs.map(({ title, url, id, windowId }) => ({
+        name: `Sound/Audio tab: ${title}`,
+        icon: "chrome://favicon/" + url,
+        category: "Tab",
+        command: () => {
+          browser.tabs.update(id, { highlighted: true });
+          browser.windows.update(windowId!, { focused: true });
+          window.close();
+        },
+      }));
+      if (actions.length === 0){
+        actions.push({
+          name: `Sound/Audio tab: [none]`,
+          category: "Tab",
+          command: () => {
+            window.close();
+          },
+        })
+      }
+      setCommands(actions);
+    };
+    fetch().catch((e) => console.log(e));
+  }, []);
+  return commands
+}
+
 export function useSwitchTabSuggestions({
   setInputValue,
   inputValue,
@@ -23,7 +58,7 @@ export function useSwitchTabSuggestions({
         icon: "chrome://favicon/" + url,
         category: "Tab",
         command: () => {
-          browser.tabs.update(id, { active: true });
+          browser.tabs.update(id, { highlighted: true });
           browser.windows.update(windowId!, { focused: true });
           window.close();
         },