Merge pull request #347 from preactjs/hoc-integration

Author: marvinhagemeister

src/adapter/adapter/filter.ts

@@ -6,10 +6,11 @@ export interface RawFilterState {
 		fragment: boolean;
 		dom: boolean;
 		hoc?: boolean;
+		root?: boolean;
 	};
 }
 
-export type TypeFilterValue = "dom" | "fragment" | "hoc";
+export type TypeFilterValue = "dom" | "fragment" | "hoc" | "root";
 
 export interface FilterState {
 	regex: RegExp[];
@@ -30,15 +31,15 @@ export type Filter = RegexFilter | TypeFilter;
 
 export const DEFAULT_FIlTERS: FilterState = {
 	regex: [],
-	// TODO: Add default hoc-filter
-	type: new Set(["dom", "fragment"]),
+	type: new Set(["dom", "fragment", "root", "hoc"]),
 };
 
 export function parseFilters(raw: RawFilterState): FilterState {
 	const type = new Set<TypeFilterValue>();
 	if (raw.type.fragment) type.add("fragment");
 	if (raw.type.dom) type.add("dom");
 	if (raw.type.hoc) type.add("hoc");
+	if (raw.type.root) type.add("root");
 
 	return {
 		regex: raw.regex.filter(x => x.enabled).map(x => new RegExp(x.value, "gi")),

src/adapter/adapter/highlight.ts

@@ -54,7 +54,14 @@ export function createHightlighter(
 			const node = getNearestElement(first);
 			const nodeEnd = last ? getNearestElement(last) : null;
 			if (node != null) {
-				const label = renderer.getDisplayName(vnode);
+				let label = renderer.getDisplayName(vnode);
+
+				// Account for HOCs
+				const lastOpenIdx = label.lastIndexOf("(");
+				const firstCloseIdx = label.indexOf(")");
+				if (lastOpenIdx > -1 && lastOpenIdx < firstCloseIdx) {
+					label = label.slice(lastOpenIdx + 1, firstCloseIdx) || "Anonymous";
+				}
 
 				let size = measureNode(node);
 				if (nodeEnd !== null) {

src/adapter/shared/traverse.ts

@@ -502,6 +502,29 @@ function update<T extends SharedVNode>(
 	}
 }
 
+/**
+ * Crawl upwards through potentially filtered vnodes until
+ * we find a non-filtered node or reach the top of the tree
+ */
+function findClosestNonFilteredParent<T extends SharedVNode>(
+	ids: IdMappingState<T>,
+	helpers: PreactBindings<T>,
+	vnode: T,
+) {
+	let parentId = -1;
+	let ancestor: T | null = helpers.getAncestor(vnode);
+	while (ancestor !== null) {
+		parentId = getVNodeId(ids, ancestor);
+		if (parentId !== -1) {
+			break;
+		}
+
+		ancestor = helpers.getAncestor(ancestor);
+	}
+
+	return parentId;
+}
+
 export function createCommit<T extends SharedVNode>(
 	ids: IdMappingState<T>,
 	roots: Set<T>,
@@ -538,7 +561,7 @@ export function createCommit<T extends SharedVNode>(
 		parentId = -1;
 		roots.add(vnode);
 	} else {
-		parentId = getVNodeId(ids, helpers.getAncestor(vnode)!);
+		parentId = findClosestNonFilteredParent(ids, helpers, vnode);
 	}
 
 	if (isNew) {
@@ -575,7 +598,11 @@ export function createCommit<T extends SharedVNode>(
 		);
 	}
 
-	commit.rootId = getVNodeId(ids, vnode);
+	let rootId = getVNodeId(ids, vnode);
+	if (rootId === -1) {
+		rootId = findClosestNonFilteredParent(ids, helpers, vnode);
+	}
+	commit.rootId = rootId;
 
 	return commit;
 }

src/shells/shared/panel/settings.ts

@@ -18,7 +18,6 @@ export async function loadSettings(window: Window, store: Store) {
 					"debugMode",
 					"highlightUpdates",
 					"componentFilters",
-					"experimentalFilters",
 				],
 				res,
 			);
@@ -31,7 +30,6 @@ export async function loadSettings(window: Window, store: Store) {
 			store.profiler.captureRenderReasons.$ = !!settings.captureRenderReasons;
 			store.profiler.highlightUpdates.$ = !!settings.highlightUpdates;
 			store.debugMode.$ = !!settings.debugMode;
-			store.filter.experimental.$ = !!settings.experimentalFilters;
 			if (settings.componentFilters) {
 				store.filter.restore(settings.componentFilters);
 			}
@@ -81,13 +79,6 @@ export function storeDebugMode(enabled: boolean) {
 	store({ debugMode: enabled });
 }
 
-/**
- * Enables experimental filters
- */
-export function storeExperimentalFilters(enabled: boolean) {
-	store({ experimentalFilters: enabled });
-}
-
 /**
  * Visualize updates on the page.
  */

src/view/components/elements/TreeBar.tsx

@@ -120,65 +120,77 @@ export function TreeBar() {
 	);
 }
 
+function FilterCheck({
+	checked,
+	label,
+	onInput,
+}: {
+	checked: boolean;
+	onInput: (checked: boolean) => void;
+	label: string;
+}) {
+	return (
+		<label class={s.filterRow}>
+			<span class={s.filterCheck}>
+				<input
+					type="checkbox"
+					checked={checked}
+					onInput={e => onInput((e.target as any).checked)}
+				/>
+				{checked ? <CheckboxChecked /> : <CheckboxUnChecked />}
+			</span>
+			<span class={s.filterValue}>{label}</span>
+		</label>
+	);
+}
+
 export function FilterPopup() {
 	const store = useStore();
-	const filters = useObserver(() => store.filter.filters.$);
-	const filterDom = useObserver(() => store.filter.filterDom.$);
-	const filterHoc = useObserver(() => store.filter.filterHoc.$);
-	const filterFragment = useObserver(() => store.filter.filterFragment.$);
-	const experimental = useObserver(() => store.filter.experimental.$);
+	const [filterDom, setFilterDom] = useState(store.filter.filterDom.$);
+	const [filterFragment, setFilterFragment] = useState(
+		store.filter.filterFragment.$,
+	);
+	const [filterHoc, setFilterHoc] = useState(store.filter.filterHoc.$);
+	const [filterRoot, setFilterRoot] = useState(store.filter.filterRoot.$);
+	const [filters, setFilters] = useState(store.filter.filters.$);
 
 	return (
 		<div class={s.filter} data-testid="filter-popup">
 			<form
 				onSubmit={e => {
 					e.preventDefault();
+
+					store.filter.filterDom.$ = filterDom;
+					store.filter.filterFragment.$ = filterFragment;
+					store.filter.filterRoot.$ = filterRoot;
+					store.filter.filterHoc.$ = filterHoc;
+
+					store.filter.filters.$ = filters;
+
 					store.filter.submit();
 				}}
 			>
 				{/* Native filters */}
-				<label class={s.filterRow}>
-					<span class={s.filterCheck}>
-						<input
-							type="checkbox"
-							checked={filterFragment}
-							onInput={e =>
-								store.filter.setEnabled("fragment", (e.target as any).checked)
-							}
-						/>
-						{filterFragment ? <CheckboxChecked /> : <CheckboxUnChecked />}
-					</span>
-					<span class={s.filterValue}>Fragments</span>
-				</label>
-				{/* Remove when hoc-filter becomes stable */}
-				{experimental && (
-					<label class={s.filterRow}>
-						<span class={s.filterCheck}>
-							<input
-								type="checkbox"
-								checked={filterHoc}
-								onInput={e =>
-									store.filter.setEnabled("hoc", (e.target as any).checked)
-								}
-							/>
-							{filterHoc ? <CheckboxChecked /> : <CheckboxUnChecked />}
-						</span>
-						<span class={s.filterValue}>HOC-Components</span>
-					</label>
-				)}
-				<label class={s.filterRow}>
-					<span class={s.filterCheck}>
-						<input
-							type="checkbox"
-							checked={filterDom}
-							onInput={e =>
-								store.filter.setEnabled("dom", (e.target as any).checked)
-							}
-						/>
-						{filterDom ? <CheckboxChecked /> : <CheckboxUnChecked />}
-					</span>
-					<span class={s.filterValue}>DOM nodes</span>
-				</label>
+				<FilterCheck
+					label="Roots"
+					onInput={checked => setFilterRoot(checked)}
+					checked={filterRoot}
+				/>
+				<FilterCheck
+					label="Fragments"
+					onInput={checked => setFilterFragment(checked)}
+					checked={filterFragment}
+				/>
+				<FilterCheck
+					label="HOC-Components"
+					onInput={checked => setFilterHoc(checked)}
+					checked={filterHoc}
+				/>
+				<FilterCheck
+					label="DOM nodes"
+					onInput={checked => setFilterDom(checked)}
+					checked={filterDom}
+				/>
 				{/* Custom user filters */}
 				{filters.map((x, i) => {
 					return (
@@ -188,7 +200,9 @@ export function FilterPopup() {
 									type="checkbox"
 									checked={x.enabled}
 									onInput={e => {
-										store.filter.setEnabled(x, (e.target as any).checked);
+										const copy = [...filters];
+										copy[i].enabled = (e.target as any).checked;
+										setFilters(copy);
 									}}
 								/>
 								{x.enabled ? <CheckboxChecked /> : <CheckboxUnChecked />}
@@ -199,16 +213,25 @@ export function FilterPopup() {
 									type="text"
 									placeholder="MyComponent"
 									value={x.value}
-									onInput={e =>
-										store.filter.setValue(x, (e.target as any).value)
-									}
+									onInput={e => {
+										const copy = [...filters];
+										copy[i].value = (e.target as any).value;
+										setFilters(copy);
+									}}
 								/>
 							</span>
 							<span class={s.removeWrapper}>
 								<IconBtn
 									title="Remove filter"
 									styling="secondary"
-									onClick={() => store.filter.remove(x)}
+									onClick={() => {
+										const idx = filters.indexOf(x);
+										if (idx > -1) {
+											const copy = [...filters];
+											copy.splice(idx, 1);
+											setFilters(copy);
+										}
+									}}
 								>
 									<Remove />
 								</IconBtn>
@@ -222,7 +245,9 @@ export function FilterPopup() {
 						styling="secondary"
 						title="Add new filter"
 						testId="add-filter"
-						onClick={() => store.filter.add()}
+						onClick={() =>
+							setFilters([...filters, { enabled: false, value: "" }])
+						}
 					>
 						<span class={s.filterCheck}>
 							<AddCircle />

src/view/components/elements/TreeView.module.css

@@ -198,3 +198,9 @@
 .hocs > * + * {
 	margin-left: 0.25rem;
 }
+
+.rootLabel {
+	color: var(--color-key-value);
+	display: inline-block;
+	padding-left: .2rem;
+}

src/view/components/elements/TreeView.tsx

@@ -189,13 +189,17 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
 	const store = useStore();
 	const as = useSelection();
 	const { collapsed, toggle } = useCollapser();
-	const filterFragments = useObserver(() => store.filter.filterFragment.$);
 	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);
 	const ref = useRef<HTMLDivElement>();
 
 	if (!node) return null;
 
+	const isRoot = node.parent === -1 && roots.includes(node.id);
+
 	return (
 		<div
 			ref={ref}
@@ -215,7 +219,7 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
 			<div
 				class={s.itemHeader}
 				style={`transform: translate3d(calc(var(--indent-depth) * ${
-					node.depth - (filterFragments ? 1 : 0)
+					node.depth + (filterRoot ? -1 : 0)
 				}), 0, 0);`}
 			>
 				{node.children.length > 0 && (
@@ -242,23 +246,36 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
 					) : (
 						""
 					)}
-					{node.hocs && node.hocs.length > 0 && (
-						<span class={s.hocs}>
-							{node.hocs.map((hoc, i) => {
-								return (
-									<Hoc key={i} small>
-										<MarkResult text={hoc} id={id} />
-									</Hoc>
-								);
-							})}
-						</span>
+					{filterHoc && node.hocs && node.hocs.length > 0 && (
+						<HocLabels hocs={node.hocs} nodeId={id} />
 					)}
+					{isRoot ? <span class={s.rootLabel}>(Root)</span> : ""}
 				</span>
 			</div>
 		</div>
 	);
 }
 
+export function HocLabels({
+	hocs,
+	nodeId,
+}: {
+	hocs: string[];
+	nodeId: number;
+}) {
+	return (
+		<span class={s.hocs} data-testid="hoc-labels">
+			{hocs.map((hoc, i) => {
+				return (
+					<Hoc key={i} small>
+						<MarkResult text={hoc} id={nodeId} />
+					</Hoc>
+				);
+			})}
+		</span>
+	);
+}
+
 export function Arrow() {
 	return (
 		<svg