Fix loading errors on React provider

code/CHANGELOG.md

@@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [#255](https://github.com/InditexTech/weavejs/issues/255) Update documentation images and favicon
 
+### Fixed
+
+- [#257](https://github.com/InditexTech/weavejs/issues/257) Fix loading errors on React provider
+
 ## [0.14.3] - 2025-05-21
 
 ### Fixed
@@ -279,65 +283,34 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#18](https://github.com/InditexTech/weavejs/issues/18) Fix awareness not working on store-azure-web-pubsub
 
 [Unreleased]: https://github.com/InditexTech/weavejs/compare/0.14.3...HEAD
-
 [0.14.3]: https://github.com/InditexTech/weavejs/compare/0.14.2...0.14.3
-
 [0.14.2]: https://github.com/InditexTech/weavejs/compare/0.14.1...0.14.2
-
 [0.14.1]: https://github.com/InditexTech/weavejs/compare/0.14.0...0.14.1
-
 [0.14.0]: https://github.com/InditexTech/weavejs/compare/0.13.1...0.14.0
-
 [0.13.1]: https://github.com/InditexTech/weavejs/compare/0.13.0...0.13.1
-
 [0.13.0]: https://github.com/InditexTech/weavejs/compare/0.12.1...0.13.0
-
 [0.12.1]: https://github.com/InditexTech/weavejs/compare/0.12.0...0.12.1
-
 [0.12.0]: https://github.com/InditexTech/weavejs/compare/0.11.0...0.12.0
-
 [0.11.0]: https://github.com/InditexTech/weavejs/compare/0.10.3...0.11.0
-
 [0.10.3]: https://github.com/InditexTech/weavejs/compare/0.10.2...0.10.3
-
 [0.10.2]: https://github.com/InditexTech/weavejs/compare/0.10.1...0.10.2
-
 [0.10.1]: https://github.com/InditexTech/weavejs/compare/0.10.0...0.10.1
-
 [0.10.0]: https://github.com/InditexTech/weavejs/compare/0.9.3...0.10.0
-
 [0.9.3]: https://github.com/InditexTech/weavejs/compare/0.9.2...0.9.3
-
 [0.9.2]: https://github.com/InditexTech/weavejs/compare/0.9.1...0.9.2
-
 [0.9.1]: https://github.com/InditexTech/weavejs/compare/0.9.0...0.9.1
-
 [0.9.0]: https://github.com/InditexTech/weavejs/compare/0.8.0...0.9.0
-
 [0.8.0]: https://github.com/InditexTech/weavejs/compare/0.7.1...0.8.0
-
 [0.7.1]: https://github.com/InditexTech/weavejs/compare/0.7.0...0.7.1
-
 [0.7.0]: https://github.com/InditexTech/weavejs/compare/0.6.0...0.7.0
-
 [0.6.0]: https://github.com/InditexTech/weavejs/compare/0.5.0...0.6.0
-
 [0.5.0]: https://github.com/InditexTech/weavejs/compare/0.4.0...0.5.0
-
 [0.4.0]: https://github.com/InditexTech/weavejs/compare/0.3.3...0.4.0
-
 [0.3.3]: https://github.com/InditexTech/weavejs/compare/0.3.2...0.3.3
-
 [0.3.2]: https://github.com/InditexTech/weavejs/compare/0.3.1...0.3.2
-
 [0.3.1]: https://github.com/InditexTech/weavejs/compare/0.3.0...0.3.1
-
 [0.3.0]: https://github.com/InditexTech/weavejs/compare/0.2.1...0.3.0
-
 [0.2.1]: https://github.com/InditexTech/weavejs/compare/0.2.0...0.2.1
-
 [0.2.0]: https://github.com/InditexTech/weavejs/compare/0.1.1...0.2.0
-
 [0.1.1]: https://github.com/InditexTech/weavejs/compare/0.1.0...0.1.1
-
 [0.1.0]: https://github.com/InditexTech/weavejs/releases/tag/0.1.0

code/packages/react/src/components/provider.tsx

@@ -25,9 +25,9 @@ import {
   type WeaveState,
   type WeaveUser,
   type WeaveFont,
-  type WeaveCallbacks,
   type WeaveUndoRedoChange,
   type WeaveStatus,
+  WEAVE_INSTANCE_STATUS,
 } from '@inditextech/weave-types';
 import { useWeave } from './store';
 
@@ -42,7 +42,6 @@ type WeaveProviderType = {
   customNodes?: WeaveNode[];
   customActions?: WeaveAction[];
   customPlugins?: WeavePlugin[];
-  callbacks?: WeaveCallbacks;
   children: React.ReactNode;
 };
 
@@ -55,7 +54,6 @@ export const WeaveProvider = ({
   plugins = [],
   customPlugins = [],
   fonts = [],
-  callbacks = {},
   children,
 }: Readonly<WeaveProviderType>): React.JSX.Element => {
   const weaveInstanceRef = React.useRef<Weave | null>(null);
@@ -69,19 +67,9 @@ export const WeaveProvider = ({
   const setCanRedo = useWeave((state) => state.setCanRedo);
   const setActualAction = useWeave((state) => state.setActualAction);
 
-  const {
-    onInstanceStatus,
-    onRoomLoaded,
-    onStateChange,
-    onUndoManagerStatusChange,
-    onActiveActionChange,
-    ...restCallbacks
-  } = callbacks;
-
   const onInstanceStatusHandler = React.useCallback(
     (status: WeaveStatus) => {
       setStatus(status);
-      onInstanceStatus?.(status);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -90,7 +78,6 @@ export const WeaveProvider = ({
   const onRoomLoadedHandler = React.useCallback(
     (status: boolean) => {
       setRoomLoaded(status);
-      onRoomLoaded?.(status);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -99,7 +86,6 @@ export const WeaveProvider = ({
   const onStateChangeHandler = React.useCallback(
     (state: WeaveState) => {
       setAppState(state);
-      onStateChange?.(state);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedNodes]
@@ -110,7 +96,6 @@ export const WeaveProvider = ({
       const { canUndo, canRedo } = undoManagerStatus;
       setCanUndo(canUndo);
       setCanRedo(canRedo);
-      onUndoManagerStatusChange?.(undoManagerStatus);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -119,7 +104,6 @@ export const WeaveProvider = ({
   const onActiveActionChangeHandler = React.useCallback(
     (actionName: string | undefined) => {
       setActualAction(actionName);
-      onActiveActionChange?.(status);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedNodes]
@@ -193,14 +177,6 @@ export const WeaveProvider = ({
             actions,
             plugins: [...instancePlugins, ...customPlugins],
             fonts,
-            callbacks: {
-              ...restCallbacks,
-              onInstanceStatus: onInstanceStatusHandler,
-              onRoomLoaded: onRoomLoadedHandler,
-              onStateChange: onStateChangeHandler,
-              onUndoManagerStatusChange: onUndoManagerStatusChangeHandler,
-              onActiveActionChange: onActiveActionChangeHandler,
-            },
             logger: {
               level: 'info',
             },
@@ -212,13 +188,45 @@ export const WeaveProvider = ({
           }
         );
 
+        weaveInstanceRef.current.addEventListener(
+          'onInstanceStatus',
+          onInstanceStatusHandler
+        );
+
+        weaveInstanceRef.current.addEventListener(
+          'onRoomLoaded',
+          onRoomLoadedHandler
+        );
+
+        weaveInstanceRef.current.addEventListener(
+          'onStateChange',
+          onStateChangeHandler
+        );
+
+        weaveInstanceRef.current.addEventListener(
+          'onUndoManagerStatusChange',
+          onUndoManagerStatusChangeHandler
+        );
+
+        weaveInstanceRef.current.addEventListener(
+          'onActiveActionChange',
+          onActiveActionChangeHandler
+        );
+
         setInstance(weaveInstanceRef.current);
         weaveInstanceRef.current.start();
       }
     }
 
+    setStatus(WEAVE_INSTANCE_STATUS.IDLE);
+    setRoomLoaded(false);
     initWeave();
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    return () => {
+      weaveInstanceRef.current?.destroy();
+      weaveInstanceRef.current = null;
+    };
   }, []);
 
   return <>{children}</>;

code/packages/sdk/src/managers/actions.ts

@@ -22,7 +22,6 @@ export class WeaveActionsManager {
   }
 
   triggerAction<T>(actionName: string, params?: T): unknown {
-    const config = this.instance.getConfiguration();
     const actionsHandlers = this.instance.getActionsHandlers();
 
     if (!actionsHandlers[actionName]) {
@@ -41,7 +40,6 @@ export class WeaveActionsManager {
       params
     );
 
-    config.callbacks?.onActiveActionChange?.(this.activeAction);
     this.instance.emitEvent('onActiveActionChange', this.activeAction);
 
     return payload;
@@ -86,7 +84,6 @@ export class WeaveActionsManager {
   }
 
   cancelAction(actionName: string): void {
-    const config = this.instance.getConfiguration();
     const actionsHandlers = this.instance.getActionsHandlers();
 
     if (!actionsHandlers[actionName]) {
@@ -98,7 +95,6 @@ export class WeaveActionsManager {
     this.activeAction = undefined;
     actionsHandlers[actionName].cleanup?.();
 
-    config.callbacks?.onActiveActionChange?.(this.activeAction);
     this.instance.emitEvent('onActiveActionChange', this.activeAction);
   }
 

code/packages/sdk/src/stores/store.ts

@@ -69,6 +69,11 @@ export abstract class WeaveStore implements WeaveStoreBase {
       .getMainLogger()
       .info(`Store with name [${this.getName()}] registered`);
 
+    this.instance.emitEvent<WeaveStoreOnRoomLoadedEvent>(
+      'onRoomLoaded',
+      this.isRoomLoaded
+    );
+
     return this;
   }
 
@@ -101,9 +106,8 @@ export abstract class WeaveStore implements WeaveStoreBase {
   }
 
   setup(): void {
-    const config = this.instance.getConfiguration();
+    this.isRoomLoaded = false;
 
-    config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
     this.instance.emitEvent<WeaveStoreOnRoomLoadedEvent>(
       'onRoomLoaded',
       this.isRoomLoaded
@@ -132,7 +136,6 @@ export abstract class WeaveStore implements WeaveStoreBase {
             undoStackLength: this.undoManager.undoStack.length,
           };
 
-          config.callbacks?.onUndoManagerStatusChange?.(change);
           this.instance.emitEvent<WeaveStoreOnUndoRedoChangeEvent>(
             'onUndoManagerStatusChange',
             change
@@ -147,7 +150,6 @@ export abstract class WeaveStore implements WeaveStoreBase {
             undoStackLength: this.undoManager.undoStack.length,
           };
 
-          config.callbacks?.onUndoManagerStatusChange?.(change);
           this.instance.emitEvent<WeaveStoreOnUndoRedoChangeEvent>(
             'onUndoManagerStatusChange',
             change
@@ -159,7 +161,6 @@ export abstract class WeaveStore implements WeaveStoreBase {
     observeDeep(this.getState(), () => {
       const newState: WeaveState = JSON.parse(JSON.stringify(this.getState()));
 
-      config.callbacks?.onStateChange?.(newState);
       this.instance.emitEvent<WeaveStoreOnStateChangeEvent>(
         'onStateChange',
         newState
@@ -190,7 +191,6 @@ export abstract class WeaveStore implements WeaveStoreBase {
         this.instance.setupRenderer();
         this.isRoomLoaded = true;
 
-        config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
         this.instance.emitEvent<WeaveStoreOnRoomLoadedEvent>(
           'onRoomLoaded',
           this.isRoomLoaded

code/packages/sdk/src/weave.ts

@@ -46,6 +46,7 @@ import { WeaveExportManager } from './managers/export';
 import { WeavePluginsManager } from './managers/plugins';
 import { WeaveNodesSelectionPlugin } from './plugins/nodes-selection/nodes-selection';
 import type { StageConfig } from 'konva/lib/Stage';
+import type { WeaveStoreOnRoomLoadedEvent } from './stores/types';
 
 export class Weave extends Emittery {
   private id: string;
@@ -144,7 +145,6 @@ export class Weave extends Emittery {
       this.moduleLogger.info('Instance started');
 
       this.status = WEAVE_INSTANCE_STATUS.RUNNING;
-      this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
       this.emitEvent('onInstanceStatus', this.status);
     });
   }
@@ -164,8 +164,9 @@ export class Weave extends Emittery {
   async start(): Promise<void> {
     this.moduleLogger.info('Start instance');
 
+    this.emitEvent<WeaveStoreOnRoomLoadedEvent>('onRoomLoaded', false);
+
     this.status = WEAVE_INSTANCE_STATUS.STARTING;
-    this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
     this.emitEvent('onInstanceStatus', this.status);
 
     // Register all the nodes, plugins and actions that come from the configuration
@@ -177,7 +178,6 @@ export class Weave extends Emittery {
     this.storeManager.registerStore(this.config.store as WeaveStore);
 
     this.status = WEAVE_INSTANCE_STATUS.LOADING_FONTS;
-    this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
     this.emitEvent('onInstanceStatus', this.status);
 
     // Start loading the fonts, this operation is asynchronous
@@ -193,28 +193,27 @@ export class Weave extends Emittery {
     store.connect();
   }
 
-  // destroy() {
-  //   this.moduleLogger.info(`Destroying the instance`);
+  destroy(): void {
+    this.moduleLogger.info(`Destroying the instance`);
 
-  //   // clear listeners
-  //   this.clearListeners();
+    // clear listeners
+    this.clearListeners();
 
-  //   this.status = WEAVE_INSTANCE_STATUS.IDLE;
-  //   this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
-  //   this.emitEvent('onInstanceStatus', this.status);
+    this.status = WEAVE_INSTANCE_STATUS.IDLE;
+    this.emitEvent('onInstanceStatus', this.status);
 
-  //   // disconnect from the store
-  //   const store = this.storeManager.getStore();
-  //   store.disconnect();
+    // disconnect from the store
+    const store = this.storeManager.getStore();
+    store.disconnect();
 
-  //   // destroy the stage from memory
-  //   const stage = this.getStage();
-  //   if (stage) {
-  //     stage.destroy();
-  //   }
+    // destroy the stage from memory
+    const stage = this.getStage();
+    if (stage) {
+      stage.destroy();
+    }
 
-  //   this.moduleLogger.info(`Instance destroyed`);
-  // }
+    this.moduleLogger.info(`Instance destroyed`);
+  }
 
   getId(): string {
     return this.id;
@@ -384,14 +383,12 @@ export class Weave extends Emittery {
   update(newState: WeaveState): void {
     this.getStore().setState(newState);
     this.renderer.render(() => {
-      this.config.callbacks?.onRender?.();
       this.emitEvent('onRender', {});
     });
   }
 
   render(): void {
     this.renderer.render(() => {
-      this.config.callbacks?.onRender?.();
       this.emitEvent('onRender', {});
     });
   }