feat: support repl

.gitignore

@@ -11,6 +11,7 @@ yarn.lock*
 node_modules
 dist
 dist-ssr
+lib
 *.local
 
 .vscode
@@ -22,6 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.vscode/
-
-packages/varlet-schema-renderer/lib
+.vscode/

package.json

@@ -4,9 +4,11 @@
   "scripts": {
     "dev": "pnpm --dir ./packages/varlet-schema-renderer dev",
     "build": "pnpm --dir ./packages/varlet-schema-renderer build",
+    "dev:repl": "pnpm --dir ./packages/varlet-schema-repl dev",
+    "build:repl": "pnpm --dir ./packages/varlet-schema-repl build",
     "dev:play": "pnpm pnpm --dir ./packages/varlet-schema-playground dev",
     "build:play": "pnpm pnpm --dir ./packages/varlet-schema-playground build",
-    "bootstrap": "pnpm i && pnpm build",
+    "bootstrap": "pnpm i && pnpm build && pnpm build:repl",
     "release": "pnpm bootstrap && varlet-cli release"
   },
   "devDependencies": {

packages/varlet-schema-playground/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@varlet/schema-renderer": "workspace:*",
+    "@varlet/schema-repl": "workspace:*",
     "@varlet/touch-emulator": "^2.18.1",
     "@varlet/ui": "^2.18.1",
     "vue": "^3.3.4"

packages/varlet-schema-playground/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Button, Form, Input, Select, Option, Space, Snackbar } from '@varlet/ui'
-import { SchemaRenderer, type SchemaPageNode } from '@varlet/schema-renderer'
+import { SchemaRepl, type SchemaPageNode } from '@varlet/schema-repl'
 import { shallowRef } from 'vue'
+import '@varlet/schema-repl/lib/index.css'
 
 const components = shallowRef({
   Button,
@@ -155,7 +156,7 @@ function setup() {
 
 <template>
   <div class="container">
-    <schema-renderer class="schema-renderer" :components="components" :injects="injects" :schema="schema" />
+    <schema-repl theme="vs-dark" :components="components" :injects="injects" v-model:schema="schema" />
   </div>
 </template>
 
@@ -170,20 +171,12 @@ body {
   transition: background-color 0.25s, color 0.25s;
   color: var(--color-text);
   background-color: var(--color-body);
+  min-height: 100vh;
 }
 </style>
 
 <style scoped lang="less">
 .container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  min-height: 100vh;
+  height: 100vh;
 }
-
-.schema-renderer {
-  width: 400px;
-  max-width: 100%;
-}
-</style>
+</style>

packages/varlet-schema-renderer/src/renderer.ts

@@ -335,6 +335,6 @@ export const SchemaRenderer = defineComponent({
       }
     }
 
-    return () => h('div', { class: 'varlet-schema-renderer' }, renderSchemaNodeSlots(props.schema, {}))
+    return () => h('div', { class: 'var-schema-renderer' }, renderSchemaNodeSlots(props.schema, {}))
   }
 })

packages/varlet-schema-repl/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@varlet/schema-repl",
+  "version": "0.0.2",
+  "description": "Lightweight Schema repl component based on Vue3",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "keywords": [
+    "Vue3",
+    "Component",
+    "Schema",
+    "Repl",
+    "Varlet"
+  ],
+  "author": "haoziqaq <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "tsup src/index.ts --format esm --out-dir=lib --watch --dts",
+    "build": "tsup src/index.ts --format esm --out-dir=lib --dts --clean"
+  },
+  "dependencies": {
+    "@varlet/shared": "^2.18.1",
+    "@varlet/use": "^2.18.1",
+    "@varlet/schema-renderer": "workspace:*",
+    "monaco-editor": "0.44.0"
+  },
+  "devDependencies": {
+    "tsup": "7.2.0",
+    "typescript": "^5.1.5",
+    "esbuild-plugin-less": "^1.3.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

packages/varlet-schema-repl/src/index.ts

@@ -0,0 +1,2 @@
+export * from '@varlet/schema-renderer'
+export * from './repl'

packages/varlet-schema-repl/src/monacoWorkers.ts

@@ -0,0 +1,32 @@
+// @ts-ignore
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+// @ts-ignore
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+// @ts-ignore
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+// @ts-ignore
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+// @ts-ignore
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new jsonWorker()
+    }
+
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new cssWorker()
+    }
+
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new htmlWorker()
+    }
+
+    if (label === 'typescript' || label === 'javascript') {
+      return new tsWorker()
+    }
+
+    return new editorWorker()
+  }
+}

