feat: allow global functions, directive and component to be renamed

Flambe · steveaxtmannrw · web-flow · commit bc940beb5db4 · 2023-02-24T19:44:08.000+02:00
Co-authored-by: Steve Axtmann &lt;steve.axtmann@runway36.de&gt;
diff --git a/__tests__/vue/globals.spec.ts b/__tests__/vue/globals.spec.ts
@@ -0,0 +1,128 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import { mountWithFluent } from '../utils'
+
+import { createFluentVue } from '../../src'
+
+describe('globals', () => {
+  let bundle: FluentBundle
+
+  beforeEach(() => {
+    bundle = new FluentBundle('en-US')
+  })
+
+  it('can rename t directive', () => {
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      globals: {
+        directive: 'test',
+      },
+    })
+
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      link = Link text
+      `),
+    )
+
+    const component = {
+      template: '<a v-test:link href="/foo">Fallback text</a>',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('<a href="/foo">Link text</a>')
+  })
+
+  it('can rename global $t', () => {
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      globals: {
+        functions: {
+          format: '$test',
+        },
+      },
+    })
+
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      message = Hello, { $name }!
+      `),
+    )
+
+    const component = {
+      data: () => ({
+        name: 'John',
+      }),
+      template: '<div>{{ $test("message", { name }) }}</div>',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('<div>Hello, \u{2068}John\u{2069}!</div>')
+  })
+
+  it('can rename global $ta', () => {
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      globals: {
+        functions: {
+          formatAttrs: '$test',
+        },
+      },
+    })
+
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key =
+        .attr = Attr value
+      `),
+    )
+
+    const component = {
+      template: '<div v-bind="$test(\'key\')"></div>',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('<div attr="Attr value"></div>')
+  })
+
+  it('can rename component', () => {
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      globals: {
+        component: 'test',
+      },
+    })
+
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Inner data
+      `),
+    )
+
+    const component = {
+      template: '<test path="key"></test>',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('<span>Inner data</span>')
+  })
+})
diff --git a/src/index.ts b/src/index.ts
@@ -51,25 +51,30 @@ export function createFluentVue(options: FluentVueOptions): FluentVue {
     formatWithAttrs: rootContext.formatWithAttrs.bind(rootContext),
 
     install(vue) {
+      const globalFormatName = options.globals?.functions?.format || '$t'
+      const globalFormatAttrsName = options.globals?.functions?.formatAttrs || '$ta'
+      const directiveName = options.globals?.directive || 't'
+      const componentName = options.globals?.component || 'i18n'
+
       if (isVue3) {
         const vue3 = vue as Vue3
 
         vue3.provide(RootContextSymbol, rootContext)
 
-        vue3.config.globalProperties.$t = function (
+        vue3.config.globalProperties[globalFormatName] = function (
           key: string,
           value?: Record<string, FluentVariable>,
         ) {
           return getContext(rootContext, this as Vue3Component).format(key, value)
         }
-        vue3.config.globalProperties.$ta = function (
+        vue3.config.globalProperties[globalFormatAttrsName] = function (
           key: string,
           value?: Record<string, FluentVariable>,
         ) {
           return getContext(rootContext, this as Vue3Component).formatAttrs(key, value)
         }
 
-        vue3.directive('t', createVue3Directive(rootContext))
+        vue3.directive(directiveName, createVue3Directive(rootContext))
       }
       else {
         const vue2 = vue as Vue2
@@ -82,17 +87,17 @@ export function createFluentVue(options: FluentVueOptions): FluentVue {
           },
         })
 
-        vue2.prototype.$t = function (key: string, value?: Record<string, FluentVariable>) {
+        vue2.prototype[globalFormatName] = function (key: string, value?: Record<string, FluentVariable>) {
           return getContext(rootContext, this).format(key, value)
         }
-        vue2.prototype.$ta = function (key: string, value?: Record<string, FluentVariable>) {
+        vue2.prototype[globalFormatAttrsName] = function (key: string, value?: Record<string, FluentVariable>) {
           return getContext(rootContext, this).formatAttrs(key, value)
         }
 
-        vue2.directive('t', createVue2Directive(rootContext))
+        vue2.directive(directiveName, createVue2Directive(rootContext))
       }
 
-      (vue as Vue).component('i18n', component)
+      (vue as Vue).component(componentName, component)
     },
   }
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -10,8 +10,17 @@ export interface FluentVueOptions {
   warnMissing?: ((key: string) => void) | boolean
 
   /** Custom function for parsing markup */
-  parseMarkup?: (markup: string) => SimpleNode[]
-}
+  parseMarkup?: (markup: string) => SimpleNode[],
+
+  /** Override the names of the global functions and directive to avoid conflicts */
+  globals?: {
+    functions?: {
+      format?: string
+      formatAttrs?: string
+    },
+    component?: string
+    directive?: string
+  }}
 
 export interface TranslationContextOptions {
   warnMissing: (key: string) => void
