diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md index 5b05eec2d..caa0b4c72 100644 --- a/code/CHANGELOG.md +++ b/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 diff --git a/code/packages/react/src/components/provider.tsx b/code/packages/react/src/components/provider.tsx index fedec67f2..1f11d64a0 100644 --- a/code/packages/react/src/components/provider.tsx +++ b/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): React.JSX.Element => { const weaveInstanceRef = React.useRef(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}; diff --git a/code/packages/sdk/src/managers/actions.ts b/code/packages/sdk/src/managers/actions.ts index b80a83169..c5ab67511 100644 --- a/code/packages/sdk/src/managers/actions.ts +++ b/code/packages/sdk/src/managers/actions.ts @@ -22,7 +22,6 @@ export class WeaveActionsManager { } triggerAction(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); } diff --git a/code/packages/sdk/src/stores/store.ts b/code/packages/sdk/src/stores/store.ts index 876254750..0844ffce3 100644 --- a/code/packages/sdk/src/stores/store.ts +++ b/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( + '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( '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( 'onUndoManagerStatusChange', change @@ -147,7 +150,6 @@ export abstract class WeaveStore implements WeaveStoreBase { undoStackLength: this.undoManager.undoStack.length, }; - config.callbacks?.onUndoManagerStatusChange?.(change); this.instance.emitEvent( '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( '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( 'onRoomLoaded', this.isRoomLoaded diff --git a/code/packages/sdk/src/weave.ts b/code/packages/sdk/src/weave.ts index 50865aabc..9ccfa0d5d 100644 --- a/code/packages/sdk/src/weave.ts +++ b/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 { this.moduleLogger.info('Start instance'); + this.emitEvent('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', {}); }); } diff --git a/code/packages/types/src/types.ts b/code/packages/types/src/types.ts index 062f84b7f..0384edb63 100644 --- a/code/packages/types/src/types.ts +++ b/code/packages/types/src/types.ts @@ -25,7 +25,6 @@ export type WeaveConfig = { actions?: WeaveActionBase[]; plugins?: WeavePluginBase[]; fonts?: WeaveFont[]; - callbacks?: WeaveCallbacks; logger?: WeaveLoggerConfig; }; @@ -190,17 +189,6 @@ export type WeaveUndoRedoChange = { undoStackLength: number; }; -// Callbacks - -export type WeaveCallbacks = { - onRender?: () => void; - onRoomLoaded?: (loaded: boolean) => void; - onInstanceStatus?: (status: WeaveStatus) => void; - onActiveActionChange?: (actionName: string | undefined) => void; - onStateChange?: (state: WeaveState) => void; - onUndoManagerStatusChange?: (undoManagerStatus: WeaveUndoRedoChange) => void; -}; - // Store export declare type docElementTypeDescription = diff --git a/docs/content/docs/main/changelog/prerelease/0.14.4.mdx b/docs/content/docs/main/changelog/prerelease/0.14.4.mdx index 96d40705b..88264a9cb 100644 --- a/docs/content/docs/main/changelog/prerelease/0.14.4.mdx +++ b/docs/content/docs/main/changelog/prerelease/0.14.4.mdx @@ -10,3 +10,7 @@ description: Documentation changes, create-app UI changes and some bugfixes ### Changed - [#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 diff --git a/docs/content/docs/react/api-reference/providers/weave-provider.mdx b/docs/content/docs/react/api-reference/providers/weave-provider.mdx index 412d0064a..a1d995f39 100644 --- a/docs/content/docs/react/api-reference/providers/weave-provider.mdx +++ b/docs/content/docs/react/api-reference/providers/weave-provider.mdx @@ -89,10 +89,5 @@ import { WeaveProvider } from "@inditextech/weave-react"; type: "WeaveFont[]", default: "[]", }, - callbacks: { - description: "Callbacks to provide to the instance", - type: "WeaveCallbacks", - default: "{}", - }, }} />