diff --git a/examples/todo-app/b.js b/examples/todo-app/b.js new file mode 100644 index 000000000..2e7a1b5b1 --- /dev/null +++ b/examples/todo-app/b.js @@ -0,0 +1,824 @@ +(function () { + 'use strict'; + + /** Virtual DOM Node */ + function VNode() {} + + function getGlobal() { + if (typeof global !== 'object' || !global || global.Math !== Math || global.Array !== Array) { + if (typeof self !== 'undefined') { + return self; + } else if (typeof window !== 'undefined') { + return window; + } else if (typeof global !== 'undefined') { + return global; + } + return function () { + return this; + }(); + } + return global; + } + + /** Global options + * @public + * @namespace options {Object} + */ + var options = { + + store: null, + + root: getGlobal() + //componentChange(component, element) { }, + /** If `true`, `prop` changes trigger synchronous component updates. + * @name syncComponentUpdates + * @type Boolean + * @default true + */ + //syncComponentUpdates: true, + + /** Processes all created VNodes. + * @param {VNode} vnode A newly-created VNode to normalize/process + */ + //vnode(vnode) { } + + /** Hook invoked after a component is mounted. */ + //afterMount(component) { }, + + /** Hook invoked after the DOM is updated with a component's latest render. */ + //afterUpdate(component) { } + + /** Hook invoked immediately before a component is unmounted. */ + // beforeUnmount(component) { } + }; + + var stack = []; + + var EMPTY_CHILDREN = []; + + function h(nodeName, attributes) { + var children = EMPTY_CHILDREN, + lastSimple = void 0, + child = void 0, + simple = void 0, + i = void 0; + for (i = arguments.length; i-- > 2;) { + stack.push(arguments[i]); + } + if (attributes && attributes.children != null) { + if (!stack.length) stack.push(attributes.children); + delete attributes.children; + } + while (stack.length) { + if ((child = stack.pop()) && child.pop !== undefined) { + for (i = child.length; i--;) { + stack.push(child[i]); + } + } else { + if (typeof child === 'boolean') child = null; + + if (simple = typeof nodeName !== 'function') { + if (child == null) child = '';else if (typeof child === 'number') child = String(child);else if (typeof child !== 'string') simple = false; + } + + if (simple && lastSimple) { + children[children.length - 1] += child; + } else if (children === EMPTY_CHILDREN) { + children = [child]; + } else { + children.push(child); + } + + lastSimple = simple; + } + } + + var p = new VNode(); + p.nodeName = nodeName; + p.children = children; + p.attributes = attributes == null ? undefined : attributes; + p.key = attributes == null ? undefined : attributes.key; + + // if a "vnode hook" is defined, pass every created VNode to it + if (options.vnode !== undefined) options.vnode(p); + + return p; + } + + /** + * @license + * Copyright (c) 2016 The Polymer Project Authors. All rights reserved. + * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + * Code distributed by Google as part of the polymer project is also + * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt + */ + + /** + * This shim allows elements written in, or compiled to, ES5 to work on native + * implementations of Custom Elements v1. It sets new.target to the value of + * this.constructor so that the native HTMLElement constructor can access the + * current under-construction element's definition. + */ + (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 cssToDom(css) { + var node = document.createElement('style'); + node.innerText = css; + return node; + } + + function npn(str) { + return str.replace(/-(\w)/g, function ($, $1) { + return $1.toUpperCase(); + }); + } + + /** Invoke or update a ref, depending on whether it is a function or object ref. + * @param {object|function} [ref=null] + * @param {any} [value] + */ + function applyRef(ref, value) { + if (ref != null) { + if (typeof ref == 'function') ref(value);else ref.current = value; + } + } + + /** + * Call a function asynchronously, as soon as possible. Makes + * use of HTML Promise to schedule the callback if available, + * otherwise falling back to `setTimeout` (mainly for IE<11). + * @type {(callback: function) => void} + */ + var defer = typeof Promise == 'function' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout; + + function isArray(obj) { + return Object.prototype.toString.call(obj) === '[object Array]'; + } + + function nProps(props) { + if (!props || isArray(props)) return {}; + var result = {}; + Object.keys(props).forEach(function (key) { + result[key] = props[key].value; + }); + return result; + } + + // render modes + + var ATTR_KEY = '__preactattr_'; + + // 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; + + /** + * Check if two nodes are equivalent. + * + * @param {Node} node DOM Node to compare + * @param {VNode} vnode Virtual DOM node to compare + * @param {boolean} [hydrating=false] If true, ignores component constructors when comparing. + * @private + */ + function isSameNodeType(node, vnode, hydrating) { + if (typeof vnode === 'string' || typeof vnode === 'number') { + return node.splitText !== undefined; + } + if (typeof vnode.nodeName === 'string') { + return !node._componentConstructor && isNamedNode(node, vnode.nodeName); + } + return hydrating || node._componentConstructor === vnode.nodeName; + } + + /** + * Check if an Element has a given nodeName, case-insensitively. + * + * @param {Element} node A DOM Element to inspect the name of. + * @param {String} nodeName Unnormalized name to compare against. + */ + function isNamedNode(node, nodeName) { + return node.normalizedNodeName === nodeName || node.nodeName.toLowerCase() === nodeName.toLowerCase(); + } + + /** + * A DOM event listener + * @typedef {(e: Event) => void} EventListner + */ + + /** + * A mapping of event types to event listeners + * @typedef {Object.} EventListenerMap + */ + + /** + * Properties Preact adds to elements it creates + * @typedef PreactElementExtensions + * @property {string} [normalizedNodeName] A normalized node name to use in diffing + * @property {EventListenerMap} [_listeners] A map of event listeners added by components to this DOM node + * @property {import('../component').Component} [_component] The component that rendered this DOM node + * @property {function} [_componentConstructor] The constructor of the component that rendered this DOM node + */ + + /** + * A DOM element that has been extended with Preact properties + * @typedef {Element & ElementCSSInlineStyle & PreactElementExtensions} PreactElement + */ + + /** + * Create an element with the given nodeName. + * @param {string} nodeName The DOM node to create + * @param {boolean} [isSvg=false] If `true`, creates an element within the SVG + * namespace. + * @returns {PreactElement} The created DOM node + */ + function createNode(nodeName, isSvg) { + /** @type {PreactElement} */ + var node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName); + node.normalizedNodeName = nodeName; + return node; + } + + /** + * Remove a child node from its parent if attached. + * @param {Node} node The node to remove + */ + function removeNode(node) { + var parentNode = node.parentNode; + if (parentNode) parentNode.removeChild(node); + } + + /** + * Set a named attribute on the given Node, with special behavior for some names + * and event handlers. If `value` is `null`, the attribute/handler will be + * removed. + * @param {PreactElement} node An element to mutate + * @param {string} name The name/key to set, such as an event or attribute name + * @param {*} old The last value that was set for this name/node pair + * @param {*} value An attribute value, such as a function to be used as an + * event handler + * @param {boolean} isSvg Are we currently diffing inside an svg? + * @private + */ + function setAccessor(node, name, old, value, isSvg) { + if (name === 'className') name = 'class'; + + if (name === 'key') { + // ignore + } else if (name === 'ref') { + applyRef(old, null); + applyRef(value, node); + } else if (name === 'class' && !isSvg) { + node.className = value || ''; + } else if (name === 'style') { + if (!value || typeof value === 'string' || typeof old === 'string') { + node.style.cssText = value || ''; + } + if (value && typeof value === 'object') { + if (typeof old !== 'string') { + for (var i in old) { + 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]; + } + } + } else if (name === 'dangerouslySetInnerHTML') { + if (value) node.innerHTML = value.__html || ''; + } else if (name[0] == 'o' && name[1] == 'n') { + var useCapture = name !== (name = name.replace(/Capture$/, '')); + name = name.toLowerCase().substring(2); + if (value) { + if (!old) node.addEventListener(name, eventProxy, useCapture); + } else { + node.removeEventListener(name, eventProxy, useCapture); + } + (node._listeners || (node._listeners = {}))[name] = value; + } else if (name !== 'list' && name !== 'type' && !isSvg && name in node) { + // Attempt to set a DOM property to the given value. + // IE & FF throw for certain property-value combinations. + try { + node[name] = value == null ? '' : value; + } catch (e) {} + if ((value == null || value === false) && name != 'spellcheck') node.removeAttribute(name); + } else { + var ns = isSvg && name !== (name = name.replace(/^xlink:?/, '')); + // spellcheck is treated differently than all other boolean values and + // should not be removed when the value is `false`. See: + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-spellcheck + if (value == null || value === false) { + if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name); + } else if (typeof value !== 'function') { + if (typeof value === 'string') { + if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value); + node.props[name] = value; + } else { + //can not trigger observedAttributes + node.props[name] = value; + } + } + } + } + + /** + * Proxy an event to hooked event handlers + * @param {Event} e The event object from the browser + * @private + */ + function eventProxy(e) { + return this._listeners[e.type](options.event && options.event(e) || e); + } + + /** Diff recursion count, used to track the end of the diff cycle. */ + var diffLevel = 0; + + /** Global flag indicating if the diff is currently within an SVG */ + var isSvgMode = false; + + /** Global flag indicating if the diff is performing hydration */ + var hydrating = false; + + /** Apply differences in a given vnode (and it's deep children) to a real DOM Node. + * @param {Element} [dom=null] A DOM node to mutate into the shape of the `vnode` + * @param {VNode} vnode A VNode (with descendants forming a tree) representing the desired DOM structure + * @returns {Element} dom The created/mutated element + * @private + */ + function diff(dom, vnode, context, mountAll, parent, componentRoot) { + // diffLevel having been 0 here indicates initial entry into the diff (not a subdiff) + if (!diffLevel++) { + // when first starting the diff, check if we're diffing an SVG or within an SVG + isSvgMode = parent != null && parent.ownerSVGElement !== undefined; + + // hydration is indicated by the existing element to be diffed not having a prop cache + hydrating = dom != null && !(ATTR_KEY in dom); + } + + var ret = idiff(dom, vnode, context, mountAll, componentRoot); + + // append the element if its a new parent + if (parent && ret.parentNode !== parent) parent.appendChild(ret); + + // diffLevel being reduced to 0 means we're exiting the diff + if (! --diffLevel) { + hydrating = false; + // invoke queued componentDidMount lifecycle methods + } + + return ret; + } + + /** Internals of `diff()`, separated to allow bypassing diffLevel / mount flushing. */ + function idiff(dom, vnode, context, mountAll, componentRoot) { + var out = dom, + prevSvgMode = isSvgMode; + + // empty values (null, undefined, booleans) render as empty Text nodes + if (vnode == null || typeof vnode === 'boolean') vnode = ''; + + // Fast case: Strings & Numbers create/update Text nodes. + if (typeof vnode === 'string' || typeof vnode === 'number') { + + // update if it's already a Text node: + if (dom && dom.splitText !== undefined && dom.parentNode && (!dom._component || componentRoot)) { + /* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/preact/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */ + if (dom.nodeValue != vnode) { + dom.nodeValue = vnode; + } + } else { + // it wasn't a Text node: replace it with one and recycle the old Element + out = document.createTextNode(vnode); + if (dom) { + if (dom.parentNode) dom.parentNode.replaceChild(out, dom); + recollectNodeTree(dom, true); + } + } + + out[ATTR_KEY] = true; + + return out; + } + + // If the VNode represents a Component, perform a component diff: + var vnodeName = vnode.nodeName; + + // Tracks entering and exiting SVG namespace when descending through the tree. + isSvgMode = vnodeName === 'svg' ? true : vnodeName === 'foreignObject' ? false : isSvgMode; + + // If there's no existing element or it's the wrong type, create a new one: + vnodeName = String(vnodeName); + if (!dom || !isNamedNode(dom, vnodeName)) { + out = createNode(vnodeName, isSvgMode); + + if (dom) { + // move children into the replacement node + while (dom.firstChild) { + out.appendChild(dom.firstChild); + } // if the previous Element was mounted into the DOM, replace it inline + if (dom.parentNode) dom.parentNode.replaceChild(out, dom); + + // recycle the old element (skips non-Element node types) + recollectNodeTree(dom, true); + } + } + + var fc = out.firstChild, + props = out[ATTR_KEY], + vchildren = vnode.children; + + if (props == null) { + props = out[ATTR_KEY] = {}; + for (var a = out.attributes, i = a.length; i--;) { + props[a[i].name] = a[i].value; + } + } + + // Optimization: fast-path for elements containing a single TextNode: + if (!hydrating && vchildren && vchildren.length === 1 && typeof vchildren[0] === 'string' && fc != null && fc.splitText !== undefined && fc.nextSibling == null) { + if (fc.nodeValue != vchildren[0]) { + fc.nodeValue = vchildren[0]; + } + } + // otherwise, if there are existing or new children, diff them: + else if (vchildren && vchildren.length || fc != null) { + innerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML != null); + } + + // Apply attributes/props from VNode to the DOM Element: + diffAttributes(out, vnode.attributes, props); + + // restore previous SVG mode: (in case we're exiting an SVG namespace) + isSvgMode = prevSvgMode; + + return out; + } + + /** Apply child and attribute changes between a VNode and a DOM Node to the DOM. + * @param {Element} dom Element whose children should be compared & mutated + * @param {Array} vchildren Array of VNodes to compare to `dom.childNodes` + * @param {Object} context Implicitly descendant context object (from most recent `getChildContext()`) + * @param {Boolean} mountAll + * @param {Boolean} isHydrating If `true`, consumes externally created elements similar to hydration + */ + function innerDiffNode(dom, vchildren, context, mountAll, isHydrating) { + var originalChildren = dom.childNodes, + children = [], + keyed = {}, + keyedLen = 0, + min = 0, + len = originalChildren.length, + childrenLen = 0, + vlen = vchildren ? vchildren.length : 0, + 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[ATTR_KEY], + key = vlen && props ? _child._component ? _child._component.__key : props.key : null; + if (key != null) { + keyedLen++; + keyed[key] = _child; + } else if (props || (_child.splitText !== undefined ? isHydrating ? _child.nodeValue.trim() : true : isHydrating)) { + children[childrenLen++] = _child; + } + } + } + + if (vlen !== 0) { + 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; + keyedLen--; + } + } + // attempt to pluck a node of the same type from the existing children + else if (!child && min < childrenLen) { + for (j = min; j < childrenLen; j++) { + if (children[j] !== undefined && isSameNodeType(c = children[j], vchild, isHydrating)) { + child = c; + children[j] = undefined; + if (j === childrenLen - 1) childrenLen--; + if (j === min) min++; + break; + } + } + } + + // morph the matched/found/created DOM child to match vchild (deep) + child = idiff(child, vchild, context, mountAll); + + f = originalChildren[_i]; + if (child && child !== dom && child !== f) { + if (f == null) { + dom.appendChild(child); + } else if (child === f.nextSibling) { + removeNode(f); + } else { + dom.insertBefore(child, f); + } + } + } + } + + // remove unused keyed children: + if (keyedLen) { + for (var _i2 in keyed) { + if (keyed[_i2] !== undefined) recollectNodeTree(keyed[_i2], false); + } + } + + // remove orphaned unkeyed children: + while (min <= childrenLen) { + if ((child = children[childrenLen--]) !== undefined) recollectNodeTree(child, false); + } + } + + /** Recursively recycle (or just unmount) a node and its descendants. + * @param {Node} node DOM node to start unmount/removal from + * @param {Boolean} [unmountOnly=false] If `true`, only triggers unmount lifecycle, skips removal + */ + function recollectNodeTree(node, unmountOnly) { + + // 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[ATTR_KEY] != null && node[ATTR_KEY].ref) node[ATTR_KEY].ref(null); + + if (unmountOnly === false || node[ATTR_KEY] == null) { + removeNode(node); + } + + removeChildren(node); + } + + /** Recollect/unmount all children. + * - we use .lastChild here because it causes less reflow than .firstChild + * - it's also cheaper than accessing the .childNodes Live NodeList + */ + function removeChildren(node) { + node = node.lastChild; + while (node) { + var next = node.previousSibling; + recollectNodeTree(node, true); + node = next; + } + } + + /** Apply differences in attributes from a VNode to the given DOM Element. + * @param {Element} dom Element with attributes to diff `attrs` against + * @param {Object} attrs The desired end-state key-value attribute pairs + * @param {Object} old Current/previous attributes (from previous VNode or element's prop cache) + */ + function diffAttributes(dom, attrs, old) { + var name = void 0; + + // remove attributes no longer present on the vnode by setting them to undefined + for (name in old) { + if (!(attrs && attrs[name] != null) && old[name] != null) { + setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode); + } + } + + // add new & update changed attributes + for (name in attrs) { + if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) { + setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode); + } + } + } + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + 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; } + + var WeElement = function (_HTMLElement) { + _inherits(WeElement, _HTMLElement); + + function WeElement() { + _classCallCheck(this, WeElement); + + var _this = _possibleConstructorReturn(this, _HTMLElement.call(this)); + + _this.props = nProps(_this.constructor.props); + _this.data = _this.constructor.data || {}; + return _this; + } + + WeElement.prototype.connectedCallback = function connectedCallback() { + this.install(); + + var shadowRoot = this.attachShadow({ mode: 'open' }); + + this.css && shadowRoot.appendChild(cssToDom(this.css())); + this.host = diff(null, this.render(this.props, this.data), {}, false, null, false); + shadowRoot.appendChild(this.host); + + this.installed(); + }; + + //chain transfer through this method + + + WeElement.prototype.attributeChangedCallback = function attributeChangedCallback(name, pre, current) { + this.props[npn(name)] = current; + this.update(); + }; + + WeElement.prototype.disconnectedCallback = function disconnectedCallback() { + this.uninstall(); + }; + + WeElement.prototype.update = function update() { + this.beforeUpdate(); + diff(this.host, this.render(this.props, this.data)); + this.afterUpdate(); + }; + + WeElement.prototype.fire = function fire(name, data) { + this.dispatchEvent(new CustomEvent(name, { detail: data })); + }; + + WeElement.prototype.install = function install() {}; + + WeElement.prototype.installed = function installed() {}; + + WeElement.prototype.beforeUpdate = function beforeUpdate() {}; + + WeElement.prototype.afterUpdate = function afterUpdate() {}; + + _createClass(WeElement, null, [{ + key: 'observedAttributes', + get: function get() { + if (!this.props) return; + if (isArray(this.props)) { + return this.props; + } else { + return Object.keys(this.props); + } + } + }]); + + return WeElement; + }(HTMLElement); + + function render(vnode, parent) { + parent = typeof parent === 'string' ? document.querySelector(parent) : parent; + diff(null, vnode, {}, false, parent, false); + } + + var instances = []; + + options.root.Omi = { + h: h, + createElement: h, + WeElement: WeElement, + render: render, + options: options, + instances: instances + }; + + options.root.Omi.version = '4.0.0'; + + function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn$1(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$1(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; } + + var TodoList = function (_WeElement) { + _inherits$1(TodoList, _WeElement); + + function TodoList() { + _classCallCheck$1(this, TodoList); + + return _possibleConstructorReturn$1(this, _WeElement.apply(this, arguments)); + } + + TodoList.prototype.render = function render$$1(props) { + console.log(props); + return Omi.h( + 'ul', + null, + this.props.items.map(function (item) { + return Omi.h( + 'li', + { key: item.id }, + item.text + ); + }) + ); + }; + + return TodoList; + }(WeElement); + + customElements.define('todo-list', TodoList); + + var TodoApp = function (_WeElement2) { + _inherits$1(TodoApp, _WeElement2); + + function TodoApp() { + _classCallCheck$1(this, TodoApp); + + var _this2 = _possibleConstructorReturn$1(this, _WeElement2.call(this)); + + _this2.data = { items: [], text: '' }; + _this2.handleChange = _this2.handleChange.bind(_this2); + _this2.handleSubmit = _this2.handleSubmit.bind(_this2); + return _this2; + } + + TodoApp.prototype.render = function render$$1() { + var _this3 = this; + + console.log(this.data.items); + return Omi.h( + 'div', + null, + Omi.h( + 'h3', + null, + 'TODO' + ), + Omi.h('todo-list', { ref: function ref(e) { + _this3.list = e; + }, items: this.data.items }), + Omi.h( + 'form', + { onSubmit: this.handleSubmit }, + Omi.h('input', { + id: 'new-todo', + onChange: this.handleChange, + value: this.data.text + }), + Omi.h( + 'button', + null, + 'Add #', + this.data.items.length + 1 + ) + ) + ); + }; + + TodoApp.prototype.handleChange = function handleChange(e) { + this.data.text = e.target.value; + }; + + TodoApp.prototype.handleSubmit = function handleSubmit(e) { + e.preventDefault(); + if (!this.data.text.length) { + return; + } + this.data.items.push({ + text: this.data.text, + id: Date.now() + }); + this.data.text = ''; + this.update(); + this.list.update(); + }; + + return TodoApp; + }(WeElement); + + customElements.define('todo-app', TodoApp); + + render(Omi.h('todo-app', null), 'body'); + +}()); +//# sourceMappingURL=b.js.map diff --git a/examples/todo-app/b.js.map b/examples/todo-app/b.js.map new file mode 100644 index 000000000..5742c9df1 --- /dev/null +++ b/examples/todo-app/b.js.map @@ -0,0 +1 @@ +{"version":3,"file":"b.js","sources":["../../src/vnode.js","../../src/options.js","../../src/h.js","../../src/util.js","../../src/constants.js","../../src/vdom/index.js","../../src/dom/index.js","../../src/vdom/diff.js","../../src/we-element.js","../../src/render.js","../../src/omi.js","main.js"],"sourcesContent":["/** Virtual DOM Node */\r\nexport function VNode() {}\r\n","function getGlobal() {\r\n\tif (typeof global !== 'object' || !global || global.Math !== Math || global.Array !== Array) {\r\n\t\tif (typeof self !== 'undefined') {\r\n\t\t\treturn self;\r\n\t\t} else if (typeof window !== 'undefined') {\r\n\t\t\treturn window;\r\n\t\t} else if (typeof global !== 'undefined') {\r\n\t\t\treturn global;\r\n\t\t}\r\n\t\treturn (function(){\r\n\t\t\treturn this;\r\n\t\t})();\r\n\t\t\r\n\t}\r\n\treturn global;\r\n}\r\n\r\n/** Global options\r\n *\t@public\r\n *\t@namespace options {Object}\r\n */\r\nexport default {\r\n\r\n\tstore: null,\r\n\t\r\n\troot: getGlobal()\r\n\t//componentChange(component, element) { },\r\n\t/** If `true`, `prop` changes trigger synchronous component updates.\r\n\t *\t@name syncComponentUpdates\r\n\t *\t@type Boolean\r\n\t *\t@default true\r\n\t */\r\n\t//syncComponentUpdates: true,\r\n\r\n\t/** Processes all created VNodes.\r\n\t *\t@param {VNode} vnode\tA newly-created VNode to normalize/process\r\n\t */\r\n\t//vnode(vnode) { }\r\n\r\n\t/** Hook invoked after a component is mounted. */\r\n\t//afterMount(component) { },\r\n\r\n\t/** Hook invoked after the DOM is updated with a component's latest render. */\r\n\t//afterUpdate(component) { }\r\n\r\n\t/** Hook invoked immediately before a component is unmounted. */\r\n\t// beforeUnmount(component) { }\r\n};\r\n","import { VNode } from './vnode';\r\nimport options from './options';\r\n\r\n\r\nconst stack = [];\r\n\r\nconst EMPTY_CHILDREN = [];\r\n\r\nexport function h(nodeName, attributes) {\r\n\tlet children=EMPTY_CHILDREN, lastSimple, child, simple, i;\r\n\tfor (i=arguments.length; i-- > 2; ) {\r\n\t\tstack.push(arguments[i]);\r\n\t}\r\n\tif (attributes && attributes.children!=null) {\r\n\t\tif (!stack.length) stack.push(attributes.children);\r\n\t\tdelete attributes.children;\r\n\t}\r\n\twhile (stack.length) {\r\n\t\tif ((child = stack.pop()) && child.pop!==undefined) {\r\n\t\t\tfor (i=child.length; i--; ) stack.push(child[i]);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tif (typeof child==='boolean') child = null;\r\n\r\n\t\t\tif ((simple = typeof nodeName!=='function')) {\r\n\t\t\t\tif (child==null) child = '';\r\n\t\t\t\telse if (typeof child==='number') child = String(child);\r\n\t\t\t\telse if (typeof child!=='string') simple = false;\r\n\t\t\t}\r\n\r\n\t\t\tif (simple && lastSimple) {\r\n\t\t\t\tchildren[children.length-1] += child;\r\n\t\t\t}\r\n\t\t\telse if (children===EMPTY_CHILDREN) {\r\n\t\t\t\tchildren = [child];\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tchildren.push(child);\r\n\t\t\t}\r\n\r\n\t\t\tlastSimple = simple;\r\n\t\t}\r\n\t}\r\n\r\n\tlet p = new VNode();\r\n\tp.nodeName = nodeName;\r\n\tp.children = children;\r\n\tp.attributes = attributes==null ? undefined : attributes;\r\n\tp.key = attributes==null ? undefined : attributes.key;\r\n\r\n\t// if a \"vnode hook\" is defined, pass every created VNode to it\r\n\tif (options.vnode!==undefined) options.vnode(p);\r\n\r\n\treturn p;\r\n}","/**\r\n * @license\r\n * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.\r\n * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\r\n * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\r\n * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\r\n * Code distributed by Google as part of the polymer project is also\r\n * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\r\n */\r\n\r\n/**\r\n * This shim allows elements written in, or compiled to, ES5 to work on native\r\n * implementations of Custom Elements v1. It sets new.target to the value of\r\n * this.constructor so that the native HTMLElement constructor can access the\r\n * current under-construction element's definition.\r\n */\r\n(function() {\r\n if (\r\n // No Reflect, no classes, no need for shim because native custom elements\r\n // require ES2015 classes or Reflect.\r\n window.Reflect === undefined ||\r\n window.customElements === undefined ||\r\n // The webcomponentsjs custom elements polyfill doesn't require\r\n // ES2015-compatible construction (`super()` or `Reflect.construct`).\r\n window.customElements.hasOwnProperty('polyfillWrapFlushCallback')\r\n ) {\r\n return;\r\n }\r\n const BuiltInHTMLElement = HTMLElement;\r\n window.HTMLElement = function HTMLElement() {\r\n return Reflect.construct(BuiltInHTMLElement, [], this.constructor);\r\n };\r\n HTMLElement.prototype = BuiltInHTMLElement.prototype;\r\n HTMLElement.prototype.constructor = HTMLElement;\r\n Object.setPrototypeOf(HTMLElement, BuiltInHTMLElement);\r\n })();\r\n\r\n\r\n\r\nexport function cssToDom(css) {\r\n const node = document.createElement('style')\r\n node.innerText = css\r\n return node\r\n}\r\n\r\n\r\nexport function npn(str) {\r\n return str.replace(/-(\\w)/g, function ($, $1) {\r\n return $1.toUpperCase();\r\n });\r\n}\r\n\r\nexport function extend(obj, props) {\r\n\tfor (let i in props) obj[i] = props[i];\r\n\treturn obj;\r\n}\r\n\r\n/** Invoke or update a ref, depending on whether it is a function or object ref.\r\n * @param {object|function} [ref=null]\r\n * @param {any} [value]\r\n */\r\nexport function applyRef(ref, value) {\r\n\tif (ref!=null) {\r\n\t\tif (typeof ref=='function') ref(value);\r\n\t\telse ref.current = value;\r\n\t}\r\n}\r\n\r\n/**\r\n * Call a function asynchronously, as soon as possible. Makes\r\n * use of HTML Promise to schedule the callback if available,\r\n * otherwise falling back to `setTimeout` (mainly for IE<11).\r\n * @type {(callback: function) => void}\r\n */\r\nexport const defer = typeof Promise=='function' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout;\r\n\r\nexport function isArray(obj){\r\n return Object.prototype.toString.call(obj) === '[object Array]'\r\n}\r\n\r\nexport function nProps(props){\r\n if(!props || isArray(props)) return {}\r\n const result = {}\r\n Object.keys(props).forEach(key =>{\r\n result[key] = props[key].value \r\n })\r\n return result\r\n}\r\n","// render modes\r\n\r\nexport const NO_RENDER = 0;\r\nexport const SYNC_RENDER = 1;\r\nexport const FORCE_RENDER = 2;\r\nexport const ASYNC_RENDER = 3;\r\n\r\n\r\nexport const ATTR_KEY = '__preactattr_';\r\n\r\n// DOM properties that should NOT have \"px\" added when numeric\r\nexport const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;\r\n\r\n","import { extend } from '../util';\r\n\r\n\r\n/**\r\n * Check if two nodes are equivalent.\r\n *\r\n * @param {Node} node\t\t\tDOM Node to compare\r\n * @param {VNode} vnode\t\t\tVirtual DOM node to compare\r\n * @param {boolean} [hydrating=false]\tIf true, ignores component constructors when comparing.\r\n * @private\r\n */\r\nexport function isSameNodeType(node, vnode, hydrating) {\r\n\tif (typeof vnode==='string' || typeof vnode==='number') {\r\n\t\treturn node.splitText!==undefined;\r\n\t}\r\n\tif (typeof vnode.nodeName==='string') {\r\n\t\treturn !node._componentConstructor && isNamedNode(node, vnode.nodeName);\r\n\t}\r\n\treturn hydrating || node._componentConstructor===vnode.nodeName;\r\n}\r\n\r\n\r\n/**\r\n * Check if an Element has a given nodeName, case-insensitively.\r\n *\r\n * @param {Element} node\tA DOM Element to inspect the name of.\r\n * @param {String} nodeName\tUnnormalized name to compare against.\r\n */\r\nexport function isNamedNode(node, nodeName) {\r\n\treturn node.normalizedNodeName===nodeName || node.nodeName.toLowerCase()===nodeName.toLowerCase();\r\n}\r\n\r\n\r\n/**\r\n * Reconstruct Component-style `props` from a VNode.\r\n * Ensures default/fallback values from `defaultProps`:\r\n * Own-properties of `defaultProps` not present in `vnode.attributes` are added.\r\n *\r\n * @param {VNode} vnode\r\n * @returns {Object} props\r\n */\r\nexport function getNodeProps(vnode) {\r\n\tlet props = extend({}, vnode.attributes);\r\n\tprops.children = vnode.children;\r\n\r\n\tlet defaultProps = vnode.nodeName.defaultProps;\r\n\tif (defaultProps!==undefined) {\r\n\t\tfor (let i in defaultProps) {\r\n\t\t\tif (props[i]===undefined) {\r\n\t\t\t\tprops[i] = defaultProps[i];\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\treturn props;\r\n}\r\n","import { IS_NON_DIMENSIONAL } from '../constants';\r\nimport { applyRef } from '../util';\r\nimport options from '../options';\r\n\r\n/**\r\n * A DOM event listener\r\n * @typedef {(e: Event) => void} EventListner\r\n */\r\n\r\n/**\r\n * A mapping of event types to event listeners\r\n * @typedef {Object.} EventListenerMap\r\n */\r\n\r\n/**\r\n * Properties Preact adds to elements it creates\r\n * @typedef PreactElementExtensions\r\n * @property {string} [normalizedNodeName] A normalized node name to use in diffing\r\n * @property {EventListenerMap} [_listeners] A map of event listeners added by components to this DOM node\r\n * @property {import('../component').Component} [_component] The component that rendered this DOM node\r\n * @property {function} [_componentConstructor] The constructor of the component that rendered this DOM node\r\n */\r\n\r\n/**\r\n * A DOM element that has been extended with Preact properties\r\n * @typedef {Element & ElementCSSInlineStyle & PreactElementExtensions} PreactElement\r\n */\r\n\r\n/**\r\n * Create an element with the given nodeName.\r\n * @param {string} nodeName The DOM node to create\r\n * @param {boolean} [isSvg=false] If `true`, creates an element within the SVG\r\n * namespace.\r\n * @returns {PreactElement} The created DOM node\r\n */\r\nexport function createNode(nodeName, isSvg) {\r\n\t/** @type {PreactElement} */\r\n\tlet node = isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName);\r\n\tnode.normalizedNodeName = nodeName;\r\n\treturn node;\r\n}\r\n\r\n\r\n/**\r\n * Remove a child node from its parent if attached.\r\n * @param {Node} node The node to remove\r\n */\r\nexport function removeNode(node) {\r\n\tlet parentNode = node.parentNode;\r\n\tif (parentNode) parentNode.removeChild(node);\r\n}\r\n\r\n\r\n/**\r\n * Set a named attribute on the given Node, with special behavior for some names\r\n * and event handlers. If `value` is `null`, the attribute/handler will be\r\n * removed.\r\n * @param {PreactElement} node An element to mutate\r\n * @param {string} name The name/key to set, such as an event or attribute name\r\n * @param {*} old The last value that was set for this name/node pair\r\n * @param {*} value An attribute value, such as a function to be used as an\r\n * event handler\r\n * @param {boolean} isSvg Are we currently diffing inside an svg?\r\n * @private\r\n */\r\nexport function setAccessor(node, name, old, value, isSvg) {\r\n\tif (name==='className') name = 'class';\r\n\r\n\r\n\tif (name==='key') {\r\n\t\t// ignore\r\n\t}\r\n\telse if (name==='ref') {\r\n\t\tapplyRef(old, null);\r\n\t\tapplyRef(value, node);\r\n\t}\r\n\telse if (name==='class' && !isSvg) {\r\n\t\tnode.className = value || '';\r\n\t}\r\n\telse if (name==='style') {\r\n\t\tif (!value || typeof value==='string' || typeof old==='string') {\r\n\t\t\tnode.style.cssText = value || '';\r\n\t\t}\r\n\t\tif (value && typeof value==='object') {\r\n\t\t\tif (typeof old!=='string') {\r\n\t\t\t\tfor (let i in old) if (!(i in value)) node.style[i] = '';\r\n\t\t\t}\r\n\t\t\tfor (let i in value) {\r\n\t\t\t\tnode.style[i] = typeof value[i]==='number' && IS_NON_DIMENSIONAL.test(i)===false ? (value[i]+'px') : value[i];\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\telse if (name==='dangerouslySetInnerHTML') {\r\n\t\tif (value) node.innerHTML = value.__html || '';\r\n\t}\r\n\telse if (name[0]=='o' && name[1]=='n') {\r\n\t\tlet useCapture = name !== (name=name.replace(/Capture$/, ''));\r\n\t\tname = name.toLowerCase().substring(2);\r\n\t\tif (value) {\r\n\t\t\tif (!old) node.addEventListener(name, eventProxy, useCapture);\r\n\t\t}\r\n\t\telse {\r\n\t\t\tnode.removeEventListener(name, eventProxy, useCapture);\r\n\t\t}\r\n\t\t(node._listeners || (node._listeners = {}))[name] = value;\r\n\t}\r\n\telse if (name!=='list' && name!=='type' && !isSvg && name in node) {\r\n\t\t// Attempt to set a DOM property to the given value.\r\n\t\t// IE & FF throw for certain property-value combinations.\r\n\t\ttry {\r\n\t\t\tnode[name] = value==null ? '' : value;\r\n\t\t} catch (e) { }\r\n\t\tif ((value==null || value===false) && name!='spellcheck') node.removeAttribute(name);\r\n\t}\r\n\telse {\r\n\t\tlet ns = isSvg && (name !== (name = name.replace(/^xlink:?/, '')));\r\n\t\t// spellcheck is treated differently than all other boolean values and\r\n\t\t// should not be removed when the value is `false`. See:\r\n\t\t// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-spellcheck\r\n\t\tif (value==null || value===false) {\r\n\t\t\tif (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());\r\n\t\t\telse node.removeAttribute(name);\r\n\t\t}\r\n\t\telse if (typeof value!=='function') {\r\n\t\t\tif(typeof value === 'string'){\r\n\t\t\t\tif (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);\r\n\t\t\t\telse node.setAttribute(name, value);\t\r\n\t\t\t\tnode.props[name] = value;\r\n\t\t\t} else {\r\n\t\t\t\t//can not trigger observedAttributes\r\n\t\t\t\tnode.props[name] = value;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\r\n/**\r\n * Proxy an event to hooked event handlers\r\n * @param {Event} e The event object from the browser\r\n * @private\r\n */\r\nfunction eventProxy(e) {\r\n\treturn this._listeners[e.type](options.event && options.event(e) || e);\r\n}","import { ATTR_KEY } from '../constants';\r\nimport { isSameNodeType, isNamedNode } from './index';\r\nimport { createNode, setAccessor } from '../dom/index';\r\nimport options from '../options';\r\nimport { removeNode } from '../dom/index';\r\n\r\n/** Queue of components that have been mounted and are awaiting componentDidMount */\r\nexport const mounts = [];\r\n\r\n/** Diff recursion count, used to track the end of the diff cycle. */\r\nexport let diffLevel = 0;\r\n\r\n/** Global flag indicating if the diff is currently within an SVG */\r\nlet isSvgMode = false;\r\n\r\n/** Global flag indicating if the diff is performing hydration */\r\nlet hydrating = false;\r\n\r\n\r\n\r\n\r\n/** Apply differences in a given vnode (and it's deep children) to a real DOM Node.\r\n *\t@param {Element} [dom=null]\t\tA DOM node to mutate into the shape of the `vnode`\r\n *\t@param {VNode} vnode\t\t\tA VNode (with descendants forming a tree) representing the desired DOM structure\r\n *\t@returns {Element} dom\t\t\tThe created/mutated element\r\n *\t@private\r\n */\r\nexport function diff(dom, vnode, context, mountAll, parent, componentRoot) {\r\n\t// diffLevel having been 0 here indicates initial entry into the diff (not a subdiff)\r\n\tif (!diffLevel++) {\r\n\t\t// when first starting the diff, check if we're diffing an SVG or within an SVG\r\n\t\tisSvgMode = parent!=null && parent.ownerSVGElement!==undefined;\r\n\r\n\t\t// hydration is indicated by the existing element to be diffed not having a prop cache\r\n\t\thydrating = dom!=null && !(ATTR_KEY in dom);\r\n\t}\r\n\r\n\tlet ret = idiff(dom, vnode, context, mountAll, componentRoot);\r\n\r\n\t// append the element if its a new parent\r\n\tif (parent && ret.parentNode!==parent) parent.appendChild(ret);\r\n\r\n\t// diffLevel being reduced to 0 means we're exiting the diff\r\n\tif (!--diffLevel) {\r\n\t\thydrating = false;\r\n\t\t// invoke queued componentDidMount lifecycle methods\r\n\t\t\r\n\t}\r\n\r\n\treturn ret;\r\n}\r\n\r\n\r\n/** Internals of `diff()`, separated to allow bypassing diffLevel / mount flushing. */\r\nfunction idiff(dom, vnode, context, mountAll, componentRoot) {\r\n\tlet out = dom,\r\n\t\tprevSvgMode = isSvgMode;\r\n\r\n\t// empty values (null, undefined, booleans) render as empty Text nodes\r\n\tif (vnode==null || typeof vnode==='boolean') vnode = '';\r\n\r\n\r\n\t// Fast case: Strings & Numbers create/update Text nodes.\r\n\tif (typeof vnode==='string' || typeof vnode==='number') {\r\n\r\n\t\t// update if it's already a Text node:\r\n\t\tif (dom && dom.splitText!==undefined && dom.parentNode && (!dom._component || componentRoot)) {\r\n\t\t\t/* istanbul ignore if */ /* Browser quirk that can't be covered: https://github.com/developit/preact/commit/fd4f21f5c45dfd75151bd27b4c217d8003aa5eb9 */\r\n\t\t\tif (dom.nodeValue!=vnode) {\r\n\t\t\t\tdom.nodeValue = vnode;\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\t// it wasn't a Text node: replace it with one and recycle the old Element\r\n\t\t\tout = document.createTextNode(vnode);\r\n\t\t\tif (dom) {\r\n\t\t\t\tif (dom.parentNode) dom.parentNode.replaceChild(out, dom);\r\n\t\t\t\trecollectNodeTree(dom, true);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tout[ATTR_KEY] = true;\r\n\r\n\t\treturn out;\r\n\t}\r\n\r\n\r\n\t// If the VNode represents a Component, perform a component diff:\r\n\tlet vnodeName = vnode.nodeName;\r\n\t\r\n\r\n\t// Tracks entering and exiting SVG namespace when descending through the tree.\r\n\tisSvgMode = vnodeName==='svg' ? true : vnodeName==='foreignObject' ? false : isSvgMode;\r\n\r\n\r\n\t// If there's no existing element or it's the wrong type, create a new one:\r\n\tvnodeName = String(vnodeName);\r\n\tif (!dom || !isNamedNode(dom, vnodeName)) {\r\n\t\tout = createNode(vnodeName, isSvgMode);\r\n\r\n\t\tif (dom) {\r\n\t\t\t// move children into the replacement node\r\n\t\t\twhile (dom.firstChild) out.appendChild(dom.firstChild);\r\n\r\n\t\t\t// if the previous Element was mounted into the DOM, replace it inline\r\n\t\t\tif (dom.parentNode) dom.parentNode.replaceChild(out, dom);\r\n\r\n\t\t\t// recycle the old element (skips non-Element node types)\r\n\t\t\trecollectNodeTree(dom, true);\r\n\t\t}\r\n\t}\r\n\r\n\r\n\tlet fc = out.firstChild,\r\n\t\tprops = out[ATTR_KEY],\r\n\t\tvchildren = vnode.children;\r\n\r\n\tif (props==null) {\r\n\t\tprops = out[ATTR_KEY] = {};\r\n\t\tfor (let a=out.attributes, i=a.length; i--; ) props[a[i].name] = a[i].value;\r\n\t}\r\n\r\n\t// Optimization: fast-path for elements containing a single TextNode:\r\n\tif (!hydrating && vchildren && vchildren.length===1 && typeof vchildren[0]==='string' && fc!=null && fc.splitText!==undefined && fc.nextSibling==null) {\r\n\t\tif (fc.nodeValue!=vchildren[0]) {\r\n\t\t\tfc.nodeValue = vchildren[0];\r\n\t\t}\r\n\t}\r\n\t// otherwise, if there are existing or new children, diff them:\r\n\telse if (vchildren && vchildren.length || fc!=null) {\r\n\t\tinnerDiffNode(out, vchildren, context, mountAll, hydrating || props.dangerouslySetInnerHTML!=null);\r\n\t}\r\n\r\n\r\n\t// Apply attributes/props from VNode to the DOM Element:\r\n\tdiffAttributes(out, vnode.attributes, props);\r\n\r\n\r\n\t// restore previous SVG mode: (in case we're exiting an SVG namespace)\r\n\tisSvgMode = prevSvgMode;\r\n\r\n\treturn out;\r\n}\r\n\r\n\r\n/** Apply child and attribute changes between a VNode and a DOM Node to the DOM.\r\n *\t@param {Element} dom\t\t\tElement whose children should be compared & mutated\r\n *\t@param {Array} vchildren\t\tArray of VNodes to compare to `dom.childNodes`\r\n *\t@param {Object} context\t\t\tImplicitly descendant context object (from most recent `getChildContext()`)\r\n *\t@param {Boolean} mountAll\r\n *\t@param {Boolean} isHydrating\tIf `true`, consumes externally created elements similar to hydration\r\n */\r\nfunction innerDiffNode(dom, vchildren, context, mountAll, isHydrating) {\r\n\tlet originalChildren = dom.childNodes,\r\n\t\tchildren = [],\r\n\t\tkeyed = {},\r\n\t\tkeyedLen = 0,\r\n\t\tmin = 0,\r\n\t\tlen = originalChildren.length,\r\n\t\tchildrenLen = 0,\r\n\t\tvlen = vchildren ? vchildren.length : 0,\r\n\t\tj, c, f, vchild, child;\r\n\r\n\t// Build up a map of keyed children and an Array of unkeyed children:\r\n\tif (len!==0) {\r\n\t\tfor (let i=0; i\r\n {this.props.items.map(item => (\r\n
  • {item.text}
    • \r\n ))}\r\n \r\n );\r\n }\r\n}\r\n\r\ncustomElements.define('todo-list', TodoList)\r\n\r\nclass TodoApp extends WeElement {\r\n constructor() {\r\n super();\r\n this.data = { items: [], text: '' };\r\n this.handleChange = this.handleChange.bind(this);\r\n this.handleSubmit = this.handleSubmit.bind(this);\r\n }\r\n\r\n render() {\r\n console.log(this.data.items)\r\n return (\r\n
    \r\n

    TODO

    \r\n {this.list=e}} items={this.data.items} />\r\n
    \r\n \r\n \r\n \r\n
    \r\n );\r\n }\r\n\r\n handleChange(e) {\r\n this.data.text = e.target.value \r\n }\r\n\r\n handleSubmit(e) {\r\n e.preventDefault();\r\n if (!this.data.text.length) {\r\n return;\r\n }\r\n this.data.items.push({\r\n text: this.data.text,\r\n id: Date.now()\r\n })\r\n this.data.text = ''\r\n this.update()\r\n this.list.update()\r\n }\r\n}\r\n\r\ncustomElements.define('todo-app', TodoApp)\r\n\r\n\r\nrender(, 'body')"],"names":["VNode","getGlobal","global","Math","Array","self","window","store","root","stack","EMPTY_CHILDREN","h","nodeName","attributes","children","lastSimple","child","simple","i","arguments","length","push","pop","undefined","String","p","key","options","vnode","Reflect","customElements","hasOwnProperty","BuiltInHTMLElement","HTMLElement","construct","constructor","prototype","Object","setPrototypeOf","cssToDom","css","node","document","createElement","innerText","npn","str","replace","$","$1","toUpperCase","applyRef","ref","value","current","defer","Promise","resolve","then","bind","setTimeout","isArray","obj","toString","call","nProps","props","result","keys","forEach","ATTR_KEY","IS_NON_DIMENSIONAL","isSameNodeType","hydrating","splitText","_componentConstructor","isNamedNode","normalizedNodeName","toLowerCase","createNode","isSvg","createElementNS","removeNode","parentNode","removeChild","setAccessor","name","old","className","style","cssText","test","innerHTML","__html","useCapture","substring","addEventListener","eventProxy","removeEventListener","_listeners","e","removeAttribute","ns","removeAttributeNS","setAttributeNS","setAttribute","type","event","diffLevel","isSvgMode","diff","dom","context","mountAll","parent","componentRoot","ownerSVGElement","ret","idiff","appendChild","out","prevSvgMode","_component","nodeValue","createTextNode","replaceChild","recollectNodeTree","vnodeName","firstChild","fc","vchildren","a","nextSibling","innerDiffNode","dangerouslySetInnerHTML","diffAttributes","isHydrating","originalChildren","childNodes","keyed","keyedLen","min","len","childrenLen","vlen","j","c","f","vchild","__key","trim","insertBefore","unmountOnly","removeChildren","lastChild","next","previousSibling","attrs","WeElement","data","connectedCallback","install","shadowRoot","attachShadow","mode","host","render","installed","attributeChangedCallback","pre","update","disconnectedCallback","uninstall","beforeUpdate","afterUpdate","fire","dispatchEvent","CustomEvent","detail","querySelector","instances","Omi","version","TodoList","console","log","items","map","item","id","text","define","TodoApp","handleChange","handleSubmit","list","target","preventDefault","Date","now"],"mappings":"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"} \ No newline at end of file diff --git a/examples/todo-app/index.html b/examples/todo-app/index.html new file mode 100644 index 000000000..4980b35c5 --- /dev/null +++ b/examples/todo-app/index.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/examples/todo-app/main.js b/examples/todo-app/main.js new file mode 100644 index 000000000..8ceac4a00 --- /dev/null +++ b/examples/todo-app/main.js @@ -0,0 +1,68 @@ +import { render, WeElement } from '../../src/omi' + +class TodoList extends WeElement { + render(props) { + console.log(props) + return ( +
      + {this.props.items.map(item => ( +
    • {item.text}
      • + ))} +
    + ); + } +} + +customElements.define('todo-list', TodoList) + +class TodoApp extends WeElement { + constructor() { + super(); + this.data = { items: [], text: '' }; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + render() { + console.log(this.data.items) + return ( +
    +

    TODO

    + {this.list=e}} items={this.data.items} /> +
    + + +
    +
    + ); + } + + handleChange(e) { + this.data.text = e.target.value + } + + handleSubmit(e) { + e.preventDefault(); + if (!this.data.text.length) { + return; + } + this.data.items.push({ + text: this.data.text, + id: Date.now() + }) + this.data.text = '' + this.update() + this.list.update() + } +} + +customElements.define('todo-app', TodoApp) + + +render(, 'body') \ No newline at end of file diff --git a/package.json b/package.json index 097824b1a..397895ce4 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "copy-typescript-definition": "copyfiles -f src/omi.d.ts dist", "build": "npm-run-all --silent clean transpile copy-flow-definition copy-typescript-definition strip optimize minify size", "flow": "flow", - "todo": "rollup -c config/rollup.example.js --watch", + "todo-app": "rollup -c config/rollup.example.js --watch", "store": "rollup -c config/rollup.example.js --watch", "omi-tap": "rollup -c config/rollup.example.js --watch", "simple": "rollup -c config/rollup.example.js --watch", diff --git a/src/dom/index.js b/src/dom/index.js index 1bbe7948c..54ebf968b 100644 --- a/src/dom/index.js +++ b/src/dom/index.js @@ -122,8 +122,14 @@ export function setAccessor(node, name, old, value, isSvg) { else node.removeAttribute(name); } else if (typeof value!=='function') { - if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value); - else node.setAttribute(name, value); + if(typeof value === 'string'){ + if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value); + else node.setAttribute(name, value); + node.props[name] = value; + } else { + //can not trigger observedAttributes + node.props[name] = value; + } } } } diff --git a/src/we-element.js b/src/we-element.js index ce7a26df8..7aa438283 100644 --- a/src/we-element.js +++ b/src/we-element.js @@ -20,15 +20,10 @@ export default class WeElement extends HTMLElement { connectedCallback() { this.install() - const names = this.getAttributeNames() - - names.forEach(name => { - this.props[npn(name)] = this.getAttribute(name) - }) - + const shadowRoot = this.attachShadow({ mode: 'open' }) - shadowRoot.appendChild(cssToDom(this.css())) + this.css && shadowRoot.appendChild(cssToDom(this.css())) this.host = diff(null, this.render(this.props, this.data), {}, false, null, false) shadowRoot.appendChild(this.host)