Revert "Revert "Add Svelte TypeScript support (#1866)""

This reverts commit 519272b.

Author: thecrypticace

.github/workflows/build.yml

@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        adapter: ['react', 'vue2', 'vue3']
+        adapter: ['react', 'vue2', 'vue3', 'svelte']
 
     steps:
       - name: Checkout

packages/svelte/.gitignore

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

packages/svelte/package.json

@@ -5,7 +5,8 @@
   "description": "The Svelte adapter for Inertia.js",
   "contributors": [
     "Jonathan Reinink <[email protected]>",
-    "Pedro Borges <[email protected]>"
+    "Pedro Borges <[email protected]>",
+    "Dmytro Morozov <[email protected]>"
   ],
   "homepage": "https://inertiajs.com/",
   "repository": {
@@ -19,17 +20,54 @@
   "keywords": [
     "svelte"
   ],
-  "exports": {
-    ".": "./src/index.js",
-    "./server": "./src/server.js"
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
-  "main": "src/index.js",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
   "peerDependencies": {
     "svelte": "^3.20.0 || ^4.0.0"
   },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "publint": "^0.2.7",
+    "svelte": "^4.2.12",
+    "svelte-check": "^3.6.8",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "svelte": "./dist/server.js"
+    }
+  },
+  "import": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "typesVersions": {
+    ">4.0": {
+      ".": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
   "dependencies": {
     "@inertiajs/core": "1.2.0",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.isequal": "^4.5.0"
+    "lodash": "^4.5.0"
   }
 }

packages/svelte/src/Render.svelte

@@ -1,16 +1,18 @@
-<script>
+<script lang="ts">
   import Render, { h } from './Render.svelte'
-  import store from './store'
+  import store from '../store'
 
-  $: child = $store.component && h($store.component.default, $store.page.props)
+  $$props
+
+  $: child = $store.component && 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])
+          .reduce((child, layout) => h(layout, $store.page?.props, [child]))
+      : h(layout, $store.page?.props, [child])
     : child
 </script>
 

packages/svelte/src/createInertiaApp.js

@@ -1,18 +1,19 @@
-<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 except = []
-  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 except: string[] = []
+  export let headers: Record<string, string> = {}
+  export let queryStringArrayFormat: 'brackets' | 'indices' = 'brackets'
 
   beforeUpdate(() => {
     if (as === 'a' && method.toLowerCase() !== 'get') {

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

@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import type { PageProps } from '@inertiajs/core'
+  import type { InertiaComponentType } from '../types'
+
+  type RenderProps = {
+    component: InertiaComponentType
+    props?: PageProps
+    children?: RenderProps[]
+  } | null
+
+  export const h = (component: InertiaComponentType, props?: PageProps, children?: RenderProps[]): RenderProps => {
+    return {
+      component,
+      ...(props ? { props } : {}),
+      ...(children ? { children } : {}),
+    }
+  }
+</script>
+
+<script lang="ts">
+  import store from '../store'
+
+  export let component: InertiaComponentType
+  export let props: PageProps = {}
+  export let children: RenderProps[] = []
+
+  let prev = component
+  let key = new Date().getTime()
+
+  function updateKey(component: InertiaComponentType) {
+    if (prev !== component) {
+      prev = component
+      key = new Date().getTime()
+    }
+  }
+
+  $: updateKey(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/Link.svelte packages/svelte/src/lib/components/Link.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)}>

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

@@ -0,0 +1,90 @@
+import { router, setupProgress, type InertiaAppResponse, type Page } from '@inertiajs/core'
+import type { ComponentType } from 'svelte'
+import SvelteApp from './components/App.svelte'
+import SSR from './components/SSR.svelte'
+import store from './store'
+import type { ComponentResolver, InertiaComponentType } from './types'
+
+interface CreateInertiaAppProps {
+  id?: string
+  resolve: ComponentResolver
+  setup: (props: {
+    el: Element
+    // @ts-ignore
+    App: ComponentType<SvelteApp>
+    props: {
+      initialPage: Page
+      resolveComponent: ComponentResolver
+    }
+  }) => void | SvelteApp
+  progress?:
+    | false
+    | {
+        delay?: number
+        color?: string
+        includeCSS?: boolean
+        showSpinner?: boolean
+      }
+  page?: Page
+}
+
+export default async function createInertiaApp({
+  id = 'app',
+  resolve,
+  setup,
+  progress = {},
+  page,
+}: CreateInertiaAppProps): InertiaAppResponse {
+  const isServer = typeof window === 'undefined'
+  const el = isServer ? null : document.getElementById(id)
+  const initialPage = page || JSON.parse(el?.dataset.page ?? '{}')
+  const resolveComponent = (name: string) => Promise.resolve(resolve(name))
+
+  await resolveComponent(initialPage.component).then((initialComponent) => {
+    store.set({
+      component: initialComponent as unknown as InertiaComponentType,
+      page: initialPage,
+    })
+  })
+
+  if (!isServer) {
+    if (!el) {
+      throw new Error(`Element with ID "${id}" not found.`)
+    }
+
+    router.init({
+      initialPage,
+      resolveComponent,
+      swapComponent: async ({ component, page, preserveState }) => {
+        store.update((current) => ({
+          component: component as InertiaComponentType,
+          page,
+          key: preserveState ? current.key : Date.now(),
+        }))
+      },
+    })
+
+    if (progress) {
+      setupProgress(progress)
+    }
+
+    setup({
+      el,
+      App: SvelteApp,
+      props: {
+        initialPage,
+        resolveComponent,
+      },
+    })
+
+    return
+  }
+
+  // Svelte types are written for the DOM API and not the SSR API.
+  const { html, head, css } = (SSR as any).render({ id, initialPage })
+
+  return {
+    body: html,
+    head: [head, `<style data-vite-css>${css.code}</style>`],
+  }
+}

packages/svelte/src/SSR.svelte packages/svelte/src/lib/components/SSR.svelte

@@ -1,5 +1,5 @@
 export { router } from '@inertiajs/core'
-export { default as Link } from './Link.svelte'
+export { default as Link } from './components/Link.svelte'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as inertia } from './link'
 export { default as page } from './page'