From 0f7d1a860bfa61521058eb66520f100c96195e4b Mon Sep 17 00:00:00 2001
From: Markus Unterwaditzer <markus-tarpit+git@unterwaditzer.net>
Date: Mon, 14 Oct 2024 12:47:23 +0200
Subject: [PATCH] remove svelte

---
 buildscript.js         | 13 ++-----
 package.json           | 12 ++-----
 src/{app.ts => app.js} | 81 ++++++++++++++++++++++++++++++++++++------
 src/index.html         | 11 +++---
 src/svelte/App.svelte  | 67 ----------------------------------
 5 files changed, 81 insertions(+), 103 deletions(-)
 rename src/{app.ts => app.js} (52%)
 delete mode 100644 src/svelte/App.svelte

diff --git a/buildscript.js b/buildscript.js
index 7aa4b90..afe294e 100644
--- a/buildscript.js
+++ b/buildscript.js
@@ -1,20 +1,13 @@
 import esbuild from "esbuild";
-import sveltePlugin from "esbuild-svelte";
-import sveltePreprocess from "svelte-preprocess";
 
 esbuild
   .build({
-    entryPoints: ["src/app.ts"],
-    mainFields: ["svelte", "browser", "module", "main"],
+    entryPoints: ["src/app.js"],
+    mainFields: ["browser", "module", "main"],
     bundle: true,
-    minify: true,
+    minify: false,
     format: "esm",
     outfile: "build/bundle.js",
-    plugins: [
-      sveltePlugin({
-        preprocess: sveltePreprocess()
-      })
-    ],
     logLevel: "info",
   })
   .catch((error, location) => {
diff --git a/package.json b/package.json
index bde0d0d..fc0007e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
 {
   "type": "module",
-  "main": "index.tsx",
   "name": "mastodon-bookmark-rss",
   "version": "0.1.0",
   "description": "An app to subscribe to your Mastodon bookmarks via RSS",
@@ -8,23 +7,16 @@
   "author": "Markus Unterwaditzer <markus-honeypot@unterwaditzer.net>",
   "license": "MIT",
   "dependencies": {
-    "@tsconfig/svelte": "^3.0.0",
     "esbuild": "^0.17.2",
-    "esbuild-svelte": "^0.7.3",
-    "purecss": "^3.0.0",
-    "svelte": "^3.55.1",
-    "svelte-check": "^3.0.3",
-    "svelte-preprocess": "^5.0.1"
+    "purecss": "^3.0.0"
   },
   "scripts": {
     "build": "node buildscript.js",
-    "typecheck": "svelte-check",
     "dev": "find src/ | entr -sr 'npm run build && cargo run'",
     "fmt": "prettier --write src/ && cargo fmt"
   },
   "devDependencies": {
-    "prettier": "^2.8.3",
-    "prettier-plugin-svelte": "^2.9.0"
+    "prettier": "^2.8.3"
   },
   "volta": {
     "node": "21.0.0",
diff --git a/src/app.ts b/src/app.js
similarity index 52%
rename from src/app.ts
rename to src/app.js
index fad96df..93829fb 100644
--- a/src/app.ts
+++ b/src/app.js
@@ -1,13 +1,11 @@
 // this will cause esbuild to also create src/bundle.css
 import "./app.css";
 
-import App from "./svelte/App.svelte";
-
 const OAUTH_CLIENT_NAME = "Mastodon Bookmark RSS";
 const OAUTH_SCOPES = "read:bookmarks";
 const SERVICE_BASE_URL = `${window.location.origin}${window.location.pathname}`;
 
-const launchLogin = async (baseUrl: string) => {
+const launchLogin = async (baseUrl) => {
   window.localStorage.setItem("baseUrl", baseUrl);
 
   const params = new FormData();
@@ -75,10 +73,73 @@ const getFeedUrl = async () => {
   return `${SERVICE_BASE_URL}feed?host=${baseUrl}&token=${accessToken}`;
 };
 
-new App({
-  target: document.getElementById("app-root"),
-  props: {
-    launchLogin,
-    feedUrlPromise: getFeedUrl(),
-  },
-});
+(async () => {
+  const appRoot = document.getElementById("app-root");
+  appRoot.innerText = "loading...";
+  const feedUrl = await getFeedUrl();
+  if (!feedUrl) {
+    appRoot.innerHTML = `
+    <form class="pure-form pure-form-stacked" onsubmit="submitLoginForm()">
+      <fieldset>
+        <label for="host">Your instance</label>
+        <input
+          type="text"
+          id="host"
+          class="pure-input-1"
+          required
+          name="host"
+          placeholder="e.g. mastodon.social"
+          title="Something that looks like a hostname"
+        />
+      </fieldset>
+
+      <input
+        type="submit"
+        class="pure-button pure-button-primary"
+        value="Get RSS feed"
+      />
+    </form>
+    `;
+
+    document.querySelector("form").onsubmit = (e) => {
+      launchLogin(e.target.host.value);
+      e.preventDefault();
+    };
+  } else {
+    appRoot.innerHTML = `
+    <div>
+      <p class="green">Subscribe to the following URL in your feed reader. Anybody who knows this
+      URL can read your bookmarks!</p>
+      <form class="pure-form pure-form-stacked">
+        <fieldset>
+          <input type="text" class="pure-input-1" readOnly />
+          <label for="form-client-link">Optional: Add an "Open In" link to bookmarks</label>
+          <select onchange="changeClient()">
+            <option value="none" selected>None</option>
+            <option value="host">Your Mastodon Host</option>
+            <option value="elk">Elk</option>
+            <option value="elkcanary">Elk Canary</option>
+            <option value="phanpy">Phanpy</option>
+            <option value="phanpydev">Phanpy Dev</option>
+            <option value="trunks">Trunks</option>
+            <option value="ivory">Ivory</option>
+          </select>
+        </fieldset>
+      </form>
+    </div>
+    `;
+
+    const changeClient = (client) => {
+      const result = document.querySelector("input");
+      result.value = `${
+        client === "none" ? feedUrl : `${feedUrl}&client=${client}`
+      }`;
+    };
+
+    document.querySelector("select").onchange = (e) => {
+      changeClient(e.target.value);
+    };
+
+    changeClient("none");
+  }
+})();
diff --git a/src/index.html b/src/index.html
index 4d145cf..3931a38 100644
--- a/src/index.html
+++ b/src/index.html
@@ -31,8 +31,8 @@ <h2 class="content-head is-center">About this service</h2>
 
       <ul>
         <li>
-          This service does not store your bookmarks. All needed credentials
-          are encoded in the RSS feed's URL.
+          This service does not store your bookmarks. All needed credentials are
+          encoded in the RSS feed's URL.
         </li>
 
         <li>
@@ -59,10 +59,9 @@ <h2 class="content-head is-center">About this service</h2>
         </li>
 
         <li>
-          This service enforces some basic rate limits. Any
-          reasonable RSS feed reader should not run into them.
-          Please don't poll your RSS feed more often than you
-          actually need, this relieves this service and your
+          This service enforces some basic rate limits. Any reasonable RSS feed
+          reader should not run into them. Please don't poll your RSS feed more
+          often than you actually need, this relieves this service and your
           Mastodon server.
         </li>
       </ul>
diff --git a/src/svelte/App.svelte b/src/svelte/App.svelte
deleted file mode 100644
index 48dfb8b..0000000
--- a/src/svelte/App.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts">
-  export let launchLogin;
-  export let feedUrlPromise;
-
-  let baseFeedUrl;
-
-  function submitLoginForm(e) {
-    launchLogin(e.target.host.value);
-    e.preventDefault();
-  }
-
-  function changeClient(e) {
-    const client = e.target.value;
-    const result = document.querySelector('input');
-    if(!baseFeedUrl) baseFeedUrl = result.value;
-    result.value = `${client === 'none' ? baseFeedUrl : `${baseFeedUrl}&client=${client}`}`;
-  }
-</script>
-
-{#await feedUrlPromise}
-  <div>loading...</div>
-{:then feedUrl}
-  {#if !feedUrl}
-    <form class="pure-form pure-form-stacked" on:submit={submitLoginForm}>
-      <fieldset>
-        <label for="host">Your instance</label>
-        <input
-          type="text"
-          id="host"
-          class="pure-input-1"
-          required
-          name="host"
-          placeholder="e.g. mastodon.social"
-          pattern="[a-zA-Z0-9.:\\-]+"
-          title="Something that looks like a hostname"
-        />
-      </fieldset>
-
-      <input
-        type="submit"
-        class="pure-button pure-button-primary"
-        value="Get RSS feed"
-      />
-    </form>
-  {:else}
-    <div>
-      <p class="green">Subscribe to the following URL in your feed reader. Anybody who knows this
-      URL can read your bookmarks!</p>
-      <form class="pure-form pure-form-stacked">
-        <fieldset>
-          <input type="text" class="pure-input-1" readOnly value={feedUrl} />
-          <label for="form-client-link">Optional: Add an "Open In" link to bookmarks</label>
-          <select on:change={changeClient}>
-            <option value="none" selected>None</option>
-            <option value="host">Your Mastodon Host</option>
-            <option value="elk">Elk</option>
-            <option value="elkcanary">Elk Canary</option>
-            <option value="phanpy">Phanpy</option>
-            <option value="phanpydev">Phanpy Dev</option>
-            <option value="trunks">Trunks</option>
-            <option value="ivory">Ivory</option>
-          </select>
-        </fieldset>
-      </form>
-    </div>
-  {/if}
-{/await}