import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import { pluginYaml } from '@rsbuild/plugin-yaml';
import { isEnvProduction, srcPath, publicPath, themePath, isNodeTarget, isSSRDev } from './config/constant';
import template from './config/template';

export default defineConfig({
  source: {
    entry: {
      index: isNodeTarget ? './src/index' : './src/index.web', // 区分web环境和node环境构建的入口
    },
    // ...
  },
  output: {
    assetPrefix: isNodeTarget ? '/' : 'auto', // node环境设置成根路径，web环境设置为auto，服务端动态下发publicPath，在运行时通过__webpack_public_path__设置
    overrideBrowserslist: isNodeTarget // node环境下不参考.browserslistrc文件，设置node的范围
      ? {
          node: ['node >= 18'],
        }
      : undefined,
    targets: isNodeTarget ? ['node'] : ['web'], // target根据构建产物区分
    minify: isEnvProduction && !isNodeTarget, // dev模式和node产物不需要压缩和混淆
    // ...
  },
  html: isNodeTarget // node产物不需要输出html文件
    ? undefined
    : {
        inject: true,
        template: './public/index.html',
        favicon: './public/favicon.png',
        title: 'API Meta',
        // 注入一些变量
        templateParameters: {
          headerInjects: template.header,
          bodyInjects: template.body,
          env: process.env.NODE_ENV,
        },
      },
  tools: {
    rspack: {
      resolve: {
        mainFields: isNodeTarget ? ['module', 'main'] : ['browser', 'module', 'main'], // 构建node产物忽略掉browser的入口
      },
      // ...
    },
  },
  // ...
});

import React from 'react';
import { Navigate, RouteObject } from 'react-router-dom';
import { Document } from './pages/document';
import { Layout } from '@lark-meta/components';
import { RPC_LIST_KEY } from '@lark-meta/utils';

export const routes: RouteObject[] = [
  {
    path: '/axe/document',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Navigate to={RPC_LIST_KEY} replace />, // 输入/axe/document重定向到/axe/document/rpcApiList
      },
      {
        path: '*',
        element: <Document />,
      },
    ],
  },
];

import React from 'react';
import { StaticRouter } from 'react-router-dom/server';
import { HTTPRequest } from '@gulux/gulux/lib/exports/application-http';
import { ConfigProvider as UDConfigProvider, FloatingUIPopperSidecar } from '@universe-design/react';
import zhCN from '@universe-design/react/es/shared/locales/zh-CN';
import type { Router, StaticHandlerContext } from '@remix-run/router';
import { GlobalProvider } from './components/provider';
import { CurrentUser } from '@lark-meta/types';
import { useRoutes } from 'react-router';
import { routes } from './routes';

interface AppProps {
  req: HTTPRequest;
  router: Router;
  context: StaticHandlerContext;
  profile?: CurrentUser;
}

export function App(props: AppProps) {
  const router = useRoutes(routes);
  const { context, req, profile } = props;

  return (
    <GlobalProvider req={req} profile={profile} path={req.path}>
      <UDConfigProvider locale={zhCN} PopperSidecar={FloatingUIPopperSidecar}>
        <StaticRouter location={req.path}>{router}</StaticRouter>
      </UDConfigProvider>
    </GlobalProvider>
  );
}

import React from 'react';
import { ConfigProvider as UDConfigProvider, FloatingUIPopperSidecar } from '@universe-design/react';
import zhCN from '@universe-design/react/es/shared/locales/zh-CN';
import { BrowserRouter, useRoutes } from 'react-router-dom';
import { routes } from './routes';
import { GlobalProvider } from './components/provider';

export function App() {
  const router = useRoutes(routes);

  return (
    <GlobalProvider profile={window.user} path={window.location.pathname}>
      <UDConfigProvider locale={zhCN} PopperSidecar={FloatingUIPopperSidecar}>
        <BrowserRouter>{router}</BrowserRouter>
      </UDConfigProvider>
    </GlobalProvider>
  );
}

export const routes: RouteObject[] = [
  {
    path: '/axe/document',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Navigate to={RPC_LIST_KEY} replace />, // 输入/axe/document重定向到/axe/document/rpcApiList
      },
      {
        path: '*',
        element: <Document />,
        /**
         * 路由渲染前会调用（服务端渲染完客户端不再调用），可以通过useLoaderData获取数据
         * @param args 包括request/params/context
         * - request: fetch request实例
         * - params: 路径参数
         * - context: 服务端渲染传递的上下文参数，通过requestContext透传
         * @returns
         */
        loader: async args => {
          try {
            const { request, params, context } = args;
            console.log('Route loader', request, params, context);

            const relativePath = params?.['*'];
            if (!relativePath) {
              return json({});
            }

            const data: LoaderData = {};
            // TODO: 获取数据逻辑

            console.log('Route loader data', data);
            return json(data);
          } catch (e) {
            console.error('Route loader error', e);
            return json({});
          }
        },
      },
    ],
  },
];

import React from 'react';
import { ConfigProvider as UDConfigProvider, FloatingUIPopperSidecar } from '@universe-design/react';
import zhCN from '@universe-design/react/es/shared/locales/zh-CN';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { routes } from './routes';
import { GlobalProvider } from './components/provider';

export function App() {
  const router = createBrowserRouter(routes);

  return (
    <GlobalProvider profile={window.user} path={window.location.pathname}>
      <UDConfigProvider locale={zhCN} PopperSidecar={FloatingUIPopperSidecar}>
        <RouterProvider router={router} />
      </UDConfigProvider>
    </GlobalProvider>
  );
}

import React from 'react';
import { StaticRouterProvider } from 'react-router-dom/server';
import { HTTPRequest } from '@gulux/gulux/lib/exports/application-http';
import { ConfigProvider as UDConfigProvider, FloatingUIPopperSidecar } from '@universe-design/react';
import zhCN from '@universe-design/react/es/shared/locales/zh-CN';
import type { Router, StaticHandlerContext } from '@remix-run/router';
import { GlobalProvider } from './components/provider';
import { CurrentUser } from '@lark-meta/types';

interface AppProps {
  req: HTTPRequest;
  router: Router;
  context: StaticHandlerContext;
  profile?: CurrentUser;
}

export function App(props: AppProps) {
  const { router, context, req, profile } = props;

  return (
    <GlobalProvider req={req} profile={profile} path={req.path}>
      <UDConfigProvider locale={zhCN} PopperSidecar={FloatingUIPopperSidecar}>
        <StaticRouterProvider router={router} context={context} />
      </UDConfigProvider>
    </GlobalProvider>
  );
}

export async function renderApp(
  publicCDNDomain: string,
  cdnPathPrefix: string,
  req: HTTPRequest,
  ogwDomain: string,
  profile?: CurrentUser,
): Promise<string> {
  // 动态注入publicPath
  globalThis.__webpack_public_path__ = `${publicCDNDomain}/${cdnPathPrefix}`;

  // 路由匹配
  const canSSR = matchPath({ path: '/document', caseSensitive: true, end: false }, req.path);
  if (!canSSR) {
    return '';
  }

  const handler = createStaticHandler(routes);
  const fetchRequest = createFetchRequest(req); // 将gulux的请求转化为fetch的请求，供staticHandler.query调用
  const context = (await handler.query(fetchRequest, {
    requestContext: { headers: req.headers ?? req.header, ogwDomain },
  })) as StaticHandlerContext;
  const router = createStaticRouter(handler.dataRoutes, context);

  const rootContent = renderToString(<App req={req} router={router} context={context} profile={profile} />);
  return rootContent;
}

export class APIDocStore {
  loading = false;

  detail: GetAPIDocumentResponse | null = null;

  constructor(detail?: GetAPIDocumentResponse) {
    if (detail) {
      this.detail = detail;
    }

    makeAutoObservable(this, { detail: observable.ref }, { autoBind: true });
  }

  getDocDetail = flow(function* (this: APIDocStore, fileUri: string, revisionId?: string) {
    try {
      this.loading = true;
      const data: GetAPIDocumentResponse | undefined = yield getDocDetail(fileUri, revisionId);

      if (data) {
        this.detail = data;
      }
    } catch (e) {
      console.error('Get doc detail error', e);
    } finally {
      this.loading = false;
    }
  });
}

import React, { useEffect, useMemo } from 'react';
import { useDocument } from '@/pages/document/provider';
import { useHome } from '../../provider';
import { observer } from 'mobx-react-lite';
import { APIDocStore } from './store';
import { RpcApiDocRender, RpcApiDocRenderType } from '@lark-meta/components';
import { getFile } from '@/request/document';

export const APIDoc = observer(() => {
  const { loaderData, store: documentStore } = useDocument();
  const { selectedId } = documentStore;
  const { detail: loaderDetail } = loaderData;
  const { hydrate, setHydrate } = useHome();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const store = useMemo(() => new APIDocStore(loaderDetail), []);
  const { detail, loading, getDocDetail } = store;

  useEffect(() => {
    if (hydrate) {
      // 服务端已经注水了，客户端不需要再发请求，前端路由切换再发请求
      setHydrate(false);
      return;
    }

    getDocDetail(selectedId);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedId]);

  return (
    <RpcApiDocRender
      loading={loading}
      detail={
        detail
          ? {
              fileUri: detail.id,
              revisionId: detail.revision_id,
              name: detail.name,
              apiScopes: detail.api_scopes,
              fieldScopes: detail.field_scopes,
              updateTime: detail.update_time,
              projectName: detail.project_name,
              version: detail.project_version,
              content: detail.content,
            }
          : undefined
      }
      type={RpcApiDocRenderType.DOC}
      getFile={getFile}
    />
  );
});

