@mpxjs/webpack-plugin 2.9.69 → 2.9.70-alpha.0

package/lib/template-compiler/compiler.js

@@ -15,7 +15,7 @@ const { isNonPhrasingTag } = require('../utils/dom-tag-config')
 const setBaseWxml = require('../runtime-render/base-wxml')
 const { parseExp } = require('./parse-exps')
 const shallowStringify = require('../utils/shallow-stringify')
-const { isReact, isWeb } = require('../utils/env')
+const { isReact, isWeb, isTenon } = require('../utils/env')
 
 const no = function () {
   return false
@@ -725,7 +725,7 @@ function parse (template, options) {
         stack.push(element)
       } else {
         element.unary = true
-        closeElement(element, meta, options)
+        closeElement(element, options, meta)
       }
     },
 
@@ -740,7 +740,7 @@ function parse (template, options) {
         // pop stack
         stack.pop()
         currentParent = stack[stack.length - 1]
-        closeElement(element, meta, options)
+        closeElement(element, options, meta)
       }
     },
 
@@ -765,7 +765,7 @@ function parse (template, options) {
           parent: currentParent
         }
         children.push(el)
-        runtimeCompile ? processTextDynamic(el) : processText(el)
+        runtimeCompile ? processTextDynamic(el) : processText(el, options, meta)
       }
     },
     comment: function comment (text) {
@@ -1164,7 +1164,7 @@ function processEventReact (el) {
             configs: []
           }
         }
-        eventConfigMap[type].configs.push(Object.assign({ name }, parsedFunc))
+        eventConfigMap[type].configs.push(Object.assign({ name, value }, parsedFunc))
       }
     }
   })
