@thienvu18/designable-react-sandbox 2.0.0 → 2.0.2

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 (5) hide show
  1. package/esm/index.d.ts +16 -11
  2. package/esm/index.js +107 -102
  3. package/lib/index.d.ts +16 -11
  4. package/lib/index.js +163 -133
  5. package/package.json +18 -18
package/esm/index.d.ts CHANGED
@@ -1,12 +1,17 @@
1
- import React from 'react';
2
- export interface ISandboxProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
3
- style?: React.CSSProperties;
4
- cssAssets?: string[];
5
- jsAssets?: string[];
6
- scope?: any;
1
+ import React from 'react'
2
+ export interface ISandboxProps
3
+ extends React.IframeHTMLAttributes<HTMLIFrameElement> {
4
+ style?: React.CSSProperties
5
+ cssAssets?: string[]
6
+ jsAssets?: string[]
7
+ scope?: any
7
8
  }
8
- export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.RefObject<HTMLIFrameElement>;
9
- export declare const unmountSandboxContent: () => void;
10
- export declare const useSandboxScope: () => any;
11
- export declare const renderSandboxContent: (render: (scope?: any) => React.ReactNode) => void;
12
- export declare const Sandbox: React.FC<ISandboxProps>;
9
+ export declare const useSandbox: (
10
+ props: React.PropsWithChildren<ISandboxProps>
11
+ ) => React.RefObject<HTMLIFrameElement>
12
+ export declare const unmountSandboxContent: () => void
13
+ export declare const useSandboxScope: () => any
14
+ export declare const renderSandboxContent: (
15
+ render: (scope?: any) => React.ReactNode
16
+ ) => void
17
+ export declare const Sandbox: React.FC<ISandboxProps>
package/esm/index.js CHANGED
@@ -1,46 +1,51 @@
1
- import React, { useRef, useEffect } from 'react';
2
- import { createRoot } from 'react-dom/client';
3
- import { isFn, globalThisPolyfill } from '@thienvu18/designable-shared';
4
- import { useDesigner, useWorkspace, useLayout, usePrefix, } from '@thienvu18/designable-react';
5
- const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__';
6
- const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__';
7
- const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__';
1
+ import {
2
+ useDesigner,
3
+ useLayout,
4
+ usePrefix,
5
+ useWorkspace,
6
+ } from '@thienvu18/designable-react'
7
+ import { globalThisPolyfill, isFn } from '@thienvu18/designable-shared'
8
+ import React, { useEffect, useRef } from 'react'
9
+ import { createRoot } from 'react-dom/client'
10
+ const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__'
11
+ const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__'
12
+ const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__'
8
13
  export const useSandbox = (props) => {
9
- const ref = useRef(null);
10
- const appCls = usePrefix('app');
11
- const designer = useDesigner();
12
- const workspace = useWorkspace();
13
- const layout = useLayout();
14
- const cssAssets = props.cssAssets || [];
15
- const jsAssets = props.jsAssets || [];
16
- const getCSSVar = (name) => {
17
- const el = document.querySelector(`.${appCls}`);
18
- return el ? getComputedStyle(el).getPropertyValue(name) : '';
19
- };
20
- useEffect(() => {
21
- if (ref.current && workspace) {
22
- const styles = cssAssets
23
- ?.map?.((css) => {
24
- return `<link media="all" rel="stylesheet" href="${css}" />`;
25
- })
26
- .join('\n');
27
- const scripts = jsAssets
28
- ?.map?.((js) => {
29
- return `<script src="${js}" type="text/javascript" ></script>`;
30
- })
31
- .join('\n');
32
- const contentWindow = ref.current.contentWindow;
33
- const contentDocument = ref.current.contentDocument;
34
- if (contentWindow && contentDocument) {
35
- contentWindow[UNMOUNT_KEY]?.();
36
- contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
37
- contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
38
- contentWindow['__DESIGNABLE_ENGINE__'] = designer;
39
- contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
40
- contentWindow['Formily'] = globalThisPolyfill['Formily'];
41
- contentWindow['Designable'] = globalThisPolyfill['Designable'];
42
- contentDocument.open();
43
- contentDocument.write(`
14
+ const ref = useRef(null)
15
+ const appCls = usePrefix('app')
16
+ const designer = useDesigner()
17
+ const workspace = useWorkspace()
18
+ const layout = useLayout()
19
+ const cssAssets = props.cssAssets || []
20
+ const jsAssets = props.jsAssets || []
21
+ const getCSSVar = (name) => {
22
+ const el = document.querySelector(`.${appCls}`)
23
+ return el ? getComputedStyle(el).getPropertyValue(name) : ''
24
+ }
25
+ useEffect(() => {
26
+ if (ref.current && workspace) {
27
+ const styles = cssAssets
28
+ ?.map?.((css) => {
29
+ return `<link media="all" rel="stylesheet" href="${css}" />`
30
+ })
31
+ .join('\n')
32
+ const scripts = jsAssets
33
+ ?.map?.((js) => {
34
+ return `<script src="${js}" type="text/javascript" ></script>`
35
+ })
36
+ .join('\n')
37
+ const contentWindow = ref.current.contentWindow
38
+ const contentDocument = ref.current.contentDocument
39
+ if (contentWindow && contentDocument) {
40
+ contentWindow[UNMOUNT_KEY]?.()
41
+ contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope
42
+ contentWindow['__DESIGNABLE_LAYOUT__'] = layout
43
+ contentWindow['__DESIGNABLE_ENGINE__'] = designer
44
+ contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace
45
+ contentWindow['Formily'] = globalThisPolyfill['Formily']
46
+ contentWindow['Designable'] = globalThisPolyfill['Designable']
47
+ contentDocument.open()
48
+ contentDocument.write(`
44
49
  <!DOCTYPE html>
45
50
  <head>
46
51
  ${styles}
@@ -66,7 +71,9 @@ export const useSandbox = (props) => {
66
71
  padding:0;
67
72
  overflow-anchor: none;
68
73
  user-select:none;
69
- background-color:${layout?.theme === 'light' ? '#fff' : 'transparent'} !important;
74
+ background-color:${
75
+ layout?.theme === 'light' ? '#fff' : 'transparent'
76
+ } !important;
70
77
  }
71
78
  html{
72
79
  overflow-anchor: none;
@@ -80,70 +87,68 @@ export const useSandbox = (props) => {
80
87
  ${scripts}
81
88
  </body>
82
89
  </html>
83
- `);
84
- contentDocument.close();
85
- return () => {
86
- contentWindow[UNMOUNT_KEY]?.();
87
- };
88
- }
90
+ `)
91
+ contentDocument.close()
92
+ return () => {
93
+ contentWindow[UNMOUNT_KEY]?.()
89
94
  }
90
- }, [workspace, layout, props.scope, cssAssets, jsAssets, designer]);
91
- return ref;
92
- };
95
+ }
96
+ }
97
+ }, [workspace, layout, props.scope, cssAssets, jsAssets, designer])
98
+ return ref
99
+ }
93
100
  export const unmountSandboxContent = () => {
94
- const root = globalThisPolyfill[ROOT_INSTANCE_KEY];
95
- if (!root || typeof root.unmount !== 'function')
96
- return;
97
- // Clear the references first so repeated unload events remain idempotent.
98
- globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined;
99
- globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined;
100
- root.unmount();
101
- };
101
+ const root = globalThisPolyfill[ROOT_INSTANCE_KEY]
102
+ if (!root || typeof root.unmount !== 'function') return
103
+ // Clear the references first so repeated unload events remain idempotent.
104
+ globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined
105
+ globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined
106
+ root.unmount()
107
+ }
102
108
  if (globalThisPolyfill.frameElement) {
103
- globalThisPolyfill.addEventListener('unload', () => {
104
- unmountSandboxContent();
105
- });
109
+ globalThisPolyfill.addEventListener('unload', () => {
110
+ unmountSandboxContent()
111
+ })
106
112
  }
