From cbcd2978731f3b7f8850da702beb744fe8e77831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BD=90=E7=9A=93?= Date: Sun, 28 Feb 2021 18:21:59 +0800 Subject: [PATCH] =?UTF-8?q?fix(cli,ui):=20=E5=AE=8C=E6=88=90=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=BA=93=20pc=E6=96=87=E6=A1=A3=20mobile=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E7=9A=84i18n=E8=AE=BE=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/cli, @varlet/ui --- package.json | 2 +- packages/varlet-cli/site/mobile/App.vue | 4 +- packages/varlet-cli/site/mobile/main.ts | 18 ++- packages/varlet-cli/site/pc/App.vue | 26 ++-- packages/varlet-cli/site/pc/main.ts | 14 +- packages/varlet-cli/site/site.config.json | 24 ++-- packages/varlet-cli/src/commands/create.ts | 36 +----- .../varlet-cli/src/compiler/compileRoutes.ts | 121 ++++++++++++------ packages/varlet-cli/src/shared/constant.ts | 2 +- packages/varlet-cli/varlet.default.config.js | 6 +- packages/varlet-ui/docs/home.en-US.md | 1 + packages/varlet-ui/docs/home.zh-CN.md | 1 + packages/varlet-ui/docs/quickstart.en-US.md | 1 + packages/varlet-ui/docs/quickstart.zh-CN.md | 1 + .../src/button/example/locale/index.ts | 20 +-- packages/varlet-ui/src/home/example/index.vue | 17 +++ .../src/home/example/locale/en-US.ts | 1 + .../src/home/example/locale/index.ts | 20 +++ .../src/home/example/locale/zh-CN.ts | 1 + packages/varlet-ui/src/locale/index.ts | 47 ++++--- packages/varlet-ui/src/utils/components.ts | 7 +- packages/varlet-ui/varlet.config.js | 18 ++- yarn.lock | 9 -- 23 files changed, 238 insertions(+), 159 deletions(-) create mode 100644 packages/varlet-ui/docs/home.en-US.md create mode 100644 packages/varlet-ui/docs/home.zh-CN.md create mode 100644 packages/varlet-ui/docs/quickstart.en-US.md create mode 100644 packages/varlet-ui/docs/quickstart.zh-CN.md create mode 100644 packages/varlet-ui/src/home/example/index.vue create mode 100644 packages/varlet-ui/src/home/example/locale/en-US.ts create mode 100644 packages/varlet-ui/src/home/example/locale/index.ts create mode 100644 packages/varlet-ui/src/home/example/locale/zh-CN.ts diff --git a/package.json b/package.json index c4d8a19dae5..b7311a26184 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "bootstrap": "yarn && node scripts/bootstrap.js", "commit": "git-cz", - "publish": "lerna publish" + "publish": "yarn bootstrap && lerna publish" }, "config": { "commitizen": { diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue index fb2be9b92f3..f8638c61ad4 100644 --- a/packages/varlet-cli/site/mobile/App.vue +++ b/packages/varlet-cli/site/mobile/App.vue @@ -15,6 +15,7 @@ export default defineComponent({ setup() { const componentName: Ref = ref('') const route = useRoute() + watch( () => route.path, (to: string) => { @@ -23,6 +24,7 @@ export default defineComponent({ componentName.value = componentNameInner[0]?.toUpperCase() + componentNameInner.slice(1) } ) + return { componentName, } @@ -31,7 +33,7 @@ export default defineComponent({ ` - const localeTemplate = `\ -import zhCN from './zh-CN' -import enUS from './en-US' -import { ref, Ref } from 'vue' - -export const packs: Record = { - 'zh-CN': zhCN, - 'en-US': enUS -} - -export const pack: Ref> = ref({}) - -export function use(lang: string) { - if (!packs[lang]) { - return - } - - pack.value = packs[lang] -} - -use('zh-CN') -` const componentDir = resolve(SRC_DIR, name) const testsDir = resolve(SRC_DIR, name, TESTS_DIR_NAME) const exampleDir = resolve(SRC_DIR, name, EXAMPLE_DIR_NAME) const docsDir = resolve(SRC_DIR, name, DOCS_DIR_NAME) - const localeDir = resolve(exampleDir, LOCALE_DIR_NAME) if (pathExistsSync(componentDir)) { logger.error('component directory is existed') return } - await Promise.all([ - mkdirs(componentDir), - mkdirs(testsDir), - mkdirs(exampleDir), - mkdirs(docsDir), - mkdirs(localeDir) - ]) + await Promise.all([mkdirs(componentDir), mkdirs(testsDir), mkdirs(exampleDir), mkdirs(docsDir)]) await Promise.all([ writeFile(resolve(componentDir, `${bigCamelize(name)}.vue`), vueTemplate), writeFile(resolve(componentDir, 'index.ts'), indexTemplate), writeFile(resolve(testsDir, 'index.spec.js'), testsTemplate), writeFile(resolve(exampleDir, 'index.vue'), exampleTemplate), - writeFile(resolve(localeDir, 'index.ts'), localeTemplate), writeFile(resolve(docsDir, 'zh-CN.md'), ''), writeFile(resolve(docsDir, 'en-US.md'), ''), - writeFile(resolve(localeDir, 'zh-CN.ts'), 'export default {}'), - writeFile(resolve(localeDir, 'en-US.ts'), 'export default {}'), ]) logger.success('create success!') diff --git a/packages/varlet-cli/src/compiler/compileRoutes.ts b/packages/varlet-cli/src/compiler/compileRoutes.ts index 8423308e0ea..932c6116063 100644 --- a/packages/varlet-cli/src/compiler/compileRoutes.ts +++ b/packages/varlet-cli/src/compiler/compileRoutes.ts @@ -3,57 +3,89 @@ import { DOCS_DIR_NAME, EXAMPLE_DIR_INDEX, EXAMPLE_DIR_NAME, + ROOT_DOCS_DIR, SITE_MOBILE_ROUTES, SITE_PC_ROUTES, SRC_DIR, } from '../shared/constant' import { pathExistsSync, readdir, readdirSync, writeFile } from 'fs-extra' import { resolve } from 'path' -import { isDir } from '../shared/fsUtils' +import { isMD } from '../shared/fsUtils' -interface I18MDPath { - [key: string]: string[] +export function getExampleRoutePath(examplePath: string): string { + return '/' + examplePath.replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '').replace(/.*\//g, '') } -export function resolveMobileSiteRoutePath(exampleComponentPath: string): string { - const componentName: string = exampleComponentPath - .replace(`/${EXAMPLE_DIR_NAME}/index.vue`, '') - .replace(/.*\//g, '') +export function getComponentDocsRoutePath(componentDocsPath: string): string { + const slashPart = componentDocsPath.split('/') + const mdName = slashPart.slice(-1)?.[0] ?? '' + const language = mdName.split('.')?.[0] + const routePath = slashPart.slice(-3)?.[0] - return `/${componentName}` + return `/${language}/${routePath}` } -export function resolvePcSiteRoutePath(mdPath: string, componentName: string): string { - const language = mdPath.split('/').slice(-1)[0].split('.')[0] - return `/${language}/${componentName}` +export function getRootDocsRoutePath(rootDocsPath: string): string { + const mdName = rootDocsPath.split('/').slice(-1)?.[0] + const slashPart = mdName.split('.') + const [routePath, language] = slashPart + + return `/${language}/${routePath}` } -export async function findExampleComponentPaths(): Promise { - const srcDir: string[] = await readdir(SRC_DIR) - return srcDir - .filter((filename: string) => pathExistsSync(resolve(SRC_DIR, filename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX))) - .map((validFilename: string) => slash(resolve(SRC_DIR, validFilename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX))) +export async function findExamplePaths(): Promise { + const dir: string[] = await readdir(SRC_DIR) + + const buildPath = (filename: string) => resolve(SRC_DIR, filename, EXAMPLE_DIR_NAME, EXAMPLE_DIR_INDEX) + + const existPath = (filename: string) => pathExistsSync(buildPath(filename)) + + const slashPath = (filename: string) => slash(buildPath(filename)) + + return dir.filter(existPath).map(slashPath) } -export async function findDocsMDPaths(): Promise { - const srcDir: string[] = await readdir(SRC_DIR) - return srcDir - .filter((filename: string) => isDir(resolve(SRC_DIR, filename))) - .reduce((i18MdPath: I18MDPath, componentName: string) => { - const docsPath = resolve(SRC_DIR, componentName, DOCS_DIR_NAME) - isDir(docsPath) && - (i18MdPath[componentName] = readdirSync(docsPath).map((filename: string) => slash(resolve(docsPath, filename)))) - return i18MdPath - }, {}) +export async function findComponentDocsPaths(): Promise { + const dir: string[] = await readdir(SRC_DIR) + + const buildPath = (filename: string) => resolve(SRC_DIR, filename, DOCS_DIR_NAME) + + const existPath = (filename: string) => pathExistsSync(buildPath(filename)) + + const collectRoutePath = (routePaths: string[], filename: string) => { + const dirPath = buildPath(filename) + + readdirSync(dirPath).forEach((mdName: string) => { + const path = resolve(dirPath, mdName) + isMD(path) && routePaths.push(slash(path)) + }) + + return routePaths + } + + return dir.filter(existPath).reduce(collectRoutePath, []) +} + +export async function findRootDocsPaths(): Promise { + const dir: string[] = await readdir(ROOT_DOCS_DIR) + + const buildPath = (filename: string) => resolve(ROOT_DOCS_DIR, filename) + + const existPath = (filename: string) => isMD(buildPath(filename)) + + const slashPath = (filename: string) => slash(buildPath(filename)) + + return dir.filter(existPath).map(slashPath) } export async function buildMobileSiteRoutes() { - const exampleComponentPaths: string[] = await findExampleComponentPaths() - const routes = exampleComponentPaths.map( - (exampleComponentPath: string) => ` + const examplePaths: string[] = await findExamplePaths() + + const routes = examplePaths.map( + (examplePath) => ` { - path: '${resolveMobileSiteRoutePath(exampleComponentPath)}', - component: () => import('${exampleComponentPath}') + path: '${getExampleRoutePath(examplePath)}', + component: () => import('${examplePath}') }\ ` ) @@ -67,23 +99,32 @@ export async function buildMobileSiteRoutes() { } export async function buildPcSiteRoutes() { - const i18MdPath: I18MDPath = await findDocsMDPaths() + const [componentDocsPaths, rootDocsPaths] = await Promise.all([findComponentDocsPaths(), findRootDocsPaths()]) - const routes = Object.entries(i18MdPath).map(([componentName, mdPaths]) => { - return mdPaths.map((mdPath) => { - return ` + const componentDocsRoutes = componentDocsPaths.map( + (componentDocsPath) => ` { - path: '${resolvePcSiteRoutePath(mdPath, componentName)}', - component: () => import('${mdPath}') + path: '${getComponentDocsRoutePath(componentDocsPath)}', + // @ts-ignore + component: () => import('${componentDocsPath}') }\ ` - }) - }) + ) + + const rootDocsRoutes = rootDocsPaths.map( + (rootDocsPath) => ` + { + path: '${getRootDocsRoutePath(rootDocsPath)}', + // @ts-ignore + component: () => import('${rootDocsPath}') + }\ +` + ) await writeFile( SITE_PC_ROUTES, `export default [\ - ${routes.join(',')} + ${[...componentDocsRoutes, rootDocsRoutes].join(',')} ]` ) } diff --git a/packages/varlet-cli/src/shared/constant.ts b/packages/varlet-cli/src/shared/constant.ts index e6cdd0c53bb..422766062be 100644 --- a/packages/varlet-cli/src/shared/constant.ts +++ b/packages/varlet-cli/src/shared/constant.ts @@ -9,10 +9,10 @@ export const ES_DIR = resolve(CWD, 'es') export const CJS_DIR = resolve(CWD, 'cjs') export const UMD_DIR = resolve(CWD, 'umd') export const TYPES_DIR = resolve(CWD, 'types') +export const ROOT_DOCS_DIR = resolve(CWD, 'docs') export const EXTENSIONS = ['.vue', '.ts', '.js', '.less', '.css'] export const EXAMPLE_DIR_NAME = 'example' export const DOCS_DIR_NAME = 'docs' -export const LOCALE_DIR_NAME = 'locale' export const EXAMPLE_DIR_INDEX = 'index.vue' export const TESTS_DIR_NAME = '__tests__' export const PRIMARY_COLOR = '#4f87f7' diff --git a/packages/varlet-cli/varlet.default.config.js b/packages/varlet-cli/varlet.default.config.js index 4a8baa81e21..1156ec79875 100644 --- a/packages/varlet-cli/varlet.default.config.js +++ b/packages/varlet-cli/varlet.default.config.js @@ -7,6 +7,7 @@ module.exports = { title: 'Varlet 组件库文档', description: 'Varlet 组件库文档', logo: 'https://cn.vuejs.org/images/logo.png', + redirect: undefined, header: { i18nButton: { zh_CN: 'En', @@ -18,9 +19,6 @@ module.exports = { title: 'Varlet 组件库示例', description: 'Varlet 组件库示例', logo: 'https://cn.vuejs.org/images/logo.png', + redirect: undefined, }, - languages: [ - 'zh-CN', - 'en-US' - ] } diff --git a/packages/varlet-ui/docs/home.en-US.md b/packages/varlet-ui/docs/home.en-US.md new file mode 100644 index 00000000000..ce31d28e663 --- /dev/null +++ b/packages/varlet-ui/docs/home.en-US.md @@ -0,0 +1 @@ +# Home \ No newline at end of file diff --git a/packages/varlet-ui/docs/home.zh-CN.md b/packages/varlet-ui/docs/home.zh-CN.md new file mode 100644 index 00000000000..e100ff79f1d --- /dev/null +++ b/packages/varlet-ui/docs/home.zh-CN.md @@ -0,0 +1 @@ +# 首页 \ No newline at end of file diff --git a/packages/varlet-ui/docs/quickstart.en-US.md b/packages/varlet-ui/docs/quickstart.en-US.md new file mode 100644 index 00000000000..179f6b7aaec --- /dev/null +++ b/packages/varlet-ui/docs/quickstart.en-US.md @@ -0,0 +1 @@ +# Quickstart \ No newline at end of file diff --git a/packages/varlet-ui/docs/quickstart.zh-CN.md b/packages/varlet-ui/docs/quickstart.zh-CN.md new file mode 100644 index 00000000000..55b6f79fbb5 --- /dev/null +++ b/packages/varlet-ui/docs/quickstart.zh-CN.md @@ -0,0 +1 @@ +# 快速开始 \ No newline at end of file diff --git a/packages/varlet-ui/src/button/example/locale/index.ts b/packages/varlet-ui/src/button/example/locale/index.ts index 9bfac9f69d0..f1ef0c99878 100644 --- a/packages/varlet-ui/src/button/example/locale/index.ts +++ b/packages/varlet-ui/src/button/example/locale/index.ts @@ -1,20 +1,10 @@ import zhCN from './zh-CN' import enUS from './en-US' -import { ref, Ref } from 'vue' +import { useLocale } from '../../../locale' -export const packs: Record = { - 'zh-CN': zhCN, - 'en-US': enUS -} +const { add, use, pack, packs, merge } = useLocale() -export const pack: Ref> = ref({}) +export { add, use, pack, packs, merge } -export function use(lang: string) { - if (!packs[lang]) { - return - } - - pack.value = packs[lang] -} - -use('zh-CN') +add('zh-CN', zhCN) +add('en-US', enUS) diff --git a/packages/varlet-ui/src/home/example/index.vue b/packages/varlet-ui/src/home/example/index.vue new file mode 100644 index 00000000000..33619b0d4e9 --- /dev/null +++ b/packages/varlet-ui/src/home/example/index.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/varlet-ui/src/home/example/locale/en-US.ts b/packages/varlet-ui/src/home/example/locale/en-US.ts new file mode 100644 index 00000000000..b1c6ea436a5 --- /dev/null +++ b/packages/varlet-ui/src/home/example/locale/en-US.ts @@ -0,0 +1 @@ +export default {} diff --git a/packages/varlet-ui/src/home/example/locale/index.ts b/packages/varlet-ui/src/home/example/locale/index.ts new file mode 100644 index 00000000000..8d42ebce75c --- /dev/null +++ b/packages/varlet-ui/src/home/example/locale/index.ts @@ -0,0 +1,20 @@ +import zhCN from './zh-CN' +import enUS from './en-US' +import { ref, Ref } from 'vue' + +export const packs: Record = { + 'zh-CN': zhCN, + 'en-US': enUS, +} + +export const pack: Ref> = ref({}) + +export function use(lang: string) { + if (!packs[lang]) { + return + } + + pack.value = packs[lang] +} + +use('zh-CN') diff --git a/packages/varlet-ui/src/home/example/locale/zh-CN.ts b/packages/varlet-ui/src/home/example/locale/zh-CN.ts new file mode 100644 index 00000000000..b1c6ea436a5 --- /dev/null +++ b/packages/varlet-ui/src/home/example/locale/zh-CN.ts @@ -0,0 +1 @@ +export default {} diff --git a/packages/varlet-ui/src/locale/index.ts b/packages/varlet-ui/src/locale/index.ts index 5965eed6e94..d9927d3148d 100644 --- a/packages/varlet-ui/src/locale/index.ts +++ b/packages/varlet-ui/src/locale/index.ts @@ -1,32 +1,45 @@ import { ref, Ref } from 'vue' import zhCN from './zh-CN' -export const packs: Record = {} +export function useLocale() { + const packs: Record = {} + const pack: Ref> = ref({}) -export const pack: Ref> = ref({}) + const add = (lang: string, pack: Record) => { + packs[lang] = pack + } -export function add(lang: string, pack: Record) { - packs[lang] = pack -} + const use = (lang: string) => { + if (!packs[lang]) { + console.warn(`The ${lang} does not exist. You can mount a language package using the add method`) + return + } -export function use(lang: string) { - if (!packs[lang]) { - console.warn(`The ${lang} does not exist. You can mount a language package using the add method`) - return + pack.value = packs[lang] } - pack.value = packs[lang] -} + const merge = (lang: string, pack: Record) => { + if (!packs[lang]) { + console.warn(`The ${lang} does not exist. You can mount a language package using the add method`) + return + } -export function merge(lang: string, pack: Record) { - if (!packs[lang]) { - console.warn(`The ${lang} does not exist. You can mount a language package using the add method`) - return + packs[lang] = { ...packs[lang], ...pack } + use(lang) } - packs[lang] = { ...packs[lang], ...pack } - use(lang) + return { + packs, + pack, + add, + use, + merge, + } } +const { packs, pack, add, use, merge } = useLocale() + add('zh-CN', zhCN) use('zh-CN') + +export { packs, pack, add, use, merge } diff --git a/packages/varlet-ui/src/utils/components.ts b/packages/varlet-ui/src/utils/components.ts index f733e7ca364..71b9fd8c086 100644 --- a/packages/varlet-ui/src/utils/components.ts +++ b/packages/varlet-ui/src/utils/components.ts @@ -19,6 +19,7 @@ import { ref, } from 'vue' import { isArray, removeItem } from './shared' +import { packs, use } from '../locale' export interface MountInstance { instance: any @@ -272,12 +273,10 @@ export function addRouteListener(cb: () => void) { export function watchLang(cb: (lang: string) => void) { const handleHashchange = () => { const { href } = window.location - const langs = require('../../varlet.config').languages - let lang = new URLSearchParams(href.slice(href.indexOf('?'))).get('lang') - lang = langs.includes(lang) ? lang as string : 'zh-CN' + const language = new URLSearchParams(href.slice(href.indexOf('?'))).get('language') ?? 'zh-CN' - cb(lang) + cb(language) } window.addEventListener('hashchange', handleHashchange) diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js index 44622c72696..e96a68092a5 100644 --- a/packages/varlet-ui/varlet.config.js +++ b/packages/varlet-ui/varlet.config.js @@ -7,6 +7,7 @@ module.exports = { title: 'Varlet 组件库示例', description: 'Varlet 组件库示例', logo: 'https://cn.vuejs.org/images/logo.png', + redirect: '/zh-CN/home', header: { logo: 'https://cn.vuejs.org/images/logo.png', search: { @@ -21,13 +22,22 @@ module.exports = { menu: [ { text: { - 'zh-CN': '快速开始', + 'zh-CN': '基本介绍', + 'en-US': 'Basic introduction', }, isTitle: true, }, + { + text: { + 'zh-CN': '快速开始', + 'en-US': 'Quickstart', + }, + doc: 'quickstart', + }, { text: { 'zh-CN': '组件', + 'en-US': 'Components', }, isTitle: true, }, @@ -268,10 +278,6 @@ module.exports = { title: 'Varlet 组件库示例', description: 'Varlet 组件库示例', logo: 'https://cn.vuejs.org/images/logo.png', + redirect: '/home', }, - language: 'zh-CN', - languages: [ - 'zh-CN', - 'en-US' - ] } diff --git a/yarn.lock b/yarn.lock index 8cfcbf1b6aa..b93647a9dc0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2881,15 +2881,6 @@ "@typescript-eslint/types" "4.6.0" eslint-visitor-keys "^2.0.0" -"@varlet/icons@^0.0.0": - version "0.0.0" - resolved "https://registry.yarnpkg.com/@varlet/icons/-/icons-0.0.0.tgz#67154c7b84e2530a5f993d5e0d62393940f67887" - integrity sha512-3YZtKYqcgtjXPsoKLH1sLUg6Ko7ldJ3d15nm2AkA+3r0w/D+FLOZQTgJxxQuHhi95CZOcWnHgQV533kAuyqRBg== - dependencies: - commander "^6.2.1" - fs-extra "^9.0.1" - webfont "^9.0.0" - "@vue/compiler-core@3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.2.tgz#7790b7a1fcbba5ace4d81a70ce59096fa5c95734"