@thienvu18/designable-react-sandbox 2.0.0

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present, Alibaba Group Holding Limited. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @thienvu18/designable-react-sandbox

package/esm/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ISandboxProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+    style?: React.CSSProperties;
+    cssAssets?: string[];
+    jsAssets?: string[];
+    scope?: any;
+}
+export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.RefObject<HTMLIFrameElement>;
+export declare const unmountSandboxContent: () => void;
+export declare const useSandboxScope: () => any;
+export declare const renderSandboxContent: (render: (scope?: any) => React.ReactNode) => void;
+export declare const Sandbox: React.FC<ISandboxProps>;

package/esm/index.js

@@ -0,0 +1,149 @@
+import React, { useRef, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { isFn, globalThisPolyfill } from '@thienvu18/designable-shared';
+import { useDesigner, useWorkspace, useLayout, usePrefix, } from '@thienvu18/designable-react';
+const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__';
+const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__';
+const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__';
+export const useSandbox = (props) => {
+    const ref = useRef(null);
+    const appCls = usePrefix('app');
+    const designer = useDesigner();
+    const workspace = useWorkspace();
+    const layout = useLayout();
+    const cssAssets = props.cssAssets || [];
+    const jsAssets = props.jsAssets || [];
+    const getCSSVar = (name) => {
+        const el = document.querySelector(`.${appCls}`);
+        return el ? getComputedStyle(el).getPropertyValue(name) : '';
+    };
+    useEffect(() => {
+        if (ref.current && workspace) {
+            const styles = cssAssets
+                ?.map?.((css) => {
+                return `<link media="all" rel="stylesheet" href="${css}" />`;
+            })
+                .join('\n');
+            const scripts = jsAssets
+                ?.map?.((js) => {
+                return `<script src="${js}" type="text/javascript" ></script>`;
+            })
+                .join('\n');
+            const contentWindow = ref.current.contentWindow;
+            const contentDocument = ref.current.contentDocument;
+            if (contentWindow && contentDocument) {
+                contentWindow[UNMOUNT_KEY]?.();
+                contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
+                contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
+                contentWindow['__DESIGNABLE_ENGINE__'] = designer;
+                contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
+                contentWindow['Formily'] = globalThisPolyfill['Formily'];
+                contentWindow['Designable'] = globalThisPolyfill['Designable'];
+                contentDocument.open();
+                contentDocument.write(`
+        <!DOCTYPE html>
+          <head>
+            ${styles}
+          </head>
+          <style>
+            html{
+              overflow: overlay;
+            }
+            ::-webkit-scrollbar {
+              width: 5px;
+              height: 5px;
+            }
+            ::-webkit-scrollbar-thumb {
+              background-color:${getCSSVar('--dn-scrollbar-color')};
+              border-radius: 0;
+              transition: all .25s ease-in-out;
+            }
+            ::-webkit-scrollbar-thumb:hover {
+              background-color: ${getCSSVar('--dn-scrollbar-hover-color')};
+            }
+            body{
+              margin:0;
+              padding:0;
+              overflow-anchor: none;
+              user-select:none;
+              background-color:${layout?.theme === 'light' ? '#fff' : 'transparent'} !important;
+            }
+            html{
+              overflow-anchor: none;
+            }
+            .inherit-cusor * {
+              cursor: inherit !important;
+            }
+          </style>
+          <body>
+            <div id="__SANDBOX_ROOT__"></div>
+            ${scripts}
+          </body>
+        </html>
+        `);
+                contentDocument.close();
+                return () => {
+                    contentWindow[UNMOUNT_KEY]?.();
+                };
+            }
+        }
+    }, [workspace, layout, props.scope, cssAssets, jsAssets, designer]);
+    return ref;
+};
+export const unmountSandboxContent = () => {
+    const root = globalThisPolyfill[ROOT_INSTANCE_KEY];
+    if (!root || typeof root.unmount !== 'function')
+        return;
+    // Clear the references first so repeated unload events remain idempotent.
+    globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined;
+    globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined;
+    root.unmount();
+};
+if (globalThisPolyfill.frameElement) {
+    globalThisPolyfill.addEventListener('unload', () => {
+        unmountSandboxContent();
+    });
+}
+globalThisPolyfill[UNMOUNT_KEY] = unmountSandboxContent;
+export const useSandboxScope = () => {
+    return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
+};
+export const renderSandboxContent = (render) => {
+    if (isFn(render)) {
+        const container = document.getElementById('__SANDBOX_ROOT__');
+        if (!container)
+            return;
+        let root = globalThisPolyfill[ROOT_INSTANCE_KEY];
+        const rootContainer = globalThisPolyfill[ROOT_CONTAINER_KEY];
+        if (root && rootContainer !== container) {
+            unmountSandboxContent();
+            root = undefined;
+        }
+        if (!root) {
+            root = createRoot(container);
+            globalThisPolyfill[ROOT_INSTANCE_KEY] = root;
+            globalThisPolyfill[ROOT_CONTAINER_KEY] = container;
+        }
+        root.render(render(useSandboxScope()));
+    }
+};
+export const Sandbox = (props) => {
+    const { style } = props;
+    const iframeProps = { ...props };
+    delete iframeProps.cssAssets;
+    delete iframeProps.jsAssets;
+    delete iframeProps.scope;
+    delete iframeProps.style;
+    const ref = useSandbox(props);
+    return React.createElement('iframe', {
+        ...iframeProps,
+        ref,
+        style: {
+            height: '100%',
+            width: '100%',
+            border: 'none',
+            display: 'block',
+            ...style,
+        },
+    });
+};

package/lib/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ISandboxProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+    style?: React.CSSProperties;
+    cssAssets?: string[];
+    jsAssets?: string[];
+    scope?: any;
+}
+export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.RefObject<HTMLIFrameElement>;
+export declare const unmountSandboxContent: () => void;
+export declare const useSandboxScope: () => any;
+export declare const renderSandboxContent: (render: (scope?: any) => React.ReactNode) => void;
+export declare const Sandbox: React.FC<ISandboxProps>;