107
- globalThisPolyfill[UNMOUNT_KEY] = unmountSandboxContent;
113
+ globalThisPolyfill[UNMOUNT_KEY] = unmountSandboxContent
108
114
  export const useSandboxScope = () => {
109
- return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
110
- };
115
+ return globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__']
116
+ }
111
117
  export const renderSandboxContent = (render) => {
112
- if (isFn(render)) {
113
- const container = document.getElementById('__SANDBOX_ROOT__');
114
- if (!container)
115
- return;
116
- let root = globalThisPolyfill[ROOT_INSTANCE_KEY];
117
- const rootContainer = globalThisPolyfill[ROOT_CONTAINER_KEY];
118
- if (root && rootContainer !== container) {
119
- unmountSandboxContent();
120
- root = undefined;
121
- }
122
- if (!root) {
123
- root = createRoot(container);
124
- globalThisPolyfill[ROOT_INSTANCE_KEY] = root;
125
- globalThisPolyfill[ROOT_CONTAINER_KEY] = container;
126
- }
127
- root.render(render(useSandboxScope()));
118
+ if (isFn(render)) {
119
+ const container = document.getElementById('__SANDBOX_ROOT__')
120
+ if (!container) return
121
+ let root = globalThisPolyfill[ROOT_INSTANCE_KEY]
122
+ const rootContainer = globalThisPolyfill[ROOT_CONTAINER_KEY]
123
+ if (root && rootContainer !== container) {
124
+ unmountSandboxContent()
125
+ root = undefined
126
+ }
127
+ if (!root) {
128
+ root = createRoot(container)
129
+ globalThisPolyfill[ROOT_INSTANCE_KEY] = root
130
+ globalThisPolyfill[ROOT_CONTAINER_KEY] = container
128
131
  }
129
- };
132
+ root.render(render(useSandboxScope()))
133
+ }
134
+ }
130
135
  export const Sandbox = (props) => {
131
- const { style } = props;
132
- const iframeProps = { ...props };
133
- delete iframeProps.cssAssets;
134
- delete iframeProps.jsAssets;
135
- delete iframeProps.scope;
136
- delete iframeProps.style;
137
- const ref = useSandbox(props);
138
- return React.createElement('iframe', {
139
- ...iframeProps,
140
- ref,
141
- style: {
142
- height: '100%',
143
- width: '100%',
144
- border: 'none',
145
- display: 'block',
146
- ...style,
147
- },
148
- });
149
- };
136
+ const { style } = props
137
+ const iframeProps = { ...props }
138
+ delete iframeProps.cssAssets
139
+ delete iframeProps.jsAssets
140
+ delete iframeProps.scope
141
+ delete iframeProps.style
142
+ const ref = useSandbox(props)
143
+ return React.createElement('iframe', {
144
+ ...iframeProps,
145
+ ref,
146
+ style: {
147
+ height: '100%',
148
+ width: '100%',
149
+ border: 'none',
150
+ display: 'block',
151
+ ...style,
152
+ },
153
+ })
154
+ }
package/lib/index.d.ts CHANGED
@@ -1,12 +1,17 @@
1
- import React from 'react';
2
- export interface ISandboxProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
3
- style?: React.CSSProperties;
4
- cssAssets?: string[];
5
- jsAssets?: string[];
6
- scope?: any;
1
+ import React from 'react'
2
+ export interface ISandboxProps
3
+ extends React.IframeHTMLAttributes<HTMLIFrameElement> {
4
+ style?: React.CSSProperties
5
+ cssAssets?: string[]
6
+ jsAssets?: string[]
7
+ scope?: any
7
8
  }
