[WIP - on HOLD] Initital Implementation of RSC #346

KhaledEmaraDev · 2023-08-10T18:18:41Z

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

I add a controller responsible for rendering any RSC.
I add a route pointing to the previous controller to render and RSC with its props.
I use the Webpack plugin to generate the Client and SSR manifests required for RSC to work and upload them to the node-renderer.
Add setImmediate() to the node-renderer's context because it's being used by RSC.
Add an RSC Demo using react-router-dom and the RSCRoute from react_on_rails to render a server component that does two things:
Sanitize and Render some Markdown using marked and sanitize-html which combined are 75K gzipped. (They aren't shipped to the server)
Use Apollo to make a GraphQL query that's done on the server and only the result is sent.

Limitations:

Newer React Server rendering are generally done using streams to one by one stream rendered content and support React's <Suspense>. The way we render right now one shots everything once it's done making <Suspense> useless on the server. Read here.

Related to

shakacode/react_on_rails#1573

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

Gemfile.development_dependencies

-gem "react_on_rails", "13.3.4" # keep in sync with package.json files
+# gem "react_on_rails", "13.3.4" # keep in sync with package.json files

 # For local development
-# gem "react_on_rails", path: "../react_on_rails"
+gem "react_on_rails", path: "../react_on_rails"


Do not include in the PR!

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

spec/dummy/client/app/ror-auto-load-components/ReactServerComponent.jsx

+import React, { Suspense } from 'react';
+
+import { marked } from 'marked'; // 35.9K (11.2K gzipped)
+import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)


No point including comments which will get obsolete so easily.

alexeyr-ci · 2023-08-11T14:55:13Z

spec/dummy/client/app/ror-auto-load-components/ReactServerComponent.jsx

+const allowedAttributes = Object.assign(
+  {},
+  sanitizeHtml.defaults.allowedAttributes,
+  {
+    img: ['alt', 'src'],
+  }
+);


Could be simplified to

const allowedAttributes = { ...sanitizeHtml.defaults.allowedAttributes, img: ['alt', 'src'] };

as far as I can see.

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

KhaledEmaraDev · 2023-10-12T15:56:25Z

packages/react-on-rails-pro/src/useRSC.ts

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


We should use @ts-expect-error instead and write a comment about why it's ignored.

alexeyr-ci · 2023-10-12T16:01:21Z

spec/dummy/client/app/ror-auto-load-components/ReactServerComponentClientBoundary.jsx

