[Doc] update demo

2025-04-06 03:57:59 +08:00 · 2019-05-29 11:23:10 +08:00 · 2019-05-29 11:23:10 +08:00 · 764cad3393
commit 764cad3393
parent 3bc5a93941
12 changed files with 61 additions and 156 deletions
--- a/build/build-entry.js
+++ b/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() {
-  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();
+buildEntry();
--- a/docs/src/WapApp.vue
+++ b/docs/src/WapApp.vue
@ -8,6 +8,7 @@
      @click-left="onBack"
    >
      <a
+        v-if="showNav"
        slot="right"
        :href="demoLink"
        target="_blank"
--- a/docs/src/demo-common.js
+++ b/docs/src/demo-common.js
@ -80,22 +80,20 @@ Locale.add({
  }
 });

-export function wrapper(promise, name) {
-  return promise.then(component => {
-    component = component.default;
-    name = 'demo-' + name;
-    component.name = name;
+export function demoWrapper(module, name) {
+  const component = module.default;
+  name = 'demo-' + name;
+  component.name = name;

-    const { i18n: config } = component;
-    if (config) {
-      const formattedI18n = {};
-      const camelizedName = camelize(name);
-      Object.keys(config).forEach(key => {
-        formattedI18n[key] = { [camelizedName]: config[key] };
-      });
-      Locale.add(formattedI18n);
-    }
+  const { i18n: config } = component;
+  if (config) {
+    const formattedI18n = {};
+    const camelizedName = camelize(name);
+    Object.keys(config).forEach(key => {
+      formattedI18n[key] = { [camelizedName]: config[key] };
+    });
+    Locale.add(formattedI18n);
+  }

-    return component;
-  });
+  return component;
 }
--- a/docs/src/demo-entry.js
+++ b/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')
-};
--- a/docs/src/index.js
+++ b/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';
+
+if (isMobile) {
+  location.replace('mobile.html' + location.hash);
+}

 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()
-});
-
-router.beforeEach((route, redirect, next) => {
-  if (isMobile) {
-    location.replace('mobile.html' + location.hash);
-  }
-  document.title = route.meta.title || document.title;
-  next();
+  routes: routes({ componentMap: docs })
 });

 router.afterEach(() => {
--- a/docs/src/mobile.js
+++ b/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());
  }
--- a/docs/src/router.js
+++ b/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 = {};
-
-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 registerRoute = ({ mobile, componentMap }) => {
  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) {
-          component = componentDemos[path];
+        } else if (mobile) {
+          const module = componentMap[`./${path}/demo/index.vue`];
+          if (module) {
+            component = demoWrapper(module, path);
+          }
        } else {
          const module =
-            docs[`./${path}/${lang}.md`] ||
-            docs[`./${path}.${lang}.md`];
+            componentMap[`./${path}/${lang}.md`] ||
+            componentMap[`./${path}.${lang}.md`];

          component = module.default;
        }
--- a/docs/src/utils/i18n.js
+++ b/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;
--- a/docs/src/utils/index.js
+++ b/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
 };
--- a/docs/src/utils/lang.js
+++ b/docs/src/utils/lang.js
@ -12,6 +12,7 @@ const langMap = {
    messages: zhCN
  }
 };
+
 let currentLang = '';

 function getDefaultLang() {
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/yarn.lock
@ -1071,17 +1071,16 @@
    lodash.unescape "4.0.1"
    semver "5.5.0"

-"@vant/doc@^2.2.4":
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.2.4.tgz#b32941edaab7fbc63a224bae746ca4ab8733df0b"
-  integrity sha512-KmS5mf5SJAThxjGDCRPKOYw89Y28iyktvzfBDpqWimW9S3oDY24GMlf5sJ/ehbTr0osMe4Xa2yiqGmkfGIoIEQ==
+"@vant/doc@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@vant/doc/-/doc-2.3.0.tgz#27ab1d8cf763a5e5128b205a217daae4601ce703"
+  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"