From fb97b700f7e0db744c69080b2a274ae9c2769656 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 31 Oct 2024 16:10:25 +0800 Subject: [PATCH] Optimize component loading logic and fix style references for shadowRoot (30%) --- .../base/PureList/components/Fields/index.tsx | 9 +++-- .../PureList/components/FormItem/index.tsx | 4 ++- .../base/PureList/components/List/index.tsx | 14 +++++++- .../base/PureList/components/Row/index.tsx | 28 +++++++++++++-- .../xgen/components/base/PureList/index.tsx | 8 +++-- .../xgen/components/base/PureList/types.ts | 4 +++ .../xgen/components/edit/Upload/index.tsx | 8 ++--- packages/xgen/components/x/index.tsx | 36 +++++++++++++++++-- .../public/components/edit/Upload/index.sss | 3 ++ packages/xgen/types/component.ts | 1 + packages/xgen/widgets/ShadowTheme/index.tsx | 4 +-- 11 files changed, 99 insertions(+), 20 deletions(-) create mode 100644 packages/xgen/public/components/edit/Upload/index.sss diff --git a/packages/xgen/components/base/PureList/components/Fields/index.tsx b/packages/xgen/components/base/PureList/components/Fields/index.tsx index 70ee9ad0..28bd99d4 100644 --- a/packages/xgen/components/base/PureList/components/Fields/index.tsx +++ b/packages/xgen/components/base/PureList/components/Fields/index.tsx @@ -8,7 +8,7 @@ import type { IPropsFields } from '../../types' const { useForm } = Form const Index = (props: IPropsFields) => { - const { setting, showLabel, builder, hasChildren, dataItem, parentIds, onChange } = props + const { setting, showLabel, builder, hasChildren, dataItem, parentIds, __shadow_host_ref, onChange } = props const [form] = useForm() return ( @@ -27,7 +27,12 @@ const Index = (props: IPropsFields) => { > {setting.map((item) => ( - + ))} diff --git a/packages/xgen/components/base/PureList/components/FormItem/index.tsx b/packages/xgen/components/base/PureList/components/FormItem/index.tsx index 27aee7a1..4e0288f4 100644 --- a/packages/xgen/components/base/PureList/components/FormItem/index.tsx +++ b/packages/xgen/components/base/PureList/components/FormItem/index.tsx @@ -8,7 +8,7 @@ import { X } from '@/components' import type { IPropsFormItem } from '../../types' const Index = (props: IPropsFormItem) => { - const { showLabel, item } = props + const { showLabel, item, __shadow_host_ref } = props const ref = useRef(null) const focus = useFocusWithin(ref) @@ -20,6 +20,8 @@ const Index = (props: IPropsFormItem) => { { - const { setting, list, showLabel, builder, hasChildren, parentIds = [], onSort, onAction, onChange } = props + const { + setting, + list, + showLabel, + builder, + hasChildren, + __shadow_host_ref, + parentIds = [], + onSort, + onAction, + onChange + } = props return (
onSort(v, parentIds)}> @@ -20,6 +31,7 @@ const Index = (props: IPropsList) => { hasChildren={hasChildren} dataItem={item} parentIds={[...parentIds, item.id]} + __shadow_host_ref={__shadow_host_ref} fold={item?._fold} onAction={onAction} onChange={onChange} diff --git a/packages/xgen/components/base/PureList/components/Row/index.tsx b/packages/xgen/components/base/PureList/components/Row/index.tsx index 6d8f6466..a09f2412 100644 --- a/packages/xgen/components/base/PureList/components/Row/index.tsx +++ b/packages/xgen/components/base/PureList/components/Row/index.tsx @@ -6,14 +6,36 @@ import type { IPropsRow } from '../../types' import { Else, If, Then } from 'react-if' const Index = (props: IPropsRow) => { - const { setting, showLabel, builder, hasChildren, dataItem, parentIds, fold, onAction, onChange } = props + const { + setting, + showLabel, + builder, + hasChildren, + dataItem, + parentIds, + fold, + __shadow_host_ref, + onAction, + onChange + } = props return (
- + 0} > diff --git a/packages/xgen/components/base/PureList/index.tsx b/packages/xgen/components/base/PureList/index.tsx index 0323a934..aa068106 100644 --- a/packages/xgen/components/base/PureList/index.tsx +++ b/packages/xgen/components/base/PureList/index.tsx @@ -1,7 +1,7 @@ import { useMemoizedFn } from 'ahooks' import { toJS } from 'mobx' import { observer } from 'mobx-react-lite' -import { useLayoutEffect, useState } from 'react' +import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { AliveScope } from 'react-activation' import { Else, If, Then } from 'react-if' import root from 'react-shadow' @@ -13,10 +13,12 @@ import { Empty, List, Styles } from './components' import Model from './model' import type { IProps, IPropsList, IPropsEmpty } from './types' +import { use } from 'echarts' const Index = (props: IProps) => { const { setting, list, showLabel, hasChildren, builder, onChangeForm } = props const [x] = useState(() => container.resolve(Model)) + const shadowHostRef = useRef(null) useLayoutEffect(() => x.init(list, setting, onChangeForm), [list]) @@ -43,13 +45,13 @@ const Index = (props: IProps) => { } return ( - + - + diff --git a/packages/xgen/components/base/PureList/types.ts b/packages/xgen/components/base/PureList/types.ts index f2a800ab..ae7b28c7 100644 --- a/packages/xgen/components/base/PureList/types.ts +++ b/packages/xgen/components/base/PureList/types.ts @@ -33,6 +33,7 @@ export interface IPropsList { onSort: Model['onSort'] onAction: Model['onAction'] onChange: Model['onChange'] + __shadow_host_ref?: React.RefObject } export interface IPropsRow { @@ -45,6 +46,7 @@ export interface IPropsRow { builder?: boolean onAction: Model['onAction'] onChange: Model['onChange'] + __shadow_host_ref?: React.RefObject } export interface IPropsActions { @@ -63,9 +65,11 @@ export interface IPropsFields { dataItem: IPropsRow['dataItem'] parentIds: ParentIds onChange: Model['onChange'] + __shadow_host_ref?: React.RefObject } export interface IPropsFormItem { showLabel: IProps['showLabel'] item: Common.EditColumn + __shadow_host_ref?: React.RefObject } diff --git a/packages/xgen/components/edit/Upload/index.tsx b/packages/xgen/components/edit/Upload/index.tsx index 5e72a423..5b160111 100644 --- a/packages/xgen/components/edit/Upload/index.tsx +++ b/packages/xgen/components/edit/Upload/index.tsx @@ -14,7 +14,6 @@ import UploadBtn from './components/UploadBtn' import filemap from './filemap' import useList from './hooks/useList' import useVisibleBtn from './hooks/useVisibleBtn' -import styles from './index.less' import { ExportValue } from './utils/handleFileList' import { getLocale } from '@umijs/max' import { LocalRequest, S3Request } from './request' @@ -22,8 +21,8 @@ import type { UploadFile, UploadProps } from 'antd' import type { IProps, CustomProps, IPropsUploadBtn, PreviewProps, AllowedFileType } from './types' import { IRequest, UploadError } from './request/types' import { useState } from 'react' -import to from 'await-to-js' -import { abort } from 'process' + +import styles from './index.less' const Custom = window.$app.memo((props: CustomProps) => { const locale = getLocale() @@ -211,8 +210,7 @@ const fmtSize = (size: PreviewProps['size'], filetype: AllowedFileType): Preview } const Index = (props: IProps) => { - const { __bind, __name, itemProps, ...rest_props } = props - + const { __bind, __name, __shadow, itemProps, ...rest_props } = props return ( diff --git a/packages/xgen/components/x/index.tsx b/packages/xgen/components/x/index.tsx index 11e742ad..149d4ed1 100644 --- a/packages/xgen/components/x/index.tsx +++ b/packages/xgen/components/x/index.tsx @@ -1,5 +1,5 @@ import { message } from 'antd' -import { lazy, Suspense, useMemo } from 'react' +import { lazy, Suspense, useEffect, useMemo } from 'react' import type { Global } from '@/types' @@ -8,10 +8,40 @@ type ComponentsType = 'base' | 'edit' | 'view' | 'chart' | 'group' | 'optional' interface IProps { type: ComponentsType name: string + __shadow?: boolean // is a shadow dom + __shadow_host_ref?: React.RefObject // the shadow dom host ref, only for shadow dom props: Global.AnyObject } -const Index = ({ type, name, props }: IProps) => { +const Index = ({ type, name, props, __shadow, __shadow_host_ref }: IProps) => { + // Import the component styles for shadow dom + const importStyles = () => { + if (!__shadow_host_ref || !__shadow_host_ref.current || !__shadow_host_ref.current.shadowRoot) return + const component_name = `xgen-component-${type}__${name}` + + // Check if the styles are already loaded + if (__shadow_host_ref.current.getAttribute(component_name) === 'true') { + return + } + + // Load the styles for the component + __shadow_host_ref.current.setAttribute(component_name, 'true') + const style = document.createElement('style') + style.id = component_name + import(`@/public/components/${type}/${name}/index.sss`) + .then((module) => { + style.innerHTML = module.default || '' + const themeStyle = __shadow_host_ref?.current?.shadowRoot?.querySelector('#xgen-theme') + if (themeStyle) { + themeStyle.after(style) + return + } + }) + .catch(() => {}) + } + __shadow && useEffect(() => importStyles(), [__shadow_host_ref]) + + // Dynamically import the component const Component = useMemo(() => { if (name.startsWith('public/')) { const { origin } = window.location @@ -37,7 +67,7 @@ const Index = ({ type, name, props }: IProps) => { return ( - + ) } diff --git a/packages/xgen/public/components/edit/Upload/index.sss b/packages/xgen/public/components/edit/Upload/index.sss new file mode 100644 index 00000000..e4ff8c92 --- /dev/null +++ b/packages/xgen/public/components/edit/Upload/index.sss @@ -0,0 +1,3 @@ +.test-xxxx { + color: red; +} \ No newline at end of file diff --git a/packages/xgen/types/component.ts b/packages/xgen/types/component.ts index 059fb006..ccfad01e 100644 --- a/packages/xgen/types/component.ts +++ b/packages/xgen/types/component.ts @@ -33,6 +33,7 @@ export declare namespace Component { __type: FormType __bind: string __name: string + __shadow?: boolean // is a shadow dom } interface PropsEditComponent extends Props { diff --git a/packages/xgen/widgets/ShadowTheme/index.tsx b/packages/xgen/widgets/ShadowTheme/index.tsx index f54e36e1..d90a546a 100644 --- a/packages/xgen/widgets/ShadowTheme/index.tsx +++ b/packages/xgen/widgets/ShadowTheme/index.tsx @@ -12,10 +12,10 @@ const Index = () => { return ( - + - + )