Skip to content

Commit ff28147

Browse files
JoviDeCroockJoviDeCroock
authored
consolidate callbacks and dom on data (#3829)
* consolidate callbacks and dom on data * remove base template
1 parent bbdf49d commit ff28147

File tree

9 files changed

+56
-50
lines changed

9 files changed

+56
-50
lines changed

‎hooks/src/index.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ options._render = internal => {
4242
if (currentInternal.data && currentInternal.data.__hooks) {
4343
if (previousInternal === currentInternal) {
4444
currentInternal.data.__hooks._pendingEffects = [];
45-
currentInternal._commitCallbacks = [];
45+
currentInternal.data._commitCallbacks = [];
4646
currentInternal.data.__hooks._list.forEach(hookItem => {
4747
if (hookItem._nextValue) {
4848
hookItem._value = hookItem._nextValue;
@@ -83,13 +83,13 @@ options.diffed = internal => {
8383
options._commit = (internal, commitQueue) => {
8484
commitQueue.some(internal => {
8585
try {
86-
internal._commitCallbacks.forEach(invokeCleanup);
87-
internal._commitCallbacks = internal._commitCallbacks.filter(cb =>
88-
cb._value ? invokeEffect(cb) : true
86+
internal.data._commitCallbacks.forEach(invokeCleanup);
87+
internal.data._commitCallbacks = internal.data._commitCallbacks.filter(
88+
cb => (cb._value ? invokeEffect(cb) : true)
8989
);
9090
} catch (e) {
9191
commitQueue.some(i => {
92-
if (i._commitCallbacks) i._commitCallbacks = [];
92+
if (i.data._commitCallbacks) i.data._commitCallbacks = [];
9393
});
9494
commitQueue = [];
9595
options._catchError(e, internal);
@@ -254,10 +254,10 @@ export function useLayoutEffect(callback, args) {
254254
state._value = callback;
255255
state._pendingArgs = args;
256256

257-
if (currentInternal._commitCallbacks == null) {
258-
currentInternal._commitCallbacks = [];
257+
if (currentInternal.data._commitCallbacks == null) {
258+
currentInternal.data._commitCallbacks = [];
259259
}
260-
currentInternal._commitCallbacks.push(state);
260+
currentInternal.data._commitCallbacks.push(state);
261261
}
262262
}
263263

‎src/component.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Component.prototype.setState = function(update, callback) {
5353

5454
const internal = this._internal;
5555
if (update != null && internal) {
56-
if (callback) internal._stateCallbacks.push(callback.bind(this));
56+
if (callback) internal.data._stateCallbacks.push(callback.bind(this));
5757
internal.rerender(internal);
5858
}
5959
};
@@ -71,7 +71,7 @@ Component.prototype.forceUpdate = function(callback) {
7171
// is coming from. We need this because forceUpdate should never call
7272
// shouldComponentUpdate
7373
internal.flags |= FORCE_UPDATE;
74-
if (callback) internal._commitCallbacks.push(callback.bind(this));
74+
if (callback) internal.data._commitCallbacks.push(callback.bind(this));
7575
internal.rerender(internal);
7676
}
7777
};

‎src/diff/children.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export function patchChildren(internal, children, parentDom) {
8686
(MODE_HYDRATE | MODE_SUSPENDED)
8787
) {
8888
// We are resuming the hydration of a VNode
89-
mount(childInternal, childVNode, parentDom, childInternal._dom);
89+
mount(childInternal, childVNode, parentDom, childInternal.data);
9090
} else {
9191
// Morph the old element into the new one, but don't append it to the dom yet
9292
patch(childInternal, childVNode, parentDom);
@@ -100,7 +100,7 @@ export function patchChildren(internal, children, parentDom) {
100100
// Perform insert of new dom
101101
if (childInternal.flags & TYPE_DOM) {
102102
parentDom.insertBefore(
103-
childInternal._dom,
103+
childInternal.data,
104104
getDomSibling(internal, skewedIndex)
105105
);
106106
}
@@ -133,7 +133,7 @@ export function patchChildren(internal, children, parentDom) {
133133

134134
let nextSibling = getDomSibling(internal, skewedIndex + 1);
135135
if (childInternal.flags & TYPE_DOM) {
136-
parentDom.insertBefore(childInternal._dom, nextSibling);
136+
parentDom.insertBefore(childInternal.data, nextSibling);
137137
} else {
138138
insertComponentDom(childInternal, nextSibling, parentDom);
139139
}
@@ -163,7 +163,7 @@ export function patchChildren(internal, children, parentDom) {
163163
if (childInternal.ref)
164164
applyRef(
165165
childInternal.ref,
166-
childInternal._component || childInternal._dom,
166+
childInternal._component || childInternal.data,
167167
childInternal
168168
);
169169
}
@@ -243,8 +243,8 @@ export function insertComponentDom(internal, nextSibling, parentDom) {
243243

244244
if (childInternal.flags & TYPE_COMPONENT) {
245245
insertComponentDom(childInternal, nextSibling, parentDom);
246-
} else if (childInternal._dom != nextSibling) {
247-
parentDom.insertBefore(childInternal._dom, nextSibling);
246+
} else if (childInternal.data != nextSibling) {
247+
parentDom.insertBefore(childInternal.data, nextSibling);
248248
}
249249
}
250250
}

‎src/diff/commit.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export function commitRoot(rootInternal) {
1818
currentQueue.some(internal => {
1919
try {
2020
// @ts-ignore Reuse the root variable here so the type changes
21-
currentQueue = internal._commitCallbacks.length;
21+
currentQueue = internal.data._commitCallbacks.length;
2222
// @ts-ignore See above ts-ignore comment
2323
while (currentQueue--) {
24-
internal._commitCallbacks.shift()();
24+
internal.data._commitCallbacks.shift()();
2525
}
2626
} catch (e) {
2727
options._catchError(e, internal);

‎src/diff/mount.js

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@ export function mount(internal, newVNode, parentDom, startDom) {
5959
);
6060
}
6161

62-
if (internal._commitCallbacks.length) {
62+
if (
63+
internal.data._commitCallbacks &&
64+
internal.data._commitCallbacks.length
65+
) {
6366
commitQueue.push(internal);
6467
}
6568
} else {
@@ -83,7 +86,7 @@ export function mount(internal, newVNode, parentDom, startDom) {
8386
if (internal.flags & MODE_HYDRATE) {
8487
// @ts-ignore Trust me TS, nextSibling is a PreactElement
8588
nextDomSibling = startDom && startDom.nextSibling;
86-
internal._dom = startDom; // Save our current DOM position to resume later
89+
internal.data = startDom; // Save our current DOM position to resume later
8790
}
8891
options._catchError(e, internal);
8992
}
@@ -131,7 +134,7 @@ function mountElement(internal, dom) {
131134
dom.data = newProps;
132135
}
133136

134-
internal._dom = dom;
137+
internal.data = dom;
135138
} else {
136139
// Tracks entering and exiting SVG namespace when descending through the tree.
137140
// if (nodeType === 'svg') internal.flags |= MODE_SVG;
@@ -187,7 +190,7 @@ function mountElement(internal, dom) {
187190
}
188191
}
189192

190-
internal._dom = dom;
193+
internal.data = dom;
191194

192195
// If the new vnode didn't have dangerouslySetInnerHTML, diff its children
193196
if (newHtml) {
@@ -244,7 +247,7 @@ export function mountChildren(internal, children, parentDom, startDom) {
244247
// Morph the old element into the new one, but don't append it to the dom yet
245248
mountedNextChild = mount(childInternal, childVNode, parentDom, startDom);
246249

247-
newDom = childInternal._dom;
250+
newDom = childInternal.data;
248251

249252
if (childInternal.flags & TYPE_COMPONENT || newDom == startDom) {
250253
// If the child is a Fragment-like or if it is DOM VNode and its _dom
@@ -348,7 +351,7 @@ function mountComponent(internal, startDom) {
348351
// If the component was constructed, queue up componentDidMount so the
349352
// first time this internal commits (regardless of suspense or not) it
350353
// will be called
351-
internal._commitCallbacks.push(c.componentDidMount.bind(c));
354+
internal.data._commitCallbacks.push(c.componentDidMount.bind(c));
352355
}
353356
}
354357

@@ -367,10 +370,10 @@ function mountComponent(internal, startDom) {
367370
if (renderHook) renderHook(internal);
368371
if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
369372
renderResult = c.render(c.props, c.state, c.context);
370-
for (let i = 0; i < internal._stateCallbacks.length; i++) {
371-
internal._commitCallbacks.push(internal._stateCallbacks[i]);
373+
for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
374+
internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
372375
}
373-
internal._stateCallbacks = [];
376+
internal.data._stateCallbacks = [];
374377
// note: disable repeat render invocation for class components
375378
break;
376379
} else {

‎src/diff/patch.js

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export function patch(internal, vnode, parentDom) {
3535

3636
if (flags & TYPE_TEXT) {
3737
if (vnode !== internal.props) {
38-
// @ts-ignore We know that newVNode is string/number/bigint, and internal._dom is Text
39-
internal._dom.data = vnode;
38+
// @ts-ignore We know that newVNode is string/number/bigint, and internal.data is Text
39+
internal.data.data = vnode;
4040
internal.props = vnode;
4141
}
4242

@@ -94,7 +94,7 @@ export function patch(internal, vnode, parentDom) {
9494
let siblingDom =
9595
(internal.flags & (MODE_HYDRATE | MODE_SUSPENDED)) ===
9696
(MODE_HYDRATE | MODE_SUSPENDED)
97-
? internal._dom
97+
? internal.data
9898
: internal.flags & MODE_HYDRATE
9999
? null
100100
: getDomSibling(internal);
@@ -104,7 +104,12 @@ export function patch(internal, vnode, parentDom) {
104104
patchChildren(internal, renderResult, parentDom);
105105
}
106106

107-
if (internal._commitCallbacks.length) {
107+
// TODO: for some reason lazy-hydration stops working as .data is assigned a DOM-node
108+
// for Preact.lazy
109+
if (
110+
internal.data._commitCallbacks &&
111+
internal.data._commitCallbacks.length
112+
) {
108113
commitQueue.push(internal);
109114
}
110115
} catch (e) {
@@ -133,7 +138,7 @@ export function patch(internal, vnode, parentDom) {
133138
* @param {import('../internal').VNode} vnode A VNode with props to compare and apply
134139
*/
135140
function patchElement(internal, vnode) {
136-
let dom = /** @type {import('../internal').PreactElement} */ (internal._dom),
141+
let dom = /** @type {import('../internal').PreactElement} */ (internal.data),
137142
oldProps = internal.props,
138143
newProps = vnode.props,
139144
isSvg = internal.flags & MODE_SVG,
@@ -244,10 +249,10 @@ function patchComponent(internal, newVNode) {
244249
c.props = newProps;
245250
c.state = c._nextState;
246251
internal.flags |= SKIP_CHILDREN;
247-
for (let i = 0; i < internal._stateCallbacks.length; i++) {
248-
internal._commitCallbacks.push(internal._stateCallbacks[i]);
252+
for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
253+
internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
249254
}
250-
internal._stateCallbacks = [];
255+
internal.data._stateCallbacks = [];
251256
return;
252257
}
253258

@@ -269,10 +274,10 @@ function patchComponent(internal, newVNode) {
269274
if (renderHook) renderHook(internal);
270275
if (ENABLE_CLASSES && internal.flags & TYPE_CLASS) {
271276
renderResult = c.render(c.props, c.state, c.context);
272-
for (let i = 0; i < internal._stateCallbacks.length; i++) {
273-
internal._commitCallbacks.push(internal._stateCallbacks[i]);
277+
for (let i = 0; i < internal.data._stateCallbacks.length; i++) {
278+
internal.data._commitCallbacks.push(internal.data._stateCallbacks[i]);
274279
}
275-
internal._stateCallbacks = [];
280+
internal.data._stateCallbacks = [];
276281
// note: disable repeat render invocation for class components
277282
break;
278283
} else {
@@ -297,7 +302,7 @@ function patchComponent(internal, newVNode) {
297302

298303
// Only schedule componentDidUpdate if the component successfully rendered
299304
if (c.componentDidUpdate != null) {
300-
internal._commitCallbacks.push(() => {
305+
internal.data._commitCallbacks.push(() => {
301306
c.componentDidUpdate(oldProps, oldState, snapshot);
302307
});
303308
}

‎src/diff/unmount.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ export function unmount(internal, parentInternal, skipRemove) {
4747
}
4848

4949
if (!skipRemove && internal.flags & TYPE_DOM) {
50-
internal._dom.remove();
50+
internal.data.remove();
51+
internal.data = null;
5152
}
52-
53-
internal._dom = null;
5453
}

‎src/internal.d.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export interface Internal<P = {}> {
141141
/** Bitfield containing information about the Internal or its component. */
142142
flags: number;
143143
/** Polymorphic property to store extensions like hooks on */
144-
data: object;
144+
data: object | PreactNode;
145145
/** The function that triggers in-place re-renders for an internal */
146146
rerender: (internal: Internal) => void;
147147

@@ -155,7 +155,6 @@ export interface Internal<P = {}> {
155155
* Associated DOM element for the Internal, or its nearest realized descendant.
156156
* For Fragments, this is the first DOM child.
157157
*/
158-
_dom: PreactNode;
159158
/** The component instance for which this is a backing Internal node */
160159
_component: Component | null;
161160
/** most recent context object passed down to this Internal from its parent */

‎src/tree.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,15 @@ export function createInternal(vnode, parentInternal) {
8787
key,
8888
ref,
8989
_prevRef: null,
90-
data: flags & TYPE_COMPONENT ? {} : null,
91-
_commitCallbacks: flags & TYPE_COMPONENT ? [] : null,
92-
_stateCallbacks: flags & TYPE_COMPONENT ? [] : null,
90+
data:
91+
flags & TYPE_COMPONENT
92+
? { _commitCallbacks: [], _stateCallbacks: [] }
93+
: null,
9394
rerender: enqueueRender,
9495
flags,
9596
_children: null,
9697
_parent: parentInternal,
9798
_vnodeId: vnodeId,
98-
_dom: null,
9999
_component: null,
100100
_context: null,
101101
_depth: parentInternal ? parentInternal._depth + 1 : 0
@@ -155,7 +155,7 @@ export function getChildDom(internal, offset) {
155155
let child = internal._children[offset];
156156
if (child != null) {
157157
if (child.flags & TYPE_DOM) {
158-
return child._dom;
158+
return child.data;
159159
}
160160

161161
if (shouldSearchComponent(child)) {
@@ -200,7 +200,7 @@ export function getParentDom(internal) {
200200
if (parent.flags & TYPE_ROOT) {
201201
return parent.props._parentDom;
202202
} else if (parent.flags & TYPE_ELEMENT) {
203-
return parent._dom;
203+
return parent.data;
204204
}
205205
}
206206
}

0 commit comments

Comments
 (0)