Feature/taipy designer react

frontend/taipy-gui/base/src/app.ts

@@ -10,6 +10,7 @@ import { TaipyWsAdapter, WsAdapter } from "./wsAdapter";
 import { WsMessageType } from "../../src/context/wsUtils";
 import { getBase } from "./utils";
 import { CookieHandler } from "./cookieHandler";
+import { Element, ElementManager } from "./renderer/elementManager";
 
 export type OnInitHandler = (taipyApp: TaipyApp) => void;
 export type OnChangeHandler = (taipyApp: TaipyApp, encodedName: string, value: unknown, dataEventKey?: string) => void;
@@ -47,6 +48,7 @@ export class TaipyApp {
     path: string | undefined;
     routes: Route[] | undefined;
     wsAdapters: WsAdapter[];
+    elementManager: ElementManager;
 
     constructor(
         onInit: OnInitHandler | undefined = undefined,
@@ -68,6 +70,7 @@ export class TaipyApp {
         this.path = path;
         this.socket = socket;
         this.wsAdapters = [new TaipyWsAdapter()];
+        this.elementManager = new ElementManager(this);
         this._ackList = [];
         this._rdc = {};
         this._cookieHandler = handleCookie ? new CookieHandler() : undefined;
@@ -295,6 +298,19 @@ export class TaipyApp {
     getBaseUrl() {
         return getBase();
     }
+
+    createCanvas(domElement: HTMLElement) {
+        this.elementManager.init(domElement);
+    }
+
+    addElement2Canvas(
+        type: string,
+        bindingEncodedVarName: string | undefined = undefined,
+        wrapperHtml: [string, string] | undefined = undefined,
+        id: string | undefined = undefined,
+    ) {
+        this.elementManager.addElement({ id, type, bindingEncodedVarName, wrapperHtml });
+    }
 }
 
 export const createApp = (

frontend/taipy-gui/base/src/components/Taipy/TaipyRendered.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2021-2025 Avaiga Private Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import React, { ComponentType, useEffect, useMemo, useReducer } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import JsxParser from "react-jsx-parser";
+
+import { ThemeProvider } from "@mui/system";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
+
+import { PageContext, TaipyContext } from "../../../../src/context/taipyContext";
+import { emptyArray } from "../../../../src/utils";
+import ErrorFallback from "../../../../src/utils/ErrorBoundary";
+import { getRegisteredComponents } from "../../../../src/components/Taipy";
+import { renderError, unregisteredRender } from "../../../../src/components/Taipy/Unregistered";
+import {
+    INITIAL_STATE,
+    initializeWebSocket,
+    taipyInitialize,
+    taipyReducer,
+} from "../../../../src/context/taipyReducers";
+import useStore from "../../store";
+
+const TaipyRendered = () => {
+    const jsx = useStore((state) => state.jsx);
+    const module = useStore((state) => state.module);
+    const pageState = useMemo(() => {
+        return { jsx, module };
+    }, [jsx, module]);
+    const [state, dispatch] = useReducer(taipyReducer, INITIAL_STATE, taipyInitialize);
+    const themeClass = "taipy-" + state.theme.palette.mode;
+
+    useEffect(() => {
+        initializeWebSocket(state.socket, dispatch);
+    }, [state.socket]);
+
+    useEffect(() => {
+        const classes = [themeClass];
+        document.body.classList.forEach((cls) => {
+            if (!cls.startsWith("taipy-")) {
+                classes.push(cls);
+            }
+        });
+        document.body.className = classes.join(" ");
+    }, [themeClass]);
+
+    return (
+        <TaipyContext.Provider value={{ state, dispatch }}>
+            <ThemeProvider theme={state.theme}>
+                <LocalizationProvider dateAdapter={AdapterDateFns}>
+                    <PageContext.Provider value={pageState}>
+                        <ErrorBoundary FallbackComponent={ErrorFallback}>
+                            <JsxParser
+                                disableKeyGeneration={true}
+                                bindings={state.data}
+                                components={getRegisteredComponents() as Record<string, ComponentType>}
+                                jsx={pageState.jsx}
+                                renderUnrecognized={unregisteredRender}
+                                allowUnknownElements={false}
+                                renderError={renderError}
+                                blacklistedAttrs={emptyArray}
+                            />
+                        </ErrorBoundary>
+                    </PageContext.Provider>
+                </LocalizationProvider>
+            </ThemeProvider>
+        </TaipyContext.Provider>
+    );
+};
+
+export default TaipyRendered;

frontend/taipy-gui/base/src/packaging/package.json

@@ -3,5 +3,9 @@
   "version": "4.1.0",
   "private": true,
   "main": "./taipy-gui-base.js",
-  "types": "./taipy-gui-base.d.ts"
+  "types": "./taipy-gui-base.d.ts",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
 }

frontend/taipy-gui/base/src/packaging/taipy-gui-base.d.ts

@@ -98,6 +98,30 @@ declare class CookieHandler {
     addBeforeUnloadListener(): void;
     deleteCookie(): Promise<void>;
 }
+declare class TaipyCanvas {
+    taipyApp: TaipyApp;
+    constructor(taipyApp: TaipyApp);
+    init(domElement: HTMLElement): void;
+    updateContent(jsx: string): void;
+}
+export interface TaipyRenderer {
+    render(elements: Element[]): string;
+}
+export interface Element {
+    id: string | undefined;
+    type: string;
+    bindingEncodedVarName: string | undefined;
+    wrapperHtml: [string, string] | undefined;
+}
+declare class ElementManager {
+    _elements: Element[];
+    _renderer: TaipyRenderer;
+    _canvas: TaipyCanvas;
+    taipyApp: TaipyApp;
+    constructor(taipyApp: TaipyApp);
+    init(domElement: HTMLElement): void;
+    addElement(element: Element): void;
+}
 export type OnInitHandler = (taipyApp: TaipyApp) => void;
 export type OnChangeHandler = (taipyApp: TaipyApp, encodedName: string, value: unknown, dataEventKey?: string) => void;
 export type OnNotifyHandler = (taipyApp: TaipyApp, type: string, message: string) => void;
@@ -131,6 +155,7 @@ export declare class TaipyApp {
     path: string | undefined;
     routes: Route[] | undefined;
     wsAdapters: WsAdapter[];
+    elementManager: ElementManager;
     constructor(
         onInit?: OnInitHandler | undefined,
         onChange?: OnChangeHandler | undefined,
@@ -158,7 +183,7 @@ export declare class TaipyApp {
     onWsStatusUpdateEvent(messageQueue: string[]): void;
     init(): void;
     initApp(): void;
-    sendWsMessage(type: WsMessageType | string, id: string, payload: unknown, context?: string | undefined): void;
+    sendWsMessage(type: WsMessageType | str, id: string, payload: unknown, context?: string | undefined): void;
     registerWsAdapter(wsAdapter: WsAdapter): void;
     getEncodedName(varName: string, module: string): string | undefined;
     getName(encodedName: string): [string, string] | undefined;
@@ -178,6 +203,13 @@ export declare class TaipyApp {
     getPageMetadata(): Record<string, unknown>;
     getWsStatus(): string[];
     getBaseUrl(): string;
+    createCanvas(domElement: HTMLElement): void;
+    addElement2Canvas(
+        type: string,
+        bindingEncodedVarName?: string | undefined,
+        wrapperHtml?: [string, string] | undefined,
+        id?: string | undefined,
+    ): void;
 }
 export declare const createApp: (
     onInit?: OnInitHandler,
@@ -188,3 +220,5 @@ export declare const createApp: (
 ) => TaipyApp;
 
 export { TaipyApp as default };
+
+export {};

frontend/taipy-gui/base/src/renderer/canvas.ts

@@ -0,0 +1,27 @@
+import { TaipyApp } from "../app";
+import { createRoot } from "react-dom/client";
+import useStore from "../store";
+import { createElement } from "react";
+import TaipyRendered from "../components/Taipy/TaipyRendered";
+
+export class TaipyCanvas {
+    taipyApp: TaipyApp;
+
+    constructor(taipyApp: TaipyApp) {
+        this.taipyApp = taipyApp;
+    }
+
+    init(domElement: HTMLElement) {
+        if (domElement) {
+            const root = createRoot(domElement);
+            root.render(createElement(TaipyRendered));
+            useStore.getState().setModule(this.taipyApp.getContext());
+        } else {
+            console.error("Root element not found!");
+        }
+    }
+
+    updateContent(jsx: string) {
+        useStore.getState().setJsx(jsx);
+    }
+}

frontend/taipy-gui/base/src/renderer/elementManager.ts

@@ -0,0 +1,36 @@
+import { TaipyApp } from "../app";
+import { TaipyCanvas } from "./canvas";
+import { FrontendRenderer, TaipyRenderer } from "./elementRenderer";
+
+export interface Element {
+    id: string | undefined;
+    type: string;
+    bindingEncodedVarName: string | undefined;
+    wrapperHtml: [string, string] | undefined;
+}
+
+export class ElementManager {
+    _elements: Element[];
+    _renderer: TaipyRenderer;
+    _canvas: TaipyCanvas;
+    taipyApp: TaipyApp;
+
+    constructor(taipyApp: TaipyApp) {
+        this.taipyApp = taipyApp;
+        this._elements = [];
+        this._renderer = new FrontendRenderer(taipyApp);
+        this._canvas = new TaipyCanvas(taipyApp);
+    }
+
+    init(domElement: HTMLElement) {
+        this._canvas.init(domElement);
+    }
+
+    addElement(element: Element) {
+        if (element.id === undefined) {
+            element.id = Math.random().toString(36).substring(10);
+        }
+        this._elements.push(element);
+        this._canvas.updateContent(this._renderer.render(this._elements));
+    }
+}

frontend/taipy-gui/base/src/renderer/elementRenderer.ts

@@ -0,0 +1,30 @@
+import { TaipyApp } from "../app";
+import { Element } from "./elementManager";
+
+export interface TaipyRenderer {
+    render(elements: Element[]): string;
+}
+
+export class FrontendRenderer implements TaipyRenderer {
+    taipyApp: TaipyApp;
+
+    constructor(taipyApp: TaipyApp) {
+        this.taipyApp = taipyApp;
+    }
+
+    render(elements: Element[]): string {
+        const elList: string[] = [];
+        for (const e of elements) {
+            const defaultValue = e.bindingEncodedVarName
+                ? this.taipyApp?.variableData?.get(e.bindingEncodedVarName)
+                : undefined;
+            const bindingVarStr = defaultValue
+                ? ` defaultValue={"${defaultValue}"} updateVarName="${e.bindingEncodedVarName}" value={${e.bindingEncodedVarName}}`
+                : "";
+            elList.push(
+                `${e.wrapperHtml && e.wrapperHtml[0]}<${e.type} key="${e.id}" ${bindingVarStr} />${e.wrapperHtml && e.wrapperHtml[1]}`,
+            );
+        }
+        return elList.join("\n");
+    }
+}

frontend/taipy-gui/base/src/store.ts

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+interface TaipyGuiBaseState {
+    jsx: string;
+    module: string;
+    setJsx: (newJsx: string) => void;
+    setModule: (newModule: string) => void;
+}
+
+const useStore = create<TaipyGuiBaseState>()((set) => ({
+    jsx: "",
+    module: "",
+    setJsx: (newJsx: string) => set(() => ({ jsx: newJsx })),
+    setModule: (newModule: string) => set(() => ({ module: newModule })),
+}));
+
+export default useStore;

frontend/taipy-gui/base/webpack.config.js

@@ -84,5 +84,19 @@ module.exports = [
                 patterns: [{ from: "./base/src/packaging", to: taipyGuiBaseExportPath }],
             }),
         ],
+        externals: {
+            "react": {
+                commonjs: "react",
+                commonjs2: "react",
+                amd: "react",
+                root: "_",
+            },
+            "react-dom": {
+                commonjs: "react-dom",
+                commonjs2: "react-dom",
+                amd: "react-dom",
+                root: "_",
+            },
+        },
     },
 ];