fix: use wrapper for lazy-loaded functional components (#172)

Co-authored-by: pooya parsa <[email protected]>

templates/components/index.js

@@ -5,5 +5,36 @@
 
 <%= options.getComponents().map(c => {
   const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']`
-  return `export const Lazy${c.pascalName} = import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => ${exp})`
+  return `export const Lazy${c.pascalName} = import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))`
 }).join('\n') %>
+
+// nuxt/nuxt.js#8607
+export function wrapFunctional(options) {
+  if (!options || !options.functional) {
+    return options
+  }
+
+  const propKeys = Array.isArray(options.props) ? options.props : Object.keys(options.props || {})
+
+  return {
+    render(h) {
+      const attrs = {}
+      const props = {}
+
+      for (const key in this.$attrs) {
+        if (propKeys.includes(key)) {
+          props[key] = this.$attrs[key]
+        } else {
+          attrs[key] = this.$attrs[key]
+        }
+      }
+
+      return h(options, {
+        on: this.$listeners,
+        attrs,
+        props,
+        scopedSlots: this.$scopedSlots,
+      }, this.$slots.default)
+    }
+  }
+}

templates/components/plugin.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
+import { wrapFunctional } from './index'
+
 <% const components = options.getComponents() %>
 
 const components = {
 <%= components.map(c => {
   const exp = c.export === 'default' ? `c.default || c` : `c['${c.export}']`
-  return `  ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => ${exp})`
+  return `  ${c.pascalName.replace(/^Lazy/, '')}: () => import('../${relativeToBuild(c.filePath)}' /* webpackChunkName: "${c.chunkName}" */).then(c => wrapFunctional(${exp}))`
 }).join(',\n') %>
 }
 

test/fixture/my-lib/components/MAwesome.js

@@ -1,4 +1,4 @@
 // @vue/component
-export const MAwesome = {
+export const MMAwesome = {
   render: h => h('div', 'M is Awesome!')
 }