@inertiajs/svelte 2.3.17 → 2.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
useInfiniteScroll
|
|
4
4
|
} from "@inertiajs/core";
|
|
5
5
|
import { onDestroy, onMount } from "svelte";
|
|
6
|
+
import { usePage } from "../page";
|
|
7
|
+
const page = usePage();
|
|
6
8
|
export let data;
|
|
7
9
|
export let buffer = 0;
|
|
8
10
|
export let as = "div";
|
|
@@ -22,8 +24,9 @@ let endElementRef;
|
|
|
22
24
|
let loadingPrevious = false;
|
|
23
25
|
let loadingNext = false;
|
|
24
26
|
let requestCount = 0;
|
|
25
|
-
|
|
26
|
-
let
|
|
27
|
+
const scrollProp = $page.scrollProps?.[data];
|
|
28
|
+
let hasPreviousPage = !!scrollProp?.previousPage;
|
|
29
|
+
let hasNextPage = !!scrollProp?.nextPage;
|
|
27
30
|
$: resolvedItemsElement = resolveHTMLElement(itemsElement, itemsElementRef);
|
|
28
31
|
$: scrollableParent = resolvedItemsElement ? getScrollableParent(resolvedItemsElement) : null;
|
|
29
32
|
$: sharedExposed = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type CreateInertiaAppOptionsForCSR, type InertiaAppResponse, type PageProps } from '@inertiajs/core';
|
|
1
|
+
import { type CreateInertiaAppOptionsForCSR, type InertiaAppResponse, type PageProps, type SharedPageProps } from '@inertiajs/core';
|
|
2
2
|
import App, { type InertiaAppProps } from './components/App.svelte';
|
|
3
3
|
import type { ComponentResolver, SvelteInertiaAppConfig } from './types';
|
|
4
4
|
type SvelteRenderResult = {
|
|
@@ -14,5 +14,5 @@ type SetupOptions<SharedProps extends PageProps> = {
|
|
|
14
14
|
props: InertiaAppProps<SharedProps>;
|
|
15
15
|
};
|
|
16
16
|
type InertiaAppOptions<SharedProps extends PageProps> = CreateInertiaAppOptionsForCSR<SharedProps, ComponentResolver, SetupOptions<SharedProps>, SvelteRenderResult | void, SvelteInertiaAppConfig>;
|
|
17
|
-
export default function createInertiaApp<SharedProps extends PageProps = PageProps>({ id, resolve, setup, progress, page, defaults, }: InertiaAppOptions<SharedProps>): InertiaAppResponse;
|
|
17
|
+
export default function createInertiaApp<SharedProps extends PageProps = PageProps & SharedPageProps>({ id, resolve, setup, progress, page, defaults, }: InertiaAppOptions<SharedProps>): InertiaAppResponse;
|
|
18
18
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inertiajs/svelte",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.21",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "The Svelte adapter for Inertia.js",
|
|
6
6
|
"contributors": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@sveltejs/adapter-auto": "^3.3.1",
|
|
40
|
-
"@sveltejs/kit": "^2.53.
|
|
40
|
+
"@sveltejs/kit": "^2.53.3",
|
|
41
41
|
"@sveltejs/package": "^2.5.7",
|
|
42
42
|
"@sveltejs/vite-plugin-svelte": "^3.1.2",
|
|
43
43
|
"axios": "^1.13.5",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@types/lodash-es": "^4.17.12",
|
|
57
57
|
"laravel-precognition": "^1.0.2",
|
|
58
|
-
"lodash-es": "^4.
|
|
59
|
-
"@inertiajs/core": "2.3.
|
|
58
|
+
"lodash-es": "^4.18.1",
|
|
59
|
+
"@inertiajs/core": "2.3.21"
|
|
60
60
|
},
|
|
61
61
|
"scripts": {
|
|
62
62
|
"build": "pnpm package && svelte-check --tsconfig ./tsconfig.json && publint",
|
|
@@ -303,34 +303,54 @@ export let users
|
|
|
303
303
|
|
|
304
304
|
### Polling
|
|
305
305
|
|
|
306
|
-
|
|
306
|
+
Use the `usePoll` hook to automatically refresh data at intervals. It handles cleanup on unmount and throttles polling when the tab is inactive.
|
|
307
307
|
|
|
308
|
-
@boostsnippet("Polling
|
|
308
|
+
@boostsnippet("Basic Polling", "svelte")
|
|
309
309
|
<script>
|
|
310
|
-
import {
|
|
311
|
-
import { onMount, onDestroy } from 'svelte'
|
|
310
|
+
import { usePoll } from '@inertiajs/svelte'
|
|
312
311
|
|
|
313
312
|
export let stats
|
|
314
313
|
|
|
315
|
-
|
|
314
|
+
usePoll(5000)
|
|
315
|
+
</script>
|
|
316
316
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
317
|
+
<div>
|
|
318
|
+
<h1>Dashboard</h1>
|
|
319
|
+
<div>Active Users: {stats.activeUsers}</div>
|
|
320
|
+
</div>
|
|
321
|
+
@endboostsnippet
|
|
322
|
+
|
|
323
|
+
@boostsnippet("Polling With Request Options and Manual Control", "svelte")
|
|
324
|
+
<script>
|
|
325
|
+
import { usePoll } from '@inertiajs/svelte'
|
|
326
|
+
|
|
327
|
+
export let stats
|
|
322
328
|
|
|
323
|
-
|
|
324
|
-
|
|
329
|
+
const { start, stop } = usePoll(5000, {
|
|
330
|
+
only: ['stats'],
|
|
331
|
+
onStart() {
|
|
332
|
+
console.log('Polling request started')
|
|
333
|
+
},
|
|
334
|
+
onFinish() {
|
|
335
|
+
console.log('Polling request finished')
|
|
336
|
+
},
|
|
337
|
+
}, {
|
|
338
|
+
autoStart: false,
|
|
339
|
+
keepAlive: true,
|
|
325
340
|
})
|
|
326
341
|
</script>
|
|
327
342
|
|
|
328
343
|
<div>
|
|
329
344
|
<h1>Dashboard</h1>
|
|
330
345
|
<div>Active Users: {stats.activeUsers}</div>
|
|
346
|
+
<button on:click={start}>Start Polling</button>
|
|
347
|
+
<button on:click={stop}>Stop Polling</button>
|
|
331
348
|
</div>
|
|
332
349
|
@endboostsnippet
|
|
333
350
|
|
|
351
|
+
- `autoStart` (default `true`) — set to `false` to start polling manually via the returned `start()` function
|
|
352
|
+
- `keepAlive` (default `false`) — set to `true` to prevent throttling when the browser tab is inactive
|
|
353
|
+
|
|
334
354
|
### WhenVisible
|
|
335
355
|
|
|
336
356
|
Lazy-load a prop when an element scrolls into view. Useful for deferring expensive data that sits below the fold:
|
|
@@ -345,7 +365,6 @@ export let stats
|
|
|
345
365
|
<div>
|
|
346
366
|
<h1>Dashboard</h1>
|
|
347
367
|
|
|
348
|
-
<!-- stats prop is loaded only when this section scrolls into view -->
|
|
349
368
|
<WhenVisible data="stats" buffer={200}>
|
|
350
369
|
<div>
|
|
351
370
|
<p>Total Users: {stats.total_users}</p>
|
|
@@ -359,6 +378,26 @@ export let stats
|
|
|
359
378
|
</div>
|
|
360
379
|
@endboostsnippet
|
|
361
380
|
|
|
381
|
+
### InfiniteScroll
|
|
382
|
+
|
|
383
|
+
Automatically load additional pages of paginated data as users scroll:
|
|
384
|
+
|
|
385
|
+
@boostsnippet("InfiniteScroll Example", "svelte")
|
|
386
|
+
<script>
|
|
387
|
+
import { InfiniteScroll } from '@inertiajs/svelte'
|
|
388
|
+
|
|
389
|
+
export let users
|
|
390
|
+
</script>
|
|
391
|
+
|
|
392
|
+
<InfiniteScroll data="users">
|
|
393
|
+
{#each users.data as user (user.id)}
|
|
394
|
+
<div>{user.name}</div>
|
|
395
|
+
{/each}
|
|
396
|
+
</InfiniteScroll>
|
|
397
|
+
@endboostsnippet
|
|
398
|
+
|
|
399
|
+
The server must use `Inertia::scroll()` to configure the paginated data. Use the `search-docs` tool with a query of `infinite scroll` for detailed guidance on buffers, manual loading, reverse mode, and custom trigger elements.
|
|
400
|
+
|
|
362
401
|
## Server-Side Patterns
|
|
363
402
|
|
|
364
403
|
Server-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.
|