feat(board-plugins): add react wrapper plugin

packages/board-plugins/src/index.ts

@@ -1,2 +1,3 @@
 export * from './css-vars-plugin';
 export * from './react-context-plugin';
+export * from './react-wrapper-plugin';

packages/board-plugins/src/react-wrapper-plugin.tsx

@@ -0,0 +1,27 @@
+import { createPlugin } from '@wixc3/board-core';
+import type { IReactBoard } from '@wixc3/react-board';
+import React from 'react';
+
+export interface WrapperPluginProps {
+    wrapper: React.ComponentType<React.PropsWithChildren>;
+}
+
+export const reactWrapperPlugin = createPlugin<IReactBoard>()<WrapperPluginProps>(
+    'React-wrapper',
+    {},
+    {
+        wrapRender({ wrapper: WrapperComponent }, _metaData, el) {
+            return <WrapperComponent>{el}</WrapperComponent>;
+        },
+    },
+    (params) => {
+        const usedWrappers = new Set<WrapperPluginProps['wrapper']>();
+        return params.filter((p) => {
+            if (usedWrappers.has(p.wrapper)) {
+                return false;
+            }
+            usedWrappers.add(p.wrapper);
+            return true;
+        });
+    },
+);

packages/board-plugins/test/fixtures/wrapper-user.board.tsx

@@ -0,0 +1,14 @@
+import { reactWrapperPlugin } from '@wixc3/board-plugins';
+import { createBoard } from '@wixc3/react-board';
+
+export default createBoard({
+    name: 'Wrapper user',
+    Board: () => {
+        return 'board text';
+    },
+    plugins: [
+        reactWrapperPlugin.use({
+            wrapper: ({ children }: React.PropsWithChildren) => <div>wrapper text {children}</div>,
+        }),
+    ],
+});

packages/board-plugins/test/react-wrapper-plugin.spec.ts

@@ -0,0 +1,17 @@
+import { expect } from 'chai';
+import { createDisposables } from '@wixc3/create-disposables';
+import board from './fixtures/wrapper-user.board';
+
+describe('react wrapper plugin', () => {
+    const disposables = createDisposables();
+    afterEach(disposables.dispose);
+
+    it('wraps the board with wrapper', async () => {
+        const { canvas, cleanup } = board.setupStage();
+        disposables.add(cleanup);
+        const cleanupRender = await board.render(canvas);
+        disposables.add(cleanupRender);
+
+        expect(canvas.innerText).to.include('wrapper text board text');
+    });
+});

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;
 }

packages/react-board/test/create-board.spec.tsx

@@ -47,7 +47,18 @@ describe('create board', () => {
         const cleanupRender = await board.render(canvas);
         disposables.add(cleanupRender);
 
-        // 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');
+    });
 });