Support direct links

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",
+    "fflate": "^0.7.4",
     "immer": "^9.0.21",
     "validate-npm-package-name": "^5.0.0"
   },

packages/web/package.json

@@ -1,19 +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, subscribe, type State } from "./state.ts";
+import {
+  updateState,
+  type PackageInfo,
+  type ParsedPackageSpec,
+  getState,
+  subscribe,
+  type State,
+  deserializeState,
+  setState,
+  serializeState,
+} 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 state = getState();
+  const serializedState = await serializeState(state);
+  const params = new URLSearchParams(location.search);
+  params.set("s", serializedState);
+  history.replaceState(null, "", `?${params}`);
 };
 
 subscribeRenderer({
@@ -28,6 +44,22 @@ subscribeRenderer({
 
 subscribe(debounce(getPackageInfo, 300));
 
+if (location.search) {
+  const params = new URLSearchParams(location.search);
+  const serializedState = params.get("s");
+  if (serializedState) {
+    deserializeState(serializedState).then((state) => {
+      const packageNameInput = document.getElementById("package-spec") as HTMLInputElement;
+      if (state.packageInfo.parsed) {
+        packageNameInput.value = `${state.packageInfo.parsed.packageName}${
+          state.packageInfo.info?.version ? `@${state.packageInfo.info.version}` : ""
+        }`;
+      }
+      setState(state);
+    });
+  }
+}
+
 async function onPackageNameInput(value: string) {
   value = value.trim();
   if (!value) {
@@ -113,6 +145,7 @@ async function fetchPackageInfo({ packageName, version }: ParsedPackageSpec): Pr
     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,5 @@
 import type { Analysis, ProblemSummary, Problem } from "@arethetypeswrong/core";
+import { gunzip, gzip } from "fflate";
 import { produce } from "immer";
 
 export interface Checks {
@@ -29,6 +30,7 @@ export interface PackageInfoState {
 
 export interface PackageInfo {
   size: number | undefined;
+  version: string;
 }
 
 let state: State = {
@@ -58,3 +60,55 @@ export function updateState(updater: (draftState: State) => void): void {
 export function getState(): DeepReadonly<State> {
   return state;
 }
+
+export function setState(newState: State): void {
+  const prevState = state;
+  state = newState;
+  subscribers.forEach((callback) => callback(prevState));
+}
+
+export async function serializeState(state = getState()): Promise<string> {
+  const json = JSON.stringify([state.packageInfo, state.checks], (key, value) => {
+    if (key === "exports" || key === "trace") return undefined;
+    return value;
+  });
+
+  return new Promise((resolve, reject) => {
+    gzip(new TextEncoder().encode(json), (error, data) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve(btoa(String.fromCharCode(...data)));
+      }
+    });
+  });
+}
+
+export async function deserializeState(serializedState: string): Promise<State> {
+  const json = new TextDecoder().decode(
+    await new Promise((resolve, reject) =>
+      gunzip(
+        Uint8Array.from(
+          atob(serializedState)
+            .split("")
+            .map((c) => c.charCodeAt(0))
+        ),
+        (error, data) => {
+          if (error) {
+            reject(error);
+          } else {
+            resolve(data);
+          }
+        }
+      )
+    )
+  );
+
+  const [packageInfo, checks] = JSON.parse(json) as [PackageInfoState, Checks];
+
+  return {
+    isLoading: false,
+    packageInfo,
+    checks,
+  };
+}

packages/web/src/state.ts

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