From b2cea4927e92c66b57b9d26013733fce78ede123 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 9 Aug 2023 12:19:00 +0100
Subject: [PATCH] feat(nuxt): allow experimental `global: 'sync'` components
 (#22558)

---
 packages/nuxt/src/components/templates.ts     | 19 ++++++++++++-------
 packages/schema/src/types/components.ts       |  2 +-
 test/basic.test.ts                            |  1 +
 test/fixtures/basic/components/GlobalSync.vue |  5 +++++
 test/fixtures/basic/nuxt.config.ts            |  7 +++++++
 test/fixtures/basic/pages/index.vue           |  1 +
 6 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 test/fixtures/basic/components/GlobalSync.vue

diff --git a/packages/nuxt/src/components/templates.ts b/packages/nuxt/src/components/templates.ts
index ce9f8ee088..6bb86c50fb 100644
--- a/packages/nuxt/src/components/templates.ts
+++ b/packages/nuxt/src/components/templates.ts
@@ -36,20 +36,25 @@ export default defineNuxtPlugin({
 export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateContext> = {
   filename: 'components.plugin.mjs',
   getContents ({ app }) {
-    const globalComponents = new Set<string>()
+    const lazyGlobalComponents = new Set<string>()
+    const syncGlobalComponents = new Set<string>()
     for (const component of app.components) {
-      if (component.global) {
-        globalComponents.add(component.pascalName)
+      if (component.global === 'sync') {
+        syncGlobalComponents.add(component.pascalName)
+      } else if (component.global) {
+        lazyGlobalComponents.add(component.pascalName)
       }
     }
-    if (!globalComponents.size) { return emptyComponentsPlugin }
+    if (!lazyGlobalComponents.size && !syncGlobalComponents.size) { return emptyComponentsPlugin }
 
-    const components = [...globalComponents]
+    const lazyComponents = [...lazyGlobalComponents]
+    const syncComponents = [...syncGlobalComponents]
 
     return `import { defineNuxtPlugin } from '#app/nuxt'
-import { ${components.map(c => 'Lazy' + c).join(', ')} } from '#components'
+import { ${[...lazyComponents.map(c => 'Lazy' + c), ...syncComponents].join(', ')} } from '#components'
 const lazyGlobalComponents = [
-  ${components.map(c => `["${c}", Lazy${c}]`).join(',\n')}
+  ${lazyComponents.map(c => `["${c}", Lazy${c}]`).join(',\n')},
+  ${syncComponents.map(c => `["${c}", ${c}]`).join(',\n')}
 ]
 
 export default defineNuxtPlugin({
diff --git a/packages/schema/src/types/components.ts b/packages/schema/src/types/components.ts
index 64eef5be17..6ca1ab773f 100644
--- a/packages/schema/src/types/components.ts
+++ b/packages/schema/src/types/components.ts
@@ -7,7 +7,7 @@ export interface Component {
   chunkName: string
   prefetch: boolean
   preload: boolean
-  global?: boolean
+  global?: boolean | 'sync'
   island?: boolean
   mode?: 'client' | 'server' | 'all'
   /**
diff --git a/test/basic.test.ts b/test/basic.test.ts
index 9e07df313b..1051bc86ce 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -94,6 +94,7 @@ describe('pages', () => {
     // should register global components automatically
     expect(html).toContain('global component registered automatically')
     expect(html).toContain('global component via suffix')
+    expect(html).toContain('This is a synchronously registered global component')
 
     await expectNoClientErrors('/')
   })
diff --git a/test/fixtures/basic/components/GlobalSync.vue b/test/fixtures/basic/components/GlobalSync.vue
new file mode 100644
index 0000000000..9e075fed9e
--- /dev/null
+++ b/test/fixtures/basic/components/GlobalSync.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    This is a synchronously registered global component
+  </div>
+</template>
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index 88b1ff5e6c..b4ca4d6c14 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/test/fixtures/basic/nuxt.config.ts
@@ -146,6 +146,13 @@ export default defineNuxtConfig({
         filePath: '~/other-components-folder/named-export'
       })
     },
+    'components:extend' (components) {
+      for (const comp of components) {
+        if (comp.pascalName === 'GlobalSync') {
+          comp.global = 'sync'
+        }
+      }
+    },
     'vite:extendConfig' (config) {
       config.plugins!.push({
         name: 'nuxt:server',
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index dd817783a6..eda06465a9 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -44,6 +44,7 @@
     </NuxtLink>
     <NestedSugarCounter :multiplier="2" />
     <CustomComponent />
+    <component :is="`global${'-'.toString()}sync`" />
     <Spin>Test</Spin>
     <component :is="`test${'-'.toString()}global`" />
     <component :is="`with${'-'.toString()}suffix`" />