fix: support multiple wxs

packages/uni-h5/src/framework/components/layout/index.tsx

@@ -24,7 +24,7 @@ import { defineSystemComponent } from '@dcloudio/uni-components'
 import { updateCssVar } from '@dcloudio/uni-core'
 import { useTabBar } from '../../setup/state'
 import { useKeepAliveRoute } from '../../setup/page'
-import { RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared'
+import { resolveOwnerEl, RESPONSIVE_MIN_WIDTH } from '@dcloudio/uni-shared'
 import { checkMinWidth } from '../../../helpers/dom'
 import { hasOwn } from '@vue/shared'
 
@@ -388,8 +388,8 @@ function useTopWindow(layoutState: LayoutState): WindowComponentInfo {
   const { component, style } = __uniConfig.topWindow!
   const windowRef: Ref<ComponentPublicInstance | null> = ref(null)
   function updateWindow() {
-    const instalce = windowRef.value as ComponentPublicInstance
-    const el: HTMLElement = instalce.$el
+    const instance = windowRef.value as ComponentPublicInstance
+    const el = resolveOwnerEl(instance.$) as HTMLElement
     const height = el.getBoundingClientRect().height
     layoutState.topWindowHeight = height
   }
@@ -408,8 +408,8 @@ function useLeftWindow(layoutState: LayoutState): WindowComponentInfo {
   const { component, style } = __uniConfig.leftWindow!
   const windowRef: Ref<ComponentPublicInstance | null> = ref(null)
   function updateWindow() {
-    const instalce = windowRef.value as ComponentPublicInstance
-    const el: HTMLElement = instalce.$el
+    const instance = windowRef.value as ComponentPublicInstance
+    const el = resolveOwnerEl(instance.$) as HTMLElement
     const width = el.getBoundingClientRect().width
     layoutState.leftWindowWidth = width
   }
@@ -428,8 +428,8 @@ function useRightWindow(layoutState: LayoutState): WindowComponentInfo {
   const { component, style } = __uniConfig.rightWindow!
   const windowRef: Ref<ComponentPublicInstance | null> = ref(null)
   function updateWindow() {
-    const instalce = windowRef.value as ComponentPublicInstance
-    const el: HTMLElement = instalce.$el
+    const instance = windowRef.value as ComponentPublicInstance
+    const el = resolveOwnerEl(instance.$) as HTMLElement
     const width = el.getBoundingClientRect().width
     layoutState.rightWindowWidth = width
   }

packages/vite-plugin-uni/src/configResolved/plugins/preVue.ts

@@ -113,7 +113,7 @@ function normalizeBlockNode(code: string, blocks: ElementNode[]) {
 }
 
 export function normalizeWxsCode(ast: RootNode, code: string) {
-  const wxsNode = ast.children.find(
+  const wxsNodes = ast.children.filter(
     (node) =>
       node.type === NodeTypes.ELEMENT &&
       node.tag === 'script' &&
@@ -125,8 +125,8 @@ export function normalizeWxsCode(ast: RootNode, code: string) {
           WXS_ATTRS.includes(prop.value.content)
       )
   )
-  if (wxsNode) {
-    code = normalizeWxsNode(code, wxsNode as ElementNode)
+  if (wxsNodes.length) {
+    code = normalizeWxsNode(code, wxsNodes as ElementNode[])
   }
   return code
 }
@@ -134,35 +134,41 @@ export function normalizeWxsCode(ast: RootNode, code: string) {
 const SCRIPT_END_LEN = '</script>'.length
 const SCRIPT_START_LEN = '<script'.length
 
-function normalizeWxsNode(code: string, { loc, props }: ElementNode) {
+function normalizeWxsNode(code: string, nodes: ElementNode[]) {
   const magicString = new MagicString(code)
-  const langAttr = props.find((prop) => prop.name === 'lang') as AttributeNode
-  const moduleAttr = props.find(
-    (prop) => prop.name === 'module'
-  ) as AttributeNode
-  const startOffset = loc.start.offset
-  const endOffset = loc.end.offset
-  const lang = langAttr.value!.content
-  const langStartOffset = langAttr.loc.start.offset
-  magicString.overwrite(startOffset, startOffset + SCRIPT_START_LEN, '<' + lang) // <renderjs or <wxs
-  magicString.overwrite(
-    langStartOffset,
-    langStartOffset + ('lang="' + lang + '"').length,
-    ''
-  ) // remove lang="renderjs" or lang="wxs"
-  magicString.overwrite(
-    endOffset - SCRIPT_END_LEN,
-    endOffset,
-    '</' + lang + '>'
-  ) //</renderjs> or </wxs>
-
-  if (moduleAttr) {
-    const moduleStartOffset = moduleAttr.loc.start.offset
+  nodes.forEach(({ loc, props }) => {
+    const langAttr = props.find((prop) => prop.name === 'lang') as AttributeNode
+    const moduleAttr = props.find(
+      (prop) => prop.name === 'module'
+    ) as AttributeNode
+    const startOffset = loc.start.offset
+    const endOffset = loc.end.offset
+    const lang = langAttr.value!.content
+    const langStartOffset = langAttr.loc.start.offset
     magicString.overwrite(
-      moduleStartOffset,
-      moduleStartOffset + 'module'.length,
-      'name'
-    ) // module="echarts" => name="echarts"
-  }
+      startOffset,
+      startOffset + SCRIPT_START_LEN,
+      '<' + lang
+    ) // <renderjs or <wxs
+    magicString.overwrite(
+      langStartOffset,
+      langStartOffset + ('lang="' + lang + '"').length,
+      ''
+    ) // remove lang="renderjs" or lang="wxs"
+    magicString.overwrite(
+      endOffset - SCRIPT_END_LEN,
+      endOffset,
+      '</' + lang + '>'
+    ) //</renderjs> or </wxs>
+
+    if (moduleAttr) {
+      const moduleStartOffset = moduleAttr.loc.start.offset
+      magicString.overwrite(
+        moduleStartOffset,
+        moduleStartOffset + 'module'.length,
+        'name'
+      ) // module="echarts" => name="echarts"
+    }
+  })
   return magicString.toString()
 }