Describe the bug Add a boolean type prop to your component, select

<a href="https://stackblitz.com/~/github.com/histoire-dev/histoire/issues/686?repros=h

Boolean breaks interface about histoire HOT 2 CLOSED

JBtje commented on July 17, 2024

Boolean breaks interface

from histoire.

Comments (2)

stackblitz commented on July 17, 2024

Start a new pull request in StackBlitz Codeflow.

histoire-vue3-starter-tkzdzp (Open reproduction)

from histoire.

DrJume commented on July 17, 2024

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);

from histoire.

Recommend Projects