@poveste/plugin-vue 0.14.0 → 0.16.0

package/src/client/app/__tests__/preview-variants.spec.ts

@@ -0,0 +1,76 @@
+import type { Story as StoryData, Variant as VariantData } from '@poveste/shared'
+import type { Component } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { createSSRApp, defineComponent, h, reactive } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import { provideRenderContext } from '../render-context.js'
+import Story from '../Story.js'
+import Variant from '../Variant.js'
+
+const COUNT = 50
+
+function storyData(): StoryData {
+  const variants = Array.from({ length: COUNT }, (_, i) => ({ id: `v${i + 1}`, title: `Variant ${i + 1}`, state: {} })) as VariantData[]
+  // `hasVariantChildComponents` is what every explicit <Variant> sets as it renders,
+  // so this is the story as a retarget finds it: past its first render.
+  return reactive({ id: 'grid', title: 'Grid', variants, meta: { hasVariantChildComponents: true } }) as unknown as StoryData
+}
+
+/** Renders `storyComponent` for `target` in a render context, and counts the Variant components created. */
+async function renderPreview(storyComponent: Component, story: StoryData, target: string) {
+  let variantsCreated = 0
+  const currentVariant = story.variants.find(variant => variant.id === target) ?? null
+  const app = createSSRApp(defineComponent({
+    setup() {
+      provideRenderContext(reactive({ mode: 'render', slotName: 'default', currentVariant, externalState: {}, nextVariantIndex: { value: 0 } }))
+      return () => h(storyComponent, { story })
+    },
+  }))
+  app.mixin({
+    beforeCreate() {
+      if (this.$options.name === 'Variant') {
+        variantsCreated++
+      }
+    },
+  })
+  const html = await renderToString(app)
+  return { html, variantsCreated }
+}
+
+const button = (n: number) => h('button', `Button ${n}`)
+
+describe('a preview render of one variant', () => {
+  // #873: gated on `hasVariantChildComponents`, the filter below never ran after a
+  // story's first render, and every retarget rendered all N Variant components.
+  it('creates only the target Variant when every variant is a direct child', async () => {
+    const DirectStory = defineComponent({
+      props: { story: { type: Object, required: true } },
+      setup: props => () => h(Story, { story: props.story }, {
+        default: () => Array.from({ length: COUNT }, (_, i) => h(Variant, { key: i }, { default: () => button(i + 1) })),
+      }),
+    })
+
+    const { html, variantsCreated } = await renderPreview(DirectStory, storyData(), 'v37')
+
+    expect(variantsCreated).toBe(1)
+    expect(html).toContain('Button 37')
+    expect(html).not.toContain('Button 36<')
+  })
+
+  // A walk of the slot's vnodes cannot see a <Variant> inside a child component,
+  // so positions would not line up with `story.variants`, and every one renders.
+  it('still renders every Variant when they live in a child component', async () => {
+    const Rows = defineComponent({
+      setup: () => () => Array.from({ length: COUNT }, (_, i) => h(Variant, { key: i }, { default: () => button(i + 1) })),
+    })
+    const WrappedStory = defineComponent({
+      props: { story: { type: Object, required: true } },
+      setup: props => () => h(Story, { story: props.story }, { default: () => h(Rows) }),
+    })
+
+    const { html, variantsCreated } = await renderPreview(WrappedStory, storyData(), 'v37')
+
+    expect(variantsCreated).toBe(COUNT)
+    expect(html).toContain('Button 37')
+  })
+})

package/src/client/app/__tests__/state-sync.spec.ts

@@ -1,7 +1,7 @@
 import { autoPropsStateKeys } from '@poveste/shared'
-import { nextTick as bundledNextTick, reactive as bundledReactive } from '@poveste/vendors/vue'
+import { nextTick as bundledNextTick, reactive as bundledReactive, ref as bundledRef } from '@poveste/vendors/vue'
 import { describe, expect, it } from 'vitest'
-import { nextTick, reactive, watch } from 'vue'
+import { markRaw, nextTick, reactive, ref, watch } from 'vue'
 import { syncStateBundledAndExternal } from '../util.js'
 
 // These run against both Vue copies for real: `@poveste/vendors/vue` is the one
@@ -41,6 +41,82 @@ describe('syncStateBundledAndExternal', () => {
     sync.stop()
   })
 
+  // Each side's walker recurses with its own copy's `isRef`, and the bundled
+  // one used to hand its whole subtree to the external walker — so below the
+  // first level, bundled state was walked by the wrong copy of Vue. Nothing
+  // observable came of it, because `isRef` reads `__v_isRef` rather than an
+  // identity and either copy answers for the other's ref; this pins the
+  // recursion either way, which is coverage the bridge did not have.
+  it('unwraps a ref nested below the first level, on both sides', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    bundled.deep = { inner: { value: bundledRef('from bundled') } }
+    await settle()
+    expect(external.deep.inner.value).toBe('from bundled')
+
+    external.other = { inner: { value: ref('from external') } }
+    await settle()
+    expect(bundled.other.inner.value).toBe('from external')
+
+    sync.stop()
+  })
+
+  // Both walkers rebuilt every object from its own enumerable keys, so a `Date`
+  // crossed as `{}` — and the baseline's `isEquivalent`, which refuses to
+  // compare anything that is not plain precisely so two distinct `Date`s are
+  // never called equal, was handed two empty plain objects instead (#977).
+  it('carries a Date across, rather than emptying it', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    external.at = new Date(1790071200000)
+    await settle()
+
+    expect(bundled.at).toBeInstanceOf(Date)
+    expect(bundled.at.getTime()).toBe(1790071200000)
+
+    sync.stop()
+  })
+
+  it('carries a Map and a class instance the same way', async () => {
+    class Point {
+      constructor(public x: number, public y: number) {}
+      get len() { return Math.hypot(this.x, this.y) }
+    }
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    external.m = new Map([['a', 1]])
+    external.p = new Point(3, 4)
+    await settle()
+
+    expect(bundled.m).toBeInstanceOf(Map)
+    expect(bundled.m.get('a')).toBe(1)
+    // In one realm the reference crosses, so the prototype survives too — which
+    // the sandbox bridge cannot promise and does not (#977).
+    expect(bundled.p.len).toBe(5)
+
+    sync.stop()
+  })
+
+  // The half the walker was destroying upstream of: two different dates must
+  // not settle as equivalent, or an edit is dropped rather than mirrored.
+  it('mirrors a change from one Date to another', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    external.at = new Date(1790071200000)
+    await settle()
+
+    external.at = new Date(0)
+    await settle()
+
+    expect(bundled.at.getTime()).toBe(0)
+
+    sync.stop()
+  })
+
   it('stops mirroring once stopped', async () => {
     const { bundled, external, sync } = setup({ count: 0 })
     await settle()
@@ -385,3 +461,38 @@ describe('keys the sync is told to omit', () => {
     sync.stop()
   })
 })
+
+describe('a binding Vue has marked raw', () => {
+  // Not `setup()` above: that clones its argument, and `structuredClone` is
+  // exactly what a mark does not survive.
+  function setupWithGraph() {
+    const graph = markRaw({ nodes: { deep: 1 } })
+    const bundled = bundledReactive<Record<string, any>>({ text: '', graph })
+    const external = reactive<Record<string, any>>({ text: '' })
+    const sync = syncStateBundledAndExternal(bundled, external)
+    return { bundled, external, sync, graph }
+  }
+
+  it('crosses between the two Vues as itself, not as a rebuilt copy', async () => {
+    const { external, sync, graph } = setupWithGraph()
+    await settle()
+
+    // Both sides live in one realm, so the reference is the useful thing to
+    // hand over — and handing it over is what lets the compare settle on
+    // identity instead of walking whatever is behind it (#957).
+    expect(external.graph).toBe(graph)
+    sync.stop()
+  })
+
+  it('stays that object over later passes, and does not hold up the keys beside it', async () => {
+    const { bundled, external, sync, graph } = setupWithGraph()
+    await settle()
+
+    bundled.text = 'a'
+    await settle()
+
+    expect(external.graph).toBe(graph)
+    expect(external.text).toBe('a')
+    sync.stop()
+  })
+})

package/src/client/app/__tests__/writable-binding.spec.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { computed, readonly, ref, shallowRef, useTemplateRef } from 'vue'
+import { isWritableBinding } from '../util.js'
+
+// `useTemplateRef` returns a readonly ref in a dev build and a writable one in a
+// production build, so this file is the only place the defect in #959 can be
+// caught: vitest runs the dev build, and the e2e suites serve built books where
+// the bug does not exist.
+
+describe('isWritableBinding', () => {
+  it('rejects the ref useTemplateRef returns, which is what loops the sync', () => {
+    expect(isWritableBinding(useTemplateRef('el'))).toBe(false)
+  })
+
+  it('rejects a readonly ref however it was made', () => {
+    expect(isWritableBinding(readonly(ref(0)))).toBe(false)
+    expect(isWritableBinding(readonly(shallowRef(null)))).toBe(false)
+  })
+
+  // Same rule, and the reason is the same: a control that cannot write is not a
+  // control. Called out because it is a behaviour change beyond the defect.
+  it('rejects a computed, which could never take the write either', () => {
+    expect(isWritableBinding(computed(() => 1))).toBe(false)
+  })
+
+  // The shape every existing story uses for a template ref, which has to keep
+  // working — a story that writes its own state through one still syncs.
+  it('accepts the pre-3.5 ref(null) form', () => {
+    expect(isWritableBinding(ref(null))).toBe(true)
+    expect(isWritableBinding(shallowRef(null))).toBe(true)
+  })
+
+  it('accepts ordinary bindings, ref and plain alike', () => {
+    expect(isWritableBinding(ref(0))).toBe(true)
+    expect(isWritableBinding({ a: 1 })).toBe(true)
+    expect(isWritableBinding('text')).toBe(true)
+    expect(isWritableBinding(undefined)).toBe(true)
+  })
+})

package/src/client/app/auto-props.ts

