init

shubhattin · Oct 24, 2024 · a02d2eb · a02d2eb
1 parent a233b5e
commit a02d2eb
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 205 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@sveltejs/adapter-auto": "^3.2.5",
     "@sveltejs/adapter-vercel": "^5.4.5",
     "@sveltejs/kit": "^2.7.1",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tanstack/svelte-query-devtools": "^5.59.13",
     "@types/cli-progress": "^3.11.6",
     "@types/js-yaml": "^4.0.9",
@@ -40,7 +40,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "sass": "1.78.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.5",
     "svelte-check": "^4.0.5",
     "trpc-sveltekit": "^3.6.2",
     "tslib": "^2.8.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ImageSpan.svelte b/src/components/ImageSpan.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import { cl_join } from '~/tools/cl_join';
-  let className = '';
-  export { className as class };
-  export let src: string;
+  
+  interface Props {
+    class?: string;
+    src: string;
+  }
+
+  let { class: className = '', src }: Props = $props();
 </script>
 
-<span class={cl_join('inline-block bg-cover', className)} style:background-image={`url(${src})`} />
+<span class={cl_join('inline-block bg-cover', className)} style:background-image={`url(${src})`}></span>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -1,24 +1,39 @@
 <script lang="ts">
   import { cl_join } from '~/tools/cl_join';
-  import { onDestroy, onMount } from 'svelte';
-  import { type Writable } from 'svelte/store';
-  import { scale, slide, fly } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import { scale, slide } from 'svelte/transition';
   import { AiOutlineClose } from 'svelte-icons-pack/ai';
   import Icon from '~/tools/Icon.svelte';
+  import { untrack } from 'svelte';
 
-  let className: string | null = null!;
-  export { className as class };
-  export let outterClass: string | null = null!;
-  export let modal_open: Writable<boolean>;
-  export let cancel_btn_txt: string | null = null!;
-  export let confirm_btn_txt: string | null = null!;
-  export let onOpen: () => void = null!;
-  export let onClose: () => void = null!;
-  export let onConfirm: () => void = null!;
-  export let close_on_click_outside = true;
+  interface Props {
+    class?: string | null;
+    outterClass?: string | null;
+    modal_open: boolean;
+    cancel_btn_txt?: string | null;
+    confirm_btn_txt?: string | null;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    close_on_click_outside?: boolean;
+    children?: import('svelte').Snippet;
+  }
 
-  let modalElement: HTMLElement;
-  let opened = false;
+  let {
+    class: className = null!,
+    outterClass = null!,
+    modal_open = $bindable(),
+    cancel_btn_txt = null!,
+    confirm_btn_txt = null!,
+    onOpen = null!,
+    onClose = null!,
+    onConfirm = null!,
+    close_on_click_outside = true,
+    children
+  }: Props = $props();
+
+  let modalElement = $state<HTMLElement>();
+  let opened = $state(false);
 
   const lockScroll = () => {
     document.body.style.overflow = 'hidden';
@@ -29,13 +44,13 @@
   };
 
   const animationDuration = 400;
-  let is_closing = false; // to fix transition not being displayed while exiting
+  let is_closing = $state(false); // to fix transition not being displayed while exiting
   let visibleModal: HTMLElement | null = null;
 
   const openModal = () => {
     if (opened) return;
     setTimeout(() => {
-      visibleModal = modalElement;
+      modalElement && (visibleModal = modalElement);
     }, animationDuration);
     opened = true;
     lockScroll();
@@ -49,7 +64,7 @@
       opened = false;
       is_closing = false;
       unlockScroll();
-      $modal_open = false;
+      modal_open = false;
       if (onClose) onClose();
     }, animationDuration);
   };
@@ -70,12 +85,10 @@
       }
     });
   });
