feat: KS snapshot analyzer

A new project that should allow users to easily inspect the contents of their settings snapshots.
kitten-science · Dec 25, 2023 · 1fef750 · 1fef750
1 parent b3bbe97
commit 1fef750
Show file tree

Hide file tree

Showing 8 changed files with 504 additions and 9 deletions.
diff --git a/packages/snapshot-analyzer/package.json b/packages/snapshot-analyzer/package.json
@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "name": "@kitten-science/snapshot-analyzer",
+  "version": "0.0.1",
+  "description": "Displays information about Kittten Scientists settings.",
+  "license": "MIT",
+  "author": "Oliver Salzburg <oliver.salzburg@gmail.com>",
+  "type": "module",
+  "main": "index.html",
+  "scripts": {
+    "snapshot-analyzer:build": "vite build",
+    "snapshot-analyzer:serve": "vite serve"
+  },
+  "dependencies": {
+    "@kitten-science/kitten-scientists": "workspace:*",
+    "@oliversalzburg/js-utils": "0.0.27",
+    "lz-string": "1.5.0",
+    "tslib": "2.6.2"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "vite": "5.0.10",
+    "vite-plugin-html": "3.2.0"
+  },
+  "engines": {
+    "node": "^20.0.0"
+  }
+}
diff --git a/packages/snapshot-analyzer/source/favicon.ico b/packages/snapshot-analyzer/source/favicon.ico
diff --git a/packages/snapshot-analyzer/source/index.html b/packages/snapshot-analyzer/source/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>KS Snapshot Analyzer</title>
+    <meta property="og:title" content="Snapshot Analyzer" />
+    <meta
+      property="og:description"
+      content="Displays information about Kittten Scientists settings."
+    />
+    <meta property="og:url" content="https://kitten-science.com/snapshot-analyzer/" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <style>
+      html,
+      body {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+
+        textarea {
+          flex: 1;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <input id="input" type="text" placeholder="Paste KS settings export here." />
+    <textarea id="parsed" placeholder="Parsed settings will be shown here." readonly></textarea>
+  </body>
+  <script src="main.ts" type="module"></script>
+</html>
diff --git a/packages/snapshot-analyzer/source/main.ts b/packages/snapshot-analyzer/source/main.ts
@@ -0,0 +1,12 @@
+import { UserScript } from "@kitten-science/kitten-scientists";
+import { getDocumentElementTypeByIdStrict } from "@oliversalzburg/js-utils/dom/core.js";
+import { decompressFromBase64 } from "lz-string";
+
+const input = getDocumentElementTypeByIdStrict(document, "input", HTMLInputElement);
+const parsed = getDocumentElementTypeByIdStrict(document, "parsed", HTMLTextAreaElement);
+
+input.addEventListener("change", (event: Event) => {
+  // Pre-decompress
+  const decompressed = decompressFromBase64(input.value);
+  parsed.value = JSON.stringify(UserScript.decodeSettings(decompressed), undefined, 2);
+});
diff --git a/packages/snapshot-analyzer/tsconfig.json b/packages/snapshot-analyzer/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "build",
+    "rootDir": "source"
+  },
+  "include": ["../../@types", "source"],
+  "references": []
+}
diff --git a/packages/snapshot-analyzer/vite.config.js b/packages/snapshot-analyzer/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import { createHtmlPlugin } from "vite-plugin-html";
+
+export default defineConfig({
+  base: "/snapshot-analyzer/",
+  root: "source",
+  build: {
+    modulePreload: {
+      polyfill: false,
+    },
+  },
+  plugins: [createHtmlPlugin()],
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -15,6 +15,9 @@
     },
     {
       "path": "packages/kitten-scientists"
+    },
+    {
+      "path": "packages/snapshot-analyzer"
     }
   ]
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,9 @@ @@
         },
         {
           "path": "packages/kitten-scientists"
+        },
+        {
+          "path": "packages/snapshot-analyzer"
         }
       ]
     }