packages/varlet-schema-repl/src/repl.css

@@ -0,0 +1,22 @@
+:root {
+	--schema-repl-border-color: #eee;
+}
+
+.var-schema-repl {
+	display: flex;
+	height: 100%;
+}
+
+.var-schema-repl-editor {
+	width: 50%;
+	resize: horizontal;
+	border-right: thin solid var(--schema-repl-border-color)
+}
+
+.var-schema-renderer {
+	width: 50%;
+}
+
+.var-schema-repl-vs-dark {
+	--schema-repl-border-color: rgba(255, 255, 255, 0.14);
+}

packages/varlet-schema-repl/src/repl.ts

@@ -0,0 +1,95 @@
+import * as monaco from 'monaco-editor'
+import { onWindowResize } from '@varlet/use'
+import { type Component, PropType, defineComponent, h, onMounted, ref, onUnmounted, watch } from 'vue'
+import { type SchemaPageNode, SchemaRenderer } from '@varlet/schema-renderer'
+
+import './monacoWorkers'
+import './repl.css'
+
+export const SchemaRepl = defineComponent({
+  props: {
+    schema: {
+      type: Object as PropType<SchemaPageNode>,
+      required: true,
+      default: () => ({})
+    },
+
+    components: {
+      type: Object as PropType<Record<string, Component>>,
+      default: () => ({})
+    },
+
+    injects: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({})
+    },
+
+    theme: {
+      type: String as PropType<'vs' | 'vs-dark'>,
+      default: 'vs'
+    },
+
+    'onUpdate:schema': {
+      type: [Function, Array] as PropType<(value: SchemaPageNode) => void | Array<(value: SchemaPageNode) => void>>
+    }
+  },
+
+  setup(props) {
+    const editorContainer = ref<HTMLElement | null>(null)
+    let editor: monaco.editor.IStandaloneCodeEditor
+
+    onMounted(() => {
+      editor = monaco.editor.create(editorContainer.value!, getOptions())
+      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, updateSchema)
+    })
+
+    onUnmounted(() => {
+      editor.dispose()
+    })
+
+    watch(
+      () => [props.theme, props.schema],
+      () => {
+        editor.updateOptions(getOptions())
+      }
+    )
+
+    onWindowResize(() => {
+      editor.layout()
+    })
+
+    function getOptions(): monaco.editor.IStandaloneEditorConstructionOptions {
+      return {
+        value: JSON.stringify(props.schema, null, 2),
+        language: 'json',
+
+        scrollbar: {},
+        minimap: {
+          enabled: false
+        },
+        theme: props.theme
+      }
+    }
+
+    function updateSchema() {
+      let value
+      try {
+        value = JSON.parse(editor.getValue())
+        props['onUpdate:schema']?.(value)
+      } catch (e) {
+        console.error('JSON parse error')
+      }
+    }
+
+    return () => {
+      return h(
+        'div',
+        { class: ['var-schema-repl', props.theme === 'vs-dark' ? 'var-schema-repl-vs-dark' : undefined] },
+        [
+          h('div', { class: 'var-schema-repl-editor', ref: editorContainer }),
+          h(SchemaRenderer, { schema: props.schema, components: props.components, injects: props.injects })
+        ]
+      )
+    }
+  }
+})

packages/varlet-schema-repl/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2016",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "./lib"
+  }
+}