fix: Support for browsers that don't support object spread literals (#…

…397)

closes #184
closes #393

packages/message-compiler/src/compiler.ts

@@ -2,18 +2,21 @@ import { CompileOptions } from './options'
 import { createParser } from './parser'
 import { transform } from './transformer'
 import { generate, CodeGenResult } from './generator'
+import { assign } from '@intlify/shared'
 
 export function baseCompile(
   source: string,
   options: CompileOptions = {}
 ): CodeGenResult {
+  const assignedOptions = assign({}, options)
+
   // parse source codes
-  const parser = createParser({ ...options })
+  const parser = createParser(assignedOptions)
   const ast = parser.parse(source)
 
   // transform ASTs
-  transform(ast, { ...options })
+  transform(ast, assignedOptions)
 
   // generate javascript codes
-  return generate(ast, { ...options })
+  return generate(ast, assignedOptions)
 }

packages/message-compiler/src/parser.ts

@@ -2,6 +2,7 @@ import { Position, createLocation, SourceLocation } from './location'
 import { ParserOptions } from './options'
 import { createCompileError, CompileErrorCodes } from './errors'
 import { Tokenizer, createTokenizer, TokenTypes, Token } from './tokenizer'
+import { assign } from '@intlify/shared'
 
 export const enum NodeTypes {
   Resource, // 0
@@ -530,7 +531,7 @@ export function createParser(options: ParserOptions = {}): Parser {
   }
 
   function parse(source: string): ResourceNode {
-    const tokenizer = createTokenizer(source, { ...options })
+    const tokenizer = createTokenizer(source, assign({}, options))
     const context = tokenizer.context()
 
     const node = startNode(

packages/shared/src/index.ts

@@ -87,6 +87,8 @@ export function warn(msg: string, err?: Error): void {
   }
 }
 
+export const assign = Object.assign
+
 let _globalThis: any
 export const getGlobalThis = (): any => {
   // prettier-ignore

packages/vue-i18n/src/components/DatetimeFormat.ts

@@ -2,6 +2,7 @@ import { useI18n } from '../i18n'
 import { DatetimePartsSymbol } from '../composer'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
+import { assign } from '@intlify/shared'
 
 import type { RenderFunction, SetupContext } from 'vue'
 import type { DateTimeOptions } from '@intlify/core-base'
@@ -61,16 +62,15 @@ const DATETIME_FORMAT_KEYS = [
 export const DatetimeFormat = {
   /* eslint-disable */
   name: 'i18n-d',
-  props: {
-    ...baseFormatProps,
+  props: assign({
     value: {
       type: [Number, Date],
       required: true
     },
     format: {
       type: [String, Object]
     }
-  },
+  }, baseFormatProps),
   /* eslint-enable */
   setup(props: DatetimeFormatProps, context: SetupContext): RenderFunction {
     const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal

packages/vue-i18n/src/components/NumberFormat.ts

@@ -2,6 +2,7 @@ import { useI18n } from '../i18n'
 import { NumberPartsSymbol } from '../composer'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
+import { assign } from '@intlify/shared'
 
 import type { SetupContext, RenderFunction } from 'vue'
 import type { NumberOptions } from '@intlify/core-base'
@@ -56,16 +57,15 @@ const NUMBER_FORMAT_KEYS = [
 export const NumberFormat = {
   /* eslint-disable */
   name: 'i18n-n',
-  props: {
-    ...baseFormatProps,
+  props: assign({
     value: {
       type: Number,
       required: true
     },
     format: {
       type: [String, Object]
     }
-  },
+  }, baseFormatProps),
   /* eslint-enable */
   setup(props: NumberFormatProps, context: SetupContext): RenderFunction {
     const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal

packages/vue-i18n/src/components/Translation.ts

@@ -3,6 +3,7 @@ import { isNumber, isString, isObject } from '@intlify/shared'
 import { TransrateVNodeSymbol } from '../composer'
 import { useI18n } from '../i18n'
 import { baseFormatProps } from './base'
+import { assign } from '@intlify/shared'
 
 import type { SetupContext, VNodeChild, RenderFunction } from 'vue'
 import type { Composer, ComposerInternal } from '../composer'
@@ -80,8 +81,7 @@ export interface TranslationProps extends BaseFormatProps {
 export const Translation = {
   /* eslint-disable */
   name: 'i18n-t',
-  props: {
-    ...baseFormatProps,
+  props: assign({
     keypath: {
       type: String,
       required: true
@@ -91,7 +91,7 @@ export const Translation = {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       validator: (val: any): boolean => isNumber(val) || !isNaN(val)
     }
-  },
+  }, baseFormatProps),
   /* eslint-enable */
   setup(props: TranslationProps, context: SetupContext): RenderFunction {
     const { slots, attrs } = context
@@ -114,12 +114,13 @@ export const Translation = {
         arg,
         options
       )
+      const assignedAttrs = assign({}, attrs)
       // prettier-ignore
       return isString(props.tag)
-        ? h(props.tag, { ...attrs }, children)
+        ? h(props.tag, assignedAttrs, children)
         : isObject(props.tag)
-          ? h(props.tag, { ...attrs }, children)
-          : h(Fragment, { ...attrs }, children)
+          ? h(props.tag, assignedAttrs, children)
+          : h(Fragment, assignedAttrs, children)
     }
   }
 }

packages/vue-i18n/src/components/formatRenderer.ts

@@ -1,5 +1,5 @@
 import { h, Fragment } from 'vue'
-import { isString, isObject, isArray } from '@intlify/shared'
+import { isString, isObject, isArray, assign } from '@intlify/shared'
 
 import type {
   RenderFunction,
@@ -90,11 +90,12 @@ export function renderFormatter<
       children = [parts]
     }
 
+    const assignedAttrs = assign({}, attrs)
     // prettier-ignore
     return isString(props.tag)
-      ? h(props.tag, { ...attrs }, children)
+      ? h(props.tag, assignedAttrs, children)
       : isObject(props.tag)
-        ? h(props.tag, { ...attrs }, children)
-        : h(Fragment, { ...attrs }, children)
+        ? h(props.tag, assignedAttrs, children)
+        : h(Fragment, assignedAttrs, children)
   }
 }