Skip to content

Commit 1f50b99

Browse files
eltigerchinoeltigerchino
authored
fix: use configured base path when calling remote functions from the client (#14106)
* add tests * fix test * add base path to client remote functions * changeset * format * move tests to options-2 test app * prettier
1 parent e7cd0c2 commit 1f50b99

File tree

9 files changed

+120
-8
lines changed

9 files changed

+120
-8
lines changed

‎.changeset/dry-owls-open.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/kit': patch
3+
---
4+
5+
fix: use the configured base path when calling remote functions from the client

‎packages/kit/src/runtime/client/remote-functions/command.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @import { RemoteCommand, RemoteQueryOverride } from '@sveltejs/kit' */
22
/** @import { RemoteFunctionResponse } from 'types' */
33
/** @import { Query } from './query.svelte.js' */
4-
import { app_dir } from '__sveltekit/paths';
4+
import { app_dir, base } from '__sveltekit/paths';
55
import * as devalue from 'devalue';
66
import { HttpError } from '@sveltejs/kit/internal';
77
import { app } from '../client.js';
@@ -25,7 +25,7 @@ export function command(id) {
2525
// Wait a tick to give room for the `updates` method to be called
2626
await Promise.resolve();
2727

28-
const response = await fetch(`/${app_dir}/remote/${id}`, {
28+
const response = await fetch(`${base}/${app_dir}/remote/${id}`, {
2929
method: 'POST',
3030
body: JSON.stringify({
3131
payload: stringify_remote_arg(arg, app.hooks.transport),

‎packages/kit/src/runtime/client/remote-functions/form.svelte.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @import { RemoteForm, RemoteQueryOverride } from '@sveltejs/kit' */
22
/** @import { RemoteFunctionResponse } from 'types' */
33
/** @import { Query } from './query.svelte.js' */
4-
import { app_dir } from '__sveltekit/paths';
4+
import { app_dir, base } from '__sveltekit/paths';
55
import * as devalue from 'devalue';
66
import { DEV } from 'esm-env';
77
import { HttpError } from '@sveltejs/kit/internal';
@@ -61,7 +61,7 @@ export function form(id) {
6161
data.set('sveltekit:remote_refreshes', JSON.stringify(updates.map((u) => u._key)));
6262
}
6363

64-
const response = await fetch(`/${app_dir}/remote/${action_id}`, {
64+
const response = await fetch(`${base}/${app_dir}/remote/${action_id}`, {
6565
method: 'POST',
6666
body: data
6767
});

‎packages/kit/src/runtime/client/remote-functions/prerender.svelte.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @import { RemoteFunctionResponse } from 'types' */
2-
import { app_dir } from '__sveltekit/paths';
2+
import { app_dir, base } from '__sveltekit/paths';
33
import { version } from '__sveltekit/environment';
44
import * as devalue from 'devalue';
55
import { DEV } from 'esm-env';
@@ -124,7 +124,7 @@ export function prerender(id) {
124124
}
125125
}
126126

127-
const url = `/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
127+
const url = `${base}/${app_dir}/remote/${id}${payload ? `/${payload}` : ''}`;
128128

129129
// Check the Cache API first
130130
if (prerender_cache) {

‎packages/kit/src/runtime/client/remote-functions/query.svelte.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @import { RemoteQueryFunction } from '@sveltejs/kit' */
2-
import { app_dir } from '__sveltekit/paths';
2+
import { app_dir, base } from '__sveltekit/paths';
33
import { remote_responses, started } from '../client.js';
44
import { tick } from 'svelte';
55
import { create_remote_function, remote_request } from './shared.svelte.js';
@@ -18,7 +18,7 @@ export function query(id) {
1818
}
1919
}
2020

21-
const url = `/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
21+
const url = `${base}/${app_dir}/remote/${id}${payload ? `?payload=${payload}` : ''}`;
2222

2323
return await remote_request(url);
2424
});

‎packages/kit/test/apps/options-2/src/routes/remote/+page.svelte

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
import { prerendered, get_count, set_count, set_count_form } from './count.remote.js';
3+
4+
let count = $state(null);
5+
let prerendered_result = $state(null);
6+
</script>
7+
8+
<p id="count">{count}</p>
9+
10+
<button onclick={async () => (count = await get_count())}>get count</button>
11+
12+
<button onclick={async () => (count = await set_count(0))} id="reset-btn">reset</button>
13+
14+
<form
15+
{...set_count_form.enhance(async ({ submit }) => {
16+
await submit().updates(get_count());
17+
count = await get_count();
18+
})}
19+
>
20+
<input type="number" name="count" />
21+
<button>submit</button>
22+
</form>
23+
24+
<button id="fetch-prerendered" onclick={async () => (prerendered_result = await prerendered())}>
25+
get prerendered
26+
</button>
27+
28+
<p id="prerendered">{prerendered_result}</p>

‎packages/kit/test/apps/options-2/src/routes/remote/count.remote.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { building, dev } from '$app/environment';
2+
import { command, form, prerender, query } from '$app/server';
3+
4+
let count = 0;
5+
6+
export const get_count = query(() => count);
7+
8+
export const set_count = command(
9+
'unchecked',
10+
/** @param {number} c */
11+
async (c) => {
12+
return (count = c);
13+
}
14+
);
15+
16+
export const prerendered = prerender(() => {
17+
if (!building && !dev) {
18+
throw new Error('this prerender should not be called at runtime in production');
19+
}
20+
21+
return 'yes';
22+
});
23+
24+
export const set_count_form = form(async (form_data) => {
25+
const c = /** @type {string} */ (form_data.get('count'));
26+
return (count = parseInt(c));
27+
});

‎packages/kit/test/apps/options-2/svelte.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ const config = {
1313
},
1414
output: {
1515
bundleStrategy: 'single'
16+
},
17+
experimental: {
18+
remoteFunctions: true
1619
}
1720
}
1821
};

‎packages/kit/test/apps/options-2/test/test.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,55 @@ test.describe('paths', () => {
5555
await clicknav('[data-testid="link"]');
5656
expect(new URL(page.url()).pathname).toBe('/basepath/hello');
5757
});
58+
59+
test('query remote function from client accounts for base path', async ({
60+
page,
61+
javaScriptEnabled
62+
}) => {
63+
test.skip(!javaScriptEnabled);
64+
65+
await page.goto('/basepath/remote');
66+
await expect(page.locator('#count')).toHaveText('');
67+
await page.locator('button', { hasText: 'get count' }).click();
68+
await expect(page.locator('#count')).toHaveText('0');
69+
});
70+
71+
test('prerender remote function from client accounts for base path', async ({
72+
page,
73+
javaScriptEnabled
74+
}) => {
75+
test.skip(!javaScriptEnabled);
76+
77+
await page.goto('/basepath/remote');
78+
await expect(page.locator('#prerendered')).toHaveText('');
79+
await page.locator('button', { hasText: 'get prerendered' }).click();
80+
await expect(page.locator('#prerendered')).toHaveText('yes');
81+
});
82+
83+
test('command remote function from client accounts for base path', async ({
84+
page,
85+
javaScriptEnabled
86+
}) => {
87+
test.skip(!javaScriptEnabled);
88+
89+
await page.goto('/basepath/remote');
90+
await expect(page.locator('#count')).toHaveText('');
91+
await page.locator('button', { hasText: 'reset' }).click();
92+
await expect(page.locator('#count')).toHaveText('0');
93+
});
94+
95+
test('form remote function from client accounts for base path', async ({
96+
page,
97+
javaScriptEnabled
98+
}) => {
99+
test.skip(!javaScriptEnabled);
100+
101+
await page.goto('/basepath/remote');
102+
await expect(page.locator('#count')).toHaveText('');
103+
await page.locator('input').fill('1');
104+
await page.locator('button', { hasText: 'submit' }).click();
105+
await expect(page.locator('#count')).toHaveText('1');
106+
});
58107
});
59108

60109
test.describe('trailing slash', () => {

0 commit comments

Comments
 (0)