npm - @sulesky/next-react-sandbox - Versions diffs - 1.0.3 - Mend

@sulesky/next-react-sandbox 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LICENSE.md +20 -0
package/README.md +1 -0
package/dist/designable.react-sandbox.umd.production.css +1 -0
package/dist/designable.react-sandbox.umd.production.js +1 -0
package/dist/designable.react-sandbox.umd.production.min.css +1 -0
package/dist/designable.react-sandbox.umd.production.min.js +11155 -0
package/esm/index.d.ts +11 -0
package/esm/index.js +87 -0
package/lib/index.d.ts +11 -0
package/lib/index.js +127 -0
package/package.json +37 -0
package/rollup.config.mjs +3 -0
package/src/index.ts +142 -0
package/tsconfig.build.json +10 -0
package/tsconfig.json +5 -0

package/esm/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ISandboxProps {
+    style?: React.CSSProperties;
+    cssAssets?: string[];
+    jsAssets?: string[];
+    scope?: any;
+}
+export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.MutableRefObject<HTMLIFrameElement>;
+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 ADDED Viewed

@@ -0,0 +1,87 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useRef, useEffect } from 'react';
+import { isFn, globalThisPolyfill } from '@sulesky/next-shared';
+import { useDesigner, useWorkspace, useLayout, usePrefix, } from '@sulesky/next-react';
+import { createRoot } from 'react-dom/client';
+var sandboxRoot = null;
+export var useSandbox = function (props) {
+    var ref = useRef(null);
+    var appCls = usePrefix('app');
+    var designer = useDesigner();
+    var workspace = useWorkspace();
+    var layout = useLayout();
+    var cssAssets = props.cssAssets || [];
+    var jsAssets = props.jsAssets || [];
+    var getCSSVar = function (name) {
+        return getComputedStyle(document.querySelector(".".concat(appCls))).getPropertyValue(name);
+    };
+    useEffect(function () {
+        var _a, _b;
+        if (ref.current && workspace) {
+            var styles = (_a = cssAssets === null || cssAssets === void 0 ? void 0 : cssAssets.map) === null || _a === void 0 ? void 0 : _a.call(cssAssets, function (css) {
+                return "<link media=\"all\" rel=\"stylesheet\" href=\"".concat(css, "\" />");
+            }).join('\n');
+            var scripts = (_b = jsAssets === null || jsAssets === void 0 ? void 0 : jsAssets.map) === null || _b === void 0 ? void 0 : _b.call(jsAssets, function (js) {
+                return "<script src=\"".concat(js, "\" type=\"text/javascript\" ></script>");
+            }).join('\n');
+            ref.current.contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
+            ref.current.contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
+            ref.current.contentWindow['__DESIGNABLE_ENGINE__'] = designer;
+            ref.current.contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
+            ref.current.contentWindow['Formily'] = globalThisPolyfill['Formily'];
+            ref.current.contentWindow['Designable'] = globalThisPolyfill['Designable'];
+            ref.current.contentDocument.open();
+            ref.current.contentDocument.write("\n      <!DOCTYPE html>\n        <head>\n          ".concat(styles, "\n        </head>\n        <style>\n          html{\n            overflow: overlay;\n          }\n          ::-webkit-scrollbar {\n            width: 5px;\n            height: 5px;\n          }\n          ::-webkit-scrollbar-thumb {\n            background-color:").concat(getCSSVar('--dn-scrollbar-color'), ";\n            border-radius: 0;\n            transition: all .25s ease-in-out;\n          }\n          ::-webkit-scrollbar-thumb:hover {\n            background-color: ").concat(getCSSVar('--dn-scrollbar-hover-color'), ";\n          }\n          body{\n            margin:0;\n            padding:0;\n            overflow-anchor: none;\n            user-select:none;\n            background-color:").concat(layout.theme === 'light' ? '#fff' : 'transparent', " !important;\n          }\n          html{\n            overflow-anchor: none;\n          }\n          .inherit-cusor * {\n            cursor: inherit !important;\n          }\n        </style>\n        <body>\n          <div id=\"__SANDBOX_ROOT__\"></div>\n          ").concat(scripts, "\n        </body>\n      </html>\n      "));
+            ref.current.contentDocument.close();
+        }
+    }, [workspace]);
+    return ref;
+};
+if (globalThisPolyfill.frameElement) {
+    //解决iframe内嵌如果iframe被移除，内部React无法回收内存的问题
+    globalThisPolyfill.addEventListener('unload', function () {
+        if (sandboxRoot) {
+            sandboxRoot.unmount();
+            sandboxRoot = null;
+        }
+    });
+}
+export var useSandboxScope = function () {
+    return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
+};
+export var renderSandboxContent = function (render) {
+    if (isFn(render)) {
+        var container = document.getElementById('__SANDBOX_ROOT__');
+        if (container) {
+            if (!sandboxRoot) {
+                sandboxRoot = createRoot(container);
+            }
+            sandboxRoot.render(render(useSandboxScope()));
+        }
+    }
+};
+export var Sandbox = function (props) {
+    var cssAssets = props.cssAssets, jsAssets = props.jsAssets, scope = props.scope, style = props.style, iframeProps = __rest(props, ["cssAssets", "jsAssets", "scope", "style"]);
+    return React.createElement('iframe', __assign(__assign({}, iframeProps), { ref: useSandbox(props), style: __assign({ height: '100%', width: '100%', border: 'none', display: 'block' }, style) }));
+};

