From 69a17708e868cb49a13d88085e36c1dca34e2940 Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Tue, 5 Dec 2023 12:03:44 +0100 Subject: [PATCH] RSC: Add RW env var definitions to Vite config and include FatalErrorBoundary (#9622) --- .../test-project-rsa/web/src/AboutCounter.tsx | 20 ++++ .../test-project-rsa/web/src/AboutPage.tsx | 5 +- .../test-project-rsa/web/src/entry.client.tsx | 18 +-- .../web/src/AboutCounter.tsx | 20 ++++ .../web/src/AboutPage.tsx | 5 +- .../web/src/entry.client.tsx | 18 +-- .../commands/experimental/setupRscHandler.js | 19 +++ .../templates/rsc/AboutCounter.tsx.template | 20 ++++ .../templates/rsc/AboutPage.tsx.template | 5 +- .../templates/rsc/entry.client.tsx.template | 18 +-- packages/vite/src/buildFeServer.ts | 1 - packages/vite/src/buildRscFeServer.ts | 7 +- .../react-server-dom-webpack/node-loader.ts | 1 + packages/vite/src/rsc/rscBuildClient.ts | 58 ++++++++- packages/vite/src/rsc/rscBuildRwEnvVars.ts | 38 ++++++ packages/vite/src/rsc/rscBuildServer.ts | 112 +++++++++++++----- packages/vite/src/waku-lib/vite-plugin-rsc.ts | 4 +- packages/web/src/config.ts | 4 + tasks/smoke-tests/rsc/tests/rsc.spec.ts | 9 ++ 19 files changed, 321 insertions(+), 61 deletions(-) create mode 100644 __fixtures__/test-project-rsa/web/src/AboutCounter.tsx create mode 100644 __fixtures__/test-project-rsc-external-packages/web/src/AboutCounter.tsx create mode 100644 packages/cli/src/commands/experimental/templates/rsc/AboutCounter.tsx.template create mode 100644 packages/vite/src/rsc/rscBuildRwEnvVars.ts diff --git a/__fixtures__/test-project-rsa/web/src/AboutCounter.tsx b/__fixtures__/test-project-rsa/web/src/AboutCounter.tsx new file mode 100644 index 000000000000..c86915e87f8b --- /dev/null +++ b/__fixtures__/test-project-rsa/web/src/AboutCounter.tsx @@ -0,0 +1,20 @@ +'use client' + +import React from 'react' + +// @ts-expect-error no types +import styles from './Counter.module.css' +import './Counter.css' + +export const AboutCounter = () => { + const [count, setCount] = React.useState(0) + + return ( +
+

Count: {count}

+ +

This is a client component.

+

RSC on client: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

+
+ ) +} diff --git a/__fixtures__/test-project-rsa/web/src/AboutPage.tsx b/__fixtures__/test-project-rsa/web/src/AboutPage.tsx index f35708e1fa20..0caf6a955090 100644 --- a/__fixtures__/test-project-rsa/web/src/AboutPage.tsx +++ b/__fixtures__/test-project-rsa/web/src/AboutPage.tsx @@ -1,7 +1,7 @@ import { Assets } from '@redwoodjs/vite/assets' import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal' -import { Counter } from './Counter' +import { AboutCounter } from './AboutCounter' import './AboutPage.css' @@ -17,7 +17,8 @@ const AboutPage = () => {

About Redwood

- + +

RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

) diff --git a/__fixtures__/test-project-rsa/web/src/entry.client.tsx b/__fixtures__/test-project-rsa/web/src/entry.client.tsx index a020c7fa31eb..f6d17f5aed82 100644 --- a/__fixtures__/test-project-rsa/web/src/entry.client.tsx +++ b/__fixtures__/test-project-rsa/web/src/entry.client.tsx @@ -2,8 +2,10 @@ import { createRoot } from 'react-dom/client' import { Route, Router, Set } from '@redwoodjs/router' import { serve } from '@redwoodjs/vite/client' +import { FatalErrorBoundary } from '@redwoodjs/web' import NavigationLayout from './layouts/NavigationLayout/NavigationLayout' +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' import NotFoundPage from './pages/NotFoundPage/NotFoundPage' const redwoodAppElement = document.getElementById('redwood-app') @@ -15,13 +17,15 @@ const root = createRoot(redwoodAppElement) const App = () => { return ( - - - - - - - + + + + + + + + + ) } diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/AboutCounter.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/AboutCounter.tsx new file mode 100644 index 000000000000..c86915e87f8b --- /dev/null +++ b/__fixtures__/test-project-rsc-external-packages/web/src/AboutCounter.tsx @@ -0,0 +1,20 @@ +'use client' + +import React from 'react' + +// @ts-expect-error no types +import styles from './Counter.module.css' +import './Counter.css' + +export const AboutCounter = () => { + const [count, setCount] = React.useState(0) + + return ( +
+

