Merge branch 'release/next' into feat/unocss

.changeset/nice-vans-float.md

@@ -0,0 +1,5 @@
+---
+'@ice/runtime': patch
+---
+
+feat: support pre render ssr

.changeset/proud-buckets-beg.md

@@ -0,0 +1,5 @@
+---
+'rax-compat': patch
+---
+
+default export support

packages/bundles/package.json

@@ -22,7 +22,7 @@
     "ansi-html-community": "^0.0.8",
     "html-entities": "^2.3.2",
     "core-js": "3.32.0",
-    "caniuse-lite": "^1.0.30001431",
+    "caniuse-lite": "^1.0.30001561",
     "chokidar": "3.5.3",
     "esbuild": "^0.17.16",
     "events": "3.3.0",

packages/rax-compat/src/exports.ts

@@ -0,0 +1,46 @@
+import { createElement } from './create-element.js';
+import render from './render.js';
+import {
+  useState,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useCallback,
+  useMemo,
+  useReducer,
+  useImperativeHandle,
+} from './hooks.js';
+import Fragment from './fragment.js';
+import { forwardRef, createRef } from './ref.js';
+import { Component, PureComponent, memo } from './component.js';
+import { createContext } from './context.js';
+import shared from './shared.js';
+
+// Mocked version for rax.
+const version = '1.2.2-compat';
+
+export {
+  Component,
+  Fragment,
+  PureComponent,
+  createContext,
+  createElement,
+  createRef,
+  forwardRef,
+  memo,
+  render,
+
+  // This is mocked object for rax compatible.
+  shared,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  version,
+};

packages/rax-compat/src/index.ts

@@ -1,50 +1,5 @@
-import { createElement } from './create-element.js';
-import render from './render.js';
-import {
-  useState,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  useReducer,
-  useImperativeHandle,
-} from './hooks.js';
-import Fragment from './fragment.js';
-import { forwardRef, createRef } from './ref.js';
-import { Component, PureComponent, memo } from './component.js';
-import { createContext } from './context.js';
-import shared from './shared.js';
+import * as Rax from './exports.js';
 
-// Mocked version for rax.
-const version = '1.2.2-compat';
+export * from './exports.js';
 
-export {
-  Component,
-  Fragment,
-  PureComponent,
-
-  createContext,
-  createElement,
-  createRef,
-  forwardRef,
-  memo,
-
-  render,
-
-  // This is mocked object for rax compatible.
-  shared,
-
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-
-  version,
-};
+export default Rax;

packages/runtime/src/Document.tsx

@@ -8,6 +8,12 @@ interface DocumentContext {
   main: React.ReactNode | null;
 }
 
+declare global {
+  interface Window {
+    renderAssets: string[];
+  }
+}
+
 const Context = React.createContext<DocumentContext | undefined>(undefined);
 
 Context.displayName = 'DocumentContext';
@@ -137,8 +143,7 @@ export const Scripts: ScriptsType = (props: ScriptsProps) => {
   );
 };
 
