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

omis - v0.12.0 

* Add define method
* Fix style when using define
This commit is contained in:
dntzhang 2019-07-25 17:39:50 +08:00
parent 93a2e0d824
commit 5b850656e1
7 changed files with 45 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/omis/examples/define/b.js
View File

@ -90,10 +90,10 @@
return css;
}
function addStyle(cssText, id) {
function addStyle(cssText, id, parent) {
id = id.toLowerCase();
var ele = document.getElementById(id);
var head = document.getElementsByTagName('head')[0];
var head = parent || document.getElementsByTagName('head')[0];
if (ele && ele.parentNode === head) {
head.removeChild(ele);
}
@ -109,11 +109,13 @@
}
}
function addStyleToHead(style, attr) {
function addStyleToHead(style, attr, parent) {
if (!options.staticStyleMapping[attr]) {
addStyle(scoper(style, attr), attr);
options.staticStyleMapping[attr] = true;
if (parent || !options.staticStyleMapping[attr]) {
addStyle(scoper(style, attr), attr, parent);
if (!parent) {
options.staticStyleMapping[attr] = true;
}
}
}
@ -1618,7 +1620,17 @@
});
this.props = {};
this.attrsToProps();
//Component.css = null
if (Component.css) {
addStyleToHead(Component.css, getCtorName(Component), shadowRoot);
}
this._ele = render(h(Component, this.props), shadowRoot);
if (this.props.css) {
addStyleToHead(this.props.css, '_ds' + this._ele._component.elementId, shadowRoot);
}
};
_class.prototype.disconnectedCallback = function disconnectedCallback() {};

2
packages/omis/examples/define/b.js.map
View File

File diff suppressed because one or more lines are too long

2
packages/omis/examples/define/index.html
View File

@ -6,7 +6,7 @@
<script src="b.js"></script>
<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}"></hello-msg>
<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}" css="div{color:blue !important;}"></hello-msg>
<script>
var ele = document.querySelector('hello-msg')

12
packages/omis/src/define.js
View File

@ -1,6 +1,6 @@
import { h } from './h'
import { render } from './render'
import { addStyleToHead, getCtorName } from './style'
; (function () {
if (
@ -32,7 +32,17 @@ export function define(name, Component) {
})
this.props = {}
this.attrsToProps()
//Component.css = null
if(Component.css){
addStyleToHead(Component.css, getCtorName(Component), shadowRoot)
}
this._ele = render(h(Component, this.props), shadowRoot)
if(this.props.css){
addStyleToHead(this.props.css, '_ds'+this._ele._component.elementId, shadowRoot)
}
}
disconnectedCallback() {

17
packages/omis/src/style.js
View File

@ -58,10 +58,10 @@ export function scoper(css, prefix) {
return css
}
export function addStyle(cssText, id) {
export function addStyle(cssText, id, parent) {
id = id.toLowerCase()
let ele = document.getElementById(id)
let head = document.getElementsByTagName('head')[0]
let head = parent || document.getElementsByTagName('head')[0]
if (ele && ele.parentNode === head) {
head.removeChild(ele)
}
@ -77,10 +77,13 @@ export function addStyle(cssText, id) {
}
}
export function addStyleToHead(style, attr) {
if (!options.staticStyleMapping[attr]) {
addStyle(scoper(style, attr), attr)
options.staticStyleMapping[attr] = true
export function addStyleToHead(style, attr, parent) {
//parent is shadowroot
if (parent || !options.staticStyleMapping[attr]) {
addStyle(scoper(style, attr), attr, parent)
//don't cache when is shadowroot
if(!parent){
options.staticStyleMapping[attr] = true
}
}
}

6
packages/omis/test/browser/web-components.js → packages/omis/test/browser/define.js
View File

@ -1,5 +1,5 @@
import {
render, h
render, h, define
} from '../../src/omis'
describe('web components', () => {
@ -54,9 +54,9 @@ describe('web components', () => {
define('hello-msg', HelloMessage)
document.body.innerHTML += `<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}"></hello-msg>`
scratch.innerHTML += `<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}"></hello-msg>`
expect(document.querySelector('hello-msg').shadowRoot.innerHTML).to.deep.equal()
expect(scratch.querySelector('hello-msg').shadowRoot.innerHTML).to.deep.equal('<style type="text/css" id="_ss0">div[_ss0]{\n\t\t\tcolor: red;\n\t\t}</style><div _ss0=""><div _ss0="">Hello Omis</div><div _ss0="">dntzhang</div><div _ss0="">18</div></div>')
})

2
packages/omis/test/karma.conf.js
View File

@ -119,7 +119,7 @@ module.exports = function(config) {
compact: true,
plugins : [
'transform-class-properties',
["transform-react-jsx", { "pragma":"Omis.h" }]
["transform-react-jsx", { "pragma":"h" }]
]
}
},