feat(collaborative-vue): Vue.js composables, components & context for json-joy CRDTs

[mmamedel]

What

Adds @jsonjoy.com/collaborative-vue — the Vue 3 counterpart of @jsonjoy.com/collaborative-react, mirroring its surface and naming: composables, provide/inject context helpers, and render-prop components for binding Vue UI to json-joy CRDT models and nodes.

Note

Supersedes the earlier approach in this PR. The first revision was a writable-proxy binding built on a proposed .w core API (#1040). Per the feedback on #1040 — that the existing verbs already cover every write and are more precise — this PR was rewritten to build entirely on json-joy's existing public API. There are no changes to json-joy core, and the branch no longer depends on #1040.

import {Model} from 'json-joy/lib/json-crdt';
import {provideModel, useModelView, useStr} from '@jsonjoy.com/collaborative-vue';

const model = Model.create({title: 'Hello'});
provideModel(model);

const root = useModelView(model);            // ShallowRef<view> — reactive snapshot
const title = useStr(['title'], model.api);  // ShallowRef<StrApi | undefined>

// reads are reactive; writes are plain json-joy verbs
title.value?.ins(title.value.view().length, '!');

Surface (mirrors collaborative-react)

Module	React analog	Exports
context.ts	context.tsx	createNodeCtx, provideModel/provideNode, useCtx{Model,Node}[Strict], <ModelProvider>/<NodeProvider>
composables.ts	hooks.ts	useModelTick/useModelView/useModel/useModelTry; useNodeEvents/useNodeEffect/useNodeChange/useNode/useNodeView; usePath/usePathView/useObj/useArr/useStr
components.ts	components.ts	<UseModel> / <UseNode> (scoped-slot render props)
types.ts / utils.ts	same	CrdtNodeApi, selectNode

Design

• Reads are reactive, writes are plain verbs. Composables return Vue refs/computed; you mutate with json-joy's existing node API (obj.set/del, str.ins, arr.push/upd/del, …). The binding adds no write abstraction, so the full precise CRDT API stays available (set vs merge, character-level text ops, etc.).
• Granularity is explicit via the event arg — 'self' | 'child' | 'subtree' — just like React.
• React → Vue adaptation. Node/path composables triggerRef on every matching change, so a stable node handle still re-notifies dependents (React re-renders on change regardless of return identity). useModelView is identity-gated (re-renders only when the view object changes); useModelTick/useModelView buffer on a microtask, node events fire synchronously.
• Auto-teardown of subscriptions via onScopeDispose when used inside a component/effectScope.

Tests

11 tests, all green:

• composables.spec.ts — useModelView/useModelTick reactivity + microtask flush, useStr resolve+read+in-place edit, usePath missing→present, useNodeView, scope teardown (run under effectScope).
• context.spec.ts — ModelProvider provide/inject, strict-context throws, UseModel/UseNode render and update on change (mounted in jsdom).

Builds via the root solution tsc -b.

Follow-up

A small stacked PR will add an optional high-level collaborate() proxy (plain-object reads + v-model two-way binding) built on top of these composables — keeping the project's layering (node API ← composables ← optional sugar) instead of competing with it.