Merge pull request #8 from st-tech/refactor

Refactor
st-tech · Dec 10, 2024 · a89d6b1 · a89d6b1
2 parents c7f85f3 + 3d5aee1
commit a89d6b1
Show file tree

Hide file tree

Showing 25 changed files with 1,461 additions and 11 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+	"recommendations": ["svelte.svelte-vscode", "biomejs.biome"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,11 @@
 {
 	"editor.defaultFormatter": "biomejs.biome",
-	"editor.formatOnSave": true
+	"editor.formatOnSave": true,
+	"editor.codeActionsOnSave": {
+		"quickfix.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
+	},
+	"[svelte]": {
+		"editor.defaultFormatter": "svelte.svelte-vscode"
+	}
 }
diff --git a/README.md b/README.md
@@ -1,17 +1,17 @@
 # apple-app-site-association
 
-Check apple-app-site-association file.
-It works with `swcutil` command that is preinstalled in macOS.
+Check apple-app-site-association file to verify universal links.
 
 ## Usage
 
 The `verify` function detects provided path lauches the app or not.
 
-It depends on the `swcutil` command, so you must use this function in macOS and root permission.
-(If you don't like it, you can use `apple-app-site-association/sim` instead that simulates the behavior.)
+It depends on the `swcutil` command (preinstalled in macOS), so you must use this function in macOS and root permission.
+If you don't use macOS, you can use `apple-app-site-association/sim` instead that simulates the behavior.
 
 ```typescript
 import { verify, type AppleAppSiteAssociation } from "apple-app-site-association";
+// import { verify, type AppleAppSiteAssociation } from "apple-app-site-association/sim";
 
 const json = { applinks: { /* ... */ } } satisfies AppleAppSiteAssociation;
 

diff --git a/biome.json b/biome.json
@@ -7,7 +7,7 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"ignore": ["dist"]
+		"ignore": ["dist", "*.svelte"]
 	},
 	"formatter": {
 		"enabled": true,

diff --git a/demo/README.md b/demo/README.md
@@ -0,0 +1,6 @@
+# Demo
+
+```sh
+pnpm install
+pnpm dev # to start the dev server
+```
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>apple-app-site-association Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "demo",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
+	},
+	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tsconfig/svelte": "^5.0.4",
+		"svelte": "^5.2.7",
+		"svelte-check": "^4.1.0",
+		"tslib": "^2.8.1",
+		"typescript": "~5.6.2",
+		"vite": "^6.0.1"
+	},
+	"dependencies": {
+		"@tailwindcss/vite": "4.0.0-beta.6",
+		"apple-app-site-association": "workspace:*",
+		"lz-string": "^1.5.0",
+		"monaco-editor": "^0.52.0",
+		"tailwindcss": "4.0.0-beta.6"
+	}
+}
diff --git a/demo/src/App.svelte b/demo/src/App.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { createVerify } from "apple-app-site-association/sim";
+  import Editor from "./Editor.svelte";
+  import { getHash, parseHash } from "./hash";
+
+  const uuid = () => window.crypto.randomUUID();
+
+  const getHashOptions = (hash: string): { json: unknown; paths: string[] } => {
+    const fallback = {
+      json: {
+        applinks: {
+          details: [
+            {
+              appIDs: ["HOGE.com.example.app"],
+              components: [
+                { "#": "nondeeplinking", exclude: true },
+                { "/": "/search/" },
+              ],
+            },
+          ],
+        },
+      },
+      paths: ["/search/", "/", "/search/#nondeeplinking"],
+    } satisfies { json: unknown; paths: string[] };
+    if (!hash) return fallback;
+    try {
+      return parseHash(hash);
+    } catch {
+      return fallback;
+    }
+  };
+  const initial = getHashOptions(window.location.hash.slice(1));
+
+  let json = $state(JSON.stringify(initial.json, null, 2));
+  let paths = $state(initial.paths.map((p) => ({ id: uuid(), value: p })));
+  let verify = $derived(createVerify(json));
+</script>
+
+<div class="grid grid-rows-[auto_1fr] h-full">
+  <header class="flex justify-between p-4 border-b border-gray-400">
+    <h1 class="font-bold">apple-app-site-association check</h1>
+    <button
+      type="button"
+      onclick={() => {
+        const hash = getHash(
+          json,
+          paths.map((p) => p.value)
+        );
+        const url = new URL(location.href);
+        url.hash = hash;
+        window.history.replaceState(null, "", url.href);
+        navigator.clipboard.writeText(url.href).then(() => {
+          alert("URL copied to clipboard");
+        });
+      }}
+    >
+      Share
+    </button>
+  </header>
+  <main class="grid grid-cols-2">
+    <Editor bind:value={json} />
+    <div class="p-4">
+      <h2 class="font-bold">Paths</h2>
+      <ul class="grid grid-cols-[auto_1fr_auto] gap-1 font-mono">
+        {#each paths as path (path.id)}
+          <li class="contents">
+            <button
+              type="button"
+              onclick={() => {
+                paths = paths.filter((p) => p.id !== path.id);
+              }}
+              title="Remove"
+            >
+              -
+            </button>
+            <span
+              class="grow focus-within:outline-2 outline-blue-400/50 rounded-sm"
+            >
+              <input
+                bind:value={path.value}
+                class="p-1 border-b border-gray-300 size-full focus:outline-none"
+                type="text"
+                autocomplete="off"
+                data-1p-ignore
+              />
+            </span>
+            {#await verify(path.value)}
+              <span>...</span>
+            {:then result}
+              <output>{result}</output>
+            {:catch error}
+              <output>{error}</output>
+            {/await}
+          </li>
+        {/each}
+        <li class="contents">
+          <span></span>
+          <button
+            type="button"
+            onclick={() => paths.push({ id: uuid(), value: "/" })}
+          >
+            + Add more
+          </button>
+        </li>
+      </ul>
+    </div>
+  </main>
+</div>
diff --git a/demo/src/Editor.svelte b/demo/src/Editor.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import * as monaco from "monaco-editor";
+  import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+  import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+  let ref = $state<HTMLDivElement>();
+  let { value = $bindable("") } = $props();
+  let editor = $state<monaco.editor.IStandaloneCodeEditor>();
+
+  // @ts-ignore
+  globalThis.MonacoEnvironment = {
+    getWorker: (_, label) => {
+      if (label === "json") return new JsonWorker();
+      return new EditorWorker();
+    },
+  } satisfies monaco.Environment;
+
+  $effect(() => {
+    if (!ref) return;
+    const e = monaco.editor.create(ref, {
+      tabSize: 2,
+      language: "json",
+    });
+    e.onDidChangeModelContent(() => {
+      value = e.getValue();
+    });
+    editor = e;
+
+    return () => e.dispose();
+  });
+  $effect(() => {
+    if (!editor) return;
+    if (value !== editor.getValue()) {
+      editor.setValue(value);
+    }
+  });
+</script>
+
+<div bind:this={ref} class="size-full"></div>
diff --git a/demo/src/app.css b/demo/src/app.css
@@ -0,0 +1,10 @@
+@import "tailwindcss";
+:root,
+body,
+#app {
+	@apply h-full;
+}
+button,
+[role="button"] {
+	@apply cursor-pointer;
+}
diff --git a/demo/src/hash.ts b/demo/src/hash.ts
@@ -0,0 +1,20 @@
+import {
+	compressToEncodedURIComponent,
+	decompressFromEncodedURIComponent,
+} from "lz-string";
+
+const jsonKey = "j";
+const pathsKey = "p";
+
+export const getHash = (aasa: string, paths: string[]) => {
+	return compressToEncodedURIComponent(
+		JSON.stringify({
+			[jsonKey]: JSON.parse(aasa),
+			[pathsKey]: paths,
+		}),
+	);
+};
+export const parseHash = (hash: string): { json: unknown; paths: string[] } => {
+	const parsed = JSON.parse(decompressFromEncodedURIComponent(hash));
+	return { json: parsed[jsonKey], paths: parsed[pathsKey] };
+};
diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -0,0 +1,8 @@
+import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
+
+const target = document.getElementById("app");
+const app = target && mount(App, { target });
+
+export default app;
diff --git a/demo/src/vite-env.d.ts b/demo/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/demo/svelte.config.js b/demo/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+};
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"resolveJsonModule": true,
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable checkJs if you'd like to use dynamic types in JS.
+		 * Note that setting allowJs false does not prevent the use
+		 * of JS in `.svelte` files.
+		 */
+		"allowJs": true,
+		"checkJs": true,
+		"isolatedModules": true,
+		"moduleDetection": "force"
+	},
+	"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/demo/tsconfig.node.json b/demo/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"skipLibCheck": true,
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"noEmit": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": ["vite.config.ts"]
+}
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -0,0 +1,8 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+	plugins: [svelte(), tailwindcss()],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="svelte" />
		/// <reference types="vite/client" />