docs: improve demo translating

docs/site/use-translate.ts

@@ -0,0 +1,22 @@
+import Locale from '../../src/locale';
+import { camelize } from '../../src/utils/format/string';
+import { createTranslate } from '../../src/utils/create/translate';
+
+let demoUid = 0;
+
+export function useTranslate(i18n: Record<string, any>) {
+  const demoName = `demo-i18n-${demoUid++}`;
+
+  if (i18n) {
+    const locales = {};
+    const camelizedName = camelize(demoName);
+
+    Object.keys(i18n).forEach((key) => {
+      locales[key] = { [camelizedName]: i18n[key] };
+    });
+
+    Locale.add(locales);
+  }
+
+  return createTranslate(demoName);
+}

jest.config.js

@@ -6,4 +6,7 @@ module.exports = {
     '!**/test/**',
     '!**/lang/**',
   ],
+  moduleNameMapper: {
+    '^@demo(.*)$': '<rootDir>/docs/site$1',
+  },
 };

src/action-sheet/demo/index.vue

@@ -53,43 +53,43 @@
 
 <script>
 import { computed, reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      option1: '选项一',
-      option2: '选项二',
-      option3: '选项三',
-      subname: '描述信息',
-      showCancel: '展示取消按钮',
-      buttonText: '弹出菜单',
-      customPanel: '自定义面板',
-      description: '这是一段描述信息',
-      optionStatus: '选项状态',
-      coloredOption: '着色选项',
-      disabledOption: '禁用选项',
-      showDescription: '展示描述信息',
-    },
-    'en-US': {
-      option1: 'Option 1',
-      option2: 'Option 2',
-      option3: 'Option 3',
-      subname: 'Description',
-      showCancel: 'Show Cancel Button',
-      buttonText: 'Show ActionSheet',
-      customPanel: 'Custom Panel',
-      description: 'Description',
-      optionStatus: 'Option Status',
-      coloredOption: 'Colored Option',
-      disabledOption: 'Disabled Option',
-      showDescription: 'Show Description',
-    },
+const i18n = {
+  'zh-CN': {
+    option1: '选项一',
+    option2: '选项二',
+    option3: '选项三',
+    subname: '描述信息',
+    showCancel: '展示取消按钮',
+    buttonText: '弹出菜单',
+    customPanel: '自定义面板',
+    description: '这是一段描述信息',
+    optionStatus: '选项状态',
+    coloredOption: '着色选项',
+    disabledOption: '禁用选项',
+    showDescription: '展示描述信息',
   },
+  'en-US': {
+    option1: 'Option 1',
+    option2: 'Option 2',
+    option3: 'Option 3',
+    subname: 'Description',
+    showCancel: 'Show Cancel Button',
+    buttonText: 'Show ActionSheet',
+    customPanel: 'Custom Panel',
+    description: 'Description',
+    optionStatus: 'Option Status',
+    coloredOption: 'Colored Option',
+    disabledOption: 'Disabled Option',
+    showDescription: 'Show Description',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       show: {
         basic: false,
@@ -129,6 +129,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       onSelect,
       onCancel,
       simpleActions,

src/composables/use-translate.ts

@@ -1,8 +0,0 @@
-import { getCurrentInstance } from 'vue';
-import { noop } from '../utils';
-import { createTranslate } from '../utils/create/translate';
-
-export function useTranslate() {
-  const { name } = getCurrentInstance()!.type;
-  return name ? createTranslate(name) : noop;
-}

src/count-down/demo/index.vue

@@ -42,37 +42,37 @@
 
 <script>
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
-import { useTranslate } from '../../composables/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    reset: '重置',
+    pause: '暂停',
+    start: '开始',
+    finished: '倒计时结束',
+    millisecond: '毫秒级渲染',
+    customStyle: '自定义样式',
+    customFormat: '自定义格式',
+    manualControl: '手动控制',
+    formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
+  },
+  'en-US': {
+    reset: 'Reset',
+    pause: 'Pause',
+    start: 'Start',
+    finished: 'Finished',
+    millisecond: 'Millisecond',
+    customStyle: 'Custom Style',
+    customFormat: 'Custom Format',
+    manualControl: 'Manual Control',
+    formatWithDay: 'DD Day, HH:mm:ss',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      reset: '重置',
-      pause: '暂停',
-      start: '开始',
-      finished: '倒计时结束',
-      millisecond: '毫秒级渲染',
-      customStyle: '自定义样式',
-      customFormat: '自定义格式',
-      manualControl: '手动控制',
-      formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
-    },
-    'en-US': {
-      reset: 'Reset',
-      pause: 'Pause',
-      start: 'Start',
-      finished: 'Finished',
-      millisecond: 'Millisecond',
-      customStyle: 'Custom Style',
-      customFormat: 'Custom Format',
-      manualControl: 'Manual Control',
-      formatWithDay: 'DD Day, HH:mm:ss',
-    },
-  },
-
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const time = ref(30 * 60 * 60 * 1000);
     const countDown = ref(null);
 
@@ -90,6 +90,7 @@ export default {
     };
 
     return {
+      t,
       time,
       start,
       pause,

src/dialog/demo/index.vue

@@ -29,32 +29,32 @@
 
 <script>
 import { ref } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Dialog from '..';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      alert1: '提示弹窗',
-      alert2: '提示弹窗（无标题）',
-      confirm: '确认弹窗',
-      beforeClose: '异步关闭',
-      roundButton: '圆角按钮样式',
-      componentCall: '组件调用',
-      content: '代码是写出来给人看的，附带能在机器上运行',
-    },
-    'en-US': {
-      alert1: 'Alert',
-      alert2: 'Alert without title',
-      confirm: 'Confirm dialog',
-      beforeClose: 'Before Close',
-      roundButton: 'Round Button Style',
-      componentCall: 'Component Call',
-    },
+const i18n = {
+  'zh-CN': {
+    alert1: '提示弹窗',
+    alert2: '提示弹窗（无标题）',
+    confirm: '确认弹窗',
+    beforeClose: '异步关闭',
+    roundButton: '圆角按钮样式',
+    componentCall: '组件调用',
+    content: '代码是写出来给人看的，附带能在机器上运行',
   },
+  'en-US': {
+    alert1: 'Alert',
+    alert2: 'Alert without title',
+    confirm: 'Confirm dialog',
+    beforeClose: 'Before Close',
+    roundButton: 'Round Button Style',
+    componentCall: 'Component Call',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const show = ref(false);
 
     const onClickAlert = () => {
@@ -106,6 +106,7 @@ export default {
     };
 
     return {
+      t,
       show,
       image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
       onClickAlert,

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -121,7 +121,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
           <div class="van-button__content">
             <span class="van-button__text">
-              Confirm dialog
+              Confirm
             </span>
           </div>
         </button>

src/image-preview/demo/index.vue

@@ -35,10 +35,35 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import ImagePreview from '..';
 import Toast from '../../toast';
 
+const i18n = {
+  'zh-CN': {
+    closed: '关闭',
+    showClose: '展示关闭按钮',
+    showImages: '预览图片',
+    beforeClose: '异步关闭',
+    closeEvent: '监听关闭事件',
+    customConfig: '传入配置项',
+    startPosition: '指定初始位置',
+    componentCall: '组件调用',
+    index: (index) => `第${index + 1}页`,
+  },
+  'en-US': {
+    closed: 'closed',
+    showClose: 'Show Close Icon',
+    showImages: 'Show Images',
+    beforeClose: 'Before Close',
+    closeEvent: 'Close Event',
+    customConfig: 'Custom Config',
+    startPosition: 'Set Start Position',
+    componentCall: 'Component Call',
+    index: (index) => `Page: ${index}`,
+  },
+};
+
 const images = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',
   'https://img.yzcdn.cn/vant/apple-2.jpg',
@@ -47,33 +72,8 @@ const images = [
 ];
 
 export default {
-  i18n: {
-    'zh-CN': {
-      closed: '关闭',
-      showClose: '展示关闭按钮',
-      showImages: '预览图片',
-      beforeClose: '异步关闭',
-      closeEvent: '监听关闭事件',
-      customConfig: '传入配置项',
-      startPosition: '指定初始位置',
-      componentCall: '组件调用',
-      index: (index) => `第${index + 1}页`,
-    },
-    'en-US': {
-      closed: 'closed',
-      showClose: 'Show Close Icon',
-      showImages: 'Show Images',
-      beforeClose: 'Before Close',
-      closeEvent: 'Close Event',
-      customConfig: 'Custom Config',
-      startPosition: 'Set Start Position',
-      componentCall: 'Component Call',
-      index: (index) => `Page: ${index}`,
-    },
-  },
-
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       show: false,
       index: 0,
@@ -113,6 +113,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       images,
       onClose,
       onChange,

src/pull-refresh/demo/index.vue

@@ -43,29 +43,29 @@
 
 <script>
 import { computed, onMounted, reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      try: '下拉试试',
-      text: '刷新次数',
-      success: '刷新成功',
-      successTip: '成功提示',
-      customTips: '自定义提示',
-    },
-    'en-US': {
-      try: 'Try it down',
-      text: 'Refresh Count',
-      success: 'Refresh success',
-      successTip: 'Success Tip',
-      customTips: 'Custom Tips',
-    },
+const i18n = {
+  'zh-CN': {
+    try: '下拉试试',
+    text: '刷新次数',
+    success: '刷新成功',
+    successTip: '成功提示',
+    customTips: '自定义提示',
   },
+  'en-US': {
+    try: 'Try it down',
+    text: 'Refresh Count',
+    success: 'Refresh success',
+    successTip: 'Success Tip',
+    customTips: 'Custom Tips',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       count: 0,
       loading: false,
@@ -101,6 +101,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       tips,
       onRefresh,
     };

src/rate/demo/index.vue

@@ -46,35 +46,35 @@
 
 <script>
 import { toRefs, reactive } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      halfStar: '半星',
-      disabled: '禁用状态',
-      customIcon: '自定义图标',
-      customStyle: '自定义样式',
-      customCount: '自定义数量',
-      readonly: '只读状态',
-      changeEvent: '监听 change 事件',
-      toastContent: (value) => `当前值：${value}`,
-    },
-    'en-US': {
-      halfStar: 'Half Star',
-      disabled: 'Disabled',
-      customIcon: 'Custom Icon',
-      customStyle: 'Custom Style',
-      customCount: 'Custom Count',
-      readonly: 'Readonly',
-      changeEvent: 'Change Event',
-      toastContent: (value) => `current value：${value}`,
-    },
+const i18n = {
+  'zh-CN': {
+    halfStar: '半星',
+    disabled: '禁用状态',
+    customIcon: '自定义图标',
+    customStyle: '自定义样式',
+    customCount: '自定义数量',
+    readonly: '只读状态',
+    changeEvent: '监听 change 事件',
+    toastContent: (value) => `当前值：${value}`,
   },
+  'en-US': {
+    halfStar: 'Half Star',
+    disabled: 'Disabled',
+    customIcon: 'Custom Icon',
+    customStyle: 'Custom Style',
+    customCount: 'Custom Count',
+    readonly: 'Readonly',
+    changeEvent: 'Change Event',
+    toastContent: (value) => `current value：${value}`,
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       value1: 3,
       value2: 3,

src/search/demo/index.vue

@@ -53,33 +53,33 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      label: '地址',
-      disabled: '禁用搜索框',
-      inputAlign: '搜索框内容对齐',
-      background: '自定义背景色',
-      placeholder: '请输入搜索关键词',
-      customButton: '自定义按钮',
-      listenToEvents: '事件监听',
-    },
-    'en-US': {
-      label: 'Address',
-      disabled: 'Disabled',
-      inputAlign: 'Input Align',
-      background: 'Custom Background Color',
-      placeholder: 'Placeholder',
-      customButton: 'Custom Action Button',
-      listenToEvents: 'Listen to Events',
-    },
+const i18n = {
+  'zh-CN': {
+    label: '地址',
+    disabled: '禁用搜索框',
+    inputAlign: '搜索框内容对齐',
+    background: '自定义背景色',
+    placeholder: '请输入搜索关键词',
+    customButton: '自定义按钮',
+    listenToEvents: '事件监听',
   },
+  'en-US': {
+    label: 'Address',
+    disabled: 'Disabled',
+    inputAlign: 'Input Align',
+    background: 'Custom Background Color',
+    placeholder: 'Placeholder',
+    customButton: 'Custom Action Button',
+    listenToEvents: 'Listen to Events',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       value1: '',
       value2: '',
@@ -99,6 +99,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       onSearch,
       onCancel,
     };

src/slider/demo/index.vue

@@ -52,37 +52,37 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      text: '当前值：',
-      title1: '基础用法',
-      title2: '双滑块',
-      title3: '指定选择范围',
-      title4: '禁用',
-      title5: '指定步长',
-      vertical: '垂直方向',
-      customStyle: '自定义样式',
-      customButton: '自定义按钮',
-    },
-    'en-US': {
-      text: 'Current value: ',
-      title1: 'Basic Usage',
-      title2: 'Dual thumb mode',
-      title3: 'Range',
-      title4: 'Disabled',
-      title5: 'Step size',
-      vertical: 'Vertical',
-      customStyle: 'Custom Style',
-      customButton: 'Custom Button',
-    },
+const i18n = {
+  'zh-CN': {
+    text: '当前值：',
+    title1: '基础用法',
+    title2: '双滑块',
+    title3: '指定选择范围',
+    title4: '禁用',
+    title5: '指定步长',
+    vertical: '垂直方向',
+    customStyle: '自定义样式',
+    customButton: '自定义按钮',
   },
+  'en-US': {
+    text: 'Current value: ',
+    title1: 'Basic Usage',
+    title2: 'Dual thumb mode',
+    title3: 'Range',
+    title4: 'Disabled',
+    title5: 'Step size',
+    vertical: 'Vertical',
+    customStyle: 'Custom Style',
+    customButton: 'Custom Button',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       value1: 50,
       value2: [20, 60],
@@ -101,6 +101,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       onChange,
     };
   },

src/swipe/demo/index.vue

@@ -65,31 +65,31 @@
 
 <script>
 import { ref } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      title2: '懒加载',
-      title3: '监听 change 事件',
-      title4: '纵向滚动',
-      title5: '自定义滑块大小',
-      title6: '自定义指示器',
-      message: '当前 Swipe 索引：',
-    },
-    'en-US': {
-      title2: 'Lazy Render',
-      title3: 'Change Event',
-      title4: 'Vertical Scrolling',
-      title5: 'Set SwipeItem Size',
-      title6: 'Custom indicator',
-      message: 'Current Swipe index:',
-    },
+const i18n = {
+  'zh-CN': {
+    title2: '懒加载',
+    title3: '监听 change 事件',
+    title4: '纵向滚动',
+    title5: '自定义滑块大小',
+    title6: '自定义指示器',
+    message: '当前 Swipe 索引：',
   },
+  'en-US': {
+    title2: 'Lazy Render',
+    title3: 'Change Event',
+    title4: 'Vertical Scrolling',
+    title5: 'Set SwipeItem Size',
+    title6: 'Custom indicator',
+    message: 'Current Swipe index:',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const current = ref(0);
     const images = [
       'https://img.yzcdn.cn/vant/apple-1.jpg',
@@ -107,6 +107,7 @@ export default {
     };
 
     return {
+      t,
       images,
       current,
       onChange1,

src/switch/demo/index.vue

@@ -38,33 +38,33 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Dialog from '../../dialog';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      title: '标题',
-      confirm: '提醒',
-      message: '是否切换开关？',
-      withCell: '搭配单元格使用',
-      customSize: '自定义大小',
-      customColor: '自定义颜色',
-      asyncControl: '异步控制',
-    },
-    'en-US': {
-      title: 'Title',
-      confirm: 'Confirm',
-      message: 'Are you sure to toggle switch?',
-      withCell: 'Inside a Cell',
-      customSize: 'Custom Size',
-      customColor: 'Custom Color',
-      asyncControl: 'Async Control',
-    },
+const i18n = {
+  'zh-CN': {
+    title: '标题',
+    confirm: '提醒',
+    message: '是否切换开关？',
+    withCell: '搭配单元格使用',
+    customSize: '自定义大小',
+    customColor: '自定义颜色',
+    asyncControl: '异步控制',
   },
+  'en-US': {
+    title: 'Title',
+    confirm: 'Confirm',
+    message: 'Are you sure to toggle switch?',
+    withCell: 'Inside a Cell',
+    customSize: 'Custom Size',
+    customColor: 'Custom Color',
+    asyncControl: 'Async Control',
+  },
+};
 
+export default {
   setup() {
-    const t = useTranslate();
+    const t = useTranslate(i18n);
     const state = reactive({
       checked: true,
       checked2: true,
@@ -85,6 +85,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       onUpdateValue,
     };
   },

webpack.config.js

@@ -1,3 +1,5 @@
+const { join } = require('path');
+
 module.exports = function () {
   if (process.env.BUILD_TARGET === 'package') {
     return {};
@@ -8,5 +10,10 @@ module.exports = function () {
     entry: {
       'site-mobile': ['./docs/site/mobile'],
     },
+    resolve: {
+      alias: {
+        '@demo': join(__dirname, 'docs', 'site'),
+      },
+    },
   };
 };