[Doc] update demo

build/build-entry.js

@@ -8,7 +8,7 @@ const version = process.env.VERSION || packageJson.version;
 const tips = `/* eslint-disable */
 // This file is auto gererated by build/build-entry.js`;
 
-function buildVantEntry() {
+function buildEntry() {
   const uninstallComponents = [
     'Locale',
     'Lazyload',
@@ -59,21 +59,4 @@ export default {
   fs.writeFileSync(path.join(__dirname, '../packages/index.ts'), content);
 }
 
-function buildDemoEntry() {
+buildEntry();
-  const dir = path.join(__dirname, '../packages');
-  const demos = fs.readdirSync(dir)
-    .filter(name => fs.existsSync(path.join(dir, `${name}/demo/index.vue`)))
-    .map(name => `'${name}': () => wrapper(import('../../packages/${name}/demo'), '${name}')`);
-
-  const content = `${tips}
-import { wrapper } from './demo-common';
-
-export default {
-  ${demos.join(',\n  ')}
-};
-`;
-  fs.writeFileSync(path.join(dir, '../docs/src/demo-entry.js'), content);
-}
-
-buildVantEntry();
-buildDemoEntry();

docs/src/WapApp.vue

@@ -8,6 +8,7 @@
       @click-left="onBack"
     >
       <a
+        v-if="showNav"
         slot="right"
         :href="demoLink"
         target="_blank"

docs/src/demo-common.js

@@ -80,9 +80,8 @@ Locale.add({
   }
 });
 
-export function wrapper(promise, name) {
+export function demoWrapper(module, name) {
-  return promise.then(component => {
+  const component = module.default;
-    component = component.default;
   name = 'demo-' + name;
   component.name = name;
 
@@ -97,5 +96,4 @@ export function wrapper(promise, name) {
   }
 
   return component;
-  });
 }

docs/src/demo-entry.js

@@ -1,63 +0,0 @@
-/* eslint-disable */
-// This file is auto gererated by build/build-entry.js
-import { wrapper } from './demo-common';
-
-export default {
-  'action-sheet': () => wrapper(import('../../packages/action-sheet/demo'), 'action-sheet'),
-  'address-edit': () => wrapper(import('../../packages/address-edit/demo'), 'address-edit'),
-  'address-list': () => wrapper(import('../../packages/address-list/demo'), 'address-list'),
-  'area': () => wrapper(import('../../packages/area/demo'), 'area'),
-  'button': () => wrapper(import('../../packages/button/demo'), 'button'),
-  'card': () => wrapper(import('../../packages/card/demo'), 'card'),
-  'cell': () => wrapper(import('../../packages/cell/demo'), 'cell'),
-  'checkbox': () => wrapper(import('../../packages/checkbox/demo'), 'checkbox'),
-  'circle': () => wrapper(import('../../packages/circle/demo'), 'circle'),
-  'col': () => wrapper(import('../../packages/col/demo'), 'col'),
-  'collapse': () => wrapper(import('../../packages/collapse/demo'), 'collapse'),
-  'contact-card': () => wrapper(import('../../packages/contact-card/demo'), 'contact-card'),
-  'coupon-list': () => wrapper(import('../../packages/coupon-list/demo'), 'coupon-list'),
-  'datetime-picker': () => wrapper(import('../../packages/datetime-picker/demo'), 'datetime-picker'),
-  'dialog': () => wrapper(import('../../packages/dialog/demo'), 'dialog'),
-  'dropdown-menu': () => wrapper(import('../../packages/dropdown-menu/demo'), 'dropdown-menu'),
-  'field': () => wrapper(import('../../packages/field/demo'), 'field'),
-  'goods-action': () => wrapper(import('../../packages/goods-action/demo'), 'goods-action'),
-  'icon': () => wrapper(import('../../packages/icon/demo'), 'icon'),
-  'image': () => wrapper(import('../../packages/image/demo'), 'image'),
-  'image-preview': () => wrapper(import('../../packages/image-preview/demo'), 'image-preview'),
-  'index-bar': () => wrapper(import('../../packages/index-bar/demo'), 'index-bar'),
-  'lazyload': () => wrapper(import('../../packages/lazyload/demo'), 'lazyload'),
-  'list': () => wrapper(import('../../packages/list/demo'), 'list'),
-  'loading': () => wrapper(import('../../packages/loading/demo'), 'loading'),
-  'nav-bar': () => wrapper(import('../../packages/nav-bar/demo'), 'nav-bar'),
-  'notice-bar': () => wrapper(import('../../packages/notice-bar/demo'), 'notice-bar'),
-  'notify': () => wrapper(import('../../packages/notify/demo'), 'notify'),
-  'number-keyboard': () => wrapper(import('../../packages/number-keyboard/demo'), 'number-keyboard'),
-  'pagination': () => wrapper(import('../../packages/pagination/demo'), 'pagination'),
-  'panel': () => wrapper(import('../../packages/panel/demo'), 'panel'),
-  'password-input': () => wrapper(import('../../packages/password-input/demo'), 'password-input'),
-  'picker': () => wrapper(import('../../packages/picker/demo'), 'picker'),
-  'popup': () => wrapper(import('../../packages/popup/demo'), 'popup'),
-  'progress': () => wrapper(import('../../packages/progress/demo'), 'progress'),
-  'pull-refresh': () => wrapper(import('../../packages/pull-refresh/demo'), 'pull-refresh'),
-  'radio': () => wrapper(import('../../packages/radio/demo'), 'radio'),
-  'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'),
-  'search': () => wrapper(import('../../packages/search/demo'), 'search'),
-  'sidebar': () => wrapper(import('../../packages/sidebar/demo'), 'sidebar'),
-  'skeleton': () => wrapper(import('../../packages/skeleton/demo'), 'skeleton'),
-  'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'),
-  'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
-  'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
-  'steps': () => wrapper(import('../../packages/steps/demo'), 'steps'),
-  'style': () => wrapper(import('../../packages/style/demo'), 'style'),
-  'submit-bar': () => wrapper(import('../../packages/submit-bar/demo'), 'submit-bar'),
-  'swipe': () => wrapper(import('../../packages/swipe/demo'), 'swipe'),
-  'swipe-cell': () => wrapper(import('../../packages/swipe-cell/demo'), 'swipe-cell'),
-  'switch': () => wrapper(import('../../packages/switch/demo'), 'switch'),
-  'switch-cell': () => wrapper(import('../../packages/switch-cell/demo'), 'switch-cell'),
-  'tab': () => wrapper(import('../../packages/tab/demo'), 'tab'),
-  'tabbar': () => wrapper(import('../../packages/tabbar/demo'), 'tabbar'),
-  'tag': () => wrapper(import('../../packages/tag/demo'), 'tag'),
-  'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
-  'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
-  'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader')
-};

