storybook-vue3-router - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

dist/esm/defaultRoutes.js

 var Home = {
-  template: "\n    <div>\n      <h1>Home</h1>\n      \n      <div style=\"display: flex; gap: 1em\">\n        <router-link to=\"/\">Home</router-link>\n        <router-link to=\"/about\">About</router-link>\n      </div>\n    </div>\n  "
+  template: "\n    <div>\n      <h2>Home</h2>\n      \n      <div style=\"display: flex; gap: 1em\">\n        <router-link to=\"/\">Home</router-link>\n        <router-link to=\"/about\">About</router-link>\n      </div>\n    </div>\n  "
 };
 var About = {
-  template: "\n    <div>\n      <h1>About</h1>\n\n      <div style=\"display: flex; gap: 1em\">\n        <router-link to=\"/\">Home</router-link>\n        <router-link to=\"/about\">About</router-link>\n      </div>\n    </div>\n  "
+  template: "\n    <div>\n      <h2>About</h2>\n\n      <div style=\"display: flex; gap: 1em\">\n        <router-link to=\"/\">Home</router-link>\n        <router-link to=\"/about\">About</router-link>\n      </div>\n    </div>\n  "
 };
@@ -7,0 +7,0 @@ export var defaultRoutes = [{

dist/esm/withVueRouter.js

@@ -10,27 +10,34 @@ import { app } from "@storybook/vue3";
     wrapper: function wrapper(storyFn, context) {
-      /* get routes from either `routesParam` or use `defaultRoutes` */
-      var routes = routesParam || defaultRoutes;
-      /* create vue router */
+      var vueRouterGlobalProperty = app.config.globalProperties.$router;
+      var vueRouteGlobalProperty = app.config.globalProperties.$route;
 
-      var router = createRouter({
-        history: createWebHashHistory(),
-        routes: routes
-      });
-      /* check if there is a `beforeEach` function passed into decorator function */
+      if (context.viewMode === 'story' && !vueRouterGlobalProperty && !vueRouteGlobalProperty) {
+        console.log(app);
+        /* get routes from either `routesParam` or use `defaultRoutes` */
 
-      if (typeof beforeEach === 'function') {
-        /* fire `beforeEach` param on `router.beforeEach` and pass `to` and `from` params to the function */
-        router.beforeEach(function (to, from) {
-          return beforeEach(to, from);
+        var routes = routesParam || defaultRoutes;
+        /* create vue router */
+
+        var router = createRouter({
+          history: createWebHashHistory(),
+          routes: routes
         });
-      }
-      /* tell storybook to use vue router */
+        /* check if there is a `beforeEach` function passed into decorator function */
 
+        if (typeof beforeEach === 'function') {
+          /* fire `beforeEach` param on `router.beforeEach` and pass `to` and `from` params to the function */
+          router.beforeEach(function (to, from) {
+            return beforeEach(to, from);
+          });
+        }
+        /* tell storybook to use vue router */
 
-      app.use(router);
-      /* if the route route is not `/` */
 
-      if (routes[0].path !== '/') {
-        /* update router to use the first path in routes defined */
-        router.replace(routes[0].path);
+        app.use(router);
+        /* if the route route is not `/` */
+
+        if (routes[0].path !== '/') {
+          /* update router to use the first path in routes defined */
+          router.replace(routes[0].path);
+        }
       }
@@ -37,0 +44,0 @@ /* return the storybook story */

package.json

 {
   "name": "storybook-vue3-router",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Vue 3 & Vue Router 4+ Storybook Integration",
@@ -81,4 +81,4 @@ "keywords": [
     ],
-    "icon": "https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png"
+    "icon": "https://github.com/NickMcBurney/storybook-vue3-router/blob/main/vue-logo.png?raw=true"
   }
 }

README.md

 # Storybook Vue 3 Router
 
-Integration of Vue 3 and Vue Router in Storybook stories.
+Integration of Vue 3 and Vue Router v4 in Storybook stories.
 
+You will need to use this plugin if you wish to include stories for any component using Vue Router v4+ `<router-view>` and `<router-link>`
+
 ![Storybook with Vue 3 Router Integration](https://github.com/NickMcBurney/storybook-vue-router/blob/main/storybook-vue-router.gif?raw=true)
 
 ## Install
-`npm install storybook-addon-vue-router`
+`npm install storybook-vue3-router`
 
@@ -10,0 +12,0 @@ ## Usage

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

89

increased by2.3%

Worsened metrics

Total package byte prevSize

12690

decreased by-29.15%

Number of package files

18

decreased by-30.77%

Lines of code

128

decreased by-47.54%

No dependency changes