omis-wc - init
This commit is contained in:
dntzhang
parent
4dc7665373
commit
36cf16825a
|
|
@ -0,0 +1,102 @@
|
|||
import { render, h } from 'omis'
|
||||
|
||||
; (function () {
|
||||
if (
|
||||
// No Reflect, no classes, no need for shim because native custom elements
|
||||
// require ES2015 classes or Reflect.
|
||||
window.Reflect === undefined ||
|
||||
window.customElements === undefined ||
|
||||
// The webcomponentsjs custom elements polyfill doesn't require
|
||||
// ES2015-compatible construction (`super()` or `Reflect.construct`).
|
||||
window.customElements.hasOwnProperty('polyfillWrapFlushCallback')
|
||||
) {
|
||||
return
|
||||
}
|
||||
var BuiltInHTMLElement = HTMLElement
|
||||
window.HTMLElement = function HTMLElement() {
|
||||
return Reflect.construct(BuiltInHTMLElement, [], this.constructor)
|
||||
}
|
||||
HTMLElement.prototype = BuiltInHTMLElement.prototype
|
||||
HTMLElement.prototype.constructor = HTMLElement
|
||||
Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement)
|
||||
})()
|
||||
|
||||
|
||||
var hyphenateRE = /\B([A-Z])/g
|
||||
function hyphenate(str) {
|
||||
return str.replace(hyphenateRE, '-$1').toLowerCase()
|
||||
}
|
||||
|
||||
function define(name, Component) {
|
||||
customElements.define(name, class extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
var shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.props = {}
|
||||
this.attrsToProps()
|
||||
this._ele = render(h(Component, this.props), shadowRoot)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
|
||||
}
|
||||
|
||||
addEventListener(name, callback) {
|
||||
this._ele._component.props['on' + name.charAt(0).toUpperCase() + name.slice(1)] = callback
|
||||
}
|
||||
|
||||
removeEventListener(name, callback) {
|
||||
var props = this._ele._component.props
|
||||
var eventName = 'on' + name.charAt(0).toUpperCase() + name.slice(1)
|
||||
for (var key in props) {
|
||||
if (key === eventName && callback === props[key]) {
|
||||
delete props[key]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
attrsToProps() {
|
||||
this.props['css'] = this.getAttribute('css')
|
||||
var attrs = Component.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
var type = attrs[key]
|
||||
var val = this.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
this.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
this.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
this.props[key] = false
|
||||
} else {
|
||||
this.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
this.props[key] = JSON.parse(val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (Component.defaultProps && Component.defaultProps.hasOwnProperty(key)) {
|
||||
this.props[key] = Component.defaultProps[key]
|
||||
} else {
|
||||
this.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"name": "omis-wc",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"omis",
|
||||
"webcomponents",
|
||||
"web-components"
|
||||
],
|
||||
"author": "dntzhang",
|
||||
"license": "MIT"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,21 @@
|
|||
<html>
|
||||
|
||||
<head></head>
|
||||
|
||||
<body>
|
||||
|
||||
<script src="b.js"></script>
|
||||
|
||||
<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}"></hello-msg>
|
||||
|
||||
<script>
|
||||
var ele = document.querySelector('hello-msg')
|
||||
|
||||
ele.addEventListener('myEvent', function(evt){
|
||||
console.log(evt)
|
||||
})
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import { render, h } from '../../src/omis'
|
||||
import {define} from './wc'
|
||||
|
||||
const HelloMessage = (props, store) => {
|
||||
console.log(props)
|
||||
return <div onClick={store.clickHandler} >
|
||||
<div>Hello {props.msg}</div>
|
||||
<div>{props.user.name}</div>
|
||||
<div>{props.user.age}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
HelloMessage.css = `div{
|
||||
color: red;
|
||||
}`
|
||||
|
||||
HelloMessage.store = _ => {
|
||||
return {
|
||||
clickHandler(){
|
||||
_.props.onMyEvent && _.props.onMyEvent(123)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HelloMessage.propTypes = {
|
||||
msg: String,
|
||||
user: Object
|
||||
}
|
||||
|
||||
define('hello-msg', HelloMessage)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//render(<HelloMessage name="Omis" onMyEvent={_=>{console.log(222)}} />, 'body')
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import { render, h } from '../../src/omis'
|
||||
|
||||
|
||||
; (function () {
|
||||
if (
|
||||
// No Reflect, no classes, no need for shim because native custom elements
|
||||
// require ES2015 classes or Reflect.
|
||||
window.Reflect === undefined ||
|
||||
window.customElements === undefined ||
|
||||
// The webcomponentsjs custom elements polyfill doesn't require
|
||||
// ES2015-compatible construction (`super()` or `Reflect.construct`).
|
||||
window.customElements.hasOwnProperty('polyfillWrapFlushCallback')
|
||||
) {
|
||||
return
|
||||
}
|
||||
var BuiltInHTMLElement = HTMLElement
|
||||
window.HTMLElement = function HTMLElement() {
|
||||
return Reflect.construct(BuiltInHTMLElement, [], this.constructor)
|
||||
}
|
||||
HTMLElement.prototype = BuiltInHTMLElement.prototype
|
||||
HTMLElement.prototype.constructor = HTMLElement
|
||||
Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement)
|
||||
})()
|
||||
|
||||
|
||||
var hyphenateRE = /\B([A-Z])/g
|
||||
function hyphenate(str) {
|
||||
return str.replace(hyphenateRE, '-$1').toLowerCase()
|
||||
}
|
||||
|
||||
export function define(name, Component) {
|
||||
customElements.define(name, class extends HTMLElement {
|
||||
|
||||
connectedCallback() {
|
||||
var shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.props = {}
|
||||
this.attrsToProps()
|
||||
this._ele = render(h(Component, this.props), shadowRoot)
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
|
||||
}
|
||||
|
||||
addEventListener(name, callback) {
|
||||
this._ele._component.props['on' + name.charAt(0).toUpperCase() + name.slice(1)] = callback
|
||||
}
|
||||
|
||||
removeEventListener(name, callback) {
|
||||
var props = this._ele._component.props
|
||||
var eventName = 'on' + name.charAt(0).toUpperCase() + name.slice(1)
|
||||
for (var key in props) {
|
||||
if (key === eventName && callback === props[key]) {
|
||||
delete props[key]
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
attrsToProps() {
|
||||
this.props['css'] = this.getAttribute('css')
|
||||
var attrs = Component.propTypes
|
||||
if (!attrs) return
|
||||
Object.keys(attrs).forEach(key => {
|
||||
var type = attrs[key]
|
||||
var val = this.getAttribute(hyphenate(key))
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
this.props[key] = val
|
||||
break
|
||||
case Number:
|
||||
this.props[key] = Number(val)
|
||||
break
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
this.props[key] = false
|
||||
} else {
|
||||
this.props[key] = true
|
||||
}
|
||||
break
|
||||
case Array:
|
||||
case Object:
|
||||
this.props[key] = JSON.parse(val
|
||||
.replace(/(['"])?([a-zA-Z0-9_-]+)(['"])?:([^\/])/g, '"$2":$4')
|
||||
.replace(/'([\s\S]*?)'/g, '"$1"')
|
||||
.replace(/,(\s*})/g, '$1')
|
||||
)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
if (Component.defaultProps && Component.defaultProps.hasOwnProperty(key)) {
|
||||
this.props[key] = Component.defaultProps[key]
|
||||
} else {
|
||||
this.props[key] = null
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue