Svelte 5 Runes support

.changeset/config.json

@@ -2,10 +2,10 @@
 	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
 	"changelog": ["@changesets/changelog-github", { "repo": "HoudiniGraphQL/houdini" }],
 	"commit": false,
-	"fixed": [["houdini*", "create-*"]],
+	"fixed": [],
 	"linked": [],
 	"access": "public",
 	"baseBranch": "main",
-	"updateInternalDependencies": "patch",
+	"updateInternalDependencies": "minor",
 	"ignore": ["e2e-api", "e2e-react", "e2e-kit", "e2e-svelte", "site"]
 }

.changeset/new-comics-happen.md

@@ -0,0 +1,7 @@
+---
+'houdini-plugin-svelte-global-stores': minor
+'houdini-svelte': major
+'houdini': minor
+---
+
+Add support for Svelte 5 and Svelte Runes

.github/workflows/canary.yml

@@ -6,7 +6,7 @@ on:
     push:
         branches:
             - next
-            - error-memory-leak
+            - svelte-5
 
 env:
     CI: true
@@ -35,13 +35,13 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm
               id: pnpm-install
               with:
-                version: 7
+                version: 8
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/release.yml

@@ -33,13 +33,13 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm
               id: pnpm-install
               with:
-                version: 7
+                version: 8
 
             - name: Install dependencies
               run: pnpm install

.github/workflows/tests.yml

@@ -33,7 +33,7 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm
@@ -63,7 +63,7 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm
@@ -106,7 +106,7 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm
@@ -160,7 +160,7 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             # pnpm
 
@@ -201,7 +201,7 @@ jobs:
                 key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }}
                 path: ${{ env.PLAYWRIGHT_BROWSERS_PATH }}
 
-            - run: pnpm playwright install
+            - run: pnpm playwright install --with-deps
               if: steps.playwright-cache.outputs.cache-hit != 'true'
 
             # Run tests
@@ -225,7 +225,7 @@ jobs:
             - name: Install Node.js
               uses: actions/setup-node@v3
               with:
-                node-version: 16.17.0
+                node-version: 20.13.1
 
             - uses: pnpm/[email protected]
               name: Install pnpm

e2e/kit/.eslintrc.cjs

@@ -1,16 +1,27 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
-  ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-  settings: {
-    'svelte3/typescript': () => require('typescript')
-  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:svelte/recommended'
+  ],
+  plugins: ['@typescript-eslint'],
+  ignorePatterns: ['*.cjs', '$houdini/**'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ],
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte']
   },
   env: {
     browser: true,
@@ -21,6 +32,10 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off'
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    // Disable svelte-check, as we already have that as a separate step
+    'svelte/valid-compile': 'off',
+    // With component queries, it is valid to have e.g. props that are only used through the _QueryVariables function.
+    '@typescript-eslint/no-unused-vars': 'off'
   }
 };

e2e/kit/package.json

@@ -13,41 +13,42 @@
     "build:generate": "pnpm build: && npx houdini generate",
     "build:test": "pnpm build: && pnpm test",
     "build:build": "pnpm build: && pnpm build",
-    "package": "svelte-kit package",
     "previewWeb": "vite preview --port 3007",
     "preview": "concurrently \"pnpm run previewWeb\" \"pnpm run api\" -n \"web,api\" -c \"green,magenta\"",
-    "tests": "playwright test ",
+    "tests": "playwright test",
     "test": "npm run tests",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "pnpm run check -- --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+    "lint": "prettier --ignore-path .gitignore --check . && eslint .",
