Skip to content

Commit 7c18dec

Browse files
jamesst20jamesst20
committedMay 28, 2024·
[inertiajs#1866] Merge pull request #8 (with improvements)
Merge punyflash/inertia with some tweaks and fixes
1 parent 8cf0dae commit 7c18dec

File tree

12 files changed

+125
-153
lines changed

12 files changed

+125
-153
lines changed
 

‎packages/svelte/package.json

+30-35
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"description": "The Svelte adapter for Inertia.js",
66
"contributors": [
77
"Jonathan Reinink <jonathan@reinink.ca>",
8-
"Pedro Borges <oi@pedroborg.es>",
9-
"Dmytro Morozov <puny.flash@gmail.com>"
8+
"Pedro Borges <oi@pedroborg.es>"
109
],
1110
"homepage": "https://inertiajs.com/",
1211
"repository": {
@@ -21,31 +20,12 @@
2120
"svelte"
2221
],
2322
"scripts": {
24-
"build": "svelte-kit sync && svelte-package && publint",
25-
"prepublishOnly": "npm run build",
23+
"build": "npm run package",
24+
"package": "svelte-kit sync && svelte-package && publint",
25+
"prepublishOnly": "npm run package",
2626
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
2727
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
2828
},
29-
"files": [
30-
"dist",
31-
"!dist/**/*.test.*",
32-
"!dist/**/*.spec.*"
33-
],
34-
"peerDependencies": {
35-
"svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || 5.0.0-next.1"
36-
},
37-
"devDependencies": {
38-
"@sveltejs/adapter-auto": "^3.2.0",
39-
"@sveltejs/kit": "^2.5.5",
40-
"@sveltejs/package": "^2.3.0",
41-
"@sveltejs/vite-plugin-svelte": "^3.0.2",
42-
"publint": "^0.2.7",
43-
"svelte": "^4.2.12",
44-
"svelte-check": "^3.6.8",
45-
"tslib": "^2.6.2",
46-
"typescript": "^5.4.3",
47-
"vite": "^5.2.7"
48-
},
4929
"exports": {
5030
".": {
5131
"types": "./dist/index.d.ts",
@@ -56,18 +36,33 @@
5636
"svelte": "./dist/server.js"
5737
}
5838
},
59-
"import": "./dist/index.js",
60-
"types": "./dist/index.d.ts",
61-
"type": "module",
62-
"typesVersions": {
63-
">4.0": {
64-
".": [
65-
"./dist/index.d.ts"
66-
]
67-
}
39+
"files": [
40+
"dist",
41+
"!dist/**/*.test.*",
42+
"!dist/**/*.spec.*"
43+
],
44+
"peerDependencies": {
45+
"svelte": "^3.20.0 || ^4.0.0 || ^5.0.0-next.1"
6846
},
6947
"dependencies": {
7048
"@inertiajs/core": "workspace:*",
71-
"lodash": "^4.5.0"
72-
}
49+
"lodash.clonedeep": "^4.5.0",
50+
"lodash.isequal": "^4.5.0"
51+
},
52+
"devDependencies": {
53+
"axios": "^1.6.8",
54+
"@sveltejs/adapter-auto": "^3.2.0",
55+
"@sveltejs/kit": "^2.5.7",
56+
"@sveltejs/package": "^2.3.1",
57+
"@sveltejs/vite-plugin-svelte": "^3.1.0",
58+
"publint": "^0.1.16",
59+
"svelte": "^4.2.16",
60+
"svelte-check": "^3.7.1",
61+
"tslib": "^2.6.2",
62+
"typescript": "^5.4.5",
63+
"vite": "^5.2.11"
64+
},
65+
"svelte": "./dist/index.js",
66+
"types": "./dist/index.d.ts",
67+
"type": "module"
7368
}

‎packages/svelte/src/lib/components/App.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,15 @@
22
import Render, { h } from './Render.svelte'
33
import store from '../store'
44
5-
$$props
6-
7-
$: child = $store.component && h($store.component.default, $store.page?.props)
5+
$: child = $store.component?.default && h($store.component.default, $store.page?.props)
86
$: layout = $store.component && $store.component.layout
97
$: components = layout
108
? Array.isArray(layout)
119
? layout
1210
.concat(child)
1311
.reverse()
1412
.reduce((child, layout) => h(layout, $store.page?.props, [child]))
15-
: h(layout, $store.page?.props, [child])
13+
: h(layout, $store.page?.props, child ? [child] : [])
1614
: child
1715
</script>
1816

‎packages/svelte/src/lib/components/Render.svelte

