Release v1.1.2 (#5)

* rename: move hooks

* remove: unused

* doc: README

* remove: unused

* remove: unneed permissions

* chore: update version

* fix: permission

* docs: add pr template

* chore: run formattor

Author: stonechoe

.env

@@ -2,7 +2,7 @@ VITE_TEST262_RAW_URL = "https://raw.githubusercontent.com/tc39/test262/3a7a72aef
 VITE_TEST262_URL = "https://github.com/tc39/test262/blob/3a7a72aef5009eb22117231d40f9a5a66a9a595a/test/"
 VITE_DOUBLE_DEBUGGER_URL = "https://es-meta.github.io/playground"
 VITE_RESOURCE_URL = "https://raw.githubusercontent.com/es-meta/ecma-visualizer-resources/refs/heads/main/"
-VITE_EXTENSION_VERSION = "1.1.1"
+VITE_EXTENSION_VERSION = "1.1.2"
 VITE_ESMETA_URL = "https://es-meta.github.io/"
 VITE_ESMETA_GITHUB_URL = "https://github.com/es-meta/esmeta"
 VITE_ENABLED_SPEC_URL = "https://tc39.es/ecma262/2024|https://262.ecma-international.org/15.0"

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+## What's Changed
+
+<!-- Add screenshots if needed -->
+
+## Related Issues
+
+## Message to Reviewers

README.md

@@ -4,7 +4,7 @@
 
 **ECMAScript Visualizer** is a Chrome extension that provides example programs for each step of the ECMAScript/JavaScript specification [(ECMA-262)](https://tc39.es/ecma262), powered by [ESMeta](https://github.com/es-meta/esmeta).
 
-## Manual Installation Guide
+## Manual Installation Guide (Chrome)
 
 Download the repository and enter the directory:
 
@@ -15,14 +15,26 @@ cd ecma-visualizer
 
 Then, run the following command to build the visualizer:
 
-```
-npm install && npm run build
+```bash
+$ npm install && npm run build
 ```
 
 And follow the instructions below to install the visualizer extension:
 
 1. Open the Chrome browser and enter `chrome://extensions/`.
 2. Turn on the Developer mode on the top right corner.
-3. Click the Load unpacked button and select the `ecma-visualizer/dist` directory.
+3. Click the Load unpacked button and select the `ecma-visualizer/.output/chrome-mv3` directory.
 
 The chrome extension currently works on ES2024 web page: https://tc39.es/ecma262/2024/.
+
+## Other Browsers
+
+While other browsers like Firefox and Edge are not officially supported, the project includes polyfills and can be built targeting those browsers. You can try the following steps:
+
+```bash
+$ npm install
+$ npx tsc -b && npx wxt build -b firefox   # for Firefox
+$ npx tsc -b && npx wxt build -b edge      # for Microsoft Edge
+```
+
+The built extension will be located in the `.output` directory. To install the extension, refer to your browser’s documentation on loading unpacked extensions. Note that compatibility may vary.

entrypoints/background/index.ts

@@ -12,18 +12,19 @@ export default defineBackground(() => {
       targetWindowId: activeInfo.windowId,
       payload: {
         type: CUSTOM_IS_SUPPORTED,
-        dataSupported: url.isSupportedSpec(tab.url ?? ""),
+        dataSupported: tab.url ? url.isSupportedSpec(tab.url) : false,
       },
     } satisfies Message);
   });
-  browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+
+  browser.tabs.onUpdated.addListener(async (_tabId, changeInfo, tab) => {
     if (changeInfo.url) {
       browser.runtime.sendMessage({
         from: "background",
         targetWindowId: tab.windowId,
         payload: {
           type: CUSTOM_IS_SUPPORTED,
-          dataSupported: url.isSupportedSpec(changeInfo.url ?? ""),
+          dataSupported: tab.url ? url.isSupportedSpec(tab.url) : false,
         },
       } satisfies Message);
     }

entrypoints/sidepanel/features/callstack.tsx

@@ -1,5 +1,4 @@
 import { ArrowUpIcon, LayersIcon, Trash2Icon } from "lucide-react";
-import { useAtom, useAtomValue } from "jotai";
 
 import { callStackAtom, convertedToNameCallStackAtom } from "../atoms/app";
 import { SuspenseBoundary } from "../components/suspense-boundary";

entrypoints/sidepanel/features/notify.tsx

@@ -1,26 +1,22 @@
-import { useAtomValue } from "jotai";
-import { jotaiStore } from "@/entrypoints/sidepanel/atoms/store";
-import { currentTabSupported } from "@/entrypoints/sidepanel/atoms/app";
+import { currentTabSupported } from "../atoms/app";
 
 export function NotifyStrip() {
-  const isSupported = useAtomValue(currentTabSupported);
+  const [isSupported, setIsSupported] = useAtom(currentTabSupported);
 
-  useEffect(() => {
+  useEffect(() =>
     fire(async () => {
-      const windowId = (await browser.windows.getCurrent())?.id;
-      if (windowId === undefined) {
-        jotaiStore.set(currentTabSupported, true);
-        return;
+      const tabs = await browser.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      const activeTab = tabs.at(0);
+      if (activeTab) {
+        setIsSupported(
+          activeTab.url ? url.isSupportedSpec(activeTab.url) : false,
+        );
       }
-      const currentTab = (
-        await browser.tabs.query({ windowId, active: true })
-      ).at(0);
-      jotaiStore.set(
-        currentTabSupported,
-        url.isSupportedSpec(currentTab?.url ?? ""),
-      );
-    });
-  });
+    }),
+  );
 
   if (isSupported) {
     return null;
@@ -36,7 +32,7 @@ export function NotifyStrip() {
           )
         }
       >
-        ! Current tab is not supported
+        ⚠️ Current tab is not supported
       </button>
     </aside>
   );

entrypoints/sidepanel/features/program.tsx

@@ -1,8 +1,7 @@
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { Code, PlayIcon } from "lucide-react";
-import { usePreferredColorScheme } from "./hooks/use-preferred-color-scheme";
-import { atom, useAtom, useAtomValue } from "jotai";
+import { atom } from "jotai";
 import { programAtom, selectionAtom } from "../atoms/app";
 import { SuspenseBoundary } from "../components/suspense-boundary";
 import { ErrorConsumer, KnownError } from "../components/ErrorConsumer";

entrypoints/sidepanel/features/test262.tsx

@@ -5,7 +5,6 @@ import {
   LoaderCircleIcon,
 } from "lucide-react";
 import { useVirtualizer, Virtualizer } from "@tanstack/react-virtual";
-import { useAtomValue } from "jotai";
 import { selectionAtom, test262Atom } from "../atoms/app";
 import { handleDownload, rawUrl } from "../util/download-file";
 import { Card, CardHeader } from "../components/card";

entrypoints/sidepanel/util/tab.ts

@@ -0,0 +1,3 @@
+export { useAtomValue, useAtom, useSetAtom } from "jotai";
+export * from "./use-media-query";
+export * from "./use-preferred-color-scheme";