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 <[email protected]>
codesandbox · Nov 25, 2021 · 2d0c85c · 2d0c85c
1 parent c8b5cdf
commit 2d0c85c
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 1 deletion.
diff --git 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
@@ -140,6 +140,10 @@ export const Vue3Editor: Story<SandpackProps> = (args) => (
   <Sandpack {...args} template="vue3" />
 );
 
+export const Svelte: Story<SandpackProps> = (args) => (
+  <Sandpack {...args} template="svelte" />
+);
+
 export const DarkTheme: Story<SandpackProps> = (args) => (
   <Sandpack
     {...args}

diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx
@@ -3,6 +3,7 @@ import type { SandpackPredefinedTemplate, SandboxTemplate } from "../types";
 import { ANGULAR_TEMPLATE } from "./angular";
 import { REACT_TEMPLATE } from "./react";
 import { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
+import { SVELTE_TEMPLATE } from "./svelte";
 import { VANILLA_TEMPLATE } from "./vanilla";
 import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 import { VUE_TEMPLATE } from "./vue";
@@ -19,4 +20,5 @@ export const SANDBOX_TEMPLATES: Record<
   "vanilla-ts": VANILLA_TYPESCRIPT_TEMPLATE,
   vue3: VUE_TEMPLATE_3,
   angular: ANGULAR_TEMPLATE,
+  svelte: SVELTE_TEMPLATE,
 };
diff --git a/sandpack-react/src/templates/svelte.ts b/sandpack-react/src/templates/svelte.ts
@@ -0,0 +1,56 @@
+import type { SandboxTemplate } from "../types";
+
+export const SVELTE_TEMPLATE: SandboxTemplate = {
+  environment: "svelte",
+  main: "/index.js",
+  entry: "/index.js",
+
+  files: {
+    "/App.svelte": {
+      code: `<style>
+  main {
+    font-family: sans-serif;
+    text-align: center;
+  }
+</style>
+
+<script>
+  let name = 'world';
+</script>
+
+<main>
+  <h1>Hello {name}!</h1>
+</main>`,
+    },
+    "/index.js": {
+      code: `import App from "./App.svelte";
+
+const app = new App({
+  target: document.body
+});
+
+export default app;
+      `,
+    },
+    "/public/index.html": {
+      code: `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <title>Svelte app</title>
+
+    <link rel="stylesheet" href="public/bundle.css" />
+  </head>
+
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>`,
+    },
+  },
+  dependencies: {
+    svelte: "^3.0.0",
+  },
+};
diff --git 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"