WIP: svelte5 port

package.json

@@ -13,15 +13,15 @@
     "@cloudflare/workers-types": "^4.20221111.1",
     "@playwright/test": "^1.45.2",
     "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@tsconfig/svelte": "^5.0.2",
     "@types/wicg-file-system-access": "^2020.9.5",
     "better-sqlite3": "^7.6.2",
-    "carbon-components-svelte": "^0.82.7",
+    "carbon-components-svelte": "^0.86.2",
     "carbon-icons-svelte": "^12.1.0",
-    "carbon-preprocess-svelte": "^0.10.0",
+    "carbon-preprocess-svelte": "^0.11.8",
     "expect": "^26.6.2",
     "node-fetch": "^2.6.1",
     "pixelmatch": "^5.2.1",
@@ -32,11 +32,11 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-svelte": "^7.1.5",
+    "rollup-plugin-svelte": "^7.2.2",
     "rollup-plugin-workbox": "^6.2.0",
     "ssri": "^10.0.1",
-    "svelte": "^4.2.0",
-    "svelte-preprocess": "^5.0.4",
+    "svelte": "^5.9.0",
+    "svelte-preprocess": "^6.0.3",
     "tslib": "^2.6.3",
     "typescript": "^5.5.2",
     "wrangler": "^2.11"

rollup.config.js

@@ -10,7 +10,7 @@ import css from 'rollup-plugin-css-only';
 import copy from 'rollup-plugin-copy';
 import del from 'rollup-plugin-delete';
 import bundleFonts from 'rollup-plugin-bundle-fonts';
-import preprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 import commonjs from '@rollup/plugin-commonjs';
 import { optimizeImports } from 'carbon-preprocess-svelte';
 import { generateSW } from 'rollup-plugin-workbox';
