@cosystem/vue

Vue 3 bindings for CoSystem: provide/inject composables that expose a CoSystem app (or a worker-hosted app) as Vue refs.

Installation

pnpm add @cosystem/vue @cosystem/core

Peer dependency: vue >=3.5 <4.

Quick start

Install the app with the plugin (or call provideCoSystem(app) inside a parent setup), then read modules and selectors with the composables.

import { createApp as createVueApp, defineComponent, h } from "vue";
import { cosystemPlugin, useComputed, useModule } from "@cosystem/vue";

const CounterView = defineComponent({
  setup() {
    const counter = useModule(Counter);
    const count = useComputed(() => counter.count);

    return () => h("button", { onClick: () => counter.increase() }, count.value);
  },
});

createVueApp(CounterView).use(cosystemPlugin(app)).mount("#app");

Providing the app

| Function | Use from | Description | | ----------------------------- | -------------------------- | ----------------------------------------- | | cosystemPlugin(app) | app.use(...) | Provides the app for the whole Vue app. | | provideCoSystem(app) | a parent component setup | Provides the app to descendants. | | workerClientPlugin(client) | app.use(...) | Provides a WorkerClient. | | provideWorkerClient(client) | a parent setup | Provides a WorkerClient to descendants. |

Composables

| Composable | Returns | Description | | ---------------------------- | ------------------ | --------------------------- | | useApp() / useCoSystem() | App | The provided app. | | useModule(token) | T | The bound module facade. | | useSelector(fn, opts?) | Readonly<Ref<T>> | Reactive ref for fn(app). | | useComputed(fn, opts?) | Readonly<Ref<T>> | Alias of useSelector. |

const count = useSelector((app) => app.getModule(Counter).count);
const double = useComputed((app) => app.getModule(Counter).double);

Selectors accept { equals } to control updates and clean up automatically via onScopeDispose.

Worker-hosted state

import { createApp as createVueApp, defineComponent, h } from "vue";
import { useWorkerModule, useWorkerSelector, workerClientPlugin } from "@cosystem/vue";

type CounterState = { readonly counter: { readonly count: number } };

const WorkerCounterView = defineComponent({
  setup() {
    const counter = useWorkerModule<Counter>("counter");
    const count = useWorkerSelector((state) => (state as CounterState).counter.count);

    return () => h("button", { onClick: () => counter.increase() }, count.value);
  },
});

createVueApp(WorkerCounterView).use(workerClientPlugin(client)).mount("#app");

• useWorkerClient() → the provided WorkerClient.
• useWorkerModule<T>(name) → an AsyncMethodProxy<T>.
• useWorkerSelector(fn, opts?) / useWorkerComputed(fn, opts?) → Readonly<Ref<T>> of worker state.

Exports

cosystemPlugin, workerClientPlugin, provideCoSystem, provideWorkerClient, the CoSystemKey / WorkerClientKey injection keys, useApp, useCoSystem, useModule, useSelector, useComputed, useWorkerClient, useWorkerModule, useWorkerSelector, useWorkerComputed, and the UseSelectorOptions / AppSelector types. The use* composables throw a CosystemError when the app or client was never provided.

License

MIT © Coaction