feat(Compilers): upgrade Svelte to version 5

live-codes · Dec 9, 2024 · db3053c · db3053c
1 parent cdccdec
commit db3053c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 15 deletions.
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -6,7 +6,7 @@ import { getLanguageCustomSettings, getLanguageByAlias } from '../utils';
 import { getCompileResult } from '../../compiler';
 
 (self as any).createSvelteCompiler = (): CompilerFunction => {
-  const MAIN_FILE = 'App.svelte';
+  const MAIN_FILE = '__LiveCodes_App__.svelte';
   let importedContent = '';
   let imports: Record<string, string> = {};
 
@@ -38,13 +38,10 @@ import { getCompileResult } from '../../compiler';
       removeEnclosingTemplate: true,
     });
     const customSettings = getLanguageCustomSettings('svelte', config);
-    const init =
-      filename === MAIN_FILE
-        ? `\nnew Component({ target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')) });`
-        : '';
 
     const { js } = (window as any).svelte.compile(processedCode, {
       css: 'injected',
+      filename: MAIN_FILE,
       ...customSettings,
     });
 
@@ -53,10 +50,18 @@ import { getCompileResult } from '../../compiler';
     }
 
     return {
-      code: js.code + init,
+      code: filename === MAIN_FILE ? getMountCode(js.code) : js.code,
       info: { importedContent, imports },
     };
   };
 
   return (code, { config }) => compileSvelteSFC(code, { config, filename: MAIN_FILE });
 };
+
+const getMountCode = (code: string) =>
+  `
+import { mount } from "svelte";
+${code}
+
+mount(__LiveCodes_App__, { target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')) });
+`.trimStart();
diff --git a/src/livecodes/languages/svelte/lang-svelte.ts b/src/livecodes/languages/svelte/lang-svelte.ts
@@ -1,5 +1,5 @@
 import type { LanguageSpecs } from '../../models';
-import { svelteRuntimeBaseUrl, vendorsBaseUrl } from '../../vendors';
+import { svelteBaseUrl } from '../../vendors';
 import { parserPlugins } from '../prettier';
 
 export const svelte: LanguageSpecs = {
@@ -10,16 +10,18 @@ export const svelte: LanguageSpecs = {
     pluginUrls: [parserPlugins.html, parserPlugins.babel],
   },
   compiler: {
-    url: vendorsBaseUrl + 'svelte/svelte-compiler.min.js',
+    url: svelteBaseUrl + 'compiler/index.js',
     factory: (_config, baseUrl) => {
       (self as any).importScripts(baseUrl + '{{hash:lang-svelte-compiler.js}}');
       return (self as any).createSvelteCompiler();
     },
     imports: {
-      svelte: svelteRuntimeBaseUrl + 'index.js',
-      'svelte/internal': svelteRuntimeBaseUrl + 'index.js',
-      'svelte/internal/disclose-version': svelteRuntimeBaseUrl + 'disclose-version/index.js',
+      svelte: svelteBaseUrl + 'src/index-client.js',
+      'svelte/internal/client': svelteBaseUrl + 'src/internal/client/index.js',
+      'svelte/internal/disclose-version': svelteBaseUrl + 'src/internal/disclose-version.js',
+      'esm-env': 'https://esm.sh/esm-env',
     },
+    inlineScript: 'globalThis.process = { env: { NODE_ENV: "production" } };',
   },
   extensions: ['svelte'],
   editor: 'script',

diff --git a/src/livecodes/templates/starter/svelte-starter.ts b/src/livecodes/templates/starter/svelte-starter.ts
@@ -18,7 +18,7 @@ export const svelteStarter: Template = {
     content: `
 <script>
   let title = "Svelte";
-  let counter = 0;
+  let counter = $state(0);
   function increment() {
     counter += 1;
   }

diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
@@ -380,9 +380,7 @@ export const stencilUrl = /* @__PURE__ */ getUrl('@stencil/core@3.2.2/compiler/s
 
 export const stylisUrl = /* @__PURE__ */ getUrl('stylis@4.3.2/dist/umd/stylis.js');
 
-export const svelteRuntimeBaseUrl = /* @__PURE__ */ getUrl(
-  'https://unpkg.com/svelte@4.0.0/src/runtime/internal/',
-);
+export const svelteBaseUrl = /* @__PURE__ */ getUrl('svelte@5.10.0/');
 
 export const svgbobWasmCdnUrl = /* @__PURE__ */ getUrl('svgbob-wasm@0.4.1-a0/svgbob_wasm_bg.wasm');