feat(compiler & runtime): web-pro 兼容适配

lerna.json

@@ -20,7 +20,8 @@
       "allowBranch": [
         "main",
         "beta",
-        "next"
+        "next",
+        "alpha"
       ],
       "message": "chore(release): publish packages"
     }

packages/plugin-compiler/src/compile.ts

@@ -37,7 +37,12 @@ function compileIndependentSubpackages(
 
   // 仅在 bundle 模式下 以及 编译目标不是 web 时提供独立分包的编译支持
   // 非 bundle 模式可以利用, 各个小程序 IDE 本身提供的独立分包编译
-  if (userConfig.compileMode !== 'bundle' || userConfig.target === 'web') return
+  if (
+    userConfig.compileMode !== 'bundle' ||
+    userConfig.target === 'web' ||
+    userConfig.target === 'web-pro'
+  )
+    return
 
   let independentSubpackages: Map<string, ISubPackageConfig> = new Map()
   let independentRunners: RunnerInstanceMap = new Map()
@@ -159,6 +164,7 @@ function compileWorkers(
   if (
     userConfig.compileMode !== 'bundle' ||
     userConfig.target === 'web' ||
+    userConfig.target === 'web-pro' ||
     userConfig.compileType !== 'miniprogram'
   ) {
     return

packages/plugin-compiler/src/compilerPlugins.ts

@@ -244,6 +244,11 @@ export interface CompilerPlugin {
    * 模版节点和属性自定义处理
    */
   templateProcessor: CompilerTemplateProcessor
+  /**
+   * 自定义模版的渲染生成函数(即自定义 posthtml render)
+   */
+  customTemplateRender?: (tree?, options?) => string
+
   /**
    * 获取运行时相关的文件地址
    */
@@ -270,7 +275,8 @@ export const Targets = [
   qqCompiler.target,
   taobaoCompiler.target,
   dingdingCompiler.target,
-  webCompiler.target
+  webCompiler.target,
+  'web-pro'
 ] as const
 
 // 插件中支持的所有文件类型
@@ -318,6 +324,7 @@ const PLUGIN_PROPS = [
   'isSupportSjsContent',
   'templateDirectives',
   'templateProcessor',
+  'customTemplateRender',
   'getRuntimeFiles',
   'Plugin'
 ]

packages/plugin-compiler/src/config.ts

@@ -190,7 +190,6 @@ export function applyDefaults(
   } = userConfig
 
   const composedPlugins = getComposedCompilerPlugins()
-
   // 设置默认的 globalObject
   userConfig.globalObject =
     userConfig.globalObject ?? composedPlugins.globalObject[target]
@@ -590,7 +589,6 @@ export async function buildWebpackConfig(
     globalNameSuffix
   } = userConfig
   const targetDescription = composedPlugins.targetDescription[target]
-
   // 显示源码目录和输出目录
   const srcDirs: string[] = []
   srcPaths.forEach(function (src) {
@@ -720,11 +718,12 @@ export async function buildWebpackConfig(
   // 插件的 main 文件需要使用
   chain.output.enabledLibraryTypes(['commonjs', 'commonjs2', 'commonjs-module'])
 
+  const isWeb = target === 'web' || target === 'web-pro'
   // 非 web 构建, 关闭 asyncChunks
-  if (target !== 'web') {
+  if (!isWeb) {
     chain.output.asyncChunks(false)
   }
-
+  // 开启 watch
   // 是否开启 watch
   chain.watch(userConfig.watch)
   // 设置 watch 忽略文件夹
@@ -1227,6 +1226,8 @@ export async function buildWebpackConfig(
   const singleTags = composedPlugins['templateSingleTagNames'][target] || []
   const closingSingleTag =
     composedPlugins['templateSingleTagClosingType']?.[target]
+  // 查询是否有编译插件自定义模版渲染函数，如果有的话优先使用自定义的 render
+  const customTemplateRender = composedPlugins['customTemplateRender']?.[target]
   // wxml/axml 支持
   // prettier-ignore
   chain.module
@@ -1235,7 +1236,7 @@ export async function buildWebpackConfig(
       .type('asset/resource').generator(generatorOptions)
       .use('postprocess').loader(LOADERS.postprocess).options(commonOptions).end()
       .use('template').loader(LOADERS.template).options({
-        ...commonOptions, singleTags, closingSingleTag
+        ...commonOptions, singleTags, closingSingleTag, customTemplateRender
       }).end()
       .use('preprocess')
         .loader(LOADERS.preprocess)

packages/plugin-compiler/src/constants.ts

@@ -178,7 +178,7 @@ export const TS_REGEXP = /\.m?ts$/
 export const SCRIPT_REGEXP = /\.m?js$/
 export const TEMPLATE_REGEXP = /\.(wx|ax)ml$/
 export const SJS_REGEXP = /\.(sjs|wxs)$/
-export const STYLE_REGEXP = /\.(wx|ac)ss$/
+export const STYLE_REGEXP = /\.(wx|ac|c)ss$/
 export const JSON_REGEXP = /\.json(c|5)?$/
 export const NODE_MODULE_REGEXP = /[\\/]node_modules[\\/]/
 

packages/plugin-compiler/src/loaders/configLoader.ts

@@ -17,7 +17,7 @@ export default async function ConfigLoader(
 
   const options = this.getOptions()
   const { userConfig, entryBuilder, runner } = options
-  const { compileType, minimize } = userConfig || {}
+  const { compileType, minimize, target } = userConfig || {}
   let entry = entryBuilder.getEntryByFilePath(this.resourcePath)
 
   // 这里拿到的 this.resourcePath 可能和 entryBuilder 中记录的不一致
@@ -71,9 +71,9 @@ export default async function ConfigLoader(
     }
 
     const code = JSON.stringify(json, null, minimize ? 0 : 2)
-
+    const isWeb = target === 'web' || target === 'web-pro'
     // web 且 bundle 模式下不输出 json 文件
-    if (!(userConfig.target === 'web' && userConfig.compileMode === 'bundle')) {
+    if (!(isWeb && userConfig.compileMode === 'bundle')) {
       // 生成 json 文件
       this.emitFile(fullEntryName, code)
     }

packages/plugin-compiler/src/loaders/templateLoader.ts

@@ -11,16 +11,22 @@ export default async function TemplateLoader(
     CustomLoaderOptions & {
       singleTags: string[]
       closingSingleTag?: '' | 'slash' | 'tag'
+      customTemplateRender?: (tree?, options?) => string
     }
   >,
   fileContent: string
 ): Promise<void> {
   const cb = this.async()
-  const { userConfig, entryBuilder, runner, singleTags, closingSingleTag } =
-    this.getOptions()
+  const {
+    userConfig,
+    entryBuilder,
+    runner,
+    singleTags,
+    closingSingleTag,
+    customTemplateRender
+  } = this.getOptions()
 
   const entry = entryBuilder.getEntryByFilePath(this.resourcePath)
-
   const pluginInfo = {
     userConfig,
     loaderContext: this,
@@ -46,7 +52,8 @@ export default async function TemplateLoader(
       pluginInfo,
       singleTags,
       closingSingleTag,
-      parser
+      parser,
+      customTemplateRender
     )
   } catch (error) {
     return cb(error)

packages/plugin-compiler/src/parsers/configParserPlugin.ts

@@ -25,7 +25,7 @@ export class ConfigParserPlugin implements Plugin {
       const userConfig = runner.userConfig as CompilerUserConfig
 
       // 如果是转换为 web 则不做处理
-      if (userConfig.target === 'web') return
+      if (userConfig.target === 'web' || userConfig.target === 'web-pro') return
 
       // 是否需要注入全局组件, 判断条件如下
       // 1. 当编译模式为 小程序

packages/plugin-compiler/src/parsers/scriptParserPlugin.ts

@@ -75,7 +75,7 @@ export class ScriptParserPlugin implements Plugin {
         target
       } = runner.userConfig as CompilerUserConfig
 
-      const isWeb = target === 'web'
+      const isWeb = target === 'web' || target === 'web-pro'
 
       const morRuntimeDeps = this.checkApiOrCoreRuntimeDepExistance(runner)
 

packages/plugin-compiler/src/parsers/sjsParserPlugin.ts

@@ -39,9 +39,9 @@ export class SjsParserPlugin implements Plugin {
           // 如果源码平台和目标平台 模块类型一致 则不处理
           if (
             composedPlugins.compileModuleKind[target] !==
-            CompileModuleKind.CommonJS &&
+              CompileModuleKind.CommonJS &&
             composedPlugins.compileModuleKind[sourceType] !==
-            composedPlugins.compileModuleKind[target]
+              composedPlugins.compileModuleKind[target]
           ) {
             transformers.before.unshift(cjsToEsmTransformer())
           }

packages/plugin-compiler/src/parsers/styleParserPlugin.ts

@@ -32,7 +32,7 @@ export class StyleParserPlugin implements Plugin {
 
       // 转 web 模式下, css 中的引用会被 css-loader 自动处理
       // 无需手动处理
-      if (target === 'web') return
+      if (target === 'web' || target === 'web-pro') return
 
       const isSubpackageOrPlugin = compileType !== CompileTypes.miniprogram
 

packages/plugin-compiler/src/parsers/templateParserPlugin.ts

@@ -125,6 +125,7 @@ export class TemplateParserPlugin implements Plugin {
         // 判断是否要处理引用路径，转端情况下，文件后缀会被替换为目标平台的文件后缀
         const needToProcessImportOrInclude =
           target !== 'web' &&
+          target !== 'web-pro' &&
           (fileContent.includes('import') || fileContent.includes('include'))
 
         if (
@@ -441,7 +442,10 @@ export class TemplateParserPlugin implements Plugin {
     }
 
     // 转 web 时不替换文件名称，确保原文件可以被正常加载
-    if (options.userConfig.target === 'web') {
+    if (
+      options.userConfig.target === 'web' ||
+      options.userConfig.target === 'web-pro'
+    ) {
       shouldReplaceSjsFileImportPath = false
     }
 

packages/plugin-compiler/src/plugins/generateComposedAppJsonFilePlugin.ts

@@ -159,7 +159,8 @@ export class GenerateComposedAppJsonFilePlugin implements Plugin {
   // 是否忽略当前插件逻辑
   shouldIgnorePlugin() {
     const userConfig = this.runner.userConfig as CompilerUserConfig
-    if (userConfig.target === 'web') return true
+    if (userConfig.target === 'web' || userConfig.target === 'web-pro')
+      return true
     if (userConfig.generateAppJSONScript === false) return true
     return false
   }

packages/plugin-compiler/src/plugins/injectGetAppPlugin.ts

@@ -133,7 +133,7 @@ export class InjectGetAppPlugin implements Plugin {
     if (compileType === CompileTypes.miniprogram) return
 
     // web 模式下禁用该插件
-    if (target === 'web') return
+    if (target === 'web' || target === 'web-pro') return
 
     const composedPlugins = getComposedCompilerPlugins()
     const globalObject = composedPlugins.globalObject[target]

packages/plugin-compiler/src/plugins/moduleSharingAndConsumingPlugin.ts

@@ -175,7 +175,7 @@ export class ModuleSharingAndConsumingPlugin implements Plugin {
     // 仅 bundle 模式下生效
     if (compileMode !== CompileModes.bundle) return false
     // web 模式下禁用该插件
-    if (target === 'web') return false
+    if (target === 'web' || target === 'web-pro') return false
     return true
   }
 

packages/plugin-compiler/src/plugins/optimizeSplitChunksPlugin.ts

@@ -59,7 +59,7 @@ export class OptimizeSplitChunksPlugin {
       // 仅 bundle 模式下生效
       if (compileMode !== CompileModes.bundle) return
       // web 模式下禁用该插件
-      if (target === 'web') return
+      if (target === 'web' || target === 'web-pro') return
 
       // 每次 entryBuilder 完成 build 之后触发 splitChunks 选项更新
       runner.hooks.afterBuildEntries.tap(this.name, (entries) => {

packages/plugin-compiler/src/transformers/templateTransformer.ts

@@ -12,22 +12,24 @@ export async function templateTransformer(
   options: FileParserOptions,
   singleTags: string[],
   closingSingleTag?: '' | 'slash' | 'tag',
-  parser?: PostHtmlCustomPlugin
+  parser?: PostHtmlCustomPlugin,
+  customTemplateRender?: (tree?, options?) => string
 ): Promise<string> {
   const ph = posthtml()
 
   if (parser) ph.use(async (node) => await parser(node, options))
 
-  return (
-    await ph.process(fileContent, {
-      // 并开启无值属性的识别
-      recognizeNoValueAttribute: true,
-      recognizeSelfClosing: true,
-      closingSingleTag: closingSingleTag ?? 'slash',
-      // 0 代表  smart quote, 自动判断 " 或 '
-      quoteStyle: 0,
-      replaceQuote: false,
-      singleTags
-    })
-  ).html
+  const phOptions: Record<string, any> = {
+    // 并开启无值属性的识别
+    recognizeNoValueAttribute: true,
+    recognizeSelfClosing: true,
+    closingSingleTag: closingSingleTag ?? 'slash',
+    // 0 代表  smart quote, 自动判断 " 或 '
+    quoteStyle: 0,
+    replaceQuote: false,
+    singleTags
+  }
+  if (typeof customTemplateRender === 'function')
+    phOptions.render = customTemplateRender
+  return (await ph.process(fileContent, phOptions)).html
 }

packages/runtime-mini/CHANGELOG.md

@@ -31,8 +31,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-
-
 ## [1.0.95-beta.0](https://github.com/eleme/morjs/compare/v1.0.94...v1.0.95-beta.0) (2024-01-15)
 
 

packages/runtime-web/src/components/src/api/ui/map/map.ts

@@ -50,7 +50,6 @@ const transformTigaTag = (str) => {
     )
     .replace(/<(\s+)?(box|text|image)/g, ($1, $2, $3) => `<tiga-map-${$3}`)
 }
-
 export default class Map extends BaseElement {
   mapId = 'map-' + uuid()
   // 对应高德地图中 setFitView 方法中的 avoid 参数

packages/runtime-web/src/components/src/form/slider.ts

@@ -261,11 +261,10 @@ export default class Slider extends BaseElement implements IFormComponent {
     }, 0)
   }
 
-
   attributeChangedCallback(name, oldVal, newVal) {
     super.attributeChangedCallback(name, oldVal, newVal)
 
-    if (name === 'value' && oldVal!== newVal) {
+    if (name === 'value' && oldVal !== newVal) {
       this._init()
     }
   }