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

package/lib/native-loader.js

@@ -8,6 +8,7 @@ const { JSON_JS_EXT } = require('./utils/const')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordModuleIdMapDependency = require('./dependencies/RecordModuleIdMapDependency')
 const preProcessJson = require('./utils/pre-process-json')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
@@ -23,7 +24,9 @@ module.exports = function (content) {
   const loaderContext = this
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const filePath = this.resourcePath
-  const moduleId = mpx.getModuleId(filePath)
+  const moduleId = mpx.getModuleId(filePath, false, this)
+  this._module.addPresentationalDependency(new RecordModuleIdMapDependency(moduleId, filePath))
+
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
   const mode = mpx.mode
@@ -104,13 +107,13 @@ module.exports = function (content) {
 
   const emitWarning = (msg) => {
     this.emitWarning(
-      new Error('[native-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json warning][native-loader][' + this.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     this.emitError(
-      new Error('[native-loader][' + this.resource + ']: ' + msg)
+      new Error('[Mpx json error][native-loader][' + this.resource + ']: ' + msg)
     )
   }
   let ctorType = pagesMap[resourcePath]

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

@@ -1,12 +1,9 @@
 const runRules = require('../../run-rules')
 const normalizeTest = require('../normalize-test')
 const changeKey = require('../change-key')
-const normalize = require('../../../utils/normalize')
 const { capitalToHyphen } = require('../../../utils/string')
 const { isOriginTag, isBuildInWebTag, isBuildInReactTag } = require('../../../utils/dom-tag-config')
-
-const mpxViewPath = normalize.lib('runtime/components/ali/mpx-view.mpx')
-const mpxTextPath = normalize.lib('runtime/components/ali/mpx-text.mpx')
+const getBuildInTagComponent = require('../../../utils/get-build-tag-component')
 
 module.exports = function getSpec ({ warn, error }) {
   function print (mode, path, isError) {
@@ -46,28 +43,26 @@ module.exports = function getSpec ({ warn, error }) {
   }
 
   // 处理支付宝 componentPlaceholder 不支持 view、text 原生标签
-  function aliComponentPlaceholderFallback (input) {
-    // 处理 驼峰转连字符
-    input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+  // 将 placeholder 中使用的内建组件转化为 mpx-xxx, 并在 usingComponents 填充
+  function fixComponentPlaceholder (input, { mode }) {
+    if (!input.componentPlaceholder) return input
+    if (mode === 'ali') {
+      // 处理 驼峰转连字符
+      input = componentNameCapitalToHyphen('componentPlaceholder')(input)
+    }
     const componentPlaceholder = input.componentPlaceholder
-    const usingComponents = input.usingComponents || (input.usingComponents = {})
+    const usingComponents = input.usingComponents || {}
     for (const cph in componentPlaceholder) {
       const cur = componentPlaceholder[cph]
-      const placeholderCompMatched = cur.match(/^(?:view|text)$/g)
-      if (!Array.isArray(placeholderCompMatched)) continue
-      let compName, compPath
-      switch (placeholderCompMatched[0]) {
-        case 'view':
-          compName = 'mpx-view'
-          compPath = mpxViewPath
-          break
-        case 'text':
-          compName = 'mpx-text'
-          compPath = mpxTextPath
-      }
-      usingComponents[compName] = compPath
-      componentPlaceholder[cph] = compName
+      const comp = getBuildInTagComponent(mode, cur)
+      if (!comp || usingComponents[cur]) continue
+      const { name, resource } = comp
+      usingComponents[name] = resource
+      componentPlaceholder[cph] = name
     }
+
+    input.usingComponents = usingComponents
+    input.componentPlaceholder = componentPlaceholder
     return input
   }
 
@@ -172,7 +167,6 @@ module.exports = function getSpec ({ warn, error }) {
     },
     {
       test: 'componentPlaceholder',
-      ali: aliComponentPlaceholderFallback,
       swan: deletePath(),
       jd: deletePath()
     },
@@ -190,6 +184,13 @@ module.exports = function getSpec ({ warn, error }) {
       ios: fixComponentName,
       android: fixComponentName,
       harmony: fixComponentName
+    },
+    {
+      ali: fixComponentPlaceholder,
+      web: fixComponentPlaceholder,
+      ios: fixComponentPlaceholder,
+      android: fixComponentPlaceholder,
+      harmony: fixComponentPlaceholder
     }
   ]
 
@@ -454,12 +455,6 @@ module.exports = function getSpec ({ warn, error }) {
         swan: getWindowRule(),
         tt: getWindowRule(),
         jd: getWindowRule()
-      },
-      {
-        web: fixComponentName,
-        ios: fixComponentName,
-        android: fixComponentName,
-        harmony: fixComponentName
       }
     ]
   }

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

@@ -315,7 +315,7 @@ module.exports = function getSpec ({ warn, error }) {
     switch (prop) {
       case bgPropMap.image: {
         // background-image 支持背景图/渐变/css var
-        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value) || value === 'none') {
           return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
@@ -359,6 +359,13 @@ module.exports = function getSpec ({ warn, error }) {
           error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
           return false
         }
+        // background: none
+        if (value === 'none') {
+          return [
+            { prop: bgPropMap.image, value },
+            { prop: bgPropMap.color, value: 'transparent' }
+          ]
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {

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

@@ -31,13 +31,16 @@ module.exports = function ({ print }) {
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' })
   const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' })
+  const iosValueLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'value' })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const androidValueLogError = print({ platform: 'android', tag: TAG_NAME, isError: true, type: 'value' })
+  const androidValueLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'value' })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   const harmonyValueLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: true, type: 'value' })
+  const harmonyValueLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'value' })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
 
@@ -133,19 +136,25 @@ module.exports = function ({ print }) {
         ios ({ name, value }) {
           // TODO 此处open-type无其他属性支持了？
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            iosValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             iosValueLogError({ name, value })
           }
         },
         android ({ name, value }) {
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            androidValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             androidValueLogError({ name, value })
           }
         },
         harmony ({ name, value }) {
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            harmonyValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             harmonyValueLogError({ name, value })
           }
         }

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

@@ -15,6 +15,18 @@ module.exports = function ({ print }) {
   const qaEventLog = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-camera'
+    },
     props: [
       {
         test: 'mode',

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

@@ -1,43 +1,41 @@
-const { parseMustache } = require('../../../../template-compiler/compiler')
-const normalize = require('../../../../utils/normalize')
 const TAG_NAME = 'component'
 
-/** is 属性格式化为中划线(-)连接 */
-const formatPropIs = (obj, data) => {
-  const parsed = parseMustache(obj.value)
-  let value = parsed.result
-  if (parsed.hasBinding) value = value.slice(1, -1)
-  const el = data.el
-  if (el) {
-    const injectWxsProp = {
-      injectWxsPath: '~' + normalize.lib('runtime/utils.wxs'),
-      injectWxsModuleName: '__wxsUtils__'
-    }
-    if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
-      el.injectWxsProps.push(injectWxsProp)
-    } else {
-      el.injectWxsProps = [injectWxsProp]
-    }
-  }
-  return {
-    name: 'is',
-    value: `{{__wxsUtils__.humpToLine(${value})}}`
-  }
-}
+/** is 属性格式化为中划线(-)连接 （弃用，新方案：https://github.com/didi/mpx/pull/2228） */
+// const formatPropIs = (obj, data) => {
+//   const parsed = parseMustache(obj.value)
+//   let value = parsed.result
+//   if (parsed.hasBinding) value = value.slice(1, -1)
+//   const el = data.el
+//   if (el) {
+//     const injectWxsProp = {
+//       injectWxsPath: '~' + normalize.lib('runtime/utils.wxs'),
+//       injectWxsModuleName: '__wxsUtils__'
+//     }
+//     if (el.injectWxsProps && Array.isArray(el.injectWxsProps)) {
+//       el.injectWxsProps.push(injectWxsProp)
+//     } else {
+//       el.injectWxsProps = [injectWxsProp]
+//     }
+//   }
+//   return {
+//     name: 'is',
+//     value: `{{__wxsUtils__.humpToLine(${value})}}`
+//   }
+// }
 
 module.exports = function () {
   return {
     test: TAG_NAME,
     props: [
-      {
-        test: 'is',
-        ali (obj, data) {
-          return formatPropIs(obj, data)
-        },
-        swan (obj, data) {
-          return formatPropIs(obj, data)
-        }
-      }
+      // {
+      //   test: 'is',
+      //   ali (obj, data) {
+      //     return formatPropIs(obj, data)
+      //   },
+      //   swan (obj, data) {
+      //     return formatPropIs(obj, data)
+      //   }
+      // }
     ]
   }
 }

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

@@ -8,6 +8,18 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-slider'
     },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-slider'
+    },
     props: [
       {
         test: /^color$/,

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

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'slider', 'audio', 'camera', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

package/lib/react/processJSON.js

@@ -12,11 +12,8 @@ const { transSubpackage } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
-const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
-const mpxViewPath = normalize.lib('runtime/components/react/dist/mpx-view.jsx')
-const mpxTextPath = normalize.lib('runtime/components/react/dist/mpx-text.jsx')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -42,23 +39,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,
@@ -137,45 +149,6 @@ module.exports = function (jsonContent, {
     isShow: true
   }
 
-  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
-    const componentPlaceholder = jsonObj.componentPlaceholder || {}
-    if (componentPlaceholder[name]) return
-    componentPlaceholder[name] = placeholder
-    jsonObj.componentPlaceholder = componentPlaceholder
-    if (placeholderEntry && !jsonObj.usingComponents[placeholder]) jsonObj.usingComponents[placeholder] = placeholderEntry
-  }
-
-  const fillInComponentsMap = (name, entry, tarRoot) => {
-    const { resource, outputPath } = entry
-    const { resourcePath } = parseRequest(resource)
-    tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-    componentsMap[resourcePath] = outputPath
-    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-    localComponentsMap[name] = {
-      resource: addQuery(resource, {
-        isComponent: true,
-        outputPath
-      }),
-      async: tarRoot
-    }
-  }
-
-  const normalizePlaceholder = (placeholder) => {
-    if (typeof placeholder === 'string') {
-      const placeholderMap = mode === 'ali'
-        ? {
-          view: { name: 'mpx-view', resource: mpxViewPath },
-          text: { name: 'mpx-text', resource: mpxTextPath }
-        }
-        : {}
-      placeholder = placeholderMap[placeholder] || { name: placeholder }
-    }
-    if (!placeholder.name) {
-      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
-    }
-    return placeholder
-  }
-
   const processTabBar = (tabBar, callback) => {
     if (tabBar) {
       tabBar = Object.assign({}, defaultTabbar, tabBar)
@@ -345,38 +318,34 @@ 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, entry = {}, { tarRoot, placeholder } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder, resourcePath } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
-          fillInComponentsMap(name, entry, tarRoot)
           const { relativePath } = entry
 
-          if (tarRoot) {
+          tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+
+          resolveResourcePathMap.set(name, resourcePath)
+          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
+
+          fillInComponentsMap(name, entry, tarRoot)
+          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) {
-              placeholder = normalizePlaceholder(placeholder)
-              if (placeholder.resource) {
-                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
-                  if (err) return callback(err)
-                  fillInComponentPlaceholder(name, placeholder.name, entry)
-                  fillInComponentsMap(placeholder.name, entry, '')
-                  callback()
-                })
-              } else {
-                fillInComponentPlaceholder(name, placeholder.name)
-                callback()
-              }
-            } else {
-              if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
-                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
-                emitError(errMsg)
-              }
-              callback()
+              const { name, entry } = placeholder
+              fillInComponentsMap(name, entry, '')
             }
-          } else {
             callback()
-          }
-        })
-      }, callback)
+          })
+        }, callback)
+      })
     } else {
       callback()
     }
@@ -394,7 +363,6 @@ module.exports = function (jsonContent, {
       callback()
     }
   }
-
   async.parallel([
     (callback) => {
       // 添加首页标识

package/lib/react/processStyles.js

@@ -15,12 +15,12 @@ module.exports = function (styles, {
   if (styles.length) {
     const warn = (msg) => {
       loaderContext.emitWarning(
-        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style warning][' + loaderContext.resource + ']: ' + msg)
       )
     }
     const error = (msg) => {
       loaderContext.emitError(
-        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
+        new Error('[Mpx style error][' + loaderContext.resource + ']: ' + msg)
       )
     }
     const { mode, srcMode } = loaderContext.getMpx()
@@ -52,6 +52,7 @@ module.exports = function (styles, {
           filename: loaderContext.resourcePath,
           mode,
           srcMode,
+          ctorType,
           warn,
           error
         })

package/lib/react/processTemplate.js

@@ -46,22 +46,22 @@ 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 react native 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 react native mode temporarily, we will support it in the future!'))
     }
 
     if (template.content) {
       const templateSrcMode = template.mode || srcMode
       const warn = (msg) => {
         loaderContext.emitWarning(
-          new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+          new Error('[Mpx template warning][' + 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, {
@@ -113,7 +113,7 @@ module.exports = function (template, {
         output += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
       }
 
-      const rawCode = genNode(root)
+      const rawCode = genNode(root, true)
       if (rawCode) {
         try {
           const ignoreMap = Object.assign({
@@ -130,7 +130,7 @@ module.exports = function (template, {
   return ${bindResult.code}
 };\n`
         } catch (e) {
-          error(`Invalid render function generated by the template, please check!
+          error(`[Mpx template error]: Invalid render function generated by the template, please check!
 Error code:
 ${rawCode}
 Error Detail:

package/lib/react/script-helper.js

@@ -4,16 +4,11 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const addQuery = require('../utils/add-query')
-const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
 
-function getBuiltInComponentRequest (component) {
-  return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
-}
-
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
     return `/* webpackChunkName: "${chunkName}/index" */`
@@ -26,8 +21,8 @@ function getAsyncSuspense (type, moduleId, componentRequest, componentName, chun
   type: ${JSON.stringify(type)},
   moduleId: ${JSON.stringify(moduleId)},
   chunkName: ${JSON.stringify(chunkName)},
-  getFallback: ${getFallback},
-  getLoading: ${getLoading},
+  ${getFallback ? `getFallback: ${getFallback},` : ''}
+  ${getLoading ? `getLoading: ${getLoading},` : ''}
   getChildren () {
     return import(${getAsyncChunkName(chunkName)}${componentRequest}).then(function (res) {
       return getComponent(res, {displayName: ${JSON.stringify(componentName)}})
@@ -95,22 +90,17 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
         if (placeholder) {
           if (localComponentsMap[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!`)
               )
             }
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
             getFallback = getComponentGetter(getComponent(placeholderRequest, placeholder))
           } else {
-            const tag = `mpx-${placeholder}`
-            if (isBuildInReactTag(tag)) {
-              getFallback = getComponentGetter(getBuiltInComponent(getBuiltInComponentRequest(tag)))
-            } else {
-              loaderContext.emitError(
-                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
-              )
-            }
+            loaderContext.emitError(
+              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component or custom component, please check!`)
+            )
           }
         } else {
           loaderContext.emitError(

package/lib/react/style-helper.js

@@ -1,5 +1,6 @@
 const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
+const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
@@ -7,8 +8,8 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
-  const classMap = {}
+function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
+  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
 
   const root = postcss.parse(content, {
     from: filename
@@ -36,6 +37,13 @@ function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
     error
   })
 
+  // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
+  root.walkAtRules(rule => {
+    if (rule.name !== 'media') {
+      warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
+    }
+  })
+
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {