diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts index e24329f6c..95683cb28 100644 --- 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 = {}; @@ -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 index ea63658b9..d271ae101 100644 --- 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 index 9611638ba..52bda068f 100644 --- 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: `