From ebbb1acae305be11dfccc808c382796cf1650bbc Mon Sep 17 00:00:00 2001
From: 0xRezaa <rezab@wix.com>
Date: Fri, 3 Jan 2025 15:07:04 +0100
Subject: [PATCH 1/3] fix renderable ref in render of react board

---
 packages/react-board/src/create-board.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-board/src/create-board.tsx b/packages/react-board/src/create-board.tsx
index 7f626205..07ed6cf8 100644
--- a/packages/react-board/src/create-board.tsx
+++ b/packages/react-board/src/create-board.tsx
@@ -3,17 +3,18 @@ import { reactErrorHandledRendering } from './react-error-handled-render';
 import type { IReactBoard, OmitReactBoard } from './types';
 
 export function createBoard(input: OmitReactBoard<IReactBoard>): IReactBoard {
-    const res: IReactBoard = createRenderableBase<IReactBoard>({
+    return createRenderableBase<IReactBoard>({
         ...input,
         render(target) {
+            const renderable = this as IReactBoard;
             return baseRender(
-                res,
+                renderable,
                 async () => {
-                    let element = <res.Board />;
-                    const wrapRenderPlugins = getPluginsWithHooks(res, 'wrapRender');
+                    let element = <renderable.Board />;
+                    const wrapRenderPlugins = getPluginsWithHooks(renderable, 'wrapRender');
                     for (const plugin of wrapRenderPlugins) {
                         if (plugin.key.plugin?.wrapRender) {
-                            const el = plugin.key.plugin.wrapRender(plugin.props as never, res, element, target);
+                            const el = plugin.key.plugin.wrapRender(plugin.props as never, renderable, element, target);
                             element = el || element;
                         }
                     }
@@ -23,5 +24,4 @@ export function createBoard(input: OmitReactBoard<IReactBoard>): IReactBoard {
             );
         },
     });
-    return res;
 }

From b89c1c1ba4bd8a1da810af143dbe5cef3a7d756c Mon Sep 17 00:00:00 2001
From: 0xRezaa <rezab@wix.com>
Date: Fri, 3 Jan 2025 18:04:49 +0100
Subject: [PATCH 2/3] add test for mutated renderable

---
 packages/react-board/test/create-board.spec.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/react-board/test/create-board.spec.tsx b/packages/react-board/test/create-board.spec.tsx
index 9e961731..0ebda5e6 100644
--- a/packages/react-board/test/create-board.spec.tsx
+++ b/packages/react-board/test/create-board.spec.tsx
@@ -50,4 +50,16 @@ describe('create board', () => {
         // await board.render(canvas);
         await expect(board.render(canvas)).not.to.be.rejected;
     });
+
+    it('should allow render of renderable to access state in case of mutation', async () => {
+        const { canvas, cleanup } = board.setupStage();
+        disposables.add(cleanup);
+
+        const mutatedBoard = { ...board, Board: () => 'I was mutated' };
+
+        const cleanupRender = await mutatedBoard.render(canvas);
+        disposables.add(cleanupRender);
+
+        expect(canvas.innerHTML).to.include('I was mutated');
+    });
 });

From 1e4842b3992352a63f5c33c1fddfcffcc6b32670 Mon Sep 17 00:00:00 2001
From: 0xRezaa <rezab@wix.com>
Date: Wed, 8 Jan 2025 18:37:37 +0100
Subject: [PATCH 3/3] declare this

---
 packages/react-board/src/create-board.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-board/src/create-board.tsx b/packages/react-board/src/create-board.tsx
index 07ed6cf8..f45bac39 100644
--- a/packages/react-board/src/create-board.tsx
+++ b/packages/react-board/src/create-board.tsx
@@ -5,16 +5,15 @@ import type { IReactBoard, OmitReactBoard } from './types';
 export function createBoard(input: OmitReactBoard<IReactBoard>): IReactBoard {
     return createRenderableBase<IReactBoard>({
         ...input,
-        render(target) {
-            const renderable = this as IReactBoard;
+        render(this: IReactBoard, target) {
             return baseRender(
-                renderable,
+                this,
                 async () => {
-                    let element = <renderable.Board />;
-                    const wrapRenderPlugins = getPluginsWithHooks(renderable, 'wrapRender');
+                    let element = <this.Board />;
+                    const wrapRenderPlugins = getPluginsWithHooks(this, 'wrapRender');
                     for (const plugin of wrapRenderPlugins) {
                         if (plugin.key.plugin?.wrapRender) {
-                            const el = plugin.key.plugin.wrapRender(plugin.props as never, renderable, element, target);
+                            const el = plugin.key.plugin.wrapRender(plugin.props as never, this, element, target);
                             element = el || element;
                         }
                     }