8
- export declare const useSandbox: (props: React.PropsWithChildren<ISandboxProps>) => React.RefObject<HTMLIFrameElement>;
9
- export declare const unmountSandboxContent: () => void;
10
- export declare const useSandboxScope: () => any;
11
- export declare const renderSandboxContent: (render: (scope?: any) => React.ReactNode) => void;
12
- export declare const Sandbox: React.FC<ISandboxProps>;
9
+ export declare const useSandbox: (
10
+ props: React.PropsWithChildren<ISandboxProps>
11
+ ) => React.RefObject<HTMLIFrameElement>
12
+ export declare const unmountSandboxContent: () => void
13
+ export declare const useSandboxScope: () => any
14
+ export declare const renderSandboxContent: (
15
+ render: (scope?: any) => React.ReactNode
16
+ ) => void
17
+ export declare const Sandbox: React.FC<ISandboxProps>
package/lib/index.js CHANGED
@@ -1,72 +1,100 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.Sandbox = exports.renderSandboxContent = exports.useSandboxScope = exports.unmountSandboxContent = exports.useSandbox = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const client_1 = require("react-dom/client");
29
- const designable_shared_1 = require("@thienvu18/designable-shared");
30
- const designable_react_1 = require("@thienvu18/designable-react");
31
- const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__';
32
- const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__';
33
- const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__';
1
+ 'use strict'
2
+ var __createBinding =
3
+ (this && this.__createBinding) ||
4
+ (Object.create
5
+ ? function (o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k
7
+ var desc = Object.getOwnPropertyDescriptor(m, k)
8
+ if (
9
+ !desc ||
10
+ ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
11
+ ) {
12
+ desc = {
13
+ enumerable: true,
14
+ get: function () {
15
+ return m[k]
16
+ },
17
+ }
18
+ }
19
+ Object.defineProperty(o, k2, desc)
20
+ }
21
+ : function (o, m, k, k2) {
22
+ if (k2 === undefined) k2 = k
23
+ o[k2] = m[k]
24
+ })
25
+ var __setModuleDefault =
26
+ (this && this.__setModuleDefault) ||
27
+ (Object.create
28
+ ? function (o, v) {
29
+ Object.defineProperty(o, 'default', { enumerable: true, value: v })
30
+ }
31
+ : function (o, v) {
32
+ o['default'] = v
33
+ })
34
+ var __importStar =
35
+ (this && this.__importStar) ||
36
+ function (mod) {
37
+ if (mod && mod.__esModule) return mod
38
+ var result = {}
39
+ if (mod != null)
40
+ for (var k in mod)
41
+ if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
42
+ __createBinding(result, mod, k)
43
+ __setModuleDefault(result, mod)
44
+ return result
45
+ }
46
+ Object.defineProperty(exports, '__esModule', { value: true })
47
+ exports.Sandbox =
48
+ exports.renderSandboxContent =
49
+ exports.useSandboxScope =
50
+ exports.unmountSandboxContent =
51
+ exports.useSandbox =
52
+ void 0
53
+ const react_1 = __importStar(require('react'))
54
+ const client_1 = require('react-dom/client')
55
+ const designable_shared_1 = require('@thienvu18/designable-shared')
56
+ const designable_react_1 = require('@thienvu18/designable-react')
57
+ const ROOT_INSTANCE_KEY = '__DESIGNABLE_SANDBOX_ROOT_INSTANCE__'
58
+ const ROOT_CONTAINER_KEY = '__DESIGNABLE_SANDBOX_ROOT_CONTAINER__'
59
+ const UNMOUNT_KEY = '__DESIGNABLE_SANDBOX_UNMOUNT__'
34
60
  const useSandbox = (props) => {
35
- const ref = (0, react_1.useRef)(null);
36
- const appCls = (0, designable_react_1.usePrefix)('app');
37
- const designer = (0, designable_react_1.useDesigner)();
38
- const workspace = (0, designable_react_1.useWorkspace)();
39
- const layout = (0, designable_react_1.useLayout)();
40
- const cssAssets = props.cssAssets || [];
41
- const jsAssets = props.jsAssets || [];
42
- const getCSSVar = (name) => {
43
- const el = document.querySelector(`.${appCls}`);
44
- return el ? getComputedStyle(el).getPropertyValue(name) : '';
45
- };
46
- (0, react_1.useEffect)(() => {
47
- if (ref.current && workspace) {
48
- const styles = cssAssets
49
- ?.map?.((css) => {
50
- return `<link media="all" rel="stylesheet" href="${css}" />`;
51
- })
52
- .join('\n');
53
- const scripts = jsAssets
54
- ?.map?.((js) => {
55
- return `<script src="${js}" type="text/javascript" ></script>`;
56
- })
57
- .join('\n');
58
- const contentWindow = ref.current.contentWindow;
59
- const contentDocument = ref.current.contentDocument;
60
- if (contentWindow && contentDocument) {
61
- contentWindow[UNMOUNT_KEY]?.();
62
- contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope;
63
- contentWindow['__DESIGNABLE_LAYOUT__'] = layout;
64
- contentWindow['__DESIGNABLE_ENGINE__'] = designer;
65
- contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace;
66
- contentWindow['Formily'] = designable_shared_1.globalThisPolyfill['Formily'];
67
- contentWindow['Designable'] = designable_shared_1.globalThisPolyfill['Designable'];
68
- contentDocument.open();
69
- contentDocument.write(`
61
+ const ref = (0, react_1.useRef)(null)
62
+ const appCls = (0, designable_react_1.usePrefix)('app')
63
+ const designer = (0, designable_react_1.useDesigner)()
64
+ const workspace = (0, designable_react_1.useWorkspace)()
65
+ const layout = (0, designable_react_1.useLayout)()
66
+ const cssAssets = props.cssAssets || []
67
+ const jsAssets = props.jsAssets || []
68
+ const getCSSVar = (name) => {
69
+ const el = document.querySelector(`.${appCls}`)
70
+ return el ? getComputedStyle(el).getPropertyValue(name) : ''
71
+ }
72
+ ;(0, react_1.useEffect)(() => {
73
+ if (ref.current && workspace) {
74
+ const styles = cssAssets
75
+ ?.map?.((css) => {
76
+ return `<link media="all" rel="stylesheet" href="${css}" />`
77
+ })
78
+ .join('\n')
79
+ const scripts = jsAssets
80
+ ?.map?.((js) => {
81
+ return `<script src="${js}" type="text/javascript" ></script>`
82
+ })
83
+ .join('\n')
84
+ const contentWindow = ref.current.contentWindow
85
+ const contentDocument = ref.current.contentDocument
86
+ if (contentWindow && contentDocument) {
87
+ contentWindow[UNMOUNT_KEY]?.()
88
+ contentWindow['__DESIGNABLE_SANDBOX_SCOPE__'] = props.scope
89
+ contentWindow['__DESIGNABLE_LAYOUT__'] = layout
90
+ contentWindow['__DESIGNABLE_ENGINE__'] = designer
91
+ contentWindow['__DESIGNABLE_WORKSPACE__'] = workspace
92
+ contentWindow['Formily'] =
93
+ designable_shared_1.globalThisPolyfill['Formily']
94
+ contentWindow['Designable'] =
95
+ designable_shared_1.globalThisPolyfill['Designable']
96
+ contentDocument.open()
97
+ contentDocument.write(`
70
98
  <!DOCTYPE html>
71
99
  <head>
72
100
  ${styles}
@@ -92,7 +120,9 @@ const useSandbox = (props) => {
92
120
  padding:0;
93
121
  overflow-anchor: none;
94
122
  user-select:none;
95
- background-color:${layout?.theme === 'light' ? '#fff' : 'transparent'} !important;
123
+ background-color:${
124
+ layout?.theme === 'light' ? '#fff' : 'transparent'
125
+ } !important;
96
126
  }
97
127
  html{
98
128
  overflow-anchor: none;
@@ -106,75 +136,75 @@ const useSandbox = (props) => {
106
136
  ${scripts}
107
137
  </body>
108
138
  </html>
109
- `);
110
- contentDocument.close();
111
- return () => {
112
- contentWindow[UNMOUNT_KEY]?.();
113
- };
114
- }
139
+ `)
140
+ contentDocument.close()
141
+ return () => {
142
+ contentWindow[UNMOUNT_KEY]?.()
115
143
  }
116
- }, [workspace, layout, props.scope, cssAssets, jsAssets, designer]);
117
- return ref;
118
- };
119
- exports.useSandbox = useSandbox;
144
+ }
145
+ }
146
+ }, [workspace, layout, props.scope, cssAssets, jsAssets, designer])
147
+ return ref
148
+ }
149
+ exports.useSandbox = useSandbox
120
150
  const unmountSandboxContent = () => {
121
- const root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY];
122
- if (!root || typeof root.unmount !== 'function')
123
- return;
124
- // Clear the references first so repeated unload events remain idempotent.
125
- designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined;
126
- designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined;
127
- root.unmount();
128
- };
129
- exports.unmountSandboxContent = unmountSandboxContent;
151
+ const root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY]
152
+ if (!root || typeof root.unmount !== 'function') return
153
+ // Clear the references first so repeated unload events remain idempotent.
154
+ designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = undefined
155
+ designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = undefined
156
+ root.unmount()
157
+ }
158
+ exports.unmountSandboxContent = unmountSandboxContent
130
159
  if (designable_shared_1.globalThisPolyfill.frameElement) {
131
- designable_shared_1.globalThisPolyfill.addEventListener('unload', () => {
132
- (0, exports.unmountSandboxContent)();
133
- });
160
+ designable_shared_1.globalThisPolyfill.addEventListener('unload', () => {
161
+ ;(0, exports.unmountSandboxContent)()
162
+ })
134
163
  }
