feat(cli): support more features

package.json

@@ -29,7 +29,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "commit-msg": "vant commit-lint"
+      "commit-msg": "vant-cli commit-lint"
     }
   },
   "lint-staged": {
@@ -70,7 +70,7 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-typescript": "^7.7.2",
     "@types/jest": "^24.0.22",
-    "@vant/cli": "^1.0.6",
+    "@vant/cli": "^2.0.0-beta.2",
     "@vant/doc": "^2.6.1",
     "@vant/eslint-config": "^1.4.0",
     "@vant/markdown-loader": "^2.2.0",

packages/vant-cli/package.json

@@ -67,6 +67,7 @@
     "cross-env": "^6.0.3",
     "css-loader": "^3.2.0",
     "csso": "^4.0.2",
+    "decamelize": "^3.2.0",
     "dependency-tree": "^7.0.2",
     "eslint": "^6.6.0",
     "gh-pages": "2.0.1",

packages/vant-cli/site/desktop/components/Header.vue

@@ -2,15 +2,15 @@
   <div class="van-doc-header">
     <div class="van-doc-row">
       <div class="van-doc-header__top">
-        <a class="van-doc-header__logo" :href="config.logo.href">
+        <a class="van-doc-header__logo">
-          <img :src="config.logo.image">
+          <img :src="config.logo">
-          <span>{{ config.logo.title }}</span>
+          <span>{{ config.title }}</span>
         </a>
 
         <search-input v-if="searchConfig" :lang="lang" :search-config="searchConfig" />
 
         <ul class="van-doc-header__top-nav">
-          <li v-for="item in config.nav.logoLink" class="van-doc-header__top-nav-item">
+          <li v-for="item in config.iconLinks" class="van-doc-header__top-nav-item">
             <a class="van-doc-header__logo-link" target="_blank" :href="item.url">
               <img :src="item.image">
             </a>
@@ -30,10 +30,10 @@
               </transition>
             </span>
           </li>
-
+        <!--
           <li v-if="config.nav.lang" class="van-doc-header__top-nav-item">
             <a class="van-doc-header__cube" :href="langLink">{{ config.nav.lang.text }}</a>
-          </li>
+          </li> -->
         </ul>
       </div>
     </div>

packages/vant-cli/site/desktop/components/index.vue

@@ -2,8 +2,8 @@
   <div class="van-doc">
     <doc-header
       :lang="lang"
+      :config="config"
       :versions="versions"
-      :config="config.header"
       :search-config="searchConfig"
       @switch-version="$emit('switch-version', $event)"
     />

packages/vant-cli/site/desktop/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './App';
-import routes from './router';
+import { routes } from './router';
 import { isMobile } from '../common';
 import '../common/iframe-router';
 

packages/vant-cli/site/desktop/router.js

@@ -1,24 +1,28 @@
+import decamelize from 'decamelize';
 import { documents } from '../../dist/desktop-config';
 
 const routes = [];
 const names = Object.keys(documents);
 
-Object.keys(documents).forEach((name, index) => {
+routes.push({
-  if (index === 0) {
+  path: '/home',
+  component: documents.Home
+});
+
 routes.push({
   path: '*',
-      redirect: () => `/${names[0]}`
+  redirect: '/home'
 });
-  }
 
+names.forEach(name => {
   routes.push({
     name,
     component: documents[name],
-    path: `/${name}`,
+    path: `/${decamelize(name, '-')}`,
     meta: {
       name
     }
   });
 });
 
-export default routes;
+export { routes };

packages/vant-cli/site/mobile/App.vue

@@ -11,9 +11,7 @@
 import DemoNav from './components/DemoNav';
 
 export default {
-  components: {
+  components: { DemoNav }
-    DemoNav
-  }
 };
 </script>
 

packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="van-doc-demo-block">
+  <div class="van-doc-demo-block">
     <h2 class="van-doc-demo-block__title">{{ title }}</h2>
     <slot />
-  </section>
+  </div>
 </template>
 
 <script>

packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-show="title" class="van-doc-demo-nav">
+  <div v-show="title" class="demo-nav">
-    <div class="van-doc-demo-nav__title">{{ title }}</div>
+    <div class="demo-nav__title">{{ title }}</div>
-    <svg class="van-doc-demo-nav__back" viewBox="0 0 1000 1000" @click="onBack">
+    <svg class="demo-nav__back" viewBox="0 0 1000 1000" @click="onBack">
       <path fill="#969799" fill-rule="evenodd" :d="path" />
     </svg>
   </div>
@@ -19,7 +19,8 @@ export default {
 
   computed: {
     title() {
-      const { name } = this.$route.meta || {};
+      const route = this.$route || {};
+      const { name } = route.meta || {};
       return name ? name.replace(/-/g, '') : '';
     }
   },
@@ -33,7 +34,7 @@ export default {
 </script>
 
 <style lang="less">
-.van-doc-demo-nav {
+.demo-nav {
   position: relative;
   height: 56px;
   line-height: 56px;

packages/vant-cli/site/mobile/components/DemoSection.vue

@@ -12,7 +12,7 @@ export default {
 
   computed: {
     demoName() {
-      const { meta } = this.$route;
+      const { meta } = this.$route || {};
       if (meta && meta.name) {
         return `demo-${decamelize(meta.name, '-')}`;
       }

packages/vant-cli/site/mobile/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import DemoBlock from './components/DemoBlock';
 import DemoSection from './components/DemoSection';
-import routes from './router';
+import { routes } from './router';
 import App from './App';
 import '@vant/touch-emulator';
 import '../common/iframe-router';
@@ -18,7 +18,9 @@ const router = new VueRouter({
 });
 
 router.afterEach(() => {
+  if (!router.currentRoute.redirectedFrom) {
     Vue.nextTick(window.syncPath);
+  }
 });
 
 window.vueRouter = router;

packages/vant-cli/site/mobile/router.js

@@ -1,24 +1,29 @@
+import decamelize from 'decamelize';
+import DemoHome from './components/DemoHome';
 import { demos } from '../../dist/mobile-config';
 
 const routes = [];
 const names = Object.keys(demos);
 
-Object.keys(demos).forEach((name, index) => {
+routes.push({
-  if (index === 0) {
+  path: '/home',
+  component: DemoHome
+});
+
 routes.push({
   path: '*',
-      redirect: () => `/${names[0]}`
+  redirect: '/home'
 });
-  }
 
+names.forEach(name => {
   routes.push({
     name,
     component: demos[name],
-    path: `/${name}`,
+    path: `/${decamelize(name, '-')}`,
     meta: {
       name
     }
   });
 });
 
-export default routes;
+export { routes };

packages/vant-cli/src/common/index.ts

@@ -1,4 +1,5 @@
 import fs from 'fs-extra';
+import decamelize from 'decamelize';
 import { join } from 'path';
 import { SRC_DIR } from './constant';
 
@@ -65,3 +66,5 @@ export function pascalize(str: string): string {
     (_, c1, c2) => c1.toUpperCase() + c2
   );
 }
+
+export { decamelize };

packages/vant-cli/src/compiler/gen-mobile-config.ts

@@ -1,36 +1,55 @@
 import { join, relative } from 'path';
 import { existsSync, ensureDirSync, writeFileSync } from 'fs-extra';
-import { pascalize, removeExt, getComponents } from '../common';
+import { decamelize, pascalize, removeExt, getComponents } from '../common';
-import { SRC_DIR, DIST_DIR, MOBILE_CONFIG_FILE } from '../common/constant';
+import {
+  SRC_DIR,
+  DIST_DIR,
+  MOBILE_CONFIG_FILE,
+  CONFIG_FILE
+} from '../common/constant';
 
-function checkDemoExists(component: string) {
+type DemoItem = {
-  const absolutePath = join(SRC_DIR, component, 'demo/index.vue');
+  name: string;
-  return existsSync(absolutePath);
+  path: string;
-}
+};
 
-function genImports(components: string[]) {
+function genImports(demos: DemoItem[]) {
-  return components
+  return demos
-    .filter(component => checkDemoExists(component))
+    .map(item => {
-    .map(component => {
+      const relativePath = relative(DIST_DIR, item.path);
-      const absolutePath = join(SRC_DIR, component, 'demo/index.vue');
+      return `import ${item.name} from '${removeExt(relativePath)}';`;
-      const relativePath = relative(DIST_DIR, absolutePath);
-
-      return `import ${pascalize(component)} from '${removeExt(
-        relativePath
-      )}';`;
     })
     .join('\n');
 }
 
-function genExports(components: string[]) {
+function genExports(demos: DemoItem[]) {
-  return `export const demos = {\n  ${components
+  return `export const demos = {\n  ${demos
-    .filter(component => checkDemoExists(component))
+    .map(item => item.name)
-    .map(component => pascalize(component))
     .join(',\n  ')}\n};`;
 }
 
+function genConfig(demos: DemoItem[]) {
+  // eslint-disable-next-line
+  const config = require(CONFIG_FILE);
+  const demoNames = demos.map(item => decamelize(item.name, '-'));
+
+  config.nav = config.nav.filter((group: any) => {
+    group.items = group.items.filter((item: any) => (demoNames.includes(item.path)));
+    return group.items.length;
+  });
+
+  return `export const config = ${JSON.stringify(config, null, 2)}`;
+}
+
 function genCode(components: string[]) {
-  return `${genImports(components)}\n\n${genExports(components)}\n`;
+  const demos = components
+    .map(component => ({
+      name: pascalize(component),
+      path: join(SRC_DIR, component, 'demo/index.vue')
+    }))
+    .filter(item => existsSync(item.path));
+
+  return `${genImports(demos)}\n\n${genExports(demos)}\n${genConfig(demos)}\n`;
 }
 
 export function genMobileConfig() {

packages/vant-cli/yarn.lock

@@ -692,6 +692,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.7.2"
 
+"@babel/runtime-corejs2@^7.2.0":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.7.2.tgz#5a8c4e2f8688ce58adc9eb1d8320b6e7341f96ce"
+  integrity sha512-GfVnHchOBvIMsweQ13l4jd9lT4brkevnavnVOej5g2y7PpTRY+R4pcQlCjWMZoUla5rMLFzaS/Ll2s59cB1TqQ==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@^7.6.3":
   version "7.7.2"
   resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.7.2.tgz?cache=0&sync_timestamp=1573083187206&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
@@ -3056,6 +3064,11 @@ core-js-compat@^3.1.1:
     browserslist "^4.7.2"
     semver "^6.3.0"
 
+core-js@^2.6.5:
+  version "2.6.10"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
+  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3323,6 +3336,13 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decamelize@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-3.2.0.tgz#84b8e8f4f8c579f938e35e2cc7024907e0090851"
+  integrity sha512-4TgkVUsmmu7oCSyGBm5FvfMoACuoh9EOidm7V5/J2X2djAwwt57qb3F2KMP2ITqODTCSwb+YRV+0Zqrv18k/hw==
+  dependencies:
+    xregexp "^4.2.4"
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npm.taobao.org/decode-uri-component/download/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -11190,6 +11210,13 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.npm.taobao.org/xml-name-validator/download/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha1-auc+Bt5NjG5H+fsYH3jWSK1FfGo=
 
+xregexp@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.2.4.tgz#02a4aea056d65a42632c02f0233eab8e4d7e57ed"
+  integrity sha512-sO0bYdYeJAJBcJA8g7MJJX7UrOZIfJPd8U2SC7B2Dd/J24U0aQNoGp33shCaBSWeb0rD5rh6VBUIXOkGal1TZA==
+  dependencies:
+    "@babel/runtime-corejs2" "^7.2.0"
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npm.taobao.org/xtend/download/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"