Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

multipass render: custom react dispatcher #672

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion build/api/react-multipass-rendering.api.md
Expand Up @@ -6,7 +6,7 @@

import type { ElementType } from 'react';
import type { ReactElement } from 'react';
import type { ReactNode } from 'react';
import { ReactNode } from 'react';
import type { ReactText } from 'react';

// @public (undocumented)
Expand Down Expand Up @@ -48,6 +48,8 @@ export class ChildrenAnalyzer<AllLeavesRepresentation = any, AllBranchNodesRepre
// Warning: (ae-forgotten-export) The symbol "BranchNodeList" needs to be exported by the entry point index.d.ts
constructor(leaves: LeafList<AllLeavesRepresentation, StaticContext>, branchNodes: BranchNodeList<AllLeavesRepresentation, AllBranchNodesRepresentation, StaticContext>, options?: Partial<ChildrenAnalyzerOptions>);
// (undocumented)
doProcessChildren(children: ReactNode, initialStaticContext: StaticContext): Array<AllLeavesRepresentation | AllBranchNodesRepresentation>;
// (undocumented)
processChildren(children: ReactNode, initialStaticContext: StaticContext): Array<AllLeavesRepresentation | AllBranchNodesRepresentation>;
}

Expand Down
75 changes: 66 additions & 9 deletions packages/react-multipass-rendering/src/ChildrenAnalyzer.ts
@@ -1,5 +1,6 @@
import { assertNever } from '@contember/utilities'
import type { ElementType, ReactElement, ReactNode } from 'react'
import { ElementType, ReactElement, ReactNode, useReducer } from 'react'
import * as React from 'react'
import type { BranchNodeList } from './BranchNodeList'
import { ChildrenAnalyzerError } from './ChildrenAnalyzerError'
import type { ChildrenAnalyzerOptions } from './ChildrenAnalyzerOptions'
Expand Down Expand Up @@ -66,17 +67,30 @@ export class ChildrenAnalyzer<
children: ReactNode,
initialStaticContext: StaticContext,
): Array<AllLeavesRepresentation | AllBranchNodesRepresentation> {
if ('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' in React) {
const { ReactCurrentDispatcher } = (React as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
const originalCurrentDispatcher = ReactCurrentDispatcher.current
ReactCurrentDispatcher.current = {
...originalCurrentDispatcher,
...staticRenderReactDispatcher,
}
const result = this.doProcessChildren(children, initialStaticContext)
ReactCurrentDispatcher.current = originalCurrentDispatcher
return result
}
return this.doProcessChildren(children, initialStaticContext)
}

public doProcessChildren(
children: ReactNode,
initialStaticContext: StaticContext,
): Array<AllLeavesRepresentation | AllBranchNodesRepresentation> {

const processed = this.processNode(children, initialStaticContext, [])

const rawResult: Array<AllLeavesRepresentation | AllBranchNodesRepresentation | undefined> = Array.isArray(
processed,
)
? processed
: [processed]
const rawResult = Array.isArray(processed) ? processed : [processed]

return rawResult.filter(
(item): item is AllLeavesRepresentation | AllBranchNodesRepresentation => item !== undefined,
)
return rawResult.filter((item): item is AllLeavesRepresentation | AllBranchNodesRepresentation => item !== undefined)
}

private processNode(
Expand Down Expand Up @@ -258,3 +272,46 @@ export class ChildrenAnalyzer<
return processedChildren
}
}

let id = 0
const staticRenderReactDispatcher = {
useCallback: (cb: any) => {
return cb
},
useDebugValue: () => {
// do nothing
},
useEffect: () => {
// do nothing
},
useImperativeHandle: () => {
// do nothing
},
useLayoutEffect: () => {
// do nothing
},
useMemo: (value: () => any) => {
return value()
},
useReducer: (reducer: any, initializerArg: any, initializer: any) => {
return initializer ? [initializer(initializerArg), () => {
}] : [initializerArg, () => {
}]
},
useRef: (initialValue: any) => {
return { current: initialValue }
},
useState: (initialState: any) => {
return [typeof initialState === 'function' ? initialState() : initialState, () => {
}]
},
useDeferredValue: (value: any) => {
return value
},
useId() {
return `id-${id++}`
},
useInsertionEffect() {
// do nothing
},
}