@mpxjs/webpack-plugin 2.8.49 → 2.8.51

package/lib/utils/dom-tag-config.js

@@ -0,0 +1,101 @@
+// These tag configs are shared between compiler-dom and runtime-dom, so they
+// must be extracted in shared to avoid creating a dependency between the two.
+const makeMap = require('./make-map')
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element
+const HTML_TAGS =
+  'html,body,base,head,link,meta,style,title,address,article,aside,footer,' +
+  'header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,' +
+  'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' +
+  'data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,' +
+  'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' +
+  'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' +
+  'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' +
+  'option,output,progress,select,textarea,details,dialog,menu,' +
+  'summary,template,blockquote,iframe,tfoot'
+
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
+const SVG_TAGS =
+  'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +
+  'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' +
+  'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' +
+  'feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +
+  'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' +
+  'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' +
+  'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' +
+  'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' +
+  'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
+  'text,textPath,title,tspan,unknown,use,view'
+
+const VOID_TAGS =
+  'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
+
+// HTML5 tags https://html.spec.whatwg.org/multipage/indices.html#elements-3
+// Phrasing Content https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+const isNonPhrasingTag = makeMap(
+  'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
+  'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
+  'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
+  'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
+  'title,tr,track'
+)
+
+const isRichTextTag = makeMap(
+  'a,abbr,address,article,aside,b,bdi,bdo,big,blockquote,br,caption,' +
+  'center,cite,code,col,colgroup,dd,del,div,dl,dt,em,fieldset,' +
+  'font,footer,h1,h2,h3,h4,h5,h6,header,hr,i,img,ins,label,legend,' +
+  'li,mark,nav,ol,p,pre,q,rt,ruby,s,section,small,span,strong,sub,sup,' +
+  'table,tbody,td,tfoot,th,thead,tr,tt,u,ul'
+)
+
+const isUnaryTag = makeMap(
+  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
+  'link,meta,param,source,track,wbr'
+)
+
+// https://developers.weixin.qq.com/miniprogram/dev/component/
+// 以后可能在框架中原生支持这些标签，所以需要进行判断
+const isNativeMiniTag = makeMap(
+  'cover-image,cover-view,match-media,movable-area,movable-view,' +
+  'page-container,root-portal,scroll-view,swiper,swiper-item,view,' +
+  'icon,progress,rich-text,text,button,checkbox,checkbox-group,editor,' +
+  'form,input,keyboard-accessory,label,picker,picker-view,' +
+  'picker-view-column,radio,radio-group,slider,switch,textarea,' +
+  'grid-view,list-view,share-element,snapshot,span,sticky-header,' +
+  'sticky-section,functional-page-navigator,navigator,audio,camera,' +
+  'channel-live,channel-video,image,live-player,live-pusher,video,' +
+  'voip-room,map,canvas,web-view,ad,ad-custom,official-account,' +
+  'open-data,native-component,aria-component,page-meta'
+)
+
+const isSpace = makeMap('ensp,emsp,nbsp')
+
+const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
+
+const isContHeight = makeMap('img,td,th,tr')
+
+const isContConRow = makeMap('td,th,tr')
+
+const isHTMLTag = makeMap(HTML_TAGS)
+
+const isSVGTag = makeMap(SVG_TAGS)
+
+const isVoidTag = makeMap(VOID_TAGS)
+
+// 是否为原始tag，包括 html tag 和小程序原生 tag
+const isOriginTag = (tag) => isHTMLTag(tag) || isSVGTag(tag) || isVoidTag(tag) || isNativeMiniTag(tag)
+
+module.exports = {
+  isOriginTag,
+  isHTMLTag,
+  isSVGTag,
+  isVoidTag,
+  isNonPhrasingTag,
+  isRichTextTag,
+  isUnaryTag,
+  isSpace,
+  isContWidth,
+  isContHeight,
+  isNativeMiniTag,
+  isContConRow
+}

package/lib/utils/make-map.js

@@ -0,0 +1,12 @@
+/**
+ * Make a map and return a function for checking if a key
+ * is in that map.
+ */
+module.exports = function makeMap (str, expectsLowerCase) {
+  const map = Object.create(null)
+  const list = str.split(',')
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true
+  }
+  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
+}

package/lib/utils/string.js

@@ -23,8 +23,14 @@ function capitalToHyphen (v) {
   return ret
 }
 
+// 删除空行
+function trimBlankRow (str) {
+  return str.replace(/^\s*[\r\n]/gm, '')
+}
+
 module.exports = {
   isCapital,
   isMustache,
-  capitalToHyphen
+  capitalToHyphen,
+  trimBlankRow
 }

