feat: static template console log

jerrywu001 · Sep 12, 2023 · d10b209 · d10b209
1 parent 8cee5d2
commit d10b209
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 10 deletions.
diff --git a/docs/docs/basic-usage/templates.md b/docs/docs/basic-usage/templates.md
@@ -7,14 +7,61 @@ Sandbox is a component toolkit for creating live-running code editing experience
 
 > the `javascript` is also called `vanilla`.
 
-`vanilla` `vanilla-ts` `vue` `vue3` `vue3-ts` `react` `react-ts` `angular` `solid` `svelte` `test-ts`
+`static` `vanilla` `vanilla-ts` `vue` `vue3` `vue3-ts` `react` `react-ts` `angular` `solid` `svelte` `test-ts`
 
-# Usage
+## Partial Usage
 
 <script setup>
+import staticUsage from '../codes/basic-usage/static.ts';
+import javascriptUsage from '../codes/basic-usage/javascript.ts';
 import reactUsage from '../codes/basic-usage/reactUsage.ts';
 </script>
 
+- **static**
+
+::: details markdown code
+<CodePanel :value="staticUsage" />
+:::
+
+::: sandbox {template=static}
+```html index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Parcel Sandbox</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="/styles.css" />
+  <script>
+    console.log("fooo")
+  </script>
+</head>
+<body>
+  <h1>Hello world</h1>
+  <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
+  <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
+</body>
+</html>
+```
+:::
+
+- **vanilla-ts**
+
+::: details markdown code
+<CodePanel :value="javascriptUsage" />
+:::
+
+::: sandbox {template=vanilla-ts}
+```ts index.ts
+import "./styles.css";
+
+document.getElementById("app").innerHTML = `
+<h1>Hello world !!!</h1>
+`;
+```
+:::
+
+- **react**
+
 ::: details markdown code
 <CodePanel :value="reactUsage" />
 :::

diff --git a/docs/docs/codes/basic-usage/javascript.ts b/docs/docs/codes/basic-usage/javascript.ts
@@ -0,0 +1,11 @@
+const code = `::: sandbox {template=vanilla-ts}
+\`\`\`ts index.ts
+import "./styles.css";
+
+document.getElementById("app").innerHTML = \`
+<h1>Hello world !!!</h1>
+\`;
+\`\`\`
+:::`;
+
+export default code;
diff --git a/docs/docs/codes/basic-usage/static.ts b/docs/docs/codes/basic-usage/static.ts
@@ -0,0 +1,22 @@
+const code = `::: sandbox {template=static}
+\`\`\`html index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Parcel Sandbox</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="/styles.css" />
+  <script>
+    console.log("fooo")
+  </script>
+</head>
+<body>
+  <h1>Hello world</h1>
+  <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
+  <button onclick="console.log(document.querySelectorAll('button'))">Log</button>
+</body>
+</html>
+\`\`\`
+:::`;
+
+export default code;
diff --git a/docs/docs/get-started/introduction.md b/docs/docs/get-started/introduction.md
@@ -6,7 +6,7 @@
 
 **We can use Sandpack as directive in md file.**
 
-It support: `angular` | `react` | `react-ts` | `vanilla` | `vanilla-ts` | `vue` | `vue3` | `vue3-ts` | `svelte` | `solid` | `test-ts` | [vite-templates](/vite-templates/vite-vue-ts).
+It support: `static` | `angular` | `react` | `react-ts` | `vanilla` | `vanilla-ts` | `vue` | `vue3` | `vue3-ts` | `svelte` | `solid` | `test-ts` | [vite-templates](/vite-templates/vite-vue-ts).
 
 ## demo
 

diff --git a/docs/package.json b/docs/package.json
@@ -10,6 +10,6 @@
   },
   "devDependencies": {
     "highlight.js": "^11.8.0",
-    "vitepress": "^1.0.0-rc.10"
+    "vitepress": "^1.0.0-rc.12"
   }
 }
diff --git a/package.json b/package.json
@@ -66,28 +66,28 @@
   "dependencies": {
     "@codesandbox/sandpack-themes": "^2.0.21",
     "markdown-it-container": "^3.0.0",
-    "sandpack-vue3": "^3.1.6"
+    "sandpack-vue3": "^3.1.7"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
     "babel-loader": "^9.1.3",
     "bumpp": "^9.2.0",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "npm": "^10.0.0",
+    "npm": "^10.1.0",
     "typescript": "^5.2.2",
     "vite-plugin-dts": "^3.5.3",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.10"
   },
   "peerDependencies": {
     "vite": ">=4.0.0",