Merge pull request #47 from OuYancey/master
formate code style in src/component and webpack.config.js
This commit is contained in:
当耐特
GitHub
commit
23911adb5f
|
|
@ -1,6 +1,10 @@
|
|||
{
|
||||
"extends": "standard",
|
||||
"rules": {
|
||||
"indent": ["error", 4]
|
||||
// special alloyteam code style
|
||||
// @see: http://alloyteam.github.io/CodeGuide/#js-indentation
|
||||
"indent": ["error", 4],
|
||||
// @see: http://alloyteam.github.io/CodeGuide/#js-space
|
||||
"space-before-function-paren": ["error", "never"]
|
||||
}
|
||||
}
|
||||
324
src/component.js
324
src/component.js
|
|
@ -13,7 +13,7 @@ class Component {
|
|||
selfDataFirst: false,
|
||||
domDiffDisabled: false,
|
||||
scopedSelfCSS: false
|
||||
},option)
|
||||
}, option)
|
||||
this._omi_scopedSelfCSS = componentOption.scopedSelfCSS
|
||||
this._omi_preventSelfUpdate = componentOption.preventSelfUpdate
|
||||
this._omi_domDiffDisabled = componentOption.domDiffDisabled
|
||||
|
|
@ -31,12 +31,11 @@ class Component {
|
|||
Omi.instances[this.id] = this
|
||||
this.selfDataFirst = componentOption.selfDataFirst
|
||||
|
||||
this._omi_scoped_attr = Omi.STYLESCOPEDPREFIX + this.id
|
||||
//this.BODY_ELEMENT = document.createElement('body')
|
||||
this._omi_scoped_attr = Omi.STYLESCOPEDPREFIX + this.id
|
||||
// this.BODY_ELEMENT = document.createElement('body')
|
||||
this._preCSS = null
|
||||
this._omiGroupDataCounter = {}
|
||||
this._omi_installedHandlers = null
|
||||
|
||||
this._omi_installedHandlers = null
|
||||
}
|
||||
|
||||
install() {
|
||||
|
|
@ -45,28 +44,28 @@ class Component {
|
|||
installed() {
|
||||
}
|
||||
|
||||
onInstalled(handler){
|
||||
if(!this._omi_installedHandlers){
|
||||
onInstalled(handler) {
|
||||
if (!this._omi_installedHandlers) {
|
||||
this._omi_installedHandlers = []
|
||||
}
|
||||
this._omi_installedHandlers.push(handler)
|
||||
}
|
||||
|
||||
_execInstalledHandlers(){
|
||||
this._omi_installedHandlers&&this._omi_installedHandlers.forEach((handler)=>{
|
||||
_execInstalledHandlers() {
|
||||
this._omi_installedHandlers && this._omi_installedHandlers.forEach((handler) => {
|
||||
handler()
|
||||
})
|
||||
}
|
||||
|
||||
uninstall(){
|
||||
uninstall() {
|
||||
|
||||
}
|
||||
|
||||
afterUpdate(){
|
||||
afterUpdate() {
|
||||
|
||||
}
|
||||
|
||||
beforeUpdate(){
|
||||
beforeUpdate() {
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -78,14 +77,14 @@ class Component {
|
|||
|
||||
}
|
||||
|
||||
beforeRender(){
|
||||
beforeRender() {
|
||||
|
||||
}
|
||||
|
||||
useStore(store) {
|
||||
this.$$store = store
|
||||
let isInclude = false
|
||||
store.instances.forEach(instance=> {
|
||||
store.instances.forEach(instance => {
|
||||
if (instance.id === this.id) {
|
||||
isInclude = true
|
||||
}
|
||||
|
|
@ -95,23 +94,23 @@ class Component {
|
|||
}
|
||||
}
|
||||
|
||||
updateSelf(){
|
||||
updateSelf() {
|
||||
this.beforeUpdate()
|
||||
if (this.renderTo) {
|
||||
this._render(false, true)
|
||||
} else {
|
||||
if(this._omi_preventSelfUpdate) return;
|
||||
if (this._omi_preventSelfUpdate) return
|
||||
// update child node
|
||||
if(this._omi_removed ) {
|
||||
let hdNode = this._createHiddenNode()
|
||||
this.node.parentNode.replaceChild(hdNode,this.node)
|
||||
if (this._omi_removed) {
|
||||
let hdNode = this._createHiddenNode()
|
||||
this.node.parentNode.replaceChild(hdNode, this.node)
|
||||
this.node = hdNode
|
||||
}else{
|
||||
} else {
|
||||
morphdom(this.node, scopedEvent(this._childRender(this._omiChildStr, true), this.id), {
|
||||
ignoreAttr:this._getIgnoreAttr()
|
||||
ignoreAttr: this._getIgnoreAttr()
|
||||
})
|
||||
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]")
|
||||
this.node = document.querySelector('[' + this._omi_scoped_attr + ']')
|
||||
this._queryElements(this)
|
||||
this._fixForm()
|
||||
}
|
||||
|
|
@ -126,42 +125,41 @@ class Component {
|
|||
if (this.renderTo) {
|
||||
this._render(false, false, true)
|
||||
} else {
|
||||
if(this._omi_preventSelfUpdate) return;
|
||||
if (this._omi_preventSelfUpdate) return
|
||||
// update child node
|
||||
if(this._omi_removed ) {
|
||||
let hdNode = this._createHiddenNode()
|
||||
this.node.parentNode.replaceChild(hdNode,this.node)
|
||||
if (this._omi_removed) {
|
||||
let hdNode = this._createHiddenNode()
|
||||
this.node.parentNode.replaceChild(hdNode, this.node)
|
||||
this.node = hdNode
|
||||
}else{
|
||||
if(this._omi_domDiffDisabled){
|
||||
this.node.parentNode.replaceChild(morphdom.toElement(scopedEvent(this._childRender(this._omiChildStr, false, true), this.id)),this.node)
|
||||
}else {
|
||||
morphdom(this.node, scopedEvent(this._childRender(this._omiChildStr,false, true), this.id))
|
||||
} else {
|
||||
if (this._omi_domDiffDisabled) {
|
||||
this.node.parentNode.replaceChild(morphdom.toElement(scopedEvent(this._childRender(this._omiChildStr, false, true), this.id)), this.node)
|
||||
} else {
|
||||
morphdom(this.node, scopedEvent(this._childRender(this._omiChildStr, false, true), this.id))
|
||||
}
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]")
|
||||
this.node = document.querySelector('[' + this._omi_scoped_attr + ']')
|
||||
this._queryElements(this)
|
||||
this._fixForm()
|
||||
|
||||
this._fixForm()
|
||||
}
|
||||
}
|
||||
|
||||
//exec new element installed
|
||||
// exec new element installed
|
||||
this._childrenInstalledAfterUpdate(this)
|
||||
|
||||
this._childrenAfterUpdate(this)
|
||||
this.afterUpdate()
|
||||
}
|
||||
|
||||
_childrenBeforeUpdate(root){
|
||||
root.children.forEach((child)=>{
|
||||
_childrenBeforeUpdate(root) {
|
||||
root.children.forEach((child) => {
|
||||
child.beforeUpdate()
|
||||
child._omiGroupDataCounter = {}
|
||||
this._childrenBeforeUpdate(child)
|
||||
})
|
||||
}
|
||||
|
||||
_childrenAfterUpdate(root){
|
||||
root.children.forEach((child)=>{
|
||||
_childrenAfterUpdate(root) {
|
||||
root.children.forEach((child) => {
|
||||
this._childrenAfterUpdate(child)
|
||||
child.afterUpdate()
|
||||
})
|
||||
|
|
@ -174,58 +172,58 @@ class Component {
|
|||
}
|
||||
}
|
||||
|
||||
removeChild(indexOrChild){
|
||||
removeChild(indexOrChild) {
|
||||
let child = indexOrChild
|
||||
if(typeof indexOrChild === 'number'){
|
||||
if (typeof indexOrChild === 'number') {
|
||||
child = this.children[indexOrChild]
|
||||
}
|
||||
|
||||
child.remove()
|
||||
}
|
||||
|
||||
restoreChild(indexOrChild){
|
||||
restoreChild(indexOrChild) {
|
||||
let child = indexOrChild
|
||||
if(typeof indexOrChild === 'number'){
|
||||
if (typeof indexOrChild === 'number') {
|
||||
child = this.children[indexOrChild]
|
||||
}
|
||||
|
||||
child.restore()
|
||||
}
|
||||
|
||||
remove (){
|
||||
this._omi_removed = true
|
||||
remove() {
|
||||
this._omi_removed = true
|
||||
this.update()
|
||||
this.uninstall()
|
||||
}
|
||||
|
||||
restore(){
|
||||
this._omi_removed = false
|
||||
restore() {
|
||||
this._omi_removed = false
|
||||
this.update()
|
||||
this.installed()
|
||||
this._execInstalledHandlers()
|
||||
}
|
||||
|
||||
_render(isFirst, isSelf, fromUpdate) {
|
||||
if(this._omi_removed ){
|
||||
if (this._omi_removed) {
|
||||
let node = this._createHiddenNode()
|
||||
if(!isFirst){
|
||||
if (!isFirst) {
|
||||
this.node.parentNode.replaceChild(node, this.node)
|
||||
this.node = node
|
||||
}else if(this.renderTo){
|
||||
} else if (this.renderTo) {
|
||||
this.renderTo.appendChild(node)
|
||||
}
|
||||
return
|
||||
}
|
||||
if(this._omi_autoStoreToData){
|
||||
if(!this._omi_ignoreStoreData) {
|
||||
if (this._omi_autoStoreToData) {
|
||||
if (!this._omi_ignoreStoreData) {
|
||||
this.data = this.$store.data
|
||||
}
|
||||
}
|
||||
this.beforeRender()
|
||||
this._generateHTMLCSS()
|
||||
if(!isSelf) {
|
||||
if (!isSelf) {
|
||||
this._extractChildren(this, fromUpdate)
|
||||
}else {
|
||||
} else {
|
||||
this._extractChildrenString(this, fromUpdate)
|
||||
}
|
||||
|
||||
|
|
@ -233,7 +231,7 @@ class Component {
|
|||
this.HTML = this.HTML.replace(item._omiChildStr, isSelf ? item.node.outerHTML : item.HTML)
|
||||
})
|
||||
|
||||
this.HTML = scopedEvent(this.HTML, this.id)
|
||||
this.HTML = scopedEvent(this.HTML, this.id)
|
||||
if (isFirst) {
|
||||
if (this.renderTo) {
|
||||
if (this._omi_increment) {
|
||||
|
|
@ -243,10 +241,10 @@ class Component {
|
|||
}
|
||||
}
|
||||
} else {
|
||||
if (this.HTML !== "") {
|
||||
if(this._omi_domDiffDisabled){
|
||||
if (this.HTML !== '') {
|
||||
if (this._omi_domDiffDisabled) {
|
||||
this.renderTo.innerHTML = this.HTML
|
||||
}else {
|
||||
} else {
|
||||
morphdom(this.node, this.HTML, isSelf ? {
|
||||
ignoreAttr: this._getIgnoreAttr()
|
||||
} : null)
|
||||
|
|
@ -255,17 +253,17 @@ class Component {
|
|||
morphdom(this.node, this._createHiddenNode())
|
||||
}
|
||||
}
|
||||
//get node prop from parent node
|
||||
// get node prop from parent node
|
||||
if (this.renderTo) {
|
||||
this.node = document.querySelector("[" + this._omi_scoped_attr + "]")
|
||||
this.node = document.querySelector('[' + this._omi_scoped_attr + ']')
|
||||
this._queryElements(this)
|
||||
this._fixForm()
|
||||
}
|
||||
}
|
||||
|
||||
_getIgnoreAttr(){
|
||||
_getIgnoreAttr() {
|
||||
var arr = []
|
||||
this.children.forEach( child => {
|
||||
this.children.forEach(child => {
|
||||
arr.push(child._omi_scoped_attr)
|
||||
})
|
||||
return arr
|
||||
|
|
@ -276,7 +274,7 @@ class Component {
|
|||
this.HTML = '<input type="hidden" omi_scoped_' + this.id + ' >'
|
||||
return this.HTML
|
||||
}
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
// childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
this._mergeData(childStr)
|
||||
if (this.parent._omi_autoStoreToData) {
|
||||
this._omi_autoStoreToData = true
|
||||
|
|
@ -300,17 +298,17 @@ class Component {
|
|||
}
|
||||
|
||||
_fixSlot(shareAttr) {
|
||||
if(!this._omi_slotContent) return
|
||||
if (!this._omi_slotContent) return
|
||||
this._omi_slotContent = this._scopedAttr(this._omi_slotContent, this._omi_scoped_attr, shareAttr)
|
||||
let nodes = morphdom.toElements(this._omi_slotContent)
|
||||
let slotMatch = this.HTML.match(/<slot[\s\S]*?<\/slot>/g)
|
||||
if(nodes.length === 1 && slotMatch && slotMatch.length===1) {
|
||||
if (nodes.length === 1 && slotMatch && slotMatch.length === 1) {
|
||||
this.HTML = this.HTML.replace(/<slot[\s\S]*?<\/slot>/, this._omi_slotContent)
|
||||
}else{
|
||||
nodes.sort(function(a,b){
|
||||
return parseInt(a.getAttribute('slot-index'))- parseInt(b.getAttribute('slot-index'))
|
||||
} else {
|
||||
nodes.sort(function(a, b) {
|
||||
return parseInt(a.getAttribute('slot-index')) - parseInt(b.getAttribute('slot-index'))
|
||||
})
|
||||
nodes.forEach((node)=> {
|
||||
nodes.forEach((node) => {
|
||||
this.HTML = this.HTML.replace(/<slot[\s\S]*?<\/slot>/, node.outerHTML)
|
||||
})
|
||||
}
|
||||
|
|
@ -319,51 +317,51 @@ class Component {
|
|||
_queryElements(current) {
|
||||
current._mixRefs()
|
||||
current._execPlugins()
|
||||
current.children.forEach((item)=>{
|
||||
item.node = current.node.querySelector("[" + Omi.STYLESCOPEDPREFIX + item.id + "]")
|
||||
//recursion get node prop from parent node
|
||||
current.children.forEach((item) => {
|
||||
item.node = current.node.querySelector('[' + Omi.STYLESCOPEDPREFIX + item.id + ']')
|
||||
// recursion get node prop from parent node
|
||||
item.node && current._queryElements(item)
|
||||
})
|
||||
}
|
||||
|
||||
_mixRefs() {
|
||||
let nodes = Omi.$$('*[ref]',this.node)
|
||||
let nodes = Omi.$$('*[ref]', this.node)
|
||||
nodes.forEach(node => {
|
||||
if(node.hasAttribute(this._omi_scoped_attr) ) {
|
||||
if (node.hasAttribute(this._omi_scoped_attr)) {
|
||||
this.refs[node.getAttribute('ref')] = node
|
||||
}
|
||||
})
|
||||
let attr = this.node.getAttribute('ref')
|
||||
if(attr) {
|
||||
if (attr) {
|
||||
this.refs[attr] = this.node
|
||||
}
|
||||
}
|
||||
|
||||
_execPlugins(){
|
||||
_execPlugins() {
|
||||
Object.keys(Omi.plugins).forEach(item => {
|
||||
let nodes = Omi.$$('*['+item+']',this.node)
|
||||
let nodes = Omi.$$('*[' + item + ']', this.node)
|
||||
nodes.forEach(node => {
|
||||
if(node.hasAttribute(this._omi_scoped_attr) ) {
|
||||
Omi.plugins[item](node,this)
|
||||
if (node.hasAttribute(this._omi_scoped_attr)) {
|
||||
Omi.plugins[item](node, this)
|
||||
}
|
||||
})
|
||||
if(this.node.hasAttribute(item)) {
|
||||
if (this.node.hasAttribute(item)) {
|
||||
Omi.plugins[item](this.node, this)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_childrenInstalled(root){
|
||||
root.children.forEach((child)=>{
|
||||
_childrenInstalled(root) {
|
||||
root.children.forEach((child) => {
|
||||
this._childrenInstalled(child)
|
||||
child.installed()
|
||||
child._execInstalledHandlers()
|
||||
})
|
||||
}
|
||||
|
||||
_childrenInstalledAfterUpdate(root){
|
||||
root.children.forEach((child)=>{
|
||||
if(child._omi_needInstalled){
|
||||
_childrenInstalledAfterUpdate(root) {
|
||||
root.children.forEach((child) => {
|
||||
if (child._omi_needInstalled) {
|
||||
child._omi_needInstalled = false
|
||||
this._childrenInstalled(child)
|
||||
child.installed()
|
||||
|
|
@ -372,9 +370,8 @@ class Component {
|
|||
})
|
||||
}
|
||||
|
||||
_fixForm (){
|
||||
|
||||
Omi.$$('input',this.node).forEach(element =>{
|
||||
_fixForm() {
|
||||
Omi.$$('input', this.node).forEach(element => {
|
||||
let type = element.type.toLowerCase()
|
||||
if (element.getAttribute('value') === '') {
|
||||
element.value = ''
|
||||
|
|
@ -388,63 +385,63 @@ class Component {
|
|||
}
|
||||
})
|
||||
|
||||
Omi.$$('textarea',this.node).forEach(textarea =>{
|
||||
Omi.$$('textarea', this.node).forEach(textarea => {
|
||||
textarea.value = textarea.getAttribute('value')
|
||||
})
|
||||
|
||||
Omi.$$('select',this.node).forEach(select =>{
|
||||
Omi.$$('select', this.node).forEach(select => {
|
||||
let value = select.getAttribute('value')
|
||||
if (value) {
|
||||
Omi.$$('option',select).forEach(option =>{
|
||||
if(value === option.getAttribute('value')) {
|
||||
option.selected = true
|
||||
Omi.$$('option', select).forEach(option => {
|
||||
if (value === option.getAttribute('value')) {
|
||||
option.selected = true
|
||||
}
|
||||
})
|
||||
}else {
|
||||
} else {
|
||||
let firstOption = Omi.$$('option', select)[0]
|
||||
firstOption && (firstOption.selected = true)
|
||||
firstOption && (firstOption.selected = true)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_replaceTags(array, html, updateSelf, fromUpdate) {
|
||||
if (Omi.customTags.length === 0) return
|
||||
const str = array.join("|")
|
||||
const reg = new RegExp('<(' + str + '+)((?:\\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\\s*=\\s*(?:(?:"[^"]*")|(?:\'[^\']*\')|[^>\\s]+))?)*)\\s*((\\/>)|>(([\\s\\S]*?)<\\/\\1>))', 'g');
|
||||
const str = array.join('|')
|
||||
const reg = new RegExp('<(' + str + '+)((?:\\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\\s*=\\s*(?:(?:"[^"]*")|(?:\'[^\']*\')|[^>\\s]+))?)*)\\s*((\\/>)|>(([\\s\\S]*?)<\\/\\1>))', 'g')
|
||||
let index = 0
|
||||
return html.replace(reg, (m,a,b,c,d,e,f) => {
|
||||
if(updateSelf) {
|
||||
return html.replace(reg, (m, a, b, c, d, e, f) => {
|
||||
if (updateSelf) {
|
||||
let cmi = this.children[index]
|
||||
if (cmi && cmi.___omi_constructor_name === a) {
|
||||
cmi._omiChildStr = m
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this._initComponentByString(a, m, f, index++, this, fromUpdate)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_createHiddenNode(){
|
||||
let hdNode = document.createElement("input")
|
||||
hdNode.setAttribute("type","hidden")
|
||||
hdNode.setAttribute( this._omi_scoped_attr, '')
|
||||
_createHiddenNode() {
|
||||
let hdNode = document.createElement('input')
|
||||
hdNode.setAttribute('type', 'hidden')
|
||||
hdNode.setAttribute(this._omi_scoped_attr, '')
|
||||
return hdNode
|
||||
}
|
||||
|
||||
_mergeData(childStr) {
|
||||
if(this.selfDataFirst){
|
||||
this.data = Object.assign({},this._getDataset(childStr),this.data)
|
||||
}else{
|
||||
this.data = Object.assign({},this.data, this._getDataset(childStr))
|
||||
if (this.selfDataFirst) {
|
||||
this.data = Object.assign({}, this._getDataset(childStr), this.data)
|
||||
} else {
|
||||
this.data = Object.assign({}, this.data, this._getDataset(childStr))
|
||||
}
|
||||
}
|
||||
|
||||
_generateHTMLCSS() {
|
||||
this.CSS = (this.style()|| '').replace(/<\/?style>/g,'')
|
||||
let shareAttr = this.___omi_constructor_name?(Omi.STYLESCOPEDPREFIX + this.___omi_constructor_name.toLowerCase()):this._omi_scoped_attr
|
||||
this.CSS = (this.style() || '').replace(/<\/?style>/g, '')
|
||||
let shareAttr = this.___omi_constructor_name ? (Omi.STYLESCOPEDPREFIX + this.___omi_constructor_name.toLowerCase()) : this._omi_scoped_attr
|
||||
if (this.CSS) {
|
||||
if(this._omi_scopedSelfCSS||!Omi.style[shareAttr]) {
|
||||
this.CSS = style.scoper(this.CSS, this._omi_scopedSelfCSS ? "[" + this._omi_scoped_attr + "]" : "[" + shareAttr + "]")
|
||||
if (this._omi_scopedSelfCSS || !Omi.style[shareAttr]) {
|
||||
this.CSS = style.scoper(this.CSS, this._omi_scopedSelfCSS ? '[' + this._omi_scoped_attr + ']' : '[' + shareAttr + ']')
|
||||
Omi.style[shareAttr] = this.CSS
|
||||
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
|
||||
style.addStyle(this.CSS, this.id)
|
||||
|
|
@ -453,9 +450,9 @@ class Component {
|
|||
}
|
||||
}
|
||||
let tpl = this.render()
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr, shareAttr).trim()
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl || '', this.data), this._omi_scoped_attr, shareAttr).trim()
|
||||
if (this._omi_server_rendering) {
|
||||
this.HTML = '\r\n<style id="'+Omi.STYLEPREFIX+this.id+'">\r\n' + this.CSS + '\r\n</style>\r\n'+this.HTML
|
||||
this.HTML = '\r\n<style id="' + Omi.STYLEPREFIX + this.id + '">\r\n' + this.CSS + '\r\n</style>\r\n' + this.HTML
|
||||
this.HTML += '\r\n<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n'
|
||||
}
|
||||
|
||||
|
|
@ -463,12 +460,12 @@ class Component {
|
|||
}
|
||||
|
||||
_scopedAttr(html, id, shareAtrr) {
|
||||
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, (m) => {
|
||||
let str = m.split(" ")[0].replace(">", "")
|
||||
if(this._omi_scopedSelfCSS||!this.___omi_constructor_name){
|
||||
return m.replace(str, str + " " + id)
|
||||
}else{
|
||||
return m.replace(str, str + " " + id+" "+ shareAtrr)
|
||||
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, (m) => {
|
||||
let str = m.split(' ')[0].replace('>', '')
|
||||
if (this._omi_scopedSelfCSS || !this.___omi_constructor_name) {
|
||||
return m.replace(str, str + ' ' + id)
|
||||
} else {
|
||||
return m.replace(str, str + ' ' + id + ' ' + shareAtrr)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -476,7 +473,7 @@ class Component {
|
|||
_getDataset(childStr) {
|
||||
let json = html2json(childStr)
|
||||
let attr = json.child[0].attr
|
||||
let baseData = { }
|
||||
let baseData = {}
|
||||
Object.keys(attr).forEach(key => {
|
||||
const value = attr[key]
|
||||
if (key.indexOf('on') === 0) {
|
||||
|
|
@ -484,57 +481,55 @@ class Component {
|
|||
if (handler) {
|
||||
baseData[this._capitalize(key)] = handler.bind(this.parent)
|
||||
}
|
||||
}else if(key.indexOf('data-') === 0){
|
||||
} else if (key.indexOf('data-') === 0) {
|
||||
this._dataset[this._capitalize(key.replace('data-', ''))] = value
|
||||
}else if(key.indexOf(':data-') === 0) {
|
||||
} else if (key.indexOf(':data-') === 0) {
|
||||
this._dataset[this._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')')
|
||||
}else if(key.indexOf('::data-') === 0){
|
||||
this._dataset[this._capitalize(key.replace('::data-', ''))] = this._extractPropertyFromString(value,this.parent)
|
||||
}else if(key === 'data'){
|
||||
this._dataset = this._extractPropertyFromString(value,this.parent)
|
||||
}else if(key === ':data'){
|
||||
} else if (key.indexOf('::data-') === 0) {
|
||||
this._dataset[this._capitalize(key.replace('::data-', ''))] = this._extractPropertyFromString(value, this.parent)
|
||||
} else if (key === 'data') {
|
||||
this._dataset = this._extractPropertyFromString(value, this.parent)
|
||||
} else if (key === ':data') {
|
||||
this._dataset = eval('(' + value + ')')
|
||||
}else if (key === 'group-data') {
|
||||
this._dataset = this._extractPropertyFromString(value,this.parent)[this._omi_groupDataIndex]
|
||||
} else if (key === 'group-data') {
|
||||
this._dataset = this._extractPropertyFromString(value, this.parent)[this._omi_groupDataIndex]
|
||||
}
|
||||
})
|
||||
|
||||
return Object.assign(baseData,this._dataset)
|
||||
return Object.assign(baseData, this._dataset)
|
||||
}
|
||||
|
||||
_capitalize (str){
|
||||
_capitalize(str) {
|
||||
str = str.toLowerCase()
|
||||
str = str.replace(/\b\w+\b/g, function (word) {
|
||||
str = str.replace(/\b\w+\b/g, function(word) {
|
||||
return word.substring(0, 1).toUpperCase() + word.substring(1)
|
||||
}).replace(/-/g,'')
|
||||
}).replace(/-/g, '')
|
||||
return str.substring(0, 1).toLowerCase() + str.substring(1)
|
||||
}
|
||||
|
||||
_extractPropertyFromString(str, instance){
|
||||
let arr = str.replace(/['|"|\]]/g,'' ).replace(/\[/g,'.').split('.')
|
||||
_extractPropertyFromString(str, instance) {
|
||||
let arr = str.replace(/['|"|\]]/g, '').replace(/\[/g, '.').split('.')
|
||||
let current = instance
|
||||
arr.forEach(prop => {
|
||||
current = current[prop]
|
||||
})
|
||||
arr = null
|
||||
return current
|
||||
|
||||
return current
|
||||
}
|
||||
|
||||
_extractChildrenString(child, fromUpdate){
|
||||
this._replaceTags(Omi.customTags, child.HTML, true, fromUpdate)
|
||||
|
||||
_extractChildrenString(child, fromUpdate) {
|
||||
this._replaceTags(Omi.customTags, child.HTML, true, fromUpdate)
|
||||
}
|
||||
|
||||
_extractChildren(child, fromUpdate){
|
||||
_extractChildren(child, fromUpdate) {
|
||||
this._replaceTags(Omi.customTags, child.HTML, false, fromUpdate)
|
||||
}
|
||||
|
||||
_initComponentByString(name, childStr, slotContent, i, child, fromUpdate){
|
||||
_initComponentByString(name, childStr, slotContent, i, child, fromUpdate) {
|
||||
let json = html2json(childStr)
|
||||
let attr = json.child[0].attr
|
||||
let cmi = this.children[i]
|
||||
//if not first time to invoke _extractChildren method
|
||||
// if not first time to invoke _extractChildren method
|
||||
if (cmi && cmi.___omi_constructor_name === name) {
|
||||
cmi._omiChildStr = childStr
|
||||
cmi._omi_slotContent = slotContent
|
||||
|
|
@ -567,45 +562,44 @@ class Component {
|
|||
if (handler) {
|
||||
baseData[this._capitalize(key)] = handler.bind(child)
|
||||
}
|
||||
} else if (key === 'omi-id'){
|
||||
} else if (key === 'omi-id') {
|
||||
omiID = value
|
||||
}else if (key === 'name'){
|
||||
} else if (key === 'name') {
|
||||
instanceName = value
|
||||
}else if (key === 'group-data') {
|
||||
} else if (key === 'group-data') {
|
||||
if (child._omiGroupDataCounter.hasOwnProperty(value)) {
|
||||
child._omiGroupDataCounter[value]++
|
||||
} else {
|
||||
child._omiGroupDataCounter[value] = 0
|
||||
}
|
||||
groupDataIndex = child._omiGroupDataCounter[value]
|
||||
dataset = this._extractPropertyFromString(value,child)[groupDataIndex]
|
||||
|
||||
} else if(key.indexOf('data-') === 0){
|
||||
dataset = this._extractPropertyFromString(value, child)[groupDataIndex]
|
||||
} else if (key.indexOf('data-') === 0) {
|
||||
dataset[this._capitalize(key.replace('data-', ''))] = value
|
||||
}else if(key.indexOf(':data-') === 0) {
|
||||
} else if (key.indexOf(':data-') === 0) {
|
||||
dataset[this._capitalize(key.replace(':data-', ''))] = eval('(' + value + ')')
|
||||
}else if(key.indexOf('::data-') === 0){
|
||||
dataset[this._capitalize(key.replace('::data-', ''))] = this._extractPropertyFromString(value,child)
|
||||
}else if(key === 'data'){
|
||||
dataset = this._extractPropertyFromString(value,child)
|
||||
}else if(key === ':data'){
|
||||
} else if (key.indexOf('::data-') === 0) {
|
||||
dataset[this._capitalize(key.replace('::data-', ''))] = this._extractPropertyFromString(value, child)
|
||||
} else if (key === 'data') {
|
||||
dataset = this._extractPropertyFromString(value, child)
|
||||
} else if (key === ':data') {
|
||||
dataset = eval('(' + value + ')')
|
||||
}else if(key === 'preventSelfUpdate'|| key === 'psu'|| key === 'preventselfupdate'){
|
||||
} else if (key === 'preventSelfUpdate' || key === 'psu' || key === 'preventselfupdate') {
|
||||
_omi_option.preventSelfUpdate = true
|
||||
}else if(key === 'selfDataFirst'|| key === 'sdf'|| key === 'selfdatafirst'){
|
||||
} else if (key === 'selfDataFirst' || key === 'sdf' || key === 'selfdatafirst') {
|
||||
_omi_option.selfDataFirst = true
|
||||
}else if(key === 'domDiffDisabled'|| key === 'ddd'|| key === 'domdiffdisabled'){
|
||||
} else if (key === 'domDiffDisabled' || key === 'ddd' || key === 'domdiffdisabled') {
|
||||
_omi_option.domDiffDisabled = true
|
||||
}else if(key === 'ignoreStoreData'|| key === 'isd'|| key === 'ignorestoredata'){
|
||||
} else if (key === 'ignoreStoreData' || key === 'isd' || key === 'ignorestoredata') {
|
||||
_omi_option.ignoreStoreData = true
|
||||
}else if(key === 'scopedSelfCSS'|| key === 'ssc'|| key === 'scopedselfcss'){
|
||||
} else if (key === 'scopedSelfCSS' || key === 'ssc' || key === 'scopedselfcss') {
|
||||
_omi_option.scopedSelfCSS = true
|
||||
}
|
||||
})
|
||||
|
||||
let ChildClass = Omi.getClassFromString(name)
|
||||
if (!ChildClass) throw "Can't find Class called [" + name+"]"
|
||||
let sub_child = new ChildClass( Object.assign(baseData,dataset ),_omi_option)
|
||||
if (!ChildClass) throw "Can't find Class called [" + name + ']'
|
||||
let sub_child = new ChildClass(Object.assign(baseData, dataset), _omi_option)
|
||||
sub_child._omi_groupDataIndex = groupDataIndex
|
||||
sub_child._omiChildStr = childStr
|
||||
sub_child._omi_slotContent = slotContent
|
||||
|
|
@ -626,11 +620,11 @@ class Component {
|
|||
|
||||
sub_child._childRender(childStr)
|
||||
|
||||
if(fromUpdate){
|
||||
if (fromUpdate) {
|
||||
sub_child._omi_needInstalled = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Component
|
||||
export default Component
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
var packageJSON = require('./package.json');
|
||||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
var packageJSON = require('./package.json')
|
||||
/**
|
||||
* Env
|
||||
* Get npm lifecycle event to identify the environment
|
||||
*/
|
||||
var ENV = process.env.npm_lifecycle_event;
|
||||
var ENV = process.env.npm_lifecycle_event
|
||||
|
||||
var config = {
|
||||
var config = {
|
||||
entry: './example/todo/main.js',
|
||||
output: {
|
||||
// path: __dirname,
|
||||
|
|
@ -21,9 +21,9 @@ var config = {
|
|||
test: /\.js$/,
|
||||
query: {
|
||||
presets: 'es2015',
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals"
|
||||
plugins: [
|
||||
'transform-es3-property-literals',
|
||||
'transform-es3-member-expression-literals'
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -36,12 +36,12 @@ var config = {
|
|||
stats: {
|
||||
// Nice colored output
|
||||
colors: true
|
||||
},
|
||||
}
|
||||
// Create Sourcemaps for the bundle
|
||||
// devtool: 'source-map',
|
||||
};
|
||||
}
|
||||
|
||||
if(ENV === 'build'||ENV === 'build-min'){
|
||||
if (ENV === 'build' || ENV === 'build-min') {
|
||||
config = {
|
||||
entry: {
|
||||
omi: './src/index.js',
|
||||
|
|
@ -52,10 +52,10 @@ if(ENV === 'build'||ENV === 'build-min'){
|
|||
output: {
|
||||
// path: __dirname,
|
||||
path: 'dist/',
|
||||
library:'Omi',
|
||||
library: 'Omi',
|
||||
libraryTarget: 'umd',
|
||||
filename: '[name].js'
|
||||
//umdNamedDefine: true
|
||||
filename: '[name].js'
|
||||
// umdNamedDefine: true
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
|
|
@ -64,54 +64,53 @@ if(ENV === 'build'||ENV === 'build-min'){
|
|||
test: path.join(__dirname, 'src'),
|
||||
query: {
|
||||
presets: 'es2015',
|
||||
plugins : [
|
||||
"transform-es3-property-literals",
|
||||
"transform-es3-member-expression-literals"
|
||||
plugins: [
|
||||
'transform-es3-property-literals',
|
||||
'transform-es3-member-expression-literals'
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// Avoid publishing files when compilation fails
|
||||
new webpack.BannerPlugin(" Omi v"+packageJSON.version+" By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed."),
|
||||
new webpack.BannerPlugin(' Omi v' + packageJSON.version + ' By dntzhang \r\n Github: https://github.com/AlloyTeam/omi\r\n MIT Licensed.'),
|
||||
new webpack.NoErrorsPlugin()
|
||||
],
|
||||
stats: {
|
||||
// Nice colored output
|
||||
colors: true
|
||||
},
|
||||
}
|
||||
// Create Sourcemaps for the bundle
|
||||
// devtool: 'source-map',
|
||||
};
|
||||
// devtool: 'source-map',
|
||||
}
|
||||
|
||||
if(ENV === 'build-min'){
|
||||
if (ENV === 'build-min') {
|
||||
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false,
|
||||
screw_ie8 : false
|
||||
screw_ie8: false
|
||||
},
|
||||
mangle: {
|
||||
screw_ie8: false
|
||||
},
|
||||
output: { screw_ie8: false }
|
||||
}));
|
||||
}))
|
||||
config.entry = {
|
||||
'omi.min': './src/index.js',
|
||||
'omi.lite.min': './src/index.lite.js',
|
||||
'omi.mustache.min': './src/index.mustache.js',
|
||||
'omi.art.min': './src/index.art.js'
|
||||
};
|
||||
}
|
||||
}
|
||||
}else if(ENV==='todomvc'){
|
||||
config.entry = './' + ENV + '/js/main.js';
|
||||
config.output.path = './' + ENV + '/';
|
||||
}else{
|
||||
config.entry = './example/' + ENV + '/main.js';
|
||||
config.output.path = './example/' + ENV + '/';
|
||||
} else if (ENV === 'todomvc') {
|
||||
config.entry = './' + ENV + '/js/main.js'
|
||||
config.output.path = './' + ENV + '/'
|
||||
} else {
|
||||
config.entry = './example/' + ENV + '/main.js'
|
||||
config.output.path = './example/' + ENV + '/'
|
||||
}
|
||||
|
||||
// console.log(ENV);
|
||||
|
||||
//console.log(ENV);
|
||||
|
||||
module.exports = config;
|
||||
module.exports = config
|
||||
|
|
|
|||
Loading…
Reference in New Issue