135
- designable_shared_1.globalThisPolyfill[UNMOUNT_KEY] = exports.unmountSandboxContent;
164
+ designable_shared_1.globalThisPolyfill[UNMOUNT_KEY] =
165
+ exports.unmountSandboxContent
136
166
  const useSandboxScope = () => {
137
- return designable_shared_1.globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__'];
138
- };
139
- exports.useSandboxScope = useSandboxScope;
167
+ return designable_shared_1.globalThisPolyfill['__DESIGNABLE_SANDBOX_SCOPE__']
168
+ }
169
+ exports.useSandboxScope = useSandboxScope
140
170
  const renderSandboxContent = (render) => {
141
- if ((0, designable_shared_1.isFn)(render)) {
142
- const container = document.getElementById('__SANDBOX_ROOT__');
143
- if (!container)
144
- return;
145
- let root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY];
146
- const rootContainer = designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY];
147
- if (root && rootContainer !== container) {
148
- (0, exports.unmountSandboxContent)();
149
- root = undefined;
150
- }
151
- if (!root) {
152
- root = (0, client_1.createRoot)(container);
153
- designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = root;
154
- designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = container;
155
- }
156
- root.render(render((0, exports.useSandboxScope)()));
171
+ if ((0, designable_shared_1.isFn)(render)) {
172
+ const container = document.getElementById('__SANDBOX_ROOT__')
173
+ if (!container) return
174
+ let root = designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY]
175
+ const rootContainer =
176
+ designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY]
177
+ if (root && rootContainer !== container) {
178
+ ;(0, exports.unmountSandboxContent)()
179
+ root = undefined
157
180
  }