package/lib/web/processJSON.js

@@ -9,8 +9,10 @@ const parseComponent = require('../parser')
 const getJSONContent = require('../utils/get-json-content')
 const resolve = require('../utils/resolve')
 const createJSONHelper = require('../json-compiler/helper')
+const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
 
 module.exports = function (json, {
   loaderContext,
@@ -26,6 +28,7 @@ module.exports = function (json, {
   const mpx = loaderContext.getMpx()
   const {
     mode,
+    srcMode,
     env,
     projectRoot
   } = mpx
@@ -75,12 +78,44 @@ module.exports = function (json, {
     })
   }
 
+  const { resourcePath } = parseRequest(loaderContext.resource)
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+
   if (!json) {
     return callback()
   }
   // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
   try {
     jsonObj = JSON5.parse(json.content)
+    // 处理runner
+    const rulesRunnerOptions = {
+      mode,
+      srcMode,
+      type: 'json',
+      waterfall: true,
+      warn: emitWarning,
+      error: emitError,
+      data: {
+        // polyfill global usingComponents & record globalComponents
+        globalComponents: mpx.usingComponents
+      }
+    }
+
+    if (!isApp) {
+      rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+    }
+
+    const rulesRunner = getRulesRunner(rulesRunnerOptions)
+
+    if (rulesRunner) {
+      rulesRunner(jsonObj)
+    }
+    if (isApp) {
+      // 收集全局组件
+      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
+      // 在 rulesRunner 运行后保存全局注册组件
+      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
+    }
   } catch (e) {
     return callback(e)
   }

package/lib/web/processScript.js

@@ -182,8 +182,10 @@ module.exports = function (script, {
             pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
           }
         }
-
-        if (pageCfg.isFirst) {
+        if (pagePath === jsonConfig.entryPagePath) {
+          firstPage = pagePath
+        }
+        if (!firstPage && pageCfg.isFirst) {
           firstPage = pagePath
         }
       })

package/lib/web/processTemplate.js

@@ -2,23 +2,7 @@ const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
-// const { matchCondition } = require('../utils/match-condition')
-
-function calculateRootEleChild (arr) {
-  if (!arr) {
-    return 0
-  }
-  return arr.reduce((total, item) => {
-    if (item.type === 1) {
-      if (item.tag === 'template') {
-        total += calculateRootEleChild(item.children)
-      } else {
-        total += 1
-      }
-    }
-    return total
-  }, 0)
-}
+const { matchCondition } = require('../utils/match-condition')
 
 module.exports = function (template, {
   loaderContext,
@@ -38,8 +22,9 @@ module.exports = function (template, {
     wxsContentMap,
     decodeHTMLText,
     externalClasses,
-    checkUsingComponents
-    // autoVirtualHostRules
+    checkUsingComponents,
+    proxyComponentEventsRules,
+    autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -72,6 +57,16 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
+
+        let proxyComponentEvents = null
+        for (const item of proxyComponentEventsRules) {
+          if (matchCondition(resourcePath, item)) {
+            const eventsRaw = item.events
+            proxyComponentEvents = Array.isArray(eventsRaw) ? eventsRaw : [eventsRaw]
+            break
+          }
+        }
+
         const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
@@ -101,9 +96,9 @@ module.exports = function (template, {
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics
-          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+          componentGenerics,
+          proxyComponentEvents,
+          hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
         if (meta.wxsModuleMap) {
           wxsModuleMap = meta.wxsModuleMap
@@ -123,18 +118,6 @@ module.exports = function (template, {
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
-        // 输出H5有多个root element时, 使用mpx-root-view标签包裹
-        // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-        if (root.tag === 'temp-node') {
-          const childLen = calculateRootEleChild(root.children)
-          if (childLen >= 2) {
-            root.tag = 'div'
-            templateCompiler.addAttrs(root, [{
-              name: 'class',
-              value: 'mpx-root-view'
-            }])
-          }
-        }
         return templateCompiler.serialize(root)
       }
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.49",
+  "version": "2.8.51",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -81,5 +81,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "b399e81951df7094fb0a494ae877bcf4e6a2985b"
+  "gitHead": "7b9523688cc1cf8077d8705e64ea5a742dccff13"
 }

package/lib/json-compiler/default-page.mpx

@@ -1,3 +0,0 @@
-<template>
-  <view>局部构建兜底页面</view>
-</template>