@mpxjs/webpack-plugin 2.6.113 → 2.6.114-alpha.0

package/lib/tenon/processScript.js

@@ -0,0 +1,260 @@
+const genComponentTag = require('../utils/gen-component-tag')
+const loaderUtils = require('loader-utils')
+const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
+const AddEntryDependency = require('../dependency/AddEntryDependency')
+const builtInLoaderPath = normalize.lib('built-in-loader')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+
+function shallowStringify (obj) {
+  let arr = []
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      let value = obj[key]
+      if (Array.isArray(value)) {
+        value = `[${value.join(',')}]`
+      }
+      arr.push(`'${key}':${value}`)
+    }
+  }
+  return `{${arr.join(',')}}`
+}
+
+let entryDeps = new Set()
+
+let callbacked = false
+let cacheCallback
+
+module.exports = function (script, options, callback) {
+  const ctorType = options.ctorType
+  const builtInComponentsMap = options.builtInComponentsMap
+  const localComponentsMap = options.localComponentsMap
+  const localPagesMap = options.localPagesMap
+  const srcMode = options.srcMode
+  const loaderContext = options.loaderContext
+  const isProduction = options.isProduction
+  const componentId = options.componentId
+  const getRequireForSrc = options.getRequireForSrc
+  // const i18n = options.i18n
+  const jsonConfig = options.jsonConfig
+  // const tabBar = jsonConfig.tabBar
+  const tabBarMap = options.tabBarMap
+  // const tabBarStr = options.tabBarStr
+  const genericsInfo = options.genericsInfo
+  const componentGenerics = options.componentGenerics
+  const forceDisableBuiltInLoader = options.forceDisableBuiltInLoader
+
+  // add entry
+  const checkEntryDeps = (callback) => {
+    callback = callback || cacheCallback
+    if (callback && entryDeps.size === 0) {
+      callback()
+    } else {
+      cacheCallback = callback
+    }
+  }
+
+  const addEntryDep = (context, resource, name) => {
+    // 如果loader已经回调，就不再添加entry
+    if (callbacked) return
+    const dep = SingleEntryPlugin.createDependency(resource, name)
+    entryDeps.add(dep)
+    const virtualModule = new AddEntryDependency({
+      context: context._compiler.context,
+      dep,
+      name
+    })
+    /* eslint-disable camelcase */
+    context._module.__has_tenon_entry = true
+    context._module.addDependency(virtualModule)
+    entryDeps.delete(dep)
+    checkEntryDeps()
+  }
+
+  // const emitWarning = (msg) => {
+  //   loaderContext.emitWarning(
+  //     new Error('[script processor][' + loaderContext.resource + ']: ' + msg)
+  //   )
+  // }
+
+  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
+  // let tabBarPagesMap = {}
+  // if (tabBar && tabBarMap) {
+  //   // 挂载tabBar组件
+  //   const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { component: true }))
+  //   tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
+  //   // 挂载tabBar页面
+  //   Object.keys(tabBarMap).forEach((pagePath) => {
+  //     const pageCfg = localPagesMap[pagePath]
+  //     if (pageCfg) {
+  //       const pageRequest = stringifyRequest(pageCfg.resource)
+  //       if (pageCfg.async) {
+  //         tabBarPagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+  //       } else {
+  //         tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+  //       }
+  //     } else {
+  //       emitWarning(`TabBar page path ${pagePath} is not exist in local page map, please check!`)
+  //     }
+  //   })
+  // }
+
+  let output = '/* script */\n'
+
+  let scriptSrcMode = srcMode
+  if (script) {
+    scriptSrcMode = script.mode || scriptSrcMode
+  } else {
+    script = {
+      tag: 'script',
+      content: ''
+    }
+    switch (ctorType) {
+      case 'app':
+        script.content = 'import {createApp} from "@mpxjs/core"\n' +
+          'createApp({})\n'
+        break
+      case 'page':
+        script.content = 'import {createPage} from "@mpxjs/core"\n' +
+          'createPage({})\n'
+        break
+      case 'component':
+        script.content = 'import {createComponent} from "@mpxjs/core"\n' +
+          'createComponent({})\n'
+    }
+  }
+  output += genComponentTag(script, {
+    attrs (script) {
+      const attrs = Object.assign({}, script.attrs)
+      // src改为内联require，删除
+      delete attrs.src
+      return attrs
+    },
+    content (script) {
+      let content = `\n  import processOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
+      // add import
+      if (ctorType === 'app') {
+        content += `  import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
+  import Vue from 'vue'
+  const VueRouter = {}
+  global.getApp = function(){}
+  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
+  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}\n
+  global.currentPagePath = ""\n`
+      }
+      // 注入wxs模块
+      // content += '  const wxsModules = {}\n'
+      // if (options.wxsModuleMap) {
+      //   Object.keys(options.wxsModuleMap).forEach((module) => {
+      //     const src = loaderUtils.urlToRequest(options.wxsModuleMap[module], options.projectRoot)
+      //     const expression = `require(${stringifyRequest(src)})`
+      //     content += `  wxsModules.${module} = ${expression}\n`
+      //   })
+      // }
+      let firstPage = ''
+      const pagesMap = {}
+      const componentsMap = {}
+      Object.keys(localPagesMap).forEach((pagePath) => {
+        const pageCfg = localPagesMap[pagePath]
+        // const pageRequest = stringifyRequest(pageCfg.resource)
+        addEntryDep(loaderContext, addQuery(pageCfg.resource, { tenon: true }), pagePath)
+        // addEntrySafely(loaderContext, addQuery(pageCfg.resource, { tenon: true }), pagePath)
+        // loaderContext.resolve(loaderContext._compiler.context, addQuery(pageCfg.resource, { tenon: true }), (err, resource) => {
+        //   if(err) return callback(err)
+
+        // })
+        // if (pageCfg.async) {
+        //   pagesMap[pagePath] = `()=>import(${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        // } else {
+        //   // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
+        //   pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+        // }
+
+        // if (pageCfg.isFirst) {
+        //   firstPage = pagePath
+        // }
+      })
+
+      Object.keys(localComponentsMap).forEach((componentName) => {
+        const componentCfg = localComponentsMap[componentName]
+        const componentRequest = stringifyRequest(componentCfg.resource)
+        if (componentCfg.async) {
+          componentsMap[componentName] = `()=>import(${componentRequest}).then(res => getComponent(res))`
+        } else {
+          componentsMap[componentName] = `getComponent(require(${componentRequest}))`
+        }
+      })
+
+      Object.keys(builtInComponentsMap).forEach((componentName) => {
+        const componentCfg = builtInComponentsMap[componentName]
+        const componentRequest = forceDisableBuiltInLoader ? stringifyRequest(componentCfg.resource) : stringifyRequest('builtInComponent.vue!=!' + builtInLoaderPath + '!' + componentCfg.resource)
+        componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+      })
+
+      content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+      if (!isProduction) {
+        content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+      }
+      // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
+      content += script.src
+        ? (getRequireForSrc('script', script) + '\n')
+        : (script.content + '\n') + '\n'
+      // createApp/Page/Component执行完成后立刻获取当前的option并暂存
+      content += `  const currentOption = global.currentOption\n`
+      // 获取pageConfig
+      const pageConfig = {}
+      if (ctorType === 'page') {
+        // 存储当前page路径
+        content += `  global.currentPagePath = ${JSON.stringify(loaderContext._compilation.__mpx__.pagesMap[loaderContext.resourcePath])}\n`
+        const uselessOptions = new Set([
+          'usingComponents',
+          'style',
+          'singlePage'
+        ])
+        Object.keys(jsonConfig)
+          .filter(key => !uselessOptions.has(key))
+          .forEach(key => {
+            pageConfig[key] = jsonConfig[key]
+          })
+      }
+
+      // 配置平台转换通过createFactory在core中convertor中定义和进行
+      // 通过processOption进行组件注册和路由注入
+      content += `  export default processOption(
+    currentOption,
+    ${JSON.stringify(ctorType)},
+    ${JSON.stringify(firstPage)},
+    ${JSON.stringify(componentId)},
+    ${JSON.stringify(pageConfig)},
+    // @ts-ignore
+    ${shallowStringify(pagesMap)},
+    // @ts-ignore
+    ${shallowStringify(componentsMap)},
+    ${JSON.stringify(tabBarMap)},
+    ${JSON.stringify(componentGenerics)},
+    ${JSON.stringify(genericsInfo)},
+    undefined`
+
+      //   if (ctorType === 'app') {
+      //     content += `,
+      // Vue,
+      // VueRouter`
+      //     if (i18n) {
+      //       content += `,
+      // i18n`
+      //     }
+      //   }
+      content += `\n  )\n`
+      return content
+    }
+  })
+  output += '\n'
+  checkEntryDeps(() => {
+    callbacked = true
+    callback(null, {
+      output
+    })
+  })
+}

package/lib/tenon/processStyles.js

@@ -0,0 +1,21 @@
+const genComponentTag = require('../utils/gen-component-tag')
+
+module.exports = function (styles, options, callback) {
+  let output = '/* styles */\n'
+  if (styles.length) {
+    styles.forEach((style) => {
+      output += genComponentTag(style, {
+        attrs (style) {
+          const attrs = Object.assign({}, style.attrs)
+          if (options.autoScope) attrs.scoped = true
+          return attrs
+        }
+      })
+      output += '\n'
+    })
+    output += '\n'
+  }
+  callback(null, {
+    output
+  })
+}

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/get-relative-path.js

@@ -0,0 +1,24 @@
+function getRelativePath (source, target) {
+  source = source && source.replace(/\/[^/]*$/, ''); // get dirname
+  // make sure source and target are absolute path
+  /^\//.test(source) || (source = '/' + source);
+  /^\//.test(target) || (target = '/' + target)
+  // 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.6.113",
+  "version": "2.6.114-alpha.0",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -27,6 +27,9 @@
     "@better-scroll/slide": "^2.2.1",
     "@better-scroll/wheel": "^2.2.1",
     "@better-scroll/zoom": "^2.2.1",
+    "@hummer/tenon-dev-server-webpack-plugin": "0.0.2",
+    "@hummer/tenon-loader": "^1.1.0",
+    "@hummer/tenon-style-loader": "^0.2.0",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
     "consolidate": "^0.15.1",
@@ -79,7 +82,8 @@
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.4",
-    "@types/babel-types": "^7.0.4"
+    "@types/babel-types": "^7.0.4",
+    "webpack": "^4.46.0"
   },
-  "gitHead": "05ebd038f9f72d8a12dbae6c6f7685dbfa19f1b8"
+  "gitHead": "7f944d9d7fe0dd3bd0a798c6268c6d08f90d62c0"
 }