Add TS to test-app and Svelte 5 playground

pedroborges · pedroborges · commit 3d2b3ca599e5 · 2024-10-09T14:52:01.000-03:00
diff --git a/packages/svelte/test-app/app.ts b/packages/svelte/test-app/app.ts
@@ -1,11 +1,11 @@
-import { createInertiaApp, router } from '@inertiajs/svelte'
+import { createInertiaApp, ResolvedComponent, router } from '@inertiajs/svelte'
 
 window.testing = { Inertia: router }
 
 createInertiaApp({
   page: window.initialPage,
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {
diff --git a/packages/svelte/test-app/index.html b/packages/svelte/test-app/index.html
@@ -6,7 +6,7 @@
     <script>
       window.initialPage = '{{ placeholder }}'
     </script>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="app.ts"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/packages/svelte/test-app/package.json b/packages/svelte/test-app/package.json
@@ -2,11 +2,15 @@
   "type": "module",
   "scripts": {
     "server:run": "vite build .",
-    "watch": "vite build . --watch"
+    "watch": "vite build . --watch",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.4",
     "svelte": "^4.2.14",
+    "typescript": "^5.6.2",
     "vite": "^5.4.2"
   },
   "dependencies": {
diff --git a/packages/svelte/test-app/svelte.config.js b/packages/svelte/test-app/svelte.config.js
@@ -1,6 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
diff --git a/packages/svelte/test-app/tsconfig.json b/packages/svelte/test-app/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": ["*.d.ts", "*.ts", "*.js", "**/*.d.ts", "**/*.ts", "**/*.js", "**/*.svelte", "*.config.js", "*.config.cjs"]
+}
diff --git a/packages/svelte/test-app/vite-env.d.ts b/packages/svelte/test-app/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/playgrounds/svelte4/composer.json b/playgrounds/svelte4/composer.json
@@ -66,7 +66,7 @@
     "repositories": [
         {
             "type": "path",
-            "url": "./../../../inertia-laravel-v2/",
+            "url": "./../../../inertia-laravel/",
             "options": {
                 "symlink": true
             }
diff --git a/playgrounds/svelte4/package.json b/playgrounds/svelte4/package.json
@@ -4,18 +4,21 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vite build --ssr"
+    "build": "vite build && vite build --ssr",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@inertiajs/svelte": "^1.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.13",
     "axios": "^1.6.0",
-    "laravel-vite-plugin": "^0.7.2",
+    "laravel-vite-plugin": "^1.0.5",
     "lodash": "^4.17.19",
     "postcss": "^8.4.31",
     "svelte": "^4.2.14",
+    "svelte-check": "^4.0.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^5.6.2",
     "vite": "^5.4.2"
diff --git a/playgrounds/svelte4/resources/js/Components/Layout.svelte b/playgrounds/svelte4/resources/js/Components/Layout.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
   export let appName
diff --git a/playgrounds/svelte4/resources/js/Pages/Users.svelte b/playgrounds/svelte4/resources/js/Pages/Users.svelte
@@ -8,7 +8,7 @@
   export let appName
   export let users = []
 
-  const prefetch = usePrefetch()
+  const { lastUpdatedAt, isPrefetched, isPrefetching } = usePrefetch()
 </script>
 
 <svelte:head>
@@ -19,15 +19,15 @@
 
 <div class="my-6">
   Data last refreshed at:
-  {#if $prefetch.lastUpdatedAt}
-    <span>{new Date($prefetch.lastUpdatedAt)}</span>
+  {#if $lastUpdatedAt}
+    <span>{new Date($lastUpdatedAt)}</span>
   {:else}
     <span>N/A</span>
   {/if}
-  {#if $prefetch.isPrefetched}
+  {#if $isPrefetched}
     <span> (Page is prefetched!)</span>
   {/if}
-  {#if $prefetch.isPrefetching}
+  {#if $isPrefetching}
     <span class="text-red-500">refreshing...</span>
   {/if}
 </div>
diff --git a/playgrounds/svelte4/resources/js/app.ts b/playgrounds/svelte4/resources/js/app.ts
@@ -1,8 +1,9 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import type { ResolvedComponent } from '@inertiajs/svelte'
 
 createInertiaApp({
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {
diff --git a/playgrounds/svelte4/resources/js/ssr.ts b/playgrounds/svelte4/resources/js/ssr.ts
@@ -1,11 +1,12 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
+import { ResolvedComponent } from '@inertiajs/svelte'
 
 createServer((page) =>
   createInertiaApp({
     page,
     resolve: (name) => {
-      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
   }),
diff --git a/playgrounds/svelte4/resources/views/app.blade.php b/playgrounds/svelte4/resources/views/app.blade.php
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite(['resources/css/app.css', 'resources/js/app.ts'])
     @inertiaHead
   </head>
   <body>
diff --git a/playgrounds/svelte4/svelte.config.js b/playgrounds/svelte4/svelte.config.js
@@ -1,6 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
diff --git a/playgrounds/svelte4/vite.config.js b/playgrounds/svelte4/vite.config.js
@@ -5,8 +5,8 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: [
     laravel({
-      input: ['resources/css/app.css', 'resources/js/app.js'],
-      ssr: 'resources/js/ssr.js',
+      input: ['resources/css/app.css', 'resources/js/app.ts'],
+      ssr: 'resources/js/ssr.ts',
       refresh: true,
     }),
     svelte({
diff --git a/playgrounds/svelte5/composer.json b/playgrounds/svelte5/composer.json
@@ -66,7 +66,7 @@
     "repositories": [
         {
             "type": "path",
-            "url": "./../../../inertia-laravel-v2/",
+            "url": "./../../../inertia-laravel/",
             "options": {
                 "symlink": true
             }
diff --git a/playgrounds/svelte5/package.json b/playgrounds/svelte5/package.json
@@ -4,18 +4,23 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vite build --ssr"
+    "build": "vite build && vite build --ssr",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@inertiajs/svelte": "^1.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.13",
     "axios": "^1.6.0",
-    "laravel-vite-plugin": "^0.7.2",
+    "laravel-vite-plugin": "^1.0.5",
     "lodash": "^4.17.19",
     "postcss": "^8.4.31",
     "svelte": "^5.0.0-next.244",
+    "svelte-check": "^4.0.0",
     "tailwindcss": "^3.2.4",
+    "typescript": "^5.6.2",
     "vite": "^5.4.2"
   }
 }
diff --git a/playgrounds/svelte5/resources/js/app.ts b/playgrounds/svelte5/resources/js/app.ts
@@ -1,9 +1,10 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import { hydrate, mount } from 'svelte'
+import type { ResolvedComponent } from '@inertiajs/svelte'
 
 createInertiaApp({
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {
diff --git a/playgrounds/svelte5/resources/js/ssr.ts b/playgrounds/svelte5/resources/js/ssr.ts
@@ -1,11 +1,12 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
+import { ResolvedComponent } from '@inertiajs/svelte'
 
 createServer((page) =>
   createInertiaApp({
     page,
     resolve: (name) => {
-      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
   }),
diff --git a/playgrounds/svelte5/resources/js/vite-env.d.ts b/playgrounds/svelte5/resources/js/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/playgrounds/svelte5/resources/views/app.blade.php b/playgrounds/svelte5/resources/views/app.blade.php
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite(['resources/css/app.css', 'resources/js/app.ts'])
     @inertiaHead
   </head>
   <body>
diff --git a/playgrounds/svelte5/tsconfig.json b/playgrounds/svelte5/tsconfig.json
@@ -0,0 +1,23 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	},
+    "include": [
+        "resources/**/*.d.ts",
+        "resources/**/*.ts",
+        "resources/**/*.js",
+        "resources/**/*.svelte",
+        "*.config.js",
+        "*.config.cjs"
+    ]
+}
diff --git a/playgrounds/svelte5/vite.config.js b/playgrounds/svelte5/vite.config.js
@@ -5,8 +5,8 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: [
     laravel({
-      input: ['resources/css/app.css', 'resources/js/app.js'],
-      ssr: 'resources/js/ssr.js',
+      input: ['resources/css/app.css', 'resources/js/app.ts'],
+      ssr: 'resources/js/ssr.ts',
       refresh: true,
     }),
     svelte(),

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/// <reference types="svelte" />`
	`2`	`+/// <reference types="vite/client" />`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`"repositories": [`
`67`	`67`	`{`
`68`	`68`	`"type": "path",`
`69`		`- "url": "./../../../inertia-laravel-v2/",`
	`69`	`+ "url": "./../../../inertia-laravel/",`
`70`	`70`	`"options": {`
`71`	`71`	`"symlink": true`
`72`	`72`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<script>`
	`1`	`+<script lang="ts">`
`2`	`2`	`import { inertia } from '@inertiajs/svelte'`
`3`	`3`
`4`	`4`	`export let appName`