opral / inlang-paraglide-js

Tree-shakable i18n library build on the inlang ecosystem.
https://inlang.com/m/gerre34r/library-inlang-paraglideJs
23 stars 0 forks source link

Sveltekit Adapter breaks form action post url after goto #79

Open lknlknim opened 2 months ago

lknlknim commented 2 months ago

My other site got use case like this Form post create item, then goto item page but they are using the same route route : /item/[itemId] path : /item/create goto /item/123 However, with the use of paraglide-js with sveltekit adapter, the layout component is preventing this to work properly The form action will remain on /item/create after goto /item/123, the result is I can't update the newly created product, intead it's creating new product again, which is causing duplicated new product.

Here is the reproduction repository https://github.com/lknlknim/sveltekit-paraglide-form-actions-bug

To reproduct the issue with isolation There are 2 links at the home page "Create without paraglide" and "Create with paraglide"

<!-- +page.svelte -->
<script lang="ts">
    import type { SubmitFunction } from '@sveltejs/kit';
    import { enhance } from '$app/forms';
    import { goto } from '$app/navigation';
    import { page } from '$app/stores';

    export let action = '?/update';

    const go = () => goto(new URL($page.url).pathname.replace('create', '123'));

    const submit: SubmitFunction = () => {
        return ({ result }) => {
            if (result.type === 'success') {
                go();
            }
        };
    };
</script>

<form method="post" {action} use:enhance={submit}>
    <button>{$page.params.productId === 'create' ? 'Create' : 'Update'}</button>
</form>

<button on:click={go}>goto</button>
<!-- +page.server.ts -->
export const actions = {
    update: ({ params: { productId } }) => {
        console.log(productId);
    }
};

Unaffected routine

  1. Click "Create without paraglide" in home page
  2. Click "Create"
  3. Click "Update"

Expected result : "create" then "123" in the server log Actual result : "create" then "123"

Affected routine

  1. Click "Create with paraglide" in home page
  2. Click "Create"
  3. Click "Update"

Expected result : "create" then "123" in the server log Actual result : "create" then "create"

Minimal reproduction

  1. Click "Create with paraglide" in home page
  2. Click "goto"
  3. Click "Update"

Expected result : "create" then "123" in the server log Actual result : "create" then "create"

  1. Click F5
  2. Click Update Expected result : "123" in server console Actual result : "123"

I didn't deep dive into how it's happened. And there is quick workaround by using absolute path in action. Instead of using "?/update" we can use "{$page.url.pathname}?/update"