diff --git a/CHANGELOG.md b/CHANGELOG.md index 083ba1d..8a5c636 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ ## changelog +## 0.9.5 + +preview组件scripts加载由并发变为线性。 + +编辑模式下使用远程组件会储存当前画布状态。 + ## 0.9.4 修复preview组件不能解除loading的bug diff --git a/packages/dooringx-doc/src/changelog/1.1.md b/packages/dooringx-doc/src/changelog/1.1.md index 20e197f..80e52b3 100644 --- a/packages/dooringx-doc/src/changelog/1.1.md +++ b/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 diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index b87f2ed..801babd 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/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 (
@@ -91,7 +104,54 @@ export default function IndexPage() { > 远程组件 + +
+ setOpen(false)} + onOk={() => setOpen(false)} + title={'import json'} + > + { + 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); + } + } + }} + > + + + +
0) { - const allp = scripts.map((v) => { - return new Promise((res) => { - const s = document.createElement('script'); - s.src = v; - document.body.appendChild(s); - s.onload = () => { - const item = window[ - props.config.SCRIPTGLOBALNAME as any - ] as unknown as ComponentItemFactory; - props.config.registComponent(item); - res(0); - }; - }); - }); - Promise.all(allp) - .then(() => { - finalFn(); - }) - .catch(() => { - finalFn(); + const fn = async () => { + const allp = scripts.map((v) => { + return () => + new Promise((res) => { + const s = document.createElement('script'); + s.src = v; + document.body.appendChild(s); + s.onload = () => { + const item = window[ + props.config.SCRIPTGLOBALNAME as any + ] as unknown as ComponentItemFactory; + try { + props.config.registComponent(item); + } catch { + console.error('read item fail:', v); + } + document.body.removeChild(s); + res(0); + }; + }); }); + 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(); } diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index 4092a83..5ebe410 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -592,29 +592,41 @@ export class UserConfig { this.addCoRegistMap(leftProps); } - scriptRegistComponentMulti( - items: ComponentItemFactory[], - leftProps: LeftRegistComponentMapItem[] - ) { - items.forEach((item) => { - this.registComponent(item); - }); - const obj = {} as InitConfig; - obj.leftAllRegistMap = leftProps; - this.initConfig = userConfigMerge(this.initConfig, obj); - this.init(); - this.store.forceUpdate(); - } + // foreach可能导致问题 + // scriptRegistComponentMulti( + // items: ComponentItemFactory[], + // leftProps: LeftRegistComponentMapItem[] + // ) { + // items.forEach((item) => { + // this.registComponent(item); + // }); + // const obj = {} as InitConfig; + // obj.leftAllRegistMap = leftProps; + // this.initConfig = userConfigMerge(this.initConfig, obj); + // this.init(); + // this.store.forceUpdate(); + // } + /** + * + * 分类信息需要单独存储后加载 + * @param {string} src url地址 + * @param {Partial} leftProps 分类 + * @param {Function} [callback] 回调 + * @return {*} + * @memberof UserConfig + */ scriptSingleLoad( src: string, leftProps: Partial, 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) { diff --git a/packages/dooringx-lib/src/core/store/index.ts b/packages/dooringx-lib/src/core/store/index.ts index cec8fea..e7d2f69 100644 --- a/packages/dooringx-lib/src/core/store/index.ts +++ b/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) { diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json index a1f45e0..9a15b8a 100644 --- a/packages/dooringx-plugin-template/package.json +++ b/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", diff --git a/packages/dooringx-plugin-template/template/template.json b/packages/dooringx-plugin-template/template/template.json index 6088ddd..3f9567a 100644 --- a/packages/dooringx-plugin-template/template/template.json +++ b/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",