diff --git a/scripts/generate-react-exports.js b/scripts/generate-react-exports.js index 4d69b111..a2f56ccb 100644 --- a/scripts/generate-react-exports.js +++ b/scripts/generate-react-exports.js @@ -28,18 +28,18 @@ for (const module of customElementsModules) { const { events, name: componentName, tagName: fileName, jsDoc } = componentDeclaration; const eventNames = events?.reduce((acc, curr) => { - acc[getReactEventName(curr.name)] = curr.name; - return acc; - }, {}) || {}; + acc[getReactEventName(curr.name)] = curr.name; + return acc; + }, {}) || {}; const eventTypes = events?.map(event => { - const eventName = getReactEventName(event.name); - const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text); - const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`; + const eventName = getReactEventName(event.name); + const eventType = cleanGenericTypes(componentDeclaration.typeParameters, event.type.text); + const predefinedEventName = `${componentName}${eventName.split("onBl")[1]}`; - eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`); - return `${eventName}: EventName<${predefinedEventName}>`; - }) || []; + eventStatements.push(`export declare type ${predefinedEventName} = ${eventType};`); + return `${eventName}: EventName<${predefinedEventName}>`; + }) || []; const importPath = path.replace(/^src\//, "").replace(/\.ts$/, ""); const typeName = componentName + "Type"; @@ -52,13 +52,15 @@ for (const module of customElementsModules) { const source = ` ${jsDoc} export const ${componentName}: React.LazyExoticComponent> = - customElements.whenDefined('${fileName}').then(() => createComponent<${componentType}>({ - react: React, - displayName: "${componentName}", - tagName: "${fileName}", - elementClass: customElements.get("${fileName}"), - events: ${JSON.stringify(eventNames)}, - })); + React.lazy(() => customElements.whenDefined('${fileName}').then(() => + createComponent<${componentType}>({ + react: React, + displayName: "${componentName}", + tagName: "${fileName}", + elementClass: customElements.get("${fileName}"), + events: ${JSON.stringify(eventNames)}, + })) + ); `; baklavaReactFileParts.push(source);