[inertiajs#1866] Merge pull request #8 (with improvements)

Merge punyflash/inertia with some tweaks and fixes

Author: jamesst20

.github/workflows/build.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        adapter: ['react', 'vue2', 'vue3']
+        adapter: ['react', 'vue2', 'vue3', 'svelte']
         node-version: [20]
 
     steps:

packages/svelte/.gitignore

@@ -1,4 +1,6 @@
 dist
+types
 node_modules
 package-lock.json
 yarn.lock
+.svelte-kit

packages/svelte/package.json

@@ -19,17 +19,52 @@
   "keywords": [
     "svelte"
   ],
+  "scripts": {
+    "build": "npm run package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest"
+  },
   "exports": {
-    ".": "./src/index.js",
-    "./server": "./src/server.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "svelte": "./dist/server.js"
+    }
   },
-  "main": "src/index.js",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
   "peerDependencies": {
-    "svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || 5.0.0-next.1"
+    "svelte": "^5.0.0-next.1"
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0"
-  }
-}
+  },
+  "devDependencies": {
+    "axios": "^1.6.8",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.7",
+    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.0",
+    "publint": "^0.1.16",
+    "svelte": "5.0.0-next.131",
+    "svelte-check": "^3.7.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module"
+}

packages/svelte/src/App.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Render, { h } from './Render.svelte'
+  import store from '../store'
+
+  $: child = $store.component?.default && h($store.component.default, $store.page?.props)
+  $: layout = $store.component && $store.component.layout
+  $: components = layout
+    ? Array.isArray(layout)
+      ? layout
+          .concat(child)
+          .reverse()
+          .reduce((child, layout) => h(layout, $store.page?.props, [child]))
+      : h(layout, $store.page?.props, child ? [child] : [])
+    : child
+</script>
+
+<Render {...components} />

packages/svelte/src/Render.svelte

@@ -1,17 +1,18 @@
-<script>
+<script lang="ts">
+  import type { Method, PreserveStateOption, RequestPayload } from '@inertiajs/core'
   import { beforeUpdate } from 'svelte'
-  import { default as inertia } from './link'
+  import { inertia } from '../index'
 
-  export let href
-  export let as = 'a'
-  export let data = {}
-  export let method = 'get'
-  export let replace = false
-  export let preserveScroll = false
-  export let preserveState = null
-  export let only = []
-  export let headers = {}
-  export let queryStringArrayFormat = 'brackets'
+  export let href: string
+  export let as: keyof HTMLElementTagNameMap = 'a'
+  export let data: RequestPayload = {}
+  export let method: Method = 'get'
+  export let replace: boolean = false
+  export let preserveScroll: PreserveStateOption = false
+  export let preserveState: PreserveStateOption | null = null
+  export let only: string[] = []
+  export let headers: Record<string, string> = {}
+  export let queryStringArrayFormat: 'brackets' | 'indices' = 'brackets'
 
   beforeUpdate(() => {
     if (as === 'a' && method.toLowerCase() !== 'get') {

packages/svelte/src/createInertiaApp.js

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  import type { PageProps } from '@inertiajs/core'
+  import type { ComponentType } from 'svelte'
+
+  type RenderProps = {
+    component: ComponentType
+    props?: PageProps
+    children?: RenderProps[]
+  } | null
+
+  export const h = (component: ComponentType, props?: PageProps, children?: RenderProps[]): RenderProps => {
+    return {
+      component,
+      ...(props ? { props } : {}),
+      ...(children ? { children } : {}),
+    }
+  }
+</script>
+
+<script lang="ts">
+  import store from '../store'
+
+  export let component: ComponentType
+  export let props: PageProps = {}
+  export let children: RenderProps[] = []
+
+  let prevComponent: ComponentType
+  let key: number
+  $: {
+    if (prevComponent !== component) {
+      key = Date.now()
+      prevComponent = component
+    }
+  }
+</script>
+
+{#if $store.component}
+  {#key key}
+    <svelte:component this={component} {...props}>
+      {#each children as child, index (component && component.length === index ? $store.key : null)}
+        <svelte:self {...child} />
+      {/each}
+    </svelte:component>
+  {/key}
+{/if}

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

@@ -1,6 +1,9 @@
-<script>
+<script lang="ts">
+  import type { Page } from '@inertiajs/core'
   import App from './App.svelte'
-  export let id, initialPage
+
+  export let id: string
+  export let initialPage: Page
 </script>
 
 <div data-server-rendered="true" {id} data-page={JSON.stringify(initialPage)}>