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.

Sign up for GitHub

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

Jump to bottom

Remove Blocks #20138

Merged
merged 3 commits into from
Oct 31, 2020
Merged

Remove Blocks #20138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f216f6a
Remove Blocks
sebmarkbage Oct 31, 2020
11c8e8f
Remove Flight Server Runtime
sebmarkbage Oct 31, 2020
9ff6225
Devtools
sebmarkbage Oct 31, 2020
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
78 changes: 6 additions & 72 deletions packages/react-client/src/ReactFlightClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
*/

import type {Wakeable} from 'shared/ReactTypes';
import type {BlockComponent, BlockRenderFunction} from 'react/src/ReactBlock';
import type {LazyComponent} from 'react/src/ReactLazy';

import type {
Expand All @@ -25,11 +24,7 @@ import {
parseModel,
} from './ReactFlightClientHostConfig';

import {
REACT_LAZY_TYPE,
REACT_BLOCK_TYPE,
REACT_ELEMENT_TYPE,
} from 'shared/ReactSymbols';
import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';

export type JSONValue =
| number
Expand Down Expand Up @@ -229,15 +224,6 @@ export function reportGlobalError(response: Response, error: Error): void {
});
}

function readMaybeChunk<T>(maybeChunk: SomeChunk<T> | T): T {
if (maybeChunk == null || !(maybeChunk instanceof Chunk)) {
// $FlowFixMe
return maybeChunk;
}
const chunk: SomeChunk<T> = (maybeChunk: any);
return readChunk(chunk);
}

function createElement(type, key, props): React$Element<any> {
const element: any = {
// This tag allows us to uniquely identify this as a React Element
Expand Down Expand Up @@ -279,45 +265,6 @@ function createElement(type, key, props): React$Element<any> {
return element;
}

type UninitializedBlockPayload<Data> = [
mixed,
BlockRenderFunction<any, Data> | SomeChunk<BlockRenderFunction<any, Data>>,
Data | SomeChunk<Data>,
Response,
];

function initializeBlock<Props, Data>(
tuple: UninitializedBlockPayload<Data>,
): BlockComponent<Props, Data> {
// Require module first and then data. The ordering matters.
const moduleExport = readMaybeChunk(tuple[1]);

// The ordering here is important because this call might suspend.
// We don't want that to prevent the module graph for being initialized.
const data: Data = readMaybeChunk(tuple[2]);

return {
$$typeof: REACT_BLOCK_TYPE,
_status: -1,
_data: data,
_render: moduleExport,
};
}

function createLazyBlock<Props, Data>(
tuple: UninitializedBlockPayload<Data>,
): LazyComponent<BlockComponent<Props, Data>, UninitializedBlockPayload<Data>> {
const lazyType: LazyComponent<
BlockComponent<Props, Data>,
UninitializedBlockPayload<Data>,
> = {
$$typeof: REACT_LAZY_TYPE,
_payload: tuple,
_init: initializeBlock,
};
return lazyType;
}

function createLazyChunkWrapper<T>(
chunk: SomeChunk<T>,
): LazyComponent<T, SomeChunk<T>> {
Expand Down Expand Up @@ -354,25 +301,15 @@ export function parseModelString(
} else {
const id = parseInt(value.substring(1), 16);
const chunk = getChunk(response, id);
if (parentObject[0] === REACT_BLOCK_TYPE) {
// Block types know how to deal with lazy values.
return chunk;
}
// For anything else we must Suspend this block if
// we don't yet have the value.
return readChunk(chunk);
}
}
case '@': {
if (value === '@') {
return REACT_BLOCK_TYPE;
} else {
const id = parseInt(value.substring(1), 16);
const chunk = getChunk(response, id);
// We create a React.lazy wrapper around any lazy values.
// When passed into React, we'll know how to suspend on this.
return createLazyChunkWrapper(chunk);
}
const id = parseInt(value.substring(1), 16);
const chunk = getChunk(response, id);
// We create a React.lazy wrapper around any lazy values.
// When passed into React, we'll know how to suspend on this.
return createLazyChunkWrapper(chunk);
}
}
return value;
Expand All @@ -387,9 +324,6 @@ export function parseModelTuple(
// TODO: Consider having React just directly accept these arrays as elements.
// Or even change the ReactElement type to be an array.
return createElement(tuple[1], tuple[2], tuple[3]);
} else if (tuple[0] === REACT_BLOCK_TYPE) {
// TODO: Consider having React just directly accept these arrays as blocks.
return createLazyBlock((tuple: any));
}
return value;
}
Expand Down
76 changes: 0 additions & 76 deletions packages/react-client/src/__tests__/ReactFlight-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,10 @@

