feat: support svelte 4

doc/faq.md

@@ -404,7 +404,7 @@ manually.
 <details>
 <summary>Background</summary>
 
-For `.svelte` single file components it uses the `svelte` (version 3.x)
+For `.svelte` single file components it uses the `svelte` (version 4.x)
 
 - which will be in your module dependencies if you're developing with Svelte.
 - because of how svelte works, all `.svelte` files depend on `"svelte/internal"`.

package.json

@@ -259,7 +259,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "3.3.3",
     "proxyquire": "2.1.3",
-    "svelte": "3.59.1",
+    "svelte": "4.2.18",
     "symlink-dir": "6.0.1",
     "typescript": "5.5.3",
     "upem": "9.0.4",
@@ -294,7 +294,7 @@
       {
         "package": "svelte",
         "policy": "pin",
-        "because": "upgrading to supporting svelte 4 will require a non-trivial amount of labour (which we are going to invest, but not right now)"
+        "because": "upgrading to supporting svelte 5 will require a non-trivial amount of labour (which we are going to invest, but not right now)"
       }
     ]
   },
@@ -306,7 +306,7 @@
     "coffee-script": ">=1.0.0 <2.0.0",
     "coffeescript": ">=1.0.0 <3.0.0",
     "livescript": ">=1.0.0 <2.0.0",
-    "svelte": ">=3.0.0 <4.0.0",
+    "svelte": ">=3.0.0 <5.0.0",
     "swc": ">=1.0.0 <2.0.0",
     "typescript": ">=2.0.0 <6.0.0",
     "vue-template-compiler": ">=2.0.0 <3.0.0",

test/extract/transpile/__fixtures__/svelte-too.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.59.1 */
+/* generated by Svelte v4.2.18 */
 import {
   SvelteComponent,
   append,
@@ -15,6 +15,7 @@ import {
   transition_out,
 } from "svelte/internal";
 
+import "svelte/internal/disclose-version";
 import "./page.css";
 import Header from "./Header.svelte";
 
@@ -39,9 +40,7 @@ function create_fragment(ctx) {
       create_component(header.$$.fragment);
       t0 = space();
       section = element("section");
-
-      section.innerHTML = `<h2>Pages in Storybook</h2> 
-    <img src="./my.png" alt="my alt"/>`;
+      section.innerHTML = `<h2>Pages in Storybook</h2> <img src="./my.png" alt="my alt"/>`;
     },
     m(target, anchor) {
       insert(target, article, anchor);
@@ -66,7 +65,10 @@ function create_fragment(ctx) {
       current = false;
     },
     d(detaching) {
-      if (detaching) detach(article);
+      if (detaching) {
+        detach(article);
+      }
+
       destroy_component(header);
     },
   };

test/extract/transpile/__fixtures__/svelte.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.59.1 */
+/* generated by Svelte v4.2.18 */
 import {
   SvelteComponent,
   append,
@@ -15,6 +15,7 @@ import {
   transition_out,
 } from "svelte/internal";
 
+import "svelte/internal/disclose-version";
 import "./page.css";
 
 function create_fragment(ctx) {
@@ -38,9 +39,7 @@ function create_fragment(ctx) {
       create_component(header.$$.fragment);
       t0 = space();
       section = element("section");
-
-      section.innerHTML = `<h2>Pages in Storybook</h2> 
-    <img src="./my.png" alt="my alt"/>`;
+      section.innerHTML = `<h2>Pages in Storybook</h2> <img src="./my.png" alt="my alt"/>`;
     },
     m(target, anchor) {
       insert(target, article, anchor);
@@ -65,7 +64,10 @@ function create_fragment(ctx) {
       current = false;
     },
     d(detaching) {
-      if (detaching) detach(article);
+      if (detaching) {
+        detach(article);
+      }
+
       destroy_component(header);
     },
   };

test/extract/transpile/meta.spec.mjs

@@ -52,7 +52,7 @@ describe("[U] extract/transpile/meta", () => {
       },
       {
         name: "svelte",
-        version: ">=3.0.0 <4.0.0",
+        version: ">=3.0.0 <5.0.0",
         available: true,
       },
       {

test/extract/transpile/svelte-preprocess.spec.mjs

@@ -1,5 +1,4 @@
 import { equal } from "node:assert/strict";
-// eslint-disable-next-line node/file-extension-in-import
 import * as svelteCompiler from "svelte/compiler";
 import normalizeNewline from "normalize-newline";
 import thing from "#extract/transpile/typescript-wrap.mjs";