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,11 +53,10 @@
 
 <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 {
+const i18n = {
-  i18n: {
   'zh-CN': {
     option1: '选项一',
     option2: '选项二',
@@ -86,10 +85,11 @@ export default {
     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,11 +42,10 @@
 
 <script>
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
-import { useTranslate } from '../../composables/use-translate';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     reset: '重置',
     pause: '暂停',
@@ -69,10 +68,11 @@ export default {
     manualControl: 'Manual Control',
     formatWithDay: 'DD Day, HH:mm:ss',
   },
-  },
+};
 
+export default {
   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,11 +29,10 @@
 
 <script>
 import { ref } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Dialog from '..';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     alert1: '提示弹窗',
     alert2: '提示弹窗（无标题）',
@@ -51,10 +50,11 @@ export default {
     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,19 +35,11 @@
 
 <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 images = [
+const i18n = {
-  'https://img.yzcdn.cn/vant/apple-1.jpg',
-  'https://img.yzcdn.cn/vant/apple-2.jpg',
-  'https://img.yzcdn.cn/vant/apple-3.jpg',
-  'https://img.yzcdn.cn/vant/apple-4.jpg',
-];
-
-export default {
-  i18n: {
   'zh-CN': {
     closed: '关闭',
     showClose: '展示关闭按钮',
@@ -70,10 +62,18 @@ export default {
     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',
+  'https://img.yzcdn.cn/vant/apple-3.jpg',
+  'https://img.yzcdn.cn/vant/apple-4.jpg',
+];
+
+export default {
   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,11 +43,10 @@
 
 <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 {
+const i18n = {
-  i18n: {
   'zh-CN': {
     try: '下拉试试',
     text: '刷新次数',
@@ -62,10 +61,11 @@ export default {
     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,11 +46,10 @@
 
 <script>
 import { toRefs, reactive } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     halfStar: '半星',
     disabled: '禁用状态',
@@ -71,10 +70,11 @@ export default {
     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,11 +53,10 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     label: '地址',
     disabled: '禁用搜索框',
@@ -76,10 +75,11 @@ export default {
     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,11 +52,10 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     text: '当前值：',
     title1: '基础用法',
@@ -79,10 +78,11 @@ export default {
     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,11 +65,10 @@
 
 <script>
 import { ref } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     title2: '懒加载',
     title3: '监听 change 事件',
@@ -86,10 +85,11 @@ export default {
     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,11 +38,10 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
-import { useTranslate } from '../../composables/use-translate';
+import { useTranslate } from '@demo/use-translate';
 import Dialog from '../../dialog';
 
-export default {
+const i18n = {
-  i18n: {
   'zh-CN': {
     title: '标题',
     confirm: '提醒',
@@ -61,10 +60,11 @@ export default {
     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'),
+      },
+    },
   };
 };