@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

package/lib/native-loader.js

@@ -1,29 +1,39 @@
 const path = require('path')
 const JSON5 = require('json5')
 const parseRequest = require('./utils/parse-request')
+const loaderUtils = require('loader-utils')
 const config = require('./config')
 const createHelpers = require('./helpers')
-const getJSONContent = require('./utils/get-json-content')
+const InjectDependency = require('./dependency/InjectDependency')
+const addQuery = require('./utils/add-query')
+const mpxJSON = require('./utils/mpx-json')
 const async = require('async')
-const { matchCondition } = require('./utils/match-condition')
+const matchCondition = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
-const { JSON_JS_EXT } = require('./utils/const')
+const getMainCompilation = require('./utils/get-main-compilation')
 
 module.exports = function (content) {
   this.cacheable()
 
-  const mpx = this.getMpx()
+  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = mainCompilation.__mpx__
   if (!mpx) {
     return content
   }
 
   const nativeCallback = this.async()
+
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
+  const options = Object.assign({}, mpx.loaderOptions, loaderUtils.getOptions(this))
+
   const filePath = this.resourcePath
+
   const moduleId = 'm' + mpx.pathHash(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
+  const projectRoot = mpx.projectRoot
   const mode = mpx.mode
+  const defs = mpx.defs
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
@@ -31,12 +41,14 @@ module.exports = function (content) {
   const componentsMap = mpx.componentsMap[packageName]
   const parsed = path.parse(resourcePath)
   const resourceName = path.join(parsed.dir, parsed.name)
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+  const isApp = !pagesMap[resourcePath] && !componentsMap[resourcePath]
   const srcMode = localSrcMode || globalSrcMode
+  const fs = this._compiler.inputFileSystem
   const typeExtMap = config[srcMode].typeExtMap
   const typeResourceMap = {}
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
+  const EXT_MPX_JSON = '.json.js'
   const CSS_LANG_EXT_MAP = {
     less: '.less',
     stylus: '.styl',
@@ -44,18 +56,40 @@ module.exports = function (content) {
     scss: '.scss'
   }
 
-  let useJSONJS = false
+  let useMPXJSON = false
   let cssLang = ''
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
   const hasComment = false
   const isNative = true
 
+  const tryEvalMPXJSON = (callback) => {
+    const { rawResourcePath } = parseRequest(typeResourceMap['json'])
+    const _src = rawResourcePath
+    this.addDependency(_src)
+    fs.readFile(_src, (err, raw) => {
+      if (err) {
+        callback(err)
+      } else {
+        try {
+          const source = raw.toString('utf-8')
+          const text = mpxJSON.compileMPXJSONText({ source, defs, filePath: _src })
+          callback(null, text)
+        } catch (e) {
+          callback(e)
+        }
+      }
+    })
+  }
+
   const checkFileExists = (extName, callback) => {
-    this.resolve(parsed.dir, resourceName + extName, callback)
+    this.resolve(parsed.dir, resourceName + extName, (err, result) => {
+      err = null
+      callback(err, result)
+    })
   }
 
   function checkCSSLangFiles (callback) {
-    const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
+    const langs = mpx.nativeOptions.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
       if (!CSS_LANG_EXT_MAP[lang]) {
@@ -65,7 +99,7 @@ module.exports = function (content) {
         if (!err && result) {
           results[i] = result
         }
-        callback()
+        callback(err)
       })
     }, function (err) {
       for (let i = 0; i < langs.length; i++) {
@@ -79,13 +113,14 @@ module.exports = function (content) {
     })
   }
 
-  function checkJSONJSFile (callback) {
-    checkFileExists(JSON_JS_EXT, (err, result) => {
+  function checkMPXJSONFile (callback) {
+    // checkFileExists(EXT_MPX_JSON, (err, result) => {
+    checkFileExists(EXT_MPX_JSON, (err, result) => {
       if (!err && result) {
         typeResourceMap.json = result
-        useJSONJS = true
+        useMPXJSON = true
       }
-      callback()
+      callback(err)
     })
   }
 
@@ -94,111 +129,138 @@ module.exports = function (content) {
     (callback) => {
       async.parallel([
         checkCSSLangFiles,
-        checkJSONJSFile
+        checkMPXJSONFile
       ], (err) => {
         callback(err)
       })
     },
     (callback) => {
       async.forEachOf(typeExtMap, (ext, key, callback) => {
-        // 检测到jsonjs或cssLang时跳过对应类型文件检测
-        if (typeResourceMap[key]) {
+        // 检测到mpxJson或cssLang时跳过对应类型文件检测
+        if ((key === 'json' && useMPXJSON) || (key === 'styles' && cssLang)) {
           return callback()
         }
         checkFileExists(ext, (err, result) => {
           if (!err && result) {
             typeResourceMap[key] = result
           }
-          callback()
+          callback(err)
         })
       }, callback)
     },
     (callback) => {
-      getJSONContent({
-        src: typeResourceMap.json,
-        useJSONJS
-      }, this, callback)
+      // 对原生写法增强json写法，可以用js来写json，尝试找.json.js文件，找不到用回json的内容
+      if (useMPXJSON) {
+        tryEvalMPXJSON(callback)
+      } else {
+        if (typeResourceMap['json']) {
+          // eslint-disable-next-line handle-callback-err
+          const { rawResourcePath } = parseRequest(typeResourceMap['json'])
+          fs.readFile(rawResourcePath, (err, raw) => {
+            if (err) {
+              callback(err)
+            } else {
+              callback(null, raw.toString('utf-8'))
+            }
+          })
+        } else {
+          callback(null, '{}')
+        }
+      }
     }, (content, callback) => {
-      let json
+      let usingComponents = [].concat(Object.keys(mpx.usingComponents))
       try {
-        json = JSON5.parse(content)
+        let ret = JSON5.parse(content)
+        if (ret.usingComponents) {
+          fixUsingComponent(ret.usingComponents, mode)
+          usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
+        }
       } catch (e) {
-        return callback(e)
-      }
-      let usingComponents = Object.keys(mpx.usingComponents)
-      if (json.usingComponents) {
-        fixUsingComponent(json.usingComponents, mode)
-        usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
       const {
-        getRequire
-      } = createHelpers(loaderContext)
-
-      const getRequireByType = (type) => {
-        const src = typeResourceMap[type]
-        const part = { src }
-        const extraOptions = {
-          ...queryObj,
-          resourcePath
+        getRequireForSrc,
+        getNamedExportsForSrc
+      } = createHelpers({
+        loaderContext,
+        options,
+        moduleId,
+        hasScoped,
+        hasComment,
+        usingComponents,
+        srcMode,
+        isNative,
+        projectRoot
+      })
+
+      const getRequire = (type) => {
+        const localQuery = Object.assign({}, queryObj)
+        let src = typeResourceMap[type]
+        localQuery.resourcePath = resourcePath
+        if (type !== 'script') {
+          this.addDependency(src)
+        }
+        if (type === 'template' && isApp) {
+          return ''
+        }
+        if (type === 'json' && !useMPXJSON) {
+          localQuery.__component = true
         }
+        src = addQuery(src, localQuery, true)
+        const partsOpts = { src }
 
-        switch (type) {
-          case 'template':
-            if (isApp) return ''
-            Object.assign(extraOptions, {
-              hasScoped,
-              hasComment,
-              isNative,
-              moduleId,
-              usingComponents
-            })
-            break
-          case 'styles':
-            if (cssLang) part.lang = cssLang
-            Object.assign(extraOptions, {
-              moduleId,
-              scoped: hasScoped
-            })
-            break
-          case 'json':
-            if (useJSONJS) part.useJSONJS = true
-            break
+        if (type === 'script') {
+          return getNamedExportsForSrc(type, partsOpts)
         }
-        return getRequire(type, part, extraOptions)
+        if (type === 'styles') {
+          if (cssLang) {
+            partsOpts.lang = cssLang
+          }
+          if (hasScoped) {
+            return getRequireForSrc(type, partsOpts, 0, true)
+          }
+        }
+        return getRequireForSrc(type, partsOpts)
       }
 
       // 注入模块id及资源路径
-      let output = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+      let globalInjectCode = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
-        output += `global.currentResource = ${JSON.stringify(filePath)}\n`
+        globalInjectCode += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
 
       // 注入构造函数
       let ctor = 'App'
-      let ctorType = 'app'
       if (pagesMap[resourcePath]) {
-        ctorType = 'page'
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'
         }
       } else if (componentsMap[resourcePath]) {
         ctor = 'Component'
-        ctorType = 'component'
       }
-      output += `global.currentCtor = ${ctor}\n`
-      output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
+      globalInjectCode += `global.currentCtor = ${ctor}\n`
+      globalInjectCode += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
-      output += `global.currentResourceType = ${JSON.stringify(ctorType)}\n`
 
       if (srcMode) {
-        output += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`
+        globalInjectCode += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`
       }
 
+      if (!mpx.forceDisableInject) {
+        const dep = new InjectDependency({
+          content: globalInjectCode,
+          index: -3
+        })
+        this._module.addDependency(dep)
+      }
+
+      // 触发webpack global var 注入
+      let output = 'global.currentModuleId;\n'
+
       for (let type in typeResourceMap) {
-        output += `/* ${type} */\n${getRequireByType(type)}\n\n`
+        output += `/* ${type} */\n${getRequire(type)}\n\n`
       }
 
       callback(null, output)

package/lib/parser.js

@@ -6,7 +6,7 @@ const SourceMapGenerator = require('source-map').SourceMapGenerator
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 
-module.exports = (content, { filePath, needMap, mode, env }) => {
+module.exports = (content, { filePath, needMap, mode, defs, env }) => {
   // 缓存需要mode隔离，不同mode经过区块条件编译parseComponent得到的内容并不一致
   const cacheKey = hash(filePath + content + mode + env)
 
@@ -14,6 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   if (output) return JSON.parse(output)
   output = compiler.parseComponent(content, {
     mode,
+    defs,
     filePath,
     pad: 'line',
     env

package/lib/path-loader.js

@@ -0,0 +1,3 @@
+module.exports = function () {
+  return `module.exports = __mpx_resolve_path__(${JSON.stringify(this.resource)})`
+}

package/lib/platform/json/wx/index.js

@@ -246,7 +246,7 @@ module.exports = function getSpec ({ warn, error }) {
         jd: deletePath()
       },
       {
-        test: 'navigateToMiniProgramAppIdList|networkTimeout',
+        test: 'navigateToMiniProgramAppIdList|networkTimeout|permission',
         ali: deletePath(),
         jd: deletePath()
       },

package/lib/platform/template/normalize-component-rules.js

@@ -4,7 +4,7 @@ const runRules = require('../run-rules')
  * @desc 针对每一个组件(属性，event，指令等)执行规则判断
  * @params cfgs [{test: 'camera', props:[], event: []}] 组件配置列表
  * @params spec ../index.js中公共的spec
- */
+*/
 module.exports = function normalizeComponentRules (cfgs, spec) {
   return cfgs.map((cfg) => {
     const result = {}
@@ -25,8 +25,9 @@ module.exports = function normalizeComponentRules (cfgs, spec) {
           data
         }
         el.attrsList.forEach((attr) => {
+          let rAttr = runRules(spec.preAttrs, attr, options)
           const meta = {}
-          let rAttr = runRules(spec.directive, attr, {
+          rAttr = runRules(spec.directive, rAttr, {
             ...options,
             meta
           })

package/lib/platform/template/wx/component-config/button.js

@@ -28,8 +28,6 @@ module.exports = function ({ print }) {
   const ttEventLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false, type: 'event' })
   const webPropLog = print({ platform: 'web', tag: TAG_NAME, isError: false })
   const webEventLog = print({ platform: 'web', tag: TAG_NAME, isError: false, type: 'event' })
-  const tenonPropLog = print({ platform: 'tenon', tag: TAG_NAME, isError: false })
-  const tenonEventLog = print({ platform: 'tenon', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' })
 
@@ -39,10 +37,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-button'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-button'
-    },
     props: [
       {
         test: 'open-type',
@@ -137,18 +131,13 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(open-type|lang|session-from|send-message-title|send-message-path|send-message-img|show-message-card|app-parameter)$/,
-        web: webPropLog,
-        tenon: tenonPropLog
+        web: webPropLog
       },
       {
         test: /^(size|type|plain|loading|form-type|hover-class|hover-stop-propagation|hover-start-time|hover-stay-time|use-built-in)$/,
         web (prop, { el }) {
           // todo 这部分能力基于内部封装实现
           el.isBuiltIn = true
-        },
-        tenon (prop, { el }) {
-          // todo 这部分能力基于内部封装实现
-          el.isBuiltIn = true
         }
       },
       {
@@ -185,8 +174,7 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(getuserinfo|contact|error|launchapp|opensetting|getphonenumber)$/,
-        web: webEventLog,
-        tenon: tenonEventLog
+        web: webEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/image.js

@@ -13,10 +13,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-image'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-image'
-    },
     props: [
       {
         test: /^show-menu-by-longpress$/,

package/lib/platform/template/wx/component-config/input.js

@@ -20,10 +20,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-input'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-input'
-    },
     props: [
       {
         test: /^(cursor-spacing|auto-focus|adjust-position|hold-keyboard)$/,

package/lib/platform/template/wx/component-config/rich-text.js

@@ -12,10 +12,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-rich-text'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-rich-text'
-    },
     props: [
       {
         test: /^(space)$/,

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -19,10 +19,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-scroll-view'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-scroll-view'
-    },
     props: [
       {
         test: /^(enable-flex|scroll-anchorin|refresher-enabled|refresher-threshold|refresher-default-style|refresher-background|refresher-triggered|enhanced|bounces|show-scrollbar|paging-enabled|fast-deceleratio)$/,

package/lib/platform/template/wx/component-config/switch.js

@@ -10,10 +10,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-switch'
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-switch'
-    },
     props: [
       {
         test: /^type$/,

package/lib/platform/template/wx/component-config/text.js

@@ -19,10 +19,6 @@ module.exports = function ({ print }) {
         return 'span'
       }
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-text'
-    },
     props: [
       {
         test: /^(decode|user-select)$/,

package/lib/platform/template/wx/component-config/textarea.js

@@ -22,11 +22,6 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-textarea'
     },
-    tenon (tag, { el }) {
-      // form全量使用内建组件
-      el.isBuiltIn = true
-      return 'tenon-textarea'
-    },
     props: [
       {
         test: /^(auto-focus|fixed|cursor-spacing|cursor|show-confirm-bar|selection-start|selection-end|adjust-position|hold-keyboard|disable-default-padding|confirm-type)$/,

package/lib/platform/template/wx/component-config/view.js

@@ -21,10 +21,6 @@ module.exports = function ({ print }) {
         return 'div'
       }
     },
-    tenon (tag, { el }) {
-      el.isBuiltIn = true
-      return 'tenon-view'
-    },
     qa (tag) {
       return 'div'
     },