fix: fix omi-mp build error

packages/omi-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi-cli",
-  "version": "3.4.8",
+  "version": "3.4.9",
   "description": "Create website, app with no build configuration. be friendly to [Omi](https://github.com/Tencent/omi) framework.",
   "main": "bin/omi",
   "engines": {

packages/omi-cli/template/mp/gulpfile.js

@@ -1,4 +1,4 @@
-let gulp = require('gulp')
+let gulp = require('gulp') 
 let path = require('path')
 let tap = require('gulp-tap')
 let compile = require('./scripts/mp/index')
@@ -6,89 +6,107 @@ let fs = require('fs')
 let compileWxss = require('./scripts/mp/wxss')
 var prettier = require('prettier')
 
+const WXCOMPONENT_ENV = 'WXCOMPONENT';
+
 gulp.task('components', ['copy'], () => {
+  const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV;
+  const src = isWxComponent ? 'src/mp/components/**/*.js' : 'src/mp/components/*/*.js'; // 判断是否微信组件 
+
   return gulp
-    .src('src/mp/components/*/*.js')
+    .src(src)
     .pipe(
       tap(file => {
-        let dir = path.dirname(file.path)
+        let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path)
         let arr = dir.split(/\\|\//)
         let name = arr[arr.length-1]
-        if(path.basename(file.path) == name+'.js') {
-          let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8')
-          let json = require(dir + '/' + name + '.json')
-          let importStr = json2import(json)
-          let hyperscript = compile(wxml)
-          file.contents = Buffer.concat([
-            Buffer.from(
-              `${importStr}import componentCss from './${name}.wxss'
-import { h, WeElement, rpx } from 'omi'
-import { setData } from '../../../utils/set-data'
+        let preName = arr[arr.length-2];
 
-  `
-            ),
-            Buffer.from(
-              file.contents
-                .toString()
-                .replace('Component({',
-                `const mpOption = function () {
-  return ({`)+`
-}`),
-            Buffer.from(`
-class Element extends WeElement {
-  static props = mpOption().properties
+        try{
+          if(path.basename(file.path) == name+'.js') {
+            let filePathComponentDomStr = fileComponentDom(file.path);
+            let contentPath = isWxComponent ? dir : dir + '/' + name;
+            let wxml = fs.readFileSync(contentPath + '.wxml', 'utf8')
+            let js = fs.readFileSync(contentPath + '.js', 'utf8')
+            let json = require(contentPath + '.json')
+            let importStr = json2import(json, dir)
+            let hyperscript = compile(wxml)
 
-  data = mpOption().data
+            // 判断组件下面是不是压缩过 
+            if(js.includes('webpackBootstrap')){
+              return
+            }
 
-  render = render
+            file.contents = Buffer.concat([
+              Buffer.from(
+                `${importStr}import componentCss from './${name}.wxss'
+  import { h, WeElement, rpx } from 'omi'
+  import { setData } from ${isWxComponent && preName === 'components' ? "'../../utils/set-data'" : "'../../../utils/set-data'"}
 
-  css = css
+    `
+              ),
+              Buffer.from(
+                file.contents
+                  .toString()
+                  .replace('Component({', 
+                  `const mpOption = function () {
+    return ({`)+`
+  }`),
+              Buffer.from(`
+  class Element extends WeElement {
+    static props = mpOption().properties
 
-  beforeRender() {}
+    data = mpOption().data
 
-  beforeUpdate() {}
+    render = render
 
-  afterUpdate() {}
+    css = css
 
-  install = function() {
-    this.properties = this.props
-    Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
-    this._mpOption = mpOption()
-    this._mpOption.created && this._mpOption.created.call(this)
-    Object.keys(this._mpOption.methods).forEach(key => {
-      if(typeof this._mpOption.methods[key] === 'function'){
-        this[key] = this._mpOption.methods[key].bind(this)
-      }
-    })
-  }
+    beforeRender() {}
 
-  uninstall = mpOption().detached || function() {}
+    beforeUpdate() {}
 
-  installed = function() {
-    this._mpOption.attached && this._mpOption.attached.call(this)
-    this._mpOption.ready && this._mpOption.ready.call(this)
-  }
+    afterUpdate() {}
 
-  adoptedCallback = mpOption().moved || function() {}
-
-  triggerEvent = function(name, data) {
-    this.fire(name, data)
-  }
-
-  setData = setData
-}
-
-function css() {
-  return rpx(componentCss)
-}
-
-${prettier.format(hyperscript, { parser: "babel" })}
-
-customElements.define('${name}', Element)
-          `)
-          ])
+    install = function() {
+      this.properties = this.props
+      Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
+      this._mpOption = mpOption()
+      this._mpOption.created && this._mpOption.created.call(this)
+      Object.keys(this._mpOption.methods).forEach(key => {
+        if(typeof this._mpOption.methods[key] === 'function'){
+          this[key] = this._mpOption.methods[key].bind(this)
         }
       })
+    }
+
+    uninstall = mpOption().detached || function() {}
+
+    installed = function() {
+      this._mpOption.attached && this._mpOption.attached.call(this)
+      this._mpOption.ready && this._mpOption.ready.call(this)
+    }
+
+    adoptedCallback = mpOption().moved || function() {}
+
+    triggerEvent = function(name, data) {
+      this.fire(name, data)
+    }
+
+    setData = setData
+  }
+
+  function css() {
+    return rpx(componentCss)
+  }
+
+  ${prettier.format(hyperscript, { parser: "babel" })}
+
+  customElements.define('${filePathComponentDomStr}', Element)
+            `)
+            ])
+          }
+        }catch(e){}
+      })
     )
     .pipe(gulp.dest('src/mp/components/'))
 })
@@ -107,9 +125,10 @@ gulp.task('pages', ['copy'], () => {
         let name = arr[arr.length-1]
         if(path.basename(file.path) == name+'.js') {
           let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8')
-          let hyperscript = compile(wxml)
           let json = require(dir + '/' + name + '.json')
-          let importStr = json2import(json)
+          let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json))
+
+          let importStr = json2import(json, dir)
           file.contents = Buffer.concat([
             Buffer.from(
               `${importStr}import appCss from '../../app.wxss'
@@ -122,7 +141,7 @@ import { setData } from '../../../utils/set-data'
             Buffer.from(
               file.contents
                 .toString()
-                .replace('Page({',
+                .replace('Page({', 
 `const mpOption = function () {
   return ({`)+`
 }`
@@ -143,6 +162,7 @@ class Element extends WeElement {
 
   install() {
     this.properties = this.props
+    this.data = this.data || {};
     Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
     this._mpOption = mpOption()
     Object.keys(this._mpOption).forEach(key => {
@@ -251,7 +271,44 @@ function route(arr) {
   return result.join('\r\n')
 }
 
-function json2import(json) {
+// 打包生成web component 转换统一src 路径
+function fileComponentDom(filePth) { 
+  let filePathArray = filePth.replace(__dirname, '').replace('.js', '').split('/');
+  filePathArray.shift();  
+  
+  return 'wx-h5-' + filePathArray.join('-');
+}
+
+// 组件转换绝对路径 不再需要依赖强匹配目录文件夹
+function replaceComponentOnPath(tag, str, tagName) {
+  const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g');
+
+  return str.replace(reg, function(match, $1, $2) {
+      if ($1) {
+          return '<' + tagName;
+      }
+      return '</' + tagName + '>'
+  });
+}
+
+// 匹配转换html 转换 目录文件夹名字
+function replaceWxmlComponentHtml(dir, html,json) {
+  if(json.usingComponents){
+    Object.keys(json.usingComponents).forEach((key, i) => {
+      html = replaceComponentOnPath(
+        key,
+        html,
+        fileComponentDom(path.join(dir, json.usingComponents[key]))
+      );
+    })
+  }
+
+
+  return html;
+}
+
+
+function json2import(json, dir) {
   let arr = []
   if (json.usingComponents) {
     Object.keys(json.usingComponents).forEach(key => {
@@ -259,6 +316,40 @@ function json2import(json) {
     })
   }
   return arr.join('\r\n') + '\r\n'
+//   let arr = []
+//   if (json.usingComponents) {
+
+//     Object.keys(json.usingComponents).forEach(key => {
+//       let usingArry = path.resolve(dir, json.usingComponents[key]).split('/');
+//       usingArry.pop();
+//       let wxssPath = '';
+
+//       try{
+//         let indexWsxx = [...usingArry, 'index.wxss'].join('/');
+//         fs.statSync(indexWsxx);
+//         wxssPath = json.usingComponents[key];
+//       }catch(e){
+          
+//       }
+
+//       try{
+//         let keyWsxx = [...usingArry, key + '.wxss'].join('/');
+//         fs.statSync(keyWsxx);
+//         wxssPath = keyWsxx;
+//       }catch(e){
+          
+//       }
+
+//       wxssPath && arr.push(`import '${wxssPath}'`)
+
+//       // let wxml = fs.readFileSync(wxssPath, 'utf8')
+//       // console.log(Buffer.from(compileWxss(wxml)))
+
+//       // arr.push(Buffer.from(compileWxss(wxml)))
+//       arr.push(`import '${json.usingComponents[key]}'`)
+//     })
+//   }
+//   return arr.join('\r\n') + '\r\n'
 }
 
 function list2require(list) {
@@ -323,3 +414,4 @@ gulp.task('app-wxss', ['copy'], () => {
 })
 
 gulp.task('default', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch'])
+gulp.task('build', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route'])

packages/omi-mp/gulpfile.js

@@ -293,13 +293,16 @@ function replaceComponentOnPath(tag, str, tagName) {
 
 // 匹配转换html 转换 目录文件夹名字
 function replaceWxmlComponentHtml(dir, html,json) {
-  Object.keys(json.usingComponents).forEach((key, i) => {
-    html = replaceComponentOnPath(
-      key,
-      html,
-      fileComponentDom(path.join(dir, json.usingComponents[key]))
-    );
-  })
+  if(json.usingComponents){
+    Object.keys(json.usingComponents).forEach((key, i) => {
+      html = replaceComponentOnPath(
+        key,
+        html,
+        fileComponentDom(path.join(dir, json.usingComponents[key]))
+      );
+    })
+  }
+
 
   return html;
 }

packages/omi-mp/src/mp/components/my-child/my-child.js

@@ -1,11 +1,11 @@
 
 import componentCss from './my-child.wxss'
-import { h, WeElement, rpx } from 'omi'
-import { setData } from '../../../utils/set-data'
+  import { h, WeElement, rpx } from 'omi'
+  import { setData } from '../../../utils/set-data'
 
-  // components/my-child/my-child.js
+    // components/my-child/my-child.js
 const mpOption = function () {
-  return ({
+    return ({
   /**
    * 组件的属性列表
    */
@@ -28,58 +28,58 @@ const mpOption = function () {
   }
 })
 
-}
-class Element extends WeElement {
-  static props = mpOption().properties
+  }
+  class Element extends WeElement {
+    static props = mpOption().properties
 
-  data = mpOption().data
+    data = mpOption().data
 
-  render = render
+    render = render
 
-  css = css
+    css = css
 
-  beforeRender() {}
+    beforeRender() {}
 
-  beforeUpdate() {}
+    beforeUpdate() {}
 
-  afterUpdate() {}
+    afterUpdate() {}
 
-  install = function() {
-    this.properties = this.props
-    Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
-    this._mpOption = mpOption()
-    this._mpOption.created && this._mpOption.created.call(this)
-    Object.keys(this._mpOption.methods).forEach(key => {
-      if(typeof this._mpOption.methods[key] === 'function'){
-        this[key] = this._mpOption.methods[key].bind(this)
-      }
-    })
+    install = function() {
+      this.properties = this.props
+      Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
+      this._mpOption = mpOption()
+      this._mpOption.created && this._mpOption.created.call(this)
+      Object.keys(this._mpOption.methods).forEach(key => {
+        if(typeof this._mpOption.methods[key] === 'function'){
+          this[key] = this._mpOption.methods[key].bind(this)
+        }
+      })
+    }
+
+    uninstall = mpOption().detached || function() {}
+
+    installed = function() {
+      this._mpOption.attached && this._mpOption.attached.call(this)
+      this._mpOption.ready && this._mpOption.ready.call(this)
+    }
+
+    adoptedCallback = mpOption().moved || function() {}
+
+    triggerEvent = function(name, data) {
+      this.fire(name, data)
+    }
+
+    setData = setData
   }
 
-  uninstall = mpOption().detached || function() {}
-
-  installed = function() {
-    this._mpOption.attached && this._mpOption.attached.call(this)
-    this._mpOption.ready && this._mpOption.ready.call(this)
+  function css() {
+    return rpx(componentCss)
   }
 
-  adoptedCallback = mpOption().moved || function() {}
-
-  triggerEvent = function(name, data) {
-    this.fire(name, data)
-  }
-
-  setData = setData
-}
-
-function css() {
-  return rpx(componentCss)
-}
-
-function render() {
+  function render() {
   return h("span", null, [`I am child component`]);
 }
 
 
-customElements.define('my-child', Element)
-          
+  customElements.define('wx-h5-src-mp-components-my-child-my-child', Element)
+            

packages/omi-mp/src/mp/components/my-ele/my-ele.js

@@ -1,11 +1,11 @@
 import '../my-child/my-child'
 import componentCss from './my-ele.wxss'
-import { h, WeElement, rpx } from 'omi'
-import { setData } from '../../../utils/set-data'
+  import { h, WeElement, rpx } from 'omi'
+  import { setData } from '../../../utils/set-data'
 
-  // components/my-ele/my-ele.js
+    // components/my-ele/my-ele.js
 const mpOption = function () {
-  return ({
+    return ({
   /**
    * 组件的属性列表
    */
@@ -37,55 +37,55 @@ const mpOption = function () {
   }
 })
 
-}
-class Element extends WeElement {
-  static props = mpOption().properties
+  }
+  class Element extends WeElement {
+    static props = mpOption().properties
 
-  data = mpOption().data
+    data = mpOption().data
 
-  render = render
+    render = render
 
-  css = css
+    css = css
 
-  beforeRender() {}
+    beforeRender() {}
 
-  beforeUpdate() {}
+    beforeUpdate() {}
 
-  afterUpdate() {}
+    afterUpdate() {}
 
-  install = function() {
-    this.properties = this.props
-    Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
-    this._mpOption = mpOption()
-    this._mpOption.created && this._mpOption.created.call(this)
-    Object.keys(this._mpOption.methods).forEach(key => {
-      if(typeof this._mpOption.methods[key] === 'function'){
-        this[key] = this._mpOption.methods[key].bind(this)
-      }
-    })
+    install = function() {
+      this.properties = this.props
+      Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
+      this._mpOption = mpOption()
+      this._mpOption.created && this._mpOption.created.call(this)
+      Object.keys(this._mpOption.methods).forEach(key => {
+        if(typeof this._mpOption.methods[key] === 'function'){
+          this[key] = this._mpOption.methods[key].bind(this)
+        }
+      })
+    }
+
+    uninstall = mpOption().detached || function() {}
+
+    installed = function() {
+      this._mpOption.attached && this._mpOption.attached.call(this)
+      this._mpOption.ready && this._mpOption.ready.call(this)
+    }
+
+    adoptedCallback = mpOption().moved || function() {}
+
+    triggerEvent = function(name, data) {
+      this.fire(name, data)
+    }
+
+    setData = setData
   }
 
-  uninstall = mpOption().detached || function() {}
-
-  installed = function() {
-    this._mpOption.attached && this._mpOption.attached.call(this)
-    this._mpOption.ready && this._mpOption.ready.call(this)
+  function css() {
+    return rpx(componentCss)
   }
 
-  adoptedCallback = mpOption().moved || function() {}
-
-  triggerEvent = function(name, data) {
-    this.fire(name, data)
-  }
-
-  setData = setData
-}
-
-function css() {
-  return rpx(componentCss)
-}
-
-function render() {
+  function render() {
   const { name, age } = this.data;
   return h("div", null, [
     h("button", { ontap: this.myMethods, onclick: this.myMethods }, [
@@ -97,5 +97,5 @@ function render() {
 }
 
 
-customElements.define('my-ele', Element)
-          
+  customElements.define('wx-h5-src-mp-components-my-ele-my-ele', Element)
+            

packages/omi-mp/src/mp/pages/index/index.js

@@ -89,6 +89,7 @@ class Element extends WeElement {
 
   install() {
     this.properties = this.props
+    this.data = this.data || {};
     Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
     this._mpOption = mpOption()
     Object.keys(this._mpOption).forEach(key => {

packages/omi-mp/src/mp/pages/logs/logs.js

@@ -51,6 +51,7 @@ class Element extends WeElement {
 
   install() {
     this.properties = this.props
+    this.data = this.data || {};
     Object.assign(this.data, JSON.parse(JSON.stringify(this.props)))
     this._mpOption = mpOption()
     Object.keys(this._mpOption).forEach(key => {
@@ -87,7 +88,11 @@ function render() {
         h("span", { class: `log-item` }, [`by omi-mp`])
       );
     }),
-    h("my-ele", { onmyevent: this.myEventHandler, name: `dntzhang` }, []),
+    h(
+      "wx-h5-src-mp-components-my-ele-my-ele",
+      { onmyevent: this.myEventHandler, name: `dntzhang` },
+      []
+    ),
     h("img", { src: require("../../images/wechat.png") }, [])
   ]);
 }