@codonsplice/wasm 0.2.2 → 0.2.4

package/astro/index.js

@@ -4,3 +4,8 @@
 // helpers; use them inside a client:* island (or any of the framework wrappers
 // for reactive state).
 export { execute, stream, compile, check, ast, initEngine, CodonSplice } from '@codonsplice/wasm/helpers'
+
+// Re-export the SpliceQL editor primitives. Astro islands mount the editor with
+// `mountSpliceEditor(el, { doc, onChange })` inside a <script> / client:* island,
+// or compose `spliceqlExtensions()` into a custom CodeMirror view.
+export { mountSpliceEditor, spliceqlExtensions } from '@codonsplice/editor'

package/astro/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@codonsplice/astro",
-  "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" },
   "license": "MIT"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codonsplice/wasm",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "CodonSplice — run SpliceQL genomic queries (BAM/VCF) in the browser via WASM",
   "type": "module",
   "main": "codonsplice_wasm.js",

package/react/index.js

@@ -1,10 +1,54 @@
-// @codonsplice/react — a useSpliceQL() hook over @codonsplice/wasm.
-import { useState, useCallback } from 'react'
+// @codonsplice/react — a useSpliceQL() hook + <SpliceEditor> over @codonsplice/wasm.
+import { useState, useCallback, useRef, useEffect, createElement } from 'react'
 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/react'` 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.
+//
+//   import { SpliceEditor } from '@codonsplice/react'
+//   <SpliceEditor value={query} onChange={setQuery} className="editor" style={{ height: 240 }} />
+//
+// Props:
+//   value     — the editor's document (controlled; external changes are reconciled)
+//   onChange  — (docString) => void, fired on every edit
+//   className — passed to the host <div>
+//   style     — passed to the host <div>
+export function SpliceEditor({ value = '', onChange, className, style }) {
+  const host = useRef(null)
+  const viewRef = useRef(null)
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  useEffect(() => {
+    const view = mountSpliceEditor(host.current, {
+      doc: value,
+      onChange: (v) => { onChangeRef.current && onChangeRef.current(v) },
+    })
+    viewRef.current = view
+    return () => { view.destroy(); viewRef.current = null }
+    // Mount once; external value changes are reconciled by the effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Reconcile a controlled `value` that diverges from the editor's contents
+  // (e.g. set programmatically), without clobbering in-progress typing.
+  useEffect(() => {
+    const view = viewRef.current
+    if (!view) return
+    const current = view.state.doc.toString()
+    if (value !== current) {
+      view.dispatch({ changes: { from: 0, to: current.length, insert: value ?? '' } })
+    }
+  }, [value])
+
+  return createElement('div', { ref: host, className, style })
+}
 
 export function useSpliceQL() {
   const [result, setResult] = useState(null)

package/react/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@codonsplice/react",
-  "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": { "react": "*" },
   "license": "MIT"
 }

package/svelte/index.js

@@ -1,10 +1,42 @@
-// @codonsplice/svelte — a createSpliceQL() store factory over @codonsplice/wasm.
+// @codonsplice/svelte — a createSpliceQL() store factory + spliceEditor action
+// over @codonsplice/wasm.
 import { writable } from 'svelte/store'
 import { execute as csExecute } from '@codonsplice/wasm/helpers'
+import { mountSpliceEditor } from '@codonsplice/editor'
 
 // Re-export the core tooling so apps can `import { createSpliceQL, compile,
 // check } from '@codonsplice/svelte'` without depending on @codonsplice/wasm.
 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 Svelte action that mounts a CodeMirror 6 SpliceQL editor into the node:
+//
+//   <script>
+//     let query = 'FROM bam "x.bam" CALL variants'
+//   </script>
+//   <div use:spliceEditor={{ value: query, onChange: (v) => (query = v) }} />
+//
+// Params:
+//   value    — the editor's initial/controlled document (external changes reconciled)
+//   onChange — (docString) => void, fired on every edit
+export function spliceEditor(node, { value = '', onChange } = {}) {
+  const view = mountSpliceEditor(node, {
+    doc: value,
+    onChange: (v) => { onChange && onChange(v) },
+  })
+  return {
+    // Reconcile an external `value` change without clobbering live typing.
+    update({ value: next = '', onChange: nextOnChange } = {}) {
+      onChange = nextOnChange
+      const current = view.state.doc.toString()
+      if (next !== current) {
+        view.dispatch({ changes: { from: 0, to: current.length, insert: next ?? '' } })
+      }
+    },
+    destroy() { view.destroy() },
+  }
+}
 
 export function createSpliceQL() {
   const result = writable(null)

package/svelte/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@codonsplice/svelte",
-  "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": { "svelte": "*" },
   "license": "MIT"
 }

package/vue/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/vue/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"
 }