fix: should use server-entires error & modify ServerRoot as ReactElement

.changeset/chilled-yaks-turn.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/app-tools': patch
+---
+
+fix: should use server-entires when target === 'node', 'web-worker', 'service-worker'
+fix: 当 target 为 'node', 'web-worker', 'service-worker' 应该使用 server 入口.

packages/runtime/plugin-runtime/src/cli/template.server.ts

@@ -6,9 +6,9 @@ import {
   createRequestHandler,
 } from '@#metaName/runtime/ssr/server';
 
-const handleRequest = async (request, serverRoot, options) => {
+const handleRequest = async (request, ServerRoot, options) => {
 
-  const body = await #render(request, serverRoot, options);
+  const body = await #render(request, <ServerRoot />, options);
 
   return new Response(body, {
     headers: {

packages/runtime/plugin-runtime/src/core/server/requestHandler.ts

@@ -5,6 +5,7 @@ import {
   parseHeaders,
   parseQuery,
 } from '@modern-js/runtime-utils/universal/request';
+import React from 'react';
 import { createRoot } from '../react';
 import { RuntimeContext, getGlobalAppInit } from '../context';
 import { getGlobalRunner } from '../plugin/runner';
@@ -25,7 +26,7 @@ export type HandleRequestOptions = Exclude<
 
 export type HandleRequest = (
   request: Request,
-  serverRoot: React.ComponentType, // App, routes,
+  ServerRoot: React.ComponentType, // App, routes,
   options: HandleRequestOptions,
 ) => Promise<Response>;
 
@@ -126,7 +127,7 @@ function createSSRContext(
 export const createRequestHandler: CreateRequestHandler =
   async handleRequest => {
     const requestHandler: RequestHandler = async (request, options) => {
-      const serverRoot = createRoot();
+      const Root = createRoot();
 
       const runner = getGlobalRunner();
 
@@ -213,7 +214,13 @@ export const createRequestHandler: CreateRequestHandler =
         `${CHUNK_CSS_PLACEHOLDER}</head>`,
       );
 
-      const response = await handleRequest(request, serverRoot, {
+      const ServerRoot = (props: any) =>
+        React.createElement(Root, {
+          ...props,
+          _internal_context: Object.assign(context, { ssr: true }),
+        });
+
+      const response = await handleRequest(request, ServerRoot, {
         ...options,
         runtimeContext: context,
       });

packages/runtime/plugin-runtime/src/core/server/shared.ts

@@ -7,13 +7,13 @@ export type SSRConfig = NonNullable<ServerUserConfig['ssr']>;
 
 export type RenderStreaming = (
   request: Request,
-  serverRoot: React.ComponentType<any>,
+  serverRoot: React.ReactElement,
   optinos: RenderOptions,
 ) => Promise<ReadableStream>;
 
 export type RenderString = (
   request: Request,
-  serverRoot: React.ComponentType<any>,
+  serverRoot: React.ReactElement,
   optinos: RenderOptions,
 ) => Promise<string>;
 

packages/runtime/plugin-runtime/src/core/server/stream/shared.ts

@@ -1,6 +1,5 @@
 import { time } from '@modern-js/runtime-utils/time';
 import { parseHeaders } from '@modern-js/runtime-utils/universal/request';
-import { createElement } from 'react';
 import { run } from '@modern-js/runtime-utils/node';
 import { RuntimeContext } from '../../context';
 import { HandleRequestConfig } from '../requestHandler';
@@ -72,12 +71,6 @@ export function createRenderStreaming(
 
       const { htmlTemplate, entryName } = resource;
 
-      const rootElement = createElement(serverRoot, {
-        _internal_context: Object.assign(runtimeContext || {}, {
-          ssr: true,
-        }),
-      });
-
       const ssrConfig = getSSRConfigByEntry(
         entryName,
         config.ssr,
@@ -87,7 +80,7 @@ export function createRenderStreaming(
 
       const stream = await createReadableStreamFromElement(
         request,
-        rootElement,
+        serverRoot,
         {
           config,
           htmlTemplate,

packages/runtime/plugin-runtime/src/core/server/string/index.ts

@@ -100,12 +100,8 @@ export const renderString: RenderString = async (
       }),
     ];
 
-    const App = React.createElement(serverRoot, {
-      _internal_context: Object.assign(runtimeContext, { ssr: true }),
-    });
-
     const html = await generateHtml(
-      App,
+      serverRoot,
       htmlTemplate,
       chunkSet,
       collectors,

packages/runtime/plugin-runtime/src/core/server/string/prefetch.tsx

@@ -8,7 +8,7 @@ import { HandleRequestOptions } from '../requestHandler';
 import { SSRErrors, SSRTimings, Tracer } from '../tracer';
 
 export const prefetch = async (
-  App: React.ComponentType<any>,
+  App: React.ReactElement,
   request: Request,
   options: HandleRequestOptions,
   { onError, onTiming }: Tracer,
@@ -29,11 +29,9 @@ export const prefetch = async (
             stats: loadableStats,
             entrypoints: [entryName].filter(Boolean),
           });
-          renderToStaticMarkup(
-            extractor.collectChunks(<App _internal_context={context} />),
-          );
+          renderToStaticMarkup(extractor.collectChunks(App));
         } else {
-          renderToStaticMarkup(<App _internal_context={context} />);
+          renderToStaticMarkup(App);
         }
 
         const cost = end();

packages/runtime/plugin-runtime/tests/ssr/renderString.test.ts

@@ -2,7 +2,8 @@
  * @jest-environment node
  */
 import path from 'path';
-import { fs } from '@modern-js/utils';
+import { fs, createLogger } from '@modern-js/utils';
+import React from 'react';
 import {
   renderString,
   RenderOptions,
@@ -66,14 +67,19 @@ describe('test render', () => {
         routeManifest: {} as any,
       },
       loaderContext: new Map(),
+      logger: createLogger(),
       params: {},
       config: {
         ssr: true,
       },
       onTiming,
     };
 
-    const html = await renderString(request as any, App, renderOptions);
+    const serverRoot = React.createElement(App, {
+      _internal_context: { ssr: true },
+    });
+
+    const html = await renderString(request as any, serverRoot, renderOptions);
 
     expect(html).toMatchSnapshot();
     expect(onTiming).toBeCalled();

packages/solutions/app-tools/src/builder/generator/createBuilderOptions.ts

@@ -39,7 +39,7 @@ export function createBuilderOptions(
       if (target === 'web') {
         return entries;
       }
-      if (target === 'node') {
+      if (['node', 'web-worker', 'service-worker'].includes(target)) {
         return serverEntries;
       }
 

tests/integration/ssr/fixtures/init/src/entry.server.jsx

@@ -3,8 +3,8 @@ import {
   renderString,
 } from '@modern-js/runtime/ssr/server';
 
-const handleRequest = async (request, serverRoot, options) => {
-  const html = await renderString(request, serverRoot, options);
+const handleRequest = async (request, ServerRoot, options) => {
+  const html = await renderString(request, <ServerRoot />, options);
 
   const newHtml = html.replace('</body>', '<div>Byte-Dance<div></body>');
 

tests/integration/ssr/fixtures/streaming/src/entry.server.tsx

@@ -4,8 +4,8 @@ import {
   renderStreaming,
 } from '@modern-js/runtime/ssr/server';
 
-const handleRequest: HandleRequest = async (request, serverRoot, options) => {
-  const stream = await renderStreaming(request, serverRoot, options);
+const handleRequest: HandleRequest = async (request, ServerRoot, options) => {
+  const stream = await renderStreaming(request, <ServerRoot />, options);
 
   return new Response(stream, {
     headers: {