Use type guards for internal types

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;
  }
  }