From 764cad3393846fbadf486ac070296db6ee99b58a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 29 May 2019 11:23:10 +0800 Subject: [PATCH] [Doc] update demo --- build/build-entry.js | 21 ++------------ docs/src/WapApp.vue | 1 + docs/src/demo-common.js | 30 +++++++++----------- docs/src/demo-entry.js | 63 ----------------------------------------- docs/src/index.js | 23 ++++++++------- docs/src/mobile.js | 15 +++++----- docs/src/router.js | 31 +++++++------------- docs/src/utils/i18n.js | 9 +----- docs/src/utils/index.js | 7 +++++ docs/src/utils/lang.js | 1 + package.json | 2 +- yarn.lock | 14 +++------ 12 files changed, 61 insertions(+), 156 deletions(-) delete mode 100644 docs/src/demo-entry.js diff --git a/build/build-entry.js b/build/build-entry.js index b4e6a93b8..4d33d44ae 100644 --- 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(); diff --git a/docs/src/WapApp.vue b/docs/src/WapApp.vue index 79d8466f1..cf3e4624b 100644 --- a/docs/src/WapApp.vue +++ b/docs/src/WapApp.vue @@ -8,6 +8,7 @@ @click-left="onBack" > { - 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; } diff --git a/docs/src/demo-entry.js b/docs/src/demo-entry.js deleted file mode 100644 index d3c4412e9..000000000 --- a/docs/src/demo-entry.js +++ /dev/null @@ -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') -}; diff --git a/docs/src/index.js b/docs/src/index.js index 15dc5f698..e18d17f69 100644 --- 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(() => { diff --git a/docs/src/mobile.js b/docs/src/mobile.js index 8c9f5aab0..f17b55c51 100644 --- 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()); } diff --git a/docs/src/router.js b/docs/src/router.js index de212ac21..3ae381b6e 100644 --- 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; } diff --git a/docs/src/utils/i18n.js b/docs/src/utils/i18n.js index b595c4678..cd867fba3 100644 --- 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; diff --git a/docs/src/utils/index.js b/docs/src/utils/index.js index 583d53634..aa024122c 100644 --- 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 }; diff --git a/docs/src/utils/lang.js b/docs/src/utils/lang.js index 6236fd110..1a1cfa028 100644 --- a/docs/src/utils/lang.js +++ b/docs/src/utils/lang.js @@ -12,6 +12,7 @@ const langMap = { messages: zhCN } }; + let currentLang = ''; function getDefaultLang() { diff --git a/package.json b/package.json index f55441d13..43bcbf988 100644 --- 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", diff --git a/yarn.lock b/yarn.lock index 2e89eb899..1e9eac7fa 100644 --- 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"