import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
import fs from 'fs';

const renderer = async (templateFile, request, response) => {
    // 读取模板文件内容
    const template = fs.readFileSync(templateFile, 'utf8');
    // 获取react组件的渲染字符串
    const body = renderToString(<App />);
    // 替换模板中占位注释字符，完成渲染初始化
    const html = template.replace('<!-- root -->', body);

    response.send(html);
};

// 请注意这里需要导出renderer方法
export default renderer;

// stores/routes.ts
import { RouteItem } from 'utils/withSSR'; // 定义的路由配置项类型
import withLoadable from 'utils/withLoadable';
import Home from 'modules/Home';

/**
 * 按需加载组件
 *
 * withLoadable是tiger-new内置的异步组件方法，但是这是可选的；
 * 事实上只要异步组件具有一个静态方法 `loadComponent` 即可，这个用于在SSR端预加载组件。
 *
 * 注：'modules/About' 其实是个聚合导出，为了方便统一对这几个组件做按需加载: export { About, AboutUs, AboutCompany }
 */
const About = withLoadable(() => 'modules/About', 'About');
const AboutUs = withLoadable(() => 'modules/About', 'AboutUs');
const AboutCompany = withLoadable(() => 'modules/About', 'AboutCompany');

const routes: RouteItem[] = [
    {
        path: '/',
        exact: true,
        component: Home
    },
    {
        path: '/about',
        component: About,
        routes: [
            {
                path: '/about/us',
                component: AboutUs
            },
            {
                path: '/about/company',
                component: AboutCompany
            }
        ]
    }
];

export default routes;

// app/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import routes from 'stores/routes';

/**
 * CSR端也需要使用 react-router-config 的 renderRoutes 方法渲染路由
 */
ReactDOM[__SSR__ ? 'hydrate' : 'render'](
    <BrowserRouter>
        <div className="app">{renderRoutes(routes)}</div>
    </BrowserRouter>,
    document.getElementById('wrap')
);

// app/index.node.tsx
import fs from 'fs';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter, Route, StaticRouterContext } from 'react-router';
import { renderRoutes } from 'react-router-config';
import type { Request, Response } from 'express'; // 引入ts类型定义，js可以省略
import App from 'modules/App';
import routes from 'stores/routes';
import { prefetchRoutesInitialProps } from 'utils/withSSR';

/**
 * 拦截未捕获的的promise rejection异常，避免报错
 */
if (!global.__handledRejection__) {
    global.__handledRejection__ = true;

    process.on('unhandledRejection', () => {
        // @TODO 待查明具体的rejection来源，你可以在这里加入对异常的处理逻辑
    });
}

const renderer = async (templateFile: string, request: Request, response: Response) => {
    /**
     * 获取页面初始数据以及预加载异步组件
     */
    const initialProps = await prefetchRoutesInitialProps(routes, request.url, request, response, {
        // 如果有其它数据希望传递给getInitialProps方法，可以在这里指定。没有可以缺省该参数
    });
    /**
     * ctx为一个包含 initialProps 的对象，需要传递给StaticRouter的context属性
     * 这一点很重要，确保我们的页面组件可以拿到初始化的数据
     */
    const ctx: StaticRouterContext = {
        initialProps
    };

    let template = fs.readFileSync(templateFile, 'utf8');
    /**
     * SSR端需要使用StaticRouter
     * 并且需要使用 react-router-config 的 renderRoutes 方法渲染路由
     *
     * !!!!! 注意StaticRouter的context属性一定不能忘了哦
     */
    let body = renderToString(
        <StaticRouter location={request.url} context={ctx}>
            <div className="app">{renderRoutes(routes)}</div>
        </StaticRouter>
    );
    /**
     * 将页面的初始数据通过 __DATA__ 渲染到页面上，让 CSR 端的组件读取，以实现同构渲染
     */
    let html = template
        .replace('%ROOT%', body)
        .replace('%DATA%', `var __DATA__=${initialProps ? JSON.stringify(initialProps) : 'null'}`);

    /**
     * 处理页面重定向
     */
    if (ctx.url) {
        response.redirect(ctx.url);
    } else {
        response.send(html);
    }
};

export default renderer;

// app/modules/Home
import React from 'react';
import withSSR, { SSRProps } from 'utils/withSSR';

const Home: React.FC<
    SSRProps<{
        homeData: any;
    }>
> = props => {
    return <div className="home">{props.homeData}</div>;
};

