Merge pull request #48 from kiosion/bump-svelte

Bump svelte to `5.0.0-next.90`

package.json

@@ -44,7 +44,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.57"
+    "svelte": "^5.0.0-next.89"
   },
   "devDependencies": {
     "@playwright/test": "1.42.1",
@@ -63,7 +63,7 @@
     "prettier": "3.2.5",
     "prettier-plugin-svelte": "3.2.2",
     "publint": "0.2.7",
-    "svelte": "5.0.0-next.82",
+    "svelte": "5.0.0-next.90",
     "svelte-check": "3.6.8",
     "tslib": "2.6.2",
     "typescript": "5.4.3",

src/routes/+layout.ts

@@ -1 +1 @@
-export const ssr = false;
+export const ssr = true;

src/routes/+page.svelte

@@ -20,25 +20,27 @@
         <span>extra large 2</span>
       {/snippet}
 
-      <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} content={{ xl2 }}>
-        {#snippet sm()}
-          <span>small</span>
-        {/snippet}
-        {#snippet md()}
-          <span>medium</span>
-        {/snippet}
-        {#snippet lg()}
-          <span>large</span>
-        {/snippet}
-        {#snippet xl()}
-          <span>extra large</span>
-        {/snippet}
-        <span>unknown</span>
-      </Breakpoints>
+      <span data-test-id="current-match">
+        <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} content={{ xl2 }}>
+          {#snippet sm()}
+            small
+          {/snippet}
+          {#snippet md()}
+            medium
+          {/snippet}
+          {#snippet lg()}
+            large
+          {/snippet}
+          {#snippet xl()}
+            extra large
+          {/snippet}
+          unknown
+        </Breakpoints>
+      </span>
     </strong></h2>
 
     <Breakpoints queries={DEFAULT_BREAKPOINT_SIZES} let:$matches>
-      <p>Here are all matching queries from binding to the store: {$matches.join(', ')}</p>
+      <p>Here are all matching queries from binding to the store: <span data-test-id="matches-store">{$matches.join(', ')}</span></p>
     </Breakpoints>
 
     <Breakpoints queries={{

tests/index_test.ts

@@ -18,3 +18,27 @@ test('index page breakpoints respond to viewport changes', async ({ page }) => {
     ).toBeVisible();
   }
 });
+
+test('store of current matches functions as expected', async ({ page }) => {
+  await page.goto('/');
+
+  await page.setViewportSize({ width: 400, height: 600 });
+
+  await expect(page.locator('[data-test-id="matches-store"]')).toBeVisible();
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm');
+
+  await page.setViewportSize({ width: 800, height: 600 });
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm, md');
+
+  await page.setViewportSize({ width: 1050, height: 600 });
+
+  expect(
+    await page.locator('[data-test-id="matches-store"]').textContent()
+  ).toEqual('sm, md, lg');
+});