Initial Implementation of RSC #1573

KhaledEmaraDev · 2023-08-10T18:09:54Z

Summary

This is an initial implementation of React Server Components (RSC). In this PR:

I add the necessary code to render to the RSC wire format using Node.js Streams.
I add a hook useRSC() and a React Component that extends react-router-dom's Route named RSCRoute to be used to route to RSC components.
I make sure to separate Server and Client functions because sometimes Server code requires somethings only available to Node.

Related to

https://github.com/shakacode/react_on_rails_pro/pull/346

Pull Request checklist

Remove this line after checking all the items here. If the item is not applicable to the PR, both check it out and wrap it by ~.

Add/update test to cover these changes
Update documentation
Update CHANGELOG file
Add the CHANGELOG entry at the top of the file.

Other Information

Remove this paragraph and mention any other important and relevant information such as benchmarks.

This change is

KhaledEmaraDev · 2023-08-10T20:25:57Z

node_package/src/renderReactServerComponent.ts

+      try {
+        const path = require('path');
+        const { readFileSync } = require('fs');
+        const reactClientManifest = readFileSync(path.resolve(__dirname, 'react-client-manifest.json'), 'utf8');


This should only be read once and cached.
Shared across workers is better.

alexeyr-ci · 2023-08-11T14:29:01Z

node_package/src/RSCRoute.tsx

+
+import useRSC from './useRSC';
+
+import type { RSCRouteProps } from './types/index';


Don't include /index here.

alexeyr-ci · 2023-08-11T14:29:46Z

node_package/src/ReactOnRails.ts

@@ -241,6 +244,16 @@ ctx.ReactOnRails = {
    return serverRenderReactComponent(options);
  },

+  /**
+   * Used for React Server Components by Rails
+   * @param options


Don't leave a comment like this empty.

alexeyr-ci · 2023-08-11T14:33:06Z

node_package/src/renderReactServerComponent.ts

+import ComponentRegistry from './ComponentRegistry';
+import buildConsoleReplay from './buildConsoleReplay';
+import handleError from './handleError';
+import type { RenderParams, RenderResult, RenderingError } from './types/index';


Move line 3 import here (and remove /index).

alexeyr-ci · 2023-08-11T14:33:19Z

node_package/src/renderReactServerComponent.ts

+import handleError from './handleError';
+import type { RenderParams, RenderResult, RenderingError } from './types/index';
+
+import { Writable } from 'node:stream';


And this should be above the local imports.

alexeyr-ci · 2023-08-11T14:33:39Z

node_package/src/renderReactServerComponent.ts

+  try {
+    const componentObj = ComponentRegistry.get(name);
+    const { component } = componentObj;
+    const reactRenderingResult = React.createElement(component as ReactComponent, props);


There are a lot of casts here, can we minimize them?

alexeyr-ci · 2023-08-11T14:42:28Z

node_package/src/ReactOnRailsServer.ts

+   * @param {*} other headers
+   * @returns {*} header
+   */
+


Extra line.

alexeyr-ci · 2023-08-11T14:44:59Z

node_package/src/types/index.ts

@@ -28,13 +29,13 @@ export interface RailsContext {
  httpAcceptLanguage: string;
 }

-type AuthenticityHeaders = {[id: string]: string} & {'X-CSRF-Token': string | null; 'X-Requested-With': string};
+type AuthenticityHeaders = { [id: string]: string } & { 'X-CSRF-Token': string | null; 'X-Requested-With': string };


Better to remove & and just do

type AuthenticityHeaders = { [id: string]: string; 'X-CSRF-Token': string | null; 'X-Requested-With': string; };

if we are changing this place anyway.

alexeyr-ci · 2023-08-11T14:48:10Z

node_package/src/useRSC.ts

+
+  useEffect(() => {
+    setContent(createFromFetch(fetch(
+      '/rsc/' + encodeURIComponent(componentName) + '?props=' + encodeURIComponent(JSON.stringify(props))


Use a template string (or URI class).

alexeyr-ci · 2023-08-11T14:48:43Z

node_package/src/useRSC.ts

@@ -0,0 +1,15 @@
+// @ts-ignore


Fix before merging (or better, don't even start with this).

alexeyr-ci · 2023-08-11T14:49:09Z

node_package/src/types/react-server-dom-webpack.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-server-dom-webpack/server.node';
+declare module 'react-server-dom-webpack/client.browser';


Should there be something in these declarations?

Signed-off-by: Khaled Emara <[email protected]>

ahangarha · 2023-10-13T16:15:46Z

Is this PR ready for review? If yes, May you please update the description to reflect the state of the PR?
(Maybe a revert commit was a better approach)

justin808 · 2023-11-17T00:56:56Z

@KhaledEmaraDev close this one?

KhaledEmaraDev · 2023-11-17T20:33:40Z

@justin808 No, it's needed for the Pro version to work. I think it could be accepted as-is. I will not introduce new changes to it.

justin808 · 2023-11-23T02:01:51Z

package.json

+  "homepage": "https://github.com/shakacode/react_on_rails#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "yalc check"


why is this needed pre-commit?

justin808 · 2023-11-23T02:05:00Z

package.json

@@ -32,6 +32,7 @@
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-react": "^7.32.1",
+    "husky": "^4.3.6",


husky and yalc should be separate PRs.

justin808 · 2023-11-23T02:05:07Z

package.json

+  "exports": {
+    ".": "./node_package/lib/ReactOnRails.js",
+    "./*": "./node_package/lib/*.js"
+  },


@KhaledEmaraDev can you explain this?

Seems odd to start exporting everything from package.json

Why not add what's necessary to the current exports?

We already have:
https://github.com/shakacode/react_on_rails/blob/master/node_package/src/ReactOnRails.ts#L292-L293

justin808 · 2023-11-23T02:05:20Z

yarn.lock

this file should not be changing, right?

KhaledEmaraDev commented Aug 10, 2023

View reviewed changes

KhaledEmaraDev requested review from ahangarha, rubenochiavone, Judahmeek, alexeyr, vaukalak, alexeyr-ci, AbanoubGhadban and Romex91 August 11, 2023 08:05

alexeyr-ci reviewed Aug 11, 2023

View reviewed changes

Initial RSC Implementation

6a42d6e

Signed-off-by: Khaled Emara <[email protected]>

KhaledEmaraDev force-pushed the rsc-demo branch from 1f932bb to 6a42d6e Compare October 12, 2023 15:36

justin808 requested changes Nov 23, 2023

View reviewed changes

justin808 closed this Jan 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial Implementation of RSC #1573

Initial Implementation of RSC #1573

KhaledEmaraDev commented Aug 10, 2023 •

edited

Loading

KhaledEmaraDev Aug 10, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

alexeyr-ci Aug 11, 2023

ahangarha commented Oct 13, 2023 •

edited

Loading

justin808 commented Nov 17, 2023

KhaledEmaraDev commented Nov 17, 2023

justin808 Nov 23, 2023

justin808 Nov 23, 2023

justin808 Nov 23, 2023

justin808 Nov 23, 2023


		import useRSC from './useRSC';

		import type { RSCRouteProps } from './types/index';

		@@ -0,0 +1,2 @@
		declare module 'react-server-dom-webpack/server.node';
		declare module 'react-server-dom-webpack/client.browser';

Initial Implementation of RSC #1573

Initial Implementation of RSC #1573

Conversation

KhaledEmaraDev commented Aug 10, 2023 • edited Loading

Summary

Related to

Pull Request checklist

Other Information

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ahangarha commented Oct 13, 2023 • edited Loading

justin808 commented Nov 17, 2023

KhaledEmaraDev commented Nov 17, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KhaledEmaraDev commented Aug 10, 2023 •

edited

Loading

ahangarha commented Oct 13, 2023 •

edited

Loading