Skip to content

Latest commit

 

History

History
24 lines (19 loc) · 1.27 KB

File metadata and controls

24 lines (19 loc) · 1.27 KB
@dunky.dev/vue-state-machine minor

Add the Vue 3 bindings package (@dunky.dev/vue-state-machine). It mirrors the React package's API one-for-one — useMachine, useSelector, normalize, mergeProps, and the ComponentEffect type — implemented with Vue's reactivity: useMachine builds the machine + connector once in setup(), runs start/stop on the mount lifecycle, pushes prop changes through setProps, runs each ComponentEffect as its own dep-keyed watch, and exposes the connector snapshot as a ComputedRef; useSelector returns a value-deduped readonly ref; normalize translates the agnostic bindings to Vue DOM/ARIA props; mergeProps merges consumer + component props with Vue's class/style conventions.

<script setup lang="ts">
import { useAttrs } from 'vue'
import { useMachine, normalize, mergeProps } from '@dunky.dev/vue-state-machine'
import { toggleMachineConfig, connectToggle, toggleEffects, type ToggleProps } from './toggle'

const props = defineProps<ToggleProps>()
const attrs = useAttrs()

const { api } = useMachine(toggleMachineConfig, connectToggle, toggleEffects, props)
</script>

<template>
  <button v-bind="mergeProps(attrs, normalize(api.parts.trigger))">
    {{ api.pressed ? 'On' : 'Off' }}
  </button>
</template>