@@ -1205,26 +1205,31 @@ function processEventReact (el) {
 
   // let wrapper
   for (const type in eventConfigMap) {
-    let { configs } = eventConfigMap[type]
-    configs.forEach(({ name }) => {
-      if (name) {
-        // 清空原始事件绑定
-        let has
-        do {
-          has = getAndRemoveAttr(el, name).has
-        } while (has)
-      }
-    })
-    configs = configs.map((item) => {
-      return item.expStr
-    })
-    const value = `{{(e)=>this.__invoke(e, [${configs}])}}`
-    addAttrs(el, [
-      {
-        name: type,
-        value
-      }
-    ])
+    const { configs } = eventConfigMap[type]
+    if (!configs.length) continue
+    const needBind = configs.length > 1 || configs[0].hasArgs
+    if (needBind) {
+      configs.forEach(({ name }) => {
+        if (name) {
+          // 清空原始事件绑定
+          let has
+          do {
+            has = getAndRemoveAttr(el, name).has
+          } while (has)
+        }
+      })
+      const value = `{{(e)=>this.__invoke(e, [${configs.map(item => item.expStr)}])}}`
+      addAttrs(el, [
+        {
+          name: type,
+          value
+        }
+      ])
+    } else {
+      const { name, value } = configs[0]
+      modifyAttr(el, name, `{{${value}}}`)
+    }
+
     // 非button的情况下，press/longPress时间需要包裹TouchableWithoutFeedback进行响应，后续可支持配置
     // if ((type === 'press' || type === 'longPress') && el.tag !== 'mpx-button') {
     //   if (!wrapper) {
@@ -2036,7 +2041,7 @@ function postProcessIfReact (el) {
   }
 }
 
-function processText (el) {
+function processText (el, options, meta) {
   if (el.type !== 3 || el.isComment) {
     return
   }
@@ -2046,17 +2051,32 @@ function processText (el) {
   }
   el.text = parsed.val
   if (isReact(mode)) {
-    processWrapTextReact(el)
+    processWrapTextReact(el, options, meta)
   }
 }
 
-// RN中文字需被Text包裹
-function processWrapTextReact (el) {
-  const parentTag = el.parent.tag
+// RN中裸文字需被Text包裹
+// 为了批量修改Text默认属性，如allowFontScaling，使用mpx-simple-text进行包裹
+function processWrapTextReact (el, options, meta) {
+  const parent = el.parent
+  const parentTag = parent.tag
   if (parentTag !== 'mpx-text' && parentTag !== 'Text' && parentTag !== 'wxs') {
-    const wrapper = createASTElement('Text')
+    const wrapper = createASTElement('mpx-simple-text')
+    wrapper.isBuiltIn = true
+    const dataSetAttrs = []
+    parent.attrsList.forEach(({ name, value }) => {
+      if (/^data-/.test(name)) {
+        dataSetAttrs.push({
+          name,
+          value
+        })
+      }
+    })
+    addAttrs(wrapper, dataSetAttrs)
     replaceNode(el, wrapper, true)
     addChild(wrapper, el)
+    processBuiltInComponents(wrapper, meta)
+    processAttrs(wrapper, options)
   }
 }
 
@@ -2074,7 +2094,7 @@ function processWrapTextReact (el) {
 // }
 
 function injectWxs (meta, module, src) {
-  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode)) {
+  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode) || isTenon(mode)) {
     return
   }
 
@@ -2361,12 +2381,11 @@ function getVirtualHostRoot (options, meta) {
           {
             name: 'class',
             value: `${MPX_ROOT_VIEW} host-${moduleId}`
+          },
+          {
+            name: 'ishost',
+            value: '{{true}}'
           }
-          // todo 运行时通过root标识确定是否合并rootProps
-          // {
-          //   name: 'is-root',
-          //   value: '{{true}}'
-          // }
         ])
         processElement(rootView, rootView, options, meta)
         return rootView
@@ -2612,6 +2631,15 @@ function processElement (el, root, options, meta) {
     processComponentGenericsWeb(el, options, meta)
     return
   }
+  if (mode === 'tenon') {
+    // 收集内建组件
+    processBuiltInComponents(el, meta)
+    // 预处理代码维度条件编译
+    processIfWeb(el)
+    // processWebExternalClassesHack(el, options)
+    // processComponentGenericsForWeb(el, options, meta)
+    return
+  }
 
   if (isReact(mode)) {
     const pass = isReactComponent(el, options)
@@ -2663,11 +2691,11 @@ function processElement (el, root, options, meta) {
   processAttrs(el, options)
 }
 
-function closeElement (el, meta, options) {
+function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
 
-  if (isWeb(mode)) {
+  if (isWeb(mode) || isTenon(mode)) {
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
@@ -2800,7 +2828,6 @@ function serialize (root) {
           result += node.text
         }
       }
-
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
           result += '<' + node.tag

package/lib/template-compiler/gen-node-react.js

@@ -19,7 +19,7 @@ function genFor (node) {
   node.forProcessed = true
   const index = node.for.index || 'index'
   const item = node.for.item || 'item'
-  return `_i(${node.for.exp}, function(${item},${index}){return ${genNode(node)}})`
+  return `this.__iter(${node.for.exp}, function(${item},${index}){return ${genNode(node)}})`
 }
 
 const s = JSON.stringify
@@ -57,7 +57,7 @@ function genNode (node) {
           }, {})
           if (node.slot) {
             const { name, slot } = node.slot
-            exp += `__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
+            exp += `this.__getSlot(${name ? s(name) : ''}${slot ? `, ${s(slot)}` : ''})`
           } else {
             exp += `createElement(${`getComponent(${node.is || s(node.tag)})`}`
             if (node.attrsList.length) {

package/lib/tenon/index.js

@@ -0,0 +1,117 @@
+const async = require('async')
+const processJSON = require('./processJSON')
+// const processMainScript = require('./processMainScript')
+const processTemplate = require('./processTemplate')
+const processStyles = require('./processStyles')
+const processScript = require('./processScript')
+const RecordLoaderContentDependency = require('../dependencies/RecordLoaderContentDependency')
+const {stringifyRequest} = require('./script-helper')
+const addQuery = require('../utils/add-query')
+const parseRequest = require('../utils/parse-request')
+
+
+
+module.exports = function ({
+  parts,
+  jsonContent,
+  loaderContext,
+  pagesMap,
+  componentsMap,
+  queryObj,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  hasScoped,
+  hasComment,
+  isNative,
+  usingComponentsInfo,
+  componentGenerics,
+  autoScope,
+  callback
+}) {
+
+  let output = ''
+
+
+  const mpx = loaderContext.getMpx()
+  // const hasComment = parts.template && parts.template.attrs && parts.template.attrs.comments
+  // const isNative = false
+  const mode = mpx.mode
+  // const srcMode = mpx.srcMode
+  const env = mpx.env
+  const defs = mpx.defs
+  const resolveMode = mpx.resolveMode
+  // const pagesMap = mpx.pagesMap
+  const projectRoot = mpx.projectRoot
+
+  // 通过RecordLoaderContentDependency和loaderContentCache确保子request不再重复生成loaderContent
+  const cacheContent = mpx.loaderContentCache.get(loaderContext.resourcePath)
+  if (cacheContent) return callback(null, cacheContent)
+  return async.waterfall([
+    (callback) => {
+      async.parallel([
+        (callback) => {
+          processTemplate(parts.template, {
+            loaderContext,
+            hasScoped,
+            hasComment,
+            isNative,
+            srcMode,
+            moduleId,
+            ctorType,
+            usingComponentsInfo,
+            componentGenerics
+          }, callback)
+        },
+        (callback) => {
+          processStyles(parts.styles, {
+            ctorType,
+            autoScope,
+            moduleId
+          }, callback)
+        },
+        (callback) => {
+          processJSON(jsonContent, {
+            mode,
+            env,
+            defs,
+            resolveMode,
+            loaderContext,
+            pagesMap,
+            pathHash: mpx.pathHash,
+            componentsMap,
+            projectRoot
+          }, callback)
+        }
+      ], (err, res) => {
+        callback(err, res)
+      })
+    },
+    ([templateRes, stylesRes, jsonRes], callback) => {
+      output += templateRes.output
+      output += stylesRes.output
+      output += jsonRes.output
+      processScript(parts.script, {
+        loaderContext,
+        ctorType,
+        srcMode,
+        moduleId,
+        isProduction,
+        componentGenerics,
+        jsonConfig: jsonRes.jsonObj,
+        outputPath: queryObj.outputPath || '',
+        builtInComponentsMap: templateRes.builtInComponentsMap,
+        localPagesMap: jsonRes.localPagesMap,
+        genericsInfo: templateRes.genericsInfo,
+        wxsModuleMap: templateRes.wxsModuleMap,
+        localComponentsMap: jsonRes.localComponentsMap
+      }, callback)
+    }
+  ], (err, scriptRes) => {
+    if (err) return callback(err)
+    output += scriptRes.output
+    loaderContext._module.addPresentationalDependency(new RecordLoaderContentDependency(loaderContext.resourcePath, output))
+    callback(null, output)
+  })
+}

package/lib/tenon/processJSON.js

@@ -0,0 +1,352 @@
+const async = require('async')
+const path = require('path')
+const JSON5 = require('json5')
+const loaderUtils = require('loader-utils')
+const parseRequest = require('../utils/parse-request')
+// const toPosix = require('../utils/to-posix')
+const addQuery = require('../utils/add-query')
+const parseComponent = require('../parser')
+const getJSONContent = require('../utils/get-json-content')
+const isUrlRequest = require('../utils/is-url-request')
+
+module.exports = function (jsonContent, options, rawCallback) {
+  const mode = options.mode
+  const env = options.env
+  const defs = options.defs
+  const loaderContext = options.loaderContext
+  const resolveMode = options.resolveMode
+  // const pagesMap = options.pagesMap
+  const componentsMap = options.componentsMap
+  const projectRoot = options.projectRoot
+  const pathHash = options.pathHash
+  const localPagesMap = {}
+  const localComponentsMap = {}
+  const buildInfo = loaderContext._module.buildInfo
+
+  const output = '/* json */\n'
+  let jsonObj = {}
+  let tabBarMap
+  let tabBarStr
+  const context = loaderContext.context
+
+  // const emitWarning = (msg) => {
+  //   loaderContext.emitWarning(
+  //     new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
+  //   )
+  // }
+
+  // const emitError = (msg) => {
+  //   this.emitError(
+  //     new Error('[json compiler][' + this.resource + ']: ' + msg)
+  //   )
+  // }
+
+  // const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
+
+  const callback = (err) => {
+    return rawCallback(err, {
+      output,
+      jsonObj,
+      localPagesMap,
+      localComponentsMap,
+      tabBarMap,
+      tabBarStr
+    })
+  }
+
+  if (!jsonContent) {
+    return callback()
+  }
+  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
+  try {
+    jsonObj = JSON5.parse(jsonContent)
+  } catch (e) {
+    return callback(e)
+  }
+
+  const fs = loaderContext._compiler.inputFileSystem
+
+  const resolve = (context, request, callback) => {
+    // const { queryObj } = parseRequest(request)
+    // todo delete. parseRequest 不会返回 context 属性
+    // context = queryObj.context || context
+    return loaderContext.resolve(context, request, callback)
+  }
+
+  // const defaultTabbar = {
+  //   borderStyle: 'black',
+  //   position: 'bottom',
+  //   custom: false,
+  //   isShow: true
+  // }
+
+  // const processTabBar = (tabBar, callback) => {
+  //   if (tabBar) {
+  //     tabBar = Object.assign({}, defaultTabbar, tabBar)
+  //     tabBarMap = {}
+  //     jsonObj.tabBar.list.forEach(({ pagePath }) => {
+  //       tabBarMap[pagePath] = true
+  //     })
+  //     tabBarStr = JSON.stringify(tabBar)
+  //     tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
+  //       if (isUrlRequest($2, projectRoot)) {
+  //         return `"${$1}":require(${stringifyRequest(loaderUtils.urlToRequest($2, projectRoot))})`
+  //       }
+  //       return matched
+  //     })
+  //   }
+  //   callback()
+  // }
+
+  const processPackages = (packages, context, callback) => {
+    if (packages) {
+      async.forEach(packages, (packagePath, callback) => {
+        const parsed = parseRequest(packagePath)
+        const queryObj = parsed.queryObj
+        // readFile无法处理query
+        packagePath = parsed.resourcePath
+        async.waterfall([
+          (callback) => {
+            resolve(context, packagePath, (err, result) => {
+              callback(err, result)
+            })
+          },
+          (result, callback) => {
+            loaderContext.addDependency(result)
+            fs.readFile(result, (err, content) => {
+              if (err) return callback(err)
+              callback(err, result, content.toString('utf-8'))
+            })
+          },
+          (result, content, callback) => {
+            const filePath = result
+            const extName = path.extname(filePath)
+            if (extName === '.mpx' || extName === '.vue') {
+              const parts = parseComponent(content, {
+                filePath,
+                needMap: loaderContext.sourceMap,
+                mode,
+                defs,
+                env
+              })
+              getJSONContent(parts.json || {}, result, loaderContext, (err, content) => {
+                callback(err, result, content)
+              })
+            } else {
+              callback(null, result, content)
+            }
+          },
+          (result, content, callback) => {
+            try {
+              content = JSON5.parse(content)
+            } catch (err) {
+              return callback(err)
+            }
+
+            const processSelfQueue = []
+            const context = path.dirname(result)
+
+            if (content.pages) {
+              const tarRoot = queryObj.root
+              if (tarRoot) {
+                delete queryObj.root
+                const subPackage = {
+                  tarRoot,
+                  pages: content.pages,
+                  ...queryObj
+                }
+                processSelfQueue.push((callback) => {
+                  processSubPackage(subPackage, context, callback)
+                })
+              } else {
+                processSelfQueue.push((callback) => {
+                  processPages(content.pages, '', '', context, callback)
+                })
+              }
+            }
+            if (content.packages) {
+              processSelfQueue.push((callback) => {
+                processPackages(content.packages, context, callback)
+              })
+            }
+            if (processSelfQueue.length) {
+              async.parallel(processSelfQueue, callback)
+            } else {
+              callback()
+            }
+          }
+        ], callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  // const getPageName = (resourcePath, ext) => {
+  //   const baseName = path.basename(resourcePath, ext)
+  //   return path.join('pages', baseName + pathHash(resourcePath), baseName)
+  // }
+
+  const processPages = (pages, srcRoot = '', tarRoot = '', context, callback) => {
+    if (pages) {
+      context = path.join(context, srcRoot)
+      async.forEach(pages, (page, callback) => {
+        let pagePath = page
+        if (typeof page !== 'string') {
+          pagePath = page.src
+        }
+        // if (!isUrlRequest(page, projectRoot)) return callback()
+        // if (resolveMode === 'native') {
+        //   page = loaderUtils.urlToRequest(page, projectRoot)
+        // }
+        // resolve(context, page, (err, resource) => {
+        //   if (err) return callback(err)
+        //   const { resourcePath, queryObj } = parseRequest(resource)
+        //   const ext = path.extname(resourcePath)
+        //   // 获取pageName
+        //   let pageName
+        //   if (aliasPath) {
+        //     pageName = toPosix(path.join(tarRoot, aliasPath))
+        //     // 判断 key 存在重复情况直接报错
+        //     for (let key in pagesMap) {
+        //       if (pagesMap[key] === pageName && key !== resourcePath) {
+        //         emitError(`Current page [${resourcePath}] registers a conflict page path [${pageName}] with existed page [${key}], which is not allowed, please rename it!`)
+        //         return callback()
+        //       }
+        //     }
+        //   } else {
+        //     const relative = path.relative(context, resourcePath)
+        //     if (/^\./.test(relative)) {
+        //       // 如果当前page不存在于context中，对其进行重命名
+        //       pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+        //       emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+        //     } else {
+        //       pageName = toPosix(path.join(tarRoot, /^(.*?)(\.[^.]*)?$/.exec(relative)[1]))
+        //       // 如果当前page与已有page存在命名冲突，也进行重命名
+        //       for (let key in pagesMap) {
+        //         // 此处引入pagesMap确保相同entry下路由路径重复注册才报错，不同entry下的路由路径重复则无影响
+        //         if (pagesMap[key] === pageName && key !== resourcePath && pagesMap[key] === loaderContext.resourcePath) {
+        //           const pageNameRaw = pageName
+        //           pageName = toPosix(path.join(tarRoot, getPageName(resourcePath, ext)))
+        //           emitWarning(`Current page [${resourcePath}] is registered with a conflict page path [${pageNameRaw}] which is already existed in system, the page path will be replaced with [${pageName}], use ?resolve to get the page path and navigate to it!`)
+        //           break
+        //         }
+        //       }
+        //     }
+        //   }
+        //   if (pagesMap[resourcePath]) {
+        //     emitWarning(`Current page [${resourcePath}] which is imported from [${loaderContext.resourcePath}] has been registered in pagesMap already, it will be ignored, please check it and remove the redundant page declaration!`)
+        //     return callback()
+        //   }
+        // buildInfo.pagesMap = buildInfo.pagesMap || {}
+        // buildInfo.pagesMap[resourcePath] = pagesMap[resourcePath] = pageName
+        // pagesMap[resourcePath] = loaderContext.resourcePath
+        localPagesMap[pagePath] = page
+        //   callback()
+        // })
+        callback()
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackage = (subPackage, context, callback) => {
+    if (subPackage) {
+      const tarRoot = subPackage.tarRoot || subPackage.root || ''
+      const srcRoot = subPackage.srcRoot || subPackage.root || ''
+      if (!tarRoot) return callback()
+      processPages(subPackage.pages, srcRoot, tarRoot, context, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackages = (subPackages, context, callback) => {
+    if (subPackages) {
+      async.forEach(subPackages, (subPackage, callback) => {
+        processSubPackage(subPackage, context, callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processComponents = (components, context, callback) => {
+    if (components) {
+      async.forEachOf(components, (component, name, callback) => {
+        processComponent(component, name, context, callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processComponent = (component, name, context, callback) => {
+    if (!isUrlRequest(component, projectRoot)) return callback()
+
+    if (resolveMode === 'native') {
+      component = loaderUtils.urlToRequest(component, projectRoot)
+    }
+
+    resolve(context, component, (err, resource) => {
+      if (err) return callback(err)
+      const { resourcePath, queryObj } = parseRequest(resource)
+      const parsed = path.parse(resourcePath)
+      const componentId = parsed.name + pathHash(resourcePath)
+
+      buildInfo.packageName = 'main'
+      buildInfo.componentsMap = buildInfo.componentsMap || {}
+      buildInfo.componentsMap[resourcePath] = componentsMap[resourcePath] = componentId
+
+      localComponentsMap[name] = {
+        resource: addQuery(resource, { isComponent: true, componentId }),
+        async: queryObj.async
+      }
+      callback()
+    })
+  }
+
+  // const processGenerics = (generics, context, callback) => {
+  //   if (generics) {
+  //     async.forEachOf(generics, (generic, name, callback) => {
+  //       if (generic.default) {
+  //         processComponent(generic.default, `${name}default`, context, callback)
+  //       } else {
+  //         callback()
+  //       }
+  //     }, callback)
+  //   } else {
+  //     callback()
+  //   }
+  // }
+
+  async.parallel([
+    (callback) => {
+      if (jsonObj.pages && jsonObj.pages[0]) {
+        // 标记首页
+        if (typeof jsonObj.pages[0] !== 'string') {
+          jsonObj.pages[0].src = addQuery(jsonObj.pages[0].src, { isFirst: true })
+        } else {
+          jsonObj.pages[0] = addQuery(jsonObj.pages[0], { isFirst: true })
+        }
+      }
+      processPages(jsonObj.pages, '', '', context, callback)
+    },
+    (callback) => {
+      processComponents(jsonObj.usingComponents, context, callback)
+    },
+    (callback) => {
+      processPackages(jsonObj.packages, context, callback)
+    },
+    (callback) => {
+      processSubPackages(jsonObj.subPackages || jsonObj.subpackages, context, callback)
+    }
+    // (callback) => {
+    //   processGenerics(jsonObj.componentGenerics, context, callback)
+    // },
+    // (callback) => {
+    //   processTabBar(jsonObj.tabBar, callback)
+    // }
+  ], callback)
+}