+10-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<script context="module" lang="ts">
22
import type { PageProps } from '@inertiajs/core'
3-
import type { InertiaComponentType } from '../types'
3+
import type { ComponentType } from 'svelte'
44
55
type RenderProps = {
6-
component: InertiaComponentType
6+
component: ComponentType
77
props?: PageProps
88
children?: RenderProps[]
99
} | null
1010
11-
export const h = (component: InertiaComponentType, props?: PageProps, children?: RenderProps[]): RenderProps => {
11+
export const h = (component: ComponentType, props?: PageProps, children?: RenderProps[]): RenderProps => {
1212
return {
1313
component,
1414
...(props ? { props } : {}),
@@ -20,21 +20,18 @@
2020
<script lang="ts">
2121
import store from '../store'
2222
23-
export let component: InertiaComponentType
23+
export let component: ComponentType
2424
export let props: PageProps = {}
2525
export let children: RenderProps[] = []
2626
27-
let prev = component
28-
let key = new Date().getTime()
29-
30-
function updateKey(component: InertiaComponentType) {
31-
if (prev !== component) {
32-
prev = component
33-
key = new Date().getTime()
27+
let prevComponent: ComponentType
28+
let key: number
29+
$: {
30+
if (prevComponent !== component) {
31+
key = Date.now()
32+
prevComponent = component
3433
}
3534
}
36-
37-
$: updateKey(component)
3835
</script>
3936

4037
{#if $store.component}

‎packages/svelte/src/lib/createInertiaApp.ts

+17-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
22
import type { ComponentType } from 'svelte'
3-
import SvelteApp from './components/App.svelte'
4-
import SSR, { type SSRProps } from './components/SSR.svelte'
3+
import App from './components/App.svelte'
4+
import type { SSRProps } from './components/SSR.svelte'
5+
import SSR from './components/SSR.svelte'
56
import store from './store'
6-
import type { ComponentResolver, InertiaComponentType } from './types'
7+
import type { ComponentsResolver, ResolvedComponents } from './types'
78

89
type SvelteRenderResult = { html: string; head: string; css?: { code: string } }
910
type SSRComponent = ComponentType<SSR> & { render?: (props: SSRProps) => SvelteRenderResult }
1011

1112
interface CreateInertiaAppProps {
1213
id?: string
13-
resolve: ComponentResolver
14+
resolve: ComponentsResolver
1415
setup: (props: {
1516
el: Element
16-
// @ts-ignore
17-
App: ComponentType<SvelteApp>
17+
App: ComponentType<App>
1818
props: {
1919
initialPage: Page
20-
resolveComponent: ComponentResolver
20+
resolveComponent: ComponentsResolver
2121
}
22-
}) => void | SvelteApp
22+
}) => void | App
2323
progress?:
2424
| false
2525
| {
@@ -38,16 +38,16 @@ export default async function createInertiaApp({
3838
setup,
3939
progress = {},
4040
page,
41-
ssr
41+
ssr,
4242
}: CreateInertiaAppProps): InertiaAppResponse {
4343
const isServer = typeof window === 'undefined'
4444
const el = isServer ? null : document.getElementById(id)
45-
const initialPage = page || JSON.parse(el?.dataset.page ?? '{}')
45+
const initialPage: Page = page || JSON.parse(el?.dataset?.page || '{}')
4646
const resolveComponent = (name: string, page: Page) => Promise.resolve(resolve(name, page))
4747

4848
await resolveComponent(initialPage.component, initialPage).then((initialComponent) => {
4949
store.set({
50-
component: initialComponent as unknown as InertiaComponentType,
50+
component: initialComponent,
5151
page: initialPage,
5252
})
5353
})
@@ -62,7 +62,7 @@ export default async function createInertiaApp({
6262
resolveComponent,
6363
swapComponent: async ({ component, page, preserveState }) => {
6464
store.update((current) => ({
65-
component: component as InertiaComponentType,
65+
component: component as ResolvedComponents,
6666
page,
6767
key: preserveState ? current.key : Date.now(),
6868
}))
@@ -75,27 +75,25 @@ export default async function createInertiaApp({
7575

7676
setup({
7777
el,
78-
App: SvelteApp,
78+
App,
7979
props: {
8080
initialPage,
8181
resolveComponent,
8282
},
8383
})
84-
85-
return
8684
}
8785

8886
if (isServer) {
8987
if (!ssr) {
9088
throw new Error(`createInertiaApp must provide ssr(...) for server-side rendering.`)
9189
}
92-
93-
const { html, head, css } = ssr(SSR, { id, initialPage })
94-
90+
91+
const { html, head, css } = ssr(SSR as SSRComponent, { id, initialPage })
92+
9593
return {
9694
body: html,
9795
head: [
98-
head,
96+
head,
9997
// Note: Svelte 5 no longer output CSS
10098
...(css?.code ? [`<style data-vite-css>${css?.code}</style>`] : []),
10199
],

‎packages/svelte/src/lib/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ export { default as createInertiaApp } from './createInertiaApp'
44
export { default as inertia } from './link'
55
export { default as page } from './page'
66
export { default as remember } from './remember'
7-
export { default as useForm } from './useForm'
7+
export { default as useForm, type InertiaForm } from './useForm'

‎packages/svelte/src/lib/store.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Page } from '@inertiajs/core'
22
import { writable } from 'svelte/store'
3-
import type { InertiaComponentType } from './types'
3+
import type { ResolvedComponents } from './types'
44

55
interface Store {
6-
component: InertiaComponentType | null
6+
component: ResolvedComponents | null
77
page: Page | null
88
key?: number | null
99
}

‎packages/svelte/src/lib/types.ts

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import type { Page, PageProps } from '@inertiajs/core'
1+
import type { Page } from '@inertiajs/core'
22
import type { ComponentType } from 'svelte'
33

4-
export type ComponentResolver = (name: string, page: Page) => ComponentType | Promise<ComponentType>
4+
export type ComponentsResolver = (name: string, page: Page) => ResolvedComponents | Promise<ResolvedComponents>
55

6-
export interface InertiaComponentType extends ComponentType {
7-
default: InertiaComponentType
8-
layout: InertiaComponentType
9-
props: PageProps
6+
export type ResolvedComponents = {
7+
default?: ComponentType
8+
layout?: ComponentType
109
}

0 commit comments

Comments
 (0)
Please sign in to comment.