fluent-vue · Demivan · Jun 14, 2023 · Jun 14, 2023 · Jun 14, 2023 · Jun 14, 2023
diff --git a/__tests__/vue/component.spec.ts b/__tests__/vue/component.spec.ts
@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { isVue2, isVue3 } from 'vue-demi'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
@@ -318,4 +319,86 @@ describe('component', () => {
     expect(mounted.get('strong')).toBeTruthy()
     expect(mounted.html()).toEqual('<span><span>Test <span class="inner"> Inner <strong class="strong">strong</strong> </span></span></span>')
   })
+
+  it.runIf(isVue3)('can work with tag=false', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+    key = Hello {$name}
+    `),
+    )
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" :tag="false"></i18n>`,
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('Hello \u{2068}John\u{2069}')
+  })
+
+  it.runIf(isVue3)('can work with no-tag', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+    key = Hello {$name}
+    `),
+    )
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" no-tag></i18n>`,
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('Hello \u{2068}John\u{2069}')
+  })
+
+  it.runIf(isVue2)('warns when used with tag=false', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+    key = Hello {$name}
+    `),
+    )
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" :tag="false"></i18n>`,
+    }
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toEqual('')
+    expect(warn).toHaveBeenCalledTimes(1)
+    expect(warn).toHaveBeenCalledWith('[fluent-vue] Vue 2 requires a root element when rendering components. Please, use `tag` prop to specify the root element.')
+
+    // Cleanup
+    warn.mockRestore()
+  })
 })
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "ls-lint": "ls-lint",
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "node scripts/swap-vue.mjs 3 && vitest run",
-    "test:watch": "node scripts/swap-vue.mjs 3 && vitest",
+    "test:watch": "vitest",
     "test:2": "node scripts/swap-vue.mjs 2 && vitest run",
     "test:3": "node scripts/swap-vue.mjs 3 && vitest run",
     "prepare": "husky install",

diff --git a/scripts/swap-vue.mjs b/scripts/swap-vue.mjs
@@ -2,10 +2,10 @@ import { readFileSync, writeFileSync } from 'fs'
 import { execa } from 'execa'
 
 const vue3packages = {
-  'vue': 'npm:vue@^3.2.47',
+  'vue': 'npm:vue@^3.3.4',
   'vue-2': 'npm:vue@^2.7.14',
-  'vue-3': 'npm:vue@^3.2.47',
-  '@vue/compiler-sfc': '^3.2.47',
+  'vue-3': 'npm:vue@^3.3.4',
+  '@vue/compiler-sfc': '^3.3.4',
   '@vue/test-utils': '^2.3.2',
 }
 

diff --git a/src/index.ts b/src/index.ts
@@ -6,7 +6,7 @@ import type { InstallFunction, Vue, Vue2, Vue3, Vue3Component } from './types/ty
 import type { TranslationWithAttrs } from './TranslationContext'
 import { TranslationContext } from './TranslationContext'
 import { createVue2Directive, createVue3Directive } from './vue/directive'
-import component from './vue/component'
+import { createComponent } from './vue/component'
 import { getContext } from './getContext'
 import { RootContextSymbol } from './symbols'
 import { resolveOptions } from './util/options'
@@ -51,30 +51,25 @@ 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[globalFormatName] = function (
+        vue3.config.globalProperties[resolvedOptions.globalFormatName] = function (
           key: string,
           value?: Record<string, FluentVariable>,
         ) {
           return getContext(rootContext, this as Vue3Component).format(key, value)
         }
-        vue3.config.globalProperties[globalFormatAttrsName] = function (
+        vue3.config.globalProperties[resolvedOptions.globalFormatAttrsName] = function (
           key: string,
           value?: Record<string, FluentVariable>,
         ) {
           return getContext(rootContext, this as Vue3Component).formatAttrs(key, value)
         }
 
-        vue3.directive(directiveName, createVue3Directive(rootContext))
+        vue3.directive(resolvedOptions.directiveName, createVue3Directive(rootContext))
       }
       else {
         const vue2 = vue as Vue2
@@ -87,17 +82,17 @@ export function createFluentVue(options: FluentVueOptions): FluentVue {
           },
         })
 
-        vue2.prototype[globalFormatName] = function (key: string, value?: Record<string, FluentVariable>) {
+        vue2.prototype[resolvedOptions.globalFormatName] = function (key: string, value?: Record<string, FluentVariable>) {
           return getContext(rootContext, this).format(key, value)
         }
-        vue2.prototype[globalFormatAttrsName] = function (key: string, value?: Record<string, FluentVariable>) {
+        vue2.prototype[resolvedOptions.globalFormatAttrsName] = function (key: string, value?: Record<string, FluentVariable>) {
           return getContext(rootContext, this).formatAttrs(key, value)
         }
 
-        vue2.directive(directiveName, createVue2Directive(rootContext))
+        vue2.directive(resolvedOptions.directiveName, createVue2Directive(rootContext))
       }
 
-      (vue as Vue).component(componentName, component)
+      (vue as Vue).component(resolvedOptions.componentName, createComponent(resolvedOptions, rootContext))
     },
   }
 }
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -20,9 +20,25 @@ export interface FluentVueOptions {
     },
     component?: string
     directive?: string
-  }}
+  }
+
+  /**
+   * Tag name used in the `i18n` component.
+   * Set to `false` to disable wrapping the translation in a tag.
+   * @default 'span'
+   */
+  componentTag?: string | false
+}
 
 export interface TranslationContextOptions {
   warnMissing: (key: string) => void
   parseMarkup: (markup: string) => SimpleNode[]
 }
+
+export interface ResolvedOptions extends TranslationContextOptions {
+  globalFormatName: string
+  globalFormatAttrsName: string
+  directiveName: string
+  componentName: string
+  componentTag: string | false
+}
diff --git a/src/util/options.ts b/src/util/options.ts
@@ -1,4 +1,4 @@
-import type { FluentVueOptions, SimpleNode, TranslationContextOptions } from 'src/types'
+import type { FluentVueOptions, ResolvedOptions, SimpleNode } from 'src/types'
 
 import { assert, warn } from './warn'
 
@@ -25,9 +25,14 @@ function getWarnMissing(options: FluentVueOptions) {
     return options.warnMissing
 }
 
-export function resolveOptions(options: FluentVueOptions): TranslationContextOptions {
+export function resolveOptions(options: FluentVueOptions): ResolvedOptions {
   return {
     warnMissing: getWarnMissing(options),
     parseMarkup: options.parseMarkup ?? defaultMarkupParser,
+    globalFormatName: options.globals?.functions?.format ?? '$t',
+    globalFormatAttrsName: options.globals?.functions?.formatAttrs ?? '$ta',
+    directiveName: options.globals?.directive ?? 't',
+    componentName: options.globals?.component ?? 'i18n',
+    componentTag: options.componentTag ?? 'span',
   }
 }