feat: upgrades react to v18

asyncapi · Apr 24, 2024 · f4dc1c9 · f4dc1c9
1 parent c4c3984
commit f4dc1c9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 31 deletions.
diff --git a/library/src/standalone-codebase.ts b/library/src/standalone-codebase.ts
@@ -1,12 +1,7 @@
 import React from 'react';
-import {
-  // eslint-disable-next-line react/no-deprecated
-  hydrate as hydrateComponent,
-  // eslint-disable-next-line react/no-deprecated
-  render as renderComponent,
-} from 'react-dom';
-
-function querySelector(selector: string): Element | DocumentFragment | null {
+import { hydrateRoot, createRoot } from 'react-dom/client';
+
+function querySelector(selector: string): Element | null {
   if (typeof document !== 'undefined') {
     return document.querySelector(selector);
   }
@@ -18,20 +13,19 @@ function querySelector(selector: string): Element | DocumentFragment | null {
  *
  * @param {Any} component of any kind
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createRender<P extends object>(component: any) {
-  return (
-    props: P,
-    container?: Element | DocumentFragment | null,
-    callback?: () => void,
-  ) => {
+export function createRender<
+  Props extends Parameters<typeof React.createElement>[1],
+>(component: Parameters<typeof React.createElement>[0]) {
+  return (props: Props, container?: Element | DocumentFragment | null) => {
     container = container ?? querySelector('asyncapi');
+
     if (container === null) {
       return;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    renderComponent(React.createElement(component, props), container, callback);
+    const root = createRoot(container);
+
+    root.render(React.createElement(component, props));
   };
 }
 
@@ -40,23 +34,16 @@ export function createRender<P extends object>(component: any) {
  *
  * @param {Any} component of any kind
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createHydrate<P extends object>(component: any) {
-  return (
-    props: P,
-    container?: Element | DocumentFragment | null,
-    callback?: () => void,
-  ) => {
+export function createHydrate<
+  Props extends Parameters<typeof React.createElement>[1],
+>(component: Parameters<typeof React.createElement>[0]) {
+  return (props: Props, container?: Element | Document | null) => {
     container = container ?? querySelector('asyncapi');
+
     if (container === null) {
       return;
     }
 
-    hydrateComponent(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      React.createElement(component, props),
-      container,
-      callback,
-    );
+    hydrateRoot(container, React.createElement(component, props));
   };
 }
diff --git a/playground/app/page.tsx b/playground/app/page.tsx
@@ -17,7 +17,7 @@ import {
 import { defaultConfig, parse, debounce } from '@/utils';
 import * as specs from '@/specs';
 
-const defaultSchema = specs.streetlights;
+const defaultSchema = specs.oneOf;
 
 interface State {
   schema: string;