export default withSSR(Home, async () => {
    const homeData = await fetch('/api/home');

    return {
        homeData
    };
});

type SSRProps<More> = {
    __error__: Error | undefined;
    __loading__: boolean;
    __getData__(extraProps？: {}): Promise<void>;
} & More;

interface SSRInitialParams extends Partial<Omit<RouteComponentProps, 'match'>> {
    match: RouteComponentProps<any>['match'];
    parentInitialProps: any;
    request?: Request;
    response?: Response;
}

function withSSR<SelfProps, More = {}>(
    WrappedComponent: React.ComponentType<SelfProps & SSRProps<More>>,
    getInitialProps: (props: SSRInitialParams) => Promise<More>
): React.ComponentType<Omit<SelfProps, keyof SSRProps<More>>>;

withSSR(MyComponent, () =>
    fetch('/data.json').then(resp => ({
        data: resp.toJSON()
    }))
);

/**
 * async/await语法，同上
 */
withSSR(MyComponent, async () => {
    const resp = await fetch('/data.json');
    return { data: resp.toJSON() };
});

/**
 * 动态 path 路由，数据需要根据路由参数获取
 */
withSSR(UserDetail, async ({ match }) => {
    const resp = await fetch(`/api/user/${match.params.userid}`);

    return { userData: resp.toJSON() };
});

/**
 * 嵌套子路由路由，子路由的数据请求依赖于父级路由的数据
 * 这里假设父级路由获取userList数据，该UserDetail组件获取并渲染userList的第一项对应的数据
 * 通过 parentInitialProps 可以拿到父级路由的初始props对象
 */
withSSR(UserDetail, async ({ parentInitialProps }) => {
    const resp = await fetch(`/api/user/${parentInitialProps.userList[0].id}`);

    return { userData: resp.toJSON() };
});

const MyComp: React.FC<
    SSRProps<{
        passToComponentPropName: string;
    }> &
        RouteComponentProps
> = props => {
    if (props.__loading__) {
        return 'loading...';
    }

    if (props.__error__) {
        return props.__error__.message;
    }

    return <div>{props.passToComponentPropName}</div>;
};

export default withSSR(MyComp, async () => ({
    passToComponentPropName: 'I am good!'
}));

function prefetchRoutesInitialProps(
    routes: RouteItem[],
    url: string,
    request: any,
    response: any,
    extendProps?: object
): Promise<{}>;

// About.tsx
const title = __('About Us'); // 错误，不可以在组件外直接通过全局 __() 调用语言包

function AboutPage() {
    return <div>{title}</div>;
}

// About.tsx
import withI18n, { I18nProps } from 'utils/i18n/withI18n';

function AboutPage(props: I18nProps) {
    const title = props.i18n.__('About Us');

    return <div>{title}</div>;
}

export default withI18n(About);

import type { Request, Response } from 'express'; // 引入ts类型定义，js可以省略
import cookick from 'cookick'; // cookick是utils/i18n模块使用的cookie解析模块
import { createI18n, context as i18nContext } from 'utils/i18n';

const renderer = async (templateFile: string, request: Request, response: Response) => {
    // 如果不是html页面请求，忽略；或这里执行其它逻辑处理
    if (!request.accepts().includes('text/html')) {
        return response.status(404).end();
    }

    /**
     * 设置cookick的解析来源
     */
    cookick.updateCookieSource(request.headers.cookie || '');

    /**
     * 创建一个新的适用于服务端的i18n对象
     * 注意，这里并没有指定createI18n的第三、四个参数，是因为设置cookie由浏览器端js完成即可
     */
    const i18n = createI18n(request.url, request.get('accept-language') || '');

    const initialProps = await prefetchRoutesInitialProps(routes, request.url, request, response, {
        // 将i18n对象作为getInitialProps的额外参数传递，这样就可以在getIntialProps中也可以访问i18n对象了
        i18n
    });
    const ctx: StaticRouterContext = {
        initialProps
    };

    let body = renderToString(
        <StaticRouter location={request.url} context={ctx}>
            {/* 这里需要通过i18nContext.Provider将i18n向下传递，供withI18n模块访问 */}
            <i18nContext.Provider value={i18n}>
                <App />
            </i18nContext.Provider>
        </StaticRouter>
    );

    let html = template
        .replace('%ROOT%', body)
        .replace('%DATA%', `var __DATA__=${initialProps ? JSON.stringify(initialProps) : 'null'}`);

    if (ctx.url) {
        response.redirect(ctx.url);
    } else {
        response.send(html);
    }
};