diff --git a/src/ext/Portal.ts b/src/ext/Portal.ts index ed9712b..714b393 100644 --- a/src/ext/Portal.ts +++ b/src/ext/Portal.ts @@ -12,46 +12,47 @@ export interface PortalProps { children?: unknown; } -export interface PortalStore { +export type PortalStore = Store<{ p: Node; f: HNode; -} - -export const Portal = define, EmptyStore>('HUI.Portal', { - - effects: [ - function ptl_eff(props, store) { - - const { parent = _document.body } = props, - fragment = HUI(Fragment, _null, props.children); - - store.set('p', parent); - store.set('f', fragment); - - return function ptl_clr() { +}, { + c: (frag: HNode) => void +}> - const { ownNode, nodes } = fragment; +export const Portal = define('HUI.Portal', { + storeHandlers: { + c: function ptl_c(fragment) { + const { ownNode, nodes } = fragment; + if (nodes) { clear(fragment); - - nodes!.forEach(node => { + nodes.forEach(node => { ownNode!.removeChild(node); }); - - nodes!.length = 0; - - }; - + nodes.length = 0; + } } - ], + }, + init: function ptl_init(props, store) { + const { parent = _document.body } = props, + fragment = HUI(Fragment, _null, props.children); + store.set('p', parent); + store.set('f', fragment); + }, render: function ptl_render(props, store, context) { - renderToDOM(store.get('f'), { + const fragment = store.get('f')!; + store.trigger('c', fragment); + renderToDOM(fragment, { parent: store.get('p'), owner: this, context }); + }, + + clear: function ptl_clr(props, store) { + store.trigger('c', store.get('f')!); } }); diff --git a/src/ticker/updateChildren.ts b/src/ticker/updateChildren.ts index b800ebe..8034a3a 100644 --- a/src/ticker/updateChildren.ts +++ b/src/ticker/updateChildren.ts @@ -94,7 +94,7 @@ export const updateChildren = function updChd( element.removeChild(node); }); oldChild.nodes!.length = 0; - } else if (childNodes.length) { + } else if (childNodes.length > nodeOffset) { element.removeChild(childNodes[nodeOffset++]); } diff --git a/src/ticker/updateComponent.ts b/src/ticker/updateComponent.ts index facba10..fd886ef 100644 --- a/src/ticker/updateComponent.ts +++ b/src/ticker/updateComponent.ts @@ -43,6 +43,8 @@ export const updateComponent = function updCom(hNode: HNode) { oldNodesLength = (oldNodes = old.nodes!).length; + clear(old); + if (isHNode(cur) && old.type === cur.type) { if (old.desc) { @@ -51,9 +53,7 @@ export const updateComponent = function updCom(hNode: HNode) { mark(cur); - nodeOffset += cur.nodes!.length; - - return; + return nodeOffset += oldNodesLength; } else { @@ -79,10 +79,8 @@ export const updateComponent = function updCom(hNode: HNode) { } - clear(old); - } else if (!isHNode(cur) && HUI.cmp(old, cur)) { - return; + return nodeOffset++; } curNodes = toNodeArr(cur, ctx!, ownNode!, hNode); diff --git a/src/utils/clear.ts b/src/utils/clear.ts index 1a2d062..3afbcfb 100644 --- a/src/utils/clear.ts +++ b/src/utils/clear.ts @@ -5,7 +5,7 @@ import { isHNode } from "./helpers"; export const clear = function clr(hNode: HNode) { - const { desc, out: output, props } = hNode; + const { desc, props } = hNode; hNode.active = false; @@ -42,8 +42,8 @@ export const clear = function clr(hNode: HNode) { expired.splice(index, 1); } - if (output) { - output.forEach((child: unknown) => { + if (hNode.out) { + hNode.out.forEach((child: unknown) => { if (isHNode(child)) { clear(child); }