DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: reverse to the previous version

This commit is contained in:
dntzhang 2019-10-01 15:55:01 +08:00
parent a892394f80
commit 3834fad93d
6 changed files with 143 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/omi-cli/package.json
View File

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

219
packages/omi-cli/template/mp/gulpfile.js
View File

@ -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,107 +6,89 @@ 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)
.src('src/mp/components/*/*.js')
.pipe(
tap(file => {
let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path)
let dir = path.dirname(file.path)
let arr = dir.split(/\\|\//)
let name = arr[arr.length-1]
let preName = arr[arr.length-2];
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'
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)
`
),
Buffer.from(
file.contents
.toString()
.replace('Component({',
`const mpOption = function () {
return ({`)+`
}`),
Buffer.from(`
class Element extends WeElement {
static props = mpOption().properties
// 判断组件下面是不是压缩过
if(js.includes('webpackBootstrap')){
return
}
data = mpOption().data
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'"}
render = render
`
),
Buffer.from(
file.contents
.toString()
.replace('Component({',
`const mpOption = function () {
return ({`)+`
}`),
Buffer.from(`
class Element extends WeElement {
static props = mpOption().properties
css = css
data = mpOption().data
beforeRender() {}
render = render
beforeUpdate() {}
css = css
afterUpdate() {}
beforeRender() {}
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)
}
})
}
beforeUpdate() {}
uninstall = mpOption().detached || function() {}
afterUpdate() {}
installed = function() {
this._mpOption.attached && this._mpOption.attached.call(this)
this._mpOption.ready && this._mpOption.ready.call(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)
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)
`)
])
}
})
}
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/'))
})
@ -125,10 +107,9 @@ 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 hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json))
let importStr = json2import(json, dir)
let importStr = json2import(json)
file.contents = Buffer.concat([
Buffer.from(
`${importStr}import appCss from '../../app.wxss'
@ -141,7 +122,7 @@ import { setData } from '../../../utils/set-data'
Buffer.from(
file.contents
.toString()
.replace('Page({',
.replace('Page({',
`const mpOption = function () {
return ({`)+`
}`
@ -270,71 +251,10 @@ function route(arr) {
return result.join('\r\n')
}
// 打包生成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) {
Object.keys(json.usingComponents).forEach((key, i) => {
html = replaceComponentOnPath(
key,
html,
fileComponentDom(path.join(dir, json.usingComponents[key]))
);
})
return html;
}
function json2import(json, dir) {
function json2import(json) {
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]}'`)
})
}
@ -403,4 +323,3 @@ 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'])

219
packages/omi-mp/gulpfile.js
View File

@ -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,107 +6,89 @@ 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)
.src('src/mp/components/*/*.js')
.pipe(
tap(file => {
let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path)
let dir = path.dirname(file.path)
let arr = dir.split(/\\|\//)
let name = arr[arr.length-1]
let preName = arr[arr.length-2];
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'
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)
`
),
Buffer.from(
file.contents
.toString()
.replace('Component({',
`const mpOption = function () {
return ({`)+`
}`),
Buffer.from(`
class Element extends WeElement {
static props = mpOption().properties
// 判断组件下面是不是压缩过
if(js.includes('webpackBootstrap')){
return
}
data = mpOption().data
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'"}
render = render
`
),
Buffer.from(
file.contents
.toString()
.replace('Component({',
`const mpOption = function () {
return ({`)+`
}`),
Buffer.from(`
class Element extends WeElement {
static props = mpOption().properties
css = css
data = mpOption().data
beforeRender() {}
render = render
beforeUpdate() {}
css = css
afterUpdate() {}
beforeRender() {}
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)
}
})
}
beforeUpdate() {}
uninstall = mpOption().detached || function() {}
afterUpdate() {}
installed = function() {
this._mpOption.attached && this._mpOption.attached.call(this)
this._mpOption.ready && this._mpOption.ready.call(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)
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)
`)
])
}
})
}
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/'))
})
@ -125,10 +107,9 @@ 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 hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json))
let importStr = json2import(json, dir)
let importStr = json2import(json)
file.contents = Buffer.concat([
Buffer.from(
`${importStr}import appCss from '../../app.wxss'
@ -141,7 +122,7 @@ import { setData } from '../../../utils/set-data'
Buffer.from(
file.contents
.toString()
.replace('Page({',
.replace('Page({',
`const mpOption = function () {
return ({`)+`
}`
@ -270,71 +251,10 @@ function route(arr) {
return result.join('\r\n')
}
// 打包生成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) {
Object.keys(json.usingComponents).forEach((key, i) => {
html = replaceComponentOnPath(
key,
html,
fileComponentDom(path.join(dir, json.usingComponents[key]))
);
})
return html;
}
function json2import(json, dir) {
function json2import(json) {
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]}'`)
})
}
@ -403,4 +323,3 @@ 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'])

2
packages/omi-mp/src/mp/components/my-ele/my-ele.js
View File

@ -88,7 +88,7 @@ function css() {
function render() {
const { name, age } = this.data;
return h("div", null, [
h("button", { ontap: this.myMethods }, [
h("button", { ontap: this.myMethods, onclick: this.myMethods }, [
`Click me will log dntzhang to the console panel`
]),
h("div", null, [`props - name:${name}, age:${age}`]),

3
packages/omi-mp/src/mp/pages/index/index.js
View File

@ -131,7 +131,8 @@ function render() {
ontap: this.bindViewTap,
class: `userinfo-avatar`,
src: userInfo.avatarUrl,
mode: `cover`
mode: `cover`,
onclick: this.bindViewTap
},
[]
),

2
packages/omi-mp/src/mp/pages/logs/logs.js
View File

@ -82,7 +82,7 @@ function render() {
logs.map((log, index) => {
return h(
"block",
{},
{ style: { width: "100%" } },
h("span", { class: `log-item` }, [`${index + 1}. ${log}`]),
h("span", { class: `log-item` }, [`by omi-mp`])
);