feat: Support Svelte v4 (#5659)

lachlancollins · web-flow · commit 3c86cab357fa · 2023-07-03T06:36:22.000+02:00
* feat: Support svelte v4

* Downgrade @testing-library/svelte

* Upgrade @testing-library/svelte to 4.0.3

* Refactor onMount dynamic import
diff --git a/examples/svelte/auto-refetching/package.json b/examples/svelte/auto-refetching/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/load-more-infinite-scroll/package.json b/examples/svelte/load-more-infinite-scroll/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/optimistic-updates-typescript/package.json b/examples/svelte/optimistic-updates-typescript/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/playground/package.json b/examples/svelte/playground/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/simple/package.json b/examples/svelte/simple/package.json
@@ -13,10 +13,10 @@
     "@tanstack/svelte-query-devtools": "^5.0.0-alpha.39"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tsconfig/svelte": "^4.0.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/ssr/package.json b/examples/svelte/ssr/package.json
@@ -15,8 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.19.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
diff --git a/examples/svelte/star-wars/package.json b/examples/svelte/star-wars/package.json
@@ -17,8 +17,8 @@
     "@sveltejs/kit": "^1.19.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
diff --git a/package.json b/package.json
@@ -71,12 +71,13 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "git-log-parser": "^1.2.0",
+    "jsdom": "^22.0.0",
     "jsonfile": "^6.1.0",
     "luxon": "^3.3.0",
     "nx": "^16.3.1",
     "nx-cloud": "^16.0.5",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "publint": "^0.1.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -89,7 +90,7 @@
     "semver": "^7.5.1",
     "solid-js": "^1.6.13",
     "stream-to-array": "^2.3.0",
-    "tsup": "^7.0.0",
+    "tsup": "^7.1.0",
     "type-fest": "^3.11.0",
     "typescript": "^5.0.4",
     "vitest": "^0.27.1",
diff --git a/packages/svelte-query-devtools/package.json b/packages/svelte-query-devtools/package.json
@@ -39,18 +39,18 @@
     "esm-env": "^1.0.0"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
+    "@sveltejs/package": "^2.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@tanstack/svelte-query": "workspace:*",
-    "eslint-plugin-svelte": "^2.29.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "eslint-plugin-svelte": "^2.32.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
   },
   "peerDependencies": {
     "@tanstack/svelte-query": "workspace:*",
-    "svelte": "^3.54.0"
+    "svelte": ">=3 <5"
   }
 }
diff --git a/packages/svelte-query-devtools/src/Devtools.svelte b/packages/svelte-query-devtools/src/Devtools.svelte
@@ -20,21 +20,23 @@
   let devtools: TanstackQueryDevtools | undefined
 
   if (DEV && BROWSER) {
-    onMount(async () => {
-      const QueryDevtools = (await import('@tanstack/query-devtools'))
-        .TanstackQueryDevtools
-      devtools = new QueryDevtools({
-        client,
-        queryFlavor: 'Svelte Query',
-        version: '5',
-        onlineManager,
-        buttonPosition,
-        position,
-        initialIsOpen,
-        errorTypes,
-      })
+    onMount(() => {
+      import('@tanstack/query-devtools').then((m) => {
+        const QueryDevtools = m.TanstackQueryDevtools
+
+        devtools = new QueryDevtools({
+          client,
+          queryFlavor: 'Svelte Query',
+          version: '5',
+          onlineManager,
+          buttonPosition,
+          position,
+          initialIsOpen,
+          errorTypes,
+        })
 
-      devtools.mount(ref)
+        devtools.mount(ref)
+      })
 
       return () => {
         devtools?.unmount()
diff --git a/packages/svelte-query/package.json b/packages/svelte-query/package.json
@@ -42,18 +42,17 @@
     "@tanstack/query-core": "workspace:*"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.4.0",
-    "@testing-library/svelte": "^3.2.2",
-    "eslint-plugin-svelte": "^2.29.0",
-    "jsdom": "^22.0.0",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "@sveltejs/package": "^2.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/svelte": "^4.0.3",
+    "eslint-plugin-svelte": "^2.32.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.4",
     "tslib": "^2.5.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.0"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0"
+    "svelte": ">=3 <5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
