Fix:修复组件混合写法的一些类型报错和无法更新 (#15820)

* feat: 去掉引用路径的.ets结尾

* feat: nativeCompName中划线转驼峰

* feat: 完成混编组件的更新

* feat: 切换回notifyDataChange

* style: 添加注释

---------

Co-authored-by: mayintao3 <[email protected]>

packages/taro-platform-harmony/src/runtime-ets/dom/element/element.ts

@@ -119,6 +119,17 @@ export class TaroElement<
 
     this._attrs[name] = value
 
+    // 混合开发的组件没办法自动更新，需要把父级的结点删掉新建
+    // Current.nativeComponentNames会在render.ets中赋值
+    if(Current.nativeComponentNames?.includes(this.tagName)) {
+      const idxOfRef = this.parentNode?.findIndex(this)
+
+      if (idxOfRef !== undefined) {
+        this._nativeUpdateTrigger++
+        this.parentNode?.notifyDataChange(idxOfRef)
+      } 
+    }
+
     if (['PAGE-META', 'NAVIGATION-BAR'].includes(this.tagName)) {
       // FIXME 等 Harmony 支持更细粒度的 @Watch 方法后移出
       eventCenter.trigger('__taroComponentAttributeUpdate', {

packages/taro-platform-harmony/src/runtime-ets/dom/node.ts

@@ -44,6 +44,9 @@ export class TaroNode extends TaroDataSourceElement {
   // 是否为半编译模板下拥有自主更新权的节点
   public _isDynamicNode = false
 
+  // 以下属性为原生混写组件才有意义的属性
+  public _nativeUpdateTrigger = 0
+
   constructor(nodeName: string, nodeType = NodeType.ELEMENT_NODE) {
     super()
 

packages/taro-vite-runner/src/harmony/template/render.ts

@@ -84,6 +84,9 @@ import type {
   TaroPageMetaElement,
   TaroNavigationBarElement,
 } from '@tarojs/runtime'
+import { Current } from '@tarojs/runtime'
+
+${this.generateNativeComponentNamesInit()}
 
 @Builder
 function createChildItem (item: TaroElement, createLazyChildren?: (node: TaroElement) => void) {
@@ -170,7 +173,7 @@ function createLazyChildren (node: TaroElement, layer = 0) {
         createChildItem(item, createLazyChildren)
       }
     }
-  }, (item: TaroElement) => \`\${item._nid}-\${item._nodeInfo?.layer || 0}\`)
+  }, (item: TaroElement) => \`\${item._nid}-\${item._nativeUpdateTrigger}-\${item._nodeInfo?.layer || 0}\`)
 }
 
 export { createChildItem, createLazyChildren }
@@ -240,7 +243,7 @@ export { createChildItem, createLazyChildren }
       if (nativeMeta.isPackage) {
         result += `import ${nativeMeta.name} from '${nativeMeta.scriptPath}'\n`
       } else {
-        const nativePath = path.relative(this.context.sourceDir, nativeMeta.scriptPath)
+        const nativePath = path.relative(this.context.sourceDir, nativeMeta.scriptPath).replace(/\.ets$/, '');
         result = `${result}import ${nativeMeta.name} from './${nativePath}'\n`
       }
     })
@@ -268,10 +271,26 @@ export { createChildItem, createLazyChildren }
     this.context.nativeComponents.forEach((nativeMeta, _) => {
       const { name } = nativeMeta
       code = `${code}if (item.tagName === '${name.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase()}') {
-    ${name}({ props: (item._attrs as TaroAny).props })
+    ${name}(item._attrs as TaroAny)
   } else `
     })
 
     return code
   }
+
+  generateNativeComponentNamesInit () {
+    if(this.context.nativeComponents.size === 0) return ''
+    const compentsList: string[] = []
+
+    this.context.nativeComponents.forEach((nativeMeta) => {
+      const { name, isPackage } = nativeMeta
+      // 这段逻辑服务于@Buider的更新，是通过父节点把这个节点重新渲染，这里排除掉package的情况，package一般逻辑复杂会用@Component实现组件
+      if(!isPackage) {
+        compentsList.push(name.replace(new RegExp('(?<=.)([A-Z])', 'g'), '-$1').toUpperCase())
+      }
+    })
+
+    return `Current.nativeComponentNames = [${compentsList.map(item => `"${item}"`).join(', ')}]`
+
+  }
 }

packages/taro-vite-runner/src/utils/compiler/harmony.ts

@@ -159,14 +159,15 @@ export class TaroCompilerContext extends CompilerContext<ViteHarmonyBuildConfig>
       }
 
       const nativeCompMeta: ViteNativeCompMeta = {
-        name: compName,
+        name: compName.replace(/(\w)-(\w)/g, (_, p1, p2) => {
+          return p1 + p2.toUpperCase()
+        }),
         scriptPath: compScriptPath,
         config: {},
         configPath: '',
         templatePath: ETSPath,
-        isNative: true
+        isNative: true,
       }
-
       this.nativeComponents.set(compScriptPath, nativeCompMeta)
       if (!componentConfig.thirdPartyComponents.has(compName) && !meta.isNative) {
         componentConfig.thirdPartyComponents.set(compName, new Set())
@@ -244,7 +245,7 @@ export class TaroCompilerContext extends CompilerContext<ViteHarmonyBuildConfig>
       const hapConfig = readJsonSync(hapConfigPath)
       const window = {
         designWidth: (typeof designWidth === 'function' ? designWidth() : designWidth) || 750,
-        autoDesignWidth: false
+        autoDesignWidth: false,
       }
       hapConfig.module ||= {}
       if (this.useJSON5 !== false) {
@@ -359,19 +360,19 @@ export class TaroCompilerContext extends CompilerContext<ViteHarmonyBuildConfig>
   }
 
   /** 工具函数 */
-  getScriptPath (filePath: string) {
+  getScriptPath(filePath: string) {
     return this.getTargetFilePath(filePath, this.fileType.script)
   }
 
-  getStylePath (filePath: string) {
+  getStylePath(filePath: string) {
     return this.getTargetFilePath(filePath, this.fileType.style)
   }
 
-  getConfigPath (filePath: string) {
+  getConfigPath(filePath: string) {
     return this.getTargetFilePath(filePath, this.fileType.config)
   }
 
-  getETSPath (filePath: string) {
+  getETSPath(filePath: string) {
     return resolveSync(filePath, { extensions: this.nativeExt })
   }
 }