Passage à Svelte 5

assets/scripts/GitAgent.js

@@ -13,7 +13,7 @@
 
 import FS from '@isomorphic-git/lightning-fs'
 import git from 'isomorphic-git'
-import http from 'isomorphic-git/http/web/index.js'
+import http from 'isomorphic-git/http/web'
 
 const DEFAULT_CORS_PROXY_URL = 'https://cors.isomorphic-git.org'
 

assets/scripts/components/Header.svelte

@@ -1,21 +1,30 @@
 <script>
-  /** @type {{ status: BuildStatus }} */
-  export let buildStatus
+  import { run } from 'svelte/legacy';
 
   /** @typedef {import("./../store.js").ScribouilliState} ScribouilliState */
-  /** @type {ScribouilliState["currentRepository"] | undefined} */
-  export let currentRepository
 
-  /** @type {boolean} */
-  export let showArticles
+  /**
+   * @typedef {Object} Props
+   * @property {{ status: BuildStatus }} buildStatus
+   * @property {ScribouilliState["currentRepository"] | undefined} currentRepository
+   * @property {boolean} showArticles
+   * @property {ScribouilliState["conflict"]} conflict
+   */
 
-  /** @type {ScribouilliState["conflict"]}*/
-  export let conflict
+  /** @type {Props} */
+  let {
+    buildStatus,
+    currentRepository,
+    showArticles,
+    conflict
+  } = $props();
 
   /** @type {string} */
-  let status
+  let status = $state()
 
-  $: status = buildStatus?.status
+  run(() => {
+    status = buildStatus?.status
+  });
 
   if (buildStatus) {
     // @ts-ignore
@@ -27,32 +36,32 @@
   }
 
   /** @type {boolean}*/
-  let needsAccountVerification
-  $: needsAccountVerification = status === 'needs_account_verification'
+  let needsAccountVerification = $derived(status === 'needs_account_verification')
+
 
-  $: buildStatusClass = buildStatus ? `build-${status}` : undefined
+  let buildStatusClass = $derived(buildStatus ? `build-${status}` : undefined)
 
   /** @type {Promise<string> | undefined } */
-  let publishedWebsiteURL
-  $: publishedWebsiteURL = currentRepository?.publishedWebsiteURL
+  let publishedWebsiteURL = $derived(currentRepository?.publishedWebsiteURL)
+
 
   /** @type {string | undefined} */
-  let repositoryURL
-  $: repositoryURL = currentRepository?.publicRepositoryURL
+  let repositoryURL = $derived(currentRepository?.publicRepositoryURL)
+
 
   /** @type {string | undefined} */
-  let repoName
-  $: repoName = currentRepository?.repoName
+  let repoName = $derived(currentRepository?.repoName)
+
 
   /** @type {string | undefined} */
-  let account
-  $: account = currentRepository?.owner
+  let account = $derived(currentRepository?.owner)
+
 
   /** @type {string | undefined} */
-  $: homeURL =
-    repoName && account
+  let homeURL =
+    $derived(repoName && account
       ? `/atelier-list-pages?repoName=${repoName}&account=${account}`
-      : '/'
+      : '/')
   /**
    *
    * @param {string} account
@@ -64,8 +73,8 @@
   }
 
   /** @type {string} */
-  let resolutionURL;
-  $: resolutionURL = makeResolutionDesynchronisationURL(account || '', repoName || '')
+  let resolutionURL = $derived(makeResolutionDesynchronisationURL(account || '', repoName || ''));
+
 
 </script>
 
