From 3f6e7c159903fb8dd743b1ced55bdce53cf1a8d4 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Fri, 8 Dec 2023 14:58:35 +0100 Subject: [PATCH] RSC: Use the default entry.client file (#9654) --- __fixtures__/test-project-rsa/web/src/App.tsx | 12 +++++++ .../test-project-rsa/web/src/entry.client.tsx | 31 ++++++++++--------- .../web/src/App.tsx | 12 +++++++ .../web/src/entry.client.tsx | 31 ++++++++++--------- .../commands/experimental/setupRscHandler.js | 25 +++++---------- .../templates/rsc/App.tsx.template | 12 +++++++ .../templates/rsc/entry.client.tsx.template | 20 ------------ 7 files changed, 77 insertions(+), 66 deletions(-) create mode 100644 __fixtures__/test-project-rsa/web/src/App.tsx create mode 100644 __fixtures__/test-project-rsc-external-packages/web/src/App.tsx create mode 100644 packages/cli/src/commands/experimental/templates/rsc/App.tsx.template delete mode 100644 packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template diff --git a/__fixtures__/test-project-rsa/web/src/App.tsx b/__fixtures__/test-project-rsa/web/src/App.tsx new file mode 100644 index 000000000000..c27bb9fa9863 --- /dev/null +++ b/__fixtures__/test-project-rsa/web/src/App.tsx @@ -0,0 +1,12 @@ +import { FatalErrorBoundary } from '@redwoodjs/web' + +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' +import Routes from './Routes' + +const App = () => ( + + + +) + +export default App diff --git a/__fixtures__/test-project-rsa/web/src/entry.client.tsx b/__fixtures__/test-project-rsa/web/src/entry.client.tsx index b7c0b5061610..d55036f35465 100644 --- a/__fixtures__/test-project-rsa/web/src/entry.client.tsx +++ b/__fixtures__/test-project-rsa/web/src/entry.client.tsx @@ -1,20 +1,23 @@ -import { createRoot } from 'react-dom/client' - -import { FatalErrorBoundary } from '@redwoodjs/web' - -import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' -import Routes from './Routes' +import { hydrateRoot, createRoot } from 'react-dom/client' +import App from './App' +/** + * When `#redwood-app` isn't empty then it's very likely that you're using + * prerendering. So React attaches event listeners to the existing markup + * rather than replacing it. + * https://reactjs.org/docs/react-dom-client.html#hydrateroot + */ const redwoodAppElement = document.getElementById('redwood-app') -const root = createRoot(redwoodAppElement) - -const App = () => { - return ( - - - +if (!redwoodAppElement) { + throw new Error( + "Could not find an element with ID 'redwood-app'. Please ensure it exists in your 'web/src/index.html' file." ) } -root.render() +if (redwoodAppElement.children?.length > 0) { + hydrateRoot(redwoodAppElement, ) +} else { + const root = createRoot(redwoodAppElement) + root.render() +} diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/App.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/App.tsx new file mode 100644 index 000000000000..c27bb9fa9863 --- /dev/null +++ b/__fixtures__/test-project-rsc-external-packages/web/src/App.tsx @@ -0,0 +1,12 @@ +import { FatalErrorBoundary } from '@redwoodjs/web' + +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' +import Routes from './Routes' + +const App = () => ( + + + +) + +export default App diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx index b7c0b5061610..d55036f35465 100644 --- a/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx +++ b/__fixtures__/test-project-rsc-external-packages/web/src/entry.client.tsx @@ -1,20 +1,23 @@ -import { createRoot } from 'react-dom/client' - -import { FatalErrorBoundary } from '@redwoodjs/web' - -import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' -import Routes from './Routes' +import { hydrateRoot, createRoot } from 'react-dom/client' +import App from './App' +/** + * When `#redwood-app` isn't empty then it's very likely that you're using + * prerendering. So React attaches event listeners to the existing markup + * rather than replacing it. + * https://reactjs.org/docs/react-dom-client.html#hydrateroot + */ const redwoodAppElement = document.getElementById('redwood-app') -const root = createRoot(redwoodAppElement) - -const App = () => { - return ( - - - +if (!redwoodAppElement) { + throw new Error( + "Could not find an element with ID 'redwood-app'. Please ensure it exists in your 'web/src/index.html' file." ) } -root.render() +if (redwoodAppElement.children?.length > 0) { + hydrateRoot(redwoodAppElement, ) +} else { + const root = createRoot(redwoodAppElement) + root.render() +} diff --git a/packages/cli/src/commands/experimental/setupRscHandler.js b/packages/cli/src/commands/experimental/setupRscHandler.js index bea2f5f431c6..7be4c3a84bc8 100644 --- a/packages/cli/src/commands/experimental/setupRscHandler.js +++ b/packages/cli/src/commands/experimental/setupRscHandler.js @@ -90,15 +90,6 @@ export const handler = async ({ force, verbose }) => { }) }, }, - { - title: 'Removing App.tsx...', - task: async () => { - const appPath = - rwPaths.web.app ?? path.join(rwPaths.web.src, 'App.tsx') - - fs.rmSync(appPath, { force: true }) - }, - }, { title: 'Adding Pages...', task: async () => { @@ -284,19 +275,17 @@ export const handler = async ({ force, verbose }) => { }, }, { - title: 'Overwrite entry.client.tsx...', + title: 'Overwrite App.tsx...', task: async () => { - const entryClientTemplate = fs.readFileSync( - path.resolve( - __dirname, - 'templates', - 'rsc', - 'entry.client.tsx.template' - ), + const appTemplate = fs.readFileSync( + path.resolve(__dirname, 'templates', 'rsc', 'App.tsx.template'), 'utf-8' ) - writeFile(rwPaths.web.entryClient, entryClientTemplate, { + const appPath = + rwPaths.web.app ?? path.join(rwPaths.web.src, 'App.tsx') + + writeFile(appPath, appTemplate, { overwriteExisting: true, }) }, diff --git a/packages/cli/src/commands/experimental/templates/rsc/App.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/App.tsx.template new file mode 100644 index 000000000000..c27bb9fa9863 --- /dev/null +++ b/packages/cli/src/commands/experimental/templates/rsc/App.tsx.template @@ -0,0 +1,12 @@ +import { FatalErrorBoundary } from '@redwoodjs/web' + +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' +import Routes from './Routes' + +const App = () => ( + + + +) + +export default App diff --git a/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template deleted file mode 100644 index b7c0b5061610..000000000000 --- a/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template +++ /dev/null @@ -1,20 +0,0 @@ -import { createRoot } from 'react-dom/client' - -import { FatalErrorBoundary } from '@redwoodjs/web' - -import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' -import Routes from './Routes' - -const redwoodAppElement = document.getElementById('redwood-app') - -const root = createRoot(redwoodAppElement) - -const App = () => { - return ( - - - - ) -} - -root.render()