+    "format": "prettier --ignore-path .gitignore --write ."
   },
   "devDependencies": {
     "@kitql/helpers": "^0.8.2",
-    "@playwright/test": "1.30.0",
-    "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.9.3",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
+    "@playwright/test": "1.44.0",
+    "@sveltejs/adapter-auto": "^3.2.1",
+    "@sveltejs/kit": "^2.5.10",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "concurrently": "7.1.0",
     "cross-env": "^7.0.3",
     "e2e-api": "workspace:^",
-    "eslint": "^8.3.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.39.0",
     "houdini": "workspace:^",
     "houdini-plugin-svelte-global-stores": "workspace:^",
     "houdini-svelte": "workspace:^",
-    "prettier": "^2.8.3",
-    "prettier-plugin-svelte": "^2.9.0",
-    "svelte": "^3.57.0",
-    "svelte-check": "^3.0.1",
-    "svelte-preprocess": "^5.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.3",
+    "svelte": "5.0.0-next.175",
+    "svelte-check": "^3.8.0",
+    "svelte-eslint-parser": "^0.36.0",
+    "svelte-preprocess": "^5.1.4",
     "tslib": "^2.3.1",
-    "typescript": "^4.9",
-    "vite": "^4.1.4",
-    "vite-plugin-lib-reporter": "^0.0.7"
+    "typescript": "^5.0.0",
+    "vite": "^5.2.12",
+    "vite-plugin-lib-reporter": "^0.1.0"
   },
   "dependencies": {
     "@sveltejs/adapter-node": "^5.0.1",

e2e/kit/playwright.config.ts

@@ -1,31 +1,23 @@
-// manual switch for now until replayio is fixed (currently breaking our tests)
-const with_replayio = false;
+import { ReporterDescription, defineConfig } from '@playwright/test';
 
-const use = with_replayio
-  ? {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...replayDevices['Replay Chromium'],
-      screenshot: 'only-on-failure'
-    }
-  : { screenshot: 'only-on-failure' };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const reporter = [['list']];
+const reporters: ReporterDescription[] = [['list'], ['html', { open: 'never' }]];
 if (process.env.CI) {
-  reporter.push(['html', { open: 'never' }]);
-  reporter.push(['github']);
+  reporters.push(['github']);
 }
 
-const config = {
+export default defineConfig({
+  testMatch: 'spec.ts',
+  use: {
+    headless: true,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure'
+  },
   retries: process.env.CI ? 3 : 0,
   workers: 5,
-  reporter,
-  use,
+  reporter: reporters,
   webServer: {
     command: 'npm run build && npm run preview',
     port: 3007,
     timeout: 120 * 1000
   }
-};
-
-export default config;
+});

e2e/kit/src/app.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

e2e/kit/src/lib/QueryComponent.svelte

@@ -8,7 +8,6 @@
     };
   };
 
