From 2d0c85c5ef4fa856c83e539e2c9e2ffd804fa366 Mon Sep 17 00:00:00 2001 From: paolotiu Date: Fri, 26 Nov 2021 00:17:20 +0800 Subject: [PATCH] feat(template): svelte (#182) * fix: svelte syntax highlighting * feat: add svelte template * fix(svelte): update template * fix(svelte): update story Co-authored-by: Danilo Woznica --- .../src/components/CodeEditor/utils.ts | 1 + .../src/presets/Sandpack.stories.tsx | 4 ++ sandpack-react/src/templates/index.tsx | 2 + sandpack-react/src/templates/svelte.ts | 56 +++++++++++++++++++ sandpack-react/src/types.ts | 3 +- 5 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 sandpack-react/src/templates/svelte.ts diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts index 503a8b1c7..8f925a7de 100644 --- a/sandpack-react/src/components/CodeEditor/utils.ts +++ b/sandpack-react/src/components/CodeEditor/utils.ts @@ -140,6 +140,7 @@ export const getCodeMirrorLanguage = ( return javascript({ jsx: true, typescript: true }); case "vue": case "html": + case "svelte": return html(); case "css": case "scss": diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx index cc533ff31..28a4cbd59 100644 --- a/sandpack-react/src/presets/Sandpack.stories.tsx +++ b/sandpack-react/src/presets/Sandpack.stories.tsx @@ -140,6 +140,10 @@ export const Vue3Editor: Story = (args) => ( ); +export const Svelte: Story = (args) => ( + +); + export const DarkTheme: Story = (args) => ( + main { + font-family: sans-serif; + text-align: center; + } + + + + +
+

Hello {name}!

+
`, + }, + "/index.js": { + code: `import App from "./App.svelte"; + +const app = new App({ + target: document.body +}); + +export default app; + `, + }, + "/public/index.html": { + code: ` + + + + + + Svelte app + + + + + + + +`, + }, + }, + dependencies: { + svelte: "^3.0.0", + }, +}; diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts index f6fa95ebf..6ee66a13d 100644 --- a/sandpack-react/src/types.ts +++ b/sandpack-react/src/types.ts @@ -117,7 +117,8 @@ export type SandpackPredefinedTemplate = | "vanilla" | "vanilla-ts" | "vue" - | "vue3"; + | "vue3" + | "svelte"; export type SandpackPredefinedTheme = | "light"