@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

package/lib/tenon/processTemplate.js

@@ -0,0 +1,133 @@
+const templateCompiler = require('../template-compiler/compiler')
+const genComponentTag = require('../utils/gen-component-tag')
+const addQuery = require('../utils/add-query')
+const path = require('path')
+const parseRequest = require('../utils/parse-request')
+// const getMainCompilation = require('../utils/get-main-compilation')
+
+// 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)
+// }
+
+module.exports = function (template, options, callback) {
+  const mode = options.mode
+  const srcMode = options.srcMode
+  const defs = options.defs
+  const moduleId = options.moduleId
+  const loaderContext = options.loaderContext
+  const ctorType = options.ctorType
+  const resourcePath = parseRequest(loaderContext.resource).resourcePath
+  const builtInComponentsMap = {}
+  // const compilation = loaderContext._compilation
+  // const mainCompilation = getMainCompilation(compilation)
+  // const mpx = mainCompilation.__mpx__
+  // const wxsContentMap = mpx.wxsContentMap
+  let wxsModuleMap, genericsInfo
+  let output = '/* template */\n'
+
+  if (ctorType === 'app') {
+    template = {
+      tag: 'template',
+      content: '<div class="app">this is app</div>'
+    }
+    // builtInComponentsMap['mpx-keep-alive'] = {
+    //   resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { component: true })
+    // }
+  }
+
+  if (template) {
+    // 由于远端src template资源引用的相对路径可能发生变化，暂时不支持。
+    if (template.src) {
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
+    }
+    if (template.lang) {
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
+    }
+
+    output += genComponentTag(template, (template) => {
+      if (ctorType === 'app') {
+        return template.content
+      }
+      if (template.content) {
+        const templateSrcMode = template.mode || srcMode
+        const parsed = templateCompiler.parse(template.content, {
+          warn: (msg) => {
+            loaderContext.emitWarning(
+              new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            )
+          },
+          error: (msg) => {
+            loaderContext.emitError(
+              new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            )
+          },
+          usingComponents: options.usingComponents,
+          hasComment: options.hasComment,
+          isNative: options.isNative,
+          basename: path.basename(resourcePath),
+          isComponent: ctorType === 'component',
+          mode,
+          srcMode: templateSrcMode,
+          defs,
+          decodeHTMLText: options.decodeHTMLText,
+          // externalClasses: options.externalClasses,
+          hasScoped: false,
+          moduleId,
+          filePath: loaderContext.resourcePath,
+          i18n: null,
+          checkUsingComponents: options.checkUsingComponents,
+          // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
+          globalComponents: [],
+          // web模式下实现抽象组件
+          componentGenerics: options.componentGenerics
+        })
+        // if (parsed.meta.wxsModuleMap) {
+        //   wxsModuleMap = parsed.meta.wxsModuleMap
+        // }
+        // if (parsed.meta.wxsContentMap) {
+        //   for (let module in parsed.meta.wxsContentMap) {
+        //     wxsContentMap[`${resourcePath}~${module}`] = parsed.meta.wxsContentMap[module]
+        //   }
+        // }
+        if (parsed.meta.builtInComponentsMap) {
+          Object.keys(parsed.meta.builtInComponentsMap).forEach((name) => {
+            builtInComponentsMap[name] = {
+              resource: addQuery(parsed.meta.builtInComponentsMap[name], { component: true })
+            }
+          })
+        }
+        // if (parsed.meta.genericsInfo) {
+        //   genericsInfo = parsed.meta.genericsInfo
+        // }
+        // 输出H5有多个root element时, 使用div标签包裹
+        // if (parsed.root.tag === 'temp-node') {
+        //   const childLen = calculateRootEleChild(parsed.root.children)
+        //   if (childLen >= 2) {
+        //     parsed.root.tag = 'div'
+        //   }
+        // }
+        return templateCompiler.serialize(parsed.root)
+      }
+    })
+    output += '\n\n'
+  }
+
+  callback(null, {
+    output,
+    builtInComponentsMap,
+    genericsInfo,
+    wxsModuleMap
+  })
+}

package/lib/utils/const.js

@@ -1,5 +1,10 @@
 module.exports = {
   MPX_PROCESSED_FLAG: 'mpx_processed',
   MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
-  DEFAULT_RESULT_SOURCE: ''
+  DEFAULT_RESULT_SOURCE: '',
+  RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
+  JSON_JS_EXT: '.json.js',
+  MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
+  MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId
+  MPX_CURRENT_CHUNK: 'mpx_current_chunk'
 }

package/lib/utils/eval-json-js.js

