storybook-vue3-router - npm Package Compare versions

Comparing version 4.25.0 to 5.0.0

dist/index.d.ts

@@ -31,2 +31,18 @@ import * as vue_router from 'vue-router';
  */
+declare function withAsyncVueRouter(routes?: vue_router.RouteRecordRaw[], options?: {
+    initialRoute?: string;
+    beforeEach?: NavigationGuard;
+    vueRouterOptions?: RouterOptions;
+}): Decorator;
+
+/**
+ * Add a vue router instance to Storybook stories
+ * @param routes (optional) custom routes for story
+ * @param options (optional) custom options
+ *
+ * @remarks
+ *
+ * If there is a previously initialized story using vue-router and you wish to use `beforeEach` to apply global router guards via `options` param,
+ * we must reload the story in order to apply the global route guards, this can have a minor performance impact.
+ */
 declare function withMockRouter(options: {
@@ -38,2 +54,2 @@ meta?: Array<string>;
 
-export { withMockRouter as mockRouter, withVueRouter as vueRouter };
+export { withAsyncVueRouter as asyncVueRouter, withMockRouter as mockRouter, withVueRouter as vueRouter };

dist/index.js

@@ -101,2 +101,31 @@ 'use strict';
 
+function withAsyncVueRouter(routes = defaultRoutes, options) {
+  return () => ({
+    async setup() {
+      const { app } = vue.getCurrentInstance().appContext;
+      let router;
+      const existingRouter = app.config.globalProperties.$router;
+      const existingRoute = app.config.globalProperties.$route;
+      if ((!existingRouter || existingRouter.isMocked === true) && (!existingRoute || existingRoute.isMocked === true)) {
+        router = vueRouter.createRouter({
+          history: vueRouter.createWebHashHistory(),
+          routes,
+          ...options?.vueRouterOptions
+        });
+        globalRouterGuardFn(router, options?.beforeEach);
+        app.use(router);
+      } else {
+        router = existingRouter;
+        resetRoutes(router, routes);
+        globalRouterGuardFn(existingRouter, options?.beforeEach, true);
+      }
+      initialRoute(router, options?.initialRoute);
+      await router.isReady();
+    },
+    template: `
+      <story/>
+    `
+  });
+}
+
 function withMockRouter(options) {
@@ -148,4 +177,5 @@ return (_, ctx) => ({
 
+exports.asyncVueRouter = withAsyncVueRouter;
 exports.mockRouter = withMockRouter;
 exports.vueRouter = withVueRouter;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "storybook-vue3-router",
-  "version": "4.25.0",
+  "version": "5.0.0",
   "description": "A Storybook decorator that allows you to build stories for your routing-aware components.",
@@ -24,33 +24,18 @@ "keywords": [
   ],
-  "scripts": {
-    "clean": "rimraf ./dist",
-    "prebuild": "pnpm clean",
-    "build": "rollup -c",
-    "build:watch": "rollup -c --watch",
-    "storybook": "storybook dev -p 6006",
-    "dev": "concurrently \"pnpm storybook\" \"pnpm build:watch\"",
-    "build-storybook": "storybook build",
-    "publish": "pnpm build && auto shipit",
-    "publish:dry": "pnpm build && auto shipit --dry-run",
-    "changelog": "auto changelog",
-    "test": "npx playwright test",
-    "eject-ts": "zx scripts/eject-typescript.mjs"
-  },
   "dependencies": {
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
-    "@storybook/addon-actions": "^7.4.2",
-    "@storybook/addon-essentials": "^7.4.2",
+    "@playwright/test": "^1.40.1",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
     "@storybook/addon-mdx-gfm": "7.4.2",
-    "@storybook/addons": "^7.4.2",
-    "@storybook/blocks": "^7.4.2",
-    "@storybook/preview-api": "^7.4.2",
-    "@storybook/types": "^7.4.2",
-    "@storybook/vue3": "^7.4.2",
-    "@storybook/vue3-vite": "^7.4.2",
-    "@types/node": "^18.17.17",
-    "@vitejs/plugin-vue": "^4.3.4",
-    "auto": "^10.46.0",
+    "@storybook/addons": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/preview-api": "^7.6.3",
+    "@storybook/types": "^7.6.3",
+    "@storybook/vue3": "^7.6.3",
+    "@storybook/vue3-vite": "^7.6.3",
+    "@types/node": "^18.19.2",
+    "@vitejs/plugin-vue": "^4.5.1",
     "concurrently": "^6.5.1",
@@ -62,9 +47,9 @@ "esbuild": "^0.17.19",
     "rimraf": "^3.0.2",
-    "rollup": "^3.29.2",
+    "rollup": "^3.29.4",
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-esbuild": "^5.0.0",
-    "storybook": "^7.4.2",
+    "storybook": "^7.6.3",
     "typescript": "^4.9.5",
-    "vite": "^4.4.9",
-    "vue": "^3.3.4",
+    "vite": "^4.5.1",
+    "vue": "^3.3.10",
     "zx": "^1.15.2"
@@ -95,3 +80,14 @@ },
     "icon": "https://github.com/NickMcBurney/storybook-vue3-router/blob/main/vue-logo.png?raw=true"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "prebuild": "pnpm clean",
+    "build": "rollup -c",
+    "build:watch": "rollup -c --watch",
+    "storybook": "storybook dev -p 6006",
+    "dev": "concurrently \"pnpm storybook\" \"pnpm build:watch\"",
+    "build-storybook": "storybook build",
+    "prepublish": "pnpm build",
+    "test": "npx playwright test"
   }
-}
+}

README.md

@@ -19,3 +19,3 @@ # Storybook Vue3 Router
 ### Storybook v6: Please use package version 2.x
-### Storybook v7: Please use package version 3.x
+### Storybook v7: Please use package version 3+
 See [migration guides](#v2x--v3x-migration).
@@ -120,11 +120,2 @@
 
-/* adding storybook-vue3-router decorator */
-Default.decorators = [
-  /* pass initialRoute to the decorator */
-  vueRouter(customRoutes, {
-    initialRoute: '/intro'
-  })
-]
-```
-
 ### With Router Options
@@ -147,2 +138,49 @@ We can pass [Vue Router options](https://router.vuejs.org/api/index.html#history) into our decorator.
 
+## `router.isReady()`
+If you have a router setup using `router.isReady()` and / or you have components which require specific route / route data on created lifecycle hook you may need to use the `asyncVueRouter` export.
+
+This export provides router which won't render story until router is ready.
+
+### Story setup
+```typescript
+import { asyncVueRouter } from 'storybook-vue3-router'
+
+/* define our custom routes */
+const customRoutes = [
+  {
+    path: '/',
+    name: 'dashboard',
+    component: Dashboard
+  },
+  {
+    path: '/intro',
+    name: 'intro',
+    component: Intro
+  }
+]
+
+/* adding storybook-vue3-router decorator */
+Default.decorators = [
+  /* pass initialRoute to the decorator */
+  asyncVueRouter(customRoutes, {
+    initialRoute: '/intro'
+  })
+]
+```
+
+### Preview.js Async Setup
+In order to use `async` router setup method, you will need to amend your .storybook/preview.js file to wrap stories in Vue 3's `<Suspense>` component. This is because the decorator requires an `async setup()` to correctly `await router.isReady()`. You can modify preview to:
+```typescript
+const preview = {
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<Suspense><story /></Suspense>',
+    }),
+  ],
+};
+
+export default preview;
+```
+
 See [the examples folder](https://github.com/NickMcBurney/storybook-vue3-router/tree/main/examples) for more advanced usage.
@@ -154,7 +192,10 @@
 function vueRouter(routes: RouteRecordRaw[], options?: { initialRoute?: string, beforeEach?: NavigationGuard, vueRouterOptions?: RouterOptions })
+function asyncVueRouter(routes: RouteRecordRaw[], options?: { initialRoute?: string, beforeEach?: NavigationGuard, vueRouterOptions?: RouterOptions })
 ```
 
 ## Mock Router
