1
1
import type { VNode , VNodeData } from 'vue'
2
+ import Vue from 'vue'
2
3
import {
3
4
checkKeyIsVueDirective ,
4
5
checkIsHTMLElement ,
@@ -22,6 +23,7 @@ import { ConfigType, TagType } from './type'
22
23
import { getCurrentInstance } from './runtime'
23
24
24
25
const V_BIND_REGEXP = / ^ v ( - b | B ) i n d : /
26
+ let _jsxsId = 0
25
27
26
28
// Reference:
27
29
// https://cn.vuejs.org/v2/guide/render-function.html
@@ -144,11 +146,21 @@ const jsx = function (
144
146
const children = isArray ( config . children ) ? config . children : [ config . children ]
145
147
146
148
// Check if it is JSXS function.
149
+ // JSXS function must be wrapped into a Vue component, and in order to
150
+ // avoid re-creating component, register it as a global component, and
151
+ // next time it will be taken out from Vue.
147
152
const isJsxsFunc = typeof tag === 'function' && isUndefined ( ( tag as any ) . cid )
148
153
if ( isJsxsFunc ) {
149
- return h ( {
150
- render : tag as any
151
- } , vNodeData , children )
154
+ // @ts -ignore
155
+ let jsxsId = tag . __jsxs_id__
156
+ if ( ! jsxsId ) {
157
+ jsxsId = 'jsxs-comp-' + _jsxsId ++
158
+ // @ts -ignore
159
+ tag . __jsxs_id__ = jsxsId
160
+ // @ts -ignore
161
+ Vue . component ( jsxsId , { render : tag } )
162
+ }
163
+ return h ( Vue . component ( jsxsId ) , vNodeData , children )
152
164
}
153
165
154
166
return h ( tag , vNodeData , children )
0 commit comments