enso/app/gui2/mock/MockProjectStoreWrapper.vue
Paweł Grabarz b286adaae4
Split ydoc server into separate module (#10735)
# Important Notes
The command to run the gui dev environment has been changed. Invoking the old command will print a message about that.
From now on, use `pnpm dev:gui2` in repository root.
2024-08-08 12:12:05 +00:00

55 lines
1.5 KiB
Vue

<script setup lang="ts">
/**
* Mock project store, used in some histoire stories.
*/
import { useProjectStore } from '@/stores/project'
import { Ast } from '@/util/ast'
import { reactive, watch } from 'vue'
import { SourceDocument } from 'ydoc-shared/ast/sourceDocument'
const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ 'update:modelValue': [modelValue: string] }>()
const projectStore = useProjectStore()
const mod = projectStore.projectModel.createNewModule('Main.enso')
projectStore.setObservedFileName('Main.enso')
mod.doc.ydoc.emit('load', [mod.doc.ydoc])
let syncedCode: string | undefined
watch(
() => projectStore.module,
(mod) => {
if (!mod) return
const syncModule = new Ast.MutableModule(mod.doc.ydoc)
applyEdits(syncModule, props.modelValue)
const moduleSource = reactive(SourceDocument.Empty())
syncModule.observe((update) => moduleSource.applyUpdate(syncModule, update))
watch(
() => moduleSource.text,
(text) => {
if (text !== props.modelValue) {
syncedCode = text
emit('update:modelValue', text)
}
},
)
watch(
() => props.modelValue,
(modelValue) => applyEdits(syncModule, modelValue),
)
},
)
function applyEdits(syncModule: Ast.MutableModule, newText: string) {
if (newText !== syncedCode) {
syncModule.transact(() => {
syncModule.syncRoot(Ast.parseBlock(newText, syncModule))
})
}
}
</script>
<template>
<slot></slot>
</template>