fluent-vue · Demivan · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -53,6 +53,8 @@ jobs:
 
       - name: Lint
         run: pnpm lint
+      - name: Type check
+        run: pnpm typecheck
 
   test-examples:
     runs-on: ubuntu-latest

diff --git a/__tests__/vue/component.spec.ts b/__tests__/vue/component.spec.ts
@@ -253,4 +253,69 @@ describe('component', () => {
     // Assert
     expect(mounted.html()).toEqual('<span>Hello \u{2068}Alice\u{2069} \u{2068}<b>Inner text</b>\u{2069} test</span>')
   })
+
+  it('supports html #760', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      general-pages-terms = Terms
+
+      general-register-info = Register here.<br> But respect <strong>our terms</strong> (see {$showTermsModalSpan}).
+        .general-pages-terms = { general-pages-terms }
+      `),
+    )
+
+    const click = vi.fn()
+
+    const component = {
+      methods: {
+        showModal(param: string) {
+          click(param)
+        },
+      },
+      template: `
+      <i18n path="general-register-info" tag="span" html>
+        <template #showTermsModalSpan="{ generalPagesTerms }">
+          <span class="underline cursor-pointer" @click.prevent="showModal('terms')">{{ generalPagesTerms }}</span>
+        </template>
+      </i18n>`,
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.get('br')).toBeTruthy()
+    expect(mounted.get('strong')).toBeTruthy()
+    expect(mounted.get('span.underline')).toBeTruthy()
+    expect(mounted.html()).toEqual('<span>Register here.<br> But respect <strong>our terms</strong> (see \u{2068}<span class="underline cursor-pointer">Terms</span>\u{2069}).</span>')
+
+    // Just in case check if the click handler is working
+    // Act
+    await mounted.find('.underline').trigger('click')
+
+    // Assert
+    expect(click).toHaveBeenCalledWith('terms')
+  })
+
+  it('supports nested html', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = <span>Test <span class="inner"> Inner <strong class="strong">strong</strong> </span></span>
+      `),
+    )
+
+    const component = {
+      template: '<i18n path="key" tag="span" html></i18n>',
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.get('span')).toBeTruthy()
+    expect(mounted.get('strong')).toBeTruthy()
+    expect(mounted.html()).toEqual('<span><span>Test <span class="inner"> Inner <strong class="strong">strong</strong> </span></span></span>')
+  })
 })
diff --git a/__tests__/vue/noDom.spec.ts b/__tests__/vue/noDom.spec.ts
@@ -0,0 +1,127 @@
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { FluentBundle, FluentResource } from '@fluent/bundle'
+import ftl from '@fluent/dedent'
+
+import { DOMParser as HappyDomParser } from 'happy-dom'
+
+import { createFluentVue } from '../../src'
+import { mountWithFluent } from '../utils'
+
+describe('component html support', () => {
+  beforeAll(() => {
+    // @ts-expect-error - we're testing the error case
+    // eslint-disable-next-line no-global-assign
+    DOMParser = undefined
+  })
+
+  it('throws if no access to DOMParser', () => {
+    // Arrange
+    const bundle = new FluentBundle('en-US')
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Hello {$name}<br>How are you?
+      `),
+    )
+
+    const fluent = createFluentVue({
+      bundles: [bundle],
+    })
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" html></i18n>`,
+    }
+
+    // Act
+    const mount = () => mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mount).toThrow('[fluent-vue] DOMParser is not available. Please provide a custom parseMarkup function.')
+  })
+
+  it('works with custom parseMarkup function', () => {
+    // Arrange
+    const bundle = new FluentBundle('en-US')
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Hello {$name}<br>How are you?
+      `),
+    )
+
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      parseMarkup: (markup: string) => {
+        const parser = new HappyDomParser()
+        const doc = parser.parseFromString(markup, 'text/html')
+        const nodes = Array.from(doc.body.childNodes)
+
+        return nodes
+      },
+    })
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" html></i18n>`,
+    }
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toMatchInlineSnapshot('"<span>Hello \u{2068}John\u{2069}<br>How are you?</span>"')
+  })
+
+  it('warn about not support markup', () => {
+    // Arrange
+    const bundle = new FluentBundle('en-US')
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Hello {$name}<br>How are you?<!-- this is a comment -->
+      `),
+    )
+
+    const fluent = createFluentVue({
+      bundles: [bundle],
+      parseMarkup: (markup: string) => {
+        const parser = new HappyDomParser()
+        const doc = parser.parseFromString(markup, 'text/html')
+        const nodes = Array.from(doc.body.childNodes)
+
+        return nodes
+      },
+    })
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }" html></i18n>`,
+    }
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    // Act
+    const mounted = mountWithFluent(fluent, component)
+
+    // Assert
+    expect(mounted.html()).toMatchInlineSnapshot('"<span>Hello \u{2068}John\u{2069}<br>How are you?</span>"')
+    expect(warn).toHaveBeenCalledWith('[fluent-vue] Unsupported node type: 8. If you need support for it, please, create an issue in fluent-vue repository.')
+
+    // Cleanup
+    warn.mockRestore()
+  })
+})
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
     "esbuild-plugin-globals": "^0.1.1",
     "eslint": "^8.24.0",
     "execa": "^6.1.0",
-    "happy-dom": "^7.2.0",
+    "happy-dom": "^7.6.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "release-it": "*",