Feat support native to h5

packages/core/src/platform/builtInMixins/index.js

@@ -10,6 +10,7 @@ import pageScrollMixin from './pageScrollMixin'
 import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
+import setDataMixin from './setDataMixin'
 
 export default function getBuiltInMixins (options, type) {
   let bulitInMixins = []
@@ -24,7 +25,8 @@ export default function getBuiltInMixins (options, type) {
       getTabBarMixin(type),
       pageRouteMixin(type),
       // 由于relation可能是通过mixin注入的，不能通过当前的用户options中是否存在relations来简单判断是否注入该项mixin
-      relationsMixin(type)
+      relationsMixin(type),
+      setDataMixin(type)
     ]
   } else {
     // 此为差异抹平类mixins，原生模式下也需要注入也抹平平台差异

packages/core/src/platform/builtInMixins/setDataMixin.web.js

@@ -0,0 +1,28 @@
+import { isObject, isFunction, error } from '@mpxjs/utils'
+
+export default function setDataMixin () {
+  return {
+    beforeCreate () {
+      Object.defineProperty(this, 'data', {
+        get () {
+          return this.$data
+        },
+        configurable: true
+      })
+    },
+    methods: {
+      setData (data, callback) {
+        if (!isObject(data)) {
+          error(`The data entry type of the setData method must be object, The type of data ${data} is incorrect`)
+          return
+        }
+        Object.keys(data).forEach(key => {
+          this[key] = data[key]
+        })
+        if (callback && isFunction(callback)) {
+          this.$nextTick(callback.bind(this))
+        }
+      }
+    }
+  }
+}

packages/webpack-plugin/lib/index.js

@@ -1589,14 +1589,14 @@ try {
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
-
         if (mpx.mode === 'web') {
           const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
+          let nativeLoaderIndex = -1
           loaders.forEach((loader, index) => {
             const currentLoader = toPosix(loader.loader)
             if (currentLoader.includes('node_modules/css-loader') && cssLoaderIndex === -1) {
@@ -1605,6 +1605,8 @@ try {
               vueStyleLoaderIndex = index
             } else if (currentLoader.includes(styleCompilerPath) && mpxStyleLoaderIndex === -1) {
               mpxStyleLoaderIndex = index
+            } else if (currentLoader.includes('native-loader')) {
+              nativeLoaderIndex = index
             }
           })
           if (mpxStyleLoaderIndex === -1) {
@@ -1621,6 +1623,14 @@ try {
               })
             }
           }
+          if (queryObj.isNative && nativeLoaderIndex !== loaders.length - 1) {
+            loaders.push({
+              loader: require.resolve('@vue/vue-loader-v15/lib/index.js')
+            })
+            loaders.push({
+              loader: require.resolve(nativeLoaderPath)
+            })
+          }
         }
 
         createData.request = stringifyLoadersAndResource(loaders, createData.resource)

packages/webpack-plugin/lib/json-compiler/helper.js

@@ -92,8 +92,12 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = getOutputPath(resourcePath, 'component')
         }
       }
-      if (isScript(ext) && mode !== 'web') {
-        resource = `!!${nativeLoaderPath}!${resource}`
+      if (ext === '.js') {
+        if (mode === 'web') {
+          resource = `${resource}?isNative=true`
+        } else {
+          resource = `!!${nativeLoaderPath}!${resource}?isNative=true`
+        }
       }
 
       const entry = getDynamicEntry(resource, 'component', outputPath, tarRoot, relativePath)

packages/webpack-plugin/lib/native-loader.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const JSON5 = require('json5')
+const fs = require('fs')
 const parseRequest = require('./utils/parse-request')
 const config = require('./config')
 const createHelpers = require('./helpers')
@@ -11,6 +12,11 @@ const getRulesRunner = require('./platform')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const processTemplate = require('./web/processTemplate')
+const processStyles = require('./web/processStyles')
+const processJSON = require('./web/processJSON')
+const processScript = require('./web/processScript')
+const RecordVueContentDependency = require('./dependencies/RecordVueContentDependency')
 
 // todo native-loader考虑与mpx-loader或加强复用，原生组件约等于4个区块都为src的.mpx文件
 module.exports = function (content) {
@@ -54,6 +60,8 @@ module.exports = function (content) {
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
   const hasComment = false
   const isNative = true
+  const parts = {}
+  let output = ''
 
   const checkFileExists = (extName, callback) => {
     this.resolve(parsed.dir, resourceName + extName, callback)
@@ -140,6 +148,36 @@ module.exports = function (content) {
         })
       }, callback)
     },
+    (callback) => {
+      if (mode === 'web') {
+        async.forEachOf(typeExtMap, (ext, key, callback) => {
+          // 检测到jsonjs或cssLang时跳过对应类型文件检测
+          if (typeResourceMap[key]) {
+            fs.readFile(typeResourceMap[key], (err, content) => {
+              if (err) return callback(err)
+              if (key === 'styles') {
+                parts[key] = [{
+                  content: content.toString('utf-8'),
+                  tag: 'style',
+                  attrs: {}
+                }]
+              } else {
+                parts[key] = {
+                  content: content.toString('utf-8'),
+                  tag: key,
+                  attrs: {}
+                }
+              }
+              callback()
+            })
+          } else {
+            callback()
+          }
+        }, callback)
+      } else {
+        callback()
+      }
+    },
     (callback) => {
       getJSONContent({
         src: typeResourceMap.json,
@@ -201,6 +239,76 @@ module.exports = function (content) {
       if (json.componentPlaceholder) {
         componentPlaceholder = componentPlaceholder.concat(Object.values(json.componentPlaceholder))
       }
+
+      if (mode === 'web') {
+        return async.waterfall([
+          (callback) => {
+            async.parallel([
+              (callback) => {
+                processTemplate(parts.template, {
+                  loaderContext,
+                  hasScoped,
+                  hasComment,
+                  isNative,
+                  srcMode,
+                  moduleId,
+                  ctorType,
+                  usingComponents: [],
+                  componentGenerics: {}
+                }, callback)
+              },
+              (callback) => {
+                processStyles(parts.styles, {
+                  ctorType,
+                  autoScope,
+                  moduleId
+                }, callback)
+              },
+              (callback) => {
+                processJSON(parts.json, {
+                  loaderContext,
+                  pagesMap,
+                  componentsMap
+                }, callback)
+              }
+            ], (err, res) => {
+              callback(err, res)
+            })
+          },
+          ([templateRes, stylesRes, jsonRes], callback) => {
+            output += templateRes.output
+            output += stylesRes.output
+            output += jsonRes.output
+            if (ctorType === 'app' && jsonRes.jsonObj.window && jsonRes.jsonObj.window.navigationBarTitleText) {
+              mpx.appTitle = jsonRes.jsonObj.window.navigationBarTitleText
+            }
+
+            processScript(parts.script, {
+              loaderContext,
+              ctorType,
+              srcMode,
+              moduleId,
+              isProduction,
+              componentGenerics: {},
+              jsonConfig: jsonRes.jsonObj,
+              outputPath: queryObj.outputPath || '',
+              tabBarMap: jsonRes.tabBarMap,
+              tabBarStr: jsonRes.tabBarStr,
+              builtInComponentsMap: templateRes.builtInComponentsMap,
+              genericsInfo: templateRes.genericsInfo,
+              wxsModuleMap: templateRes.wxsModuleMap,
+              localComponentsMap: jsonRes.localComponentsMap,
+              localPagesMap: jsonRes.localPagesMap
+            }, callback)
+          }
+        ], (err, scriptRes) => {
+          if (err) return callback(err)
+          output += scriptRes.output
+          this._module.addPresentationalDependency(new RecordVueContentDependency(filePath, output))
+          callback(null, output)
+        })
+      }
+
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -241,7 +349,7 @@ module.exports = function (content) {
       }
 
       // 注入模块id及资源路径
-      let output = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+      output = `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
         output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }

packages/webpack-plugin/lib/platform/template/wx/index.js

@@ -387,6 +387,10 @@ module.exports = function getSpec ({ warn, error }) {
             modifierStr
           }
           const isComponent = usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
+          const parsed = parseMustacheWithContext(value)
+          if (parsed.hasBinding) {
+            value = parsed.result
+          }
           // 记录event监听信息用于后续判断是否需要使用内置基础组件
           el.hasEvent = true
           const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })

packages/webpack-plugin/lib/selector.js

@@ -7,7 +7,8 @@ module.exports = function (content) {
   this.cacheable()
   // 兼容处理处理ts-loader中watch-run/updateFile逻辑，直接跳过当前loader及后续的loader返回内容
   const pathExtname = path.extname(this.resourcePath)
-  if (!['.vue', '.mpx'].includes(pathExtname)) {
+  const { queryObj } = parseRequest(this.resource)
+  if (!['.vue', '.mpx'].includes(pathExtname) && !queryObj.isNative) {
     this.loaderIndex = tsWatchRunLoaderFilter(this.loaders, this.loaderIndex)
     return content
   }
@@ -17,7 +18,6 @@ module.exports = function (content) {
     return content
   }
 
-  const { queryObj } = parseRequest(this.resource)
   const ctorType = queryObj.ctorType
   const type = queryObj.type
   const index = queryObj.index || 0