Merge pull request #20 from arethetypeswrong/web-improvements

Implement links to results

Author: andrewbranch

README.md

@@ -35,7 +35,6 @@ This project attempts to analyze npm package contents for issues with their Type
 The first things on my roadmap:
 
 - More thorough explanations of problems
-- Direct links to results
 - Support for DefinitelyTyped analysis
 - Official TypeScript module documentation to link to
 

package-lock.json

@@ -16,6 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@arethetypeswrong/core": "file:../core",
+    "immer": "^9.0.21",
     "validate-npm-package-name": "^5.0.0"
   },
   "devDependencies": {

packages/web/package.json

@@ -1,23 +1,35 @@
 import validatePackgeName from "validate-npm-package-name";
 import type { ResultMessage } from "../worker/worker.ts";
 import { subscribeRenderer } from "./renderer.ts";
-import { updateState, type PackageInfo, type ParsedPackageSpec, getState } from "./state.ts";
+import { updateState, type PackageInfo, type ParsedPackageSpec, getState, subscribe, type State } from "./state.ts";
 import { shallowEqual } from "./utils/shallowEqual.ts";
 
 // Good grief https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
 const semverRegex =
   /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
 const worker = new Worker(new URL("../worker/worker.ts", import.meta.url), { type: "module" });
-worker.onmessage = (event: MessageEvent<ResultMessage>) => {
+worker.onmessage = async (event: MessageEvent<ResultMessage>) => {
   updateState((state) => {
     state.checks = event.data.data;
     state.isLoading = false;
     state.message = undefined;
   });
+
+  const params = new URLSearchParams(location.search);
+  const state = getState();
+  if (state.packageInfo.parsed) {
+    params.set(
+      "p",
+      `${state.packageInfo.parsed.packageName}${
+        state.packageInfo.info?.version ? `@${state.packageInfo.info.version}` : ""
+      }`
+    );
+    history.replaceState(null, "", `?${params}`);
+  }
 };
 
 subscribeRenderer({
-  onPackageNameInput: debounce(onPackageNameInput, 300),
+  onPackageNameInput,
   onCheck,
   onSelectFile: async (file) => {
     const arrayBuffer = await file.arrayBuffer();
@@ -26,7 +38,26 @@ subscribeRenderer({
   },
 });
 
-async function onPackageNameInput(value: string) {
+subscribe(debounce(getPackageInfo, 300));
+
+if (location.search) {
+  const packageNameInput = document.getElementById("package-spec") as HTMLInputElement;
+  const params = new URLSearchParams(location.search);
+  const packageSpec = params.get("p");
+  if (packageSpec) {
+    packageNameInput.value = packageSpec;
+    onPackageNameInput(packageSpec);
+    getPackageInfo().then(() => {
+      const info = getState().packageInfo.info;
+      console.log(info);
+      if (info && info.size && info.size < 1_000_000 && !navigator.connection?.saveData) {
+        onCheck();
+      }
+    });
+  }
+}
+
+function onPackageNameInput(value: string) {
   value = value.trim();
   if (!value) {
     updateState((state) => {
@@ -49,15 +80,20 @@ async function onPackageNameInput(value: string) {
     });
     return;
   }
-
   if (!shallowEqual(getState().packageInfo.parsed, parsed.data)) {
     updateState((state) => {
       state.packageInfo.parsed = parsed.data;
       state.checks = undefined;
     });
+  }
+}
 
+async function getPackageInfo(prevState?: State) {
+  const state = getState();
+  const parsed = state.packageInfo.parsed;
+  if (parsed && (!prevState || !shallowEqual(prevState.packageInfo.parsed, parsed))) {
     try {
-      const info = await getPackageInfo(parsed.data);
+      const info = await fetchPackageInfo(parsed);
       updateState((state) => {
         state.packageInfo.info = info;
         state.message = {
@@ -79,10 +115,16 @@ async function onPackageNameInput(value: string) {
   }
 }
 
-function onCheck() {
+async function onCheck() {
+  if (!getState().packageInfo.parsed) {
+    return;
+  }
+  if (!getState().packageInfo.info) {
+    await getPackageInfo();
+  }
   const { packageInfo } = getState();
   if (packageInfo.info && packageInfo.parsed) {
-    updateState((state) => (state.isLoading = true));
+    updateState((state) => void (state.isLoading = true));
     worker.postMessage({
       kind: "check-package",
       packageName: packageInfo.parsed.packageName,
@@ -91,7 +133,7 @@ function onCheck() {
   }
 }
 
-async function getPackageInfo({ packageName, version }: ParsedPackageSpec): Promise<PackageInfo> {
+async function fetchPackageInfo({ packageName, version }: ParsedPackageSpec): Promise<PackageInfo> {
   try {
     const response = await fetch(`https://registry.npmjs.org/${packageName}/${version || "latest"}`);
     if (!response.ok) {
@@ -100,6 +142,7 @@ async function getPackageInfo({ packageName, version }: ParsedPackageSpec): Prom
     const data = await response.json();
     return {
       size: data.dist.unpackedSize,
+      version: data.version,
     };
   } catch (error) {
     throw new Error("Failed to get package info");

packages/web/src/main.ts

@@ -1,4 +1,4 @@
-import { subscribe, type State } from "./state";
+import { subscribe, getState } from "./state";
 import { updateView } from "./utils/updateView";
 import { CheckButton } from "./views/CheckButton";
 import { ChecksTable } from "./views/ChecksTable";
@@ -50,14 +50,15 @@ export function subscribeRenderer(events: Events) {
 
     subscribe(render);
 
-    function render(state: State) {
+    function render() {
+      const state = getState();
       updateView(messageElement, Message, { isError: state.message?.isError, text: state.message?.text || "" });
       updateView(problemsElement, ProblemList, {
         problems: state.checks?.problemSummaries,
         containsTypes: state.checks?.analysis.containsTypes,
       });
       updateView(resolutionsElement, ChecksTable, { checks: state.checks });
-      updateView(checkButton, CheckButton, { disabled: !state.packageInfo.info });
+      updateView(checkButton, CheckButton, { disabled: !state.packageInfo.parsed });
       updateView(detailsElement, Details, { analysis: state.checks?.analysis });
     }
   });

packages/web/src/renderer.ts

@@ -1,4 +1,5 @@
 import type { Analysis, ProblemSummary, Problem } from "@arethetypeswrong/core";
+import { produce } from "immer";
 
 export interface Checks {
   analysis: Analysis;
@@ -28,9 +29,10 @@ export interface PackageInfoState {
 
 export interface PackageInfo {
   size: number | undefined;
+  version: string;
 }
 
-const state: State = {
+let state: State = {
   isLoading: false,
   packageInfo: {},
 };
@@ -41,16 +43,17 @@ type DeepReadonly<T extends object> = {
 
 const subscribers: Set<(state: DeepReadonly<State>) => void> = new Set();
 
-export function subscribe(callback: (state: DeepReadonly<State>) => void): () => void {
+export function subscribe(callback: (prevState: DeepReadonly<State>) => void): () => void {
   subscribers.add(callback);
   return () => {
     subscribers.delete(callback);
   };
 }
 
-export function updateState(updater: (state: State) => void): void {
-  updater(state);
-  subscribers.forEach((callback) => callback(state));
+export function updateState(updater: (draftState: State) => void): void {
+  const prevState = state;
+  state = produce(state, updater);
+  subscribers.forEach((callback) => callback(prevState));
 }
 
 export function getState(): DeepReadonly<State> {

packages/web/src/state.ts

@@ -2,4 +2,9 @@ export {};
 
 declare global {
   const COMMIT: string;
+  interface Navigator {
+    connection?: {
+      saveData: boolean;
+    };
+  }
 }

packages/web/src/types.ts

@@ -1,5 +1,3 @@
-import "./patchGlobal";
-
 import {
   checkPackage,
   checkTgz,