Merge pull request #2692 from preactjs/relay-support

Add React "secret or fired" shim for react-relay

Author: marvinhagemeister

compat/mangle.json

@@ -8,6 +8,7 @@
       "properties": {
         "regex": "^_[^_]",
         "reserved": [
+          "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
           "__REACT_DEVTOOLS_GLOBAL_HOOK__",
           "__PREACT_DEVTOOLS__",
           "_renderers",

compat/src/index.js

@@ -26,7 +26,12 @@ import { Children } from './Children';
 import { Suspense, lazy } from './suspense';
 import { SuspenseList } from './suspense-list';
 import { createPortal } from './portals';
-import { hydrate, render, REACT_ELEMENT_TYPE } from './render';
+import {
+	hydrate,
+	render,
+	REACT_ELEMENT_TYPE,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+} from './render';
 
 const version = '16.8.0'; // trick libraries to think we are react
 
@@ -126,7 +131,8 @@ export {
 	StrictMode,
 	Suspense,
 	SuspenseList,
-	lazy
+	lazy,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 };
 
 // React copies the named exports to the default one.
@@ -163,5 +169,6 @@ export default {
 	StrictMode,
 	Suspense,
 	SuspenseList,
-	lazy
+	lazy,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
 };

compat/src/render.js

@@ -173,3 +173,27 @@ options.vnode = vnode => {
 
 	if (oldVNodeHook) oldVNodeHook(vnode);
 };
+
+// Only needed for react-relay
+let currentComponent;
+const oldBeforeRender = options._render;
+options._render = function(vnode) {
+	if (oldBeforeRender) {
+		oldBeforeRender(vnode);
+	}
+	currentComponent = vnode._component;
+};
+
+// This is a very very private internal function for React it
+// is used to sort-of do runtime dependency injection. So far
+// only `react-relay` makes use of it. It uses it to read the
+// context value.
+export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+	ReactCurrentDispatcher: {
+		current: {
+			readContext(context) {
+				return currentComponent._globalContext[context._id].props.value;
+			}
+		}
+	}
+};

compat/test/browser/render.test.js

@@ -2,7 +2,8 @@ import React, {
 	createElement,
 	render,
 	Component,
-	hydrate
+	hydrate,
+	createContext
 } from 'preact/compat';
 import { setupRerender, act } from 'preact/test-utils';
 import {
@@ -312,4 +313,31 @@ describe('compat render', () => {
 		expect(mountSpy).to.be.calledOnce;
 		expect(updateSpy).to.not.be.calledOnce;
 	});
+
+	it("should support react-relay's usage of __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED", () => {
+		const Ctx = createContext('foo');
+
+		// Simplified version of: https://github.com/facebook/relay/blob/fba79309977bf6b356ee77a5421ca5e6f306223b/packages/react-relay/readContext.js#L17-L28
+		function readContext(Context) {
+			const {
+				ReactCurrentDispatcher
+			} = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+			const dispatcher = ReactCurrentDispatcher.current;
+			return dispatcher.readContext(Context);
+		}
+
+		function Foo() {
+			const value = readContext(Ctx);
+			return <div>{value}</div>;
+		}
+
+		React.render(
+			<Ctx.Provider value="foo">
+				<Foo />
+			</Ctx.Provider>,
+			scratch
+		);
+
+		expect(scratch.textContent).to.equal('foo');
+	});
 });

debug/mangle.json

@@ -8,6 +8,7 @@
       "properties": {
         "regex": "^_[^_]",
         "reserved": [
+          "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
           "__REACT_DEVTOOLS_GLOBAL_HOOK__",
           "__PREACT_DEVTOOLS__",
           "_renderers",

devtools/mangle.json

@@ -8,6 +8,7 @@
       "properties": {
         "regex": "^_[^_]",
         "reserved": [
+          "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
           "__REACT_DEVTOOLS_GLOBAL_HOOK__",
           "__PREACT_DEVTOOLS__",
           "_renderers",

hooks/mangle.json

@@ -8,6 +8,7 @@
       "properties": {
         "regex": "^_[^_]",
         "reserved": [
+          "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
           "__REACT_DEVTOOLS_GLOBAL_HOOK__",
           "__PREACT_DEVTOOLS__",
           "_renderers",

mangle.json

@@ -8,6 +8,7 @@
       "properties": {
         "regex": "^_[^_]",
         "reserved": [
+          "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
           "__REACT_DEVTOOLS_GLOBAL_HOOK__",
           "__PREACT_DEVTOOLS__",
           "_renderers",