storybookjs · Xenossolitarius · Dec 6, 2023
diff --git a/example/package.json b/example/package.json
@@ -12,28 +12,28 @@
     "test": "vitest"
   },
   "dependencies": {
-    "vue": "^3.2.47"
+    "vue": "^3.3.10"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-interactions": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/blocks": "^7.0.26",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "^7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/blocks": "^7.6.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/testing-vue3": "link:../",
-    "@storybook/vue3": "^7.0.26",
-    "@storybook/vue3-vite": "^7.0.26",
+    "@storybook/vue3": "^7.6.0",
+    "@storybook/vue3-vite": "^7.6.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/vue": "^7.0.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.5.1",
     "expect-type": "^0.16.0",
     "react": "^18.2.0",
     "jsdom": "^22.1.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.26",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.2",
-    "vue-tsc": "^1.4.2"
+    "storybook": "^7.6.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.5",
+    "vitest": "^1.0.1",
+    "vue-tsc": "^1.8.24"
   }
 }
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -9,6 +9,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

diff --git a/example/yarn.lock b/example/yarn.lock
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" class="ftn-dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Playground</title>
+  </head>
+  <body>
+    <div id="app" class="p-10"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -12,51 +12,48 @@
     "url": "https://github.com/storybookjs/testing-vue3"
   },
   "author": "yannbf@gmail.com",
-  "module": "dist/testing-vue3.esm.js",
   "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
+    "start": "vite dev",
+    "build": "rimraf dist && tsc && vite build",
     "test": "yarn build && cd ./example && yarn test",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "prepare": "yarn build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "release": "yarn build && auto shipit"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^4.10.1",
-    "@storybook/client-logger": "^7.0.0",
-    "@storybook/preview-api": "^7.0.0",
-    "@storybook/types": "^7.0.0",
-    "@storybook/vue3": "^7.0.0",
+    "@storybook/client-logger": "^7.6.0",
+    "@storybook/preview-api": "^7.6.0",
+    "@storybook/types": "^7.6.0",
+    "@storybook/vue3": "^7.6.0",
     "auto": "^10.20.4",
     "concurrently": "^6.0.0",
+    "vite-plugin-dts":"^3.6.4",
     "husky": "^5.1.3",
     "size-limit": "^4.10.1",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.9.0",
-    "vitest": "^0.33.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.5",
+    "vitest": "^1.0.1",
     "vue": "^3.0.0"
   },
   "peerDependencies": {
-    "@storybook/client-logger": "^7.0.0",
-    "@storybook/preview-api": "^7.0.0",
-    "@storybook/types": "^7.0.0",
-    "@storybook/vue3": "^7.0.0",
+    "@storybook/client-logger": "^7.6.0",
+    "@storybook/preview-api": "^7.6.0",
+    "@storybook/types": "^7.6.0",
+    "@storybook/vue3": "^7.6.0",
     "vue": "^3.0.0"
   },
-  "resolutions": {
-    "**/typescript": "^4.2.3"
-  },
   "publishConfig": {
     "access": "public"
   }

diff --git a/src/index.ts b/src/index.ts
@@ -6,14 +6,17 @@ import {
 
 import type {
   Args,
-  ComposedStory,
+  ComposeStoryFn,
+  LegacyStoryAnnotationsOrFn,
   ProjectAnnotations,
+  Renderer,
   Store_CSFExports,
 } from '@storybook/types';
 import { deprecate } from '@storybook/client-logger';
 import type { VueRenderer, Meta } from "@storybook/vue3";
-//@ts-ignore
-import * as defaultProjectAnnotations from "@storybook/vue3/preview";
+
+// @ts-ignore
+import * as defaultProjectAnnotations from "@storybook/vue3/dist/entry-preview.mjs" ;
 import { PreparedStoryFn, StoriesWithPartialProps } from './types';
 
 /** Function that sets the global config of your storybook. The global config is the preview module of your .storybook folder.
@@ -76,13 +79,13 @@ export function setGlobalConfig(
  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  */
 export function composeStory<TArgs extends Args = Args>(
-  story: ComposedStory<VueRenderer, TArgs>,
+  story: LegacyStoryAnnotationsOrFn<VueRenderer, TArgs>,
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<VueRenderer>,
   exportsName?: string
 ) {
   return originalComposeStory<VueRenderer, TArgs>(
-    story as ComposedStory<VueRenderer, Args>,
+    story as LegacyStoryAnnotationsOrFn<VueRenderer>,
     componentAnnotations,
     projectAnnotations,
     defaultProjectAnnotations as ProjectAnnotations<VueRenderer>,
@@ -112,14 +115,14 @@ export function composeStory<TArgs extends Args = Args>(
  * });
  *```
  *
- * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param storiesImport - e.g. (import * as stories from './Button.stories')
  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  */
 export function composeStories<TModule extends Store_CSFExports<VueRenderer, any>>(
-  csfExports: TModule,
-  projectAnnotations?: ProjectAnnotations<VueRenderer>
+  storiesImport: TModule,
+  globalConfig?: ProjectAnnotations<VueRenderer>
 ) {
-  const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+  const composedStories = originalComposeStories(storiesImport as Store_CSFExports, globalConfig as ProjectAnnotations<Renderer>, composeStory as ComposeStoryFn);
 
   return composedStories as unknown as Omit<
     StoriesWithPartialProps<VueRenderer, TModule>,

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,20 +1,23 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "emitDecoratorMetadata": true,
-    "esModuleInterop": true,
-    "experimentalDecorators": true,
-    "incremental": false,
-    "isolatedModules": true,
-    "jsx": "react",
-    "lib": ["es2017", "dom"],
-    "module": "ES2015",
-    "moduleResolution": "node",
-    "noImplicitAny": true,
     "rootDir": "./src",
-    "skipLibCheck": true,
-    "target": "es5"
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true, 
+    "types": ["vite/client", "node"]
   },
-  "include": ["src/**/*"]
-}
+  "include": ["src"],
+  "exclude": ["**/*.test.ts", "node_modules", "test/**", ".history/**"]
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,33 @@
+/// <reference types="vite" />
+import path from "path";
+import { defineConfig } from "vite";
+import dts from 'vite-plugin-dts'
+
+const fileName = {
+  es: `index.mjs`,
+  cjs: `index.cjs`,
+  iife: `index.iife.js`,
+};
+
+const formats = Object.keys(fileName) as Array<keyof typeof fileName>;
+
+export default defineConfig({
+  base: "./",
+  plugins: [dts()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: 'index',
+      formats,
+      fileName: (format) => fileName[format],
+    },
+    rollupOptions: {
+      external: [
+        /^@storybook\/.*/,
+      ]
+    }
+  },
+  test: {
+
+  }
+});