feature: scope prop (#51)

kazupon · web-flow · commit 2327771d0023 · 2020-05-23T02:35:25.000+09:00
* add scope prop

* add unit tests

* add log

* update
diff --git a/src/components/DatetimeFormat.ts b/src/components/DatetimeFormat.ts
@@ -3,6 +3,12 @@ import { useI18n } from '../i18n'
 import { DateTimeOptions } from '../core'
 import { Composer, ComposerInternal } from '../composer'
 import { renderFormatter, FormattableProps } from './formatRenderer'
+import { baseFormatProps } from './base'
+
+export type DatetimeFormatProps = FormattableProps<
+  number | Date,
+  Intl.DateTimeFormatOptions
+>
 
 const DATETIME_FORMAT_KEYS = [
   'dateStyle',
@@ -31,18 +37,13 @@ export const DatetimeFormat = defineComponent({
   /* eslint-disable */
   name: 'i18n-d',
   props: {
-    tag: {
-      type: String
-    },
+    ...baseFormatProps,
     value: {
       type: [Number, Date] as PropType<number | Date>,
       required: true
     },
     format: {
-      type: [String, Object]
-    },
-    locale: {
-      type: String
+      type: [String, Object] as PropType<Intl.DateTimeFormatOptions>
     }
   },
   /* eslint-enable */
diff --git a/src/components/NumberFormat.ts b/src/components/NumberFormat.ts
@@ -1,8 +1,14 @@
-import { defineComponent, SetupContext } from 'vue'
+import { defineComponent, SetupContext, PropType } from 'vue'
 import { useI18n } from '../i18n'
 import { NumberOptions } from '../core'
 import { Composer, ComposerInternal } from '../composer'
 import { renderFormatter, FormattableProps } from './formatRenderer'
+import { baseFormatProps } from './base'
+
+export type NumberFormatProps = FormattableProps<
+  number,
+  Intl.NumberFormatOptions
+>
 
 const NUMBER_FORMAT_KEYS = [
   'localeMatcher',
@@ -26,18 +32,13 @@ export const NumberFormat = defineComponent({
   /* eslint-disable */
   name: 'i18n-n',
   props: {
-    tag: {
-      type: String
-    },
+    ...baseFormatProps,
     value: {
       type: Number,
       required: true
     },
     format: {
-      type: [String, Object]
-    },
-    locale: {
-      type: String
+      type: [String, Object] as PropType<Intl.NumberFormatOptions>
     }
   },
   /* eslint-enable */
diff --git a/src/components/Translation.ts b/src/components/Translation.ts
@@ -7,31 +7,25 @@ import {
 } from 'vue'
 import { Composer, ComposerInternal } from '../composer'
 import { useI18n } from '../i18n'
-import { TranslateOptions, Locale } from '../core'
+import { TranslateOptions } from '../core'
 import { NamedValue } from '../message/runtime'
 import { isNumber, isString } from '../utils'
+import { baseFormatProps, BaseFormatProps } from './base'
 
-export type TranslationProps = {
-  tag?: string
+export interface TranslationProps extends BaseFormatProps {
   keypath: string
-  locale?: Locale
   plural?: number | string
 }
 
 export const Translation = defineComponent({
   /* eslint-disable */
   name: 'i18n-t',
   props: {
-    tag: {
-      type: String
-    },
+    ...baseFormatProps,
     keypath: {
       type: String,
       required: true
     },
-    locale: {
-      type: String
-    },
     plural: {
       type: [Number, String],
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -41,7 +35,8 @@ export const Translation = defineComponent({
   /* eslint-enable */
   setup(props: TranslationProps, context: SetupContext) {
     const { slots, attrs } = context
-    const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal
+    const i18n = useI18n({ useScope: props.scope }) as Composer &
+      ComposerInternal
     const keys = Object.keys(slots).filter(key => key !== '_')
 
     return () => {
diff --git a/src/components/base.ts b/src/components/base.ts
@@ -0,0 +1,26 @@
+import { PropType } from 'vue'
+import { Locale } from '../core'
+import { I18nScope } from '../i18n'
+
+export type ComponetI18nScope = Exclude<I18nScope, 'local'>
+
+export interface BaseFormatProps {
+  tag?: string
+  locale?: Locale
+  scope?: ComponetI18nScope
+}
+
+export const baseFormatProps = {
+  tag: {
+    type: String
+  },
+  locale: {
+    type: String
+  },
+  scope: {
+    type: String as PropType<ComponetI18nScope>,
+    validator: (val: ComponetI18nScope): boolean =>
+      val === 'parent' || val === 'global',
+    default: 'parent' as ComponetI18nScope
+  }
+}
diff --git a/src/components/formatRenderer.ts b/src/components/formatRenderer.ts
@@ -5,14 +5,13 @@ import {
   SetupContext,
   VNodeArrayChildren
 } from 'vue'
-import { Locale, NumberOptions, DateTimeOptions } from '../core'
+import { NumberOptions, DateTimeOptions } from '../core'
 import { isString, isPlainObject, isArray } from '../utils'
+import { BaseFormatProps } from './base'
 
-export type FormattableProps<Value, Format> = {
-  tag?: string
+export interface FormattableProps<Value, Format> extends BaseFormatProps {
   value: Value
   format?: string | Format
-  locale?: Locale
 }
 
 type FormatOptions = NumberOptions | DateTimeOptions
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,5 @@
-export { Translation } from './Translation'
-export { NumberFormat } from './NumberFormat'
-export { DatetimeFormat } from './DatetimeFormat'
+export { ComponetI18nScope, BaseFormatProps } from './base'
+export { FormattableProps } from './formatRenderer'
+export { Translation, TranslationProps } from './Translation'
+export { NumberFormat, NumberFormatProps } from './NumberFormat'
+export { DatetimeFormat, DatetimeFormatProps } from './DatetimeFormat'
diff --git a/src/index.ts b/src/index.ts
@@ -44,6 +44,14 @@ export {
   ComposerAdditionalOptions,
   UseI18nOptions
 } from './i18n'
+export {
+  TranslationProps,
+  NumberFormatProps,
+  DatetimeFormatProps,
+  FormattableProps,
+  BaseFormatProps,
+  ComponetI18nScope
+} from './components'
 export { I18nPluginOptions } from './plugin'
 
 /**
diff --git a/test/components/DatetimeFormat.test.ts b/test/components/DatetimeFormat.test.ts
@@ -0,0 +1,102 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '../helper'
+import { defineComponent } from 'vue'
+import { createI18n } from '../../src/i18n'
+
+const datetimeFormats = {
+  'en-US': {
+    long: {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }
+  },
+  'ja-JP-u-ca-japanese': {
+    long: {
+      era: 'long',
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      weekday: 'long',
+      hour12: true,
+      timeZoneName: 'long'
+    }
+  }
+}
+
+let org, spy
+beforeEach(() => {
+  org = console.warn
+  spy = jest.fn()
+  console.warn = spy
+})
+afterEach(() => {
+  console.warn = org
+})
+
+test('basic usage', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    datetimeFormats
+  })
+
+  const App = defineComponent({
+    template: `
+<i18n-d tag="p" :value="new Date()"></i18n-d>
+<i18n-d tag="p" :value="new Date()" format="long"></i18n-d>
+<i18n-d
+  tag="p"
+  :value="new Date()"
+  format="long"
+  locale="ja-JP-u-ca-japanese"
+></i18n-d>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toMatch(
+    /([1-9]|1[0-2])\/([1-9]|[12]\d|3[01])\/([12]\d{3})/
+  )
+  expect(wrapper.html()).toMatch(
+    /(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/([12]\d{3}), (0[0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (AM|PM)/
+  )
+  expect(wrapper.html()).toMatch(
+    /令和([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (協定世界時|グリニッジ標準時)/
+  )
+})
+
+test('slots', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    datetimeFormats
+  })
+
+  const App = defineComponent({
+    template: `
+<i18n-d
+  :value="new Date()"
+  locale="ja-JP-u-ca-japanese"
+  :format="{ key: 'long', era: 'narrow' }"
+>
+  <template #era="props"
+    ><span style="color: green;">{{ props.era }}</span></template
+  >
+</i18n-d>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toMatch(`<span style="color: green;">R</span>`)
+  expect(wrapper.html()).toMatch(
+    /([1-9]|1[0-2])年([1-9]|1[0-2])月([1-9]|[1-3][0-9])日(月|火|水|木|金|土|日)曜日 (午前|午後)([0-9]|1[0-2]):([0-5][0-9]):([0-5][0-9]) (協定世界時|グリニッジ標準時)/
+  )
+})
diff --git a/test/components/NumberFormat.test.ts b/test/components/NumberFormat.test.ts
@@ -0,0 +1,95 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '../helper'
+import { defineComponent } from 'vue'
+import { createI18n } from '../../src/i18n'
+
+const numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD',
+      currencyDisplay: 'symbol'
+    },
+    decimal: {
+      style: 'decimal',
+      useGrouping: false
+    }
+  },
+  'ja-JP': {
+    currency: {
+      style: 'currency',
+      currency: 'JPY',
+      currencyDisplay: 'symbol'
+    },
+    numeric: {
+      style: 'decimal',
+      useGrouping: false
+    },
+    percent: {
+      style: 'percent',
+      useGrouping: false
+    }
+  }
+}
+
+let org, spy
+beforeEach(() => {
+  org = console.warn
+  spy = jest.fn()
+  console.warn = spy
+})
+afterEach(() => {
+  console.warn = org
+})
+
+test('basic usage', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    numberFormats
+  })
+
+  const App = defineComponent({
+    template: `
+<i18n-n tag="p" :value="100"></i18n-n>
+<i18n-n tag="p" :value="100" format="currency"></i18n-n>
+<i18n-n tag="p" :value="100" format="currency" locale="ja-JP"></i18n-n>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(`<p>100</p><p>$100.00</p><p>￥100</p>`)
+})
+
+test('slots', async () => {
+  const i18n = createI18n({
+    locale: 'en-US',
+    numberFormats
+  })
+
+  const App = defineComponent({
+    template: `
+<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
+  <template #currency="props"
+    ><span style="color: green;">{{ props.currency }}</span></template
+  >
+  <template #integer="props"
+    ><span style="font-weight: bold;">{{ props.integer }}</span></template
+  >
+  <template #group="props"
+    ><span style="font-weight: bold;">{{ props.group }}</span></template
+  >
+  <template #fraction="props"
+    ><span style="font-size: small;">{{ props.fraction }}</span></template
+  >
+</i18n-n>
+`
+  })
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toEqual(
+    `<span style=\"color: green;\">€</span><span style=\"font-weight: bold;\">1</span><span style=\"font-weight: bold;\">,</span><span style=\"font-weight: bold;\">234</span>.<span style=\"font-size: small;\">00</span>`
+  )
+})
diff --git a/test/components/Translation.test.ts b/test/components/Translation.test.ts