158
- };
159
- exports.renderSandboxContent = renderSandboxContent;
181
+ if (!root) {
182
+ root = (0, client_1.createRoot)(container)
183
+ designable_shared_1.globalThisPolyfill[ROOT_INSTANCE_KEY] = root
184
+ designable_shared_1.globalThisPolyfill[ROOT_CONTAINER_KEY] = container
185
+ }
186
+ root.render(render((0, exports.useSandboxScope)()))
187
+ }
188
+ }
189
+ exports.renderSandboxContent = renderSandboxContent
160
190
  const Sandbox = (props) => {
161
- const { style } = props;
162
- const iframeProps = { ...props };
163
- delete iframeProps.cssAssets;
164
- delete iframeProps.jsAssets;
165
- delete iframeProps.scope;
166
- delete iframeProps.style;
167
- const ref = (0, exports.useSandbox)(props);
168
- return react_1.default.createElement('iframe', {
169
- ...iframeProps,
170
- ref,
171
- style: {
172
- height: '100%',
173
- width: '100%',
174
- border: 'none',
175
- display: 'block',
176
- ...style,
177
- },
178
- });
179
- };
180
- exports.Sandbox = Sandbox;
191
+ const { style } = props
192
+ const iframeProps = { ...props }
193
+ delete iframeProps.cssAssets
194
+ delete iframeProps.jsAssets
195
+ delete iframeProps.scope
196
+ delete iframeProps.style
197
+ const ref = (0, exports.useSandbox)(props)
198
+ return react_1.default.createElement('iframe', {
199
+ ...iframeProps,
200
+ ref,
201
+ style: {
202
+ height: '100%',
203
+ width: '100%',
204
+ border: 'none',
205
+ display: 'block',
206
+ ...style,
207
+ },
208
+ })
209
+ }
210
+ exports.Sandbox = Sandbox
package/package.json CHANGED
@@ -1,6 +1,14 @@
1
1
  {
2
2
  "name": "@thienvu18/designable-react-sandbox",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
+ "homepage": "https://github.com/thienvu18/designable#readme",
5
+ "bugs": {
6
+ "url": "https://github.com/thienvu18/designable/issues"
7
+ },
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/thienvu18/designable.git"
11
+ },
4
12
  "license": "MIT",
