@mpxjs/webpack-plugin 2.10.15-prelease.1 → 2.10.16-beta.2

package/lib/web/processJSON.js

@@ -37,23 +37,38 @@ module.exports = function (jsonContent, {
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
-      new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     loaderContext.emitError(
-      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
+      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
 
+  function fillInComponentsMap (name, entry, tarRoot) {
+    const { resource, outputPath } = entry
+    const { resourcePath } = parseRequest(resource)
+    componentsMap[resourcePath] = outputPath
+    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+    localComponentsMap[name] = {
+      resource: addQuery(resource, {
+        isComponent: true,
+        outputPath
+      }),
+      async: tarRoot
+    }
+  }
+
   const {
     isUrlRequest,
     urlToRequest,
     processPage,
-    processComponent
+    processComponent,
+    processPlaceholder
   } = createJSONHelper({
     loaderContext,
     emitWarning,
@@ -240,7 +255,7 @@ module.exports = function (jsonContent, {
             if (oldResourcePath !== resourcePath) {
               const oldOutputPath = outputPath
               outputPath = mpx.getOutputPath(resourcePath, 'page', { conflictPath: outputPath })
-              emitWarning(new Error(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+              emitWarning(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`)
             }
           }
 
@@ -287,22 +302,35 @@ module.exports = function (jsonContent, {
 
   const processComponents = (components, context, callback) => {
     if (components) {
+      const asyncComponents = []
+      const resolveResourcePathMap = new Map()
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder, resourcePath } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          const { resourcePath, queryObj } = parseRequest(resource)
-          componentsMap[resourcePath] = outputPath
-          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-          localComponentsMap[name] = {
-            resource: addQuery(resource, {
-              isComponent: true,
-              outputPath
-            }),
-            async: queryObj.async || tarRoot
-          }
+          const { relativePath, resource } = entry
+          const { queryObj } = parseRequest(resource)
+
+          tarRoot = queryObj.async || tarRoot
+
+          resolveResourcePathMap.set(name, resourcePath)
+          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
+
+          fillInComponentsMap(name, entry, tarRoot)
           callback()
         })
-      }, callback)
+      }, (err) => {
+        if (err) return callback(err)
+        async.each(asyncComponents, ({ name, tarRoot, placeholder, relativePath }, callback) => {
+          processPlaceholder({ jsonObj, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, (err, placeholder) => {
+            if (err) return callback(err)
+            if (placeholder) {
+              const { name, entry } = placeholder
+              fillInComponentsMap(name, entry, '')
+            }
+            callback()
+          })
+        }, callback)
+      })
     } else {
       callback()
     }

package/lib/web/processScript.js

@@ -78,12 +78,12 @@ module.exports = function (script, {
       }
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
+  // @ts-ignore
   export default processComponentOption({
     option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
     ctorType: ${JSON.stringify(ctorType)},
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
-    // @ts-ignore
     componentsMap: ${shallowStringify(componentsMap)},
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},

package/lib/web/processTemplate.js

@@ -51,10 +51,10 @@ module.exports = function (template, {
   if (template) {
     // 由于远端src template资源引用的相对路径可能发生变化，暂时不支持。
     if (template.src) {
-      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
+      return callback(new Error('[Mpx template error][' + 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!'))
+      return callback(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
     }
 
     output += genComponentTag(template, (template) => {
@@ -65,12 +65,12 @@ module.exports = function (template, {
         const templateSrcMode = template.mode || srcMode
         const warn = (msg) => {
           loaderContext.emitWarning(
-            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
           )
         }
         const error = (msg) => {
           loaderContext.emitError(
-            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+            new Error('[Mpx template error][' + loaderContext.resource + ']: ' + msg)
           )
         }
         const { root, meta } = templateCompiler.parse(template.content, {

package/lib/web/script-helper.js

@@ -24,19 +24,29 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+
       if (componentCfg.async) {
-        // todo 暂时只处理局部注册的组件作为componentPlaceholder，暂不支持全局组件和原生组件，如使用了支持范围外的组件将不进行placeholder渲染及替换
-        if (jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName] && localComponentsMap[jsonConfig.componentPlaceholder[componentName]]) {
-          const placeholder = jsonConfig.componentPlaceholder[componentName]
+        const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
+        if (placeholder) {
           const placeholderCfg = localComponentsMap[placeholder]
-          const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
-          if (placeholderCfg.async) {
-            loaderContext.emitWarning(
-              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+          if (placeholderCfg) {
+            if (placeholderCfg.async) {
+              loaderContext.emitWarning(
+                new Error(`[Mpx json error][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
+              )
+            }
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
+            componentsMap[componentName] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
+          } else {
+            loaderContext.emitError(
+              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component or custom component, please check!`)
             )
+            componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
           }
-          componentsMap[componentName] = `function(){return {component: import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)}), loading: getComponent(require(${placeholderRequest}))}}`
         } else {
+          loaderContext.emitError(
+            new Error(`[json processor][${loaderContext.resource}]: ${componentName} has no componentPlaceholder, please check!`)
+          )
           componentsMap[componentName] = `function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res)})}`
         }
       } else {
@@ -75,7 +85,7 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
         }
       } else {
         loaderContext.emitWarning(
-          new Error(`[json processor][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
+          new Error(`[Mpx json error][${loaderContext.resource}]: TabBar page path ${pagePath} is not exist in local page map, please check!`)
         )
       }
     })

package/lib/wxss/loader.js

@@ -32,13 +32,6 @@ const {
 } = require('./utils')
 const createHelpers = require('../helpers')
 
-const RN_PRESET_OPTIMISATION = {
-  reduceInitial: false,
-  normalizeWhitespace: false,
-  minifyFontValues: false,
-  convertValues: false
-}
-
 module.exports = async function loader (content, map, meta) {
   const rawOptions = this.getOptions(schema)
   const plugins = []
@@ -157,12 +150,11 @@ module.exports = async function loader (content, map, meta) {
     )
   }
 
-  if (this.minimize) {
+  if (this.minimize && !isRN) {
     const cssnano = require('cssnano')
     const minimizeOptions = rawOptions.minimize || {}
     const presetOptimisation = Object.assign(
       {},
-      isRN ? RN_PRESET_OPTIMISATION : {},
       minimizeOptions.optimisation
     )
     let cssnanoConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.15-prelease.1",
+  "version": "2.10.16-beta.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -29,7 +29,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.13",
+    "@mpxjs/utils": "^2.10.16",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -51,6 +51,7 @@
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
     "postcss": "^8.4.5",
+    "postcss-import": "^16.1.1",
     "postcss-load-config": "^3.1.1",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
@@ -63,6 +64,9 @@
     "webpack-virtual-modules": "^0.6.0"
   },
   "peerDependencies": {
+    "postcss-less": "^6.0.0",
+    "postcss-scss": "^4.0.9",
+    "postcss-styl": "^0.12.3",
     "webpack": "^5.75.0"
   },
   "publishConfig": {
@@ -78,16 +82,19 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "scripts": {
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "copy-icons": "cp -r ./lib/runtime/components/react/mpx-icon/icons ./lib/runtime/components/react/dist/mpx-icon/icons",
     "build": "rimraf ./lib/runtime/components/react/dist && tsc && npm run copy-icons"
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.15",
+    "@mpxjs/api-proxy": "^2.10.16",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
+    "@types/glob": "^8.1.0",
+    "@types/postcss-import": "^14.0.3",
     "@types/react": "^18.2.79",
+    "glob": "^11.0.2",
     "react-native": "^0.74.5",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-linear-gradient": "^2.8.3",
@@ -95,6 +102,7 @@
     "react-native-safe-area-context": "^4.12.0",
     "react-native-svg": "^15.8.0",
     "react-native-video": "^6.9.0",
+    "react-native-vision-camera": "^4.7.2",
     "react-native-webview": "^13.12.2",
     "rimraf": "^6.0.1"
   },