Optimize component loading logic and fix style references for shadowR…

…oot (30%)

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) => {
 			>
 				<Row gutter={12}>
 					{setting.map((item) => (
-						<FormItem showLabel={showLabel} item={item} key={item.name}></FormItem>
+						<FormItem
+							__shadow_host_ref={__shadow_host_ref}
+							showLabel={showLabel}
+							item={item}
+							key={item.name}
+						></FormItem>
 					))}
 				</Row>
 			</Form>

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) => {
 			<X
 				type='edit'
 				name={item.edit.type}
+				__shadow={true}
+				__shadow_host_ref={__shadow_host_ref}
 				props={{
 					...item.edit.props,
 					__namespace: '',

packages/xgen/components/base/PureList/components/List/index.tsx

@@ -7,7 +7,18 @@ import Row from '../Row'
 import type { IPropsList } from '../../types'
 
 const Index = (props: IPropsList) => {
-	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 (
 		<div className='w_100 border_box flex flex_column' style={{ paddingLeft: parentIds?.length && 48 }}>
 			<ReactSortable list={list} handle='.handle' animation={150} setList={(v) => 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}

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 (
 		<div className='w_100 flex align_start' style={builder ? { alignItems: 'center' } : {}}>
-			<Fields {...{ builder, setting, showLabel, hasChildren, dataItem, parentIds, onChange }}></Fields>
+			<Fields
+				{...{
+					builder,
+					setting,
+					showLabel,
+					hasChildren,
+					dataItem,
+					parentIds,
+					onChange,
+					__shadow_host_ref
+				}}
+			></Fields>
 			<If condition={builder == true}>
 				<Then>
 					<Builder
-						{...{ hasChildren, parentIds, fold, onAction }}
+						{...{ hasChildren, parentIds, fold, onAction, __shadow_host_ref }}
 						showFoldAction={dataItem?.children?.length > 0}
 					></Builder>
 				</Then>

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<HTMLDivElement>(null)
 
 	useLayoutEffect(() => x.init(list, setting, onChangeForm), [list])
 
@@ -43,13 +45,13 @@ const Index = (props: IProps) => {
 	}
 
 	return (
-		<root.div>
+		<root.div ref={shadowHostRef}>
 			<ShadowTheme></ShadowTheme>
 			<Styles showLabel={showLabel} builder={builder}></Styles>
 			<If condition={x.list.length}>
 				<Then>
 					<AliveScope>
-						<List {...props_list}></List>
+						<List __shadow_host_ref={shadowHostRef} {...props_list}></List>
 					</AliveScope>
 				</Then>
 				<Else>

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<HTMLDivElement>
 }
 
 export interface IPropsRow {
@@ -45,6 +46,7 @@ export interface IPropsRow {
 	builder?: boolean
 	onAction: Model['onAction']
 	onChange: Model['onChange']
+	__shadow_host_ref?: React.RefObject<HTMLDivElement>
 }
 
 export interface IPropsActions {
@@ -63,9 +65,11 @@ export interface IPropsFields {
 	dataItem: IPropsRow['dataItem']
 	parentIds: ParentIds
 	onChange: Model['onChange']
+	__shadow_host_ref?: React.RefObject<HTMLDivElement>
 }
 
 export interface IPropsFormItem {
 	showLabel: IProps['showLabel']
 	item: Common.EditColumn
+	__shadow_host_ref?: React.RefObject<HTMLDivElement>
 }

packages/xgen/components/edit/Upload/index.tsx

@@ -14,16 +14,15 @@ 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'
 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 (
 		<Item {...itemProps} {...{ __bind, __name }}>
 			<Custom {...rest_props}></Custom>

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<HTMLDivElement> // 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 (
 		<Suspense fallback={null}>
-			<Component {...props} />
+			<Component __shadow={__shadow} {...props} />
 		</Suspense>
 	)
 }

packages/xgen/public/components/edit/Upload/index.sss

@@ -0,0 +1,3 @@
+.test-xxxx {
+    color: red;
+}

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 {

packages/xgen/widgets/ShadowTheme/index.tsx

@@ -12,10 +12,10 @@ const Index = () => {
 	return (
 		<If condition={(global?.theme || window.$global?.theme) === 'dark'}>
 			<Then>
-				<style>{dark_theme}</style>
+				<style id='xgen-theme'>{dark_theme}</style>
 			</Then>
 			<Else>
-				<style>{light_theme}</style>
+				<style id='xgen-theme'>{light_theme}</style>
 			</Else>
 		</If>
 	)