fix: fix react event name mappings BREAKING CHANGE (#449)

BREAKING CHANGE: This commit changes event names in React wrappers. Current React users need to control the changes.

Here is a chart to compare old and new names:

| Component | Native Event Name | Current React Event | Proposed React Event |
| --- | --- | --- | --- |
| `BlAlert` | `bl-close` | `onClose` | `onBlClose`|
| `BlButton` | `bl-click` | `onClick` | `onBlClick`|
| `BlCheckboxGroup` | `bl-checkbox-group-change` | `onChange` | `onBlCheckboxGroupChange` |
| `BlDialog` | `bl-dialog-open` | `onOpen` | `onBlDialogOpen` |
| `BlDialog` | `bl-dialog-close` | `onClose` | `onBlDialogClose` |
| `BlDrawer` | `bl-drawer-open` | `onOpen` | `onBlDrawerOpen` |
| `BlDrawer` | `bl-drawer-close` | `onClose` | `onBlDrawerClose` |
| `BlDropdown` | `bl-dropdown-open` | `onOpen` | `onBlDropdownOpen` |
| `BlDropdown` | `bl-dropdown-close` | `onClose` | `onBlDropdownClose` |
| `BlIcon` | `bl-load` | `onLoad` | `onBlLoad` |
| `BlIcon` | `bl-error` | `onError` | `onBlError` |
| `BlInput` | `bl-change` | `onChange` | `onBlChange` |
| `BlInput` | `bl-input` | `onInput` | `onBlInput` |
| `BlInput` | `bl-invalid` | `onInvalid` | `onBlInvalid` |
| `BlPagination` | `bl-change` | `onChange` | `onBlChange` |
| `BlRadioGroup` | `bl-radio-change` | `onChange` | `onBlRadioChange` |
| `BlSelect` | `bl-select` | `onSelect` | `onBlSelect` |
| `BlSwitch` | `bl-switch-toggle` | `onToggle` | `onBlSwitchToggle` |
| `BlTextarea` | `bl-input` | `onInput` | `onBlInput` |
| `BlTextarea` | `bl-change` | `onChange` | `onBlChange` |
| `BlTextarea` | `bl-invalid` | `onInvalid` | `onBlInvalid` |
| `BlTooltip` | `bl-tooltip-show` | `onShow` | `onBlTooltipShow` |
| `BlTooltip` | `bl-tooltip-hide` | `onHide` | `onBlTooltipHide` |
| `BlCheckbox` | `bl-checkbox-change` | `onChange` | `onBlCheckboxChange` |
| `BlCheckbox` | `bl-focus` | `onFous` | `onBlFocus` |
| `BlCheckbox` | `bl-blur` | `onBlur` | `onBlBlur` |
| `BlDropdownItem` | `bl-dropdown-item-click` | `onClick` | `onBlDropdownItemClick` |
| `BlRadio` | `bl-checked` | `onChecked` | `onBlChecked` |
| `BlRadio` | `bl-focus` | `onFocus` | `onBlFocus` |
| `BlRadio` | `bl-blur` | `onBlur` | `onBlBlur` |
| `BlSelectOption` | `bl-select-option` | `onOption` | `onBlSelectOption` |
| `BlTab` | `bl-tab-selected` | `onSelected` | `onBlTabSelected` |

custom-elements-manifest.config.mjs

@@ -27,7 +27,7 @@ export default {
 
                 return {
                   type: {
-                    text: `CustomEvent<${type.text.replace(/.*<([a-z]+)>/, '$1')}>`
+                    text: `CustomEvent<${type.text.match(/EventDispatcher<(.*?)>/s)[1]}>`
                   },
                   description,
                   name

package.json

@@ -107,6 +107,7 @@
     "lint-staged": "^13.1.2",
     "minimist": "^1.2.6",
     "npm-run-all": "^4.1.5",
+    "pascal-case": "^3.1.2",
     "prettier": "^2.0.4",
     "rollup-plugin-lit-css": "^4.0.0",
     "storybook": "6.5.9",

scripts/generate-react-exports.js

@@ -1,24 +1,26 @@
 const fs = require('fs-extra');
+const { pascalCase } = require('pascal-case');
 
 const importStatements = [
-  "import React from 'react';",
-  "import { createComponent } from '@lit-labs/react';",
+  'import React from "react";',
+  'import { type EventName, createComponent, ReactWebComponent } from "@lit-labs/react";',
+
+  // FIXME: These types should be determined automatically
+  'import { ISelectOption } from "./components/select/bl-select"',
 ];
 
 function writeBaklavaReactFile(fileContentParts) {
-  let fileContentText = `
-    /* eslint-disable @typescript-eslint/ban-ts-comment */
-    // @ts-nocheck
-    ${importStatements.join('\n')}
-    ${fileContentParts.join('\n\n')}
-  `;
+  let fileContentText = `/* eslint-disable @typescript-eslint/ban-ts-comment */\n` +
+    `// @ts-nocheck\n` +
+    `${importStatements.join('\n')}\n\n` +
+    `${fileContentParts.join('\n\n')}\n`
+  ;
 
-  fs.writeFileSync(`${__dirname}/../src/baklava-react.ts`, fileContentText.trim());
+  fs.writeFileSync(`${__dirname}/../src/baklava-react.ts`, fileContentText);
 }
 
 function getReactEventName(baklavaEventName) {
-  const rawEventName = baklavaEventName.match(/(\w+)/g).at(-1);
-  return `on${rawEventName[0].toUpperCase()}${rawEventName.slice(1)}`;
+  return `on${pascalCase(baklavaEventName)}`;
 }
 
 const customElements = fs.readJSONSync(`${__dirname}/../dist/custom-elements.json`);
@@ -38,26 +40,28 @@ for (const module of customElementsModules) {
       }, {})
     : {};
 
+  const eventTypes = events
+    ? `, {${events.map(event => `${getReactEventName(event.name)}: EventName<${event.type.text}>`).join(', ')}}`
+    : '';
+
   const importPath = path.replace(/^src\//, '').replace(/\.ts$/, '');
   const Type = componentName + 'Type';
 
   importStatements.push(`import type ${Type} from "./${importPath}";`);
 
   baklavaReactFileParts.push(
-    `
-  export const ${componentName} = React.lazy(() =>
-    customElements.whenDefined('${fileName}').then(elem => ({
-        default: createComponent<${Type}>(
-          {
-            react: React,
-            tagName: '${fileName}',
-            elementClass: elem,
-            events:${JSON.stringify(eventNames)}
-          }
+`export const ${componentName} = React.lazy<ReactWebComponent<${Type}${eventTypes}>>(() =>
+  customElements.whenDefined('${fileName}').then(elem => ({
+      default: createComponent<${Type}>(
+        {
+          react: React,
+          tagName: '${fileName}',
+          elementClass: elem,
+          events: ${JSON.stringify(eventNames)}
+        }
       )
-      })
- ));
-   `
+    })
+));`
   );
 }