feat: code template (#64)

Co-authored-by: Kevin Deng 三咲智子 <[email protected]>
sxzz · May 25, 2024 · 34574bc · 34574bc
1 parent 67f2ed3
commit 34574bc
Show file tree

Hide file tree

Showing 16 changed files with 126 additions and 3 deletions.
diff --git a/composables/parser/css.ts b/composables/parser/css.ts
@@ -1,3 +1,4 @@
+import { cssTemplate } from './template'
 import type { LanguageOption, Parser } from './index'
 import type * as CssTree from 'css-tree'
 import type * as Postcss from 'postcss'
@@ -55,4 +56,5 @@ export const css: LanguageOption = {
   label: 'CSS',
   icon: 'i-vscode-icons:file-type-css',
   parsers: [cssTree, postcss],
+  codeTemplate: cssTemplate,
 }
diff --git a/composables/parser/html.ts b/composables/parser/html.ts
@@ -1,3 +1,4 @@
+import { htmlTemplate } from './template'
 import type { LanguageOption, Parser } from './index'
 import type * as Htmlparser2 from 'htmlparser2'
 
@@ -27,4 +28,5 @@ export const html: LanguageOption = {
   label: 'HTML',
   icon: 'i-vscode-icons:file-type-html',
   parsers: [htmlparser2],
+  codeTemplate: htmlTemplate,
 }
diff --git a/composables/parser/index.ts b/composables/parser/index.ts
@@ -54,6 +54,7 @@ export interface LanguageOption {
   label: string
   icon: string
   parsers: Parser<any, any>[]
+  codeTemplate: string
 }
 
 export const LANGUAGES = {

diff --git a/composables/parser/javascript/index.ts b/composables/parser/javascript/index.ts
@@ -1,3 +1,4 @@
+import { javascriptTemplate } from '../template'
 import { babel } from './babel'
 import { swc } from './swc'
 import { oxc } from './oxc'
@@ -13,4 +14,5 @@ export const javascript: LanguageOption = {
   // @unocss-include
   icon: 'i-vscode-icons:file-type-js-official',
   parsers: [babel, swc, oxc, acorn, typescript, espree, tsEslint, flow, hermes],
+  codeTemplate: javascriptTemplate,
 }
diff --git a/composables/parser/json.ts b/composables/parser/json.ts
@@ -1,3 +1,4 @@
+import { jsonTemplate } from './template'
 import type { LanguageOption, Parser } from './index'
 import type parse from 'json-to-ast'
 
@@ -32,4 +33,5 @@ export const json: LanguageOption = {
   label: 'JSON',
   icon: 'i-vscode-icons:file-type-json',
   parsers: [jsonToAst],
+  codeTemplate: jsonTemplate,
 }
diff --git a/composables/parser/svelte.ts b/composables/parser/svelte.ts
@@ -1,3 +1,4 @@
+import { svelteTemplate } from './template'
 import type { LanguageOption, Parser } from './index'
 import type { CompileOptions, compile } from 'svelte/compiler'
 
@@ -33,4 +34,5 @@ export const svelte: LanguageOption = {
   label: 'Svelte',
   icon: 'i-vscode-icons:file-type-svelte',
   parsers: [svelteCompiler],
+  codeTemplate: svelteTemplate,
 }
diff --git a/composables/parser/template/css.css b/composables/parser/template/css.css
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git a/composables/parser/template/html.html b/composables/parser/template/html.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/composables/parser/template/index.ts b/composables/parser/template/index.ts
@@ -0,0 +1,6 @@
+export { default as vueTemplate } from './vue.vue?raw'
+export { default as javascriptTemplate } from './javascript.js?raw'
+export { default as svelteTemplate } from './svelte.svelte?raw'
+export { default as cssTemplate } from './css.css?raw'
+export { default as jsonTemplate } from './json.json?raw'
+export { default as htmlTemplate } from './html.html?raw'
diff --git a/composables/parser/template/javascript.js b/composables/parser/template/javascript.js
@@ -0,0 +1,8 @@
+function fibonacci(num, memo) {
+  memo = memo || {}
+
+  if (memo[num]) return memo[num]
+  if (num <= 1) return 1
+
+  return (memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo))
+}
diff --git a/composables/parser/template/json.json b/composables/parser/template/json.json
@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.4.27"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.2.11"
+  }
+}
diff --git a/composables/parser/template/svelte.svelte b/composables/parser/template/svelte.svelte
@@ -0,0 +1,12 @@
+<script>
+let count = 0;
+
+function handleClick() {
+  count += 1;
+}
+</script>
+
+<button on:click={handleClick}>
+Clicked {count}
+{count === 1 ? 'time' : 'times'}
+</button>
diff --git a/composables/parser/template/vue.vue b/composables/parser/template/vue.vue
@@ -0,0 +1,10 @@
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  {{ count }}
+  <button @click="count++">Count</button>
+</template>
diff --git a/composables/parser/vue.ts b/composables/parser/vue.ts
@@ -1,3 +1,4 @@
+import { vueTemplate } from './template'
 import type { LanguageOption, Parser } from './index'
 import type * as Vue3Sfc from '@vue/compiler-sfc'
 import type * as Vue3Dom from '@vue/compiler-dom'
@@ -121,4 +122,5 @@ export const vue: LanguageOption = {
   label: 'Vue',
   icon: 'i-vscode-icons:file-type-vue',
   parsers: [vue3Sfc, vue3SfcCompiled, vue3DomParse, vue3DomCompile, vueVapor],
+  codeTemplate: vueTemplate,
 }
diff --git a/composables/state/parser.ts b/composables/state/parser.ts
@@ -62,11 +62,11 @@ const location = useBrowserLocation()
 const rawUrlState = import.meta.client
   ? atou(location.value.hash!.slice(1))
   : undefined
+const urlState = rawUrlState && JSON.parse(rawUrlState)
+code.value = urlState?.c || currentLanguage.value.codeTemplate
 if (rawUrlState) {
-  const urlState = JSON.parse(rawUrlState)
   currentLanguageId.value = urlState.l
   currentParserId.value = urlState.p
-  code.value = urlState.c
   rawOptions.value = urlState.o
   overrideVersion.value = urlState.v
 }
@@ -96,16 +96,23 @@ export const parserContext = computedWithControl(parserModule, () => ({
 if (import.meta.client) {
   // serialize state to url
   watchEffect(() => {
+    // code
+    const c =
+      code.value === currentLanguage.value.codeTemplate ? '' : code.value
     const serialized = JSON.stringify({
       l: currentLanguageId.value,
       p: currentParserId.value,
-      c: code.value,
+      c,
       o: rawOptions.value,
       v: overrideVersion.value,
     })
     location.value.hash = utoa(serialized)
   })
 
+  watch(currentLanguage, (language) => {
+    code.value = language.codeTemplate
+  })
+
   // ensure currentParserId is valid
   watch(
     [currentLanguage, currentParserId],

diff --git a/eslint.config.js b/eslint.config.js
@@ -5,4 +5,7 @@ export default sxzz([
       'node/no-unsupported-features/es-builtins': 'off',
     },
   },
+  {
+    ignores: ['composables/parser/template/**'],
+  },
 ])
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,7 @@ export default sxzz([ @@
           'node/no-unsupported-features/es-builtins': 'off',
         },
       },
+      {
+        ignores: ['composables/parser/template/**'],
+      },
     ])