Enonic UI: Fix rendering of components with hooks #4097

Added proper aliases for react, and replace renderer with react.
Upgraded `@enonic-ui` dependency.

Author: edloidas

.swcrc

@@ -8,7 +8,12 @@
         },
         "transform": {
             "legacyDecorator": true,
-            "decoratorMetadata": true
+            "decoratorMetadata": true,
+            "react": {
+                "pragma": "createElement",
+                "pragmaFrag": "Fragment",
+                "importSource": "react"
+            }
         },
         "target": "es5",
         "keepClassNames": true,

package-lock.json

@@ -21,7 +21,7 @@
     "fix": "eslint --fix **/*.ts --cache"
   },
   "dependencies": {
-    "@enonic/ui": "^0.2.0",
+    "@enonic/ui": "^0.3.1",
     "@types/dompurify": "=3.0.5",
     "@types/mousetrap": "^1.6.15",
     "dompurify": "=3.1.7",

package.json

@@ -1,7 +1,8 @@
 import * as UI from '@enonic/ui';
-
 import {unwrap} from '@enonic/ui';
-import {h, render} from 'preact';
+import {createElement} from 'react';
+import {render} from 'react-dom';
+
 import {BrowserHelper} from '../BrowserHelper';
 import {Action} from '../ui/Action';
 import {LegacyElement} from './LegacyElement';
@@ -55,8 +56,8 @@ export class ActionButton<T extends Action = Action> extends LegacyElement<typeo
     }
 
     doRender(): Q.Promise<boolean> {
-        const actionButton = h(this.component, this.props.get());
-        const tooltip = h(UI.Tooltip, {
+        const actionButton = createElement(this.component, this.props.get());
+        const tooltip = createElement(UI.Tooltip, {
             value: unwrap(this.props.get().title),
             children: actionButton,
         } satisfies UI.TooltipProps);

src/main/resources/assets/admin/common/js/ui2/ActionButton.ts

@@ -1,7 +1,8 @@
 import {map, type MapStore} from 'nanostores';
-import type {ComponentProps, ComponentType} from 'preact';
-import {h, render} from 'preact';
 import * as Q from 'q';
+import type {ComponentProps, ComponentType} from 'react';
+import {createElement} from 'react';
+import {render} from 'react-dom';
 
 import {Element as BaseElement, NewElementBuilder} from '../dom/Element';
 
@@ -26,7 +27,7 @@ export class LegacyElement<C extends ComponentType<object>, P extends ComponentP
     }
 
     doRender(): Q.Promise<boolean> {
-        render(h(this.component, this.props.get()), this.getHTMLElement());
+        render(createElement(this.component, this.props.get()), this.getHTMLElement());
         return super.doRender();
     }
 

src/main/resources/assets/admin/common/js/ui2/LegacyElement.ts

@@ -8,6 +8,7 @@
         ],
         "outDir": "build/resources/main/dev/lib-admin-ui/",
         "moduleResolution": "bundler",
+        "baseUrl": ".",
         "declaration": true,
         "declarationDir": "build/resources/main/dev/lib-admin-ui/",
         "allowSyntheticDefaultImports": true,
@@ -24,7 +25,11 @@
             "q",
             "validator",
             "dompurify"
-        ]
+        ],
+        "paths": {
+            "react": ["node_modules/preact/compat"],
+            "react-dom": ["node_modules/preact/compat"]
+        }
     },
     "include": [
         "src/main/resources/assets/admin/common/js/**/*.ts"

tsconfig.json

@@ -24,7 +24,11 @@ module.exports = {
         assetModuleFilename: './[file]'
     },
     resolve: {
-        extensions: ['.ts', '.js', '.less', '.css']
+        extensions: ['.ts', '.js', '.less', '.css'],
+        alias: {
+            'react': 'preact/compat',
+            'react-dom': 'preact/compat'
+        }
     },
     module: {
         rules: [