update 0.9.5

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## changelog
 
+## 0.9.5
+
+preview组件scripts加载由并发变为线性。
+
+编辑模式下使用远程组件会储存当前画布状态。
+
 ## 0.9.4
 
 修复preview组件不能解除loading的bug

packages/dooringx-doc/src/changelog/1.1.md

@@ -4,6 +4,12 @@ order: 1
 ---
 ## changelog
 
+## 0.9.5
+
+preview组件scripts加载由并发变为线性。
+
+编辑模式下使用远程组件会储存当前画布状态。
+
 ## 0.9.4
 
 修复preview组件不能解除loading的bug

packages/dooringx-example/src/pages/index.tsx

@@ -14,12 +14,12 @@ import {
 	ContainerWrapper,
 	Control,
 } from 'dooringx-lib';
-import { InsertRowBelowOutlined } from '@ant-design/icons';
+import { InsertRowBelowOutlined, UploadOutlined } from '@ant-design/icons';
 import { useContext, useState } from 'react';
 import { configContext, LocaleContext } from '@/layouts';
 import { useCallback } from 'react';
 import { PREVIEWSTATE } from '@/constant';
-import { Button, Input, Popover } from 'antd';
+import { Button, Input, message, Modal, Popover, Upload } from 'antd';
 import { localeKey } from '../../../dooringx-lib/dist/locale';
 import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
 
