feat(cli): support locales

packages/vant-cli/site/common/locales.js

@@ -0,0 +1,30 @@
+const ZH_CN = 'zh-CN';
+const EN_US = 'en-US';
+const CACHE_KEY = 'vant-cli-lang';
+
+let currentLang = ZH_CN;
+
+export function getLang() {
+  return currentLang;
+}
+
+export function setLang(lang) {
+  currentLang = lang;
+  localStorage.setItem(CACHE_KEY, lang);
+}
+
+export function setDefaultLang(langFromConfig) {
+  const cached = localStorage.getItem(CACHE_KEY);
+
+  if (cached) {
+    currentLang = cached;
+    return;
+  }
+
+  if (navigator.language && navigator.language.indexOf('zh-') !== -1) {
+    currentLang = ZH_CN;
+    return;
+  }
+
+  currentLang = langFromConfig || EN_US;
+}

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

@@ -10,21 +10,38 @@
 import VanDoc from './components';
 import { config } from 'site-desktop-shared';
 
+function getPublicPath() {
+  const { site } = config.build || {};
+
+  if (process.env.NODE_ENV === 'production') {
+    return (site && site.publicPath) || '/';
+  }
+
+  return '/';
+}
+
 export default {
   components: {
     VanDoc
   },
 
   data() {
-    const { site } = config.build || {};
-    const isProd = process.env.NODE_ENV === 'production';
-    const prodPublicPath = (site && site.publicPath) || '/';
-    const publicPath = isProd ? prodPublicPath : '/';
-
     return {
-      config: config.site,
-      simulator: `${publicPath}mobile.html${location.hash}`
+      simulator: `${getPublicPath()}mobile.html${location.hash}`
     };
+  },
+
+  computed: {
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        const { lang } = this.$route.meta;
+        return locales[lang];
+      }
+
+      return config.site;
+    }
   }
 };
 </script>