@@ -75,7 +75,7 @@ export default [
 		optimizeImports(),
 
 		svelte({
-			preprocess: preprocess(),
+			preprocess: sveltePreprocess(),
 		}),
 
 		bundleFonts({fontTargetDir: "public/fonts", cssBundleDir: "public/build"}),
@@ -91,7 +91,8 @@ export default [
 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
 		resolve({
 			browser: true,
-			dedupe: ['svelte']
+			dedupe: ['svelte'],
+			exportConditions: [ production ? "production" : "development" ]
 		}),
 		commonjs(),
 		typescript( { sourceMap: !production} ),

src/App.svelte

@@ -2166,10 +2166,13 @@ Please include a link to this sheet in the email to assist in debugging the prob
     flex-wrap: wrap !important;
     height: fit-content !important;
     width: 100vw;
-    overflow-x: auto;
     justify-content: flex-end;
   }
 
+  :global(.bx--header a) {
+    color: white;
+  }
+
   @media print {
     :global(.bx--header) {
       display: none !important;
@@ -2338,30 +2341,30 @@ Please include a link to this sheet in the email to assist in debugging the prob
   }
 
   :global(.standalone) {
-    display: none;
+    display: none !important;
   }
 
   @media all and (display-mode: standalone) {
     :global(.standalone) {
-      display: block;
+      display: block !important;
     }
   }
 
   @media (max-width: 450px) {
     :global(.hide-when-kinda-narrow) {
-      display: none;
+      display: none !important;
     }
   }
 
   @media (max-width: 400px) {
     :global(.hide-when-narrow) {
-      display: none;
+      display: none !important;
     }
   }
 
   @media (max-width: 330px) {
     :global(.hide-when-really-narrow) {
-      display: none;
+      display: none !important;
     }
   }
 
@@ -2416,27 +2419,27 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     {#if serviceWorkerUpdateWaiting}
       <HeaderGlobalAction 
-        title="Update Available" 
+        iconDescription="Update Available" 
         on:click={handleUpdateAvailable}
       >
         <Renew size={20} id="update-icon"/>
       </HeaderGlobalAction>
     {/if}
     <HeaderGlobalAction 
       class="standalone"
-      title="Go Back"
+      iconDescription="Go Back"
       on:click={() => window.history.back()}
       icon={ArrowLeft}
     />
     <HeaderGlobalAction 
       class="standalone"
-      title="Go Forward"
+      iconDescription="Go Forward"
       on:click={() => window.history.forward()}
       icon={ArrowRight}
     />
     <HeaderGlobalAction
       class="standalone hide-when-narrow"
-      title="Print"
+      iconDescription="Print"
       on:click={() => window.print()}
       icon={Printer}
     />
@@ -2447,41 +2450,42 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     <HeaderUtilities>
       {#if !inIframe}
-        <HeaderActionLink
+        <HeaderGlobalAction
           id="new-sheet"
-          title="New Sheet"
+          iconDescription="New Sheet"
           href="/" 
           icon={DocumentBlank}
           on:click={ (e) => handleLinkPushState(e, '/') }
         />
         <HeaderGlobalAction
           id="open-sheet"
-          title="Open Sheet From File"
+          iconDescription="Open Sheet From File"
           on:click={handleFileOpen}
           icon={Document}
         />
         <HeaderGlobalAction
           id="save-sheet"
-          title="Save Sheet to File in Various Formats"
+          iconDescription="Save Sheet to File in Various Formats"
           on:click={loadSaveSheetModal}
           icon={Download}
         />
         <HeaderGlobalAction
           id="upload-sheet"
-          title="Get Shareable Link"
+          iconDescription="Get Shareable Link"
           on:click={handleGetShareableLink} 
           icon={CloudUpload}
         />
-        <HeaderActionLink
+        <HeaderGlobalAction
           href={`/${tutorialHash}`}
-          title="Tutorial"
+          iconDescription="Tutorial"
           rel="nofollow"
           icon={Help}
           on:click={(e) => handleLinkPushState(e, `/${tutorialHash}`) }
         />
         <div class="dot-container">
           <HeaderGlobalAction 
-            title={"Sheet Settings" + (usingDefaultConfig ? "" : " (Modified)")}
+            iconDescription={"Sheet Settings" + (usingDefaultConfig ? "" : " (Modified)")}
+            tooltipAlignment="end"
             on:click={handleSheetSettings} 
             icon={SettingsAdjust}
           />
@@ -2490,19 +2494,21 @@ Please include a link to this sheet in the email to assist in debugging the prob
           {/if}
         </div>
         <HeaderGlobalAction
-          title="Supported Units"
+          iconDescription="Supported Units"
+          tooltipAlignment="end"
           on:click={handleUnitsModal}
           icon={Ruler}
         />
         <HeaderGlobalAction 
           class="hide-when-narrow" 
-          title="Keyboard Shortcuts" 
+          iconDescription="Keyboard Shortcuts"
+          tooltipAlignment="end"
           on:click={handleKeyboardShortcutsModal}
           icon={Keyboard}
         />
       {:else}
         <HeaderGlobalAction
-          title="Open this sheet in a new tab"
+          iconDescription="Open this sheet in a new tab"
           on:click={() => window.open(window.location.href, "_blank")}
           icon={Launch}
         />

src/InsertSheet.svelte

@@ -40,7 +40,7 @@
       treeElements.push({
         id: currentIndex++,
         text: "Prebuilt Tables",
-        children: children
+        nodes: children
       });
     }
 
@@ -58,7 +58,7 @@
       treeElements.push({
         id: currentIndex++,
         text: "Recent Sheets",
-        children: children
+        nodes: children
       });
     }
   }
@@ -96,7 +96,7 @@
       <div>
         <TreeView
           labelText="Quick Links"
-          children={treeElements}
+          nodes={treeElements}
           on:select={handleSelect}
         />
       </div>

src/MathCell.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { onMount, createEventDispatcher, SvelteComponent } from "svelte";
-  import { get_current_component } from "svelte/internal";
   import { bignumber, format, unaryMinus, type BigNumber, type FormatOptions } from "mathjs";
   import { cells, results, sub_results, resultsInvalid, activeCell, mathCellChanged, config } from "./stores";
   import { isFiniteImagResult, type Result, type FiniteImagResult,
@@ -51,14 +50,12 @@
   }
 
   const dispatch = createEventDispatcher<{
-    updateNumberFormat: {mathCell: MathCell, target: SvelteComponent};
+    updateNumberFormat: {};
     generateCode: {index: number};
     insertMathCellAfter: {index: number};
     insertInsertCellAfter: {index: number};
   }>();
 
-  const self = get_current_component();
-
   export function setNumberConfig(mathCellConfig: MathCellConfig) {
     mathCell.config = mathCellConfig;
   }
@@ -68,7 +65,7 @@
   }
 
   function handleUpdateNumberFormat() {
-    dispatch("updateNumberFormat", { mathCell: mathCell, target: self });
+    dispatch("updateNumberFormat", {});
   }
 
   function handleGenerateCode() {

src/main.js

@@ -1,6 +1,7 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 
-const app = new App({
+const app = mount(App, {
 	target: document.body,
 	props: {}
 });

tests/test_basic.spec.mjs

@@ -686,7 +686,7 @@
   await page.setLatex(0, String.raw`1\left[m^{\frac{1}{3}}\right]\cdot 1\left[m^{\frac{2}{3}}\right]=`);
   await page.waitForSelector('text=Updating...', {state: 'detached'});
 
   let content = await page.textContent('#result-units-0');
   expect(content).toBe('m');
 
   await page.forceDeleteCell(0);
@@ -1176,7 +1176,7 @@
   await page.locator('text=Show Error').click();
 
   // first cell should now be visible
-  await expect(page.locator('button.bx--tooltip__trigger').nth(0)).toBeFocused({timeout: 1000});
+  await expect(page.locator('#cell-0 button.bx--tooltip__trigger')).toBeFocused({timeout: 1000});
 
 });
 
@@ -1829,7 +1829,7 @@
 });
 
 test('Test error units applied to variable name', async () => {
   await page.locator('#cell-0 >> math-field.editable').type("a[m]=");
 
   await expect(page.locator('#cell-0 >> text=Units cannot be applied directly to a variable name')).toBeVisible();
 });