5
13
  "main": "lib/index.js",
6
14
  "module": "esm/index.js",
@@ -11,29 +19,14 @@
11
19
  "README.md",
12
20
  "LICENSE.md"
13
21
  ],
14
- "engines": {
15
- "node": ">=20 <25"
16
- },
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/thienvu18/designable.git"
20
- },
21
- "bugs": {
22
- "url": "https://github.com/thienvu18/designable/issues"
23
- },
24
- "homepage": "https://github.com/thienvu18/designable#readme",
25
22
  "scripts": {
26
23
  "build": "rimraf -rf lib esm && npm run build:cjs && npm run build:esm",
27
24
  "build:cjs": "tsc --project tsconfig.build.json --outDir lib",
28
25
  "build:esm": "tsc --project tsconfig.build.json --module es2020 --outDir esm"
29
26
  },
30
- "peerDependencies": {
31
- "react": ">=19 <20",
32
- "react-dom": ">=19 <20"
33
- },
34
27
  "dependencies": {
35
- "@thienvu18/designable-react": "2.0.0",
36
- "@thienvu18/designable-shared": "2.0.0"
28
+ "@thienvu18/designable-react": "2.0.2",
29
+ "@thienvu18/designable-shared": "2.0.2"
37
30
  },
38
31
  "devDependencies": {
39
32
  "@formily/json-schema": "^2.3.7",
@@ -46,6 +39,13 @@
46
39
  "react-is": "^19.2.8",
47
40
  "typescript": "5.2.2"
48
41
  },
42
+ "peerDependencies": {
43
+ "react": ">=19 <20",
44
+ "react-dom": ">=19 <20"
45
+ },
46
+ "engines": {
47
+ "node": ">=20 <25"
48
+ },
49
49
  "publishConfig": {
50
50
  "access": "public"
51
51
  }