@sit-onyx/storybook-utils 1.0.0-beta.100 → 1.0.0-beta.101

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.100",
+  "version": "1.0.0-beta.101",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -28,10 +28,11 @@
   "peerDependencies": {
     "@storybook/vue3-vite": ">= 9.0.0",
     "@vueless/storybook-dark-mode": ">= 9.0.0",
+    "prettier": ">= 3.0.0",
     "storybook": ">= 9.0.0",
     "vue-component-type-helpers": ">= 2",
-    "@sit-onyx/icons": "^1.0.0-beta.23",
-    "@sit-onyx/shared": "^1.0.0-beta.4"
+    "@sit-onyx/shared": "^1.0.0-beta.4",
+    "@sit-onyx/icons": "^1.0.0-beta.23"
   },
   "dependencies": {
     "deepmerge-ts": "^7.1.5"

package/src/preview.spec.ts

@@ -18,9 +18,13 @@ import { iconBellRing, iconCalendar, iconPlaceholder } from "@sit-onyx/icons";
 </script>
 
 <template>
-<OnyxTest :icon="iconPlaceholder" :test="iconBellRing" :obj="{foo:iconCalendar}" />
-<OnyxOtherComponent />
-<OnyxComp>Test</OnyxComp>
+  <OnyxTest
+    :icon="iconPlaceholder"
+    :test="iconBellRing"
+    :obj="{foo:iconCalendar}"
+  />
+  <OnyxOtherComponent />
+  <OnyxComp>Test</OnyxComp>
 </template>`);
   });
 });

package/src/preview.ts

@@ -179,24 +179,42 @@ export const sourceCodeTransformer = async (originalSourceCode: string): Promise
     additionalImports.unshift(`import { ${usedOnyxComponents.join(", ")} } from "sit-onyx";`);
   }
 
-  if (additionalImports.length === 0) return code;
-
-  if (code.startsWith("<script")) {
-    const index = code.indexOf("\n");
-    const hasOtherImports = code.includes("import {");
-    return (
-      code.slice(0, index) +
-      additionalImports.join("\n") +
-      (!hasOtherImports ? "\n" : "") +
-      code.slice(index)
-    );
-  }
-
-  return `<script lang="ts" setup>
+  if (additionalImports.length > 1) {
+    if (code.startsWith("<script")) {
+      const index = code.indexOf("\n");
+      const hasOtherImports = code.includes("import {");
+      code =
+        code.slice(0, index) +
+        additionalImports.join("\n") +
+        (!hasOtherImports ? "\n" : "") +
+        code.slice(index);
+    } else {
+      code = `<script lang="ts" setup>
 ${additionalImports.join("\n")}
 </script>
 
 ${code}`;
+    }
+  }
+
+  try {
+    const { format } = await import("prettier/standalone");
+    const parserHtml = await import("prettier/parser-html");
+
+    code = await format(code, {
+      parser: "vue",
+      plugins: [parserHtml],
+      htmlWhitespaceSensitivity: "ignore",
+    });
+
+    // trim code to remove trailing newlines that are added by prettier
+    code = code.trim();
+  } catch (e) {
+    // eslint-disable-next-line no-console -- if the formatting fails, there is usually an issue with our code so we want to inform the user that the formatting failed
+    console.error("Error while formatting Storybook code snippet:", e);
+  }
+
+  return code;
 };
 
 /**