-  // svelte-ignore unused-export-let
   export let id = '';
 
   $: result = graphql(`

e2e/kit/src/lib/utils/routes.ts

@@ -111,5 +111,11 @@ export const routes = {
   Stores_subunsub_mutation: '/stores/subunsub-mutation',
 
   Stores_Layouts: '/layouts',
-  Stores_Layouts_page2: '/layouts/page2'
+  Stores_Layouts_page2: '/layouts/page2',
+
+  Svelte5_Runes_Simple_SSR: '/svelte5-runes/simple-ssr',
+  Svelte5_Runes_Pagination: '/svelte5-runes/pagination',
+  Svelte5_Runes_Fragment: '/svelte5-runes/fragment',
+  Svelte5_Runes_Component: '/svelte5-runes/component',
+  Svelte5_Runes_Mutation: '/svelte5-runes/mutation'
 };

e2e/kit/src/routes/blocking/spec.ts

@@ -15,7 +15,7 @@ test.describe('blocking', () => {
     expect(h2).toBe('query_with_blocking_disable');
 
     // we should have no data
-    await expect_to_be(page, 'undefined-undefined');
+    await expect_to_be(page, '-');
 
     // the delay is 1000, let's wait a bit more
     await sleep(1500);

e2e/kit/src/routes/customIDs/spec.ts

@@ -9,7 +9,7 @@ test.describe('customIDs', () => {
     // expect to have the righ data
     await expect_to_be(
       page,
-      'User: 1 - Book: 0 - Rate: 10 User: 5 - Book: 5 - Rate: 8 User: 1 - Book: 1 - Rate: 9'
+      'User: 1 - Book: 0 - Rate: 10User: 5 - Book: 5 - Rate: 8User: 1 - Book: 1 - Rate: 9'
     );
 
     const ret = await expect_1_gql(page, 'button[id=u77]');
@@ -20,7 +20,7 @@ test.describe('customIDs', () => {
     // displayed result with the updated value to 77
     await expect_to_be(
       page,
-      'User: 1 - Book: 0 - Rate: 10 User: 5 - Book: 5 - Rate: 8 User: 1 - Book: 1 - Rate: 77'
+      'User: 1 - Book: 0 - Rate: 10User: 5 - Book: 5 - Rate: 8User: 1 - Book: 1 - Rate: 77'
     );
   });
 });

e2e/kit/src/routes/lists/all/+page.svelte

@@ -13,8 +13,8 @@
   $: browser && limit && updateQS();
 
   async function updateQS() {
-    $page.url.searchParams.set('limit', limit.toString());
-    const newUrl = $page.url.href;
+    const newUrl = new URL($page.url);
+    newUrl.searchParams.set('limit', limit.toString());
     await invalidate(newUrl);
     await goto(newUrl, { replaceState: true, keepFocus: true });
   }

e2e/kit/src/routes/nested-argument-fragments-masking/spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { routes } from '../../lib/utils/routes.js';
-import { expect_1_gql, expect_to_be, goto } from '../../lib/utils/testsHelper.js';
+import { goto } from '../../lib/utils/testsHelper.js';
 import { sleep } from '@kitql/helpers';
 
 test('Nested fragment argument masking', async ({ page }) => {

e2e/kit/src/routes/nested-routes/+page.server.ts

@@ -4,7 +4,7 @@ import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = async (event) => {
   if (event.url.pathname.endsWith('nested-routes')) {
     // fallback to user 2... because why not?
-    throw redirect(307, event.url.pathname + '/user-2');
+    redirect(307, event.url.pathname + '/user-2');
   }
   return {};
 };

e2e/kit/src/routes/nested-routes/user-[userId]/+page.server.ts

@@ -7,5 +7,5 @@ export const load: PageServerLoad = async (event) => {
   }
 
   // fallback to a default TAB if not set
-  throw redirect(307, event.url.pathname + '/birth');
+  redirect(307, event.url.pathname + '/birth');
 };

e2e/kit/src/routes/pagination/query/offset-single-page/spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 import { routes } from '../../../../lib/utils/routes.js';
 import { expect_1_gql, expect_to_be, goto } from '../../../../lib/utils/testsHelper.js';
 

e2e/kit/src/routes/plugin/query/variables-error/+page.js

@@ -1,5 +1,5 @@
 import { error } from '@sveltejs/kit';
 
 export function _PreprocessorTestQueryErrorVariables() {
-  throw error(403, 'test');
+  error(403, 'test');
 }

e2e/kit/src/routes/stores/comp_disable_auto_fetch/spec.ts

@@ -7,7 +7,7 @@ test('Arriving on the page without data and without an auto fetch (SSR)', async
   await goto(page, routes.Stores_Comp_disable_auto_fetch);
 
   const pContentIndex = await page.locator('p').allTextContents();
-  expect(pContentIndex).toEqual(['QueryExtNoAutoFetch - Number of users: undefined']);
+  expect(pContentIndex).toEqual(['QueryExtNoAutoFetch - Number of users: ']);
 });
 
 test('Arriving on the page without data and without an auto fetch (CSR)', async ({ page }) => {
@@ -16,5 +16,5 @@ test('Arriving on the page without data and without an auto fetch (CSR)', async
   await clientSideNavigation(page, routes.Stores_Comp_disable_auto_fetch);
 
   const pContentIndex = await page.locator('p').allTextContents();
-  expect(pContentIndex).toEqual(['QueryExtNoAutoFetch - Number of users: undefined']);
+  expect(pContentIndex).toEqual(['QueryExtNoAutoFetch - Number of users: ']);
 });

e2e/kit/src/routes/stores/network/spec.ts

@@ -12,7 +12,8 @@ test.describe('NETWORK Page', () => {
     const ssrResp = await goto(page, routes.Stores_Network);
 
     const ele = await ssrResp?.text();
-    expect(ele).toContain('<ul></ul>');
+    // Svelte 5 inserts these [] comments to indicate hydration fragments. 👉 https://github.com/sveltejs/svelte/issues/10609
+    expect(ele).toContain('<ul><!--[--><!--]--></ul>');
   });
 
   test('Getting the right data in a network mode (CSR)', async ({ page }) => {