upgrade to svelte 5

[JinIgarashi]

migration guide

npx sv migrate svelte-5

• official guide

https://svelte.dev/docs/svelte/v5-migration-guide

• vitest

https://testing-library.com/docs/svelte-testing-library/setup

basically need to add the below plugin at config.

import { svelteTesting } from '@testing-library/svelte/vite';

export default defineConfig({
  plugins: [sveltekit(), svelteTesting()],
})

To do

• cgaz-admin-tool
• style-switcher
• svelte-maplibre-storymap
• svelte-static-image-controls
• svelte-undp-components
• svelte-undp-design
• date-picker-svelte
• geohub
• static-image-api

[JinIgarashi]

current log from svelte 5 migration tool for sites/geohub folder

npx sv migrate svelte-5
This migration is experimental — please report any bugs to https://github.com/sveltejs/svelte/issues

added 83 packages, and audited 84 packages in 18s

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

This will update files in the current directory
If you're inside a monorepo, don't run this in the root directory, rather run it in all projects independently.

✔ Continue? … yes
✔ Which folders should be migrated? › src
Updated svelte to ^5.0.0
Updated @sveltejs/vite-plugin-svelte to ^4.0.0
Updated eslint-plugin-svelte to ^2.45.1
Error while migrating Svelte code [InternalCompileError: Unexpected token] {
  code: 'js_parse_error',
  filename: 'src/components/pages/storymap/StorymapChapterEdit.svelte',
  position: [ 352, 352 ],
  start: { line: 7, column: 35, character: 352 },
  end: { line: 7, column: 35, character: 352 },
  frame: ' 5:   export type ActiveStorymapChapterStore = Writable<StoryMapChapter | undefined>;\n' +
    ' 6:   export const createActiveStorymapChapterStore = () => {\n' +
    ' 7:     return writable(<StoryMapChapter | undefined>undefined);\n' +
    '                                         ^\n' +
    ' 8:   };\n' +
    ' 9: </script>'
}
One or more `@migration-task` comments were added to `src/components/pages/storymap/StorymapChapterEdit.svelte`, please check them and complete the migration manually.
Error while migrating Svelte code [InternalCompileError: `<th>` cannot be a child of `<thead>`. `<thead>` only allows these children: `<tr>`, `<style>`, `<script>`, `<template>`. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.] {
  code: 'node_invalid_placement',
  filename: 'src/components/util/stac/StacCatalogItem.svelte',
  position: [ 7592, 7610 ],
  start: { line: 316, column: 7, character: 7592 },
  end: { line: 316, column: 25, character: 7610 },
  frame: '314:           <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">\n' +
    '315:             <thead>\n' +
    '316:               <th>Parameter</th>\n' +
    '                                     ^\n' +
    '317:               <th>Value</th>\n' +
    '318:             </thead>'
}
One or more `@migration-task` comments were added to `src/components/util/stac/StacCatalogItem.svelte`, please check them and complete the migration manually.
Error while migrating Svelte code [InternalCompileError: `<tr>` cannot be a child of `<table>`. `<table>` only allows these children: `<caption>`, `<colgroup>`, `<tbody>`, `<thead>`, `<tfoot>`, `<style>`, `<script>`, `<template>`. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.] {
  code: 'node_invalid_placement',
  filename: 'src/components/util/stac/StacCatalogMap.svelte',
  position: [ 1139, 1204 ],
  start: { line: 42, column: 4, character: 1139 },
  end: { line: 42, column: 69, character: 1204 },
  frame: '40:     <div slot="content">\n' +
    '41:       <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">\n' +
    '42:         <tr><th>STAC version</th><td>{stacCatalog.stac_version}</td></tr>\n' +
    '                                                                             ^\n' +
    '43:         <tr><th>Description</th><td>{stacCatalog.description}</td></tr>\n' +
    '44:         {#if stacCatalog.license}'
}
One or more `@migration-task` comments were added to `src/components/util/stac/StacCatalogMap.svelte`, please check them and complete the migration manually.
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:766:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:755:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/(app)/auth/[email protected]`, please check them and complete the migration manually.
Error while migrating Svelte code [InternalCompileError: `<th>` cannot be a child of `<tfoot>`. `<tfoot>` only allows these children: `<tr>`, `<style>`, `<script>`, `<template>`. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.] {
  code: 'node_invalid_placement',
  filename: 'src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte',
  position: [ 2006, 2018 ],
  start: { line: 78, column: 3, character: 2006 },
  end: { line: 78, column: 15, character: 2018 },
  frame: '76:     </tbody>\n' +
    '77:     <tfoot>\n' +
    '78:       <th>No.</th>\n' +
    '                      ^\n' +
    '79:       {#each Object.keys(layers[0]) as col}\n' +
    '80:         {#if !skipCols.includes(col)}'
}
One or more `@migration-task` comments were added to `src/routes/(app)/management/pgtileserv/PgtileserveTable.svelte`, please check them and complete the migration manually.
Error while migrating Svelte code [InternalCompileError: `<th>` cannot be a child of `<tfoot>`. `<tfoot>` only allows these children: `<tr>`, `<style>`, `<script>`, `<template>`. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components.] {
  code: 'node_invalid_placement',
  filename: 'src/routes/(app)/management/stac/api/[id]/+page.svelte',
  position: [ 8741, 8753 ],
  start: { line: 295, column: 7, character: 8741 },
  end: { line: 295, column: 19, character: 8753 },
  frame: '293:             </tbody>\n' +
    '294:             <tfoot>\n' +
    '295:               <th>No.</th>\n' +
    '                               ^\n' +
    '296:               <th>Title</th>\n' +
    '297:               <th>STAC page</th>'
}
One or more `@migration-task` comments were added to `src/routes/(app)/management/stac/api/[id]/+page.svelte`, please check them and complete the migration manually.
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:766:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:755:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/(app)/maps/[[id]]/edit/[email protected]`, please check them and complete the migration manually.
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:766:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:755:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/+layout.svelte`, please check them and complete the migration manually.
✔ Your project has been migrated

Recommended next steps:

  1: install the updated dependencies ('npm i' / 'pnpm i' / etc) (note that there may be peer dependency issues when not all your libraries officially support Svelte 5 yet. In this case try installing with the --force option)
  2: git commit -m "migration to Svelte 5"
  3: Review the breaking changes at https://svelte-5-preview.vercel.app/docs/breaking-changes

Run git diff to review changes.

✔ Continue? … yes
✔ Which folders should be migrated? › src
Updated svelte to ^5.0.0
Updated @sveltejs/vite-plugin-svelte to ^4.0.0
Updated eslint-plugin-svelte to ^2.45.1
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:779:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:765:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/(app)/auth/[email protected]`, please check them and complete the migration manually.
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:779:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:765:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/(app)/maps/[[id]]/edit/[email protected]`, please check them and complete the migration manually.
Error while migrating Svelte code Error: end is out of bounds
    at MagicString.update (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:779:41)
    at MagicString.overwrite (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/magic-string/dist/magic-string.es.mjs:765:15)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/node_modules/svelte/src/compiler/migrate/index.js:159:8)
    at transform_svelte_code (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/migrate.js:64:9)
    at file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:175:6
    at update_svelte_file (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/utils.js:314:31)
    at migrate (file:///Users/j_igarashi/.npm/_npx/8acd29437c672435/node_modules/svelte-migrate/migrations/svelte-5/index.js:174:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
One or more `@migration-task` comments were added to `src/routes/+layout.svelte`, please check them and complete the migration manually.
✔ Your project has been migrated

Recommended next steps:

  1: install the updated dependencies ('npm i' / 'pnpm i' / etc) (note that there may be peer dependency issues when not all your libraries officially support Svelte 5 yet. In this case try installing with the --force option)
  2: git commit -m "migration to Svelte 5"
  3: Review the migration guide at https://svelte.dev/docs/svelte/v5-migration-guide

Run git diff to review changes.