package/lib/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ISandboxProps {
+    style?: React.CSSProperties;
+    cssAssets?: string[];
+    jsAssets?: string[];
+    scope?: any;
+}
+export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.MutableRefObject<HTMLIFrameElement>;
+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 ADDED Viewed

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sandbox = exports.renderSandboxContent = exports.useSandboxScope = exports.useSandbox = void 0;
+var react_1 = __importStar(require("react"));
+var next_shared_1 = require("@sulesky/next-shared");
+var next_react_1 = require("@sulesky/next-react");
+var client_1 = require("react-dom/client");
+var sandboxRoot = null;
+var useSandbox = function (props) {
+    var ref = (0, react_1.useRef)(null);
+    var appCls = (0, next_react_1.usePrefix)('app');
+    var designer = (0, next_react_1.useDesigner)();
+    var workspace = (0, next_react_1.useWorkspace)();
+    var layout = (0, next_react_1.useLayout)();
+    var cssAssets = props.cssAssets || [];
+    var jsAssets = props.jsAssets || [];
+    var getCSSVar = function (name) {
+        return getComputedStyle(document.querySelector(".".concat(appCls))).getPropertyValue(name);
+    };
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (ref.current && workspace) {
+            var styles = (_a = cssAssets === null || cssAssets === void 0 ? void 0 : cssAssets.map) === null || _a === void 0 ? void 0 : _a.call(cssAssets, function (css) {
+                return "<link media=\"all\" rel=\"stylesheet\" href=\"".concat(css, "\" />");
+            }).join('\n');
+            var scripts = (_b = jsAssets === null || jsAssets === void 0 ? void 0 : jsAssets.map) === null || _b === void 0 ? void 0 : _b.call(jsAssets, function (js) {
+                return "<script src=\"".concat(js, "\" type=\"text/javascript\" ></script>");
+            }).join('\n');
+            ref.current.contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
+            ref.current.contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
+            ref.current.contentWindow['__DESIGNABLE_ENGINE__'] = designer;
+            ref.current.contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
+            ref.current.contentWindow['Formily'] = next_shared_1.globalThisPolyfill['Formily'];
+            ref.current.contentWindow['Designable'] = next_shared_1.globalThisPolyfill['Designable'];
+            ref.current.contentDocument.open();
+            ref.current.contentDocument.write("\n      <!DOCTYPE html>\n        <head>\n          ".concat(styles, "\n        </head>\n        <style>\n          html{\n            overflow: overlay;\n          }\n          ::-webkit-scrollbar {\n            width: 5px;\n            height: 5px;\n          }\n          ::-webkit-scrollbar-thumb {\n            background-color:").concat(getCSSVar('--dn-scrollbar-color'), ";\n            border-radius: 0;\n            transition: all .25s ease-in-out;\n          }\n          ::-webkit-scrollbar-thumb:hover {\n            background-color: ").concat(getCSSVar('--dn-scrollbar-hover-color'), ";\n          }\n          body{\n            margin:0;\n            padding:0;\n            overflow-anchor: none;\n            user-select:none;\n            background-color:").concat(layout.theme === 'light' ? '#fff' : 'transparent', " !important;\n          }\n          html{\n            overflow-anchor: none;\n          }\n          .inherit-cusor * {\n            cursor: inherit !important;\n          }\n        </style>\n        <body>\n          <div id=\"__SANDBOX_ROOT__\"></div>\n          ").concat(scripts, "\n        </body>\n      </html>\n      "));
+            ref.current.contentDocument.close();
+        }
+    }, [workspace]);
+    return ref;
+};
+exports.useSandbox = useSandbox;
+if (next_shared_1.globalThisPolyfill.frameElement) {
+    //解决iframe内嵌如果iframe被移除，内部React无法回收内存的问题
+    next_shared_1.globalThisPolyfill.addEventListener('unload', function () {
+        if (sandboxRoot) {
+            sandboxRoot.unmount();
+            sandboxRoot = null;
+        }
+    });
+}
+var useSandboxScope = function () {
+    return next_shared_1.globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
+};
+exports.useSandboxScope = useSandboxScope;
+var renderSandboxContent = function (render) {
+    if ((0, next_shared_1.isFn)(render)) {
+        var container = document.getElementById('__SANDBOX_ROOT__');
+        if (container) {
+            if (!sandboxRoot) {
+                sandboxRoot = (0, client_1.createRoot)(container);
+            }
+            sandboxRoot.render(render((0, exports.useSandboxScope)()));
+        }
+    }
+};
+exports.renderSandboxContent = renderSandboxContent;
+var Sandbox = function (props) {
+    var cssAssets = props.cssAssets, jsAssets = props.jsAssets, scope = props.scope, style = props.style, iframeProps = __rest(props, ["cssAssets", "jsAssets", "scope", "style"]);
+    return react_1.default.createElement('iframe', __assign(__assign({}, iframeProps), { ref: (0, exports.useSandbox)(props), style: __assign({ height: '100%', width: '100%', border: 'none', display: 'block' }, style) }));
+};
+exports.Sandbox = Sandbox;

