Skip to content

Commit

Permalink
Perform hasOwnProperty check in Relay Flight
Browse files Browse the repository at this point in the history
We simulate JSON.stringify in this loop so we should do a has own check.
Otherwise we'll include things like constructor properties.

This will actually make things throw less even when it should.
  • Loading branch information
sebmarkbage committed Nov 11, 2020
1 parent 16e6dad commit b5f5a66
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ export function processErrorChunk(
};
}

const hasOwnProperty = Object.prototype.hasOwnProperty;

function convertModelToJSON(
request: Request,
parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
Expand All @@ -107,12 +109,14 @@ function convertModelToJSON(
} else {
const jsonObj: {[key: string]: JSONValue} = {};
for (const nextKey in json) {
jsonObj[nextKey] = convertModelToJSON(
request,
json,
nextKey,
json[nextKey],
);
if (hasOwnProperty.call(json, nextKey)) {
jsonObj[nextKey] = convertModelToJSON(
request,
json,
nextKey,
json[nextKey],
);
}
}
return jsonObj;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -222,4 +222,29 @@ describe('ReactFlightDOMRelay', () => {
const model = readThrough(transport);
expect(model).toEqual(14);
});

it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
function Bar() {
}

function Foo() {
}
Foo.prototype = Object.create(Bar.prototype);
// This is enumerable which some polyfills do.
Foo.prototype.constructor = Foo;
Foo.prototype.method = function() {};

expect(() => {
const transport = [];
ReactDOMFlightRelayServer.render(
<input value={new Foo()} />,
transport,
);
readThrough(transport);
}).toErrorDev(
'Only plain objects can be passed to client components from server components. ',
{withoutStack: true},
);
});

});
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ export function processErrorChunk(
};
}

const hasOwnProperty = Object.prototype.hasOwnProperty;

function convertModelToJSON(
request: Request,
parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
Expand All @@ -107,12 +109,14 @@ function convertModelToJSON(
} else {
const jsonObj: {[key: string]: JSONValue} = {};
for (const nextKey in json) {
jsonObj[nextKey] = convertModelToJSON(
request,
json,
nextKey,
json[nextKey],
);
if (hasOwnProperty.call(json, nextKey)) {
jsonObj[nextKey] = convertModelToJSON(
request,
json,
nextKey,
json[nextKey],
);
}
}
return jsonObj;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,28 @@ describe('ReactFlightNativeRelay', () => {
nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
).toMatchSnapshot();
});

it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
function Bar() {
}

function Foo() {
}
Foo.prototype = Object.create(Bar.prototype);
// This is enumerable which some polyfills do.
Foo.prototype.constructor = Foo;
Foo.prototype.method = function() {};

expect(() => {
const transport = [];
ReactNativeFlightRelayServer.render(
<input value={new Foo()} />,
transport,
);
readThrough(transport);
}).toErrorDev(
'Only plain objects can be passed to client components from server components. ',
{withoutStack: true},
);
});
});

0 comments on commit b5f5a66

Please sign in to comment.