✨ feat: support options

docs/components/playground/composables/use-editor/index.ts

@@ -1,6 +1,6 @@
 import { onMounted, Ref, ref, ShallowRef } from 'vue'
 import useMonaco from './use-monaco'
-import { DataMap } from '../../index'
+import { DataMap } from '../..'
 
 export default function useEditor({
   el,
@@ -10,18 +10,31 @@ export default function useEditor({
   dataMap: Ref<DataMap>
 }) {
   const activeDataKey = ref<keyof DataMap>('vertex')
+  const setMonacoValue = () => {
+    const value = dataMap.value[activeDataKey.value]
+    monaco?.editor.setModelLanguage(
+      editor!.getModel()!,
+      activeDataKey.value === 'options' ? 'typescript' : 'wgsl'
+    )
+    editor?.setValue(value)
+  }
+  const setDataMapValue = () => {
+    dataMap.value[activeDataKey.value] = editor?.getValue() || ''
+  }
   const updateActiveDataKey = (key: keyof DataMap) => {
     activeDataKey.value = key
-    monaco?.setValue(dataMap.value[key])
+    setMonacoValue()
   }
-  let monaco: ReturnType<typeof useMonaco> | null = null
+  let monaco: ReturnType<typeof useMonaco>['monaco'] | null = null
+  let editor: ReturnType<typeof useMonaco>['editor'] | null = null
   onMounted(() => {
     if (!el.value) return
-    monaco = useMonaco(el.value)
-    monaco.setValue(dataMap.value[activeDataKey.value])
-    monaco.onDidChangeModelContent(() => {
-      const value = monaco?.getValue() || ''
-      dataMap.value[activeDataKey.value] = value
+    const monacoReturn = useMonaco(el.value)
+    monaco = monacoReturn.monaco
+    editor = monacoReturn.editor
+    setMonacoValue()
+    editor.onDidChangeModelContent(() => {
+      setDataMapValue()
     })
   })
   return { dataMap, activeDataKey, updateActiveDataKey }

docs/components/playground/composables/use-editor/use-monaco.ts

@@ -6,15 +6,18 @@ import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 
 export default function useMonaco(el: HTMLElement) {
-  return monaco.editor.create(el, {
-    theme: 'vs-dark',
-    value: '',
-    language: 'wgsl',
-    automaticLayout: true, // 自动调整大小
-    lineHeight: 32,
-    tabSize: 2,
-    fontSize: 22
-  })
+  return {
+    monaco: monaco,
+    editor: monaco.editor.create(el, {
+      theme: 'vs-dark',
+      value: '',
+      language: 'wgsl',
+      automaticLayout: true, // 自动调整大小
+      lineHeight: 32,
+      tabSize: 2,
+      fontSize: 22
+    })
+  }
 }
 self.MonacoEnvironment = {
   getWorker(_, label) {

docs/components/playground/composables/use-view.ts

@@ -30,12 +30,10 @@ export default function useView({
   const renderGPUMesh = _throttle(() => {
     if (!el.value) return
     el.value.innerHTML = ''
+    const options = eval(dataMap.value.options)
+    console.log(options)
     new GPUMesh.Mesh(el.value, {
-      vertices: new Float32Array([
-        -0.8, -0.8, 0.8, -0.8, 0.8, 0.8,
-        // Triangle 2
-        -0.8, -0.8, 0.8, 0.8, -0.8, 0.8
-      ]),
+      vertices: options.vertices,
       shader: {
         vertex: `${dataMap.value.vertex}`,
         fragment: `${dataMap.value.fragment}`

docs/components/playground/constants.ts

@@ -0,0 +1,16 @@
+import vert from './assets/vert.wgsl?raw'
+import frag from './assets/frag.wgsl?raw'
+
+export const DEFAULT_DATA = {
+  vertex: vert,
+  fragment: frag,
+  options: `(() => {
+  return {
+    vertices: new Float32Array([
+      -0.8, -0.8, 0.8, -0.8, 0.8, 0.8,
+      // Triangle 2
+      -0.8, -0.8, 0.8, 0.8, -0.8, 0.8
+    ])
+  }
+})()`
+}

docs/components/playground/index.d.ts

@@ -1 +1,3 @@
+import { DEFAULT_DATA } from './constants'
+
 export type DataMap = typeof DEFAULT_DATA

docs/components/playground/index.vue

@@ -2,14 +2,9 @@
 import { ref, useTemplateRef } from 'vue'
 import useView from './composables/use-view'
 import useEditor from './composables/use-editor/index'
-import vert from './assets/vert.wgsl?raw'
-import frag from './assets/frag.wgsl?raw'
 import { DataMap } from './index'
+import { DEFAULT_DATA } from './constants'
 
-const DEFAULT_DATA = {
-  vertex: vert,
-  fragment: frag
-}
 const dataMap = ref<DataMap>(DEFAULT_DATA)
 
 const viewRef = useTemplateRef<HTMLElement>('viewRef')