package/package.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "name": "@sulesky/next-react-sandbox",
+  "version": "1.0.3",
+  "license": "MIT",
+  "main": "lib",
+  "types": "lib/index.d.ts",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kapelan/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kapelan/designable/issues"
+  },
+  "homepage": "https://github.com/kapelan/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
+    "build:umd": "rollup --config rollup.config.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0 || >=17.0.0 || >=18.0.0 || >=19.0.0",
+    "react-dom": ">=16.8.0 || >=17.0.0 || >=18.0.0 || >=19.0.0"
+  },
+  "dependencies": {
+    "@sulesky/next-react": "1.0.3",
+    "@sulesky/next-shared": "1.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "c352e7550efc1420491dfc18b9418ec4fcfcc4ae"
+}

package/rollup.config.mjs ADDED Viewed

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/rollup.base.mjs'
+export default baseConfig('designable.react-sandbox', 'Designable.ReactSandbox')

package/src/index.ts ADDED Viewed

@@ -0,0 +1,142 @@
+import React, { useRef, useEffect } from 'react'
+import { isFn, globalThisPolyfill } from '@sulesky/next-shared'
+import {
+  useDesigner,
+  useWorkspace,
+  useLayout,
+  usePrefix,
+} from '@sulesky/next-react'
+import { createRoot, Root } from 'react-dom/client'
+let sandboxRoot: Root | null = null
+export interface ISandboxProps {
+  style?: React.CSSProperties
+  cssAssets?: string[]
+  jsAssets?: string[]
+  scope?: any
+}
+export const useSandbox = (props: React.PropsWithChildren<ISandboxProps>) => {
+  const ref = useRef<HTMLIFrameElement>(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: string) => {
+    return getComputedStyle(
+      document.querySelector(`.${appCls}`),
+    ).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')
+      ref.current.contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope
+      ref.current.contentWindow['__DESIGNABLE_LAYOUT__'] = layout
+      ref.current.contentWindow['__DESIGNABLE_ENGINE__'] = designer
+      ref.current.contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace
+      ref.current.contentWindow['Formily'] = globalThisPolyfill['Formily']
+      ref.current.contentWindow['Designable'] = globalThisPolyfill['Designable']
+      ref.current.contentDocument.open()
+      ref.current.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>
+      `)
+      ref.current.contentDocument.close()
+    }
+  }, [workspace])
+  return ref
+}
+if (globalThisPolyfill.frameElement) {
+  //解决iframe内嵌如果iframe被移除，内部React无法回收内存的问题
+  globalThisPolyfill.addEventListener('unload', () => {
+    if (sandboxRoot) {
+      sandboxRoot.unmount()
+      sandboxRoot = null
+    }
+  })
+}
+export const useSandboxScope = () => {
+  return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__']
+}
+export const renderSandboxContent = (
+  render: (scope?: any) => React.ReactNode,
+) => {
+  if (isFn(render)) {
+    const container = document.getElementById('__SANDBOX_ROOT__')
+    if (container) {
+      if (!sandboxRoot) {
+        sandboxRoot = createRoot(container)
+      }
+      sandboxRoot.render(render(useSandboxScope()))
+    }
+  }
+}
+export const Sandbox: React.FC<ISandboxProps> = (props) => {
+  const { cssAssets, jsAssets, scope, style, ...iframeProps } = props
+  return React.createElement('iframe', {
+    ...iframeProps,
+    ref: useSandbox(props),
+    style: {
+      height: '100%',
+      width: '100%',
+      border: 'none',
+      display: 'block',
+      ...style,
+    },
+  })
+}

package/tsconfig.build.json ADDED Viewed

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./lib",
+    "paths": {
+      "@sulesky/next-*": ["../*"]
+    },
+    "declaration": true
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["./src/__tests__/*", "./esm/*", "./lib/*"]
+}