Optimize shadow DOM component css imports (50%)

packages/xgen/.env

@@ -1,5 +1,5 @@
 # base url for yao app
-BASE="yao"
+BASE="__yao_admin_root"
 
 # umi
 DID_YOU_KNOW="none"

packages/xgen/build/components.ts

@@ -0,0 +1,45 @@
+/**
+ * Generate the Components sss files, for the shadow dom dynamic import
+ */
+
+import child_process from 'child_process'
+import fs, { appendFile } from 'fs'
+import path from 'path'
+import { ExportComponent, ExportComponents } from '../components/exports'
+
+const cwd = process.cwd()
+const target_root = path.join(cwd, `/public/components`)
+
+// Generate the sss files for the components
+const compile = (name: string, component: ExportComponent) => {
+	const output = path.join(target_root, `${name}`)
+	const input = path.join(cwd, `__main.less`)
+
+	// Generate the main.less file import the component styles
+	const imports: string[] = []
+	component.styles.forEach((style, index) => {
+		if (style.startsWith('@/')) {
+			imports.push(`@import url('/__yao_admin_root/${style.substring(2, style.length)}');`)
+			return
+		}
+		// fs.appendFileSync(input, `@import ".${style}";\n`)
+		const lessFile = path.join(cwd, style)
+		const targetName = `chunk.${index}.css`
+		const targetPath = path.join(output, targetName)
+		imports.push(`@import url('/__yao_admin_root/components/${name}/${targetName}');`)
+
+		// Compile the less file
+		child_process.execSync(`lessc ${lessFile} ${targetPath}`)
+
+		// Replace :global with :host
+		const content = fs.readFileSync(targetPath, 'utf8').replace(/:global/g, '')
+		fs.writeFileSync(targetPath, content)
+	})
+
+	// Create the index.sss file
+	const indexFile = path.join(output, `index.sss`)
+	fs.writeFileSync(indexFile, imports.join('\n'))
+}
+
+// Generate the sss files for the components
+Object.entries(ExportComponents).forEach(([name, component]) => compile(name, component))

packages/xgen/build/config.ts

@@ -16,7 +16,6 @@ export const proxy = {
 	'/api': { target: 'http://127.0.0.1:5099', changeOrigin: true },
 	'/components': { target: 'http://127.0.0.1:5099', changeOrigin: true },
 	'/assets': { target: 'http://127.0.0.1:5099', changeOrigin: true },
-	'/000205099/assets': { target: 'http://127.0.0.1:5099', changeOrigin: true },
 	'/iframe': { target: 'http://127.0.0.1:5099', changeOrigin: true }
 }
 

packages/xgen/components/edit/Upload/components/Image.less

@@ -1,4 +1,4 @@
-._local {
+.xgen-edit-upload-image {
 	:global {
 		.image_wrap {
 			filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));

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

@@ -27,7 +27,13 @@ const Index = (props: IPropsCustomRender) => {
 
 	return (
 		<div
-			className={clsx([styles._local, 'upload_custom_wrap', 'flex', 'relative'])}
+			className={clsx([
+				styles['xgen-edit-upload-image'],
+				'xgen-edit-upload-image',
+				'upload_custom_wrap',
+				'flex',
+				'relative'
+			])}
 			onMouseEnter={() => setShowOpration(true)}
 			onMouseLeave={() => setShowOpration(false)}
 		>
@@ -60,26 +66,6 @@ const Index = (props: IPropsCustomRender) => {
 					></img>
 				</div>
 			</Loader>
-			{/* 
-			<Skeleton
-				loading={loading || url == ''}
-				active
-				paragraph={{
-					width: size?.width || '100%'
-				}}
-			>
-				<div className={clsx(['image_wrap'])}>
-					<img
-						className='image'
-						src={url}
-						style={{
-							borderRadius: 6,
-							objectFit: 'cover',
-							...size
-						}}
-					></img>
-				</div>
-			</Skeleton> */}
 		</div>
 	)
 }

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

@@ -1,4 +1,4 @@
-._local {
+.xgen-edit-upload {
 	padding-bottom: 0;
 
 	&.image {

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

@@ -165,7 +165,12 @@ const Custom = window.$app.memo((props: CustomProps) => {
 	}
 
 	return (
-		<div className={clsx([styles._local, styles[filetype]], maxCount && maxCount > 1 && 'multiple')}>
+		<div
+			className={clsx(
+				[styles['xgen-edit-upload'], styles[filetype], 'xgen-edit-upload'],
+				maxCount && maxCount > 1 && 'multiple'
+			)}
+		>
 			<Upload {...props_upload}>{visible_btn && <UploadBtn {...props_upload_btn}></UploadBtn>}</Upload>
 		</div>
 	)

packages/xgen/components/exports.ts

@@ -0,0 +1,21 @@
+/**
+ * The components for shadow dom and dynamic import
+ */
+export const ExportComponents: Record<string, ExportComponent> = {
+	'edit/Upload': {
+		styles: [
+			'/components/edit/Upload/index.less',
+			'/components/edit/Upload/components/Loader.less',
+			'/components/edit/Upload/components/Audio.less',
+			'/components/edit/Upload/components/Image.less',
+			'/components/edit/Upload/components/Video.less',
+			'@/assets/css/vidstack/theme.css',
+			'@/assets/css/vidstack/layouts/audio.css',
+			'@/assets/css/vidstack/layouts/video.css'
+		]
+	}
+}
+
+export interface ExportComponent {
+	styles: string[]
+}

packages/xgen/components/x/index.tsx

@@ -2,6 +2,7 @@ import { message } from 'antd'
 import { lazy, Suspense, useEffect, useMemo } from 'react'
 
 import type { Global } from '@/types'
+import { ExportComponents } from '@/components/exports' // Import the components for shadow dom and dynamic import
 
 type ComponentsType = 'base' | 'edit' | 'view' | 'chart' | 'group' | 'optional'
 
@@ -39,7 +40,7 @@ const Index = ({ type, name, props, __shadow, __shadow_host_ref }: IProps) => {
 			})
 			.catch(() => {})
 	}
-	__shadow && useEffect(() => importStyles(), [__shadow_host_ref])
+	ExportComponents[`${type}/${name}`] && __shadow && useEffect(() => importStyles(), [__shadow_host_ref])
 
 	// Dynamically import the component
 	const Component = useMemo(() => {

packages/xgen/config/index.ts

@@ -3,5 +3,5 @@ export default {
 	short_name: 'xgen',
 	description: 'The low-code dashboard of Yao app engine.',
 	logo: '/logo.png',
-	copyright: '© 象传科技'
+	copyright: '© Infinite Wisdom Software Technology Co., Ltd. '
 }

packages/xgen/package.json

@@ -16,8 +16,9 @@
       "scripts": {
             "dev": "max dev",
             "local": "max preview --port 8000",
-            "build": "max setup && pnpm run build:theme && max build && pnpm run build:after",
+            "build": "max setup && pnpm run build:theme && build:components && max build && pnpm run build:after",
             "build:theme": "tsx ./build/theme.ts",
+            "build:components": "tsx ./build/components.ts",
             "build:after": "tsx ./build/after.ts"
       },
       "optionalDependencies": {