Use type guards for internal types

Author: marvinhagemeister

src/create-context.js

@@ -4,7 +4,7 @@ let nextContextId = 0;
 
 const providers = new Set();
 
-/** @param {import('./internal').Internal} internal */
+/** @param {import('./internal').ComponentInternal} internal */
 export const unsubscribeFromContext = internal => {
 	// if this was a context provider, delete() returns true and we exit:
 	if (providers.delete(internal)) return;

src/diff/catch-error.js

@@ -1,10 +1,10 @@
 import {
 	DIRTY_BIT,
 	MODE_RERENDERING_ERROR,
-	MODE_PENDING_ERROR,
-	TYPE_COMPONENT
+	MODE_PENDING_ERROR
 } from '../constants';
 import { ENABLE_CLASSES } from '../component';
+import { isComponentInternal } from '../helpers';
 
 /**
  * Find the closest error boundary to a thrown error and call it
@@ -16,7 +16,7 @@ import { ENABLE_CLASSES } from '../component';
 export function _catchError(error, internal) {
 	while ((internal = internal._parent)) {
 		if (
-			internal.flags & TYPE_COMPONENT &&
+			isComponentInternal(internal) &&
 			~internal.flags & MODE_RERENDERING_ERROR
 		) {
 			try {

src/diff/children.js

@@ -1,17 +1,16 @@
 import { applyRef } from './refs';
 import { normalizeToVNode } from '../create-element';
 import {
-	TYPE_COMPONENT,
 	MODE_HYDRATE,
 	MODE_SUSPENDED,
 	EMPTY_ARR,
-	TYPE_DOM,
 	UNDEFINED
 } from '../constants';
 import { mount } from './mount';
 import { patch } from './patch';
 import { unmount } from './unmount';
 import { createInternal, getDomSibling } from '../tree';
+import { isComponentInternal, isDomInternal } from '../helpers';
 
 /**
  * Update an internal with new children.
@@ -98,7 +97,7 @@ export function patchChildren(internal, children, parentDom) {
 			}
 
 			// Perform insert of new dom
-			if (childInternal.flags & TYPE_DOM) {
+			if (isDomInternal(childInternal)) {
 				parentDom.insertBefore(
 					childInternal.data,
 					getDomSibling(internal, skewedIndex)
@@ -132,7 +131,7 @@ export function patchChildren(internal, children, parentDom) {
 			if (matchingIndex == i) break go;
 
 			let nextSibling = getDomSibling(internal, skewedIndex + 1);
-			if (childInternal.flags & TYPE_DOM) {
+			if (isDomInternal(childInternal)) {
 				parentDom.insertBefore(childInternal.data, nextSibling);
 			} else {
 				insertComponentDom(childInternal, nextSibling, parentDom);
@@ -241,7 +240,7 @@ export function insertComponentDom(internal, nextSibling, parentDom) {
 		if (childInternal) {
 			childInternal._parent = internal;
 
-			if (childInternal.flags & TYPE_COMPONENT) {
+			if (isComponentInternal(childInternal)) {
 				insertComponentDom(childInternal, nextSibling, parentDom);
 			} else if (childInternal.data != nextSibling) {
 				parentDom.insertBefore(childInternal.data, nextSibling);

src/diff/mount.js

@@ -1,6 +1,5 @@
 import { applyRef } from './refs';
 import {
-	TYPE_COMPONENT,
 	TYPE_ELEMENT,
 	MODE_HYDRATE,
 	MODE_MUTATIVE_HYDRATE,
@@ -9,7 +8,6 @@ import {
 	TYPE_TEXT,
 	TYPE_CLASS,
 	MODE_ERRORED,
-	TYPE_ROOT,
 	MODE_SVG,
 	DIRTY_BIT
 } from '../constants';
@@ -19,6 +17,7 @@ import { createInternal, getParentContext } from '../tree';
 import options from '../options';
 import { ENABLE_CLASSES } from '../component';
 import { commitQueue } from './commit';
+import { isComponentInternal, isRootInternal } from '../helpers';
 /**
  * Diff two virtual nodes and apply proper changes to the DOM
  * @param {import('../internal').Internal} internal The Internal node to mount
@@ -34,14 +33,11 @@ export function mount(internal, newVNode, parentDom, startDom) {
 	let nextDomSibling, prevStartDom;
 
 	try {
-		if (internal.flags & TYPE_COMPONENT) {
+		if (isComponentInternal(internal)) {
 			// Root nodes signal that an attempt to render into a specific DOM node on
 			// the page. Root nodes can occur anywhere in the tree and not just at the
 			// top.
-			if (
-				internal.flags & TYPE_ROOT &&
-				newVNode.props._parentDom !== parentDom
-			) {
+			if (isRootInternal(internal) && newVNode.props._parentDom !== parentDom) {
 				parentDom = newVNode.props._parentDom;
 				prevStartDom = startDom;
 				startDom = null;
@@ -59,6 +55,7 @@ export function mount(internal, newVNode, parentDom, startDom) {
 				);
 			}
 
+			//
 			if (
 				internal.data._commitCallbacks &&
 				internal.data._commitCallbacks.length
@@ -249,7 +246,7 @@ export function mountChildren(internal, children, parentDom, startDom) {
 
 		newDom = childInternal.data;
 
-		if (childInternal.flags & TYPE_COMPONENT || newDom == startDom) {
+		if (isComponentInternal(childInternal) || newDom == startDom) {
 			// If the child is a Fragment-like or if it is DOM VNode and its _dom
 			// property matches the dom we are diffing (i.e. startDom), just
 			// continue with the mountedNextChild
@@ -290,14 +287,14 @@ export function mountChildren(internal, children, parentDom, startDom) {
 }
 
 /**
- * @param {import('../internal').Internal} internal The component's backing Internal node
+ * @param {import('../internal').ComponentInternal} internal The component's backing Internal node
  * @param {import('../internal').PreactNode} startDom the preceding node
  * @returns {import('../internal').PreactNode} the component's children
  */
 function mountComponent(internal, startDom) {
 	/** @type {import('../internal').Component} */
 	let c;
-	let type = /** @type {import('../internal').ComponentType} */ (internal.type);
+	let type = internal.type;
 	let newProps = internal.props;
 
 	// Necessary for createContext api. Setting this property will pass

src/diff/patch.js

@@ -192,7 +192,7 @@ function patchElement(internal, vnode) {
 }
 
 /**
- * @param {import('../internal').Internal} internal The component's backing Internal node
+ * @param {import('../internal').ComponentInternal} internal The component's backing Internal node
  * @param {import('../internal').VNode} newVNode The new virtual node
  * @returns {import('../internal').ComponentChildren} the component's children
  */

src/helpers.js

@@ -0,0 +1,16 @@
+import { TYPE_COMPONENT, TYPE_DOM, TYPE_ELEMENT, TYPE_ROOT } from './constants';
+
+/** @type {import('./internal').isComponentInternal} */
+export const isComponentInternal = internal =>
+	/** @type {*} */ (internal.flags & TYPE_COMPONENT);
+
+/** @type {import('./internal').isDomInternal} */
+export const isDomInternal = internal =>
+	/** @type {*} */ (internal.flags & TYPE_DOM);
+
+/** @type {import('./internal').isRootInternal} */
+export const isRootInternal = internal =>
+	/** @type {*} */ (internal.flags & TYPE_ROOT);
+
+/** @type {(internal: import('./internal').Internal) => number} */
+export const isElementInternal = internal => internal.flags & TYPE_ELEMENT;

src/internal.d.ts

@@ -45,7 +45,7 @@ export interface Options extends preact.Options {
 	_internal?(internal: Internal, vnode: VNode | string): void;
 }
 
-export type CommitQueue = Internal[];
+export type CommitQueue = ComponentInternal[];
 
 // Redefine ComponentFactory using our new internal FunctionalComponent interface above
 export type ComponentFactory<P> =
@@ -130,18 +130,13 @@ export interface VNode<P = {}> extends preact.VNode<P> {
  * An Internal is a persistent backing node within Preact's virtual DOM tree.
  * Think of an Internal like a long-lived VNode with stored data and tree linkages.
  */
-export interface Internal<P = {}> {
-	type: string | ComponentType<P>;
-	/** The props object for Elements/Components, and the string contents for Text */
-	props: (P & { children: ComponentChildren }) | string | number;
+export interface BaseInternal<P = {}> {
 	key: any;
 	ref: Ref<any> | null;
 	_prevRef: Ref<any> | null;
 
 	/** Bitfield containing information about the Internal or its component. */
 	flags: number;
-	/** Polymorphic property to store extensions like hooks on */
-	data: object | PreactNode;
 	/** The function that triggers in-place re-renders for an internal */
 	rerender: (internal: Internal) => void;
 
@@ -159,16 +154,52 @@ export interface Internal<P = {}> {
 	_component: Component | null;
 	/** This Internal's distance from the tree root */
 	_depth: number | null;
-	/** Callbacks to invoke when this internal commits */
-	_commitCallbacks: Array<() => void>;
-	_stateCallbacks: Array<() => void>; // Only class components
 }
 
+export interface ComponentInternal<P = {}> extends BaseInternal<P> {
+	type: ComponentType<P>;
+	props: P & { children: ComponentChildren };
+	/** Polymorphic property to store extensions like hooks on */
+	data: {
+		/** Callbacks to invoke when this internal commits */
+		_commitCallbacks: Array<() => void>;
+		_stateCallbacks: Array<() => void>; // Only class components
+		[key: string]: any;
+	};
+}
+
+export interface RootInternal<P = {}>
+	extends Exclude<ComponentInternal<P>, 'props'> {
+	props: P & { children: ComponentChildren; _parentDom: PreactNode };
+}
+
+export interface DomInternal<P = {}> extends BaseInternal<P> {
+	type: string;
+	/** The props object for Elements/Components, and the string contents for Text */
+	props: (P & { children: ComponentChildren }) | string | number;
+	data: PreactNode;
+}
+
+export type Internal<P = {}> =
+	| ComponentInternal<P>
+	| DomInternal<P>
+	| RootInternal<P>;
+
+export type isDomInternal<P = {}> = (
+	internal: Internal<P>
+) => internal is DomInternal<P>;
+export type isComponentInternal<P = {}> = (
+	internal: Internal<P>
+) => internal is ComponentInternal<P>;
+export type isRootInternal<P = {}> = (
+	internal: Internal<P>
+) => internal is RootInternal<P>;
+
 export interface Component<P = {}, S = {}> extends preact.Component<P, S> {
 	// When component is functional component, this is reset to functional component
 	constructor: ComponentType<P>;
 	state: S; // Override Component["state"] to not be readonly for internal use, specifically Hooks
-	_internal?: Internal<P> | null;
+	_internal?: ComponentInternal<P> | null;
 	_nextState?: S | null; // Only class components
 	/** Only used in the devtools to later dirty check if state has changed */
 	_prevState?: S | null;

src/tree.js

@@ -7,11 +7,16 @@ import {
 	TYPE_ROOT,
 	INHERITED_MODES,
 	TYPE_COMPONENT,
-	TYPE_DOM,
 	MODE_SVG,
 	UNDEFINED
 } from './constants';
 import { enqueueRender } from './component';
+import {
+	isComponentInternal,
+	isDomInternal,
+	isElementInternal,
+	isRootInternal
+} from './helpers';
 
 /**
  * Create an internal tree node
@@ -106,8 +111,8 @@ export function createInternal(vnode, parentInternal) {
 }
 
 const shouldSearchComponent = internal =>
-	internal.flags & TYPE_COMPONENT &&
-	(!(internal.flags & TYPE_ROOT) ||
+	isComponentInternal(internal) &&
+	(!isRootInternal(internal) ||
 		internal.props._parentDom == getParentDom(internal._parent));
 
 /**
@@ -153,7 +158,7 @@ export function getChildDom(internal, offset) {
 	for (; offset < internal._children.length; offset++) {
 		let child = internal._children[offset];
 		if (child != null) {
-			if (child.flags & TYPE_DOM) {
+			if (isDomInternal(child)) {
 				return child.data;
 			}
 
@@ -190,15 +195,15 @@ export function getParentDom(internal) {
 	let parent = internal;
 
 	// if this is a Root internal, return its parent DOM:
-	if (parent.flags & TYPE_ROOT) {
+	if (isRootInternal(parent)) {
 		return parent.props._parentDom;
 	}
 
 	// walk up the tree to find the nearest DOM or Root Internal:
 	while ((parent = parent._parent)) {
-		if (parent.flags & TYPE_ROOT) {
+		if (isRootInternal(parent)) {
 			return parent.props._parentDom;
-		} else if (parent.flags & TYPE_ELEMENT) {
+		} else if (isElementInternal(parent)) {
 			return parent.data;
 		}
 	}