diff --git a/CHANGELOG.md b/CHANGELOG.md index 65e0658..bb34e65 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ ## changelog +## 0.9.2 + +增加远程组件调用全流程，component中增加url属性，便于script加载。 + ## 0.9.1 增加config.i18n配置，不使用国际化则不需要导入intl的context。 diff --git a/packages/dooringx-doc/src/changelog/1.1.md b/packages/dooringx-doc/src/changelog/1.1.md index b994f57..a80945b 100644 --- a/packages/dooringx-doc/src/changelog/1.1.md +++ b/packages/dooringx-doc/src/changelog/1.1.md @@ -4,6 +4,10 @@ order: 1 --- ## changelog +## 0.9.2 + +增加远程组件调用全流程，component中增加url属性，便于script加载。 + ## 0.9.1 增加config.i18n配置，不使用国际化则不需要导入intl的context。 diff --git a/packages/dooringx-example/.umirc.ts b/packages/dooringx-example/.umirc.ts index cebd780..c2f165a 100644 --- a/packages/dooringx-example/.umirc.ts +++ b/packages/dooringx-example/.umirc.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 11:11:52 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-17 10:15:46 + * @LastEditTime: 2021-09-28 21:15:36 * @FilePath: \dooringx\packages\dooringx-example\.umirc.ts */ import { defineConfig } from 'umi'; diff --git a/packages/dooringx-example/src/layouts/index.tsx b/packages/dooringx-example/src/layouts/index.tsx index 3e8a963..d6f9680 100644 --- a/packages/dooringx-example/src/layouts/index.tsx +++ b/packages/dooringx-example/src/layouts/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-07-07 14:51:17 * @LastEditors: yehuozhili - * @LastEditTime: 2021-09-27 21:44:56 + * @LastEditTime: 2021-09-28 16:33:32 * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx */ import { Button } from 'antd'; @@ -19,7 +19,7 @@ import { locale } from 'dooringx-lib'; import { localeKey } from '../../../dooringx-lib/dist/locale'; export const config = new UserConfig(plugin); export const configContext = createContext(config); -config.i18n = false; +//config.i18n = false; // 自定义右键 const contextMenuState = config.getContextMenuState(); const unmountContextMenu = contextMenuState.unmountContextMenu; @@ -84,12 +84,12 @@ export const LocaleContext = createContext({ export default function Layout({ children }: IRouteComponentProps) { const [l, setLocale] = useState('zh-CN'); - // return ( - // - // - // {children} - // - // - // ); + return ( + + + {children} + + + ); return {children}; } diff --git a/packages/dooringx-example/src/pages/document.ejs b/packages/dooringx-example/src/pages/document.ejs new file mode 100644 index 0000000..9a15b4a --- /dev/null +++ b/packages/dooringx-example/src/pages/document.ejs @@ -0,0 +1,19 @@ + + + + + + + + Dooringx-example + + + + + \ No newline at end of file diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx index a833bbf..b87f2ed 100644 --- a/packages/dooringx-example/src/pages/index.tsx +++ b/packages/dooringx-example/src/pages/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-05-15 12:49:28 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-27 16:24:39 + * @LastEditTime: 2021-09-28 21:58:21 * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx */ import { @@ -15,12 +15,13 @@ import { Control, } from 'dooringx-lib'; import { InsertRowBelowOutlined } from '@ant-design/icons'; -import { useContext } from 'react'; +import { useContext, useState } from 'react'; import { configContext, LocaleContext } from '@/layouts'; import { useCallback } from 'react'; import { PREVIEWSTATE } from '@/constant'; -import { Button, Popover } from 'antd'; +import { Button, Input, Popover } from 'antd'; import { localeKey } from '../../../dooringx-lib/dist/locale'; +import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag'; export const HeaderHeight = '40px'; const footerConfig = function () { @@ -45,6 +46,9 @@ export default function IndexPage() { }, [config]); const [state] = useStoreState(config, subscribeFn, everyFn); + + const [value, setValue] = useState(''); + return (
@@ -71,6 +75,22 @@ export default function IndexPage() { > 切换语言 + setValue(e.target.value)} + > +
(null); + + const [force, setForce] = useState(0); + useMemo(() => { + props.config.leftForceUpdate = () => { + setForce((v) => v + 1); + }; + }, [props.config]); + const leftMapRenderListCategory = useMemo(() => { return props.config.getConfig().leftRenderListCategory; - }, [props.config]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.config, force]); const [search, setSearch] = useState(''); @@ -103,7 +112,15 @@ function LeftConfig(props: LeftConfigProps) { {...dragEventResolve(v)} >
- {v.imgCustom ? v.imgCustom : component} + {v.imgCustom ? ( + v.imgCustom + ) : ( + component + )}
- {v.imgCustom ? v.imgCustom : component} + {v.imgCustom ? ( + v.imgCustom + ) : ( + component + )}
{ - // 设置全局 - const bodyColor = props.config.getStore().getData().globalState?.bodyColor; - if (bodyColor) { - document.body.style.backgroundColor = bodyColor; - } - if (props.completeFn) { - props.completeFn(); - } - if (props.loadingState === undefined) { - setLoading(false); - } - }); + + const finalFn = () => { + setTimeout(() => { + // 设置全局 + const bodyColor = props.config.getStore().getData().globalState?.bodyColor; + if (bodyColor) { + document.body.style.backgroundColor = bodyColor; + } + if (props.completeFn) { + props.completeFn(); + } + if (props.loadingState === undefined) { + setLoading(false); + } + }); + }; + // 加载 script + const scripts = props.config.getStore().getData().globalState['script']; + if (scripts && Array.isArray(scripts) && scripts.length > 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(); + }); + } }, [props, props.config]); if (isEdit) { diff --git a/packages/dooringx-lib/src/config/index.tsx b/packages/dooringx-lib/src/config/index.tsx index 625cd75..4092a83 100644 --- a/packages/dooringx-lib/src/config/index.tsx +++ b/packages/dooringx-lib/src/config/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-02-25 21:16:58 * @LastEditors: yehuozhili - * @LastEditTime: 2021-09-27 17:34:21 + * @LastEditTime: 2021-09-28 22:05:04 * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx */ import React from 'react'; @@ -171,6 +171,7 @@ export const defaultStore: IStoreData = { containerColor: 'rgba(255,255,255,1)', title: 'dooring', bodyColor: 'rgba(255,255,255,1)', + script: [], }, modalConfig: {}, }; @@ -355,6 +356,9 @@ export class UserConfig { public iframeOrigin = ''; public iframeId = 'yh-container-iframe'; public i18n = true; + public SCRIPTGLOBALNAME = 'DOORINGXPLUGIN'; + public scriptLoading = false; + public leftForceUpdate = () => {}; constructor(initConfig?: Partial) { const mergeConfig = userConfigMerge(defaultConfig, initConfig); this.initConfig = mergeConfig; @@ -472,6 +476,7 @@ export class UserConfig { const mergeConfig = userConfigMerge(defaultConfig, v); this.initConfig = mergeConfig; this.init(); + this.leftForceUpdate(); this.store.forceUpdate(); } /** @@ -484,6 +489,7 @@ export class UserConfig { obj.leftRenderListCategory = v; this.initConfig = userConfigMerge(this.initConfig, obj); this.init(); + this.leftForceUpdate(); this.store.forceUpdate(); } @@ -497,6 +503,7 @@ export class UserConfig { obj.rightRenderListCategory = v; this.initConfig = userConfigMerge(this.initConfig, obj); this.init(); + this.leftForceUpdate(); this.store.forceUpdate(); } @@ -510,6 +517,7 @@ export class UserConfig { obj.leftAllRegistMap = [v]; this.initConfig = userConfigMerge(this.initConfig, obj); this.init(); + this.leftForceUpdate(); this.store.forceUpdate(); } @@ -521,6 +529,7 @@ export class UserConfig { setConfig(v: Partial) { this.initConfig = userConfigMerge(this.initConfig, v); this.init(); + this.leftForceUpdate(); this.store.forceUpdate(); } @@ -596,6 +605,54 @@ export class UserConfig { this.init(); this.store.forceUpdate(); } + + scriptSingleLoad( + src: string, + leftProps: Partial, + callback?: Function + ) { + let isEdit = this.storeChanger.isEdit(); + let globalState = this.store.getData().globalState; + if (isEdit) { + globalState = this.storeChanger.getOrigin()!.now.globalState; + } + if (globalState['script'].includes(src)) { + console.error(src + 'scripts have been loaded'); + return; + } + if (!this.scriptLoading) { + this.scriptLoading = true; + const script = document.createElement('script'); + script.src = src; + script.onload = () => { + const item = window[this.SCRIPTGLOBALNAME as any] as unknown as ComponentItemFactory; + try { + const left = leftProps; + left.component = item.name; + left.displayName = item.display; + this.scriptRegistComponentSingle(item, left as LeftRegistComponentMapItem); + } catch (e) { + console.error(e); + } + // 前面加载会重置store 新增组件需要事件初始化 + setTimeout(() => { + window[this.SCRIPTGLOBALNAME as any] = undefined as any; + isEdit = this.storeChanger.isEdit(); + globalState = this.store.getData().globalState; + if (isEdit) { + globalState = this.storeChanger.getOrigin()!.now.globalState; + } + globalState['script'].push(src); + this.store.forceUpdate(); + this.scriptLoading = false; + if (callback) { + callback(); + } + }); + }; + document.body.appendChild(script); + } + } } export default UserConfig; diff --git a/packages/dooringx-lib/src/core/components/abstract.ts b/packages/dooringx-lib/src/core/components/abstract.ts index b95d40c..6ceb57a 100644 --- a/packages/dooringx-lib/src/core/components/abstract.ts +++ b/packages/dooringx-lib/src/core/components/abstract.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-26 12:06:00 + * @LastEditTime: 2021-09-28 20:48:17 * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\abstract.ts */ import { ComponentItem } from './componentItem'; @@ -17,6 +17,7 @@ export class ComponentItemFactory implements ComponentItem { public resize: ComponentItem['resize'] = true, public needPosition: ComponentItem['needPosition'] = true, public init: ComponentItem['init'] = () => {}, - public destroy: ComponentItem['destroy'] = () => {} + public destroy: ComponentItem['destroy'] = () => {}, + public url: ComponentItem['url'] = '' ) {} } diff --git a/packages/dooringx-lib/src/core/components/componentItem.ts b/packages/dooringx-lib/src/core/components/componentItem.ts index eb0e19c..9a7537d 100644 --- a/packages/dooringx-lib/src/core/components/componentItem.ts +++ b/packages/dooringx-lib/src/core/components/componentItem.ts @@ -2,8 +2,8 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-06 23:45:21 - * @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\components\componentItem.ts + * @LastEditTime: 2021-09-28 20:47:36 + * @FilePath: \dooringx\packages\dooringx-lib\src\core\components\componentItem.ts */ import UserConfig from '../../config'; import Store from '../store'; @@ -26,6 +26,7 @@ export interface ComponentItem { props: Record; // 配置属性 render: (data: IBlockType, context: any, store: Store, config: UserConfig) => JSX.Element; destroy: () => void; + url: string; } export type ComponentRenderConfigProps = { data: IBlockType; diff --git a/packages/dooringx-lib/src/core/focusHandler/index.tsx b/packages/dooringx-lib/src/core/focusHandler/index.tsx index 633fb5f..27da6ed 100644 --- a/packages/dooringx-lib/src/core/focusHandler/index.tsx +++ b/packages/dooringx-lib/src/core/focusHandler/index.tsx @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 04:29:09 * @LastEditors: yehuozhili - * @LastEditTime: 2021-07-27 14:36:07 + * @LastEditTime: 2021-09-28 17:14:16 * @FilePath: \dooringx\packages\dooringx-lib\src\core\focusHandler\index.tsx */ import { innerDragState } from '../innerDrag/state'; diff --git a/packages/dooringx-lib/src/core/innerDrag/state.ts b/packages/dooringx-lib/src/core/innerDrag/state.ts index 2407eae..f31334c 100644 --- a/packages/dooringx-lib/src/core/innerDrag/state.ts +++ b/packages/dooringx-lib/src/core/innerDrag/state.ts @@ -2,7 +2,7 @@ * @Author: yehuozhili * @Date: 2021-03-14 12:09:11 * @LastEditors: yehuozhili - * @LastEditTime: 2021-08-04 11:39:02 + * @LastEditTime: 2021-09-28 16:57:05 * @FilePath: \dooringx\packages\dooringx-lib\src\core\innerDrag\state.ts */ import { RefObject } from 'react';