Count: {count}

+ +

This is a client component.

+

RSC on client: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

+
+ ) +} diff --git a/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx b/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx index f35708e1fa20..0caf6a955090 100644 --- a/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx +++ b/__fixtures__/test-project-rsc-external-packages/web/src/AboutPage.tsx @@ -1,7 +1,7 @@ import { Assets } from '@redwoodjs/vite/assets' import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal' -import { Counter } from './Counter' +import { AboutCounter } from './AboutCounter' import './AboutPage.css' @@ -17,7 +17,8 @@ const AboutPage = () => {

About Redwood

- + +

RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

) 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 a020c7fa31eb..f6d17f5aed82 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 @@ -2,8 +2,10 @@ import { createRoot } from 'react-dom/client' import { Route, Router, Set } from '@redwoodjs/router' import { serve } from '@redwoodjs/vite/client' +import { FatalErrorBoundary } from '@redwoodjs/web' import NavigationLayout from './layouts/NavigationLayout/NavigationLayout' +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' import NotFoundPage from './pages/NotFoundPage/NotFoundPage' const redwoodAppElement = document.getElementById('redwood-app') @@ -15,13 +17,15 @@ const root = createRoot(redwoodAppElement) const App = () => { return ( - - - - - - - + + + + + + + + + ) } diff --git a/packages/cli/src/commands/experimental/setupRscHandler.js b/packages/cli/src/commands/experimental/setupRscHandler.js index 58b5847263da..8ecf0e1b3ffe 100644 --- a/packages/cli/src/commands/experimental/setupRscHandler.js +++ b/packages/cli/src/commands/experimental/setupRscHandler.js @@ -148,6 +148,25 @@ export const handler = async ({ force, verbose }) => { }) }, }, + { + title: 'Adding AboutCounter.tsx...', + task: async () => { + const counterTemplate = fs.readFileSync( + path.resolve( + __dirname, + 'templates', + 'rsc', + 'AboutCounter.tsx.template' + ), + 'utf-8' + ) + const counterPath = path.join(rwPaths.web.src, 'AboutCounter.tsx') + + writeFile(counterPath, counterTemplate, { + overwriteExisting: force, + }) + }, + }, { title: 'Adding CSS files...', task: async () => { diff --git a/packages/cli/src/commands/experimental/templates/rsc/AboutCounter.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/AboutCounter.tsx.template new file mode 100644 index 000000000000..c86915e87f8b --- /dev/null +++ b/packages/cli/src/commands/experimental/templates/rsc/AboutCounter.tsx.template @@ -0,0 +1,20 @@ +'use client' + +import React from 'react' + +// @ts-expect-error no types +import styles from './Counter.module.css' +import './Counter.css' + +export const AboutCounter = () => { + const [count, setCount] = React.useState(0) + + return ( +
+

Count: {count}

+ +

This is a client component.

+

RSC on client: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

