@codonsplice/vue 0.2.2 → 0.2.4

package/index.js

@@ -1,10 +1,53 @@
-// @codonsplice/vue — a useSpliceQL() composable over @codonsplice/wasm.
-import { ref } from 'vue'
+// @codonsplice/vue — a useSpliceQL() composable + <SpliceEditor> over @codonsplice/wasm.
+import { ref, defineComponent, h, onMounted, onBeforeUnmount, watch } from 'vue'
 import { execute as csExecute } from '@codonsplice/wasm/helpers'
+import { mountSpliceEditor } from '@codonsplice/editor'
 
 // Re-export the core tooling so apps can `import { useSpliceQL, compile, check }
 // from '@codonsplice/vue'` without depending on @codonsplice/wasm directly.
 export { execute, stream, compile, check, ast, initEngine } from '@codonsplice/wasm/helpers'
+// Re-export the editor primitives for apps that want to mount their own view.
+export { spliceqlExtensions, mountSpliceEditor } from '@codonsplice/editor'
+
+// A controlled CodeMirror 6 SpliceQL editor. Uses v-model:
+//
+//   import { SpliceEditor } from '@codonsplice/vue'
+//   <SpliceEditor v-model="query" />
+//
+// Props/events:
+//   modelValue           — the editor's document (v-model; external changes reconciled)
+//   update:modelValue    — emitted (docString) on every edit (v-model write-back)
+export const SpliceEditor = defineComponent({
+  name: 'SpliceEditor',
+  props: { modelValue: { type: String, default: '' } },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const host = ref(null)
+    let view = null
+
+    onMounted(() => {
+      view = mountSpliceEditor(host.value, {
+        doc: props.modelValue,
+        onChange: (v) => emit('update:modelValue', v),
+      })
+    })
+
+    onBeforeUnmount(() => {
+      if (view) { view.destroy(); view = null }
+    })
+
+    // Reconcile an external modelValue change without clobbering live typing.
+    watch(() => props.modelValue, (value) => {
+      if (!view) return
+      const current = view.state.doc.toString()
+      if (value !== current) {
+        view.dispatch({ changes: { from: 0, to: current.length, insert: value ?? '' } })
+      }
+    })
+
+    return () => h('div', { ref: host })
+  },
+})
 
 export function useSpliceQL() {
   const result = ref(null)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@codonsplice/vue",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "main": "index.js",
-  "dependencies": { "@codonsplice/wasm": "^0.1.0" },
+  "dependencies": { "@codonsplice/wasm": "^0.2.4", "@codonsplice/editor": "^0.2.4" },
   "peerDependencies": { "vue": "*" },
   "license": "MIT"
 }