Class oops 2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "embed-react-native-sdk",
-  "version": "1.1.0",
+  "version": "3.0.10",
   "description": "React Native SDK for Embedding TS",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -26,11 +26,6 @@
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@types/react": "^18.3.18",
-    "@types/react-native": "^0.72.8",
-    "react": "^18.3.1",
-    "react-native": "^0.77.0",
-    "react-native-webview": "^13.13.2",
     "rollup": "^4.32.0",
     "rollup-plugin-dts": "^6.1.1",
     "typescript": "^5.7.3"

src/LiveboardEmbedClass.ts

@@ -0,0 +1,16 @@
+import { TSEmbed } from './tsEmbed';
+import { componentFactory } from './componentFactory';
+import { LiveboardViewConfig } from './types';
+import WebView from 'react-native-webview';
+import { EmbedProps } from './util';
+import React from 'react';
+
+class LiveboardEmbedClass<T extends LiveboardViewConfig = LiveboardViewConfig> extends TSEmbed<T> {
+    constructor(webViewRef: React.RefObject<WebView>, config?: T) {
+        super(webViewRef, config);
+    }
+}
+
+export interface LiveboardEmbedProps extends LiveboardViewConfig, EmbedProps {}
+
+export const LiveboardEmbed = componentFactory<typeof LiveboardEmbedClass, LiveboardViewConfig, LiveboardEmbedProps>(LiveboardEmbedClass) || null;

src/componentFactory.tsx

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react';
+import { WebView } from 'react-native-webview';
+import { TSEmbed } from './tsEmbed';
+import { 
+    EmbedEvent,
+    ViewConfig,
+    MessageCallback,
+} from './types';
+import { EmbedProps } from './util';
+
+export type EmbedEventHandlers = { [key in keyof typeof EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };
+
+
+export interface ViewConfigAndListeners<T extends ViewConfig> {
+  viewConfig: T;
+  listeners: { [key in EmbedEvent]?: MessageCallback };
+}
+
+const getViewPropsAndListeners = <T extends EmbedProps, U extends ViewConfig>(
+    props: T
+): ViewConfigAndListeners<U> => {
+    return Object.keys(props).reduce(
+        (accu, key) => {
+            if (key.startsWith('on')) {
+                const eventName = key.slice(2) as keyof typeof EmbedEvent;
+                (accu.listeners as Record<string, MessageCallback>)[EmbedEvent[eventName]] = props[key as keyof T] as MessageCallback;
+            } else {
+                (accu.viewConfig as Record<string, any>)[key] = props[key as keyof T];
+            }
+            return accu as ViewConfigAndListeners<U>;
+        },
+        {
+            viewConfig: {} as U,
+            listeners: {},
+        },
+    );
+};
+
+export const componentFactory = <T extends typeof TSEmbed, V extends ViewConfig, U extends EmbedProps>(
+    EmbedConstructor: T,
+) => React.forwardRef<InstanceType<T>, U>((props, forwardedRef): JSX.Element | null => {
+    const embedInstance = React.useRef<InstanceType<T> | null>(null);
+    const webViewRef = React.useRef<WebView>(null);
+
+    if(!embedInstance.current) {
+        embedInstance.current = new EmbedConstructor(webViewRef) as InstanceType<T>;
+    }
+
+    const renderedWebView = React.useMemo((): JSX.Element | null => {
+        return embedInstance.current?.render() as React.JSX.Element ?? null;
+    }, [props]);
+
+    React.useEffect(() => {
+        return () => {
+            embedInstance.current?.destroy();
+            embedInstance.current = null;
+        }
+    }, [])
+
+    React.useEffect(() => {
+        const { viewConfig, listeners } = getViewPropsAndListeners<U, V>(props as U);
+        if(forwardedRef && typeof forwardedRef == 'object') {
+            (forwardedRef as React.MutableRefObject<InstanceType<T> | null>).current = embedInstance?.current;
+        }
+        embedInstance?.current?.updateConfig(viewConfig);
+
+        Object.entries(listeners).forEach(([eventName, callback]) => {
+            embedInstance.current?.on(eventName as EmbedEvent, callback as MessageCallback);
+        });
+    }, [props]);
+
+    if(!embedInstance.current) {
+        return null;
+    }
+
+    return renderedWebView ?? null;
+}); 

src/event-bridge.ts

@@ -85,4 +85,10 @@ export class EmbedBridge {
   private generateEventId(): string {
     return `evt_${Date.now()}_${Math.floor(Math.random() * 100000)}`;
   }
+
+  public destroy() {
+    this.events = {};
+    this.pendingReplies = {};
+    this.webViewRef = { current: null };
+  }
 }

src/index.ts

@@ -1,14 +1,5 @@
-import { useLiveboardRef } from "./hooks/useLiveboardRef";
 import { init } from "./init";
-import { LiveboardEmbed, LiveboardEmbedRef } from "./LiveboardEmbed";
+import { LiveboardEmbed } from "./LiveboardEmbedClass";
+import { AuthType, ViewConfig } from "./types";
 
-
-export { init, LiveboardEmbed, useLiveboardRef };
-export type { LiveboardEmbedRef };
-
-const EmbedReactNativeSDK = {
-  init,
-  LiveboardEmbed,
-  useLiveboardRef,
-};
-export default EmbedReactNativeSDK;
+export { init, LiveboardEmbed, AuthType, ViewConfig };