@mpxjs/webpack-plugin 2.8.40-beta.0 → 2.8.40-test.2

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,
+    webConfig,
+    autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
@@ -48,9 +33,11 @@ module.exports = function (template, {
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
+    const { el } = webConfig
+    const idName = el?.match(/#(.*)/)?.[1] || 'app'
     template = {
       tag: 'template',
-      content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
+      content: `<div id="${idName}"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })
@@ -72,6 +59,7 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
+
         const { root, meta } = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
@@ -87,6 +75,7 @@ module.exports = function (template, {
           hasComment,
           isNative,
           isComponent: ctorType === 'component',
+          isPage: ctorType === 'page',
           mode,
           srcMode: templateSrcMode,
           defs,
@@ -101,9 +90,8 @@ module.exports = function (template, {
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics
-          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+          componentGenerics,
+          hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
         })
         if (meta.wxsModuleMap) {
           wxsModuleMap = meta.wxsModuleMap
@@ -123,18 +111,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/lib/web/script-helper.js

@@ -0,0 +1,202 @@
+const hasOwn = require('../utils/has-own')
+const loaderUtils = require('loader-utils')
+const normalize = require('../utils/normalize')
+const createHelpers = require('../helpers')
+const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
+const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
+const addQuery = require('../utils/add-query')
+
+function stringifyRequest (loaderContext, request) {
+  return loaderUtils.stringifyRequest(loaderContext, request)
+}
+
+function shallowStringify (obj) {
+  const arr = []
+  for (const key in obj) {
+    if (hasOwn(obj, key)) {
+      let value = obj[key]
+      if (Array.isArray(value)) {
+        value = `[${value.join(',')}]`
+      }
+      arr.push(`'${key}':${value}`)
+    }
+  }
+  return `{${arr.join(',')}}`
+}
+
+function getAsyncChunkName (chunkName) {
+  if (chunkName && typeof chunkName !== 'boolean') {
+    return `/* webpackChunkName: "${chunkName}" */`
+  }
+  return ''
+}
+
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext }) {
+  const componentsMap = {}
+  if (localComponentsMap) {
+    Object.keys(localComponentsMap).forEach((componentName) => {
+      const componentCfg = localComponentsMap[componentName]
+      const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+      if (componentCfg.async) {
+        componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
+      } else {
+        componentsMap[componentName] = `getComponent(require(${componentRequest}))`
+      }
+    })
+  }
+  if (builtInComponentsMap) {
+    Object.keys(builtInComponentsMap).forEach((componentName) => {
+      const componentCfg = builtInComponentsMap[componentName]
+      const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+      componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+    })
+  }
+  return componentsMap
+}
+
+function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBarStr, jsonConfig }) {
+  let globalTabBar = ''
+  let firstPage = ''
+  const pagesMap = {}
+  const tabBarPagesMap = {}
+  if (tabBar && tabBarMap) {
+    // 挂载tabBar组件
+    const tabBarRequest = stringifyRequest(loaderContext, addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
+    tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
+    // 挂载tabBar页面
+    Object.keys(tabBarMap).forEach((pagePath) => {
+      const pageCfg = localPagesMap[pagePath]
+      if (pageCfg) {
+        const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
+        if (pageCfg.async) {
+          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        } else {
+          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+        }
+      } else {
+        loaderContext.emitWarning(
+          new Error('[json processor][' + loaderContext.resource + ']: ' + `TabBar page path ${pagePath} is not exist in local page map, please check!`)
+        )
+      }
+    })
+  }
+  if (tabBarStr && tabBarPagesMap) {
+    globalTabBar += `
+  global.__tabBar = ${tabBarStr}
+  Vue.observable(global.__tabBar)
+  // @ts-ignore
+  global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
+  }
+  Object.keys(localPagesMap).forEach((pagePath) => {
+    const pageCfg = localPagesMap[pagePath]
+    const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
+    if (tabBarMap && tabBarMap[pagePath]) {
+      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
+    } else {
+      if (pageCfg.async) {
+        pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${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 (pagePath === jsonConfig.entryPagePath) {
+      firstPage = pagePath
+    }
+    if (!firstPage && pageCfg.isFirst) {
+      firstPage = pagePath
+    }
+  })
+  return {
+    pagesMap,
+    firstPage,
+    globalTabBar
+  }
+}
+
+function getRequireScript ({ ctorType, script, loaderContext }) {
+  let content = '  /** script content **/\n'
+  const extraOptions = { ctorType, lang: script.lang || 'js' }
+  const { getRequire } = createHelpers(loaderContext)
+  content += `  ${getRequire('script', script, extraOptions)}\n`
+  return content
+}
+
+function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain, globalTabBar }) {
+  let content = ''
+  if (isMain) {
+    content += `
+  global.getApp = function(){}
+  global.getCurrentPages = function () {
+    if (!(typeof window !== 'undefined')) {
+      console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
+    }
+    const router = global.__mpxRouter
+    if(!router) return []
+    // @ts-ignore
+    return (router.lastStack || router.stack).map(item => {
+      let page
+      const vnode = item.vnode
+      if (vnode && vnode.componentInstance) {
+        page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
+      }
+      return page || { route: item.path.slice(1) }
+    })
+  }
+  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
+  global.__mpxGenericsMap = {}
+  global.__mpxOptionsMap = {}
+  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
+  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
+    if (globalTabBar) {
+      content += globalTabBar
+    }
+  }
+  content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+  content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+  content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
+  if (!isProduction) {
+    content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+  }
+  return content
+}
+
+function buildI18n ({ i18n, loaderContext }) {
+  let i18nContent = ''
+  const i18nObj = Object.assign({}, i18n)
+  i18nContent += `
+  import VueI18n from 'vue-i18n'
+  import { createI18n } from 'vue-i18n-bridge'
+  Vue.use(VueI18n , { bridge: true })\n`
+  const requestObj = {}
+  const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
+  i18nKeys.forEach((key) => {
+    if (i18nObj[`${key}Path`]) {
+      requestObj[key] = stringifyRequest(loaderContext, i18nObj[`${key}Path`])
+      delete i18nObj[`${key}Path`]
+    }
+  })
+  i18nContent += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
+  Object.keys(requestObj).forEach((key) => {
+    i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
+  })
+  i18nContent += `
+  i18nCfg.legacy = false
+  const i18n = createI18n(i18nCfg, VueI18n)
+  Vue.use(i18n)
+  Mpx.i18n = i18n\n`
+  return i18nContent
+}
+
+module.exports = {
+  buildPagesMap,
+  buildComponentsMap,
+  getRequireScript,
+  buildGlobalParams,
+  shallowStringify,
+  getAsyncChunkName,
+  stringifyRequest,
+  buildI18n
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.40-beta.0",
+  "version": "2.8.40-test.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
   ],
   "author": "donghongping",
-  "license": "Apache",
+  "license": "Apache-2.0",
   "main": "lib/index.js",
   "directories": {
     "lib": "lib"
@@ -29,7 +29,6 @@
     "@better-scroll/zoom": "^2.5.1",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
-    "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
     "cssnano": "^5.0.16",
@@ -55,10 +54,12 @@
     "postcss-modules-values": "^4.0.0",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.0.2",
-    "source-list-map": "^2.0.0"
+    "semver": "^7.5.4",
+    "source-list-map": "^2.0.0",
+    "video.js": "^8.6.0"
   },
   "peerDependencies": {
-    "webpack": "^5.48.0"
+    "webpack": "^5.75.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -82,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "03d5373a8526f23e00f05917aaf84f6fbb7ef98f"
+  "gitHead": "7b1911025a2eb47eddc046775f17b6f1405fdd54"
 }

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

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

package/lib/style-compiler/plugins/trim.js

@@ -1,15 +0,0 @@
-
-module.exports = (opts) => {
-  return {
-    postcssPlugin: 'trim',
-    Once: (root) => {
-      root.walk(({ type, raws }) => {
-        if (type === 'rule' || type === 'atrule') {
-          raws.before = raws.after = '\n'
-        }
-      })
-    }
-  }
-}
-
-module.exports.postcss = true

package/lib/template-compiler/preprocessor.js

@@ -1,29 +0,0 @@
-// loader for pre-processing templates with e.g. pug
-
-const cons = require('consolidate')
-const loaderUtils = require('loader-utils')
-
-module.exports = function (content) {
-  this.cacheable && this.cacheable()
-  const callback = this.async()
-  const opt = loaderUtils.getOptions(this) || {}
-
-  if (!cons[opt.engine]) {
-    return callback(new Error(
-      'Template engine \'' + opt.engine + '\' ' +
-      'isn\'t available in Consolidate.js'
-    ))
-  }
-
-  const templateOption = opt.templateOption
-
-  // for relative includes
-  templateOption.filename = this.resourcePath
-
-  cons[opt.engine].render(content, templateOption, function (err, html) {
-    if (err) {
-      return callback(err)
-    }
-    callback(null, html)
-  })
-}

package/lib/wxss/compile-exports.js

@@ -1,52 +0,0 @@
-const camelCase = require('lodash.camelcase')
-
-function dashesCamelCase (str) {
-  return str.replace(/-+(\w)/g, function (match, firstLetter) {
-    return firstLetter.toUpperCase()
-  })
-}
-
-module.exports = function compileExports (result, importItemMatcher, camelCaseKeys) {
-  if (!Object.keys(result.exports).length) {
-    return ''
-  }
-
-  const exportJs = Object.keys(result.exports).reduce(function (res, key) {
-    let valueAsString = JSON.stringify(result.exports[key])
-    valueAsString = valueAsString.replace(result.importItemRegExpG, importItemMatcher)
-
-    function addEntry (k) {
-      res.push('\t' + JSON.stringify(k) + ': ' + valueAsString)
-    }
-
-    let targetKey
-    switch (camelCaseKeys) {
-      case true:
-        addEntry(key)
-        targetKey = camelCase(key)
-        if (targetKey !== key) {
-          addEntry(targetKey)
-        }
-        break
-      case 'dashes':
-        addEntry(key)
-        targetKey = dashesCamelCase(key)
-        if (targetKey !== key) {
-          addEntry(targetKey)
-        }
-        break
-      case 'only':
-        addEntry(camelCase(key))
-        break
-      case 'dashesOnly':
-        addEntry(dashesCamelCase(key))
-        break
-      default:
-        addEntry(key)
-        break
-    }
-    return res
-  }, []).join(',\n')
-
-  return '{\n' + exportJs + '\n}'
-}

package/lib/wxss/createResolver.js

@@ -1,36 +0,0 @@
-module.exports = function createResolver (alias) {
-  if (typeof alias !== 'object' || Array.isArray(alias)) {
-    return function (url) {
-      return url
-    }
-  }
-
-  alias = Object.keys(alias).map(function (key) {
-    let onlyModule = false
-    let obj = alias[key]
-    if (/\$$/.test(key)) {
-      onlyModule = true
-      key = key.substr(0, key.length - 1)
-    }
-    if (typeof obj === 'string') {
-      obj = {
-        alias: obj
-      }
-    }
-    obj = Object.assign({
-      name: key,
-      onlyModule: onlyModule
-    }, obj)
-    return obj
-  })
-
-  return function (url) {
-    alias.forEach(function (obj) {
-      const name = obj.name
-      if (url === name || (!obj.onlyModule && url.startsWith(name + '/'))) {
-        url = obj.alias + url.substr(name.length)
-      }
-    })
-    return url
-  }
-}

package/lib/wxss/css-base.js

@@ -1,79 +0,0 @@
-/*
-  MIT License http://www.opensource.org/licenses/mit-license.php
-  Author Tobias Koppers @sokra
-  Modified by @hiyuki
-*/
-// css base code, injected by the css-loader
-module.exports = function (useSourceMap) {
-  const list = []
-
-  // return the list of modules as css string
-  list.toString = function toString () {
-    return this.map(function (item) {
-      const content = cssWithMappingToString(item, useSourceMap)
-      if (item[2]) {
-        return '@media ' + item[2] + '{' + content + '}'
-      } else {
-        return content
-      }
-    }).join('')
-  }
-
-  // import a list of modules into the list
-  list.i = function (modules, mediaQuery) {
-    if (typeof modules === 'string') {
-      modules = [[null, modules, '']]
-    }
-    const alreadyImportedModules = {}
-    for (let i = 0; i < this.length; i++) {
-      const id = this[i][0]
-      if (typeof id === 'number') {
-        alreadyImportedModules[id] = true
-      }
-    }
-    for (let i = 0; i < modules.length; i++) {
-      const item = modules[i]
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      //  when a module is imported multiple times with different media queries.
-      //  I hope this will never occur (Hey this way we have smaller bundles)
-      if (typeof item[0] !== 'number' || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
-          item[2] = mediaQuery
-        } else if (mediaQuery) {
-          item[2] = '(' + item[2] + ') and (' + mediaQuery + ')'
-        }
-        list.push(item)
-      }
-    }
-  }
-  return list
-}
-
-function cssWithMappingToString (item, useSourceMap) {
-  const content = item[1] || ''
-  const cssMapping = item[3]
-  if (!cssMapping) {
-    return content
-  }
-
-  if (useSourceMap && typeof btoa === 'function') {
-    const sourceMapping = toComment(cssMapping)
-    const sourceURLs = cssMapping.sources.map(function (source) {
-      return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
-    })
-
-    return [content].concat(sourceURLs).concat([sourceMapping]).join('\n')
-  }
-
-  return [content].join('\n')
-}
-
-// Adapted from convert-source-map (MIT)
-function toComment (sourceMap) {
-  // eslint-disable-next-line no-undef
-  const base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))
-  const data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64
-
-  return '/*# ' + data + ' */'
-}

package/lib/wxss/getLocalIdent.js

@@ -1,25 +0,0 @@
-/*
-  MIT License http://www.opensource.org/licenses/mit-license.php
-  Author Tobias Koppers @sokra
-  Modified by @hiyuki
-*/
-const loaderUtils = require('loader-utils')
-const path = require('path')
-
-module.exports = function getLocalIdent (loaderContext, localIdentName, localName, options) {
-  if (!options.context) {
-    if (loaderContext.rootContext) {
-      options.context = loaderContext.rootContext
-    } else if (loaderContext.options && typeof loaderContext.options.context === 'string') {
-      options.context = loaderContext.options.context
-    } else {
-      options.context = loaderContext.context
-    }
-  }
-  const request = path.relative(options.context, loaderContext.resourcePath)
-  options.content = options.hashPrefix + request + '+' + localName
-  localIdentName = localIdentName.replace(/\[local\]/gi, localName)
-  const hash = loaderUtils.interpolateName(loaderContext, localIdentName, options)
-  /* eslint-disable prefer-regex-literals */
-  return hash.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-').replace(/^((-?[0-9])|--)/, '_$1')
-}

package/lib/wxss/localsLoader.js

@@ -1,44 +0,0 @@
-/*
-  MIT License http://www.opensource.org/licenses/mit-license.php
-  Author Tobias Koppers @sokra
-  Modified by @hiyuki
-*/
-const loaderUtils = require('loader-utils')
-const processCss = require('./processCss')
-const compileExports = require('./compile-exports')
-const createResolver = require('./createResolver')
-
-module.exports = function (content) {
-  if (this.cacheable) this.cacheable()
-  const callback = this.async()
-  const query = loaderUtils.getOptions(this) || {}
-  const moduleMode = query.modules || query.module
-  const camelCaseKeys = query.camelCase || query.camelcase
-  const resolve = createResolver(query.alias)
-
-  processCss(content, null, {
-    mode: moduleMode ? 'local' : 'global',
-    query: query,
-    minimize: this.minimize,
-    loaderContext: this,
-    resolve: resolve
-  }, function (err, result) {
-    if (err) return callback(err)
-
-    function importItemMatcher (item) {
-      const match = result.importItemRegExp.exec(item)
-      const idx = +match[1]
-      const importItem = result.importItems[idx]
-      const importUrl = importItem.url
-      return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ')' +
-        '[' + JSON.stringify(importItem.export) + '] + "'
-    }
-
-    let exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys)
-    if (exportJs) {
-      exportJs = 'module.exports = ' + exportJs + ';'
-    }
-
-    callback(null, exportJs)
-  }.bind(this))
-}