wip(web): customElements

Author: fxy060608

packages/uni-h5/src/view/components/index.ts

@@ -41,5 +41,5 @@ export {
   //#endif
 }
 //#if _X_
-export * from '../../x/view/components/easycom'
+export * from '../../x/view/components/customElements'
 //#endif

packages/uni-h5/src/x/view/components/easycom.ts renamed to packages/uni-h5/src/x/view/components/customElements.ts

@@ -1,2 +1,3 @@
 // This file is automatically generated.
 // Do not modify this file -- YOUR CHANGES WILL BE ERASED!
+export {}

packages/uni-h5/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "paths": {
       "@dcloudio/*": ["packages/*/src"],
-      "@dcloudio/uni-platform": ["packages/uni-h5/src/platform/index.ts"]
+      "@dcloudio/uni-platform": ["packages/uni-h5/src/platform/index.ts"],
+      "@dcloudio/uni-ext-api/*": ["uni-ext-api/uni_modules/*"]
     }
   },
   "include": ["src"]

packages/uni-h5/vite.config.ts

@@ -24,7 +24,7 @@ import { isH5CustomElement, isH5NativeTag } from '@dcloudio/uni-shared'
 import { genApiJson } from './api'
 import {
   replacePagePaths,
-  syncEasyComFile,
+  syncCustomElementsFile,
   syncPagesFile,
   uts2ts,
 } from '../../scripts/ext-api'
@@ -51,7 +51,9 @@ if (isNewX) {
     apiDirs.push(process.env.UNI_APP_EXT_API_DCLOUD_DIR)
   }
   systemPagePaths = syncPagesFile(apiDirs, 'web')
-  syncEasyComFile(apiDirs)
+  if (process.env.UNI_APP_EXT_COMPONENT_DIR) {
+    syncCustomElementsFile([process.env.UNI_APP_EXT_COMPONENT_DIR])
+  }
 }
 
 const rollupPlugins = [

scripts/ext-api.ts

@@ -344,54 +344,74 @@ export function replacePagePaths(
   }
 }
 
-export function syncEasyComFile(apiDirs: string[]) {
-  const easyComCodes: string[] = []
+export function syncCustomElementsFile(apiDirs: string[]) {
+  const customElementsImportCodes: string[] = []
+  const customElementsExportCodes: string[] = []
   apiDirs.forEach((apiDir) => {
     if (apiDir && fs.existsSync(apiDir)) {
       fs.readdirSync(apiDir).forEach((module) => {
         const moduleDir = path.resolve(apiDir, module)
         // 目前仅限web端编译，所以没有utssdk目录
         if (!fs.existsSync(path.resolve(moduleDir, 'utssdk'))) {
-          const componentsDir = path.resolve(moduleDir, 'components')
+          const customElementsDir = path.resolve(moduleDir, 'customElements')
           if (
-            fs.existsSync(componentsDir) &&
+            fs.existsSync(customElementsDir) &&
             fs.existsSync(path.resolve(moduleDir, 'package.json'))
           ) {
             const packageJson = require(path.resolve(moduleDir, 'package.json'))
-            // 当前 easycom 平台禁用
-            if (packageJson.uni_modules?.easycom?.web === false) {
-              return
+            // 当前 customElements 平台禁用
+            if (packageJson.uni_modules?.customElements?.web === true) {
+              fs.readdirSync(customElementsDir).forEach((component) => {
+                if (
+                  fs.existsSync(
+                    path.resolve(
+                      customElementsDir,
+                      component,
+                      component + '.uts'
+                    )
+                  )
+                ) {
+                  const identElement =
+                    capitalize(camelize(component)) + 'Element'
+                  customElementsImportCodes.push(
+                    `// @ts-expect-error
+import { ${identElement} } from '@dcloudio/uni-ext-api/${module}/customElements/${component}/${component}.uts.ts'`
+                  )
+                  customElementsExportCodes.push(
+                    `export const ${capitalize(
+                      camelize(component.replace('uni-', ''))
+                    )}0 = /*#__PURE__*/ (() => {
+  // @ts-expect-error
+  customElements.define('${component}', ${identElement})
+  return '${component}'
+})()`
+                  )
+                }
+              })
             }
-            fs.readdirSync(componentsDir).forEach((component) => {
-              if (
-                fs.existsSync(
-                  path.resolve(componentsDir, component, component + '.vue')
-                )
-              ) {
-                easyComCodes.push(
-                  `export { default as ${capitalize(
-                    camelize(component)
-                  )} } from '@dcloudio/uni-ext-api/${module}/components/${component}/${component}.vue'`
-                )
-              }
-            })
           }
         }
       })
     }
   })
 
+  const code = customElementsImportCodes.length
+    ? `${customElementsImportCodes.join('\n')}
+${customElementsExportCodes.join('\n')}
+`
+    : 'export {}'
+
   fs.outputFileSync(
     path.resolve(
       path.resolve(__dirname, '..', 'packages', 'uni-h5'),
       'src',
       'x',
       'view',
       'components',
-      'easycom.ts'
+      'customElements.ts'
     ),
     `// This file is automatically generated.
 // Do not modify this file -- YOUR CHANGES WILL BE ERASED!
-${easyComCodes.length ? easyComCodes.join('\n') : ''}`
+${code}`
   )
 }