feat: auto recognize vue router version (#18)

Author: 2nthony

.gitignore

@@ -1,4 +1,3 @@
 node_modules/
 .DS_Store
-/index.js
 dist

README.md

@@ -1,5 +1,3 @@
-> Use it with your own risk, we'll rewrite this soon.
-
 ![](https://user-images.githubusercontent.com/19513289/59971813-06ab8000-95b6-11e9-8b6b-627af2c2f1ae.png)
 
 > 🚦Future-Oriented vue routing system
@@ -73,8 +71,12 @@ Then in your `router.js`:
 
 ```js
 import { routes } from 'vue-auto-routes'
-
+// v3
 export default new VueRouter({ routes })
+// v4
+export const router = createRouter({
+  routes
+})
 ```
 
 ## Routing Convertion
@@ -108,11 +110,14 @@ Since `v1.1.11` options for [@ream/collect-fs-routes v1.0.2](https://github.com/
 
 Routes directory, e.g. `src/views`.
 
-### next
+### ~~next~~
 
+- Deprecated
 - Type: `boolean`
 - Default: `false`
 
+Now we recognize v4 automatically. Do not need this anymore.
+
 Vue router next [See migration](https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes).
 
 ### ~~componentPrefix~~

index.js

@@ -0,0 +1 @@
+export const routes = []

lib/collect-fs-routes.js

@@ -62,7 +62,7 @@ function renderRoutes(
     chunkPrefix = 'page-',
     componentPrefix = process.cwd(),
     extraRoutes = [],
-    next = false
+    v4
   } = {}
 ) {
   return `
@@ -74,7 +74,7 @@ function renderRoutes(
     {
       path: ${
         route.path === '/404'
-          ? stringify(next ? '/:pathMatch(.*)*' : '*') // vue router next
+          ? stringify(v4 ? '/:pathMatch(.*)*' : '*') // vue router v4
           : stringify(route.path.replace(/\\/g, '/'))
       },
       ${route.component.match(/\{(.*?)\}/g) ? 'props: true,' : ''}

lib/plugin.js

@@ -1,8 +1,11 @@
 const path = require('path')
 const { writeFile: _writeFile, watch } = require('fs')
 const { promisify } = require('util')
+const VueRouterVersion = require('vue-router/package.json').version
 const { collectRoutes, renderRoutes } = require('./collect-fs-routes')
 
+const v4 = VueRouterVersion.slice(0, 1) === '4'
+
 const writeFile = promisify(_writeFile)
 
 const pluginName = 'vue-auto-routes'
@@ -12,8 +15,7 @@ module.exports = class VueAutoRoutes {
     this.opts = Object.assign(
       {
         watchMode: false,
-        default404: true,
-        next: false
+        default404: true
       },
       opts
     )
@@ -64,7 +66,7 @@ module.exports = class VueAutoRoutes {
 
     return `export const routes = ${renderRoutes(routes, {
       extraRoutes,
-      next: this.opts.next
+      v4
     })}
     `
   }

package.json

@@ -12,12 +12,12 @@
   "files": [
     "lib",
     "plugin.js",
-    "404.vue"
+    "404.vue",
+    "index.js"
   ],
   "scripts": {
     "lint": "xo",
-    "test": "npm run lint && ava --verbose",
-    "install": "echo 'export const routes = []' > index.js"
+    "test": "npm run lint && ava --verbose"
   },
   "dependencies": {
     "lodash.sortby": "^4.7.0"
@@ -30,6 +30,7 @@
     "husky": "^1.0.0-rc.13",
     "lint-staged": "^7.2.0",
     "prettier": "^1.17.0",
+    "vue-router": "^4.0.0-rc.6",
     "xo": "^0.23.0"
   },
   "xo": {

test/index.test.js

@@ -8,34 +8,27 @@ const options = {
   match: 'vue,js'
 }
 
+const route404 = {
+  path: '/404',
+  component: path.relative(process.cwd(), path.join(__dirname, '../404.vue'))
+}
+
 test('main', async t => {
   const routes = await collectRoutes(options)
-  const routesString = renderRoutes(routes, {
+  const routesString = renderRoutes([...routes, route404], {
     componentPrefix: ''
   })
 
   t.snapshot(JSON.stringify(routes), 'collect routes')
   t.snapshot(routesString, 'render routes')
 })
 
-test('next', async t => {
+test('v4', async t => {
   const routes = await collectRoutes(options)
-  const routesString = renderRoutes(
-    [
-      ...routes,
-      {
-        path: '/404',
-        component: path.relative(
-          process.cwd(),
-          path.join(__dirname, '../404.vue')
-        )
-      }
-    ],
-    {
-      componentPrefix: '',
-      next: true
-    }
-  )
+  const routesString = renderRoutes([...routes, route404], {
+    componentPrefix: '',
+    v4: true
+  })
 
   t.snapshot(JSON.stringify(routes), 'collect routes')
   t.snapshot(routesString, 'render routes')

test/snapshots/index.test.js.md

@@ -49,11 +49,18 @@ Generated by [AVA](https://ava.li).
           component: () => import(/* webpackChunkName: "page-test-views-foo-{name}-vue" */ "test/views/foo/{name}.vue"),␊
           ␊
         }␊
+        ,␊
+        {␊
+          path: "*",␊
+          ␊
+          component: () => import(/* webpackChunkName: "page-404-vue" */ "404.vue"),␊
+          ␊
+        }␊
         ␊
       ]␊
       `
 
-## next
+## v4
 
 > collect routes
 

test/snapshots/index.test.js.snap

@@ -4950,6 +4950,11 @@ vfile@^2.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
+vue-router@^4.0.0-rc.6:
+  version "4.0.0-rc.6"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-rc.6.tgz#8fa9e2d612c28ccf9b2bfa9421052932808ce24b"
+  integrity sha512-hVHC8A4/0yku1Z6+oUtX9odeHv78XwDI7putt1hd7os27P7mLabkjArN7f3TI3e/cz17MxAUz5Yp+m8ZE3sPsw==
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"