fix various issues with an example

dai-shi · Dec 29, 2023 · dbc3d29 · dbc3d29
1 parent d0843c4
commit dbc3d29
Show file tree

Hide file tree

Showing 23 changed files with 88 additions and 69 deletions.
diff --git a/e2e/fixtures/ssr-basic/src/main.tsx b/e2e/fixtures/ssr-basic/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/01_counter/src/main.tsx b/examples/01_counter/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/02_async/src/main.tsx b/examples/02_async/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/03_promise/src/main.tsx b/examples/03_promise/src/main.tsx
@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/04_callserver/src/main.tsx b/examples/04_callserver/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/05_mutation/src/main.tsx b/examples/05_mutation/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/06_nesting/src/main.tsx b/examples/06_nesting/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/07_router/src/main.tsx b/examples/07_router/src/main.tsx
@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/08_cookies/src/main.tsx b/examples/08_cookies/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/09_cssmodules/.env.local b/examples/09_cssmodules/.env.local
@@ -0,0 +1 @@
+WAKU_PUBLIC_HELLO="Hello from env file"
diff --git a/examples/09_cssmodules/src/components/App.tsx b/examples/09_cssmodules/src/components/App.tsx
@@ -9,6 +9,7 @@ const App = ({ name }: { name: string }) => {
       <h1 className={styles.title}>Hello {name}!!</h1>
       <h3>This is a server component.</h3>
       <Counter />
+      Env: {import.meta.env.WAKU_PUBLIC_HELLO}
     </div>
   );
 };

diff --git a/examples/09_cssmodules/src/components/Counter.tsx b/examples/09_cssmodules/src/components/Counter.tsx
@@ -9,6 +9,7 @@ export const Counter = () => {
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
+      Env: {import.meta.env.WAKU_PUBLIC_HELLO}
     </div>
   );
 };
diff --git a/examples/09_cssmodules/src/main.tsx b/examples/09_cssmodules/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/10_dynamicroute/src/main.tsx b/examples/10_dynamicroute/src/main.tsx
@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/11_form/src/main.tsx b/examples/11_form/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/examples/12_css/src/main.tsx b/examples/12_css/src/main.tsx
@@ -10,7 +10,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);

diff --git a/packages/waku/src/lib/builder/build.ts b/packages/waku/src/lib/builder/build.ts
@@ -159,6 +159,7 @@ const buildServerBundle = async (
         },
         serverEntryFiles,
       }),