'use strict';

const ReactFeatureFlags = require('shared/ReactFeatureFlags');

let act;
let React;
let ReactNoop;
let ReactNoopFlightServer;
let ReactNoopFlightServerRuntime;
let ReactNoopFlightClient;
let ErrorBoundary;

Expand All @@ -27,7 +24,6 @@ describe('ReactFlight', () => {
React = require('react');
ReactNoop = require('react-noop-renderer');
ReactNoopFlightServer = require('react-noop-renderer/flight-server');
ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
ReactNoopFlightClient = require('react-noop-renderer/flight-client');
act = ReactNoop.act;

Expand Down Expand Up @@ -60,25 +56,6 @@ describe('ReactFlight', () => {
};
}

function block(render, load) {
if (load === undefined) {
return () => {
return ReactNoopFlightServerRuntime.serverBlockNoData(
moduleReference(render),
);
};
}
return function(...args) {
const curriedLoad = () => {
return load(...args);
};
return ReactNoopFlightServerRuntime.serverBlock(
moduleReference(render),
curriedLoad,
);
};
}

it('can render a server component', () => {
function Bar({text}) {
return text.toUpperCase();
Expand Down Expand Up @@ -138,59 +115,6 @@ describe('ReactFlight', () => {
expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
});

if (ReactFeatureFlags.enableBlocksAPI) {
it('can transfer a Block to the client and render there, without data', () => {
function User(props, data) {
return (
<span>
{props.greeting} {typeof data}
</span>
);
}
const loadUser = block(User);
const model = {
User: loadUser('Seb', 'Smith'),
};

const transport = ReactNoopFlightServer.render(model);

act(() => {
const rootModel = ReactNoopFlightClient.read(transport);
const UserClient = rootModel.User;
ReactNoop.render(<UserClient greeting="Hello" />);
});

expect(ReactNoop).toMatchRenderedOutput(<span>Hello undefined</span>);
});

it('can transfer a Block to the client and render there, with data', () => {
function load(firstName, lastName) {
return {name: firstName + ' ' + lastName};
}
function User(props, data) {
return (
<span>
{props.greeting}, {data.name}
</span>
);
}
const loadUser = block(User, load);
const model = {
User: loadUser('Seb', 'Smith'),
};

const transport = ReactNoopFlightServer.render(model);

act(() => {
const rootModel = ReactNoopFlightClient.read(transport);
const UserClient = rootModel.User;
ReactNoop.render(<UserClient greeting="Hello" />);
});

expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
});
}

it('should error if a non-serializable value is passed to a host component', () => {
function EventHandlerProp() {
return (
Expand Down
4 changes: 1 addition & 3 deletions packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import {
SimpleMemoComponent,
ContextProvider,
ForwardRef,
Block,
} from 'react-reconciler/src/ReactWorkTags';

type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
Expand Down Expand Up @@ -667,8 +666,7 @@ export function inspectHooksOfFiber(
if (
fiber.tag !== FunctionComponent &&
fiber.tag !== SimpleMemoComponent &&
fiber.tag !== ForwardRef &&
fiber.tag !== Block
fiber.tag !== ForwardRef
) {
throw new Error(
'Unknown Fiber. Needs to be a function component to inspect hooks.',
Expand Down
10 changes: 0 additions & 10 deletions packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
import type {CurrentDispatcherRef} from './types';

import {
BLOCK_NUMBER,
BLOCK_SYMBOL_STRING,
FORWARD_REF_NUMBER,
FORWARD_REF_SYMBOL_STRING,
LAZY_NUMBER,
Expand Down Expand Up @@ -276,14 +274,6 @@ export function describeUnknownElementTypeFrameInDEV(
ownerFn,
currentDispatcherRef,
);
case BLOCK_NUMBER:
case BLOCK_SYMBOL_STRING:
return describeFunctionComponentFrame(
type._render,
source,
ownerFn,
currentDispatcherRef,
);
case LAZY_NUMBER:
case LAZY_SYMBOL_STRING: {
const lazyComponent: LazyComponent<any, any> = (type: any);
Expand Down
8 changes: 0 additions & 8 deletions packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ function describeFiber(
IndeterminateComponent,
SimpleMemoComponent,
ForwardRef,
Block,
ClassComponent,
} = workTagMap;

Expand Down Expand Up @@ -70,13 +69,6 @@ function describeFiber(
owner,
currentDispatcherRef,
);
case Block:
return describeFunctionComponentFrame(
workInProgress.type._render,
source,
owner,
currentDispatcherRef,
);
case ClassComponent:
return describeClassComponentFrame(
workInProgress.type,
Expand Down
6 changes: 0 additions & 6 deletions packages/react-devtools-shared/src/backend/ReactSymbols.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@
// 2. DevTools must support both Symbol and numeric forms of each symbol;
// Since e.g. standalone DevTools runs in a separate process, it can't rely on its own ES capabilities.

export const BLOCK_NUMBER = 0xead9;
export const BLOCK_SYMBOL_STRING = 'Symbol(react.block)';

export const CONCURRENT_MODE_NUMBER = 0xeacf;
export const CONCURRENT_MODE_SYMBOL_STRING = 'Symbol(react.concurrent_mode)';

Expand Down Expand Up @@ -61,9 +58,6 @@ export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
export const SCOPE_NUMBER = 0xead7;
export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';

export const SERVER_BLOCK_NUMBER = 0xeada;
export const SERVER_BLOCK_SYMBOL_STRING = 'Symbol(react.server.block)';

export const STRICT_MODE_NUMBER = 0xeacc;
export const STRICT_MODE_SYMBOL_STRING = 'Symbol(react.strict_mode)';

Expand Down
6 changes: 1 addition & 5 deletions packages/react-devtools-shared/src/backend/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,6 @@ export function getInternalReactConstants(
if (gte(version, '17.0.0-alpha')) {
// TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
ReactTypeOfWork = {
Block: 22,
ClassComponent: 1,
ContextConsumer: 9,
ContextProvider: 10,
Expand All @@ -188,7 +187,7 @@ export function getInternalReactConstants(
LazyComponent: 16,
MemoComponent: 14,
Mode: 8,
OffscreenComponent: 23, // Experimental
OffscreenComponent: 22, // Experimental
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks wrong. OffscreenComponent is 22 in master now, but in 17.0.0 and 17.0.1 it's 23.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in #20362

Profiler: 12,
SimpleMemoComponent: 15,
SuspenseComponent: 13,
Expand All @@ -197,7 +196,6 @@ export function getInternalReactConstants(
};
} else if (gte(version, '16.6.0-beta.0')) {
ReactTypeOfWork = {
Block: 22,
ClassComponent: 1,
ContextConsumer: 9,
ContextProvider: 10,
Expand Down Expand Up @@ -225,7 +223,6 @@ export function getInternalReactConstants(
};
} else if (gte(version, '16.4.3-alpha')) {
ReactTypeOfWork = {
Block: -1, // Doesn't exist yet
ClassComponent: 2,
ContextConsumer: 11,
ContextProvider: 12,
Expand Down Expand Up @@ -253,7 +250,6 @@ export function getInternalReactConstants(
};
} else {
ReactTypeOfWork = {
Block: -1, // Doesn't exist yet
ClassComponent: 2,
ContextConsumer: 12,
ContextProvider: 13,
Expand Down
1 change: 0 additions & 1 deletion packages/react-devtools-shared/src/backend/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export type WorkFlags = number;
export type ExpirationTime = number;

export type WorkTagMap = {|
Block: WorkTag,
ClassComponent: WorkTag,
ContextConsumer: WorkTag,
ContextProvider: WorkTag,
Expand Down
10 changes: 0 additions & 10 deletions packages/react-noop-renderer/flight-server-runtime.js
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/react-noop-renderer/npm/flight-server-runtime.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/react-noop-renderer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
"flight-client.js",
"flight-modules.js",
"flight-server.js",
"flight-server-runtime.js",
"cjs/"
]
}