From caf2667227690febc682c083eb2b777fbfd1f79b Mon Sep 17 00:00:00 2001 From: julien huang Date: Sun, 11 Sep 2022 21:43:52 +0200 Subject: [PATCH 1/4] fix(nuxt): wrap createClientOnly after async import --- packages/nuxt/src/components/loader.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts index fb4a7836fa5..20aea1a978d 100644 --- a/packages/nuxt/src/components/loader.ts +++ b/packages/nuxt/src/components/loader.ts @@ -71,19 +71,25 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => { let identifier = map.get(component) || `__nuxt_component_${num++}` map.set(component, identifier) + const isClientOnly = component.mode === 'client' if (lazy) { imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }])) identifier += '_lazy' - imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)})`) + + if (isClientOnly) { + identifier += '_client' + imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) + imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)}.then(c => createClientOnly(c.${component.export})))`) + } else { + imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)})`) + } } else { imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }])) - } - - const isClientOnly = component.mode === 'client' - if (isClientOnly) { - imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) - imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`) - identifier += '_client' + if (isClientOnly) { + identifier += '_client' + imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) + imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`) + } } return identifier } From 92ed4ddb60b240654846f49713bdda2017bb4a24 Mon Sep 17 00:00:00 2001 From: julien huang Date: Sun, 11 Sep 2022 21:50:06 +0200 Subject: [PATCH 2/4] refactor(nuxt): make previous fix clearer --- packages/nuxt/src/components/loader.ts | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts index 20aea1a978d..baee5177009 100644 --- a/packages/nuxt/src/components/loader.ts +++ b/packages/nuxt/src/components/loader.ts @@ -74,23 +74,18 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => { const isClientOnly = component.mode === 'client' if (lazy) { imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }])) - identifier += '_lazy' - - if (isClientOnly) { - identifier += '_client' - imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) - imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)}.then(c => createClientOnly(c.${component.export})))`) - } else { - imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)})`) - } + identifier += isClientOnly ? '_lazy' : '_lazy_client' + imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)}${isClientOnly ? `.then(c => c.${component.export})` : ''})`) } else { imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }])) + if (isClientOnly) { - identifier += '_client' imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`) + identifier += '_client' } } + return identifier } // no matched From 4f90bdf3cb3e6f844abef9fa3e64b534ac7c9550 Mon Sep 17 00:00:00 2001 From: julien huang Date: Sun, 11 Sep 2022 23:22:30 +0200 Subject: [PATCH 3/4] fix(nxt): add missing import --- packages/nuxt/src/components/loader.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts index 59f2d8c8b74..9f4b27a1c8e 100644 --- a/packages/nuxt/src/components/loader.ts +++ b/packages/nuxt/src/components/loader.ts @@ -72,16 +72,17 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => { map.set(component, identifier) const isClientOnly = component.mode === 'client' + if (isClientOnly) { + imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) + } if (lazy) { imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }])) identifier += isClientOnly ? '_lazy' : '_lazy_client' - imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? `.then(c => c.${component.export})` : ''})`) - + imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`) } else { imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }])) if (isClientOnly) { - imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`) identifier += '_client' } From 3bbdac55b15ce8bb2762ba796534c516206406bb Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 20 Sep 2022 15:45:15 +0100 Subject: [PATCH 4/4] refactor: add additional component name change --- packages/nuxt/src/components/loader.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/nuxt/src/components/loader.ts b/packages/nuxt/src/components/loader.ts index 9f4b27a1c8e..912a991d78f 100644 --- a/packages/nuxt/src/components/loader.ts +++ b/packages/nuxt/src/components/loader.ts @@ -74,17 +74,19 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => { const isClientOnly = component.mode === 'client' if (isClientOnly) { imports.add(genImport('#app/components/client-only', [{ name: 'createClientOnly' }])) + identifier += '_client' } + if (lazy) { imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }])) - identifier += isClientOnly ? '_lazy' : '_lazy_client' + identifier += '_lazy' imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })}${isClientOnly ? '.then(c => createClientOnly(c))' : ''})`) } else { imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }])) if (isClientOnly) { - imports.add(`const ${identifier}_client = /*#__PURE__*/ createClientOnly(${identifier})`) - identifier += '_client' + imports.add(`const ${identifier}_wrapped = /*#__PURE__*/ createClientOnly(${identifier})`) + identifier += '_wrapped' } }