@mpxjs/webpack-plugin 2.9.38 → 2.9.40

package/lib/runtime-render/gen-mpx-custom-element.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+module.exports = function (packageName) {
+  const baseName = 'mpx-custom-element'
+  const rawFile = baseName + (packageName === 'main' ? '-main' : '')
+  const filePath = path.resolve(__dirname, `${rawFile}.mpx`)
+  const request = `${filePath}?mpxCustomElement&isComponent&p=${packageName}`
+
+  return {
+    request,
+    outputPath: baseName + '-' + packageName
+  }
+}

package/lib/runtime-render/mpx-custom-element-main.mpx

@@ -0,0 +1,18 @@
+<template>
+  <wxs module="xs" src="~@mpxjs/template-engine/dist/utils.wxs"/>
+</template>
+
+<script src="./custom-element-script.js"></script>
+
+<style>
+
+</style>
+
+<script name="json">
+
+const json = require('./custom-element-json')
+
+module.exports = {
+  ...json
+}
+</script>

package/lib/runtime-render/mpx-custom-element.mpx

@@ -0,0 +1,18 @@
+<template>
+  <wxs module="xs" src="~@mpxjs/template-engine/dist/utils.wxs"/>
+</template>
+
+<script src="./custom-element-script.js"></script>
+
+<style>
+
+</style>
+
+<script name="json">
+
+const json = require('./custom-element-json')
+
+module.exports = {
+  ...json
+}
+</script>

package/lib/style-compiler/index.js

@@ -1,14 +1,16 @@
 const path = require('path')
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
-const { MPX_ROOT_VIEW } = require('../utils/const')
+const { MPX_ROOT_VIEW, MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
+const cssArrayList = require('./plugins/css-array-list')
 const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
+const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency')
 
 module.exports = function (css, map) {
   this.cacheable()
@@ -22,6 +24,9 @@ module.exports = function (css, map) {
   const isApp = resourcePath === appInfo.resourcePath
   const transRpxRulesRaw = mpx.transRpxRules
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
+  const runtimeCompile = queryObj.isDynamic
+  const index = queryObj.index || 0
+  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
 
   const transRpxFn = mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
@@ -85,6 +90,11 @@ module.exports = function (css, map) {
 
     const finalPlugins = config.prePlugins.concat(plugins, config.plugins)
 
+    const cssList = []
+    if (runtimeCompile) {
+      finalPlugins.push(cssArrayList(cssList))
+    }
+
     return postcss(finalPlugins)
       .process(css, options)
       .then(result => {
@@ -128,6 +138,13 @@ module.exports = function (css, map) {
           }
         }
 
+        if (runtimeCompile) {
+          // 包含了运行时组件的 style 模块必须每次都创建（但并不是每次都需要build），用于收集组件节点信息，传递信息以禁用父级extractor的缓存
+          this.emitFile(MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
+          this._module.addPresentationalDependency(new RecordRuntimeInfoDependency(packageName, resourcePath, { type: 'style', info: cssList, index }))
+          return cb(null, '')
+        }
+
         const map = result.map && result.map.toJSON()
         cb(null, result.css, map)
         return null // silence bluebird warning

package/lib/style-compiler/plugins/css-array-list.js

@@ -0,0 +1,26 @@
+module.exports = (cssList = []) => {
+  // Work with options here
+
+  return {
+    postcssPlugin: 'css-array-list',
+    /*
+    Root (root, postcss) {
+      // Transform CSS AST here
+    }
+    */
+
+    Rule (rule) {
+      // todo 特殊字符的处理，vtree 内部是否有做处理
+      const selector = rule.selector.trim().replace('\n', '')
+      let decls = ''
+      if (rule.nodes && rule.nodes.length) {
+        rule.nodes.forEach(item => {
+          decls += `${item.prop}: ${item.value}; `
+        })
+      }
+      cssList.push([selector, decls])
+    }
+  }
+}
+
+module.exports.postcss = true