-export function usePageAssets() {
-  const { loaderData, matches, assetsManifest } = useAppContext();
+export function getAllAssets(loaderData, matches, assetsManifest): Array<string> {
   const routeLinks = getLinks(matches, loaderData);
   const routeScripts = getScripts(matches, loaderData);
   const pageAssets = getPageAssets(matches, assetsManifest);
@@ -150,10 +155,14 @@ export function usePageAssets() {
   if (assetsManifest.dataLoader) {
     assets.unshift(`${assetsManifest.publicPath}${assetsManifest.dataLoader}`);
   }
-
   return assets;
 }
 
+export function usePageAssets() {
+  const { loaderData, matches, assetsManifest } = useAppContext();
+  return getAllAssets(loaderData, matches, assetsManifest);
+}
+
 interface DataProps {
   ScriptElement?: React.ComponentType<React.ScriptHTMLAttributes<HTMLScriptElement>> | string;
 }

packages/runtime/src/runServerApp.tsx

@@ -1,13 +1,14 @@
 import type { ServerResponse, IncomingMessage } from 'http';
 import * as React from 'react';
-import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import * as ReactDOMServer from 'react-dom/server';
 import type { Location } from 'history';
 import { parsePath } from 'history';
 import { isFunction } from '@ice/shared';
+import type { RenderToPipeableStreamOptions, OnAllReadyParams, NodeWritablePiper } from './server/streamRender.js';
 import type {
   AppContext, RouteItem, ServerContext,
-  AppExport, AssetsManifest,
+  AppExport,
+  AssetsManifest,
   RouteMatch,
   PageConfig,
   RenderMode,
@@ -25,7 +26,6 @@ import { DocumentContextProvider } from './Document.js';
 import { loadRouteModules } from './routes.js';
 import type { RouteLoaderOptions } from './routes.js';
 import { pipeToString, renderToNodeStream } from './server/streamRender.js';
-import type { NodeWritablePiper } from './server/streamRender.js';
 import getRequestContext from './requestContext.js';
 import matchRoutes from './matchRoutes.js';
 import getCurrentRoutePath from './utils/getCurrentRoutePath.js';
@@ -34,7 +34,7 @@ import { renderHTMLToJS } from './renderHTMLToJS.js';
 import addLeadingSlash from './utils/addLeadingSlash.js';
 
 
-interface RenderOptions {
+export interface RenderOptions {
   app: AppExport;
   assetsManifest: AssetsManifest;
   createRoutes: (options: Pick<RouteLoaderOptions, 'requestContext' | 'renderMode'>) => RouteItem[];
@@ -191,8 +191,8 @@ export async function renderToResponse(requestContext: ServerContext, renderOpti
           console.error('PipeToResponse error.');
           console.error(err);
         },
-        onAllReady: () => {
-          onAllReady && onAllReady();
+        onAllReady: (params: OnAllReadyParams) => {
+          onAllReady && onAllReady(params);
           resolve();
         },
       });
@@ -416,7 +416,10 @@ async function renderServerEntry(
     </AppContextProvider>
   );
 
-  const pipe = renderToNodeStream(element);
+  const pipe = renderToNodeStream(element, {
+    renderOptions,
+    routerContext,
+  });
 
   const fallback = () => {
     return renderDocument({

packages/runtime/src/server/streamRender.tsx

@@ -1,17 +1,35 @@
 import * as Stream from 'stream';
 import type * as StreamType from 'stream';
 import * as ReactDOMServer from 'react-dom/server';
-import type { RenderToPipeableStreamOptions } from 'react-dom/server';
+import { getAllAssets } from '../Document.js';
+import type { RenderOptions } from '../runServerApp.js';
+import type { ServerAppRouterProps } from '../types.js';
 
 const { Writable } = Stream;
 
+export interface OnAllReadyParams {
+  renderAssets: string[];
+}
+export type OnAllReady = (OnAllReadyParams) => void;
+export interface RenderToPipeableStreamOptions {
+  onShellReady?: () => void;
+  onShellError?: (error: unknown) => void;
+  onAllReady?: OnAllReady;
+  onError?: (error: unknown) => void;
+}
+
 export type NodeWritablePiper = (
   res: StreamType.Writable,
   options?: RenderToPipeableStreamOptions,
 ) => void;
 
+export type RenderToNodeStreamOptions = {
+  renderOptions: RenderOptions;
+  routerContext: ServerAppRouterProps['routerContext'];
+};
 export function renderToNodeStream(
   element: React.ReactElement,
+  renderToNodeStreamOptions: RenderToNodeStreamOptions,
 ): NodeWritablePiper {
   return (res, options) => {
     const { pipe } = ReactDOMServer.renderToPipeableStream(element, {
@@ -26,7 +44,28 @@ export function renderToNodeStream(
         options?.onError && options?.onError(error);
       },
       onAllReady() {
-        options?.onAllReady && options?.onAllReady();
+        const {
+          renderOptions,
+          routerContext,
+        } = renderToNodeStreamOptions;
+
+        const {
+          assetsManifest,
+        } = renderOptions;
+
+        const {
+          matches,
+          loaderData,
+        } = routerContext;
+
+        let renderAssets = getAllAssets(loaderData, matches, assetsManifest);
+        if (typeof window !== 'undefined' && window.renderAssets) {
+          renderAssets = renderAssets.concat(window.renderAssets);
+        }
+
+        options?.onAllReady && options?.onAllReady({
+          renderAssets,
+        });
       },
     });
   };

packages/shared-config/package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "@ice/bundles": "0.1.17",
     "@rollup/pluginutils": "^4.2.0",
-    "browserslist": "^4.19.3",
+    "browserslist": "^4.22.1",
     "consola": "^2.15.3",
     "fast-glob": "^3.2.11",
     "process": "^0.11.10"