Merge pull request #328 from preactjs/shared-renderer

Author: marvinhagemeister

.github/workflows/nodejs.yml

@@ -21,6 +21,6 @@ jobs:
           yarn
           yarn lint
           yarn test
-          yarn test-e2e --repeat-flaky 3
+          PREACT_VERSION=10 yarn test-e2e --repeat-flaky 3
         env:
           CI: true

.gitignore

@@ -78,3 +78,6 @@ test-e2e/fixtures/extension
 # Browser profiles
 profiles/firefox/*
 profiles/chrome/*
+
+# macOS
+.DS_Store

package.json

@@ -17,6 +17,8 @@
 		"lint": "eslint 'src/**/*.{ts,tsx}' 'test-e2e/**/*.ts'",
 		"test": "mochette -c tsconfig.cjs.json 'src/**/*.test.{ts,tsx}'",
 		"test-e2e": "node tools/fetch-preact-versions.js && cross-env TS_NODE_PROJECT=tsconfig.cjs.json ts-node test-e2e/run.ts --default-timeout 5000",
+		"test-e2e:10": "PREACT_VERSION=10 npm run test-e2e",
+		"test-e2e:all": "npm run test-e2e && npm run test-e2e:10",
 		"dev": "npm run dev:serve",
 		"dev:serve": "vite test-e2e/fixtures --port 8100",
 		"dev:legacy": "webpack-dev-server --inline",
@@ -84,7 +86,7 @@
 		"ts-loader": "^8.0.4",
 		"ts-node": "^9.0.0",
 		"typescript": "^4.2.3",
-		"vite": "^2.3.3",
+		"vite": "^2.7.13",
 		"web-ext": "^6.4.0",
 		"webpack": "^5.4.0",
 		"webpack-cli": "^4.2.0",

src/adapter/10/IdMapper.ts

@@ -1,16 +1,12 @@
-import { RendererConfig10 } from "./renderer";
-import { HookType } from "../../constants";
-
+import { HookType } from "../shared/hooks";
 import type { Component, VNode } from "preact";
 import type {
 	Component as IComponent,
 	VNode as IVNode,
 } from "preact/src/internal";
-
-// These hook types are declared in "preact/hooks/src/internal" but not very
-// complete, so for now loosely declare locally.
-type ComponentHooks = Record<string, any>;
-type HookState = Record<string, any>;
+import { ComponentHooks, HookState, PreactBindings } from "../shared/bindings";
+import { RendererConfig } from "../shared/renderer";
+import { getRenderReasonPost } from "./renderReason";
 
 // Mangle accessors
 
@@ -30,7 +26,7 @@ export function getVNodeParent(vnode: VNode): VNode | null {
 /**
  * Check if a `vnode` is the root of a tree
  */
-export function isRoot(vnode: VNode, config: RendererConfig10): boolean {
+export function isRoot(vnode: VNode, config: RendererConfig): boolean {
 	return getVNodeParent(vnode) == null && vnode.type === config.Fragment;
 }
 
@@ -64,12 +60,14 @@ export function isSuspenseVNode(vnode: VNode): boolean {
 /**
  * Get the internal hooks state of a component
  */
-export function getComponentHooks(c: Component): ComponentHooks | null {
+export function getComponentHooks(vnode: VNode): ComponentHooks | null {
+	const c = getComponent(vnode);
+	if (!c) return null;
 	return (c as any).__hooks || (c as any).__H || null;
 }
 
-export function getStatefulHooks(c: Component): HookState[] | null {
-	const hooks = getComponentHooks(c);
+export function getStatefulHooks(vnode: VNode): HookState[] | null {
+	const hooks = getComponentHooks(vnode);
 	return hooks !== null
 		? hooks._list ||
 				hooks.__ ||
@@ -94,11 +92,14 @@ export function getStatefulHookValue(hookState: HookState): unknown {
 }
 
 export function getHookState(
-	c: Component,
+	vnode: VNode,
 	index: number,
 	type?: HookType,
 ): unknown {
-	const list = getStatefulHooks(c);
+	const c = getComponent(vnode);
+	if (c === null) return null;
+
+	const list = getStatefulHooks(vnode);
 	if (list && list[index]) {
 		// useContext
 		if (type === HookType.useContext) {
@@ -136,7 +137,7 @@ export function getActualChildren(
 /**
  * Get the root of a `vnode`
  */
-export function findRoot(vnode: VNode, config: RendererConfig10): VNode {
+export function findRoot(vnode: VNode, config: RendererConfig): VNode {
 	let next: VNode | null = vnode;
 	while ((next = getVNodeParent(next)) != null) {
 		if (isRoot(next, config)) {
@@ -162,7 +163,7 @@ export function getAncestor(vnode: VNode): VNode | null {
 /**
  * Get human readable name of the component/dom element
  */
-export function getDisplayName(vnode: VNode, config: RendererConfig10): string {
+export function getDisplayName(vnode: VNode, config: RendererConfig): string {
 	const { type } = vnode;
 	if (type === config.Fragment) return "Fragment";
 	else if (typeof type === "function") {
@@ -218,7 +219,7 @@ export function setNextState<S>(c: Component, value: S): S {
 	return ((c as IComponent)._nextState = (c as any).__s = value);
 }
 
-export function getSuspenseStateKey(c: Component<any, any>) {
+function getSuspenseStateKey(c: Component<any, any>) {
 	if ("_suspended" in c.state) {
 		return "_suspended";
 	} else if ("__e" in c.state) {
@@ -235,6 +236,22 @@ export function getSuspenseStateKey(c: Component<any, any>) {
 	return null;
 }
 
+export function getSuspendedState(vnode: VNode) {
+	const c = getComponent(vnode);
+	if (c) {
+		const key = getSuspenseStateKey(c);
+		if (key) {
+			return !!(c as any)._nextState[key];
+		}
+	}
+
+	return null;
+}
+
+export function isTextVNode(vnode: VNode) {
+	return vnode !== null && vnode.type === null;
+}
+
 export function createSuspenseState(vnode: VNode, suspended: boolean) {
 	const c = getComponent(vnode) as Component<any, any>;
 	const key = getSuspenseStateKey(c);
@@ -244,3 +261,58 @@ export function createSuspenseState(vnode: VNode, suspended: boolean) {
 
 	return {};
 }
+
+export function getInstance(vnode: VNode): any {
+	// For components we use the instance to check refs, otherwise
+	// we'll use a dom node
+	if (typeof vnode.type === "function") {
+		return getComponent(vnode);
+	}
+
+	return getDom(vnode);
+}
+
+export function isComponent(vnode: VNode) {
+	return vnode !== null && typeof vnode.type === "function";
+}
+
+export function isVNode(x: any): x is VNode {
+	return x != null && x.type !== undefined && hasDom(x);
+}
+
+export function isElement(vnode: VNode): boolean {
+	return typeof vnode.type === "string";
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function isPortal(vnode: VNode) {
+	// TODO: Find a way to detect portals
+	return false;
+}
+
+export const bindingsV10: PreactBindings<VNode> = {
+	isRoot,
+	getDisplayName,
+	getPropsVNodeDisplayName: getDisplayName,
+	getActualChildren,
+	getAncestor,
+	getDom,
+	isTextVNode,
+	getInstance,
+	createSuspenseState,
+	getComponent,
+	getComponentHooks,
+	getHookState,
+	getVNodeParent,
+	isComponent,
+	isElement,
+	isSuspenseVNode,
+	getSuspendedState,
+	isVNode,
+	setNextState,
+	isPortal,
+	getStatefulHookValue,
+	getStatefulHooks,
+	isUseReducerOrState,
+	getRenderReasonPost,
+};

src/adapter/10/vnode.ts src/adapter/10/bindings.tssrc/adapter/10/vnode.ts renamed to src/adapter/10/bindings.ts

@@ -1,15 +1,16 @@
-import { getDisplayName, getComponent } from "../vnode";
-import { ID } from "../../../view/store/types";
-import { IdMappingState, getVNodeById } from "../IdMapper";
-import { RendererConfig10 } from "../renderer";
+import { getDisplayName, getComponent } from "./bindings";
+import { ID } from "../../view/store/types";
+import { getVNodeById, IdMappingState } from "../shared/idMapper";
+import { SharedVNode } from "../shared/bindings";
+import { RendererConfig } from "../shared/renderer";
 
 /**
  * Pretty print a `VNode` to the browser console. This can be triggered
  * by clicking a button in the devtools ui.
  */
-export function logVNode(
-	ids: IdMappingState,
-	config: RendererConfig10,
+export function logVNode<T extends SharedVNode>(
+	ids: IdMappingState<T>,
+	config: RendererConfig,
 	id: ID,
 	children: ID[],
 ) {