@poveste/plugin-vue 0.2.1 → 0.3.1

package/src/client/app/util.ts

@@ -90,17 +90,33 @@ function _toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = ne
  * @param externalState Reactive state created with the external/user Vue
  */
 export function syncStateBundledAndExternal(bundledState, externalState) {
+  // `syncing` means "the next firing on the other side is the echo of a write I
+  // just made, ignore it". The subtlety, and the whole of #95, is that it is
+  // only safe to set when a firing is actually coming.
+  //
+  // It used to be set unconditionally, on the assumption that every apply
+  // provokes exactly one counterpart firing. Nothing enforced that. A change
+  // `applyState` cannot express — a removed key is the simplest — provokes none,
+  // and the flag then sat set through the next genuine edit and swallowed it.
+  //
+  // What held the assumption up in practice was an accident: `applyState`
+  // rebuilt every object it copied, so any state carrying an object or an array
+  // triggered the far side whether or not a value had moved. Vue stories always
+  // carry `_hPropState` and `_hPropDefs`, so in this plugin it never actually
+  // bit — which is exactly why the issue had no repro, and why making
+  // `applyState` skip no-op writes had to come with this change rather than
+  // before it.
+  //
+  // `applyState` now reports whether it wrote, and that is what the flag holds.
   let syncing = false
 
   const _stop = _watch(() => bundledState, (value) => {
     if (value == null) return
-    if (!syncing) {
-      syncing = true
-      applyState(externalState, _toRawDeep(value))
-    }
-    else {
+    if (syncing) {
       syncing = false
+      return
     }
+    syncing = applyState(externalState, _toRawDeep(value))
   }, {
     deep: true,
     immediate: true,
@@ -108,13 +124,11 @@ export function syncStateBundledAndExternal(bundledState, externalState) {
 
   const stop = watch(() => externalState, (value) => {
     if (value == null) return
-    if (!syncing) {
-      syncing = true
-      applyState(bundledState, toRawDeep(value))
-    }
-    else {
+    if (syncing) {
       syncing = false
+      return
     }
+    syncing = applyState(bundledState, toRawDeep(value))
   }, {
     deep: true,
     immediate: true,

package/src/client/codegen.ts

@@ -56,7 +56,7 @@ async function printVNode(vnode: VNode, propsOverrides: Record<string, any> = nu
       }
       if (valueCode) {
         // Cleanup render code
-        valueCode = valueCode.replace(/^\$(setup|props|data)\./g, '')
+        valueCode = valueCode.replace(/^\$(?:setup|props|data)\./g, '')
       }
       const valueLines = valueCode ? [valueCode] : serializeAndCleanJs(dir.value)
       const attr: string[] = []

package/src/client/server/Variant.ts

@@ -1,5 +1,6 @@
 import type { ServerStory, ServerVariant } from '@poveste/shared'
-import { defineComponent, inject, type PropType } from 'vue'
+import type { PropType } from 'vue'
+import { defineComponent, inject } from 'vue'
 
 export default defineComponent({
   name: 'PovesteVariant',

package/tsconfig.json

@@ -9,7 +9,7 @@
     ],
     "rootDir": "src",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "types": [
       "node"

package/vitest.config.ts

@@ -0,0 +1,13 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      // Point at the source, not `dist`. The state-sync tests exist to catch a
+      // regression in `applyState`, and resolving the published entry would test
+      // whatever was last built instead of what is in the tree.
+      '@poveste/shared': fileURLToPath(new URL('../poveste-shared/src/index.ts', import.meta.url)),
+    },
+  },
+})