fix(runtime-utils): pass non-enumerable globalProperties in mount + render helpers (#1476)

Author: yamachi4416

examples/app-vitest-full/components/ComponentWithPluginProvidedValue.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div id="s1">
+      {{ $pluginProvidedValues.value }}
+    </div>
+    <div id="s2">
+      {{ $pluginProvidedValues.func('value') }}
+    </div>
+    <div id="s3">
+      {{ $pluginProvidedValues.object.value }}
+    </div>
+  </div>
+</template>

examples/app-vitest-full/plugins/provided-values.ts

@@ -0,0 +1,11 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      pluginProvidedValues: {
+        value: 'pluginProvided.value',
+        func: (value: string) => `pluginProvided.func(${value})`,
+        object: { value: 'pluginProvided.object.value' },
+      },
+    },
+  }
+})

examples/app-vitest-full/tests/nuxt/mount-suspended.spec.ts

@@ -26,6 +26,7 @@ import ComponentWithReservedProp from '~/components/ComponentWithReservedProp.vu
 import ComponentWithReservedState from '~/components/ComponentWithReservedState.vue'
 import ComponentWithImports from '~/components/ComponentWithImports.vue'
 import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue'
+import ComponentWithPluginProvidedValue from '~/components/ComponentWithPluginProvidedValue.vue'
 import GenericStateComponent from '~/components/GenericStateComponent.vue'
 
 import { BoundAttrs } from '#components'
@@ -284,6 +285,13 @@ describe('mountSuspended', () => {
     expect(component.find('#s3').classes()).toHaveLength(0)
   })
 
+  it('can mount components with use plugin provided value in template', async () => {
+    const component = await mountSuspended(ComponentWithPluginProvidedValue)
+    expect(component.find('#s1').text()).toBe('pluginProvided.value')
+    expect(component.find('#s2').text()).toBe('pluginProvided.func(value)')
+    expect(component.find('#s3').text()).toBe('pluginProvided.object.value')
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {

examples/app-vitest-full/tests/nuxt/render-suspended.spec.ts

@@ -13,6 +13,7 @@ import ExportDefaultComponent from '~/components/ExportDefaultComponent.vue'
 import ExportDefineComponent from '~/components/ExportDefineComponent.vue'
 import ComponentWithAttrs from '~/components/ComponentWithAttrs.vue'
 import ComponentWithCssVar from '~/components/ComponentWithCssVar.vue'
+import ComponentWithPluginProvidedValue from '~/components/ComponentWithPluginProvidedValue.vue'
 import ExportDefaultWithRenderComponent from '~/components/ExportDefaultWithRenderComponent.vue'
 import ExportDefaultReturnsRenderComponent from '~/components/ExportDefaultReturnsRenderComponent.vue'
 import OptionsApiPage from '~/pages/other/options-api.vue'
@@ -179,6 +180,13 @@ describe('renderSuspended', () => {
     expect(container.querySelector('#s3')?.classList).toHaveLength(0)
   })
 
+  it('can render components with use plugin provided value in template', async () => {
+    const { container } = await renderSuspended(ComponentWithPluginProvidedValue)
+    expect(container.querySelector('#s1')?.textContent).toBe('pluginProvided.value')
+    expect(container.querySelector('#s2')?.textContent).toBe('pluginProvided.func(value)')
+    expect(container.querySelector('#s3')?.textContent).toBe('pluginProvided.object.value')
+  })
+
   describe('Options API', () => {
     beforeEach(() => {
       vi.spyOn(console, 'error').mockImplementation((message) => {

src/runtime-utils/mount.ts

@@ -273,7 +273,14 @@ export async function mountSuspended<T>(
             attrs,
             global: {
               config: {
-                globalProperties: vueApp.config.globalProperties,
+                globalProperties: {
+                  ...vueApp.config.globalProperties,
+                  // make all properties/keys enumerable.
+                  ...Object.fromEntries(
+                    Object.getOwnPropertyNames(vueApp.config.globalProperties)
+                      .map(key => [key, vueApp.config.globalProperties[key]]),
+                  ),
+                },
               },
               directives: vueApp._context.directives,
               provide: vueApp._context.provides,

src/runtime-utils/render.ts

@@ -263,7 +263,14 @@ export async function renderSuspended<T>(component: T, options?: RenderOptions<T
         attrs,
         global: {
           config: {
-            globalProperties: vueApp.config.globalProperties,
+            globalProperties: {
+              ...vueApp.config.globalProperties,
+              // make all properties/keys enumerable.
+              ...Object.fromEntries(
+                Object.getOwnPropertyNames(vueApp.config.globalProperties)
+                  .map(key => [key, vueApp.config.globalProperties[key]]),
+              ),
+            },
           },
           directives: vueApp._context.directives,
           provide: vueApp._context.provides,