@@ -0,0 +1,31 @@
+const path = require('path')
+
+module.exports = function evalJSONJS (source, filename, loaderContext) {
+  if (!loaderContext._compiler) return {}
+  const fs = loaderContext._compiler.inputFileSystem
+  const defs = loaderContext.getMpx().defs
+  const defKeys = Object.keys(defs)
+  const defValues = defKeys.map((key) => {
+    return defs[key]
+  })
+  const dirname = path.dirname(filename)
+  // eslint-disable-next-line no-new-func
+  const func = new Function('module', 'exports', 'require', '__filename', '__dirname', ...defKeys, source)
+  const module = {
+    exports: {}
+  }
+  // 此处采用readFileSync+evalJSONJS而不直接使用require获取依赖内容有两个原因：
+  // 1. 支持依赖中正常访问defs变量
+  // 2. 避免对应的依赖文件被作为buildDependencies
+  func(module, module.exports, function (request) {
+    if (request.startsWith('.')) {
+      request = path.join(dirname, request)
+    }
+    const filename = require.resolve(request)
+    loaderContext.addDependency(filename)
+    const source = fs.readFileSync(filename).toString('utf-8')
+    return evalJSONJS(source, filename, loaderContext)
+  }, filename, dirname, ...defValues)
+
+  return module.exports
+}

package/lib/utils/get-entry-name.js

@@ -1,8 +1,8 @@
 module.exports = function (loaderContext) {
-  const compilation = loaderContext._compilation
-  const moduleGraph = compilation.moduleGraph
+  if (!loaderContext._compilation) return ''
+  const moduleGraph = loaderContext._compilation.moduleGraph
   let entryName = ''
-  for (const [name, { dependencies }] of compilation.entries) {
+  for (const [name, { dependencies }] of loaderContext._compilation.entries) {
     const entryModule = moduleGraph.getModule(dependencies[0])
     if (entryModule.resource === loaderContext.resource) {
       entryName = name

package/lib/utils/get-json-content.js

@@ -0,0 +1,42 @@
+const parseRequest = require('./parse-request')
+const evalJSONJS = require('./eval-json-js')
+const resolve = require('./resolve')
+const async = require('async')
+const { JSON_JS_EXT } = require('./const')
+
+module.exports = function getJSONContent (json, loaderContext, callback) {
+  if (!loaderContext._compiler) return callback(null, '{}')
+  const fs = loaderContext._compiler.inputFileSystem
+  async.waterfall([
+    (callback) => {
+      if (json.src) {
+        resolve(loaderContext.context, json.src, loaderContext, (err, result) => {
+          if (err) return callback(err)
+          const { rawResourcePath: resourcePath } = parseRequest(result)
+          fs.readFile(resourcePath, (err, content) => {
+            if (err) return callback(err)
+            callback(null, {
+              content: content.toString('utf-8'),
+              useJSONJS: json.useJSONJS || resourcePath.endsWith(JSON_JS_EXT),
+              filename: resourcePath
+
+            })
+          })
+        })
+      } else {
+        callback(null, {
+          content: json.content,
+          useJSONJS: json.useJSONJS,
+          filename: loaderContext.resourcePath
+        })
+      }
+    },
+    ({ content, useJSONJS, filename }, callback) => {
+      if (!content) return callback(null, '{}')
+      if (useJSONJS) {
+        content = JSON.stringify(evalJSONJS(content, filename, loaderContext))
+      }
+      callback(null, content)
+    }
+  ], callback)
+}

package/lib/utils/get-relative-path.js

@@ -0,0 +1,25 @@
+function getRelativePath (source, target) {
+  // make sure source and target are absolute path
+  /^\//.test(source) || (source = '/' + source);
+  /^\//.test(target) || (target = '/' + target)
+
+  source = source && source.replace(/\/[^/]*$/, '') // get dirname
+  // check if source or target is root path
+  let sourceArr = source.split('/').filter((item, index) => index !== 0 && !!item)
+  let targetArr = target.split('/').filter((item, index) => index !== 0 && !!item)
+  let i = 0
+  while (sourceArr[i] === targetArr[i] && i < sourceArr.length && i < targetArr.length) {
+    i++
+  }
+  let relativePath = ''
+  for (let j = 0; j < sourceArr.length - i; j++) {
+    relativePath += '../'
+  }
+  relativePath += targetArr.slice(i).join('/')
+  if (relativePath[0] !== '.') relativePath = './' + relativePath
+  return relativePath
+}
+
+module.exports = {
+  getRelativePath
+}

package/lib/utils/match-condition.js

@@ -45,4 +45,7 @@ const matchCondition = (resourcePath, condition = {}) => {
   return matched
 }
 
-module.exports = matchCondition
+module.exports = {
+  matchCondition,
+  normalizeCondition
+}

package/lib/utils/normalize.js

@@ -1,3 +1,5 @@
-const path = require('path')
+// const path = require('path')
 
-exports.lib = file => path.resolve(__dirname, '../', file)
+// exports.lib = file => path.resolve(__dirname, '../', file)
+// support npm link debug
+exports.lib = file => '@mpxjs/webpack-plugin/lib/' + file

package/lib/utils/resolve.js

@@ -0,0 +1,13 @@
+const parseRequest = require('./parse-request')
+const { RESOLVE_IGNORED_ERR } = require('./const')
+
+// todo 提供不记录dependency的resolve方法，非必要的情况下不记录dependency，提升缓存利用率
+module.exports = (context, request, loaderContext, callback) => {
+  const { queryObj } = parseRequest(request)
+  context = queryObj.context || context
+  return loaderContext.resolve(context, request, (err, resource, info) => {
+    if (err) return callback(err)
+    if (resource === false) return callback(RESOLVE_IGNORED_ERR)
+    callback(null, resource, info)
+  })
+}