tests/test_checkpoints.spec.mjs

@@ -18,7 +18,7 @@ test('Test autosave checkpoints', async ({ browserName }) => {
   });
 
   // Change title
-  await page.click('text=New Sheet', { clickCount: 3 });
+  await page.getByRole('heading', { name: 'New Sheet' }).click({ clickCount: 3 });
   await page.type('text=New Sheet', 'New Title');
 
   await page.setLatex(0, '1=');
@@ -68,6 +68,6 @@ test('Test autosave checkpoints', async ({ browserName }) => {
   expect(parseLatexFloat(content)).toBeCloseTo(1, precision);
 
   await page.goBack();
-  await page.locator('text=New Sheet').waitFor();
+  await page.getByRole('heading', { name: 'New Sheet' }).waitFor();
 
 });

tests/test_context_menu.spec.mjs

@@ -57,7 +57,7 @@ test('Open context with menu button', async () => {
   await page.locator('button:has-text("≡")').click();
   await page.locator('text=Select All').click();
   await page.locator('button:has-text("≡")').click();
-  await page.locator('text=Cut').click();
+  await page.getByText('Cut', { exact: true }).click();
 
   await page.locator('#add-math-cell').click();
 

tests/test_custom_base_units.spec.mjs

@@ -29,7 +29,7 @@ test('Test custom base units for math cells', async () => {
   await page.getByRole('option', { name: 'g', exact: true }).click();
   await page.getByText('Length').click();
   await page.getByRole('option', { name: 'mm', exact: true }).click();
-  await page.getByText('Area').click();
+  await page.getByText('Area', {exact: true}).click();
   await page.getByRole('option', { name: 'km^2', exact: true }).click();
   await page.getByRole('button', { name: 'Confirm' }).click();
 
@@ -56,7 +56,7 @@ test('Test custom base units for math cells', async () => {
   expect(content).toBe('mg*Mm');
 
   // make sure sheet level settings modified dot is set
-  await expect(page.getByTitle('Sheet Settings (Modified')).toBeVisible();
+  await expect(page.getByText('Sheet Settings (Modified')).toBeAttached();
 
   // save sheet to database
   await page.click('#upload-sheet');
@@ -95,7 +95,7 @@ test('Test custom base units for math cells', async () => {
   content = await page.textContent('#result-units-3');
   expect(content).toBe('mg*Mm');
 
-  await expect(page.getByTitle('Sheet Settings (Modified')).toBeVisible();
+  await expect(page.getByText('Sheet Settings (Modified')).toBeAttached();
 
   // set sheet wide settings to default
   await page.getByRole('button', { name: 'Sheet Settings' }).click();

tests/test_data_table.spec.mjs

@@ -390,7 +390,7 @@
   const modifierKey = (await page.evaluate('window.modifierKey') )=== "metaKey" ? "Meta" : "Control";
 
   // Change title
-  await page.click('text=New Sheet', { clickCount: 3 });
+  await page.getByRole('heading', { name: 'New Sheet' }).click({ clickCount: 3 });
   await page.type('text=New Sheet', 'Title for testing purposes only, will be deleted from database automatically');
 
   await page.locator('#add-data-table-cell').click();
@@ -506,12 +506,12 @@
   const modifierKey = (await page.evaluate('window.modifierKey') )=== "metaKey" ? "Meta" : "Control";
 
   // Change title
-  await page.click('text=New Sheet', { clickCount: 3 });
+  await page.getByRole('heading', { name: 'New Sheet' }).click({ clickCount: 3 });
   await page.type('text=New Sheet', 'Title for testing purposes only, will be deleted from database automatically');
 
   await page.locator('#add-data-table-cell').click();
 
   await page.locator('#data-table-input-1-0-0').click();
 
   await page.keyboard.type('0');
   await page.keyboard.press('Tab');
@@ -550,12 +550,12 @@
   const modifierKey = (await page.evaluate('window.modifierKey') )=== "metaKey" ? "Meta" : "Control";
 
   // Change title
-  await page.click('text=New Sheet', { clickCount: 3 });
+  await page.getByRole('heading', { name: 'New Sheet' }).click({ clickCount: 3 });
   await page.type('text=New Sheet', 'Title for testing purposes only, will be deleted from database automatically');
 
   await page.locator('#add-data-table-cell').click();
 
   await page.locator('#add-col-1').click();
 
   await page.locator('#data-table-input-1-0-0').click();
 
@@ -1192,7 +1192,7 @@
   const modifierKey = (await page.evaluate('window.modifierKey') )=== "metaKey" ? "Meta" : "Control";
 
   // Change title
-  await page.click('text=New Sheet', { clickCount: 3 });
+  await page.getByRole('heading', { name: 'New Sheet' }).click({ clickCount: 3 });
   await page.type('text=New Sheet', 'Title for testing purposes only, will be deleted from database automatically');
 
   await page.locator('#add-data-table-cell').click();