docs/src/index.js

@@ -3,21 +3,24 @@ import VueRouter from 'vue-router';
 import VantDoc from '@vant/doc';
 import App from './DocsApp';
 import routes from './router';
-import { isMobile } from './utils';
+import { isMobile, importAll } from './utils';
 
-Vue.use(VueRouter).use(VantDoc);
-
-const router = new VueRouter({
-  mode: 'hash',
-  routes: routes()
-});
-
-router.beforeEach((route, redirect, next) => {
 if (isMobile) {
   location.replace('mobile.html' + location.hash);
 }
-  document.title = route.meta.title || document.title;
+
-  next();
+Vue.use(VueRouter).use(VantDoc);
+
+const docs = {};
+const docsFromMarkdown = require.context('../markdown', false, /(en-US|zh-CN)\.md$/);
+const docsFromPackages = require.context('../../packages', true, /(en-US|zh-CN)\.md$/);
+
+importAll(docs, docsFromMarkdown);
+importAll(docs, docsFromPackages);
+
+const router = new VueRouter({
+  mode: 'hash',
+  routes: routes({ componentMap: docs })
 });
 
 router.afterEach(() => {

docs/src/mobile.js

@@ -1,26 +1,25 @@
 import '../../packages/index.less';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import { progress } from '@vant/doc';
 import App from './WapApp';
 import routes from './router';
+import { importAll } from './utils';
 import '@vant/touch-emulator';
 
+const componentMap = {};
+const context = require.context('../../packages', true, /demo\/index.vue$/);
+
+importAll(componentMap, context);
+
 const router = new VueRouter({
   mode: 'hash',
-  routes: routes(true),
+  routes: routes({ mobile: true, componentMap }),
   scrollBehavior(to, from, savedPosition) {
     return savedPosition || { x: 0, y: 0 };
   }
 });
 
-router.beforeEach((route, redirect, next) => {
-  progress.start();
-  next();
-});
-
 router.afterEach(() => {
-  progress.done();
   if (!router.currentRoute.redirectedFrom) {
     Vue.nextTick(() => window.syncPath());
   }

docs/src/router.js

@@ -1,25 +1,11 @@
 import Vue from 'vue';
 import docConfig from './doc.config';
 import DemoList from './components/DemoList';
-import componentDemos from './demo-entry';
 import DemoPages from './components/DemoPages';
+import { demoWrapper } from './demo-common';
 import './utils/iframe-router';
 
-const docs = {};
+const registerRoute = ({ mobile, componentMap }) => {
-
-function importAll(map, r) {
-  r.keys().forEach(key => {
-    map[key] = r(key);
-  });
-}
-
-const docsFromMarkdown = require.context('../markdown', false, /(en-US|zh-CN)\.md$/);
-const docsFromPackages = require.context('../../packages', true, /(en-US|zh-CN)\.md$/);
-
-importAll(docs, docsFromMarkdown);
-importAll(docs, docsFromPackages);
-
-const registerRoute = isDemo => {
   const route = [
     {
       path: '*',
@@ -28,7 +14,7 @@ const registerRoute = isDemo => {
   ];
 
   Object.keys(docConfig).forEach(lang => {
-    if (isDemo) {
+    if (mobile) {
       route.push({
         path: `/${lang}`,
         component: DemoList,
@@ -49,12 +35,15 @@ const registerRoute = isDemo => {
         let component;
         if (path === 'demo') {
           component = DemoPages;
-        } else if (isDemo) {
+        } else if (mobile) {
-          component = componentDemos[path];
+          const module = componentMap[`./${path}/demo/index.vue`];
+          if (module) {
+            component = demoWrapper(module, path);
+          }
         } else {
           const module =
-            docs[`./${path}/${lang}.md`] ||
+            componentMap[`./${path}/${lang}.md`] ||
-            docs[`./${path}.${lang}.md`];
+            componentMap[`./${path}.${lang}.md`];
 
           component = module.default;
         }

docs/src/utils/i18n.js

@@ -6,15 +6,8 @@ export default {
     $t() {
       const { name } = this.$options;
       const prefix = name ? camelize(name) + '.' : '';
-
-      if (!this.$vantMessages) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error('[Vant] Locale not correctly registered');
-        }
-        return () => '';
-      }
-
       const messages = this.$vantMessages[this.$vantLang];
+
       return (path, ...args) => {
         const message = get(messages, prefix + path) || get(messages, path);
         return typeof message === 'function' ? message(...args) : message;

docs/src/utils/index.js

@@ -20,7 +20,14 @@ function iframeReady(iframe, callback) {
 const ua = navigator.userAgent.toLowerCase();
 const isMobile = /ios|iphone|ipod|ipad|android/.test(ua);
 
+function importAll(map, r) {
+  r.keys().forEach(key => {
+    map[key] = r(key);
+  });
+}
+
 export {
   isMobile,
+  importAll,
   iframeReady
 };

docs/src/utils/lang.js

@@ -12,6 +12,7 @@ const langMap = {
     messages: zhCN
   }
 };
+
 let currentLang = '';
 
 function getDefaultLang() {

package.json

@@ -71,7 +71,7 @@
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.13",
-    "@vant/doc": "^2.2.4",
+    "@vant/doc": "^2.3.0",
     "@vant/eslint-config": "^1.1.2",
     "@vant/markdown-loader": "^2.0.0",
     "@vant/touch-emulator": "^1.0.0",

yarn.lock

@@ -1071,17 +1071,16 @@
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
-"@vant/doc@^2.2.4":
+"@vant/doc@^2.3.0":
-  version "2.2.4"
+  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.2.4.tgz#b32941edaab7fbc63a224bae746ca4ab8733df0b"
+  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.3.0.tgz#27ab1d8cf763a5e5128b205a217daae4601ce703"
-  integrity sha512-KmS5mf5SJAThxjGDCRPKOYw89Y28iyktvzfBDpqWimW9S3oDY24GMlf5sJ/ehbTr0osMe4Xa2yiqGmkfGIoIEQ==
+  integrity sha512-O6tk9UN9DXfHA8VJljr8tDtvaIIRUhHbKo+BIpanucfe4wJiWYJ/L793itulh2ussKdb8oO8i3GDnymZ3zkxAA==
   dependencies:
     cheerio "0.22.0"
     commander "^2.17.1"
     decamelize "^1.2.0"
     docsearch.js "^2.6.3"
     fs-extra "^4.0.2"
-    nprogress "^0.2.0"
     shelljs "^0.8.2"
 
 "@vant/eslint-config@^1.1.2":
@@ -6840,11 +6839,6 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nprogress@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
-  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
-
 nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"