@@ -48,6 +48,19 @@ export default function IndexPage() {
 	const [state] = useStoreState(config, subscribeFn, everyFn);
 
 	const [value, setValue] = useState('');
+	const [open, setOpen] = useState(false);
+
+	const createAndDownloadFile = (fileName: string) => {
+		const aTag = document.createElement('a');
+		const res = config.getStore().getData();
+		const JSONres = JSON.stringify(res);
+		const blob = new Blob([JSONres]);
+		aTag.download = fileName;
+		const url = URL.createObjectURL(blob);
+		aTag.href = url;
+		aTag.click();
+		URL.revokeObjectURL(url);
+	};
 
 	return (
 		<div {...innerContainerDragUp(config)}>
@@ -91,7 +104,54 @@ export default function IndexPage() {
 				>
 					远程组件
 				</Button>
+				<Button
+					onClick={() => {
+						createAndDownloadFile('dooring.json');
+					}}
+				>
+					下载json
+				</Button>
+				<Button
+					onClick={() => {
+						setOpen(true);
+					}}
+				>
+					上传json
+				</Button>
 			</div>
+			<Modal
+				visible={open}
+				onCancel={() => setOpen(false)}
+				onOk={() => setOpen(false)}
+				title={'import json'}
+			>
+				<Upload
+					name="file"
+					maxCount={1}
+					onChange={(e) => {
+						if (e.file.status === 'done') {
+							const file = e.file.originFileObj;
+							if (file) {
+								let reader = new FileReader();
+								reader.addEventListener('loadend', function () {
+									try {
+										let res = JSON.parse(reader.result as string);
+										console.log(res, '返回结果数据');
+										config.getStore().resetToInitData([res]);
+										setOpen(false);
+									} catch {
+										message.error('json解析格式有误');
+									}
+								});
+								reader.readAsText(file);
+							}
+						}
+					}}
+				>
+					<Button icon={<UploadOutlined />}>&nbsp; 点击上传</Button>
+				</Upload>
+			</Modal>
+
 			<div
 				style={{
 					display: 'flex',

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.9.4",
+	"version": "0.9.5",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

packages/dooringx-lib/src/components/preview.tsx

@@ -68,27 +68,38 @@ function Preview(props: PreviewProps): ReactElement {
 		// 加载 script
 		const scripts = props.config.getStore().getData().globalState['script'];
 		if (scripts && Array.isArray(scripts) && scripts.length > 0) {
-			const allp = scripts.map((v) => {
+			const fn = async () => {
-				return new Promise((res) => {
+				const allp = scripts.map((v) => {
-					const s = document.createElement('script');
+					return () =>
-					s.src = v;
+						new Promise<number>((res) => {
-					document.body.appendChild(s);
+							const s = document.createElement('script');
-					s.onload = () => {
+							s.src = v;
-						const item = window[
+							document.body.appendChild(s);
-							props.config.SCRIPTGLOBALNAME as any
+							s.onload = () => {
-						] as unknown as ComponentItemFactory;
+								const item = window[
-						props.config.registComponent(item);
+									props.config.SCRIPTGLOBALNAME as any
-						res(0);
+								] as unknown as ComponentItemFactory;
-					};
+								try {
-				});
+									props.config.registComponent(item);
-			});
+								} catch {
-			Promise.all(allp)
+									console.error('read item fail:', v);
-				.then(() => {
+								}
-					finalFn();
+								document.body.removeChild(s);
-				})
+								res(0);
-				.catch(() => {
+							};
-					finalFn();
+						});
 				});
+				const allplen = allp.length;
+				for (let i = 0; i < allplen; i++) {
+					try {
+						await allp[i]();
+					} catch {
+						console.error('script load fail:', scripts[i]);
+					}
+				}
+				finalFn();
+			};
+			fn();
 		} else {
 			finalFn();
 		}

packages/dooringx-lib/src/config/index.tsx

@@ -592,29 +592,41 @@ export class UserConfig {
 		this.addCoRegistMap(leftProps);
 	}
 
-	scriptRegistComponentMulti(
+	// foreach可能导致问题
-		items: ComponentItemFactory[],
+	// scriptRegistComponentMulti(
-		leftProps: LeftRegistComponentMapItem[]
+	// 	items: ComponentItemFactory[],
-	) {
+	// 	leftProps: LeftRegistComponentMapItem[]
-		items.forEach((item) => {
+	// ) {
-			this.registComponent(item);
+	// 	items.forEach((item) => {
-		});
+	// 		this.registComponent(item);
-		const obj = {} as InitConfig;
+	// 	});
-		obj.leftAllRegistMap = leftProps;
+	// 	const obj = {} as InitConfig;
-		this.initConfig = userConfigMerge(this.initConfig, obj);
+	// 	obj.leftAllRegistMap = leftProps;
-		this.init();
+	// 	this.initConfig = userConfigMerge(this.initConfig, obj);
-		this.store.forceUpdate();
+	// 	this.init();
-	}
+	// 	this.store.forceUpdate();
+	// }
 
+	/**
+	 *
+	 * 分类信息需要单独存储后加载
+	 * @param {string} src  url地址
+	 * @param {Partial<LeftRegistComponentMapItem>} leftProps 分类
+	 * @param {Function} [callback] 回调
+	 * @return {*}
+	 * @memberof UserConfig
+	 */
 	scriptSingleLoad(
 		src: string,
 		leftProps: Partial<LeftRegistComponentMapItem>,
 		callback?: Function
 	) {
 		let isEdit = this.storeChanger.isEdit();
-		let globalState = this.store.getData().globalState;
+		let storeData = this.store.getData();
+		let globalState = storeData.globalState;
 		if (isEdit) {
-			globalState = this.storeChanger.getOrigin()!.now.globalState;
+			storeData = this.storeChanger.getOrigin()!.now;
+			globalState = storeData.globalState;
 		}
 		if (globalState['script'].includes(src)) {
 			console.error(src + 'scripts have been loaded');
@@ -643,6 +655,8 @@ export class UserConfig {
 						globalState = this.storeChanger.getOrigin()!.now.globalState;
 					}
 					globalState['script'].push(src);
+					storeData.globalState = globalState;
+					this.store.resetToInitData([storeData], true);
 					this.store.forceUpdate();
 					this.scriptLoading = false;
 					if (callback) {

packages/dooringx-lib/src/core/store/index.ts

@@ -45,9 +45,9 @@ class Store {
 	}
 	/**
 	 *
-	 * 注意重置需要注册事件
+	 * 重置需要注册事件
 	 * @param {IStoreData[]} initData
-	 * @param {boolean} [check=false]
+	 * @param {boolean} [check=false] 检查编辑弹窗状态
 	 * @memberof Store
 	 */
 	resetToInitData(initData: IStoreData[], check = false) {

packages/dooringx-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooringx-plugin-template",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "> TODO: description",
   "author": "yehuozhili <673632758@qq.com>",
   "homepage": "https://github.com/H5-Dooring/dooringx#readme",

packages/dooringx-plugin-template/template/template.json

@@ -40,7 +40,7 @@
 		"@rollup/plugin-node-resolve": "^13.0.4",
 		"@rollup/plugin-url": "^6.1.0",
 		"@svgr/rollup": "^5.5.0",
-		"dooringx-lib": "^0.9.4",
+		"dooringx-lib": "^0.9.5",
 		"postcss": "^8.3.6",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.1",