diff --git a/packages/omi-old/src/component.js b/packages/omi-old/src/component.js index e63363078..fb83d76b7 100755 --- a/packages/omi-old/src/component.js +++ b/packages/omi-old/src/component.js @@ -44,6 +44,8 @@ export function Component(props, context) { } +Component.is = 'WeElement'; + extend(Component.prototype, { diff --git a/packages/omi-old/src/define.js b/packages/omi-old/src/define.js new file mode 100644 index 000000000..be4009073 --- /dev/null +++ b/packages/omi-old/src/define.js @@ -0,0 +1,57 @@ +import options from '../options'; + +const OBJECTTYPE = '[object Object]' +const ARRAYTYPE = '[object Array]' + +export function define(name, ctor) { + if (ctor.is === 'WeElement') { + options.mapping[name] = ctor + if (ctor.data && !ctor.pure) { + ctor.updatePath = getUpdatePath(ctor.data) + } + } +} + +export function getUpdatePath(data) { + const result = {} + dataToPath(data, result) + return result +} + +function dataToPath(data, result) { + Object.keys(data).forEach(key => { + result[key] = true + const type = Object.prototype.toString.call(data[key]) + if (type === OBJECTTYPE) { + _objToPath(data[key], key, result) + } else if (type === ARRAYTYPE) { + _arrayToPath(data[key], key, result) + } + }) +} + +function _objToPath(data, path, result) { + Object.keys(data).forEach(key => { + result[path + '.' + key] = true + delete result[path] + const type = Object.prototype.toString.call(data[key]) + if (type === OBJECTTYPE) { + _objToPath(data[key], path + '.' + key, result) + } else if (type === ARRAYTYPE) { + _arrayToPath(data[key], path + '.' + key, result) + } + }) +} + +function _arrayToPath(data, path, result) { + data.forEach((item, index) => { + result[path + '[' + index + ']'] = true + delete result[path] + const type = Object.prototype.toString.call(item) + if (type === OBJECTTYPE) { + _objToPath(item, path + '[' + index + ']', result) + } else if (type === ARRAYTYPE) { + _arrayToPath(item, path + '[' + index + ']', result) + } + }) +} diff --git a/packages/omi-old/src/omi.js b/packages/omi-old/src/omi.js index 18eb52839..641b84dda 100755 --- a/packages/omi-old/src/omi.js +++ b/packages/omi-old/src/omi.js @@ -6,6 +6,7 @@ import { rerender } from './render-queue'; import options from './options'; const instances = []; +const WeElement = Component options.root.Omi = { h, @@ -15,7 +16,8 @@ options.root.Omi = { render, rerender, options, - instances + instances, + WeElement }; options.root.Omi.version = '3.0.6'; @@ -28,7 +30,8 @@ export default { render, rerender, options, - instances + instances, + WeElement }; export { @@ -39,5 +42,6 @@ export { render, rerender, options, - instances + instances, + WeElement }; diff --git a/packages/omi-old/src/options.js b/packages/omi-old/src/options.js index 32e4b95d9..5aef74d44 100755 --- a/packages/omi-old/src/options.js +++ b/packages/omi-old/src/options.js @@ -10,7 +10,7 @@ function getGlobal() { return (function(){ return this; })(); - + } return global; } @@ -23,6 +23,7 @@ export default { scopedStyle: true, $store: null, + mapping: {}, isWeb: true, staticStyleMapping: {}, doc: typeof document === 'object' ? document : null, diff --git a/packages/omi-old/src/vdom/diff.js b/packages/omi-old/src/vdom/diff.js index f9e29b68c..9fab7b5b2 100755 --- a/packages/omi-old/src/vdom/diff.js +++ b/packages/omi-old/src/vdom/diff.js @@ -69,6 +69,11 @@ function idiff(dom, vnode, context, mountAll, componentRoot) { // empty values (null, undefined, booleans) render as empty Text nodes if (vnode==null || typeof vnode==='boolean') vnode = ''; + // If the VNode represents a Component, perform a component diff: + let vnodeName = vnode.nodeName; + if (vnodeName.is === 'WeElement') { + return buildComponentFromVNode(dom, vnode, context, mountAll); + } // Fast case: Strings & Numbers create/update Text nodes. if (typeof vnode==='string' || typeof vnode==='number') { @@ -94,14 +99,6 @@ function idiff(dom, vnode, context, mountAll, componentRoot) { return out; } - - // If the VNode represents a Component, perform a component diff: - let vnodeName = vnode.nodeName; - if (typeof vnodeName==='function') { - return buildComponentFromVNode(dom, vnode, context, mountAll); - } - - // Tracks entering and exiting SVG namespace when descending through the tree. isSvgMode = vnodeName==='svg' ? true : vnodeName==='foreignObject' ? false : isSvgMode;