-The full `vue-router` is not always needed - for example if you don't have components using `<router-view>` or `<router-link>` then using the `mockRouter` export may cover your needs (and reduce the imports being used in your project).
+The full `vue-router` is not always needed - for example if you don't have components using `<router-view>` or `<router-link>` then using the `mockRouter` export may cover your needs (and reduce the imports being used in your stories).
 
+Note: `mockRouter` will only work in instances where you are using options API `this.$route` and/or `this.$router`, it is not suitable for use-cases using vue router composables such as `useRoute()` and `useRouter()`.
+
 ### Use `mockRouter` in your stories
@@ -193,3 +234,3 @@ The default setup will create mock `$router` and `$route` from `vue-router`, this allows you to create stories for components using programatic navigation and route based logic.
 
-## v2.x > v3.x Migration
+## v2.x > v3+ Migration
 ### ⚠️ BREAKING CHANGE ⚠️
@@ -196,0 +237,0 @@

No alert changes

Improved metrics

Total package byte prevSize

62420

increased by27.66%

Dev dependency count

26

decreased by-3.7%

Lines of code

386

increased by22.93%

Number of lines in readme file

268

increased by18.06%

Dependency changes

• + Added@babel/code-frame@7.24.6(transitive)

• + Added@babel/generator@7.24.6(transitive)

