feat: add vite-preact and vite-preact-ts templates

codesandbox · Sep 12, 2023 · 0cfe2d7 · 0cfe2d7
1 parent 4290dbc
commit 0cfe2d7
Show file tree

Hide file tree

Showing 3 changed files with 193 additions and 0 deletions.
diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx
@@ -4,6 +4,8 @@ import { NODE_TEMPLATE } from "./node/node";
 import { VITE_TEMPLATE } from "./node/vite";
 import { VITE_REACT_TEMPLATE } from "./node/vite-react";
 import { VITE_REACT_TS_TEMPLATE } from "./node/vite-react-ts";
+import { VITE_PREACT_TEMPLATE } from "./node/vite-preact";
+import { VITE_PREACT_TS_TEMPLATE } from "./node/vite-preact-ts";
 import { VITE_SVELTE_TEMPLATE } from "./node/vite-svelte";
 import { VITE_SVELTE_TS_TEMPLATE } from "./node/vite-svelte-ts";
 import { VITE_VUE_TEMPLATE } from "./node/vite-vue";
@@ -48,6 +50,8 @@ export const SANDBOX_TEMPLATES = {
   vite: VITE_TEMPLATE,
   "vite-react": VITE_REACT_TEMPLATE,
   "vite-react-ts": VITE_REACT_TS_TEMPLATE,
+  "vite-preact": VITE_PREACT_TEMPLATE,
+  "vite-preact-ts": VITE_PREACT_TS_TEMPLATE,  
   "vite-vue": VITE_VUE_TEMPLATE,
   "vite-vue-ts": VITE_VUE_TS_TEMPLATE,
   "vite-svelte": VITE_SVELTE_TEMPLATE,

diff --git a/sandpack-react/src/templates/node/vite-preact-ts.ts b/sandpack-react/src/templates/node/vite-preact-ts.ts
@@ -0,0 +1,120 @@
+import { commonFiles } from "../common";
+
+export const VITE_PREACT_TS_TEMPLATE = {
+  files: {
+    ...commonFiles,
+    "/App.tsx": {
+      code: `export default function App() {
+  const data: string = "world"
+
+  return <h1>Hello {data}</h1>
+}
+`,
+    },
+    "/index.tsx": {
+      code: `import { render } from "preact";
+import "./styles.css";
+
+import App from "./App";
+
+const root = document.getElementById("root") as HTMLElement;
+render(<App />, root);
+`,
+    },
+    "/index.html": {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
+`,
+    },
+    "/tsconfig.json": {
+      code: JSON.stringify(
+        {
+          compilerOptions: {
+            target: "ESNext",
+            useDefineForClassFields: true,
+            lib: ["DOM", "DOM.Iterable", "ESNext"],
+            allowJs: false,
+            skipLibCheck: true,
+            esModuleInterop: false,
+            allowSyntheticDefaultImports: true,
+            strict: true,
+            forceConsistentCasingInFileNames: true,
+            module: "ESNext",
+            moduleResolution: "Node",
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: "react-jsx",
+            jsxImportSource: "preact",
+          },
+          include: ["src"],
+          references: [{ path: "./tsconfig.node.json" }],
+        },
+        null,
+        2
+      ),
+    },
+    "/tsconfig.node.json": {
+      code: JSON.stringify(
+        {
+          compilerOptions: {
+            composite: true,
+            module: "ESNext",
+            moduleResolution: "Node",
+            allowSyntheticDefaultImports: true,
+          },
+          include: ["vite.config.ts"],
+        },
+        null,
+        2
+      ),
+    },
+    "/package.json": {
+      code: JSON.stringify(
+        {
+          scripts: {
+            dev: "vite",
+            build: "tsc && vite build",
+            preview: "vite preview",
+          },
+          dependencies: {
+            "preact": "^10.16.0"
+          },
+          devDependencies: {
+            "@preact/preset-vite": "^2.5.0",
+            typescript: "^4.9.5",
+            vite: "4.1.4",
+            "esbuild-wasm": "^0.17.12",
+          },
+        },
+        null,
+        2
+      ),
+    },
+    "/vite-env.d.ts": {
+      code: '/// <reference types="vite/client" />',
+    },
+    "/vite.config.ts": {
+      code: `import { defineConfig } from 'vite'
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+})
+`,
+    },
+  },
+  main: "/App.tsx",
+  environment: "node",
+};
diff --git a/sandpack-react/src/templates/node/vite-preact.ts b/sandpack-react/src/templates/node/vite-preact.ts
@@ -0,0 +1,69 @@
+import { commonFiles } from "../common";
+
+export const VITE_PREACT_TEMPLATE = {
+  files: {
+    ...commonFiles,
+    "/App.jsx": {
+      code: `export default function App() {
+  const data = "world"
+
+  return <h1>Hello {data}</h1>
+}
+`,
+    },
+    "/index.jsx": {
+      code: `import { render } from "preact";
+import "./styles.css";
+
+import App from "./App";
+
+const root = document.getElementById("root");
+render(<App />, root);
+`,
+    },
+    "/index.html": {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.jsx"></script>
+  </body>
+</html>
+`,
+    },
+    "/package.json": {
+      code: JSON.stringify({
+        scripts: {
+          dev: "vite",
+          build: "vite build",
+          preview: "vite preview",
+        },
+        dependencies: {
+          "preact": "^10.16.0"
+        },
+        devDependencies: {
+          "@preact/preset-vite": "^2.5.0",
+          vite: "4.1.4",
+          "esbuild-wasm": "0.17.12",
+        },
+      }),
+    },
+    "/vite.config.js": {
+      code: `import { defineConfig } from "vite";
+import preact from '@preact/preset-vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [preact()],
+});
+`,
+    },
+  },
+  main: "/App.jsx",
+  environment: "node",
+};