@vueless/storybook 0.0.75-beta.12 → 0.0.75-beta.14

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,8 +1,10 @@
 import { addons, makeDecorator, useArgs } from "storybook/preview-api";
+import { SNIPPET_RENDERED } from "storybook/internal/docs-tools";
 import { h, onMounted, watch } from "vue";
 
 const params = new URLSearchParams(window.location.search);
 let previousStoryId = null;
+let previousArgs = {};
 
 function getArgsFromUrl(storyId) {
   const isInIframe = params.toString().includes("globals=");
@@ -23,6 +25,7 @@ export const vue3SourceDecorator = makeDecorator({
     const story = storyFn(context);
     const [, updateArgs] = useArgs();
     const urlArgs = getArgsFromUrl(context.id);
+    const channel = addons.getChannel();
 
     previousStoryId = context.id;
 
@@ -35,13 +38,22 @@ export const vue3SourceDecorator = makeDecorator({
         onMounted(async () => {
           updateArgs({ ...context.args, ...urlArgs });
 
-          await setSourceCode();
+          /* rerender code snippet by optimized source code */
+          channel.on(SNIPPET_RENDERED, async (payload) => {
+            if (payload.source.includes(`<script lang="ts" setup>`)) {
+              await setSourceCode();
+            }
+          });
         });
 
         watch(
           context.args,
-          async () => {
+          async (newArgs) => {
+            if (JSON.stringify(previousArgs) === JSON.stringify(newArgs)) return;
+
+            previousArgs = { ...newArgs };
             updateArgs({ ...context.args });
+
             await setSourceCode();
           },
           { deep: true },
@@ -52,8 +64,6 @@ export const vue3SourceDecorator = makeDecorator({
             const src = context.originalStoryFn(context.args, context.argTypes).template;
             const code = preFormat(src, context.args, context.argTypes);
 
-            const channel = addons.getChannel();
-
             const emitFormattedTemplate = async () => {
               const prettier = await import("prettier2");
               const prettierHtml = await import("prettier2/parser-html");
@@ -64,8 +74,8 @@ export const vue3SourceDecorator = makeDecorator({
                 htmlWhitespaceSensitivity: "ignore",
               });
 
-              // emits an event when the transformation is completed
-              channel.emit("storybook/docs/snippet-rendered", {
+              // emits an event when the transformation is completed and content rendered
+              channel.emit(SNIPPET_RENDERED, {
                 id: context.id,
                 args: context.args,
                 source: postFormat(formattedCode),
@@ -124,7 +134,9 @@ function preFormat(templateSource, args, argTypes) {
     // eslint-disable-next-line vue/max-len
     `</template><template v-else-if="slot === 'default' && args['defaultSlot']">{{ args['defaultSlot'] }}</template><template v-else-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template></template>`;
 
-  const modelValue = JSON.stringify(args["modelValue"])?.replaceAll('"', "'");
+  const modelValue = isPrimitive(args["modelValue"])
+    ? JSON.stringify(args["modelValue"])?.replaceAll('"', "")
+    : JSON.stringify(args["modelValue"])?.replaceAll('"', "'");
 
   templateSource = templateSource
     .replace(/>[\s]+</g, "><")
@@ -259,16 +271,17 @@ function generateEnumAttributes(args, option) {
 
   return enumKeys
     .map((key) => {
-      const isNotPrimitive =
-        Object.keys(args[key] || {}).length || (Array.isArray(args[key]) && args[key].length);
-
-      return key in args && isNotPrimitive
+      return key in args && !isPrimitive(args[key])
         ? `${key}="${JSON.stringify(args[key]).replaceAll('"', "'").replaceAll("{enumValue}", option)}"`
         : `${key}="${option}"`;
     })
     .join(" ");
 }
 
+function isPrimitive(value) {
+  return !(value && (typeof value === "object" || Array.isArray(value)));
+}
+
 function propToSource(key, val, argType) {
   const defaultValue = argType.table?.defaultValue?.summary;
   const type = typeof val;

package/.storybook/index.css

@@ -265,6 +265,11 @@ body {
   margin-top: 0.5rem; /* mt-2 */
 }
 
+.sb-anchor > p {
+  margin-top: -0.5rem; /* mt-2 */
+  margin-bottom: -0.5rem; /* -mt-2 */
+}
+
 .dark .sb-anchor > p > a {
   color: #4ade80; /* text-green-400 */
   text-decoration: underline dashed #4ade80;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.75-beta.12",
+  "version": "0.0.75-beta.14",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",