• + Added@babel/helper-environment-visitor@7.24.6(transitive)

• + Added@babel/helper-function-name@7.24.6(transitive)

• + Added@babel/helper-hoist-variables@7.24.6(transitive)

• + Added@babel/helper-split-export-declaration@7.24.6(transitive)

• + Added@babel/helper-string-parser@7.24.6(transitive)

• + Added@babel/helper-validator-identifier@7.24.6(transitive)

• + Added@babel/highlight@7.24.6(transitive)

• + Added@babel/parser@7.24.6(transitive)

• + Added@babel/template@7.24.6(transitive)

• + Added@babel/traverse@7.24.6(transitive)

• + Added@babel/types@7.24.6(transitive)

• + Added@storybook/channels@8.1.5(transitive)

• + Added@storybook/client-logger@8.1.5(transitive)

• + Added@storybook/core-common@8.1.5(transitive)

• + Added@storybook/core-events@8.1.5(transitive)

• + Added@storybook/csf@0.1.7(transitive)

• + Added@storybook/csf-tools@8.1.5(transitive)

• + Added@storybook/docs-tools@8.1.5(transitive)

• + Added@storybook/node-logger@8.1.5(transitive)

• + Added@storybook/preview-api@8.1.5(transitive)

• + Added@storybook/types@8.1.5(transitive)

• + Added@storybook/vue3@8.1.5(transitive)

• + Added@types/node@20.12.13(transitive)

• + Added@vue/devtools-api@6.6.2(transitive)

• + Addedjackspeak@3.1.2(transitive)

• + Addedprettier@3.2.5(transitive)

• + Addedrecast@0.23.8(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@babel/code-frame@7.24.7(transitive)

• - Removed@babel/generator@7.24.7(transitive)

• - Removed@babel/helper-environment-visitor@7.24.7(transitive)

• - Removed@babel/helper-function-name@7.24.7(transitive)

• - Removed@babel/helper-hoist-variables@7.24.7(transitive)

• - Removed@babel/helper-split-export-declaration@7.24.7(transitive)

• - Removed@babel/helper-string-parser@7.24.7(transitive)

• - Removed@babel/helper-validator-identifier@7.24.7(transitive)

• - Removed@babel/highlight@7.24.7(transitive)

• - Removed@babel/parser@7.24.7(transitive)

• - Removed@babel/template@7.24.7(transitive)

• - Removed@babel/traverse@7.24.7(transitive)

• - Removed@babel/types@7.24.7(transitive)

• - Removed@storybook/channels@8.1.6(transitive)

• - Removed@storybook/client-logger@8.1.6(transitive)

• - Removed@storybook/core-common@8.1.6(transitive)

• - Removed@storybook/core-events@8.1.6(transitive)

• - Removed@storybook/csf@0.1.8(transitive)

• - Removed@storybook/csf-tools@8.1.6(transitive)

• - Removed@storybook/docs-tools@8.1.6(transitive)

• - Removed@storybook/node-logger@8.1.6(transitive)

• - Removed@storybook/preview-api@8.1.6(transitive)

• - Removed@storybook/types@8.1.6(transitive)

• - Removed@storybook/vue3@8.1.6(transitive)

• - Removed@types/node@20.14.2(transitive)

• - Removed@vue/devtools-api@6.6.3(transitive)

• - Removedast-types@0.16.1(transitive)

• - Removedesprima@4.0.1(transitive)

• - Removedjackspeak@3.4.0(transitive)

• - Removedms@2.1.2(transitive)

• - Removedprettier@3.3.1(transitive)

• - Removedrecast@0.23.9(transitive)

• - Removedtslib@2.6.3(transitive)

• Updatedvue-router@^4.2.5