-  const mode_open_unsubscriber = modal_open.subscribe((value) => {
-    if (value && !opened) openModal();
-    else if (!value && opened) closeModal();
-  });
-  onDestroy(() => {
-    mode_open_unsubscriber();
+  $effect(() => {
+    const _opened = untrack(() => opened);
+    if (modal_open && !_opened) openModal();
+    else if (!modal_open && _opened) closeModal();
   });
 </script>
 
@@ -99,22 +112,22 @@
         <button
           aria-label="Close"
           class="absolute cursor-pointer text-gray-500 hover:text-gray-700"
-          on:click={closeModal}><Icon src={AiOutlineClose} /></button
+          onclick={closeModal}><Icon src={AiOutlineClose} /></button
         >
       </div>
       <article class="overflow-scroll rounded-lg bg-white p-3 pt-2 shadow-lg dark:bg-gray-800">
-        <slot />
+        {@render children?.()}
         {#if cancel_btn_txt || confirm_btn_txt}
           <footer class="mt-4 flex justify-end space-x-2">
             {#if cancel_btn_txt}
-              <button class="variant-outline-error btn rounded-lg px-2.5 py-2" on:click={closeModal}
+              <button class="variant-outline-error btn rounded-lg px-2.5 py-2" onclick={closeModal}
                 >{cancel_btn_txt}</button
               >
             {/if}
             {#if confirm_btn_txt}
               <button
                 class="variant-filled-secondary btn rounded-lg px-2.5 py-2"
-                on:click={() => {
+                onclick={() => {
                   closeModal();
                   if (onConfirm) onConfirm();
                 }}>{confirm_btn_txt}</button

diff --git a/src/components/PreviewExcel.svelte b/src/components/PreviewExcel.svelte
@@ -9,12 +9,16 @@
   import { get_text_font_class } from '~/tools/font_tools';
   import type { script_and_lang_list_type } from '~/tools/lang_list';
 
-  export let file_link: string;
-  export let workbook: Workbook;
-  export let file_name: string;
-  export let file_preview_opened: Writable<boolean>;
+  type Props = {
+    file_link: string;
+    workbook: Workbook;
+    file_name: string;
+    file_preview_opened: Writable<boolean>;
+  };
+
+  let { file_link, workbook, file_name, file_preview_opened }: Props = $props();
 
-  let sheet_number = 0;
+  let sheet_number = $state(0);
 
   const get_lang_code_of_columnn = (worksheet: Worksheet, column_i: number) => {
     const lang = normalize_lang_code(
@@ -23,7 +27,7 @@
     return lang || '';
   };
 
-  let overflow_behavior = 'hidden';
+  let overflow_behavior: 'hidden' | 'scroll' = $state('hidden');
 </script>
 
 <div>
@@ -55,7 +59,7 @@
           <span class="font-bold">{worksheet.name}</span>
         </Tab>
       {/each}
-      <div slot="panel" class="overflow-scroll">
+      <div class="overflow-scroll" slot="panel">
         {@const worksheet = workbook.worksheets[sheet_number]}
         <table class="table table-hover table-compact table-cell-fit">
           <thead>

diff --git a/src/components/Select.svelte b/src/components/Select.svelte
@@ -1,45 +1,53 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { createEventDispatcher } from 'svelte';
   import { z } from 'zod';
 
-  export let zodType: any = z.string();
-  export let value: any;
-  let className: string = undefined!;
-  export let disabled = false;
-  export { className as class };
-  export let options: {
+  type Props = {
+    zodType?: any;
     value: any;
-    text: string;
-    className?: string | undefined;
-  }[];
-  export let resize = false;
-
-  const dispatch = createEventDispatcher<{
-    change: {
+    class?: string;
+    disabled?: boolean;
+    options: {
       value: any;
-      currentTarget: HTMLSelectElement;
-    };
-  }>();
+      text: string;
+      className?: string | undefined;
+    }[];
+    resize?: boolean;
+    onchange?: (
+      e: Event & {
+        currentTarget: EventTarget & HTMLSelectElement;
+      }
+    ) => void;
+  };
+
+  let {
+    zodType = z.string(),
+    value = $bindable(),
+    class: className = undefined!,
+    disabled = false,
+    options,
+    resize = false,
+    onchange
+  }: Props = $props();
 
-  let width = 0;
-  let mounted = false;
+  let width = $state(0);
+  let mounted = $state(false);
   onMount(() => {
-    if (resize) width = resize_select(elm);
+    if (resize && elm) width = resize_select(elm);
     mounted = true;
   });
 
-  let elm: HTMLSelectElement;
+  let elm = $state<HTMLSelectElement>();
 
-  const on_change = (
+  const on_change_func = (
     e: Event & {
       currentTarget: EventTarget & HTMLSelectElement;
     }
   ) => {
     const { currentTarget } = e;
     if (resize) width = resize_select(currentTarget);
     value = zodType.parse(currentTarget.value);
-    dispatch('change', { value, currentTarget });
+    onchange && onchange(e);
   };
 
   const replace_all = (str: string, replaceWhat: string, replaceTo: string) => {
@@ -66,7 +74,7 @@
 <select
   bind:this={elm}
   {disabled}
-  on:change={on_change}
+  onchange={on_change_func}
   class={className}
   style:width={resize && mounted ? `${width}px` : null}
 >

diff --git a/src/components/ThemeChanger.svelte b/src/components/ThemeChanger.svelte
@@ -7,7 +7,7 @@
 
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('system')}
+  onclick={() => setMode('system')}
 >
   <Icon
     src={SlScreenDesktop}
@@ -16,13 +16,13 @@
 </button>
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('light')}
+  onclick={() => setMode('light')}
 >
   <Icon src={LuSun} class="h-5 w-5 rotate-0 scale-100 dark:group-hover:text-yellow-300" />
 </button>
 <button
   class="group btn-xl -mb-1 ml-0 mr-0 inline-flex items-center p-0 outline-none"
-  on:click={() => setMode('dark')}
+  onclick={() => setMode('dark')}
 >
   <Icon
     src={LuMoon}

diff --git a/src/components/TopAppBar.svelte b/src/components/TopAppBar.svelte
@@ -12,9 +12,17 @@
   import { main_app_bar_info } from '~/state/app_bar';
   import { PAGE_TITLES } from '~/state/page_titles';
 
-  $: page_url = $page.url.pathname;
+  type Props = {
+    start?: import('svelte').Snippet;
+    headline?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+  };
+
+  let { start, headline, end }: Props = $props();
+
+  let page_url = $derived($page.url.pathname);
 
-  $: {
+  $effect(() => {
     if (page_url in PAGE_TITLES) {
       const [TITLE, CLASS]: string[] = PAGE_TITLES[page_url as keyof typeof PAGE_TITLES];
       main_app_bar_info.set({
@@ -27,7 +35,7 @@
         className: null
       });
     }
-  }
+  });
 
   const app_menu_popup: PopupSettings = {
     event: 'click',
@@ -38,25 +46,25 @@
 </script>
 
 <AppBar>
-  <svelte:fragment slot="lead">
-    <slot name="start" />
+  {#snippet lead()}
+    {@render start?.()}
     <!-- {#if page_url !== '/'}
-      <a class="mr-2 text-xl" href="/" title="श्रीरामायणम्">
-        <Icon
-          src={BiArrowBack}
-          class="-mt-1 mr-1 text-2xl hover:fill-blue-600 dark:hover:fill-sky-500"
-        />
-      </a>
-    {/if} -->
-    <slot name="headline">
+        <a class="mr-2 text-xl" href="/" title="श्रीरामायणम्">
+          <Icon
+            src={BiArrowBack}
+            class="-mt-1 mr-1 text-2xl hover:fill-blue-600 dark:hover:fill-sky-500"
+          />
+        </a>
+      {/if} -->
+    {#if headline}{@render headline()}{:else}
       <span class={$main_app_bar_info.className ?? ''}>{$main_app_bar_info.title ?? ''}</span>
-    </slot>
-  </svelte:fragment>
+    {/if}
+  {/snippet}
   <!-- <svelte:fragment slot="headline">
 		<slot name="headline"><span></span></slot>
 	</svelte:fragment> -->
-  <svelte:fragment slot="trail">
-    <slot name="end"></slot>
+  {#snippet trail()}
+    {@render end?.()}
     <div class="space-x-2">
       {#if page_url !== '/convert'}
         <a class="text-xl" href="/convert" title="Lipi Parivartak">
@@ -120,5 +128,5 @@
         <ThemeChanger />
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </AppBar>