+      rscEnvPlugin({ config }),
     ],
     ssr: {
       resolve: {
@@ -260,7 +261,7 @@ const buildClientBundle = async (
     plugins: [
       patchReactRefresh(viteReact()),
       rscIndexPlugin({ ...config, cssAssets }),
-      rscEnvPlugin({ config, ssr }),
+      rscEnvPlugin({ config, hydrate: ssr }),
     ],
     build: {
       outDir: joinPath(rootDir, config.distDir, config.publicDir),

diff --git a/packages/waku/src/lib/handlers/dev-worker-api.ts b/packages/waku/src/lib/handlers/dev-worker-api.ts
@@ -12,6 +12,7 @@ export type RenderRequest = {
   context: unknown;
   stream?: ReadableStream;
   moduleIdCallback?: (id: string) => void;
+  env: Record<string, string>;
 };
 
 export type BuildOutput = {

diff --git a/packages/waku/src/lib/handlers/dev-worker-impl.ts b/packages/waku/src/lib/handlers/dev-worker-impl.ts
@@ -4,6 +4,7 @@ import { pathToFileURL } from 'node:url';
 import { parentPort } from 'node:worker_threads';
 import { Server } from 'node:http';
 import { createServer as createViteServer } from 'vite';
+import type { ViteDevServer } from 'vite';
 
 import type { EntriesDev } from '../../server.js';
 import type { ResolvedConfig } from '../config.js';
@@ -17,6 +18,7 @@ import type {
 import { renderRsc } from '../renderers/rsc-renderer.js';
 import { nonjsResolvePlugin } from '../plugins/vite-plugin-nonjs-resolve.js';
 import { rscTransformPlugin } from '../plugins/vite-plugin-rsc-transform.js';
+import { rscEnvPlugin } from '../plugins/vite-plugin-rsc-env.js';
 import { rscReloadPlugin } from '../plugins/vite-plugin-rsc-reload.js';
 import { rscDelegatePlugin } from '../plugins/vite-plugin-rsc-delegate.js';
 import { mergeUserViteConfig } from '../utils/merge-vite-config.js';
@@ -31,6 +33,7 @@ const controllerMap = new Map<number, ReadableStreamDefaultController>();
 const handleRender = async (mesg: MessageReq & { type: 'render' }) => {
   const { id, type: _removed, hasModuleIdCallback, ...rest } = mesg;
   const rr: RenderRequest = rest;
+  (globalThis as any).__WAKU_PRIVATE_ENV__ = rr.env || {};
   try {
     const stream = new ReadableStream({
       start(controller) {
@@ -89,52 +92,56 @@ const handleRender = async (mesg: MessageReq & { type: 'render' }) => {
   }
 };
 
-const dummyServer = new Server(); // FIXME we hope to avoid this hack
-
-const moduleImports: Set<string> = new Set();
-
-const mergedViteConfig = await mergeUserViteConfig({
-  plugins: [
-    nonjsResolvePlugin(),
-    rscTransformPlugin({ isBuild: false }),
-    rscReloadPlugin(moduleImports, (type) => {
-      const mesg: MessageRes = { type };
-      parentPort!.postMessage(mesg);
-    }),
-    rscDelegatePlugin(moduleImports, (resultOrSource) => {
-      const mesg: MessageRes =
-        typeof resultOrSource === 'object'
-          ? { type: 'module-import', result: resultOrSource }
-          : { type: 'hot-import', source: resultOrSource };
-      parentPort!.postMessage(mesg);
-    }),
-  ],
-  // HACK to suppress 'Skipping dependency pre-bundling' warning
-  optimizeDeps: { include: [] },
-  ssr: {
-    resolve: {
-      conditions: ['react-server', 'workerd'],
-      externalConditions: ['react-server', 'workerd'],
+let lastViteServer: ViteDevServer | undefined;
+const getViteServer = async () => {
+  if (lastViteServer) {
+    return lastViteServer;
+  }
+  const dummyServer = new Server(); // FIXME we hope to avoid this hack
+  const moduleImports: Set<string> = new Set();
+  const mergedViteConfig = await mergeUserViteConfig({
+    plugins: [
+      nonjsResolvePlugin(),
+      rscTransformPlugin({ isBuild: false }),
+      rscEnvPlugin({}),
+      rscReloadPlugin(moduleImports, (type) => {
+        const mesg: MessageRes = { type };
+        parentPort!.postMessage(mesg);
+      }),
+      rscDelegatePlugin(moduleImports, (resultOrSource) => {
+        const mesg: MessageRes =
+          typeof resultOrSource === 'object'
+            ? { type: 'module-import', result: resultOrSource }
+            : { type: 'hot-import', source: resultOrSource };
+        parentPort!.postMessage(mesg);
+      }),
+    ],
+    // HACK to suppress 'Skipping dependency pre-bundling' warning
+    optimizeDeps: { include: [] },
+    ssr: {
+      resolve: {
+        conditions: ['react-server', 'workerd'],
+        externalConditions: ['react-server', 'workerd'],
+      },
+      external: ['react', 'react-server-dom-webpack'],
+      noExternal: /^(?!node:)/,
     },
-    external: ['react', 'react-server-dom-webpack'],
-    noExternal: /^(?!node:)/,
-  },
-  appType: 'custom',
-  server: { middlewareMode: true, hmr: { server: dummyServer } },
-});
-
-const vitePromise = createViteServer(mergedViteConfig).then(async (vite) => {
-  await vite.ws.close();
-  return vite;
-});
+    appType: 'custom',
+    server: { middlewareMode: true, hmr: { server: dummyServer } },
+  });
+  const viteServer = await createViteServer(mergedViteConfig);
+  await viteServer.ws.close();
+  lastViteServer = viteServer;
+  return viteServer;
+};
 
 const loadServerFile = async (fileURL: string) => {
-  const vite = await vitePromise;
+  const vite = await getViteServer();
   return vite.ssrLoadModule(fileURLToFilePath(fileURL));
 };
 
 const loadEntries = async (config: ResolvedConfig) => {
-  const vite = await vitePromise;
+  const vite = await getViteServer();
   const filePath = joinPath(vite.config.root, config.srcDir, config.entriesJs);
   return vite.ssrLoadModule(filePath) as Promise<EntriesDev>;
 };

diff --git a/packages/waku/src/lib/handlers/handler-dev.ts b/packages/waku/src/lib/handlers/handler-dev.ts
@@ -56,7 +56,7 @@ export function createHandler<
         patchReactRefresh(viteReact()),
         rscIndexPlugin(config),
         rscHmrPlugin(),
-        rscEnvPlugin({ config, ssr }),
+        rscEnvPlugin({ config, hydrate: ssr }),
       ],
       ssr: {
         external: ['waku'],
@@ -149,6 +149,7 @@ export function createHandler<
               contentType: undefined,
               config,
               context,
+              env: (globalThis as any).__WAKU_PRIVATE_ENV__,
             });
             context = nextCtx as Context;
             return readable;
@@ -184,6 +185,7 @@ export function createHandler<
           config,
           context,
           stream: req.stream,
+          env: (globalThis as any).__WAKU_PRIVATE_ENV__,
         });
         unstable_posthook?.(req, res, nextCtx as Context);
         readable.pipeTo(res.stream);

diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-env.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-env.ts
@@ -2,13 +2,13 @@ import type { Plugin } from 'vite';
 
 export function rscEnvPlugin({
   config,
-  ssr,
+  hydrate,
 }: {
-  config: {
+  config?: {
     basePath: string;
     rscPath: string;
   };
-  ssr: boolean | undefined;
+  hydrate?: boolean | undefined;
 }): Plugin {
   return {
     name: 'rsc-env-plugin',
@@ -22,16 +22,20 @@ export function rscEnvPlugin({
                 ? [[`import.meta.env.${k}`, JSON.stringify(v)]]
                 : [],
           ),
-          [
-            'import.meta.env.WAKU_CONFIG_BASE_PATH',
-            JSON.stringify(config.basePath),
-          ],
-          [
-            'import.meta.env.WAKU_CONFIG_RSC_PATH',
-            JSON.stringify(config.rscPath),
-          ],
-          ...(ssr
-            ? [['import.meta.env.WAKU_SSR_ENABLED', JSON.stringify('true')]]
+          ...(config
+            ? [
+                [
+                  'import.meta.env.WAKU_CONFIG_BASE_PATH',
+                  JSON.stringify(config.basePath),
+                ],
+                [
+                  'import.meta.env.WAKU_CONFIG_RSC_PATH',
+                  JSON.stringify(config.rscPath),
+                ],
+              ]
+            : []),
+          ...(hydrate
+            ? [['import.meta.env.WAKU_HYDRATE', JSON.stringify('true')]]
             : []),
         ]),
       };

diff --git a/packages/waku/src/lib/renderers/html-renderer.ts b/packages/waku/src/lib/renderers/html-renderer.ts
@@ -50,8 +50,9 @@ const getViteServer = async () => {
   const { nonjsResolvePlugin } = await import(
     '../plugins/vite-plugin-nonjs-resolve.js'
   );
+  const { rscEnvPlugin } = await import('../plugins/vite-plugin-rsc-env.js');
   const viteServer = await createViteServer({
-    plugins: [nonjsResolvePlugin()],
+    plugins: [nonjsResolvePlugin(), rscEnvPlugin({})],
     // HACK to suppress 'Skipping dependency pre-bundling' warning
     optimizeDeps: { include: [] },
     ssr: {

diff --git a/packages/website/src/main.tsx b/packages/website/src/main.tsx
@@ -12,7 +12,7 @@ const rootElement = (
   </StrictMode>
 );
 
-if (import.meta.env.WAKU_SSR_ENABLED) {
+if (import.meta.env.WAKU_HYDRATE) {
   hydrateRoot(document.body, rootElement);
 } else {
   createRoot(document.body).render(rootElement);