export function Layout() {
  const { profile, path, req } = useGlobalData();
  const defaultDomain = (function () {
    if (isNodeEnv) {
      return req?.host ? `https://${req.host}` : '';
    } else {
      return `https://${window.location.hostname}`;
    }
  })();
  const [selectedKeys, setSelectedKeys] = useState(() => getSelectedKeys(path));

  return (
    <></>
  )
}

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
import MyStyledComponent from './MyStyledComponent';

const app = express();

app.get('/', (req, res) => {
  const sheet = new ServerStyleSheet(); // 创建样式表
  
  try {
    // 使用 StyleSheetManager 将样式捕获到 sheet
    const html = ReactDOMServer.renderToString(
      <StyleSheetManager sheet={sheet.instance}>
        <MyStyledComponent />
      </StyleSheetManager>
    );
    
    // 获取所有通过 styled-components 生成的样式
    const styleTags = sheet.getStyleTags();
    
    // 生成最终的 HTML 响应，内嵌样式标签
    const responseBody = `
      <!DOCTYPE html>
      <html>
        <head>${styleTags}</head>
        <body>${html}</body>
      </html>
    `;
    
    res.send(responseBody);
  } catch (error) {
    console.error(error);
    res.status(500).send('Internal Server Error');
  } finally {
    sheet.seal();
  }
});

app.listen(3000);

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>
 
    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>

@Get('/*')
async index(@Req() req: HTTPRequest, @Query('revisionId') queryRevisionId?: string) {
  const { path } = req;

  // 获取动态配置
  const configs = await getConfigs(path);

  // TODO：判断路由是否需要ssr
  if (!canSSr(path)) {
    const html = await this.views.render('index.handlebars', {
      ...configs,
      rootContent: '',
    });

    return html;
  }

  // 获取scm构建的相关信息
  const { cdnPathPrefix, scmVersion } = getAppInfo();

  // 获取revisionId
  const revisionId = queryRevisionId || (await getRevisionId(path));

  // 拼接redis key
  const cacheKey = `ssr-${scmVersion}-${path}-${revisionId}`;

  // 优先从缓存中取值
  const cacheHtml = await this.redisClient.get(cacheKey);
  const rootContent = cacheHtml ?? (await renderApp(publicCDNDomain, cdnPathPrefix, req).rootContent);

  const html = await this.views.render('index.handlebars', {
    ...configs,
    rootContent,
  });

  return html;
}

loader: async (args) => {
  try {
    const data: LoaderData = {};
    
    // 获取数据逻辑
    return json(data);
  } catch (e) {
    console.error('Route loader error', e);
    return json({});
  }
},

@Get('/document*')
async document(@Req() req: HTTPRequest, @Res() res: HTTPResponse) {
  const { path } = req;
  if (path === '/document' || path === '/document/') {
    // 重定向到/axe/document/guide/rpcApiList
    res.redirect(`/axe/document/${RPC_LIST_KEY}`);
    return;
  }

  let { publicCDNDomain = '' } = this.configStore.bffConfig;
  const { user: userInfo } = this.userStore;
  const user = JSON.stringify(userInfo ?? {});

  if (isEnvDevelopment) {
    // 开发环境将publicCDNDomain设置为localhost
    publicCDNDomain = 'http://localhost:4000';
  }

  try {
    // 设置1000ms的超时时间
    const rootContent = (await timeout(this.ssr(req, publicCDNDomain), 1000)) ?? '';

    // 设置响应头x-ssr为1，标识ssr成功
    res.set('x-ssr', '1');

    const html = await this.views.render('doc.handlebars', {
      publicCDNDomain,
      user,
      rootContent,
      ssrError: false,
    });

    return html;
  } catch (e) {
    // 设置响应头x-ssr为0，标识ssr失败
    res.set('x-ssr', '0');

    if (e instanceof TimeoutError) {
      // ssr超时
      this.logger.error(`[view controller] ssr timeout. error=${e.message}, path=${path}`);
    } else {
      // ssr出错
      this.logger.error(`[view controller] ssr error. error=${e}, path=${path}`);
    }

    const html = await this.views.render('index.handlebars', {
      publicCDNDomain,
      user,
      rootContent: '',
      ssrError: true, // 将ssr失败的标记注入window中，降级为客户端渲染
    });

    return html;
  }
}

const root = document.getElementById('root');

if (process.env.DEV_NODE === 'csr' || window.__SSR_ERROR__) {
  // 开发环境和ssr出错都降级为csr
  ReactDOM.render(<App />, root);
} else {
  ReactDOM.hydrate(<App />, root);
}