@@ -32,7 +49,7 @@ export default {
 <style lang="less">
 .van-doc-intro {
   padding-top: 20px;
-  font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
   text-align: center;
 
   p {

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

@@ -58,6 +58,7 @@ export default {
   },
 
   data() {
+    console.log(this.config);
     return {
       showVersionPop: false
     };

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

@@ -1,38 +1,11 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import App from './App';
-import { routes } from './router';
-import { isMobile } from '../common';
-import '../common/iframe-router';
+import { router } from './router';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
 
-Vue.use(VueRouter);
-
-if (isMobile) {
-  location.replace('mobile.html' + location.hash);
-}
-
-const router = new VueRouter({
-  mode: 'hash',
-  routes,
-  scrollBehavior(to) {
-    if (to.hash) {
-      return { selector: to.hash };
-    }
-
-    return { x: 0, y: 0 };
-  }
-});
-
-router.afterEach(() => {
-  Vue.nextTick(() => window.syncPath());
-});
-
-window.vueRouter = router;
-
 new Vue({
   el: '#app',
   mounted() {

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

@@ -1,28 +1,98 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 import decamelize from 'decamelize';
-import { documents } from 'site-desktop-shared';
+import { isMobile } from '../common';
+import { config, documents } from 'site-desktop-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
 
-const routes = [];
-const names = Object.keys(documents);
+if (isMobile) {
+  location.replace('mobile.html' + location.hash);
+}
 
-routes.push({
-  path: '/home',
-  component: documents.Home
-});
+const { locales, defaultLang } = config.site;
 
-routes.push({
-  path: '*',
-  redirect: '/home'
-});
+setDefaultLang(defaultLang);
 
-names.forEach(name => {
-  routes.push({
-    name,
-    component: documents[name],
-    path: `/${decamelize(name, '-')}`,
-    meta: {
-      name
+function parseName(name) {
+  if (name.indexOf('_') !== -1) {
+    const pairs = name.split('_');
+    const component = pairs.shift();
+
+    return {
+      component: `${decamelize(component, '-')}`,
+      lang: pairs.join('-')
+    };
+  }
+
+  return {
+    component: `${decamelize(name, '-')}`,
+    lang: ''
+  };
+}
+
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(documents);
+
+  if (locales) {
+    routes.push({
+      path: '*',
+      redirect: `/${getLang()}/`
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: '/'
+    });
+  }
+
+  function addHomeRoute(Home, lang) {
+    routes.push({
+      name: lang,
+      path: `/${lang || ''}`,
+      component: Home,
+      meta: { lang }
+    });
+  }
+
+  names.forEach(name => {
+    const { component, lang } = parseName(name);
+
+    if (component === 'home') {
+      addHomeRoute(documents[name], lang);
     }
+
+    routes.push({
+      name: `${lang}/${component}`,
+      path: `/${lang}/${component}`,
+      component: documents[name],
+      meta: {
+        lang,
+        name: component
+      }
+    });
   });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior(to) {
+    if (to.hash) {
+      return { selector: to.hash };
+    }
+
+    return { x: 0, y: 0 };
+  }
 });
 
-export { routes };
+router.afterEach(() => {
+  Vue.nextTick(() => window.syncPath());
+});
+
+window.vueRouter = router;

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

@@ -8,7 +8,7 @@
     <template v-for="(group, index) in config.nav">
       <demo-home-nav
         :group="group"
-        :base="$vantLang"
+        :lang="lang"
         :key="index"
       />
     </template>
@@ -24,10 +24,21 @@ export default {
     DemoHomeNav
   },
 
-  data() {
-    return {
-      config: config.site
-    };
+  computed: {
+    lang() {
+      const { lang } = this.$route.meta || {};
+      return lang;
+    },
+
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        return locales[this.lang];
+      }
+
+      return config.site;
+    }
   }
 };
 </script>

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

@@ -18,7 +18,7 @@
       <template v-for="(navItem, index) in group.items">
         <van-cell
           :key="index"
-          :to="'/' + navItem.path"
+          :to="`${base}/${navItem.path}`"
           :title="navItem.title"
           is-link
         />
@@ -39,7 +39,7 @@ export default {
   },
 
   props: {
-    base: String,
+    lang: String,
     group: Object
   },
 
@@ -47,6 +47,12 @@ export default {
     return {
       active: []
     };
+  },
+
+  computed: {
+    base() {
+      return this.lang ? `/${this.lang}` : '';
+    }
   }
 };
 </script>

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

@@ -19,8 +19,7 @@ export default {
 
   computed: {
     title() {
-      const route = this.$route || {};
-      const { name } = route.meta || {};
+      const { name } = this.$route.meta || {};
       return name ? name.replace(/-/g, '') : '';
     }
   },

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

@@ -1,34 +1,17 @@
 import Vue from 'vue';
-import VueRouter from 'vue-router';
 import DemoBlock from './components/DemoBlock';
 import DemoSection from './components/DemoSection';
-import { routes } from './router';
+import { router } from './router';
 import App from './App';
 import '@vant/touch-emulator';
-import '../common/iframe-router';
 
 if (process.env.NODE_ENV !== 'production') {
   Vue.config.productionTip = false;
 }
 
-Vue.use(VueRouter);
 Vue.component(DemoBlock.name, DemoBlock);
 Vue.component(DemoSection.name, DemoSection);
 
-const router = new VueRouter({
-  mode: 'hash',
-  routes,
-  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 }
-});
-
-router.afterEach(() => {
-  if (!router.currentRoute.redirectedFrom) {
-    Vue.nextTick(window.syncPath);
-  }
-});
-
-window.vueRouter = router;
-
 new Vue({
   el: '#app',
   render: h => h(App),

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

@@ -1,29 +1,86 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
 import decamelize from 'decamelize';
 import DemoHome from './components/DemoHome';
-import { demos } from 'site-mobile-shared';
+import { demos, config } from 'site-mobile-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
 
-const routes = [];
-const names = Object.keys(demos);
+const { locales, defaultLang } = config.site;
 
-routes.push({
-  path: '/home',
-  component: DemoHome
-});
+setDefaultLang(defaultLang);
 
-routes.push({
-  path: '*',
-  redirect: '/home'
-});
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(demos);
+  const langs = locales ? Object.keys(locales) : [];
 
-names.forEach(name => {
-  routes.push({
-    name,
-    component: demos[name],
-    path: `/${decamelize(name, '-')}`,
-    meta: {
-      name
+  if (langs.length) {
+    routes.push({
+      path: '*',
+      redirect: () => `/${getLang()}/`
+    });
+
+    langs.forEach(lang => {
+      routes.push({
+        path: `/${lang}`,
+        component: DemoHome,
+        meta: { lang }
+      });
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: () => '/'
+    });
+
+    routes.push({
+      path: '',
+      component: DemoHome
+    });
+  }
+
+  names.forEach(name => {
+    const component = decamelize(name, '-');
+
+    if (langs.length) {
+      langs.forEach(lang => {
+        routes.push({
+          name: `${lang}/${component}`,
+          path: `/${lang}/${component}`,
+          component: demos[name],
+          meta: {
+            name
+          }
+        });
+      });
+    } else {
+      routes.push({
+        name,
+        path: `/${component}`,
+        component: demos[name],
+        meta: {
+          name
+        }
+      });
     }
   });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 }
 });
 
-export { routes };
+router.afterEach(() => {
+  if (!router.currentRoute.redirectedFrom) {
+    Vue.nextTick(window.syncPath);
+  }
+});
+
+window.vueRouter = router;

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -67,12 +67,8 @@ type CompileSfcOptions = {
   skipStyle?: boolean;
 };
 
-export async function compileSfc(
-  filePath: string,
-  options: CompileSfcOptions = {}
-): Promise<any> {
+export function parseSfc(filePath: string) {
   const source = readFileSync(filePath, 'utf-8');
-  const jsFilePath = replaceExt(filePath, '.js');
 
   const descriptor = compileUtils.parse({
     source,
@@ -80,9 +76,17 @@ export async function compileSfc(
     needMap: false
   } as any);
 
-  const { template, styles } = descriptor;
+  return descriptor;
+}
 
+export async function compileSfc(
+  filePath: string,
+  options: CompileSfcOptions = {}
+): Promise<any> {
   const tasks = [remove(filePath)];
+  const jsFilePath = replaceExt(filePath, '.js');
+  const descriptor = parseSfc(filePath);
+  const { template, styles } = descriptor;
 
   // compile js part
   if (descriptor.script) {

packages/vant-cli/src/compiler/gen-site-desktop-shared.ts

@@ -4,6 +4,7 @@ import { existsSync } from 'fs-extra';
 import {
   pascalize,
   removeExt,
+  getVantConfig,
   getComponents,
   smartOutputFile
 } from '../common';
@@ -19,23 +20,59 @@ type DocumentItem = {
   path: string;
 };
 
+function formatName(component: string, lang?: string) {
+  component = pascalize(component);
+
+  if (lang) {
+    return `${component}_${lang.replace('-', '_')}`;
+  }
+
+  return component;
+}
+
+/**
+ * i18n mode:
+ *   - action-sheet/README.md       => ActionSheet_EnUS
+ *   - action-sheet/README.zh-CN.md => ActionSheet_ZhCN
+ *
+ * default mode:
+ *   - action-sheet/README.md => ActionSheet
+ */
 function resolveDocuments(components: string[]): DocumentItem[] {
-  const componentDocs = components
-    .filter(component => {
-      const absolutePath = join(SRC_DIR, component, 'README.md');
-      return existsSync(absolutePath);
-    })
-    .map(component => ({
-      name: pascalize(component),
-      path: join(SRC_DIR, component, 'README.md')
-    }));
+  const vantConfig = getVantConfig();
+  const { locales, defaultLang } = vantConfig.site;
 
-  const staticDocs = glob.sync(join(DOCS_DIR, '**/*.md')).map(path => ({
-    name: pascalize(parse(path).name),
-    path
-  }));
+  const docs: DocumentItem[] = [];
 
-  return [...componentDocs, ...staticDocs];
+  if (locales) {
+    const langs = Object.keys(locales);
+    langs.forEach(lang => {
+      const fileName = lang === defaultLang ? 'README.md' : `README.${lang}.md`;
+      components.forEach(component => {
+        docs.push({
+          name: formatName(component, lang),
+          path: join(SRC_DIR, component, fileName)
+        });
+      });
+    });
+  } else {
+    components.forEach(component => {
+      docs.push({
+        name: formatName(component),
+        path: join(SRC_DIR, component, 'README.md')
+      });
+    });
+  }
+
+  const staticDocs = glob.sync(join(DOCS_DIR, '**/*.md')).map(path => {
+    const pairs = parse(path).name.split('.');
+    return {
+      name: formatName(pairs[0], pairs[1] || defaultLang),
+      path
+    };
+  });
+
+  return [...staticDocs, ...docs.filter(item => existsSync(item.path))];
 }
 
 function genImportDocuments(items: DocumentItem[]) {

packages/vant-cli/src/compiler/gen-site-mobile-shared.ts

@@ -40,12 +40,25 @@ function genConfig(demos: DemoItem[]) {
   const vantConfig = getVantConfig();
   const demoNames = demos.map(item => decamelize(item.name, '-'));
 
-  vantConfig.site.nav = vantConfig.site.nav.filter((group: any) => {
-    group.items = group.items.filter((item: any) =>
-      demoNames.includes(item.path)
-    );
-    return group.items.length;
-  });
+  function demoFilter(nav: any[]) {
+    return nav.filter(group => {
+      group.items = group.items.filter((item: any) =>
+        demoNames.includes(item.path)
+      );
+      return group.items.length;
+    });
+  }
+
+  const { nav, locales } = vantConfig.site;
+  if (locales) {
+    Object.keys(locales).forEach((lang: string) => {
+      if (locales[lang].nav) {
+        locales[lang].nav = demoFilter(locales[lang].nav);
+      }
+    });
+  } else if (nav) {
+    vantConfig.site.nav = demoFilter(nav);
+  }
 
   return `export const config = ${JSON.stringify(vantConfig, null, 2)}`;
 }

vant.config.js

@@ -14,11 +14,11 @@ module.exports = {
         logo: 'https://img.yzcdn.cn/vant/logo.png',
         links: [
           {
-            image: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
-            url: 'vant-weapp'
+            logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
+            url: '/vant-weapp'
           },
           {
-            image: 'https://b.yzcdn.cn/vant/logo/github.svg',
+            logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
             url: 'https://github.com/youzan/vant'
           }
         ],
@@ -27,7 +27,7 @@ module.exports = {
             title: '开发指南',
             items: [
               {
-                path: 'intro',
+                path: 'home',
                 title: '介绍'
               },
               {
@@ -352,11 +352,11 @@ module.exports = {
         logo: 'https://img.yzcdn.cn/vant/logo.png',
         links: [
           {
-            image: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
-            url: 'vant-weapp'
+            logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
+            url: '/vant-weapp'
           },
           {
-            image: 'https://b.yzcdn.cn/vant/logo/github.svg',
+            logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
             url: 'https://github.com/youzan/vant'
           }
         ],
@@ -365,7 +365,7 @@ module.exports = {
             title: 'Essentials',
             items: [
               {
-                path: 'intro',
+                path: 'home',
                 title: 'Introduction'
               },
               {