omis - add define method
This commit is contained in:
dntzhang
parent
faaed06805
commit
93a2e0d824
|
|
@ -15,7 +15,7 @@
|
|||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/cn.html) 和 [例子](https://codepen.io/collection/DrMYgV/) 和 [wcd demos](https://webcomponents.dev/demos/omi)| Omi 官方文档 |
|
||||
| [omim](https://github.com/Tencent/omi/tree/master/packages/omim)| Omi 打造的跨框架 Material Design UI 组件库, 任意框架可以使用,([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/cn.html) && [加入我们](https://github.com/Tencent/omi/tree/master/packages/omim#contribution)!)|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) 和 [例子](https://codepen.io/collection/XjLaRo/) 和 [文档](https://tencent.github.io/omi/site/omis/cn.html)| Functional Component + Store + Scoped Style in 3KB|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) 和 [例子](https://codepen.io/collection/XjLaRo/) 和 [文档](https://tencent.github.io/omi/site/omis/cn.html)| Functional Component + Store + Scoped Style + Web Components in 3KB|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| 兼容老浏览器的 Omi 版本(支持到IE8+)|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| 服务端同构渲染解决方案(目前只能用 omio) |
|
||||
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| 简单 Omi UI|
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ English | [简体中文](./README.CN.md)
|
|||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://tencent.github.io/omi/site/docs/index.html) and [codepen](https://codepen.io/collection/DrMYgV/) and [wcd demos](https://webcomponents.dev/demos/omi)| Omi official documents |
|
||||
| [omim](https://github.com/Tencent/omi/tree/master/packages/omim)| Cross **frameworks** and **themes** components.([DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html) && [JOIN US!](https://github.com/Tencent/omi/tree/master/packages/omim#contribution))|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) and [codepen](https://codepen.io/collection/XjLaRo/) and [docs](https://tencent.github.io/omi/site/omis/index.html)| Functional Component + Store + Scoped Style in 3KB|
|
||||
| [omis ](https://github.com/Tencent/omi/tree/master/packages/omis) and [codepen](https://codepen.io/collection/XjLaRo/) and [docs](https://tencent.github.io/omi/site/omis/index.html)| Functional Component + Store + Scoped Style + Web Components in 3KB|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers with same api(IE8+)|
|
||||
| [omi-ssr](https://github.com/Tencent/omi/tree/master/packages/omi-ssr)| Server-side rendering(support omio only)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js|
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
# Omis
|
||||
|
||||
> Functional Component + Store + Scoped Style in 3KB
|
||||
> Functional Component + Store + Scoped Style + Web Components in 3KB
|
||||
|
||||
* 函数式风格但非函数式编程
|
||||
* 结构-样式-行为分离
|
||||
|
|
@ -73,7 +73,7 @@ $ npm run build # release
|
|||
## Web Components
|
||||
|
||||
```jsx
|
||||
import define from 'omis-define'
|
||||
import { define } from 'omis'
|
||||
|
||||
const HelloMessage = (props, store) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ English | [简体中文](./README.CN.md)
|
|||
|
||||
# Omis
|
||||
|
||||
> Functional Component + Store + Scoped Style in 3KB
|
||||
> Functional Component + Store + Scoped Style + + Web Components in 3KB
|
||||
|
||||
* Functional style but non-functional programming
|
||||
* Structure-Style-Behavior Separation
|
||||
|
|
@ -73,7 +73,7 @@ $ npm run build # release
|
|||
## Web Components
|
||||
|
||||
```jsx
|
||||
import define from 'omis-define'
|
||||
import { define } from 'omis'
|
||||
|
||||
const HelloMessage = (props, store) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,22 +1,6 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
function commonjsRequire () {
|
||||
throw new Error('Dynamic requires are not currently supported by rollup-plugin-commonjs');
|
||||
}
|
||||
|
||||
function createCommonjsModule(fn, module) {
|
||||
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
||||
}
|
||||
|
||||
/**
|
||||
* omis v0.11.0 http://omijs.org
|
||||
* Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omis
|
||||
* MIT Licensed.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Virtual DOM Node
|
||||
* @typedef VNode
|
||||
|
|
@ -170,10 +154,10 @@
|
|||
*/
|
||||
function h(nodeName, attributes) {
|
||||
var children = EMPTY_CHILDREN,
|
||||
lastSimple,
|
||||
child,
|
||||
simple,
|
||||
i;
|
||||
lastSimple = void 0,
|
||||
child = void 0,
|
||||
simple = void 0,
|
||||
i = void 0;
|
||||
for (i = arguments.length; i-- > 2;) {
|
||||
stack.push(arguments[i]);
|
||||
}
|
||||
|
|
@ -379,6 +363,19 @@
|
|||
return h(vnode.nodeName, extend(extend({}, vnode.attributes), props), arguments.length > 2 ? [].slice.call(arguments, 2) : vnode.children);
|
||||
}
|
||||
|
||||
// render modes
|
||||
|
||||
/** Do not re-render a component */
|
||||
var NO_RENDER = 0;
|
||||
/** Synchronously re-render a component and its children */
|
||||
var SYNC_RENDER = 1;
|
||||
/** Synchronously re-render a component, even if its lifecycle methods attempt to prevent it. */
|
||||
var FORCE_RENDER = 2;
|
||||
/** Queue asynchronous re-render of a component and it's children */
|
||||
var ASYNC_RENDER = 3;
|
||||
|
||||
var ATTR_KEY = 'prevProps';
|
||||
|
||||
/** DOM properties that should NOT have "px" added when numeric */
|
||||
var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
|
||||
|
||||
|
|
@ -400,7 +397,7 @@
|
|||
|
||||
/** Rerender all enqueued dirty components */
|
||||
function rerender() {
|
||||
var p;
|
||||
var p = void 0;
|
||||
while (p = items.pop()) {
|
||||
if (p._dirty) renderComponent(p);
|
||||
}
|
||||
|
|
@ -535,8 +532,8 @@
|
|||
if (!(i in value)) node.style[i] = '';
|
||||
}
|
||||
}
|
||||
for (var i in value) {
|
||||
node.style[i] = typeof value[i] === 'number' && IS_NON_DIMENSIONAL.test(i) === false ? value[i] + 'px' : value[i];
|
||||
for (var _i in value) {
|
||||
node.style[_i] = typeof value[_i] === 'number' && IS_NON_DIMENSIONAL.test(_i) === false ? value[_i] + 'px' : value[_i];
|
||||
}
|
||||
}
|
||||
} else if (name === 'dangerouslySetInnerHTML') {
|
||||
|
|
@ -596,7 +593,7 @@
|
|||
|
||||
/** Invoke queued componentDidMount lifecycle methods */
|
||||
function flushMounts() {
|
||||
var c;
|
||||
var c = void 0;
|
||||
while (c = mounts.shift()) {
|
||||
if (c.constructor.css) {
|
||||
addStyleToHead(c.constructor.css, getCtorName(c.constructor));
|
||||
|
|
@ -629,7 +626,7 @@
|
|||
isSvgMode = parent != null && parent.ownerSVGElement !== undefined;
|
||||
|
||||
// hydration is indicated by the existing element to be diffed not having a prop cache
|
||||
hydrating = dom != null && !('prevProps' in dom);
|
||||
hydrating = dom != null && !(ATTR_KEY in dom);
|
||||
}
|
||||
|
||||
var ret = idiff(dom, vnode, $, mountAll, componentRoot, store);
|
||||
|
|
@ -681,7 +678,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
out['prevProps'] = true;
|
||||
out[ATTR_KEY] = true;
|
||||
|
||||
return out;
|
||||
}
|
||||
|
|
@ -713,11 +710,11 @@
|
|||
}
|
||||
|
||||
var fc = out.firstChild,
|
||||
props = out['prevProps'],
|
||||
props = out[ATTR_KEY],
|
||||
vchildren = vnode.children;
|
||||
|
||||
if (props == null) {
|
||||
props = out['prevProps'] = {};
|
||||
props = out[ATTR_KEY] = {};
|
||||
for (var a = out.attributes, i = a.length; i--;) {
|
||||
props[a[i].name] = a[i].value;
|
||||
}
|
||||
|
|
@ -762,17 +759,17 @@
|
|||
len = originalChildren.length,
|
||||
childrenLen = 0,
|
||||
vlen = vchildren ? vchildren.length : 0,
|
||||
j,
|
||||
c,
|
||||
f,
|
||||
vchild,
|
||||
child;
|
||||
j = void 0,
|
||||
c = void 0,
|
||||
f = void 0,
|
||||
vchild = void 0,
|
||||
child = void 0;
|
||||
|
||||
// Build up a map of keyed children and an Array of unkeyed children:
|
||||
if (len !== 0) {
|
||||
for (var i = 0; i < len; i++) {
|
||||
var _child = originalChildren[i],
|
||||
props = _child['prevProps'],
|
||||
props = _child[ATTR_KEY],
|
||||
key = vlen && props ? _child._component ? _child._component.__key : props.key : null;
|
||||
if (key != null) {
|
||||
keyedLen++;
|
||||
|
|
@ -784,16 +781,16 @@
|
|||
}
|
||||
|
||||
if (vlen !== 0) {
|
||||
for (var i = 0; i < vlen; i++) {
|
||||
vchild = vchildren[i];
|
||||
for (var _i = 0; _i < vlen; _i++) {
|
||||
vchild = vchildren[_i];
|
||||
child = null;
|
||||
|
||||
// attempt to find a node based on key matching
|
||||
var key = vchild.key;
|
||||
if (key != null) {
|
||||
if (keyedLen && keyed[key] !== undefined) {
|
||||
child = keyed[key];
|
||||
keyed[key] = undefined;
|
||||
var _key = vchild.key;
|
||||
if (_key != null) {
|
||||
if (keyedLen && keyed[_key] !== undefined) {
|
||||
child = keyed[_key];
|
||||
keyed[_key] = undefined;
|
||||
keyedLen--;
|
||||
}
|
||||
}
|
||||
|
|
@ -813,7 +810,7 @@
|
|||
// morph the matched/found/created DOM child to match vchild (deep)
|
||||
child = idiff(child, vchild, $, mountAll, null, store);
|
||||
|
||||
f = originalChildren[i];
|
||||
f = originalChildren[_i];
|
||||
if (child && child !== dom && child !== f) {
|
||||
if (f == null) {
|
||||
dom.appendChild(child);
|
||||
|
|
@ -828,8 +825,8 @@
|
|||
|
||||
// remove unused keyed children:
|
||||
if (keyedLen) {
|
||||
for (var i in keyed) {
|
||||
if (keyed[i] !== undefined) recollectNodeTree(keyed[i], false);
|
||||
for (var _i2 in keyed) {
|
||||
if (keyed[_i2] !== undefined) recollectNodeTree(keyed[_i2], false);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -854,9 +851,9 @@
|
|||
} else {
|
||||
// If the node's VNode had a ref function, invoke it with null here.
|
||||
// (this is part of the React spec, and smart for unsetting references)
|
||||
if (node['prevProps'] != null) applyRef(node['prevProps'].ref, null);
|
||||
if (node[ATTR_KEY] != null) applyRef(node[ATTR_KEY].ref, null);
|
||||
|
||||
if (unmountOnly === false || node['prevProps'] == null) {
|
||||
if (unmountOnly === false || node[ATTR_KEY] == null) {
|
||||
removeNode(node);
|
||||
}
|
||||
|
||||
|
|
@ -886,7 +883,7 @@
|
|||
* element's prop cache)
|
||||
*/
|
||||
function diffAttributes(dom, attrs, old, store) {
|
||||
var name;
|
||||
var name = void 0;
|
||||
|
||||
// remove attributes no longer present on the vnode by setting them to undefined
|
||||
for (name in old) {
|
||||
|
|
@ -919,7 +916,7 @@
|
|||
* @returns {import('../component').Component}
|
||||
*/
|
||||
function createComponent(Ctor, props, $) {
|
||||
var inst,
|
||||
var inst = void 0,
|
||||
i = recyclerComponents.length;
|
||||
|
||||
inst = new Component(props, $);
|
||||
|
|
@ -998,9 +995,9 @@
|
|||
|
||||
component._disable = false;
|
||||
|
||||
if (renderMode !== 0) {
|
||||
if (renderMode === 1 || options.syncComponentUpdates !== false || !component.base) {
|
||||
renderComponent(component, 1, mountAll);
|
||||
if (renderMode !== NO_RENDER) {
|
||||
if (renderMode === SYNC_RENDER || options.syncComponentUpdates !== false || !component.base) {
|
||||
renderComponent(component, SYNC_RENDER, mountAll);
|
||||
} else {
|
||||
enqueueRender(component);
|
||||
}
|
||||
|
|
@ -1029,9 +1026,9 @@
|
|||
initialBase = isUpdate || nextBase,
|
||||
initialChildComponent = component._component,
|
||||
skip = false,
|
||||
rendered,
|
||||
inst,
|
||||
cbase;
|
||||
rendered = void 0,
|
||||
inst = void 0,
|
||||
cbase = void 0;
|
||||
|
||||
// if updating
|
||||
if (isUpdate) {
|
||||
|
|
@ -1062,8 +1059,8 @@
|
|||
options.runTimeComponent = null;
|
||||
|
||||
var childComponent = rendered && rendered.nodeName,
|
||||
toUnmount,
|
||||
base;
|
||||
toUnmount = void 0,
|
||||
base = void 0;
|
||||
|
||||
if (typeof childComponent === 'function') {
|
||||
// set up high order component link
|
||||
|
|
@ -1072,15 +1069,15 @@
|
|||
inst = initialChildComponent;
|
||||
|
||||
if (inst && inst.constructor === childComponent && childProps.key == inst.__key) {
|
||||
setComponentProps(inst, childProps, 1, $, false);
|
||||
setComponentProps(inst, childProps, SYNC_RENDER, $, false);
|
||||
} else {
|
||||
toUnmount = inst;
|
||||
|
||||
component._component = inst = createComponent(childComponent, childProps, $);
|
||||
inst.nextBase = inst.nextBase || nextBase;
|
||||
inst._parentComponent = component;
|
||||
setComponentProps(inst, childProps, 0, $, false);
|
||||
renderComponent(inst, 1, mountAll, true);
|
||||
setComponentProps(inst, childProps, NO_RENDER, $, false);
|
||||
renderComponent(inst, SYNC_RENDER, mountAll, true);
|
||||
}
|
||||
|
||||
base = inst.base;
|
||||
|
|
@ -1093,7 +1090,7 @@
|
|||
cbase = component._component = null;
|
||||
}
|
||||
|
||||
if (initialBase || renderMode === 1) {
|
||||
if (initialBase || renderMode === SYNC_RENDER) {
|
||||
if (cbase) cbase._component = null;
|
||||
base = diff(cbase, rendered, $, mountAll || !isUpdate, initialBase && initialBase.parentNode, true, component.store);
|
||||
}
|
||||
|
|
@ -1167,7 +1164,7 @@
|
|||
}
|
||||
|
||||
if (c && isOwner && (!mountAll || c._component)) {
|
||||
setComponentProps(c, props, 3, $, mountAll);
|
||||
setComponentProps(c, props, ASYNC_RENDER, $, mountAll);
|
||||
dom = c.base;
|
||||
} else {
|
||||
if (originalComponent && !isDirectOwner) {
|
||||
|
|
@ -1181,7 +1178,7 @@
|
|||
// passing dom/oldDom as nextBase will recycle it if unused, so bypass recycling on L229:
|
||||
oldDom = null;
|
||||
}
|
||||
setComponentProps(c, props, 1, $, mountAll);
|
||||
setComponentProps(c, props, SYNC_RENDER, $, mountAll);
|
||||
dom = c.base;
|
||||
|
||||
if (oldDom && dom !== oldDom) {
|
||||
|
|
@ -1214,7 +1211,7 @@
|
|||
if (inner) {
|
||||
unmountComponent(inner);
|
||||
} else if (base) {
|
||||
if (base['prevProps'] != null) applyRef(base['prevProps'].ref, null);
|
||||
if (base[ATTR_KEY] != null) applyRef(base[ATTR_KEY].ref, null);
|
||||
|
||||
component.nextBase = base;
|
||||
|
||||
|
|
@ -1273,7 +1270,7 @@
|
|||
*/
|
||||
update: function update(callback) {
|
||||
if (callback) this._renderCallbacks.push(callback);
|
||||
renderComponent(this, 2);
|
||||
renderComponent(this, FORCE_RENDER);
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -1581,21 +1578,117 @@
|
|||
return mpPath;
|
||||
}
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
||||
(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);
|
||||
})();
|
||||
|
||||
function define(name, Component) {
|
||||
customElements.define(name, function (_HTMLElement) {
|
||||
_inherits(_class, _HTMLElement);
|
||||
|
||||
function _class() {
|
||||
_classCallCheck(this, _class);
|
||||
|
||||
return _possibleConstructorReturn(this, _HTMLElement.apply(this, arguments));
|
||||
}
|
||||
|
||||
_class.prototype.connectedCallback = function connectedCallback() {
|
||||
var shadowRoot = this.attachShadow({
|
||||
mode: 'open'
|
||||
});
|
||||
this.props = {};
|
||||
this.attrsToProps();
|
||||
this._ele = render(h(Component, this.props), shadowRoot);
|
||||
};
|
||||
|
||||
_class.prototype.disconnectedCallback = function disconnectedCallback() {};
|
||||
|
||||
_class.prototype.addEventListener = function addEventListener(name, callback) {
|
||||
this._ele._component.props['on' + name.charAt(0).toUpperCase() + name.slice(1)] = callback;
|
||||
};
|
||||
|
||||
_class.prototype.removeEventListener = function 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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_class.prototype.attrsToProps = function attrsToProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.props['css'] = this.getAttribute('css');
|
||||
var attrs = Component.propTypes;
|
||||
if (!attrs) return;
|
||||
Object.keys(attrs).forEach(function (key) {
|
||||
var type = attrs[key];
|
||||
var val = _this2.getAttribute(hyphenate(key));
|
||||
if (val !== null) {
|
||||
switch (type) {
|
||||
case String:
|
||||
_this2.props[key] = val;
|
||||
break;
|
||||
case Number:
|
||||
_this2.props[key] = Number(val);
|
||||
break;
|
||||
case Boolean:
|
||||
if (val === 'false' || val === '0') {
|
||||
_this2.props[key] = false;
|
||||
} else {
|
||||
_this2.props[key] = true;
|
||||
}
|
||||
break;
|
||||
case Array:
|
||||
case Object:
|
||||
_this2.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)) {
|
||||
_this2.props[key] = Component.defaultProps[key];
|
||||
} else {
|
||||
_this2.props[key] = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return _class;
|
||||
}(HTMLElement));
|
||||
}
|
||||
|
||||
function hyphenate(str) {
|
||||
return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
|
||||
}
|
||||
|
||||
function createRef() {
|
||||
return {};
|
||||
}
|
||||
|
||||
var omis = {
|
||||
h: h,
|
||||
createElement: h,
|
||||
cloneElement: cloneElement,
|
||||
createRef: createRef,
|
||||
Component: Component,
|
||||
render: render,
|
||||
rerender: rerender,
|
||||
options: options
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Omis = {
|
||||
h: h,
|
||||
|
|
@ -1605,129 +1698,11 @@
|
|||
Component: Component,
|
||||
render: render,
|
||||
rerender: rerender,
|
||||
options: options
|
||||
options: options,
|
||||
define: define
|
||||
};
|
||||
}
|
||||
|
||||
var _omisDefine_0_1_0_omisDefine = createCommonjsModule(function (module) {
|
||||
(function () {
|
||||
|
||||
var Omis = typeof commonjsRequire === 'function'
|
||||
? omis
|
||||
: window.Omis,
|
||||
h = Omis.h,
|
||||
render = Omis.render,
|
||||
hyphenateRE = /\B([A-Z])/g
|
||||
|
||||
; (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);
|
||||
})();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hyphenate(str) {
|
||||
return str.replace(hyphenateRE, '-$1').toLowerCase()
|
||||
}
|
||||
|
||||
if ('object' !== 'undefined' && module.exports) {
|
||||
define.default = define;
|
||||
module.exports = define;
|
||||
} else {
|
||||
window.define = define;
|
||||
}
|
||||
|
||||
})();
|
||||
});
|
||||
|
||||
var HelloMessage = function HelloMessage(props, store) {
|
||||
return Omis.h(
|
||||
'div',
|
||||
|
|
@ -1766,7 +1741,7 @@
|
|||
user: Object
|
||||
};
|
||||
|
||||
_omisDefine_0_1_0_omisDefine('hello-msg', HelloMessage);
|
||||
define('hello-msg', HelloMessage);
|
||||
|
||||
}());
|
||||
//# sourceMappingURL=b.js.map
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
import define from 'omis-define'
|
||||
import { define } from '../../src/omis'
|
||||
|
||||
const HelloMessage = (props, store) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omis",
|
||||
"version": "0.11.0",
|
||||
"version": "0.12.0",
|
||||
"description": "Functional Component with store, scoped css and easy hyperscript.",
|
||||
"main": "dist/omis.js",
|
||||
"jsnext:main": "dist/omis.esm.js",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
import { h } from './h'
|
||||
import { render } from './render'
|
||||
|
||||
|
||||
; (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)
|
||||
})()
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function hyphenate(str) {
|
||||
return str.replace(/\B([A-Z])/g, '-$1').toLowerCase()
|
||||
}
|
||||
|
||||
|
|
@ -3,6 +3,7 @@ import { cloneElement } from './clone-element';
|
|||
import { Component } from './component';
|
||||
import { render } from './render';
|
||||
import { rerender } from './render-queue';
|
||||
import { define } from './define';
|
||||
import options from './options';
|
||||
|
||||
function createRef() {
|
||||
|
|
@ -17,7 +18,8 @@ export default {
|
|||
Component,
|
||||
render,
|
||||
rerender,
|
||||
options
|
||||
options,
|
||||
define
|
||||
};
|
||||
|
||||
export {
|
||||
|
|
@ -28,7 +30,8 @@ export {
|
|||
Component,
|
||||
render,
|
||||
rerender,
|
||||
options
|
||||
options,
|
||||
define
|
||||
};
|
||||
|
||||
if(typeof window !== 'undefined'){
|
||||
|
|
@ -40,6 +43,7 @@ if(typeof window !== 'undefined'){
|
|||
Component,
|
||||
render,
|
||||
rerender,
|
||||
options
|
||||
options,
|
||||
define
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
import {
|
||||
render, h
|
||||
} from '../../src/omis'
|
||||
|
||||
describe('web components', () => {
|
||||
let scratch
|
||||
//const Empty = () => null
|
||||
|
||||
before(() => {
|
||||
scratch = document.createElement('div')
|
||||
; (document.body || document.documentElement).appendChild(scratch)
|
||||
})
|
||||
|
||||
beforeEach(() => {
|
||||
//let c = scratch.firstElementChild;
|
||||
//if (c) render(<Empty />, scratch, { merge: c })
|
||||
scratch.innerHTML = ''
|
||||
})
|
||||
|
||||
after(() => {
|
||||
scratch.parentNode.removeChild(scratch)
|
||||
scratch = null
|
||||
})
|
||||
|
||||
it('simple test', () => {
|
||||
|
||||
const HelloMessage = (props, store) => {
|
||||
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)
|
||||
|
||||
|
||||
document.body.innerHTML += `<hello-msg msg="Omis" user="{name:'dntzhang', age: 18}"></hello-msg>`
|
||||
|
||||
expect(document.querySelector('hello-msg').shadowRoot.innerHTML).to.deep.equal()
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue