Skip to content

Commit

Permalink
Stub host config methods to suspend commit phase
Browse files Browse the repository at this point in the history
This adds some new methods to the host config, but does not implement
them yet. The purpose of these methods will be to allow the renderer to
suspend right the commit phase without suspending render, like to wait
for CSS to load before updating the screen. More context will be given
subsequent steps.

I didn't follow the `supportsHydration` pattern for optional host config
methods because this feature seems pretty generally useful to any
renderer, and declaring a no-op implementation is trivial.

I didn't update the docs for react-reconciler yet because this very
likely isn't the final layering. I'll document once the contract has
stablized more.
  • Loading branch information
acdlite committed Mar 15, 2023
1 parent 493a786 commit c29e1c2
Show file tree
Hide file tree
Showing 10 changed files with 157 additions and 0 deletions.
12 changes: 12 additions & 0 deletions packages/react-art/src/ReactARTHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,18 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}

export function shouldSuspendMount(instance, type, newProps) {
return null;
}

export function shouldSuspendUpdate(instance, type, oldProps, newProps) {
return null;
}

export function waitForCommitToBeReady(suspenseyThings) {
return null;
}

// eslint-disable-next-line no-undef
export function prepareRendererToRender(container: Container): void {
// noop
Expand Down
25 changes: 25 additions & 0 deletions packages/react-dom-bindings/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export type ChildSet = void; // Unused
export type TimeoutHandle = TimeoutID;
export type NoTimeout = -1;
export type RendererInspectionConfig = $ReadOnly<{}>;
export type SuspendCommitPayload = null;

type SelectionInformation = {
focusedElem: null | HTMLElement,
Expand Down Expand Up @@ -1608,6 +1609,30 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
localRequestAnimationFrame(time => callback(time));
});
}

export function shouldSuspendMount(
instance: Instance,
type: string,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function shouldSuspendUpdate(
instance: Instance,
type: string,
oldProps: Props,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function waitForCommitToBeReady(
suspenseyThings: Array<SuspendCommitPayload> | null,
): null {
return null;
}

// -------------------
// Resources
// -------------------
Expand Down
25 changes: 25 additions & 0 deletions packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ export type RendererInspectionConfig = $ReadOnly<{
) => void,
}>;

export type SuspendCommitPayload = null;

// TODO: Remove this conditional once all changes have propagated.
if (registerEventHandler) {
/**
Expand Down Expand Up @@ -418,6 +420,29 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}

export function shouldSuspendMount(
instance: Instance,
type: string,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function shouldSuspendUpdate(
instance: Instance,
type: string,
oldProps: Props,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function waitForCommitToBeReady(
suspenseyThings: Array<SuspendCommitPayload> | null,
): null {
return null;
}

export function prepareRendererToRender(container: Container): void {
// noop
}
Expand Down
25 changes: 25 additions & 0 deletions packages/react-native-renderer/src/ReactNativeHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ export type RendererInspectionConfig = $ReadOnly<{
) => void,
}>;

export type SuspendCommitPayload = null;

const UPDATE_SIGNAL = {};
if (__DEV__) {
Object.freeze(UPDATE_SIGNAL);
Expand Down Expand Up @@ -522,6 +524,29 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}

export function shouldSuspendMount(
instance: Instance,
type: string,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function shouldSuspendUpdate(
instance: Instance,
type: string,
oldProps: Props,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function waitForCommitToBeReady(
suspenseyThings: Array<SuspendCommitPayload> | null,
): null {
return null;
}

export function prepareRendererToRender(container: Container): void {
// noop
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-noop-renderer/src/ReactNoop.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export const {
createLegacyRoot,
getChildrenAsJSX,
getPendingChildrenAsJSX,
getSuspenseyThingStatus,
resolveSuspenseyThing,
resetSuspenseyThingCache,
createPortal,
render,
renderLegacySyncRoot,
Expand Down
3 changes: 3 additions & 0 deletions packages/react-noop-renderer/src/ReactNoopPersistent.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export const {
createLegacyRoot,
getChildrenAsJSX,
getPendingChildrenAsJSX,
getSuspenseyThingStatus,
resolveSuspenseyThing,
resetSuspenseyThingCache,
createPortal,
render,
renderLegacySyncRoot,
Expand Down
26 changes: 26 additions & 0 deletions packages/react-noop-renderer/src/createReactNoop.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ type CreateRootOptions = {
...
};

type SuspendCommitPayload = string;

const NO_CONTEXT = {};
const UPPERCASE_CONTEXT = {};
const UPDATE_SIGNAL = {};
Expand Down Expand Up @@ -480,6 +482,30 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
const endTime = Scheduler.unstable_now();
callback(endTime);
},

shouldSuspendMount(
instance: Instance,
type: string,
newProps: Props,
): SuspendCommitPayload | null {
return null;
},

shouldSuspendUpdate(
instance: Instance,
type: string,
oldProps: Props,
newProps: Props,
): SuspendCommitPayload | null {
return null;
},

waitForCommitToBeReady(
suspenseyThings: Array<SuspendCommitPayload> | null,
): null {
return null;
},

prepareRendererToRender() {},
resetRendererAfterRender() {},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,15 @@ describe('ReactFiberHostContext', () => {
return DefaultEventPriority;
},
requestPostPaintCallback: function () {},
shouldSuspendMount(instance, type, newProps) {
return null;
},
shouldSuspendUpdate(instance, type, oldProps, newProps) {
return null;
},
waitForCommitToBeReady(suspenseyThings) {
return null;
},
prepareRendererToRender: function () {},
resetRendererAfterRender: function () {},
supportsMutation: true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export opaque type ChildSet = mixed; // eslint-disable-line no-undef
export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
export opaque type RendererInspectionConfig = mixed; // eslint-disable-line no-undef
export opaque type SuspendCommitPayload = mixed; // eslint-disable-line no-undef
export type EventResponder = any;

export const getPublicInstance = $$$hostConfig.getPublicInstance;
Expand Down Expand Up @@ -68,6 +69,9 @@ export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
export const requestPostPaintCallback = $$$hostConfig.requestPostPaintCallback;
export const shouldSuspendMount = $$$hostConfig.shouldSuspendMount;
export const shouldSuspendUpdate = $$$hostConfig.shouldSuspendUpdate;
export const waitForCommitToBeReady = $$$hostConfig.waitForCommitToBeReady;
export const prepareRendererToRender = $$$hostConfig.prepareRendererToRender;
export const resetRendererAfterRender = $$$hostConfig.resetRendererAfterRender;

Expand Down
25 changes: 25 additions & 0 deletions packages/react-test-renderer/src/ReactTestHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ export type EventResponder = any;

export type RendererInspectionConfig = $ReadOnly<{}>;

export type SuspendCommitPayload = null;

export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
Expand Down Expand Up @@ -324,6 +326,29 @@ export function requestPostPaintCallback(callback: (time: number) => void) {
// noop
}

export function shouldSuspendMount(
instance: Instance,
type: string,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function shouldSuspendUpdate(
instance: Instance,
type: string,
oldProps: Props,
newProps: Props,
): SuspendCommitPayload | null {
return null;
}

export function waitForCommitToBeReady(
suspenseyThings: Array<SuspendCommitPayload> | null,
): null {
return null;
}

export function prepareRendererToRender(container: Container): void {
// noop
}
Expand Down

0 comments on commit c29e1c2

Please sign in to comment.