WIP - Add Svelte 5 adapter#2586
Closed
brodienguyen wants to merge 56 commits into
Closed
Conversation
Contributor
Author
|
@pedroborges I assume you are the maintainer of the svelte package. Do you mind to help me figure out why the |
Introduce the Svelte 5 adapter for Inertia.js, including core components, utilities, configuration, and a comprehensive test application. Update documentation and test server logic to support Svelte 5 integration.
Replaces all imports from '@inertiajs/svelte' with '@inertiajs/svelte5' across layouts, pages, and form helpers in the Svelte 5 test app. This aligns the codebase with the new package structure and ensures compatibility with the latest version.
Replace all usages of $page and @inertiajs/svelte imports with page and @inertiajs/svelte5 in test-app Svelte components. This aligns the test app with the new svelte5 API and ensures consistent usage of the page store and form helpers.
Refactored Svelte components to use $props and $state for props and state management, replacing legacy export let syntax. Updated page state management to support both runes-based and store-based approaches for backward compatibility. Adjusted test-app usage to align with new $page and mount API.
Refactors Deferred, Form, Link, and WhenVisible components to use `children` and `fallback` props instead of Svelte slots. This improves composability and aligns with a more functional component API.
Replace usage of slot-based fallback fragments with the new {#snippet fallback()} syntax in Deferred components across InstantReload, ManyGroups, Page1, and Page2 Svelte files. This aligns with updated Svelte syntax for defining fallback content.
Replace all instances of page.url with $page.url in Events.svelte to ensure correct reactive referencing of the page URL. This change improves consistency and leverages Svelte's store syntax for reactivity.
Refactor FormComponent to wrap form elements in a snippet block using the children({ isDirty }) pattern instead of let:isDirty. This improves consistency with the updated API and enhances readability.
Access pageState.props within the $effect callback to ensure proper reactivity. Assign props to a local variable and use it for loaded state calculation.
Replace $state with $derived for renderProps to ensure reactive updates. Move setPage(page) into an $effect to synchronize global page state with local changes. Cleans up redundant assignments in event handler.
Refactor Errors.svelte to wrap form content in a snippet block using children({ errors, hasErrors, setError, clearErrors }). This improves composability and makes the form logic more reusable.
Refactor Form and Link components to use direct event handler props instead of Svelte's on:event syntax. This improves compatibility with Svelte 5 and enables more flexible event handling.
Expose isDirty and setError from the Form component to consumers. Update SetDefaultsOnSuccess example to use the new children snippet API for accessing isDirty and errors.
Refactor ResetOnError and ResetOnSuccess components to use the {#snippet children({ errors })} block instead of let:errors. This aligns with updated Form API usage and improves code consistency.
Refactor ResetOnErrorFields and ResetOnSuccessFields components to use the {#snippet children({ errors })} block instead of let:errors. This aligns with updated Form API usage and improves code consistency.
Replace manual slot props with snippet block for children, improving readability and maintainability of form event state handling.
Refactor Form component usage to use 'action' instead of 'bind:action' and implement the 'children' snippet for rendering form fields. Change error message container from <p> to <div> for consistency.
Refactor EmptyAction.svelte to use the snippet block for children and remove the let:errors directive. Error messages are now rendered inside a div instead of a paragraph.
Introduce an email input field to the form and update error handling to support both name and email fields. Refactor markup to use snippet block for children and improve error display.
Update test.skip conditions to also skip tests when PACKAGE is 'svelte5', reflecting lack of support for Head and Link features in the Svelte 5 adapter.
Replaces the store-based useForm implementation with a Svelte runes-based version for improved reactivity and integration. Updates all imports and usage to reference the new useForm.svelte.ts, removes the old useForm.ts, and adjusts related components and test apps accordingly.
Update Errors.svelte, Methods.svelte, and Transform.svelte to use the direct form variable instead of the $form store syntax. This aligns with the updated FormHelper API and improves code clarity.
Update all references from $form to form in Dirty.svelte to align with Svelte's store usage best practices. This change improves code clarity and consistency.
Refactor Reset.svelte to use the snippet block for children and remove the let:errors prop from the Form component. This improves code clarity and aligns with updated Svelte syntax.
Refactor Defaults.svelte to wrap form fields in a snippet block, passing errors and isDirty to children. This improves code clarity and aligns with updated component patterns.
Refactor Form usage to wrap children in a snippet block, enabling access to isDirty, errors, and hasErrors via the snippet context instead of let directives. This aligns with updated Svelte syntax and improves code clarity.
Update the onError callback to assign errors to the local variable instead of form.errors and ensure the correct parameter is passed to user-defined onError handlers. Also, call form.defaults() after successful submission if defaults were not set in onSuccess.
Wrap defaults in $state for reactivity and update setFormData to trigger updates for each property. Refactor reset to handle specific fields more reliably and ensure correct default values are restored.
Refactor all test-app Svelte components to use the $props() helper for prop access instead of Svelte's export let syntax. This aligns with the new recommended pattern for prop handling in Svelte5 and improves consistency across the codebase. Also updates some state and effect usage to match Svelte5 idioms.
Introduce reactive getters for all form data properties in the useForm hook. This allows consumers to access form fields reactively, improving reactivity and consistency in Svelte components.
Update all references from $form to form in Remember.svelte to standardize variable usage and improve code clarity.
Refactor prop declarations to use $props() for destructuring foo, bar, baz, qux, and quux. This improves consistency with Svelte 5 conventions and simplifies prop management.
Refactor to destructure foo and bar from $props() instead of using export let. This aligns with updated Svelte 5 props handling.
Refactor Page2.svelte and InvalidateTags.svelte to use $props destructuring instead of export let for props. This improves consistency and leverages the recommended Svelte 5 pattern.
Refactor all usages of the $form store to direct form variable access in Svelte FormHelper test components. This aligns with updated form handling patterns and improves code clarity.
Replace deprecated <svelte:fragment slot="..."> usage with {#snippet ...()} blocks for fallback and children slots in WhenVisible.svelte. Also update state initialization for clarity.
Refactor OptionalProps.svelte and MatchPropsOnKey.svelte to use the $props() helper for prop destructuring. This improves consistency with Svelte 5 conventions and prepares for future enhancements.
Replace InertiaForm with InertiaFormRunes in Child.svelte and update prop destructuring to use $props(). This aligns the component with the latest type definitions from @inertiajs/svelte5.
Replace InertiaForm with InertiaFormRunes in Generic.svelte to align with updated type definitions from @inertiajs/svelte5. Adjust form prop usage to destructure from $props().
Refactor DeepMergeProps.svelte to use the $props() helper for props destructuring and $state() for reactive state management. This improves code clarity and aligns with recommended Svelte 5 patterns.
Use deep set for updating multiple default fields to handle nested keys correctly. Also, update remember logic to use formData instead of getData() for consistency.
Refactor useForm to use separate reactive variables and dynamic property definitions for better Svelte 5 runes compatibility. Update method signatures for improved type safety and add setStore, resetAndClearErrors, and enhanced submit method. Simplify state management and ensure correct reactivity for form state and errors.
Update test.skip conditions to also skip tests when process.env.PACKAGE is 'svelte5', in addition to 'svelte'. This ensures tests are not run for unsupported or untested Svelte 5 environments.
Refactors the useForm implementation to use a Proxy-based approach for form state and methods, improving Svelte 5 runes compatibility and reducing boilerplate. Removes the InertiaFormProps interface in favor of a single InertiaFormRunes type, updates method signatures for better type safety, and streamlines state management for form data, errors, and status flags.
Replaces useForm.svelte.ts with useForm.ts, refactoring the form logic to use Svelte stores and TypeScript interfaces. Updates imports in Form.svelte and index.ts to use the new implementation. This change improves type safety, reactivity, and maintainability of the form handling logic.
Replace error divs with <p> elements for name errors and move the submit button inside the email field container. Removes the email label and error display for improved markup consistency.
Refactor usePrefetch to use Svelte's $state instead of writable stores, simplifying state management and removing unnecessary imports. Update return values to use getters for compatibility with the new state approach.
Replaces the Svelte 3/4 store-based useRemember implementation with a Svelte 5 composable using $state and $effect. Removes Svelte store and lifecycle dependencies to align with Svelte 5 patterns.
Change imports of usePrefetch and useRemember to reference their .svelte files directly. This ensures correct module resolution and compatibility with Svelte's file conventions.
Replace @sveltejs/adapter-auto with @sveltejs/vite-plugin-svelte and update Svelte and Vite to latest major versions in test-app. This ensures compatibility with Svelte 5 and Vite 6.
Include 'svelte5' in the adapter matrix for es2020-compatibility, playwright, and publish GitHub workflows to enable testing and publishing for the new adapter.
brodienguyen
force-pushed
the
new-package-svelte-5
branch
from
bf827b1 to
6ba2754
Compare
|
I've had to make some changes to make it work (didn't create a fork, experimenting): 1. App.svelte: let component = $state(initialComponent)
let key = $state<number | null>(null)
let page = $state(initialPage)
setPage(initialPage)
let renderProps = $derived(resolveRenderProps(component, page, key))
// Reactively update the global page state when local page state changes
$effect.pre(() => {
setPage(page)
})Added manual setPage to make it work with SSR, and changed $effect to 2. createInertiaApp.ts: type SvelteRenderResult = { body: string; head: string; css?: { code: string } }
...
if (isServer) {
const { body, head, css } = svelteApp as SvelteRenderResultChanged |
Member
|
@brodienguyen Thanks for the hard work on this! I'll close this one in favor of #2677 so that we have one PR to work on. |
pascalbaljet
added a commit
that referenced
this pull request
Jan 20, 2026
* feat(svelte5): add Svelte 5 adapter and test app
Introduce the Svelte 5 adapter for Inertia.js, including core components, utilities, configuration, and a comprehensive test application. Update documentation and test server logic to support Svelte 5 integration.
* refactor(test-app): update imports to @inertiajs/svelte5
Replaces all imports from '@inertiajs/svelte' with '@inertiajs/svelte5' across layouts, pages, and form helpers in the Svelte 5 test app. This aligns the codebase with the new package structure and ensures compatibility with the latest version.
* refactor(test-app): update to svelte5 page store usage
Replace all usages of $page and @inertiajs/svelte imports with page and @inertiajs/svelte5 in test-app Svelte components. This aligns the test app with the new svelte5 API and ensures consistent usage of the page store and form helpers.
* refactor(components): migrate to $props and $state
Refactored Svelte components to use $props and $state for props and state management, replacing legacy export let syntax. Updated page state management to support both runes-based and store-based approaches for backward compatibility. Adjusted test-app usage to align with new $page and mount API.
* refactor(components): switch to children/fallback props
Refactors Deferred, Form, Link, and WhenVisible components to use `children` and `fallback` props instead of Svelte slots. This improves composability and aligns with a more functional component API.
* refactor(deferred-props): update fallback syntax
Replace usage of slot-based fallback fragments with the new {#snippet fallback()} syntax in Deferred components across InstantReload, ManyGroups, Page1, and Page2 Svelte files. This aligns with updated Svelte syntax for defining fallback content.
* refactor(events): use $page.url instead of page.url
Replace all instances of page.url with $page.url in Events.svelte to ensure correct reactive referencing of the page URL. This change improves consistency and leverages Svelte's store syntax for reactivity.
* refactor(FormComponent): use snippet for children
Refactor FormComponent to wrap form elements in a snippet block using the children({ isDirty }) pattern instead of let:isDirty. This improves consistency with the updated API and enhances readability.
* refactor(Deferred): improve reactivity in effect
Access pageState.props within the $effect callback to ensure proper reactivity. Assign props to a local variable and use it for loaded state calculation.
* refactor(App): improve page state reactivity
Replace $state with $derived for renderProps to ensure reactive updates. Move setPage(page) into an $effect to synchronize global page state with local changes. Cleans up redundant assignments in event handler.
* refactor(FormComponent): wrap form content in snippet
Refactor Errors.svelte to wrap form content in a snippet block using children({ errors, hasErrors, setError, clearErrors }). This improves composability and makes the form logic more reusable.
* refactor(components): update event handler syntax
Refactor Form and Link components to use direct event handler props instead of Svelte's on:event syntax. This improves compatibility with Svelte 5 and enables more flexible event handling.
* feat(form): expose isDirty and setError in Form
Expose isDirty and setError from the Form component to consumers. Update SetDefaultsOnSuccess example to use the new children snippet API for accessing isDirty and errors.
* refactor(form): update Form usage to snippet block
Refactor ResetOnError and ResetOnSuccess components to use the {#snippet children({ errors })} block instead of let:errors. This aligns with updated Form API usage and improves code consistency.
* refactor(form): update Form usage to snippet block
Refactor ResetOnErrorFields and ResetOnSuccessFields components to use the {#snippet children({ errors })} block instead of let:errors. This aligns with updated Form API usage and improves code consistency.
* refactor(FormComponent): update slot usage
Replace manual slot props with snippet block for children, improving readability and maintainability of form event state handling.
* refactor(form): update Form usage and error display
Refactor Form component usage to use 'action' instead of 'bind:action' and implement the 'children' snippet for rendering form fields. Change error message container from <p> to <div> for consistency.
* refactor(FormComponent): update Form usage
Refactor EmptyAction.svelte to use the snippet block for children and remove the let:errors directive. Error messages are now rendered inside a div instead of a paragraph.
* feat(FormComponent): add email field to form
Introduce an email input field to the form and update error handling to support both name and email fields. Refactor markup to use snippet block for children and improve error display.
* test(svelte): skip tests for svelte5 adapter
Update test.skip conditions to also skip tests when PACKAGE is 'svelte5', reflecting lack of support for Head and Link features in the Svelte 5 adapter.
* refactor(form): migrate useForm to Svelte runes
Replaces the store-based useForm implementation with a Svelte runes-based version for improved reactivity and integration. Updates all imports and usage to reference the new useForm.svelte.ts, removes the old useForm.ts, and adjusts related components and test apps accordingly.
* refactor(FormHelper): remove $ prefix from form usage
Update Errors.svelte, Methods.svelte, and Transform.svelte to use the direct form variable instead of the $form store syntax. This aligns with the updated FormHelper API and improves code clarity.
* refactor(FormHelper): remove $ prefix from form usage
Update all references from $form to form in Dirty.svelte to align with Svelte's store usage best practices. This change improves code clarity and consistency.
* refactor(FormComponent): update Reset.svelte children
Refactor Reset.svelte to use the snippet block for children and remove the let:errors prop from the Form component. This improves code clarity and aligns with updated Svelte syntax.
* refactor(FormComponent): use snippet for form children
Refactor Defaults.svelte to wrap form fields in a snippet block, passing errors and isDirty to children. This improves code clarity and aligns with updated component patterns.
* refactor(form): use snippet for form children
Refactor Form usage to wrap children in a snippet block, enabling access to isDirty, errors, and hasErrors via the snippet context instead of let directives. This aligns with updated Svelte syntax and improves code clarity.
* fix(useForm): correct error handling in onError callback
Update the onError callback to assign errors to the local variable instead of form.errors and ensure the correct parameter is passed to user-defined onError handlers. Also, call form.defaults() after successful submission if defaults were not set in onSuccess.
* fix(useForm): improve reactivity and reset logic
Wrap defaults in $state for reactivity and update setFormData to trigger updates for each property. Refactor reset to handle specific fields more reliably and ensure correct default values are restored.
* fix(form): add id to error message div
Assign id 'error_name' to the name error message div for improved testability and accessibility.
* refactor(useForm): improve defaults update logic
Refactor the logic for updating form defaults to handle single and multiple field updates more clearly. This change improves code readability and ensures that defaults are always cloned before modification.
* refactor(test-app): make window props reactive to page
Update Svelte test app components to assign window properties reactively when $page.props changes, ensuring global props stay in sync with page state. This replaces static assignments with $effect blocks for better reactivity and correctness.
* refactor(test-app): use $props in Svelte pages
Refactor Svelte test app pages to use $props() for prop extraction instead of export let syntax. This improves consistency and leverages Svelte 5 conventions for props handling.
* refactor(test-app): use $props in Svelte5 components
Refactor all test-app Svelte components to use the $props() helper for prop access instead of Svelte's export let syntax. This aligns with the new recommended pattern for prop handling in Svelte5 and improves consistency across the codebase. Also updates some state and effect usage to match Svelte5 idioms.
* feat(useForm): add reactive getters for form data
Introduce reactive getters for all form data properties in the useForm hook. This allows consumers to access form fields reactively, improving reactivity and consistency in Svelte components.
* refactor(remember): remove $ prefix from form references
Update all references from $form to form in Remember.svelte to standardize variable usage and improve code clarity.
* refactor(ManyGroups): use $props for prop destructuring
Refactor prop declarations to use $props() for destructuring foo, bar, baz, qux, and quux. This improves consistency with Svelte 5 conventions and simplifies prop management.
* refactor(InstantReload): use $props for foo and bar
Refactor to destructure foo and bar from $props() instead of using export let. This aligns with updated Svelte 5 props handling.
* refactor(test-app): use $props destructuring in pages
Refactor Page2.svelte and InvalidateTags.svelte to use $props destructuring instead of export let for props. This improves consistency and leverages the recommended Svelte 5 pattern.
* refactor(form-helper): remove $ prefix from form usage
Refactor all usages of the $form store to direct form variable access in Svelte FormHelper test components. This aligns with updated form handling patterns and improves code clarity.
* refactor(WhenVisible): use #snippet blocks for slots
Replace deprecated <svelte:fragment slot="..."> usage with {#snippet ...()} blocks for fallback and children slots in WhenVisible.svelte. Also update state initialization for clarity.
* refactor(test-app): use $props in Svelte components
Refactor OptionalProps.svelte and MatchPropsOnKey.svelte to use the $props() helper for prop destructuring. This improves consistency with Svelte 5 conventions and prepares for future enhancements.
* refactor(FormHelper): update form type to InertiaFormRunes
Replace InertiaForm with InertiaFormRunes in Child.svelte and update prop destructuring to use $props(). This aligns the component with the latest type definitions from @inertiajs/svelte5.
* refactor(FormHelper): update to use InertiaFormRunes type
Replace InertiaForm with InertiaFormRunes in Generic.svelte to align with updated type definitions from @inertiajs/svelte5. Adjust form prop usage to destructure from $props().
* refactor(DeepMergeProps): use $props and $state helpers
Refactor DeepMergeProps.svelte to use the $props() helper for props destructuring and $state() for reactive state management. This improves code clarity and aligns with recommended Svelte 5 patterns.
* fix(useForm): update defaults and remember logic
Use deep set for updating multiple default fields to handle nested keys correctly. Also, update remember logic to use formData instead of getData() for consistency.
* refactor(useForm): improve Svelte 5 runes compatibility
Refactor useForm to use separate reactive variables and dynamic property definitions for better Svelte 5 runes compatibility. Update method signatures for improved type safety and add setStore, resetAndClearErrors, and enhanced submit method. Simplify state management and ensure correct reactivity for form state and errors.
* test: skip tests for svelte5 package
Update test.skip conditions to also skip tests when process.env.PACKAGE is 'svelte5', in addition to 'svelte'. This ensures tests are not run for unsupported or untested Svelte 5 environments.
* refactor(useForm): simplify and modernize form logic
Refactors the useForm implementation to use a Proxy-based approach for form state and methods, improving Svelte 5 runes compatibility and reducing boilerplate. Removes the InertiaFormProps interface in favor of a single InertiaFormRunes type, updates method signatures for better type safety, and streamlines state management for form data, errors, and status flags.
* refactor(form): migrate useForm to TypeScript store
Replaces useForm.svelte.ts with useForm.ts, refactoring the form logic to use Svelte stores and TypeScript interfaces. Updates imports in Form.svelte and index.ts to use the new implementation. This change improves type safety, reactivity, and maintainability of the form handling logic.
* refactor(FormComponent): update error markup and layout
Replace error divs with <p> elements for name errors and move the submit button inside the email field container. Removes the email label and error display for improved markup consistency.
* refactor(svelte5): migrate usePrefetch to $state
Refactor usePrefetch to use Svelte's $state instead of writable stores, simplifying state management and removing unnecessary imports. Update return values to use getters for compatibility with the new state approach.
* refactor(svelte5): rewrite useRemember for Svelte 5
Replaces the Svelte 3/4 store-based useRemember implementation with a Svelte 5 composable using $state and $effect. Removes Svelte store and lifecycle dependencies to align with Svelte 5 patterns.
* fix(index): update imports for usePrefetch and useRemember
Change imports of usePrefetch and useRemember to reference their .svelte files directly. This ensures correct module resolution and compatibility with Svelte's file conventions.
* build(test-app): update Svelte and Vite dependencies
Replace @sveltejs/adapter-auto with @sveltejs/vite-plugin-svelte and update Svelte and Vite to latest major versions in test-app. This ensures compatibility with Svelte 5 and Vite 6.
* lint: run pnpm run format
* ci(workflows): add svelte5 to adapter matrix
Include 'svelte5' in the adapter matrix for es2020-compatibility, playwright, and publish GitHub workflows to enable testing and publishing for the new adapter.
* chore: update lock file
* chore: update dependencies
* chore: update test-app packages and copied files from original svelte pkg
* refactor: migrate Render.svelte to Component and use RenderProps type instead of redefining
* feat: purge page store completely and use state only
* refactor: use Component instead of ComponentType
* feat: migrated useForm to runes mode
* chore: keep types in svelte5/index.ts of original package
* chore: types inside svelte/5links.ts and more syncing with current svelte pkg
* fix: pass down a snapshot of current state to ensure core router can handle it
* refactor: tidy up createInertiaApp
* fix: dedupe axios version in lock file
* fix: skip more test
* fix: App.svelte effect
* refactor: tidy up Form.svelte
* feat: add InfiniteScroll but in runes style
* refactor: tidy up Link, WhenVisible
* chore: run sv migrate on test-app
* refactor: tidy up WhenVisible component
* refactor: types in Deferred component & fix side-effects
* refactor: dont take a snapshot of newPage inside page state
* refactor: tidyup PreseveEqualProps
* chore: add missing Router component
* chore: add comment to resolveRenderProps
* chore: add type-check:test-app:svelte5 script to package.json
* fix: dont return mount
* chore: disable eslint on children in Grid test component
* fix: type errors
* format code-style
* refactor: use attachment instead of manually handling
* fix: set target version to ES2020 in build
* fix(ci): prevent pnpm wildcard from matching both svelte and svelte5 packages
* fix(ci): handle vue3 build in playwright workflow
* fix: await setup in createInertiaApp
* fix: improve nestedA comparison logic for preserveEqualProps
* feat: add missing 'dev:test-app:svelte5' script
* feat: add lint script for svelte5 test app
* refactor: use types instead of any in PreserveEqualProps
* chore: replaced svelte-adapter with the new svelte5-adapter
* chore(ci): removed svelte5 adapter from ci
* fix merge issues
* refactor: use svelte 5 syntax
* adapt more to svelte 5 syntax
* chore: refresh lockfile with master and added svelte5 packages
* export data functions from Form Component again
* wrap keys into derived
* lock svelte version in svelte-test-app
* use form state instead of store
* converted ScrollAfterRender
* format
* added callbacks to Link component
* chore: removed svelte compilerOptions in svelte/test-app
https://svelte.dev/docs/svelte/compiler-warnings#options_removed_hydratable
* refactor: renamed doHydrate and switched to if/else instead of ternary
* chore: migrate to svelte5
* chore: unpin svelte version in test-app again
* chore: supress state_referenced_locally warnings
* chore: sync with master and migrate to svelte 5 again
* chore: lockfile
* chore: bump svelte version
* migrate to svelte 5
* migrate svelte/test-app to svelte5
* chore: lockfile
* pin es-check version to 9.4.7 in svelte package
* TS and console error on conflicting `useForm()` keys (#2823)
* TS error and console warning on conflicting form keys
* Fix code style
* wip
* Update TransformKeys.svelte
* Update playwright-chromium.yml
* wip
* Update vite-with-deps.config.js
---------
Co-authored-by: Brodie <32996052+brodienguyen@users.noreply.github.com>
Co-authored-by: Pascal Baljet <pascal@pascalbaljet.nl>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚧 Work In Progress: new adapter for first-class Svelte 5 Support
This PR introduces official Svelte 5 support for Inertia.js by creating a new dedicated
@inertiajs/svelte5package. The implementation leverages Svelte 5's new runes syntax for improved reactivity and performance.🔄 Key Changes
export letprops to$props()rune$state()and$derived()runes{@render children?.({...})}syntax$svelte 4 syntax such as$page->page,$form->form🤝 Feedback & contribution are welcome
🆘 HELP WANTED: Svelte 5 Wizards Needed!
I'm still learning the ropes of Svelte's new runes system. My time is limited, so I need your help to make this happen faster!
Looking forward to enjoy a better DX for all developers starting new projects with Svelte 5 with this new adapter.
📊 Current Status
Test Results:
✅ 303 tests passed
⚠️ 38 tests skipped
❌ 132 tests failed
Related Issue