Svelte 5 Runes support

[SeppahBaws]

With Svelte 5 now being RC it's about time to finish this up, so that we have Svelte 5 support right when it comes out.

The main breaking changes Svelte 5 brings for us are Runes, which are incompatible with the old export let stuff that Houdini was generating for the query loads etc.

Todo list:

• [ ] (ideally) Test in a bigger project and collect feedback
• [x] Make sure that tests broken by breaking changes are patched (https://svelte-5-preview.vercel.app/docs/breaking-changes)
• [x] Add section in Docs on Svelte 5

Feedback welcome!

If you would like to try this in your project, bump the version in your package.json to the latest @canary tag on npm. Please feel free to give feedback in here on things that maybe are broken or could be done better.

For an example usage of how to use it in runes mode, check out the examples in the docs: https://deploy-preview-1300--houdinigraphql.netlify.app/guides/svelte-5

Sidenotes

• I'm not entirely sure whether wrapping the store in a $derived() rune is the best way to go about it. I think ideally we would be able to define a custom rune $graphql(...) or $fragment(...) but I doubt that will happen.
• Maybe the graphql() and fragment() functions could return a rune, so that the $derived() is hidden from the user. -> users don't need to edit anything about their queries to upgrade. need to experiment whether it would even work...

---

To help everyone out, please make sure your PR does the following:

• [ ] Update the first line to point to the ticket that this PR fixes
• [x] Add a message that clearly describes the fix
• [x] If applicable, add a test that would fail without this fix
• [x] Make sure the unit and integration tests pass locally with pnpm run tests and cd integration && pnpm run tests
• [x] Includes a changeset if your fix affects the user with pnpm changeset

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d1f506097c1e1e04498071e4b7b18323f7d4a23b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

| Name | Type | | ----------------------------------- | ----- | | houdini-plugin-svelte-global-stores | Minor | | houdini-svelte | Major | | houdini | Minor | | houdini-adapter-auto | Patch | | houdini-adapter-cloudflare | Patch | | houdini-adapter-node | Patch | | houdini-adapter-static | Patch | | houdini-react | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for houdini-docs-next ready!

Name	Link
🔨 Latest commit	3596843043f945805253047adfe6ea600908f2b3
🔍 Latest deploy log	https://app.netlify.com/sites/houdini-docs-next/deploys/66afa41e68ae1400086bc3b6
😎 Deploy Preview	https://deploy-preview-1300--houdini-docs-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for houdinigraphql ready!

Name	Link
🔨 Latest commit	d1f506097c1e1e04498071e4b7b18323f7d4a23b
🔍 Latest deploy log	https://app.netlify.com/sites/houdinigraphql/deploys/670d9f233a127d0008445ca3
😎 Deploy Preview	https://deploy-preview-1300--houdinigraphql.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aumetra]

I'm working on a full rewrite of a Vue app in Svelte 5 + SvelteKit, so I'd be happy to report any issues that come up.

[SeppahBaws]

There is one broken e2e test atm: the /lists/all route somehow only sends a query refetch every 2 times we press arrow up. Will require some more investigating...

[paulocr]

I am seeing lots of these as I make changes to my code, I am thinking it could be my dependencies:

TypeError: Cannot read properties of null (reading 'HoudiniClient')
    at /Users/paulo/development/vendure/sk5_vendure_frontend/src/client.ts:4:20
    at async instantiateModule (file:///Users/paulo/development/vendure/sk5_vendure_frontend/node_modules/.pnpm/vite@5.0.3/node_modules/vite/dist/node/chunks/dep-vyqc0_aB.js:50057:9)

These are my dependencies:

        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@types/eslint": "^8.56.0",
        "@typescript-eslint/eslint-plugin": "^7.0.0",
        "@typescript-eslint/parser": "^7.0.0",
        "eslint": "^8.56.0",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-svelte": "^2.36.0-next.4",
        "houdini": "0.0.0-20240515214704",
        "houdini-svelte": "0.0.0-20240515214704",
        "prettier": "^3.1.1",
        "prettier-plugin-svelte": "^3.1.2",
        "svelte": "^5.0.0-next.1",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3"

And here is my client.ts:

export default new HoudiniClient({
    url: 'http://localhost:3030/shop-api',
       throwOnError: {
        // can be any combination of
        // query, mutation, subscription, and all
        operations: ['all'],
        // the function to call
        error: (errors, ctx) =>
            error(
                500,
                `(${ctx.artifact.name}): ` + errors.map((err) => err.message).join('. ') + '.'
            ),
    }
})

For now my solution is to restart my dev server and things go along but I am curious if there is something you can spot that is wrong or if anyone is facing the same issue.

[SeppahBaws]

@paulocr hmmm strange, at first glance it looks like it's an error coming from a vite dependency. Can you try updating your vite version to the latest? I haven't had enough time yet to mess around with svelte 5 enough in our project at work since other higher prio things keep popping up, so if you have a reproduction that would help a lot with tracking this down 🙂

[SeppahBaws]

So I think this PR is not in WIP anymore and is in general stable. However I'm going to leave the PR as draft until Svelte 5 releases, and put it as ready for review once we can add a dependency on the final 5.0 version.

[shadow-identity]

Thank you all for your work!

[Serator]

Hey @SeppahBaws. First of all I would like to thank you for your work! I've been using the canary (0.0.0-20240707155617) version for some time now and today I ran into an issue where on the latest version of Svelte 5.0.0-next.206 I get an error in the dev-mode runtime: "ReferenceError: AppDataStore is not defined". In Svelte version 5.0.0.0-next.205 everything worked.

Unfortunately, I don't have a link to reproduce it right now. Here is the part of the code where the error occurs:

// app-data-subscription.gql
subscription AppData($id: uuid!) {
  // GQL here.
}

import {AppDataStore} from '$houdini'
const appDataStore = new AppDataStore()// <<< ReferenceError: AppDataStore is not defined

[SeppahBaws]

Hey @Serator, thanks for reporting this! I'll try to look into it this weekend. Does the error only happen with subscriptions or also with query or mutation stores?

[Serator]

@SeppahBaws It's definitely happening with subscriptions, I don't know about the rest yet.

[SeppahBaws]

@Serator could you share a reproduction? I can't seem to recreate the error

[Serator]

Hi @SeppahBaws. Sorry, I've been traveling and haven't had a chance to post. I have now updated to the latest version of Svelte 5.0.0-next.219 and the issue is gone. I haven't had time to figure out what was causing it, but now the issue is not reproducing.

[SeppahBaws]

@Serator ah hmm strange, glad it's fixed tho 🙂

[SeppahBaws]

Just need to figure out why playwright suddenly doesn't want to play along anymore and then I guess we can merge this to the houdini-2.0 branch to kick off houdini@next 🙂