Boolean breaks interface

[JBtje]

Describe the bug

Add a boolean type prop to your component, select the checkbox in the histoire interface and obtain the below error:

Error: Cannot use 'in' operator to search for 'onUpdate:show' in null

it's not related to v-show, or v-if. Having the boolean on its own and selecting it, triggers the error.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-tkzdzp

System Info

Browsers:
    Chrome: 121.0.6167.161
  npmPackages:
    @histoire/plugin-vue: ^0.17.11 => 0.17.11
    @vitejs/plugin-vue: ^5.0.3 => 5.0.3
    histoire: ^0.17.9 => 0.17.9
    vite: ^5.0.12 => 5.0.12

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• histoire-vue3-starter-tkzdzp (Open reproduction)

[DrJume]

We also experienced this bug. It only breaks the SourceCodePreview and it only happens, when no attributes or props are set on a the component of the story:

<Story>
  <MyComponent></MyComponent>
</Story>

Even setting an aria-label="test" makes it work again.

The issue lies here:

histoire/packages/histoire-plugin-vue/src/client/codegen.ts

Lines 123 to 124 in 692e6f5

	// @ts-ignore
	const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key) || key in vnode.props)

Because @ts-ignore is set and the project doesn't use TypeScript strict mode, the access to vnode.props is not marked as unsafe, as it can be null!

Just checking if vnode.props is truthy is enough to fix the bug:

- // @ts-ignore
- const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key) || key in vnode.props)
+ const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key) || (vnode.props && key in vnode.props))

Sadly the source code in the npm package is minified, but we still managed to patch it with pnpm:

diff --git a/dist/bundled/client/codegen.js b/dist/bundled/client/codegen.js
index 6b922b51e716d6e5df1d0efd8358cbbf36f656c5..13ccbaa62998ae2b7e7934b6303a20dd74223249 100644
--- a/dist/bundled/client/codegen.js
+++ b/dist/bundled/client/codegen.js
@@ -38,7 +38,7 @@ async function k(e, o = null) {
         t.startsWith("on") && (f = "@");
         const L = f === "@" ? `${t[2].toLowerCase()}${t.slice(3)}` : t, M = [`onUpdate:${t}`, `onUpdate:${N(t)}`].find((p) => {
           var $;
-          return (($ = e.dynamicProps) == null ? void 0 : $.includes(p)) || p in e.props;
+          return (($ = e.dynamicProps) == null ? void 0 : $.includes(p)) || (e.props && p in e.props);
         });
         if (f === ":" && M) {
           j.push(M);