@sit-onyx/storybook-utils 1.0.0-alpha.150 → 1.0.0-alpha.152

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-alpha.150",
+  "version": "1.0.0-alpha.152",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -29,8 +29,8 @@
     "@storybook/theming": ">= 8.0.0",
     "@storybook/vue3": ">= 8.0.0",
     "storybook-dark-mode": ">= 4",
-    "@sit-onyx/icons": "^0.1.0-alpha.2",
-    "sit-onyx": "^1.0.0-alpha.145"
+    "sit-onyx": "^1.0.0-alpha.146",
+    "@sit-onyx/icons": "^0.1.0-alpha.2"
   },
   "dependencies": {
     "deepmerge-ts": "^7.0.3"

package/src/preview.spec.ts

@@ -12,6 +12,7 @@ describe("preview.ts", () => {
       .mockReturnValue(`<template>
 <OnyxTest icon='${placeholder}' test='${bellRing}' :obj="{foo:'${replaceAll(calendar, '"', "\\'")}'}" />
 <OnyxOtherComponent />
+<OnyxComp>Test</OnyxComp>
 </template>`);
 
     // ACT
@@ -20,7 +21,7 @@ describe("preview.ts", () => {
     // ASSERT
     expect(generatorSpy).toHaveBeenCalledOnce();
     expect(sourceCode).toBe(`<script lang="ts" setup>
-import { OnyxOtherComponent, OnyxTest } from "sit-onyx";
+import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
 import bellRing from "@sit-onyx/icons/bell-ring.svg?raw";
 import calendar from "@sit-onyx/icons/calendar.svg?raw";
 import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
@@ -29,6 +30,7 @@ import placeholder from "@sit-onyx/icons/placeholder.svg?raw";
 <template>
 <OnyxTest :icon="placeholder" :test="bellRing" :obj="{foo:calendar}" />
 <OnyxOtherComponent />
+<OnyxComp>Test</OnyxComp>
 </template>`);
   });
 });

package/src/preview.ts

@@ -173,7 +173,7 @@ export const sourceCodeTransformer = (
   // add imports for all used onyx components
   // Set is used here to only include unique components if they are used multiple times
   const usedOnyxComponents = [
-    ...new Set(Array.from(code.matchAll(/<Onyx\S+/g)).map((match) => match[0].replace("<", ""))),
+    ...new Set(Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g)).map((match) => match[1])),
   ].sort();
 
   if (usedOnyxComponents.length > 0) {
@@ -184,7 +184,13 @@ export const sourceCodeTransformer = (
 
   if (code.startsWith("<script")) {
     const index = code.indexOf("\n");
-    return code.slice(0, index) + additionalImports.join("\n") + "\n" + code.slice(index);
+    const hasOtherImports = code.includes("import {");
+    return (
+      code.slice(0, index) +
+      additionalImports.join("\n") +
+      (!hasOtherImports ? "\n" : "") +
+      code.slice(index)
+    );
   }
 
   return `<script lang="ts" setup>