@@ -77,7 +86,7 @@
           (L'adresse du site va apparaître ici…)
         </p>
         {#if buildStatusClass}
-          <p class={buildStatusClass} />
+          <p class={buildStatusClass}></p>
         {/if}
       </div>
     {:then publishedURL}
@@ -92,7 +101,7 @@
           </a>
         </p>
         {#if buildStatusClass}
-          <p class={buildStatusClass} />
+          <p class={buildStatusClass}></p>
         {/if}
       </div>
     {/await}

assets/scripts/components/Skeleton.svelte

@@ -2,24 +2,31 @@
   import Header from "./Header.svelte";
   import Footer from "./Footer.svelte";
 
-  /** @type {boolean} */
-  export let showArticles = false;
-
-  /** @type {any} */
-  export let buildStatus = undefined;
-
   /** @typedef {import("./../store.js").ScribouilliState} ScribouilliState */
-  /** @type {ScribouilliState["currentRepository"] | undefined} */
-  export let currentRepository = undefined;
 
-  /** @type {ScribouilliState["conflict"]}*/
-  export let conflict = undefined
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [showArticles]
+   * @property {any} [buildStatus]
+   * @property {ScribouilliState["currentRepository"] | undefined} [currentRepository]
+   * @property {ScribouilliState["conflict"]} [conflict]
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let {
+    showArticles = false,
+    buildStatus = undefined,
+    currentRepository = undefined,
+    conflict = undefined,
+    children
+  } = $props();
 </script>
 
 <Header {showArticles} {currentRepository} {buildStatus} {conflict} />
 
 <main>
-  <slot />
+  {@render children?.()}
 </main>
 
 <Footer/>

assets/scripts/components/screens/Account.svelte

@@ -1,8 +1,13 @@
 <script>
   import Skeleton from "../Skeleton.svelte";
+
+  /**
+   * @typedef {Object} Props
+   * @property {string} gitProvider
+   */
 
-  /** @type {string} */
-   export let gitProvider
+  /** @type {Props} */
+  let { gitProvider } = $props();
 </script>
 
 <Skeleton>

assets/scripts/components/screens/AfterOauthLogin.svelte

@@ -2,9 +2,14 @@
   import Skeleton from "./../Skeleton.svelte";
   import SiteCreationLoader from "./../loaders/SiteCreationLoader.svelte";
 
-  /** @type {Promise<GithubRepository[]|Void>} */
-  export let currentUserReposP;
-  /** @type {string} */
+  /**
+   * @typedef {Object} Props
+   * @property {Promise<GithubRepository[]|Void>} currentUserReposP
+   */
+
+  /** @type {Props} */
+  let { currentUserReposP } = $props();
+
 </script>
 
 <Skeleton>

assets/scripts/components/screens/ArticleContenu.svelte

@@ -1,22 +1,28 @@
 <script>
   import {makeAtelierListArticlesURL} from '../../routes/atelier-list-articles.js'
 
-  /** @type {Promise<EditeurFile>} */
-  export let fileP;
-
-  /** @type {any} */
-  export let buildStatus;
-
-  /** @type {FileContenu[]} */
-  export let contenus;
-
-  /** @type {boolean} */
-  export let showArticles;
-
-  /** @type {ScribouilliGitRepo} */
-  export let currentRepository;
-
   import Editeur from "./intern/Editeur.svelte";
+  /**
+   * @typedef {Object} Props
+   * @property {Promise<EditeurFile>} fileP
+   * @property {any} buildStatus
+   * @property {FileContenu[]} contenus
+   * @property {boolean} showArticles
+   * @property {ScribouilliGitRepo} currentRepository
+   * @property {() => void} onDelete
+   * @property {(file: EditeurFile) => void} onSave
+   */
+
+  /** @type {Props} */
+  let {
+    fileP,
+    buildStatus,
+    contenus,
+    showArticles,
+    currentRepository,
+    onDelete,
+    onSave,
+  } = $props();
 </script>
 
 <Editeur
@@ -28,6 +34,6 @@
   editionTitle="Édition d'un article"
   listPrefix={makeAtelierListArticlesURL(currentRepository)}
   deleteTitle="Supprimer l'article"
-  on:save
-  on:delete
+  {onDelete}
+  {onSave}
 />

assets/scripts/components/screens/AtelierArticles.svelte

@@ -1,21 +1,25 @@
 <script>
   import ListContenu from './intern/ListContenu.svelte'
 
-  /** @type any */
-  export let buildStatus
-
-  /** @type {any[] | undefined} */
-  export let articles
-
-  /** @type {boolean | undefined} */
-  export let showArticles
-
-  /** @type {ScribouilliGitRepo} */
-  export let currentRepository
-
   /** @typedef {import("./../../store.js").ScribouilliState} ScribouilliState */
-  /** @type {ScribouilliState["conflict"]}*/
-  export let conflict
+
+  /**
+   * @typedef {Object} Props
+   * @property {any} buildStatus
+   * @property {any[] | undefined} articles
+   * @property {boolean | undefined} showArticles
+   * @property {ScribouilliGitRepo} currentRepository
+   * @property {ScribouilliState["conflict"]} conflict
+   */
+
+  /** @type {Props} */
+  let {
+    buildStatus,
+    articles,
+    showArticles,
+    currentRepository,
+    conflict
+  } = $props();
 </script>
 
 <ListContenu

assets/scripts/components/screens/AtelierPages.svelte

@@ -1,21 +1,25 @@
 <script>
   import ListContenu from './intern/ListContenu.svelte'
 
-  /** @type any */
-  export let buildStatus
-
-  /** @type {any[] | undefined} */
-  export let pages
-
-  /** @type {boolean | undefined} */
-  export let showArticles
-
-  /** @type {ScribouilliGitRepo} */
-  export let currentRepository
-
   /** @typedef {import("./../../store.js").ScribouilliState} ScribouilliState */
-  /** @type {ScribouilliState["conflict"]}*/
-  export let conflict
+
+  /**
+   * @typedef {Object} Props
+   * @property {any} buildStatus
+   * @property {any[] | undefined} pages
+   * @property {boolean | undefined} showArticles
+   * @property {ScribouilliGitRepo} currentRepository
+   * @property {ScribouilliState["conflict"]} conflict
+   */
+
+  /** @type {Props} */
+  let {
+    buildStatus,
+    pages,
+    showArticles,
+    currentRepository,
+    conflict
+  } = $props();
 </script>
 
 <ListContenu

assets/scripts/components/screens/CreateAccount.svelte

@@ -1,8 +1,13 @@
 <script>
   import Skeleton from "../Skeleton.svelte";
 
-  /** @type {string} */
-  export let gitProvider
+  /**
+   * @typedef {Object} Props
+   * @property {string} gitProvider
+   */
+
+  /** @type {Props} */
+  let { gitProvider } = $props();
 </script>
 
 <Skeleton>

assets/scripts/components/screens/CreateNewSite.svelte

@@ -4,12 +4,12 @@
   import { createRepositoryForCurrentAccount } from "../../actions/setup.js";
   import { templates } from '../../config.js';
 
-  let name = "";
-  let loading = false;
-  let hasError = false
+  let name = $state("");
+  let loading = $state(false);
+  let hasError = $state(false)
 
   /** @type {GitSiteTemplate} */
-  let selectedTemplate;
+  let selectedTemplate = $state();
 
   // @ts-ignore
   const onSubmit = (e) => {
@@ -39,7 +39,7 @@
       <h3>Créer un nouveau site</h3>
 
       <div class="wrapper">
-        <form on:submit|preventDefault={onSubmit}>
+        <form onsubmit={onSubmit}>
           <div>
             <label for="name">Nom de votre site</label>
             <input

assets/scripts/components/screens/Login.svelte

@@ -1,11 +1,14 @@
 <script>
   import Skeleton from "../Skeleton.svelte";
 
-  /** @type {string} */
-  export let href;
-
-  /** @type {string} */
-  export let gitProvider
+  /**
+   * @typedef {Object} Props
+   * @property {string} href
+   * @property {string} gitProvider
+   */
+
+  /** @type {Props} */
+  let { href, gitProvider } = $props();
 
 </script>