fix: lazy react exports (#320)

This change "may" break some React setups that works with Webpack and specific React versions. Please inform us if you notice any problems.

package.json

@@ -59,7 +59,7 @@
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
     "@fontsource/rubik": "^4.5.9",
-    "@lit-labs/react": "^1.0.7",
+    "@lit-labs/react": "^1.1.0",
     "@open-wc/form-control": "^0.4.1",
     "@open-wc/form-helpers": "^0.1.2",
     "element-internals-polyfill": "^1.1.15",

scripts/generate-react-exports.js

@@ -13,10 +13,7 @@ function writeBaklavaReactFile(fileContentParts) {
     ${fileContentParts.join('\n\n')}
   `;
 
-  fs.writeFileSync(
-    `${__dirname}/../src/baklava-react.ts`,
-    fileContentText.trim()
-  );
+  fs.writeFileSync(`${__dirname}/../src/baklava-react.ts`, fileContentText.trim());
 }
 
 function getReactEventName(baklavaEventName) {
@@ -48,12 +45,19 @@ for (const module of customElementsModules) {
 
   baklavaReactFileParts.push(
     `
-    export const ${componentName} = createComponent<${Type}>(
-        React,
-        '${fileName}',
-        customElements.get('${fileName}'),
-        ${JSON.stringify(eventNames)}
-      );`
+  export const ${componentName} = React.lazy(() =>
+    customElements.whenDefined('${fileName}').then(elem => ({
+        default: createComponent<${Type}>(
+          {
+            react: React,
+            tagName: '${fileName}',
+            elementClass: elem,
+            events:${JSON.stringify(eventNames)}
+          }
+      )
+      })
+ ));
+   `
   );
 }