update Calc.svelte, About.svelte, CreateGist.svelte to 5

kjk · Jun 26, 2024 · 0671db1 · 0671db1
1 parent 176e82d
commit 0671db1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 22 deletions.
diff --git a/frontend/src/calc/Calc.svelte b/frontend/src/calc/Calc.svelte
@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   import { Fcal } from "fcal";
   import { len } from "../util";
@@ -28,16 +30,14 @@ speed in mps
 456 as hex
 `;
 
-  let expression = defaultExpression;
-  let results = [];
-
-  $: main(expression);
+  let expression = $state(defaultExpression);
+  let results = $derived(calcResults(expression));
 
   function isComment(s) {
     return s.startsWith("#");
   }
 
-  function main(input) {
+  function calcResults(input) {
     console.log("main: ", input);
     let fcalEngine = new Fcal();
     let values = input.split("\n");
@@ -61,7 +61,7 @@ speed in mps
       }
     }
     console.log("res:", res);
-    results = res;
+    return res;
   }
 
   /** @type {HTMLTextAreaElement} */
@@ -90,7 +90,7 @@ speed in mps
       </div>
     </div>
     <button
-      on:click={clear}
+      onclick={clear}
       class="shadow-md text-sm text-gray-700 ml-4 px-4 border hover:bg-gray-200"
       >clear</button
     >
@@ -102,7 +102,7 @@ speed in mps
     <div>This is a notepad-like calculator</div>
     <div class="grow" />
     <button
-      on:click={clear}
+      onclick={clear}
       class="border border-slate-400 px-4 py-0.5 text-xs bg-white hover:bg-slate-50"
       >clear</button
     >

diff --git a/frontend/src/gisteditor/About.svelte b/frontend/src/gisteditor/About.svelte
@@ -21,7 +21,7 @@
       </li>
       <li>
         GitHub gist manager, if you
-        <a class="underline" href="/" on:click|preventDefault={openLoginWindow}>
+        <a class="underline" href="/" onclick={openLoginWindow}>
           log in with GitHub
         </a>
       </li>

diff --git a/frontend/src/gisteditor/CreateGists.svelte b/frontend/src/gisteditor/CreateGists.svelte
@@ -1,10 +1,12 @@
+<svelte:options runes={true} />
+
 <script>
   import SvgDots from "../svg/SvgDots.svelte";
   import SelectLangDialog from "./SelectLangDialog.svelte";
   import { tooltip } from "../actions/tooltip.js";
   import { goToCreateNewGist } from "./router.js";
 
-  let showSelectLang = false;
+  let showSelectLang = $state(false);
   let dotsStyle = `
   width: 15px;
   height: 13px;
@@ -31,21 +33,21 @@
   <div class="whitespace-nowrap">New gist:</div>
   <button
     class="btn"
-    on:click={createNewTextGist}
+    onclick={createNewTextGist}
     use:tooltip={"Create new text gist"}
   >
     Text
   </button>
   <button
     class="btn"
-    on:click={createNewMdGist}
+    onclick={createNewMdGist}
     use:tooltip={"Create new markdown gist"}
   >
     Markdown
   </button>
   <button
     class="btn"
-    on:click={createNewGoGist}
+    onclick={createNewGoGist}
     use:tooltip={"Create new Go gist"}
   >
     Go
@@ -54,11 +56,11 @@
   <!-- a hack to hide the tooltip when we are showing lang selector -->
   <!-- maybe won't be needed if we add overlay -->
   {#if showSelectLang}
-    <button class="btn" on:click={onMoreClick}>
+    <button class="btn" onclick={onMoreClick}>
       <SvgDots style={dotsStyle} />
     </button>
   {:else}
-    <button class="btn" on:click={onMoreClick} use:tooltip={"Create new gist"}>
+    <button class="btn" onclick={onMoreClick} use:tooltip={"Create new gist"}>
       <SvgDots style={dotsStyle} />
     </button>
   {/if}

diff --git a/frontend/src/gisteditor/HelpButton.svelte b/frontend/src/gisteditor/HelpButton.svelte
@@ -6,7 +6,8 @@
 
   let showingMenu = $state(false);
 
-  function showMenu() {
+  function showMenu(ev) {
+    ev.preventDefault();
     showingMenu = !showingMenu;
   }
   function hideMenu() {
@@ -21,7 +22,7 @@
       <div class="dropdown-content shadow-md adjust">
         <div>
           <a
-            on:click={hideMenu}
+            onclick={hideMenu}
             href="https://tools.arslexis.io/docs/gist-editor"
             target="_blank"
             rel="noreferrer"
@@ -31,7 +32,7 @@
         </div>
         <div>
           <a
-            on:click={hideMenu}
+            onclick={hideMenu}
             href="https://tools.arslexis.io/docs/gist-editor"
             target="_blank"
             rel="noreferrer"
@@ -42,7 +43,7 @@
         <!--
       <div>
         <a
-          on:click={hideMenu}
+          onclick={hideMenu}
           href="https://reddit.com/r/CodeEvalApp/"
           target="_blank">
           Support
@@ -55,7 +56,7 @@
     <button
       class="help"
       use:tooltip={{ text: "Help, feedback", position: "top" }}
-      on:click|preventDefault={showMenu}
+      onclick={showMenu}
     >
       ?
     </button>

diff --git a/frontend/src/github_login.js b/frontend/src/github_login.js
@@ -96,7 +96,10 @@ export async function setToken(token) {
 
 window.addEventListener("storage", handleStorageChanged);
 
-export function openLoginWindow() {
+export function openLoginWindow(ev) {
+  if (ev) {
+    ev.preventDefault();
+  }
   const uri = window.location.origin + "/auth/ghlogin";
   popup(uri, "GitHub Login", 600, 400);
 }
@@ -146,7 +149,7 @@ export async function refreshGitHubTokenIfNeeded() {
       return;
     }
     console.log(
-      `refreshGitHubTokenIfNeeded: failed with ${rsp.status} ${rsp.statusText}`
+      `refreshGitHubTokenIfNeeded: failed with ${rsp.status} ${rsp.statusText}`,
     );
   } catch (ex) {
     showError(`GET ${uri} failed with '${ex}`);