diff --git a/__tests__/vue/ssr.spec.ts b/__tests__/vue/ssr.spec.ts
index 1d0fe007..ee744505 100644
--- a/__tests__/vue/ssr.spec.ts
+++ b/__tests__/vue/ssr.spec.ts
@@ -2,14 +2,14 @@ import type { FluentVue } from '../../src'
import { FluentBundle, FluentResource } from '@fluent/bundle'
import ftl from '@fluent/dedent'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
import { isVue3 } from 'vue-demi'
import { createFluentVue } from '../../src'
import { renderSSR } from '../utils/ssr'
-describe.skipIf(!isVue3)('sSR directive', () => {
+describe.skipIf(!isVue3)('ssr directive', () => {
let fluent: FluentVue
let bundle: FluentBundle
@@ -34,15 +34,76 @@ describe.skipIf(!isVue3)('sSR directive', () => {
data: () => ({
name: 'John',
}),
- template: 'Fallback text',
+ template: '',
}
// Act
const rendered = await renderSSR(fluent, component)
// Assert
- // This has fallback text because the textContent is not supported by Vue getSSRProps
- // Text will be translated using directive transform
- expect(rendered).toEqual('Fallback text')
+ expect(rendered).toEqual('Link text')
+ })
+
+ it('skips text content if not specified', async () => {
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ link =
+ .aria-label = Link aria label
+ `),
+ )
+
+ const component = {
+ data: () => ({
+ name: 'John',
+ }),
+ template: 'Test',
+ }
+
+ // Act
+ const rendered = await renderSSR(fluent, component)
+
+ // Assert
+ expect(rendered).toEqual('Test')
+ })
+
+ it('warns when missing translation key', async () => {
+ // Arrange
+ const warnSpy = vi.spyOn(console, 'warn')
+
+ const component = {
+ template: '',
+ }
+
+ // Act
+ const rendered = await renderSSR(fluent, component)
+
+ // Assert
+ expect(rendered).toEqual('')
+ expect(warnSpy).toHaveBeenCalledWith('[fluent-vue] v-t directive is missing arg with translation key')
+ })
+
+ it('only allows certain attributes', async () => {
+ // Arrange
+ bundle.addResource(
+ new FluentResource(ftl`
+ message = Hello, { $name }!
+ .aria-label = Link aria label
+ .href = Link href
+ `),
+ )
+
+ const component = {
+ data: () => ({
+ name: 'John',
+ }),
+ template: '',
+ }
+
+ // Act
+ const rendered = await renderSSR(fluent, component)
+
+ // Assert
+ expect(rendered).toEqual('Hello, \u{2068}John\u{2069}!')
})
})
diff --git a/src/vue/directive.ts b/src/vue/directive.ts
index e5aa84f4..24efe5ec 100644
--- a/src/vue/directive.ts
+++ b/src/vue/directive.ts
@@ -44,26 +44,26 @@ export function createVue3Directive(rootContext: TranslationContext): Vue3Direct
getSSRProps(binding) {
const context = getContext(rootContext, binding.instance)
- const key = binding.arg
- if (key === void 0) {
+ if (binding.arg === void 0) {
warn('v-t directive is missing arg with translation key')
return {}
}
- const translation = context.formatWithAttrs(key, binding.value)
- const allowedAttrs = Object.keys(binding.modifiers)
- const attrs: Record = {}
- for (const [attr, attrValue] of Object.entries(translation.attributes)) {
- // Vue 3 does not expose the element in the binding object
- // so we can't check if the attribute is allowed
- // we assume that all attributes are allowed
- // this could lead to SSR hydration mismatches if translation
- // contains attributes that are not allowed
- // There is a runtime warning in the browser console in case translation contains not allowed attributes
- if (isAttrNameLocalizable(attr, {} as HTMLElement, allowedAttrs))
- attrs[attr] = attrValue
+
+ const translation = context.formatWithAttrs(binding.arg, binding.value)
+
+ // Vue 3 does not expose the element in the binding object during SSR.
+ // So we can't check if the attribute is allowed.
+ // We assume that all attributes are allowed.
+ // This could lead to SSR hydration mismatches if translation
+ // contains attributes that are not allowed.
+ // There is a runtime warning in the browser console in case translation
+ // contains not allowed attributes, this should catch this case.
+ const attrs = translation.attributes
+
+ if (translation.hasValue) {
+ attrs.textContent = translation.value
}
- // TODO: Include textContent when https://github.com/vuejs/core/issues/8112 is resolved
return attrs
},
}
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy