fix(plugin-compiler): 修复同一个项目中混用支付宝或微信 DSL 可能会导致样式冲突的问题

eleme · Mar 10, 2023 · 4f0577a · 4f0577a
1 parent ac35a06
commit 4f0577a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/packages/plugin-compiler/src/constants.ts b/packages/plugin-compiler/src/constants.ts
@@ -36,6 +36,14 @@ export const CHILD_COMPILER_RUNNER = 'MOR_CHILD_RUNNER_COMPILER_FLAG'
  */
 export const INDEPENDENT_SUBPACAKGE_JSON = 'independentSubpackageJson'
 
+/**
+ * 运行时源码类型标记
+ */
+export const RUNTIME_SOURCE_TYPES = {
+  alipay: 'a',
+  wechat: 'w'
+} as const
+
 /**
  * 生成 mor 运行时正则
  * 注意: 这个正则必须包含两个捕获(即两对小括号), 第二个捕获字符串用于逻辑判断

diff --git a/packages/plugin-compiler/src/parsers/scriptParserPlugin.ts b/packages/plugin-compiler/src/parsers/scriptParserPlugin.ts
@@ -17,7 +17,8 @@ import {
   CompilerUserConfig,
   COMPILE_COMMAND_NAME,
   GlobalObjectTransformTypes,
-  MOR_RUNTIME_PACKAGE_REGEXP
+  MOR_RUNTIME_PACKAGE_REGEXP,
+  RUNTIME_SOURCE_TYPES
 } from '../constants'
 
 const EntryBuilderMap = new WeakMap<Runner, EntryBuilderHelpers>()
@@ -300,7 +301,9 @@ export class ScriptParserPlugin implements Plugin {
           [
             ...node.arguments,
             factory.createStringLiteral(
-              options.userConfig.sourceType === SourceTypes.alipay ? 'a' : 'w'
+              options.userConfig.sourceType === SourceTypes.alipay
+                ? RUNTIME_SOURCE_TYPES.alipay
+                : RUNTIME_SOURCE_TYPES.wechat
             )
           ]
         )
@@ -443,8 +446,8 @@ export class ScriptParserPlugin implements Plugin {
             args.push(
               factory.createStringLiteral(
                 options?.userConfig?.sourceType === SourceTypes.alipay
-                  ? 'a'
-                  : 'w'
+                  ? RUNTIME_SOURCE_TYPES.alipay
+                  : RUNTIME_SOURCE_TYPES.wechat
               )
             )
           }

diff --git a/packages/plugin-compiler/src/plugins/runtimeInjectPlugin.ts b/packages/plugin-compiler/src/plugins/runtimeInjectPlugin.ts
@@ -16,7 +16,8 @@ import {
   CompilerUserConfig,
   COMPILE_COMMAND_NAME,
   CustomLoaderOptions,
-  MOR_RUNTIME_PACKAGE_REGEXP
+  MOR_RUNTIME_PACKAGE_REGEXP,
+  RUNTIME_SOURCE_TYPES
 } from '../constants'
 
 // 运行时引用替换
@@ -153,6 +154,7 @@ export class RuntimeInjectPlugin implements Plugin {
           // 处理 app/page/component/api 的注入
           if (matched[2]) {
             fileContent = this.tryReplaceFileContentByType(
+              sourceType,
               fileInfo.path,
               fileContent,
               matched[2] as RUMTIME_REPLACE_TYPE,
@@ -177,6 +179,7 @@ export class RuntimeInjectPlugin implements Plugin {
    * @returns 替换后的文件内容
    */
   tryReplaceFileContentByType(
+    sourceType: string,
     filePath: string,
     fileContent: string,
     replaceType: RUMTIME_REPLACE_TYPE,
@@ -206,8 +209,19 @@ export class RuntimeInjectPlugin implements Plugin {
       imports.push(
         `var ${replaceType}SourceRuntime = require('${sourceRuntimes[replaceType]}')`
       )
+
+      // 需要检查 sourceType 和运行时 Component 及 Page 的 sourceType 是否一致
+      // 如果不一致则不生效该该逻辑。原因：部分情况下一个项目可能会出现 wPage 和 aPage
+      // 或 wComponent 和 aComponent 混用的情况，这时候，运行时抹平代码会产生干扰，如，
+      // 支付宝转微信会自动开启样式共享，但是如果项目中同时存在微信原生 DSL，那么会导致按照
+      // 原生写法的组件也被开启样式共享，从而可能引发样式冲突
+      let invokeCondition = ''
+      if (replaceType === 'component' || replaceType === 'page') {
+        invokeCondition = `'${RUNTIME_SOURCE_TYPES[sourceType]}' === sourceType && `
+      }
+
       invokes.push(
-        `${replaceType}SourceRuntime.${invokeFunctionName}(${argName})`
+        `${invokeCondition}${replaceType}SourceRuntime.${invokeFunctionName}(${argName})`
       )
     }