package/lib/index.js

@@ -0,0 +1,180 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sandbox = exports.renderSandboxContent = exports.useSandboxScope = exports.unmountSandboxContent = exports.useSandbox = void 0;
+const react_1 = __importStar(require("react"));
+const client_1 = require("react-dom/client");
+const designable_shared_1 = require("@thienvu18/designable-shared");
+const designable_react_1 = require("@thienvu18/designable-react");
+const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__';
+const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__';
+const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__';
+const useSandbox = (props) => {
+    const ref = (0, react_1.useRef)(null);
+    const appCls = (0, designable_react_1.usePrefix)('app');
+    const designer = (0, designable_react_1.useDesigner)();
+    const workspace = (0, designable_react_1.useWorkspace)();
+    const layout = (0, designable_react_1.useLayout)();
+    const cssAssets = props.cssAssets || [];
+    const jsAssets = props.jsAssets || [];
+    const getCSSVar = (name) => {
+        const el = document.querySelector(`.${appCls}`);
+        return el ? getComputedStyle(el).getPropertyValue(name) : '';
+    };
+    (0, react_1.useEffect)(() => {
+        if (ref.current && workspace) {
+            const styles = cssAssets
+                ?.map?.((css) => {
+                return `<link media="all" rel="stylesheet" href="${css}" />`;
+            })
+                .join('\n');
+            const scripts = jsAssets
+                ?.map?.((js) => {
+                return `<script src="${js}" type="text/javascript" ></script>`;
+            })
+                .join('\n');
+            const contentWindow = ref.current.contentWindow;
+            const contentDocument = ref.current.contentDocument;
+            if (contentWindow && contentDocument) {
+                contentWindow[UNMOUNT_KEY]?.();
+                contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
+                contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
+                contentWindow['__DESIGNABLE_ENGINE__'] = designer;
+                contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
+                contentWindow['Formily'] = designable_shared_1.globalThisPolyfill['Formily'];
+                contentWindow['Designable'] = designable_shared_1.globalThisPolyfill['Designable'];
+                contentDocument.open();
+                contentDocument.write(`
+        <!DOCTYPE html>
+          <head>
+            ${styles}
+          </head>
+          <style>
+            html{
+              overflow: overlay;
+            }
+            ::-webkit-scrollbar {
+              width: 5px;
+              height: 5px;
+            }
+            ::-webkit-scrollbar-thumb {
+              background-color:${getCSSVar('--dn-scrollbar-color')};
+              border-radius: 0;
+              transition: all .25s ease-in-out;
+            }
+            ::-webkit-scrollbar-thumb:hover {
+              background-color: ${getCSSVar('--dn-scrollbar-hover-color')};
+            }
+            body{
+              margin:0;
+              padding:0;
+              overflow-anchor: none;
+              user-select:none;
+              background-color:${layout?.theme === 'light' ? '#fff' : 'transparent'} !important;
+            }
+            html{
+              overflow-anchor: none;
+            }
+            .inherit-cusor * {
+              cursor: inherit !important;
+            }
+          </style>
+          <body>
+            <div id="__SANDBOX_ROOT__"></div>
+            ${scripts}
+          </body>
+        </html>
+        `);
+                contentDocument.close();
+                return () => {
+                    contentWindow[UNMOUNT_KEY]?.();
+                };
+            }
+        }
+    }, [workspace, layout, props.scope, cssAssets, jsAssets, designer]);
+    return ref;
+};
+exports.useSandbox = useSandbox;
+const unmountSandboxContent = () => {
+    const root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY];
+    if (!root || typeof root.unmount !== 'function')
+        return;
+    // Clear the references first so repeated unload events remain idempotent.
+    designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined;
+    designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined;
+    root.unmount();
+};
+exports.unmountSandboxContent = unmountSandboxContent;
+if (designable_shared_1.globalThisPolyfill.frameElement) {
+    designable_shared_1.globalThisPolyfill.addEventListener('unload', () => {
+        (0, exports.unmountSandboxContent)();
+    });
+}
+designable_shared_1.globalThisPolyfill[UNMOUNT_KEY] = exports.unmountSandboxContent;
+const useSandboxScope = () => {
+    return designable_shared_1.globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
+};
+exports.useSandboxScope = useSandboxScope;
+const renderSandboxContent = (render) => {
+    if ((0, designable_shared_1.isFn)(render)) {
+        const container = document.getElementById('__SANDBOX_ROOT__');
+        if (!container)
+            return;
+        let root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY];
+        const rootContainer = designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY];
+        if (root && rootContainer !== container) {
+            (0, exports.unmountSandboxContent)();
+            root = undefined;
+        }
+        if (!root) {
+            root = (0, client_1.createRoot)(container);
+            designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = root;
+            designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = container;
+        }
+        root.render(render((0, exports.useSandboxScope)()));
+    }
+};
+exports.renderSandboxContent = renderSandboxContent;
+const Sandbox = (props) => {
+    const { style } = props;
+    const iframeProps = { ...props };
+    delete iframeProps.cssAssets;
+    delete iframeProps.jsAssets;
+    delete iframeProps.scope;
+    delete iframeProps.style;
+    const ref = (0, exports.useSandbox)(props);
+    return react_1.default.createElement('iframe', {
+        ...iframeProps,
+        ref,
+        style: {
+            height: '100%',
+            width: '100%',
+            border: 'none',
+            display: 'block',
+            ...style,
+        },
+    });
+};
+exports.Sandbox = Sandbox;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@thienvu18/designable-react-sandbox",
+  "version": "2.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "files": [
+    "lib",
+    "esm",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "engines": {
+    "node": ">=20 <25"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thienvu18/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/thienvu18/designable/issues"
+  },
+  "homepage": "https://github.com/thienvu18/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm && npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc --project tsconfig.build.json --outDir lib",
+    "build:esm": "tsc --project tsconfig.build.json --module es2020 --outDir esm"
+  },
+  "peerDependencies": {
+    "react": ">=19 <20",
+    "react-dom": ">=19 <20"
+  },
+  "dependencies": {
+    "@thienvu18/designable-react": "2.0.0",
+    "@thienvu18/designable-shared": "2.0.0"
+  },
+  "devDependencies": {
+    "@formily/json-schema": "^2.3.7",
+    "@formily/path": "^2.3.7",
+    "@formily/reactive": "^2.3.7",
+    "@formily/reactive-react": "^2.3.7",
+    "antd": "^6.6.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-is": "^19.2.8",
+    "typescript": "5.2.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}