+
+ ) +} diff --git a/packages/cli/src/commands/experimental/templates/rsc/AboutPage.tsx.template b/packages/cli/src/commands/experimental/templates/rsc/AboutPage.tsx.template index f35708e1fa20..0caf6a955090 100644 --- a/packages/cli/src/commands/experimental/templates/rsc/AboutPage.tsx.template +++ b/packages/cli/src/commands/experimental/templates/rsc/AboutPage.tsx.template @@ -1,7 +1,7 @@ import { Assets } from '@redwoodjs/vite/assets' import { ProdRwRscServerGlobal } from '@redwoodjs/vite/rwRscGlobal' -import { Counter } from './Counter' +import { AboutCounter } from './AboutCounter' import './AboutPage.css' @@ -17,7 +17,8 @@ const AboutPage = () => {

About Redwood

- + +

RSC on server: {globalThis.RWJS_EXP_RSC ? 'enabled' : 'disabled'}

) 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 index a020c7fa31eb..f6d17f5aed82 100644 --- a/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template +++ b/packages/cli/src/commands/experimental/templates/rsc/entry.client.tsx.template @@ -2,8 +2,10 @@ import { createRoot } from 'react-dom/client' import { Route, Router, Set } from '@redwoodjs/router' import { serve } from '@redwoodjs/vite/client' +import { FatalErrorBoundary } from '@redwoodjs/web' import NavigationLayout from './layouts/NavigationLayout/NavigationLayout' +import FatalErrorPage from './pages/FatalErrorPage/FatalErrorPage' import NotFoundPage from './pages/NotFoundPage/NotFoundPage' const redwoodAppElement = document.getElementById('redwood-app') @@ -15,13 +17,15 @@ const root = createRoot(redwoodAppElement) const App = () => { return ( - - - - - - - + + + + + + + + + ) } diff --git a/packages/vite/src/buildFeServer.ts b/packages/vite/src/buildFeServer.ts index bfa139469e53..f5d01e254268 100644 --- a/packages/vite/src/buildFeServer.ts +++ b/packages/vite/src/buildFeServer.ts @@ -48,7 +48,6 @@ export const buildFeServer = async ({ verbose, webDir }: BuildOptions = {}) => { await buildRscFeServer({ viteConfigPath, - webSrc: rwPaths.web.src, webHtml: rwPaths.web.html, entries: rwPaths.web.entries, webDist: rwPaths.web.dist, diff --git a/packages/vite/src/buildRscFeServer.ts b/packages/vite/src/buildRscFeServer.ts index f07fa98385e3..c989b92aacca 100644 --- a/packages/vite/src/buildRscFeServer.ts +++ b/packages/vite/src/buildRscFeServer.ts @@ -2,11 +2,11 @@ import { rscBuildAnalyze } from './rsc/rscBuildAnalyze' import { rscBuildClient } from './rsc/rscBuildClient' import { rscBuildClientEntriesMappings } from './rsc/rscBuildClientEntriesFile' import { rscBuildCopyCssAssets } from './rsc/rscBuildCopyCssAssets' +import { rscBuildRwEnvVars } from './rsc/rscBuildRwEnvVars' import { rscBuildServer } from './rsc/rscBuildServer' interface Args { viteConfigPath: string - webSrc: string webHtml: string entries: string webDist: string @@ -16,7 +16,6 @@ interface Args { export const buildRscFeServer = async ({ viteConfigPath, - webSrc, webHtml, entries, webDist, @@ -30,7 +29,6 @@ export const buildRscFeServer = async ({ // Generate the client bundle const clientBuildOutput = await rscBuildClient( - webSrc, webHtml, webDist, clientEntryFiles @@ -54,4 +52,7 @@ export const buildRscFeServer = async ({ clientEntryFiles, webDistServerEntries ) + + // Mappings from server to client asset file names + await rscBuildRwEnvVars(webDistServerEntries) } diff --git a/packages/vite/src/react-server-dom-webpack/node-loader.ts b/packages/vite/src/react-server-dom-webpack/node-loader.ts index 565d126e8f0c..0e390c8ec8d6 100644 --- a/packages/vite/src/react-server-dom-webpack/node-loader.ts +++ b/packages/vite/src/react-server-dom-webpack/node-loader.ts @@ -570,6 +570,7 @@ export async function load( url, defaultLoad ) + return { format: 'module', source: newSrc, diff --git a/packages/vite/src/rsc/rscBuildClient.ts b/packages/vite/src/rsc/rscBuildClient.ts index 650273c3dbd4..415906ec178c 100644 --- a/packages/vite/src/rsc/rscBuildClient.ts +++ b/packages/vite/src/rsc/rscBuildClient.ts @@ -1,6 +1,10 @@ +import path from 'node:path' + import react from '@vitejs/plugin-react' import { build as viteBuild } from 'vite' +import { getConfig, getPaths } from '@redwoodjs/project-config' + import { onWarn } from '../lib/onWarn' import { rscIndexPlugin } from '../waku-lib/vite-plugin-rsc' @@ -10,14 +14,64 @@ import { rscIndexPlugin } from '../waku-lib/vite-plugin-rsc' * Generate the client bundle */ export async function rscBuildClient( - webSrc: string, webHtml: string, webDist: string, clientEntryFiles: Record ) { + const rwPaths = getPaths() + const rwConfig = getConfig() + + const graphQlUrl = + rwConfig.web.apiGraphQLUrl ?? rwConfig.web.apiUrl + '/graphql' + const clientBuildOutput = await viteBuild({ // configFile: viteConfigPath, - root: webSrc, + root: rwPaths.web.src, + envPrefix: 'REDWOOD_ENV_', + publicDir: path.join(rwPaths.web.base, 'public'), + define: { + RWJS_ENV: { + __REDWOOD__APP_TITLE: rwConfig.web.title || path.basename(rwPaths.base), + RWJS_API_GRAPHQL_URL: graphQlUrl, + RWJS_API_URL: rwConfig.web.apiUrl, + RWJS_EXP_STREAMING_SSR: rwConfig.experimental?.streamingSsr?.enabled, + RWJS_EXP_RSC: rwConfig.experimental?.rsc?.enabled, + }, + RWJS_DEBUG_ENV: { + RWJS_SRC_ROOT: rwPaths.web.src, + REDWOOD_ENV_EDITOR: JSON.stringify(process.env.REDWOOD_ENV_EDITOR), + }, + // Vite can automatically expose environment variables, but we + // disable that in `buildFeServer.ts` by setting `envFile: false` + // because we want to use our own logic for loading .env, + // .env.defaults, etc + // The two object spreads below will expose all environment + // variables listed in redwood.toml and all environment variables + // prefixed with REDWOOD_ENV_ + ...Object.fromEntries( + rwConfig.web.includeEnvironmentVariables.flatMap((envName) => [ + // TODO (RSC): Figure out if/why we need to disable eslint here. + // Re-enable if possible + // eslint-disable-next-line + [`import.meta.env.${envName}`, JSON.stringify(process.env[envName])], + // TODO (RSC): Figure out if/why we need to disable eslint here + // Re-enable if possible + // eslint-disable-next-line + [`process.env.${envName}`, JSON.stringify(process.env[envName])], + ]) + ), + ...Object.entries(process.env).reduce>( + (acc, [key, value]) => { + if (key.startsWith('REDWOOD_ENV_')) { + acc[`import.meta.env.${key}`] = JSON.stringify(value) + acc[`process.env.${key}`] = JSON.stringify(value) + } + + return acc + }, + {} + ), + }, plugins: [react(), rscIndexPlugin()], build: { outDir: webDist, diff --git a/packages/vite/src/rsc/rscBuildRwEnvVars.ts b/packages/vite/src/rsc/rscBuildRwEnvVars.ts new file mode 100644 index 000000000000..d0c767eacea2 --- /dev/null +++ b/packages/vite/src/rsc/rscBuildRwEnvVars.ts @@ -0,0 +1,38 @@ +import fs from 'fs/promises' + +/** + * RSC build. Step 6. + * Make RW specific env vars available to server components. + * For client components this is done as a side-effect of importing from + * @redwoodjs/web (see packages/web/src/config.ts). + * The import of entries.js that we're adding this to is handled by the + * RSC worker we've got set up + */ +export async function rscBuildRwEnvVars(webDistServerEntries: string) { + await fs.appendFile( + webDistServerEntries, + ` + +globalThis.RWJS_API_GRAPHQL_URL = RWJS_ENV.RWJS_API_GRAPHQL_URL +globalThis.RWJS_API_URL = RWJS_ENV.RWJS_API_URL +globalThis.__REDWOOD__APP_TITLE = RWJS_ENV.__REDWOOD__APP_TITLE +globalThis.RWJS_EXP_STREAMING_SSR = RWJS_ENV.RWJS_EXP_STREAMING_SSR +globalThis.RWJS_EXP_RSC = RWJS_ENV.RWJS_EXP_RSC +` + ) + + // TODO (RSC): See if we can just import that config.ts file from + // @redwoodjs/web/dist/config here + // Or find some other way to not duplicate the definitions + // Want to look at `noExternal` in our worker to do RWJS_ENV transforms. + // And/or possibly optimizeDeps. I'm not sure. Also, right now we're getting + // "`require` is not defined" errors. Probably some ESM/CJS issue + // Also seems like when using noExternal we have to use just @redwoodjs/web + // instead of @redwoodjs/web/dist/config which I think would be better + // + // console.log('adding rwjs/web import to entries.js') + // return fs.appendFile( + // webDistServerEntries, + // `\nimport '@redwoodjs/web/dist/config'` + // ) +} diff --git a/packages/vite/src/rsc/rscBuildServer.ts b/packages/vite/src/rsc/rscBuildServer.ts index 1848f7b1ed37..f4ea94b1a75f 100644 --- a/packages/vite/src/rsc/rscBuildServer.ts +++ b/packages/vite/src/rsc/rscBuildServer.ts @@ -3,7 +3,7 @@ import path from 'node:path' import react from '@vitejs/plugin-react' import { build as viteBuild } from 'vite' -import { getPaths } from '@redwoodjs/project-config' +import { getConfig, getPaths } from '@redwoodjs/project-config' import { onWarn } from '../lib/onWarn' @@ -28,10 +28,63 @@ export async function rscBuildServer( console.log('input', input) const rwPaths = getPaths() + const rwConfig = getConfig() + + console.log( + 'rscBuildServer.ts RWJS_EXP_RSC', + rwConfig.experimental?.rsc?.enabled + ) const serverBuildOutput = await viteBuild({ // ...configFileConfig, root: rwPaths.web.base, + envPrefix: 'REDWOOD_ENV_', + publicDir: path.join(rwPaths.web.base, 'public'), + define: { + RWJS_ENV: { + // @NOTE we're avoiding process.env here, unlike webpack + RWJS_API_GRAPHQL_URL: + rwConfig.web.apiGraphQLUrl ?? rwConfig.web.apiUrl + '/graphql', + RWJS_API_URL: rwConfig.web.apiUrl, + __REDWOOD__APP_TITLE: rwConfig.web.title || path.basename(rwPaths.base), + RWJS_EXP_STREAMING_SSR: rwConfig.experimental?.streamingSsr?.enabled, + RWJS_EXP_RSC: rwConfig.experimental?.rsc?.enabled, + }, + RWJS_DEBUG_ENV: { + RWJS_SRC_ROOT: rwPaths.web.src, + REDWOOD_ENV_EDITOR: JSON.stringify(process.env.REDWOOD_ENV_EDITOR), + }, + // Vite can automatically expose environment variables, but we + // disable that in `buildFeServer.ts` by setting `envFile: false` + // because we want to use our own logic for loading .env, + // .env.defaults, etc + // The two object spreads below will expose all environment + // variables listed in redwood.toml and all environment variables + // prefixed with REDWOOD_ENV_ + ...Object.fromEntries( + rwConfig.web.includeEnvironmentVariables.flatMap((envName) => [ + // TODO (RSC): Figure out if/why we need to disable eslint here. + // Re-enable if possible + // eslint-disable-next-line + [`import.meta.env.${envName}`, JSON.stringify(process.env[envName])], + // TODO (RSC): Figure out if/why we need to disable eslint here + // Re-enable if possible + // eslint-disable-next-line + [`process.env.${envName}`, JSON.stringify(process.env[envName])], + ]) + ), + ...Object.entries(process.env).reduce>( + (acc, [key, value]) => { + if (key.startsWith('REDWOOD_ENV_')) { + acc[`import.meta.env.${key}`] = JSON.stringify(value) + acc[`process.env.${key}`] = JSON.stringify(value) + } + + return acc + }, + {} + ), + }, ssr: { // Externalize everything except packages with files that have // 'use client' in them (which are the files in `clientEntryFiles`) @@ -41,32 +94,37 @@ export async function rscBuildServer( // The map function below will return '..' for local files. That's not // very pretty, but it works. It just won't match anything. noExternal: Object.values(clientEntryFiles).map((fullPath) => { - // On Windows `fullPath` will be something like - // D:/a/redwood/test-project-rsc-external-packages/node_modules/@tobbe.dev/rsc-test/dist/rsc-test.es.js - const relativePath = path.relative( - path.join(rwPaths.base, 'node_modules'), - fullPath - ) - // On Windows `relativePath` will be something like - // @tobbe.dev\rsc-test\dist\rsc-test.es.js - // So `splitPath` will in this case become - // ['@tobbe.dev', 'rsc-test', 'dist', 'rsc-test.es.js'] - const splitPath = relativePath.split(path.sep) - - // Packages without scope. Full package name looks like: package_name - let packageName = splitPath[0] - - // Handle scoped packages. Full package name looks like: - // @org_name/package_name - if (splitPath[0].startsWith('@')) { - // join @org_name with package_name - packageName = path.join(splitPath[0], splitPath[1]) - } - - console.log('noExternal packageName', packageName) - - return packageName - }), + // On Windows `fullPath` will be something like + // D:/a/redwood/test-project-rsc-external-packages/node_modules/@tobbe.dev/rsc-test/dist/rsc-test.es.js + const relativePath = path.relative( + path.join(rwPaths.base, 'node_modules'), + fullPath + ) + // On Windows `relativePath` will be something like + // @tobbe.dev\rsc-test\dist\rsc-test.es.js + // So `splitPath` will in this case become + // ['@tobbe.dev', 'rsc-test', 'dist', 'rsc-test.es.js'] + const splitPath = relativePath.split(path.sep) + + // Packages without scope. Full package name looks like: package_name + let packageName = splitPath[0] + + // Handle scoped packages. Full package name looks like: + // @org_name/package_name + if (splitPath[0].startsWith('@')) { + // join @org_name with package_name + packageName = path.join(splitPath[0], splitPath[1]) + } + + console.log( + 'noExternal fullPath', + fullPath, + 'packageName', + packageName + ) + + return packageName + }), resolve: { externalConditions: ['react-server'], }, diff --git a/packages/vite/src/waku-lib/vite-plugin-rsc.ts b/packages/vite/src/waku-lib/vite-plugin-rsc.ts index f9c54c98df32..8ecf79c3561a 100644 --- a/packages/vite/src/waku-lib/vite-plugin-rsc.ts +++ b/packages/vite/src/waku-lib/vite-plugin-rsc.ts @@ -93,7 +93,9 @@ export function rscTransformPlugin(): Plugin { resolve ) - return (await RSDWNodeLoader.load(id, null, load)).source + const source = (await RSDWNodeLoader.load(id, null, load)).source + + return source }, } } diff --git a/packages/web/src/config.ts b/packages/web/src/config.ts index 9dded9c11a06..59bd013f1fc1 100644 --- a/packages/web/src/config.ts +++ b/packages/web/src/config.ts @@ -1,6 +1,10 @@ // RWJS_ENV and RWJS_DEBUG_ENV // are defined in Webpack.common.js and Vite.config.js +console.log('config.ts') +console.log('config.ts', RWJS_ENV) +console.log('config.ts') + // @NOTE: do not use globalThis on the right side, because webpack cannot access these vars then globalThis.RWJS_API_GRAPHQL_URL = RWJS_ENV.RWJS_API_GRAPHQL_URL as string globalThis.RWJS_API_URL = RWJS_ENV.RWJS_API_URL as string diff --git a/tasks/smoke-tests/rsc/tests/rsc.spec.ts b/tasks/smoke-tests/rsc/tests/rsc.spec.ts index 5866a974276a..a72ca9251734 100644 --- a/tasks/smoke-tests/rsc/tests/rsc.spec.ts +++ b/tasks/smoke-tests/rsc/tests/rsc.spec.ts @@ -16,3 +16,12 @@ test('Setting up RSC should give you a test project with a client side counter c page.close() }) + +test('RWJS_* env vars', async ({ page }) => { + await page.goto('/about') + + await expect(page.getByText('RSC on client: enabled')).toBeVisible() + await expect(page.getByText('RSC on server: enabled')).toBeVisible() + + page.close() +})