@@ -52,7 +52,7 @@ function visitVNodes(vnodes: any, externalState: Variant['state'], traversalStat
 
       for (const key of names) {
         const prop = Array.isArray(declared) ? undefined : declared[key]
-        let types
+        let types: string[] | undefined
         let defaultValue
 
         if (prop) {
@@ -169,7 +169,7 @@ function normalizeVNodes(vnodes: any) {
     return vnodes == null ? [] : [vnodes]
   }
 
-  const result = []
+  const result: any[] = []
 
   for (const vnode of vnodes) {
     if (Array.isArray(vnode)) {

package/src/client/app/context.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef } from 'vue'
+import { createContext } from '../context.js'
+
+/*
+ * App mode's contexts. Both are optional, and both were guarded by hand before
+ * being able to say so (#981).
+ */
+
+/** The story a variant belongs to. Read with `?.` throughout. */
+export const storyContext = createContext<ComputedRef<any>>('poveste-app-story', '<Story>')
+
+/**
+ * The story's implicit state, absent when the story has none. A variant skips
+ * its state sync rather than failing, which is behaviour rather than an
+ * oversight — this is the type saying so.
+ */
+export const implicitStateContext = createContext<() => any>('poveste-app-implicit-state', '<Story>')

package/src/client/app/global-components.ts

@@ -1,5 +1,6 @@
 import type {
   App as _App,
+  Component as _Component,
 } from '@poveste/vendors/vue'
 import type {
   App,
@@ -27,14 +28,19 @@ export function registerGlobalComponents(app: App) {
 
   app.component('Variant', Variant)
 
-  for (const key in components) {
-    app.component(key, wrapControlComponent(components[key]))
+  for (const [key, component] of Object.entries(components)) {
+    app.component(key, wrapControlComponent(component))
   }
 }
 
-function wrapControlComponent(controlComponent) {
+function wrapControlComponent(controlComponent: (typeof components)[keyof typeof components]) {
+  // Which control this is decides at runtime, and its props are the story's untyped
+  // attrs, so it renders through Vue's dynamic `Component` rather than a union of every
+  // control's props, where a slider would be claimed renderable without `min` (#835).
+  const dynamicControl: _Component = controlComponent
+
   return defineComponent({
-    name: controlComponent.name,
+    ...controlComponent.name ? { name: controlComponent.name } : {},
     inheritAttrs: false,
     setup(props, { attrs }) {
       const el = ref<HTMLDivElement>()
@@ -44,7 +50,7 @@ function wrapControlComponent(controlComponent) {
 
       const state = _reactive({})
 
-      function applyState(data) {
+      function applyState(data: Record<string, unknown>) {
         Object.assign(state, data)
       }
 
@@ -55,15 +61,15 @@ function wrapControlComponent(controlComponent) {
 
       // Slots
 
-      let newSlotCalls = []
-      const slotCalls = ref([])
+      let newSlotCalls: Record<string, unknown>[] = []
+      const slotCalls = ref<Record<string, unknown>[]>([])
 
       function moveSlotContent() {
         slotCalls.value.forEach((props, index) => {
-          const renderedEl = slotEl.value.querySelector(`[renderslotid="${index}"]`)
-          if (!renderedEl) return
-          const targetEl = el.value.querySelector(`[slotid="${index}"]`)
-          while (targetEl.firstChild) {
+          const renderedEl = slotEl.value?.querySelector(`[renderslotid="${index}"]`)
+          const targetEl = el.value?.querySelector(`[slotid="${index}"]`)
+          if (!renderedEl || !targetEl) return
+          while (targetEl.lastChild) {
             targetEl.removeChild(targetEl.lastChild)
           }
           targetEl.appendChild(renderedEl)
@@ -85,11 +91,11 @@ function wrapControlComponent(controlComponent) {
             newSlotCalls = []
           },
           render() {
-            return _h(controlComponent, {
+            return _h(dynamicControl, {
               ...state,
               key: 'component',
             }, {
-              default: (props) => {
+              default: (props: Record<string, unknown>) => {
                 newSlotCalls.push(props)
                 return _h('div', {
                   slotId: newSlotCalls.length - 1,
@@ -124,7 +130,7 @@ function wrapControlComponent(controlComponent) {
           ref: 'slotEl',
         }, this.slotCalls.map((props, index) => h('div', {
           renderSlotId: index,
-        }, this.$slots.default(props)))),
+        }, this.$slots['default']?.(props)))),
       ]
     },
   })

package/src/client/app/host.ts

@@ -45,15 +45,17 @@ const PreviewHostRoot = defineComponent({
   setup(props) {
     provideRenderContext(props.renderContext)
 
-    return () => h(props.story.file.component, {
-      story: props.story,
-    })
+    return () => props.story.file
+      ? h(props.story.file.component, {
+          story: props.story,
+        })
+      : null
   },
 })
 
 export function createPreviewHost(options: PreviewHostOptions) {
-  let app: App = null
-  let target: HTMLDivElement = null
+  let app: App | null = null
+  let target: HTMLDivElement | null = null
 
   async function mount() {
     const wrappers: Component[] = []
@@ -103,7 +105,8 @@ export function createPreviewHost(options: PreviewHostOptions) {
     const setupApi: Vue3StorySetupApi = {
       app,
       story: options.getStory(),
-      variant: options.getVariant(),
+      // The setup API declares `variant` optional, not nullable.
+      variant: options.getVariant() ?? undefined,
       addWrapper: (wrapper) => {
         wrappers.unshift(wrapper)
       },

package/src/client/app/render-context.ts

@@ -1,6 +1,5 @@
 import type { Variant } from '@poveste/shared'
-import type { InjectionKey } from 'vue'
-import { inject, provide } from 'vue'
+import { createContext } from '../context.js'
 
 export interface PreviewRenderContext {
   mode: 'mount' | 'render'
@@ -12,18 +11,39 @@ export interface PreviewRenderContext {
    * app realm, where the story view needs all of them mounted.
    */
   targetVariantId?: string | null
+  /**
+   * Whether this mount pass owns the live state sync for its variants.
+   *
+   * False in a sandbox realm, where the render tree beside it already syncs the
+   * same `variant.state` against the same story's bindings. Two syncs over one
+   * state is two deep watchers walking the whole graph on every edit, and a
+   * story holding a large one pays for both: #964 measured the sandbox running
+   * three syncs where the app realm runs one.
+   *
+   * The app realm keeps it. Its mount pass is the only thing that fills
+   * `variant.state` there — with no controls slot nothing renders, so nothing
+   * else would — and that is what the controls panel builds from.
+   */
+  syncState?: boolean
   externalState: Variant['state'] | null
   nextVariantIndex: {
     value: number
   }
 }
 
-const previewRenderContextKey: InjectionKey<PreviewRenderContext> = Symbol('poveste-preview-render-context')
+/*
+ * This one was already a typed symbol with its provide and inject together —
+ * it was the pattern the other six were measured against (#981). It goes
+ * through the shared helper so the package has one shape rather than two,
+ * which is the mistake #978 is about, in miniature.
+ */
+const renderContext = createContext<PreviewRenderContext>('poveste-preview-render-context', '<Story>')
 
 export function provideRenderContext(value: PreviewRenderContext) {
-  provide(previewRenderContextKey, value)
+  renderContext.provide(value)
 }
 
+/** Null outside a preview, which several call sites read with `?.`. */
 export function useRenderContext() {
-  return inject(previewRenderContextKey, null)
+  return renderContext.injectOptional()
 }

package/src/client/app/util.ts

@@ -1,17 +1,31 @@
-import { applyState, createStateBaseline } from '@poveste/shared'
+import type { ComponentInternalInstance } from 'vue'
+import { applyState, createStateBaseline, isMarkedRaw, isPlainObject } from '@poveste/shared'
 import {
   isRef as _isRef,
   unref as _unref,
   watch as _watch,
 } from '@poveste/vendors/vue'
-import { isRef, unref, watch } from 'vue'
+import { getCurrentInstance, isReadonly, isRef, markRaw, unref, watch } from 'vue'
 
-const isObject = val => val !== null && typeof val === 'object'
+const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
 
+/**
+ * A value Vue has marked raw is carried by reference rather than rebuilt.
+ *
+ * Both sides of this bridge live in one realm, so the reference is the useful
+ * thing to hand over: the baseline then holds the same identity the next pass
+ * reads, `isEquivalent` settles it by `Object.is`, and nothing walks whatever
+ * is behind it. Rebuilding it was ten of the twenty traversals a keystroke
+ * cost (#957).
+ *
+ * The bridge that leaves this realm cannot do the same — see `toRawDeep` in
+ * `poveste-app`, where the mark does not survive the crossing and the key is
+ * dropped instead.
+ */
 /**
  * Using external/user Vue
  */
-export function toRawDeep(val, seen = new WeakMap()) {
+export function toRawDeep(val: unknown, seen = new WeakMap()): any {
   const unwrappedValue = isRef(val) ? unref(val) : val
 
   if (typeof unwrappedValue === 'symbol') {
@@ -22,12 +36,34 @@ export function toRawDeep(val, seen = new WeakMap()) {
     return unwrappedValue
   }
 
+  if (isMarkedRaw(unwrappedValue)) {
+    return unwrappedValue
+  }
+
   if (seen.has(unwrappedValue)) {
     return seen.get(unwrappedValue)
   }
 
+  if (!Array.isArray(unwrappedValue) && !isPlainObject(unwrappedValue)) {
+    // A `Date`, a `Map`, a class instance. Both sides of this bridge live in
+    // one realm, so the reference is the useful thing to hand over — the same
+    // answer `copyState` in `@poveste/shared` gives. Rebuilding it as a plain
+    // object emptied it: a `Date` has no own enumerable keys, so it arrived as
+    // `{}`, and the baseline's `isEquivalent` was handed two of those and
+    // called them equivalent (#977).
+    //
+    // Marked on the way through, which is not decoration. `applyState` writes
+    // this into the other Vue's reactive graph, and a reference to something
+    // like a Nuxt app instance — which a `<script setup>` binding can be — is
+    // then deep-watched: `useNuxtApp()` in a story recursed until the stack
+    // gave out. Flattening used to bound that by accident. `markRaw` bounds it
+    // deliberately, and is the treatment #974 already gives a value that must
+    // cross by reference.
+    return markRaw(unwrappedValue)
+  }
+
   if (Array.isArray(unwrappedValue)) {
-    const result = []
+    const result: unknown[] = []
     seen.set(unwrappedValue, result)
     result.push(...unwrappedValue.map(value => toRawDeep(value, seen)))
     return result
@@ -49,7 +85,7 @@ function toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = new
 /**
  * Using bundled Vue
  */
-export function _toRawDeep(val, seen = new WeakMap()) {
+export function _toRawDeep(val: unknown, seen = new WeakMap()): any {
   const unwrappedValue = _isRef(val) ? _unref(val) : val
 
   if (typeof unwrappedValue === 'symbol') {
@@ -60,12 +96,27 @@ export function _toRawDeep(val, seen = new WeakMap()) {
     return unwrappedValue
   }
 
+  if (isMarkedRaw(unwrappedValue)) {
+    return unwrappedValue
+  }
+
   if (seen.has(unwrappedValue)) {
     return seen.get(unwrappedValue)
   }
 
+  if (!Array.isArray(unwrappedValue) && !isPlainObject(unwrappedValue)) {
+    // A `Date`, a `Map`, a class instance. Both sides of this bridge live in
+    // one realm, so the reference is the useful thing to hand over — the same
+    // answer given to a marked value just above, and the same one `copyState`
+    // in `@poveste/shared` gives. Rebuilding it as a plain object emptied it: a
+    // `Date` has no own enumerable keys, so it arrived as `{}`, and the
+    // baseline's `isEquivalent` was handed two of those and called them
+    // equivalent (#977). Marked for the reason given on the walker above.
+    return markRaw(unwrappedValue)
+  }
+
   if (Array.isArray(unwrappedValue)) {
-    const result = []
+    const result: unknown[] = []
     seen.set(unwrappedValue, result)
     result.push(...unwrappedValue.map(value => _toRawDeep(value, seen)))
     return result
@@ -78,9 +129,22 @@ export function _toRawDeep(val, seen = new WeakMap()) {
   }
 }
 
+/**
+ * `_toRawDeep`, not `toRawDeep`: this is the bundled Vue's walker, and handing
+ * the subtree to the external one meant only the top level was ever walked by
+ * the copy of Vue that owns it.
+ *
+ * Nothing observable changes today, which is why it survived. The two walkers
+ * differ only in whose `isRef`/`unref` they call, and `isRef` is a read of
+ * `__v_isRef` — a property, not an identity — so either copy answers correctly
+ * for a ref the other created. It is fixed as a trap rather than as a defect:
+ * the next rule that lands on one walker and not the other would apply to the
+ * first level of bundled state and to nothing beneath it, and the diff would
+ * look right.
+ */
 function _toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = new WeakMap()) {
   Object.keys(obj).forEach((key) => {
-    target[key] = toRawDeep(obj[key], seen)
+    target[key] = _toRawDeep(obj[key], seen)
   })
 }
 
@@ -103,7 +167,7 @@ function without(state: Record<string, any>, omit: string[]): Record<string, any
  * @param externalState Reactive state created with the external/user Vue
  * @param omit Keys neither side may learn from the other
  */
-export function syncStateBundledAndExternal(bundledState, externalState, omit: string[] = []) {
+export function syncStateBundledAndExternal(bundledState: Record<string, any>, externalState: Record<string, any>, omit: string[] = []) {
   // Each side is asked only for what *it* changed, and that is all that crosses.
   //
   // Both watchers used to mirror the whole of their side. That works while the
@@ -146,3 +210,34 @@ export function syncStateBundledAndExternal(bundledState, externalState, omit: s
     },
   }
 }
+
+/** The component being set up. Throws outside `setup`, where Vue returns null. */
+/**
+ * Whether a `<script setup>` binding can be story state a control drives.
+ *
+ * A readonly ref cannot: the write-back is refused, so the two sides of the
+ * bridge never agree on it and the sync re-walks forever (#959). `useTemplateRef`
+ * returns one — in dev builds only, which is why a built book is quiet and the
+ * mode story authors work in is not.
+ *
+ * It has to be asked of the ref rather than of what the ref holds. The guard
+ * beside this one tests the value, and a value test cannot classify a template
+ * ref at all: at setup time it holds `null`, and what it will hold later is not
+ * knowable from here. Readonly-ness is a property of the ref itself and is
+ * settled by the time the binding is registered.
+ *
+ * A `computed` is caught by the same rule and for the same reason — it is a
+ * derived value, and a control that cannot write is not a control. Before this
+ * it appeared in the panel and warned when written.
+ */
+export function isWritableBinding(value: unknown): boolean {
+  return !(isRef(value) && isReadonly(value))
+}
+
+export function useInstance(name: string): ComponentInternalInstance {
+  const vm = getCurrentInstance()
+  if (!vm) {
+    throw new Error(`[poveste] <${name}> can only be set up inside a component`)
+  }
+  return vm
+}