to parent 6",
@@ -442,7 +435,6 @@ describe("Renderer 10", () => {
"Add 10
to parent 9",
"Add 11
to parent 5",
"Add 12 to parent 5",
- "Update timings 2",
]);
renderer.applyFilters({
diff --git a/src/adapter/shared/renderer.ts b/src/adapter/shared/renderer.ts
index 2fd838cf..1e6cf8bc 100644
--- a/src/adapter/shared/renderer.ts
+++ b/src/adapter/shared/renderer.ts
@@ -21,6 +21,7 @@ import { PreactBindings, SharedVNode } from "../shared/bindings";
import { inspectVNode } from "./inspectVNode";
import { logVNode } from "../10/log";
import { VNodeTimings } from "./timings";
+import { printCommit } from "../debug";
export interface RendererConfig {
Fragment: FunctionalComponent;
@@ -69,7 +70,7 @@ export function createRenderer(
bindings: PreactBindings,
timings: VNodeTimings,
): Renderer {
- const roots = new Set();
+ const roots = new Map();
let currentUnmounts: number[] = [];
@@ -96,9 +97,10 @@ export function createRenderer(
return {
clear() {
- roots.forEach(vnode => {
+ roots.forEach((id, vnode) => {
onUnmount(vnode);
});
+ roots.clear();
},
getVNodeById: id => getVNodeById(ids, id),
@@ -179,8 +181,7 @@ export function createRenderer(
/** Queue events and flush in one go */
const queue: BaseEvent[] = [];
- roots.forEach(root => {
- const rootId = getVNodeId(ids, root);
+ roots.forEach((rootId, root) => {
traverse(root, vnode => this.onUnmount(vnode), bindings);
const commit: Commit = {
@@ -258,6 +259,7 @@ export function createRenderer(
profiler.pendingHighlightUpdates.clear();
}
+ printCommit(ev.data);
port.send(ev.type as any, ev.data);
},
onUnmount,
diff --git a/src/adapter/shared/traverse.ts b/src/adapter/shared/traverse.ts
index 6981482c..c6e374c1 100644
--- a/src/adapter/shared/traverse.ts
+++ b/src/adapter/shared/traverse.ts
@@ -129,6 +129,8 @@ export function shouldFilter(
return false;
} else if (bindings.isElement(vnode) && filters.type.has("dom")) {
return true;
+ } else if (bindings.isRoot(vnode, config) && filters.type.has("root")) {
+ return true;
} else if (filters.type.has("hoc")) {
const name = bindings.getDisplayName(vnode, config);
@@ -180,7 +182,41 @@ function mount(
commit.stats.mounts++;
}
+ // FIXME: Move out of mount() into createCommit()
const root = bindings.isRoot(vnode, config);
+ if (root) {
+ const virtualRootId = ids.nextId++;
+ commit.operations.push(MsgTypes.ADD_ROOT, virtualRootId);
+ commit.rootId = virtualRootId;
+
+ let vnodeToMount = vnode;
+ if (filters.type.has("root")) {
+ const children = bindings.getActualChildren(vnode);
+ if (!children.length || children[0] == null) {
+ return;
+ }
+
+ vnodeToMount = children[0];
+ }
+
+ mount(
+ ids,
+ commit,
+ vnodeToMount,
+ virtualRootId,
+ filters,
+ domCache,
+ config,
+ profiler,
+ hocs,
+ bindings,
+ timings,
+ timingsByVNode,
+ renderReasonPre,
+ );
+
+ return;
+ }
const skip = shouldFilter(vnode, filters, config, bindings);
let name = bindings.getDisplayName(vnode, config);
@@ -196,11 +232,8 @@ function mount(
}
}
- if (root || !skip) {
+ if (!skip) {
const id = getOrCreateVNodeId(ids, vnode);
- if (bindings.isRoot(vnode, config)) {
- commit.operations.push(MsgTypes.ADD_ROOT, id);
- }
if (!timings.start.has(id)) {
timings.start.set(id, timingsByVNode.start.get(vnode) || 0);
@@ -389,42 +422,51 @@ function update(
}
const id = getVNodeId(ids, vnode);
- commit.operations.push(
- MsgTypes.UPDATE_VNODE_TIMINGS,
- id,
- (timings.start.get(id) || 0) * 1000,
- (timings.end.get(id) || 0) * 1000,
- );
-
- const name = bindings.getDisplayName(vnode, config);
- const hoc = getHocName(name);
- if (hoc) {
- hocs = [...hocs, hoc];
- } else {
- addHocs(commit, id, hocs);
- hocs = [];
- }
-
const oldVNode = getVNodeById(ids, id);
updateVNodeId(ids, id, vnode);
- if (profiler.isProfiling && profiler.captureRenderReasons) {
- const reason =
- renderReasonPre !== null
- ? renderReasonPre.get(vnode) || null
- : bindings.getRenderReasonPost(ids, bindings, timings, oldVNode, vnode);
- if (reason !== null) {
- const count = reason.items ? reason.items.length : 0;
- commit.operations.push(MsgTypes.RENDER_REASON, id, reason.type, count);
- if (reason.items && count > 0) {
- commit.operations.push(
- ...reason.items.map(str => getStringId(commit.strings, str)),
- );
+ const didRender = timingsByVNode.end.has(vnode);
+ if (didRender) {
+ commit.operations.push(
+ MsgTypes.UPDATE_VNODE_TIMINGS,
+ id,
+ (timings.start.get(id) || 0) * 1000,
+ (timings.end.get(id) || 0) * 1000,
+ );
+
+ const name = bindings.getDisplayName(vnode, config);
+ const hoc = getHocName(name);
+ if (hoc) {
+ hocs = [...hocs, hoc];
+ } else {
+ addHocs(commit, id, hocs);
+ hocs = [];
+ }
+
+ if (profiler.isProfiling && profiler.captureRenderReasons) {
+ const reason =
+ renderReasonPre !== null
+ ? renderReasonPre.get(vnode) || null
+ : bindings.getRenderReasonPost(
+ ids,
+ bindings,
+ timings,
+ oldVNode,
+ vnode,
+ );
+ if (reason !== null) {
+ const count = reason.items ? reason.items.length : 0;
+ commit.operations.push(MsgTypes.RENDER_REASON, id, reason.type, count);
+ if (reason.items && count > 0) {
+ commit.operations.push(
+ ...reason.items.map(str => getStringId(commit.strings, str)),
+ );
+ }
}
}
- }
- updateHighlight(profiler, vnode, bindings);
+ updateHighlight(profiler, vnode, bindings);
+ }
const oldChildren = oldVNode
? bindings
@@ -528,7 +570,7 @@ function findClosestNonFilteredParent(
export function createCommit(
ids: IdMappingState,
- roots: Set,
+ roots: Map,
vnode: T,
filters: FilterState,
domCache: WeakMap,
@@ -539,7 +581,7 @@ export function createCommit(
timingsByVNode: VNodeTimings,
renderReasonPre: Map | null,
): Commit {
- const commit = {
+ const commit: Commit & { renderReasons: Map } = {
operations: [],
rootId: -1,
strings: new Map(),
@@ -559,8 +601,12 @@ export function createCommit(
commit.stats.roots.children.push(children.length);
}
+ const virtualRootId = roots.get(vnode) || ids.nextId++;
+ commit.operations.push(MsgTypes.ADD_ROOT, virtualRootId);
+ commit.rootId = virtualRootId;
+
parentId = -1;
- roots.add(vnode);
+ roots.set(vnode, virtualRootId);
} else {
parentId = findClosestNonFilteredParent(ids, helpers, vnode);
}
@@ -599,11 +645,16 @@ export function createCommit(
);
}
- let rootId = getVNodeId(ids, vnode);
- if (rootId === -1) {
- rootId = findClosestNonFilteredParent(ids, helpers, vnode);
+ // Find actual root node
+ if (commit.rootId === -1) {
+ let rootVNode: T | null = vnode;
+ while ((rootVNode = helpers.getVNodeParent(rootVNode)) != null) {
+ if (helpers.isRoot(rootVNode, config)) {
+ commit.rootId = roots.get(rootVNode)!;
+ break;
+ }
+ }
}
- commit.rootId = rootId;
return commit;
}
diff --git a/src/view/components/elements/TreeView.tsx b/src/view/components/elements/TreeView.tsx
index df0d477b..f314bb57 100644
--- a/src/view/components/elements/TreeView.tsx
+++ b/src/view/components/elements/TreeView.tsx
@@ -190,7 +190,6 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
const as = useSelection();
const { collapsed, toggle } = useCollapser();
const node = useObserver(() => store.nodes.$.get(id) || null);
- const filterRoot = useObserver(() => store.filter.filterRoot.$);
const filterHoc = useObserver(() => store.filter.filterHoc.$);
const roots = useObserver(() => store.roots.$);
const onToggle = () => toggle(id);
@@ -198,7 +197,8 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
if (!node) return null;
- const isRoot = node.parent === -1 && roots.includes(node.id);
+ // FIXME: This seems wrong
+ const isRoot = roots.includes(node.id);
return (