resolve the same component to generate multiple scoped CSS
This commit is contained in:
dntzhang
parent
562e7455d2
commit
d51aa8ad77
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/AlloyTeam/omi" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="../../asset/github.png" alt="" />
|
||||
</a>
|
||||
<script src="bundler.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import Omi from '../../src/index.js';
|
||||
|
||||
class List extends Omi.Component {
|
||||
constructor(data,option) {
|
||||
super(data,option);
|
||||
}
|
||||
|
||||
style(){
|
||||
return `ul{font-size:40px;}`
|
||||
}
|
||||
|
||||
render () {
|
||||
return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
export default List;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import Todo from './todo.js';
|
||||
|
||||
|
||||
Omi.render(new Todo({ items: [] , text : '' }),'body',true);
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import Omi from '../../src/index.js';
|
||||
import List from './list.js';
|
||||
|
||||
Omi.makeHTML('List', List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.list.data.items.push(this.data.text);
|
||||
this.data.length = this.list.data.items.length;
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
}
|
||||
|
||||
style () {
|
||||
return `
|
||||
h3 { color:red; }
|
||||
button{ color:green;}
|
||||
`;
|
||||
}
|
||||
|
||||
handleChange(target){
|
||||
this.data.text = target.value;
|
||||
}
|
||||
|
||||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List name="list" data="listData" />
|
||||
|
||||
<List name="list" data="listData" />
|
||||
|
||||
<List name="list" data="listData" ssc />
|
||||
|
||||
<List name="list" data="listData" />
|
||||
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
</form>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
export default Todo;
|
||||
|
|
@ -10,9 +10,11 @@ class Component {
|
|||
server: false,
|
||||
ignoreStoreData: false,
|
||||
preventSelfUpdate: false,
|
||||
selfDataFirst:false,
|
||||
domDiffDisabled:false
|
||||
selfDataFirst: false,
|
||||
domDiffDisabled: false,
|
||||
scopedSelfCSS: false
|
||||
},option)
|
||||
this._omi_scopedSelfCSS = componentOption.scopedSelfCSS
|
||||
this._omi_preventSelfUpdate = componentOption.preventSelfUpdate
|
||||
this._omi_domDiffDisabled = componentOption.domDiffDisabled
|
||||
this._omi_ignoreStoreData = componentOption.ignoreStoreData
|
||||
|
|
@ -398,25 +400,33 @@ class Component {
|
|||
|
||||
_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
|
||||
if (this.CSS) {
|
||||
this.CSS = style.scoper(this.CSS, "[" + this._omi_scoped_attr + "]")
|
||||
if (this.CSS !== this._preCSS && !this._omi_server_rendering) {
|
||||
style.addStyle(this.CSS, this.id)
|
||||
this._preCSS = this.CSS
|
||||
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)
|
||||
this._preCSS = this.CSS
|
||||
}
|
||||
}
|
||||
}
|
||||
let tpl = this.render()
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl ? tpl : "", this.data), this._omi_scoped_attr).trim()
|
||||
this.HTML = this._scopedAttr(Omi.template(tpl ? 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<input type="hidden" data-omi-id="' + this.id + '" class="' + Omi.STYLESCOPEDPREFIX + '_hidden_data" value=\'' + JSON.stringify(this.data) + '\' />\r\n'
|
||||
}
|
||||
}
|
||||
|
||||
_scopedAttr(html, id) {
|
||||
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, function (m) {
|
||||
_scopedAttr(html, id, shareAtrr) {
|
||||
return html.replace(/<[^/]([A-Za-z]*)[^>]*>/g, (m) => {
|
||||
let str = m.split(" ")[0].replace(">", "")
|
||||
return m.replace(str, str + " " + id)
|
||||
if(this._omi_scopedSelfCSS||!this.___omi_constructor_name){
|
||||
return m.replace(str, str + " " + id)
|
||||
}else{
|
||||
return m.replace(str, str + " " + id+" "+ shareAtrr)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -550,6 +560,8 @@ class Component {
|
|||
_omi_option.domDiffDisabled = true
|
||||
}else if(key === 'ignoreStoreData'|| key === 'isd'){
|
||||
_omi_option.ignoreStoreData = true
|
||||
}else if(key === 'scopedSelfCSS'|| key === 'ssc'){
|
||||
_omi_option.scopedSelfCSS = true
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ Omi.mapping = {}
|
|||
Omi.STYLEPREFIX = "omi_style_"
|
||||
Omi.STYLESCOPEDPREFIX = "omi_scoped_"
|
||||
|
||||
Omi.style = { }
|
||||
|
||||
Omi.componentConstructor = { }
|
||||
|
||||
//fix ie bug
|
||||
|
|
|
|||
Loading…
Reference in New Issue