feat: add support for Vue 3 (#158)

fluent-vue · Oct 7, 2020 · aa06933 · aa06933
1 parent 090707b
commit aa06933
Show file tree

Hide file tree

Showing 35 changed files with 589 additions and 712 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,8 +13,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [12, 14]
+        os: [ubuntu-latest, windows-latest]
+        node: [14]
     steps:
       - name: Checkout
         uses: actions/checkout@v2

diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,4 @@ dist
 compiled
 .awcache
 .rpt2_cache
-docs
 .cache/
-
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
-# fluent-vue
+# ![fluent-vue logo | height=100](./docs/assets/logo.svg)
 
 [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/demivan/fluent-vue/Test)](https://github.com/Demivan/fluent-vue/actions)
 [![Coveralls](https://img.shields.io/coveralls/Demivan/fluent-vue.svg)](https://coveralls.io/github/Demivan/fluent-vue)
 [![npm bundle size](https://img.shields.io/bundlephobia/min/fluent-vue)](https://bundlephobia.com/result?p=fluent-vue)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 [![GitHub license](https://img.shields.io/github/license/demivan/fluent-vue)](https://github.com/Demivan/fluent-vue/blob/develop/LICENSE)
 
-`fluent-vue` is Vue.js integration for [Project Fluent](https://projectfluent.org).
+`fluent-vue` is Vue.js integration for [Project Fluent](https://projectfluent.org).  
+`fluent-vue` is compatible both with Vue 2 and Vue 3
 
 ## Packages
 

diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -10,6 +10,7 @@
     "@fluent/bundle": "^0.16.0",
     "@fluent/dedent": "^0.3.0",
     "fluent-vue": "link:../../packages/fluent-vue",
+    "vue": "^2.6.12",
     "vue-hot-reload-api": "^2.3.3"
   },
   "devDependencies": {

diff --git a/examples/hello-world/yarn.lock b/examples/hello-world/yarn.lock
@@ -4985,10 +4985,10 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-tslib@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
-  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+tslib@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
+  integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
 
 [email protected]:
   version "0.0.0"
@@ -5191,6 +5191,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.4.0.tgz#074e61674b1ec6d3483d54ba9fd7acc1378a66a2"
+  integrity sha512-7xaEKWpcyrbP5fVNFWSgF+gf0bWAfvlhH0Cb08Ec4XeTK6FCplaqXmaRLivzl3ypM0mkNcBAjSgctzMul0hgYg==
+
 vue-hot-reload-api@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -5201,6 +5206,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
+  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
+
 w3c-hr-time@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

diff --git a/examples/typescript/yarn.lock b/examples/typescript/yarn.lock
@@ -5077,10 +5077,10 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-tslib@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
-  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+tslib@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
+  integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
 
 [email protected]:
   version "0.0.0"
@@ -5283,6 +5283,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-demi@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.4.0.tgz#074e61674b1ec6d3483d54ba9fd7acc1378a66a2"
+  integrity sha512-7xaEKWpcyrbP5fVNFWSgF+gf0bWAfvlhH0Cb08Ec4XeTK6FCplaqXmaRLivzl3ypM0mkNcBAjSgctzMul0hgYg==
+
 vue-hot-reload-api@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

diff --git a/examples/webpack/yarn.lock b/examples/webpack/yarn.lock
@@ -3533,6 +3533,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vue-demi@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.4.0.tgz#074e61674b1ec6d3483d54ba9fd7acc1378a66a2"
+  integrity sha512-7xaEKWpcyrbP5fVNFWSgF+gf0bWAfvlhH0Cb08Ec4XeTK6FCplaqXmaRLivzl3ypM0mkNcBAjSgctzMul0hgYg==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"

diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@types/jest": "^26.0.8",
     "@types/node": "14.6.4",
-    "@types/puppeteer": "^3.0.1",
     "brotli": "^1.3.2",
     "chalk": "^4.1.0",
     "conventional-changelog-cli": "^2.1.0",
@@ -54,7 +53,6 @@
     "minimist": "^1.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.1",
-    "puppeteer": "^5.2.1",
     "rollup": "^2.26.5",
     "rollup-plugin-terser": "^7.0.0",
     "rollup-plugin-typescript2": "^0.27.2",

diff --git a/packages/fluent-vue-loader/src/index.ts b/packages/fluent-vue-loader/src/index.ts
@@ -28,8 +28,9 @@ function generateCode(source: string | Buffer, query: OptionObject): string {
 import { FluentResource } from '@fluent/bundle'
 
 export default function (Component) {
-  Component.options.__fluent = Component.options.__fluent || {}
-  Component.options.__fluent['${query.locale}'] = new FluentResource(\`${data}\`)
+  const target = Component.options || Component
+  target.fluent = target.fluent || {}
+  target.fluent['${query.locale}'] = new FluentResource(\`${data}\`)
 }\n`
 }
 

diff --git a/packages/fluent-vue/README.md b/packages/fluent-vue/README.md
@@ -28,6 +28,13 @@ For `yarn` users:
 yarn add fluent-vue @fluent/bundle
 ```
 
+#### Note:
+If you are using `vue` version 2 you need to install `@vue/composition-api` too
+
+```
+yarn add @vue/composition-api
+```
+
 **Install and configure plugin**
 
 ```js

diff --git a/packages/fluent-vue/__tests__/changeLanguage.spec.ts b/packages/fluent-vue/__tests__/changeLanguage.spec.ts
@@ -1,11 +1,14 @@
 import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../src'
 
+Vue.use(VueCompositionApi)
+
 describe('language change', () => {
   let options: any
   let bundleEn: FluentBundle
@@ -184,7 +187,7 @@ describe('language change', () => {
 
     const child = {
       template: `<span>{{ $t('child') }}</span>`,
-      __fluent: {
+      fluent: {
         'uk-UA': new FluentResource(ftl`
         child = Повідомлення
         `),

diff --git a/packages/fluent-vue/__tests__/errorHandling.spec.ts b/packages/fluent-vue/__tests__/errorHandling.spec.ts
@@ -1,4 +1,5 @@
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
@@ -7,6 +8,7 @@ import { createFluentVue } from '../src'
 
 describe('vue integration', () => {
   const localVue = createLocalVue()
+  localVue.use(VueCompositionApi)
 
   const bundle = new FluentBundle('en-US')
 

diff --git a/packages/fluent-vue/__tests__/vue/component.spec.ts b/packages/fluent-vue/__tests__/vue/component.spec.ts
@@ -1,10 +1,14 @@
+import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../../src'
 
+Vue.use(VueCompositionApi)
+
 describe('component', () => {
   let options: any
   let bundle: FluentBundle

diff --git a/packages/fluent-vue/__tests__/vue/customComponents.spec.ts b/packages/fluent-vue/__tests__/vue/customComponents.spec.ts
@@ -1,10 +1,14 @@
+import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../../src'
 
+Vue.use(VueCompositionApi)
+
 describe('method', () => {
   let options: any
   let bundle: FluentBundle

diff --git a/packages/fluent-vue/__tests__/vue/directive.spec.ts b/packages/fluent-vue/__tests__/vue/directive.spec.ts
@@ -1,11 +1,14 @@
 import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../../src'
 
+Vue.use(VueCompositionApi)
+
 describe('directive', () => {
   let options: any
   let bundle: FluentBundle

diff --git a/packages/fluent-vue/__tests__/vue/messageOverride.spec.ts b/packages/fluent-vue/__tests__/vue/messageOverride.spec.ts
@@ -1,11 +1,15 @@
+import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../../src'
 import { FluentVue } from '../../src/interfaces'
 
+Vue.use(VueCompositionApi)
+
 describe('message override', () => {
   let options: any
   let fluent: FluentVue
@@ -45,7 +49,7 @@ describe('message override', () => {
 
     const component = {
       template: `<a v-t:link href="/foo">Fallback text</a>`,
-      __fluent: {
+      fluent: {
         uk: new FluentResource(ftl`
         link = текст посилання 2
         `),

diff --git a/packages/fluent-vue/__tests__/vue/plugin.spec.ts b/packages/fluent-vue/__tests__/vue/plugin.spec.ts
@@ -1,10 +1,14 @@
+import Vue from 'vue'
 import { createLocalVue, mount } from '@vue/test-utils'
+import VueCompositionApi from '@vue/composition-api'
 
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import ftl from '@fluent/dedent'
 
 import { createFluentVue } from '../../src'
 
+Vue.use(VueCompositionApi)
+
 describe('vue integration', () => {
   const localVue = createLocalVue()
 
@@ -81,7 +85,7 @@ describe('vue integration', () => {
       data: () => ({
         name: 'Alice',
       }),
-      __fluent: {
+      fluent: {
         'en-US': new FluentResource(ftl`
         sub-message = Hello from child component, { $name }
         `),
@@ -107,26 +111,4 @@ describe('vue integration', () => {
       '<div>Hello, ⁨John⁩!<div>Hello from child component, ⁨Alice⁩</div>\n</div>'
     )
   })
-
-  it('clears instance on component destroy', () => {
-    // Arrange
-    const component = {
-      data: () => ({
-        name: 'john',
-      }),
-      template: "<div>{{ $t('message', { name }) }}</div>",
-    }
-
-    const mounted = mount(component, options)
-
-    // Act
-    mounted.destroy()
-
-    // Assert
-    expect(mounted.vm.$fluent).not.toBeUndefined()
-
-    localVue.nextTick(() => {
-      expect(mounted.vm.$fluent).toBeUndefined()
-    })
-  })
 })
diff --git a/packages/fluent-vue/package.json b/packages/fluent-vue/package.json
@@ -39,18 +39,26 @@
   "devDependencies": {
     "@fluent/bundle": "~0.16.0",
     "@fluent/dedent": "~0.3.0",
+    "@vue/composition-api": "^1.0.0-beta.14",
     "@vue/test-utils": "~1.1.0",
-    "vue": "~2.6.12",
+    "vue": "^2.6.12",
     "vue-template-compiler": "~2.6.12"
   },
   "dependencies": {
     "@fluent/langneg": "^0.5.0",
     "@fluent/sequence": "^0.6.0",
     "cached-iterable": "^0.3.0",
-    "tslib": "^2.0.1"
+    "tslib": "^2.0.1",
+    "vue-demi": "^0.4.0"
   },
   "peerDependencies": {
+    "@vue/composition-api": ">=1.0.0-beta.7",
     "@fluent/bundle": ">=0.14.0",
-    "vue": "~2.6.12"
+    "vue": ">=2.6.12 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   }
 }