@yatoi/vue

@yatoi/vue

Vue 3 bindings that observe an @yatoi/kernel through an app plugin, providers, composables, capability gates, and component-scoped plugins.

Install

npm i @yatoi/vue vue

import { createApp, defineComponent, h } from 'vue'
import { createKernel, definePlugin, defineService } from '@yatoi/kernel'
import { Requires, yatoi } from '@yatoi/vue'
import { Slot } from '@yatoi/vue/slots'
declare module '@yatoi/slots' { interface Slots { 'sidebar.item': Record<never, never> } }
const Clock = defineService<{ now(): number }>('clock')
const clock = definePlugin({ name: 'clock', provides: [Clock], setup(scope) {
  scope.provide(Clock, { now: () => Date.now() })
  scope.defer(() => console.log('clock stopped'))
} })
const kernel = createKernel()
kernel.load(clock)
const App = defineComponent(() => () => h(Requires, { of: [Clock] }, {
  default: ([value]) => [h('time', value.now()), h(Slot, { name: 'sidebar.item' })],
}))
createApp(App).use(yatoi, { kernel }).mount('#app')

Rules

• Never mutate the kernel during render or a component's setup() body; load in bootstrap, handlers, or lifecycle hooks.
• Import token symbols from one contract module; never use string literals at call sites.
• Prefer <Requires> over asserting that useService(Token).value is present.
• Define plugin objects outside components so their identity survives remounts.
• Declare the host's Slots interface once in @yatoi/slots; import renderers from @yatoi/vue/slots.

Specification · Guide · Pitfalls · Vue example

More

Use app.use(yatoi, { kernel }) for the application kernel. Reach for provideKernel or KernelProvider when a subtree needs a different kernel; Vue observes the kernel but does not own it.

MIT