From d33eeb9be6809fb40165d97e34a13471ec5faf1b Mon Sep 17 00:00:00 2001 From: Andrei Floricel <andrei.floricel@gmail.com> Date: Mon, 15 Nov 2021 13:16:23 +0200 Subject: [PATCH] feat(template): add vanilla typescript (#130) * add vanilla typescript template * sort imports Co-authored-by: Danilo Woznica <danilowoz@gmail.com> --- .../src/presets/Sandpack.stories.tsx | 12 ++++ sandpack-react/src/templates/index.tsx | 4 +- .../src/templates/vanilla-typescript.ts | 68 +++++++++++++++++++ sandpack-react/src/types.ts | 1 + 4 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 sandpack-react/src/templates/vanilla-typescript.ts diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx index e0c56d7af..c9c56561a 100644 --- 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 index c42cfd08e..a6ededfb6 100644 --- 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 new file mode 100644 index 000000000..fc2829a37 --- /dev/null +++ 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 index 13e29c6f5..3978f1355 100644 --- 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";