+}) {
+  const [count, setCount] = useState(0);
+
+  const allowedTags = [...defaultAllowedTags, ...['img', 'h1', 'h2', 'h3']];


No need for the second spread, just [...defaultAllowedTags, 'img', 'h1', 'h2', 'h3'].

alexeyr-ci · 2023-10-12T16:01:59Z

app/controllers/react_on_rails_pro/rsc_controller.rb

+
+      # TODO: RailsContext
+      js_code = ReactOnRailsPro::ServerRenderingJsCode.render_rsc(
+        props_string(params[:props] || {}).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029'),


Why just these two? Add a comment?

lib/react_on_rails_pro/server_rendering_pool/node_rendering_pool.rb

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

packages/node-renderer/src/worker.js

alexeyr-ci · 2023-10-12T16:05:33Z

packages/react-on-rails-pro/.eslintignore

@@ -0,0 +1,11 @@
+node_modules
+lib/
+webpack.config.js


It normally shouldn't be ignored, any reason why?

It's taken from the react-on-rails package. Webpack isn't used anyways.

IMHO better to limit to the files we actually want to ignore.

alexeyr-ci · 2023-10-12T16:06:26Z

packages/react-on-rails-pro/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+
+lib


Better ignore only at root: /lib, this is quite a likely name for needed directories.

It's needed here too as tsc outputs here.

No, I mean if you put /lib here it will only ignore this particular lib. If you have lib, it will ignore something like src/some_path/lib as well.

alexeyr-ci · 2023-10-12T16:06:52Z

packages/react-on-rails-pro/.prettierignore

+node_modules/
+package.json
+**/app/assets/webpack/
+lib/*


Probably also /lib/* if it's supported here.

This is the main output directory there are no other output directories for this package.

The problem is not output but someone who names a directory inside sources lib later.

packages/react-on-rails-pro/.prettierignore

alexeyr-ci · 2023-10-13T12:39:42Z

packages/react-on-rails-pro/src/RSCWebpackLoader.js

@@ -0,0 +1,265 @@
+const acorn = require('acorn-loose');


Any reason why this file is JS instead of TS?

alexeyr-ci · 2023-10-13T12:41:39Z

packages/react-on-rails-pro/src/context.ts

@@ -0,0 +1,3 @@
+export default function context(this: void): Window | NodeJS.Global| typeof globalThis | void {


Why a void parameter?

alexeyr-ci · 2023-10-13T12:58:02Z

spec/dummy/client/app/packs/server-bundle.js

+// TODO: Check why importing "react-on-rails" is required.
+// TODO: Check why we have to register using ReactOnRailsPro only.
+// import statement added by react_on_rails:generate_packs rake task
+import "./../generated/server-bundle-generated.js"


Just ../generated (remove ./)?

alexeyr-ci · 2023-10-13T12:58:39Z

spec/dummy/client/app/ror-auto-load-components/ReactServerComponentsDemoWithoutRSC.jsx

+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error : {error.message}</p>;
+
+  const allowedTags = [...sanitizeHtml.defaults.allowedTags, ...['img', 'h1', 'h2', 'h3']];


Also no need for the second spread.

alexeyr-ci · 2023-10-13T13:00:13Z

spec/dummy/config/webpack/clientWebpackConfig.js

  }

+  clientConfig.plugins.unshift(new ReactServerWebpackPlugin({
+    isServer: false, clientReferences: [


Move clientReferences to a separate line for readability (though Prettier will probably say that as well).

justin808 · 2024-08-21T00:45:21Z

@KhaledEmaraDev @AbanoubGhadban should be closed in favor of #422?

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

KhaledEmaraDev mentioned this pull request Aug 11, 2023

Initial Implementation of RSC shakacode/react_on_rails#1573

Closed

3 tasks

alexeyr-ci reviewed Aug 11, 2023

View reviewed changes

KhaledEmaraDev force-pushed the rsc-demo branch from 514406f to 32399fb Compare October 12, 2023 15:35

Initial RSC Implementation

db0c386

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

KhaledEmaraDev force-pushed the rsc-demo branch from 32399fb to db0c386 Compare October 12, 2023 15:49

KhaledEmaraDev commented Oct 12, 2023

View reviewed changes

alexeyr-ci reviewed Oct 12, 2023

View reviewed changes

lib/react_on_rails_pro/server_rendering_pool/node_rendering_pool.rb Outdated Show resolved Hide resolved

rsc: make optional args kargs

d14ec42

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

alexeyr-ci reviewed Oct 12, 2023

View reviewed changes

alexeyr-ci reviewed Oct 13, 2023

View reviewed changes

justin808 force-pushed the master branch from 3b19f98 to 60be70f Compare July 25, 2024 05:04

justin808 changed the title ~~Initital Implementation of RSC~~ [WIP - on HOLD] Initital Implementation of RSC Aug 21, 2024

alexeyr-ci closed this Nov 21, 2024

Judahmeek deleted the rsc-demo branch December 3, 2024 17:53

		@@ -0,0 +1,3 @@
		export default function context(this: void): Window \| NodeJS.Global\| typeof globalThis \| void {

		@@ -0,0 +1,12 @@
		node_modules

		lib

[WIP - on HOLD] Initital Implementation of RSC #346

[WIP - on HOLD] Initital Implementation of RSC #346

Uh oh!

Conversation

KhaledEmaraDev commented Aug 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Limitations:

Related to

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexeyr-ci Oct 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justin808 commented Aug 21, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

KhaledEmaraDev commented Aug 10, 2023 •

edited

Loading

alexeyr-ci Oct 13, 2023 •

edited

Loading