WIP - Add Svelte 5 adapter #2586
Draft
Conversation
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
|
@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.
Assign id 'error_name' to the name error message div for improved testability and accessibility.
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.
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 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 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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