feat(template): add vanilla typescript (#130)

* add vanilla typescript template * sort imports Co-authored-by: Danilo Woznica <[email protected]>
codesandbox · Nov 15, 2021 · d33eeb9 · d33eeb9 · vercel · Nov 15, 2021
1 parent fdebafd
commit d33eeb9
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 1 deletion.
diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx
@@ -109,6 +109,18 @@ export const VanillaEditor: Story<SandpackProps> = (args) => (
   />
 );
 
+export const VanillaTypescriptEditor: Story<SandpackProps> = (args) => (
+  <Sandpack
+    {...args}
+    options={{
+      openPaths: ["/src/index.ts", "/src/styles.css", "/index.html"],
+      showNavigator: true,
+    }}
+    template="vanilla-ts"
+    theme="codesandbox-dark"
+  />
+);
+
 export const AngularEditor: Story<SandpackProps> = (args) => (
   <Sandpack
     {...args}

diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx
@@ -2,10 +2,11 @@ import type { SandpackPredefinedTemplate, SandboxTemplate } from "../types";
 
 import { ANGULAR_TEMPLATE } from "./angular";
 import { REACT_TEMPLATE } from "./react";
+import { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
 import { VANILLA_TEMPLATE } from "./vanilla";
+import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 import { VUE_TEMPLATE } from "./vue";
 import { VUE_TEMPLATE_3 } from "./vue3";
-import { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
 
 export const SANDBOX_TEMPLATES: Record<
   SandpackPredefinedTemplate,
@@ -15,6 +16,7 @@ export const SANDBOX_TEMPLATES: Record<
   "react-ts": REACT_TYPESCRIPT_TEMPLATE,
   vue: VUE_TEMPLATE,
   vanilla: VANILLA_TEMPLATE,
+  "vanilla-ts": VANILLA_TYPESCRIPT_TEMPLATE,
   vue3: VUE_TEMPLATE_3,
   angular: ANGULAR_TEMPLATE,
 };
diff --git a/sandpack-react/src/templates/vanilla-typescript.ts b/sandpack-react/src/templates/vanilla-typescript.ts
@@ -0,0 +1,68 @@
+import type { SandboxTemplate } from "../types";
+
+export const VANILLA_TYPESCRIPT_TEMPLATE: SandboxTemplate = {
+  files: {
+    "tsconfig.json": {
+      code: `{
+  "compilerOptions": {
+    "strict": true,
+    "module": "commonjs",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "rootDir": "src",
+    "moduleResolution": "node"
+  }
+}`,
+    },
+    "/src/index.ts": {
+      code: `import "./styles.css";
+
+document.getElementById("app").innerHTML = \`
+<h1>Hello Vanilla!</h1>
+<div>
+  We use the same configuration as Parcel to bundle this sandbox, you can find more
+  info about Parcel 
+  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
+</div>
+\`;
+`,
+    },
+    "/src/styles.css": {
+      code: `body {
+  font-family: sans-serif;
+}
+      `,
+    },
+    "/index.html": {
+      code: `<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Parcel Sandbox</title>
+  <meta charset="UTF-8" />
+</head>
+
+<body>
+  <div id="app"></div>
+
+  <script src="src/index.ts">
+  </script>
+</body>
+
+</html>`,
+    },
+  },
+  dependencies: {},
+  devDependencies: {
+    typescript: "^4.0.0",
+  },
+  entry: "/src/index.ts",
+  main: "/src/index.ts",
+  environment: "parcel",
+};
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
@@ -99,6 +99,7 @@ export type SandpackPredefinedTemplate =
   | "react"
   | "react-ts"
   | "vanilla"
+  | "vanilla-ts"
   | "vue"
   | "vue3";