Make bundles property not deeply reactive (fluent-vue#673)

Demivan · web-flow · commit 1f561444fc8e · 2021-08-16T21:46:14.000+03:00
diff --git a/packages/fluent-vue/__tests__/performance.spec.ts b/packages/fluent-vue/__tests__/performance.spec.ts
@@ -0,0 +1,25 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { isReactive } from 'vue-demi'
+import { FluentBundle } from '@fluent/bundle'
+
+import { createFluentVue } from '../src'
+
+describe('performance checks', () => {
+  it('bundles are not deeply reactive', () => {
+    // Arrange
+    const bundle = new FluentBundle('en-US')
+
+    // Act
+    const fluent = createFluentVue({
+      bundles: [bundle]
+    })
+
+    // Assert
+    for (const bundle of fluent.bundles) {
+      expect(isReactive(bundle)).toEqual(false)
+    }
+  })
+})
diff --git a/packages/fluent-vue/src/index.ts b/packages/fluent-vue/src/index.ts
@@ -1,7 +1,7 @@
 import type { InstallFunction, Vue, Vue2, Vue3, Vue3Component } from './types/typesCompat'
 import type { FluentBundle, FluentVariable } from '@fluent/bundle'
 
-import { isVue3, ref, provide, Ref } from 'vue-demi'
+import { isVue3, shallowRef, provide } from 'vue-demi'
 import { TranslationContext, TranslationWithAttrs } from './TranslationContext'
 import { createVue2Directive, createVue3Directive } from './vue/directive'
 import component from './vue/component'
@@ -34,7 +34,7 @@ export interface FluentVue {
  * @param options - {@link FluentVueOptions}
  */
 export function createFluentVue (options: FluentVueOptions): FluentVue {
-  const bundles: Ref<Iterable<FluentBundle>> = ref(options.bundles)
+  const bundles = shallowRef(options.bundles)
 
   const rootContext = new TranslationContext(bundles)
 
