npm - ssr-plugin-react - Versions diffs - 6.2.13 → 6.2.16 - Mend

ssr-plugin-react 6.2.13 → 6.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/CHANGELOG.md +36 -0
package/README.md +305 -0
package/cjs/config/base.d.ts +2 -1
package/cjs/config/base.js +6 -5
package/cjs/config/client.d.ts +1 -0
package/cjs/config/client.js +11 -1
package/cjs/config/index.d.ts +1 -0
package/cjs/config/index.js +1 -0
package/cjs/config/server.d.ts +1 -0
package/cjs/config/server.js +1 -0
package/cjs/entry/client-entry.d.ts +1 -0
package/cjs/entry/client-entry.js +3 -6
package/cjs/entry/context.d.ts +1 -0
package/cjs/entry/context.js +1 -0
package/cjs/entry/create-context.d.ts +1 -0
package/cjs/entry/create-context.js +1 -0
package/cjs/entry/create-router.d.ts +1 -0
package/cjs/entry/create-router.js +1 -0
package/cjs/entry/server-entry.d.ts +1 -0
package/cjs/entry/server-entry.js +12 -23
package/cjs/index.d.ts +1 -0
package/cjs/index.js +1 -0
package/cjs/tools/vite.d.ts +1 -0
package/cjs/tools/vite.js +1 -0
package/cjs/tools/webpack.d.ts +1 -0
package/cjs/tools/webpack.js +1 -0
package/esm/config/base.d.ts +2 -1
package/esm/config/base.js +6 -5
package/esm/config/client.d.ts +1 -0
package/esm/config/client.js +11 -1
package/esm/config/index.d.ts +1 -0
package/esm/config/index.js +1 -0
package/esm/config/server.d.ts +1 -0
package/esm/config/server.js +1 -0
package/esm/entry/client-entry.d.ts +1 -0
package/esm/entry/client-entry.js +3 -6
package/esm/entry/context.d.ts +1 -0
package/esm/entry/context.js +1 -0
package/esm/entry/create-context.d.ts +1 -0
package/esm/entry/create-context.js +1 -0
package/esm/entry/create-router.d.ts +1 -0
package/esm/entry/create-router.js +1 -0
package/esm/entry/server-entry.d.ts +1 -0
package/esm/entry/server-entry.js +12 -23
package/esm/index.d.ts +1 -0
package/esm/index.js +1 -0
package/esm/tools/vite.d.ts +1 -0
package/esm/tools/vite.js +1 -0
package/esm/tools/webpack.d.ts +1 -0
package/esm/tools/webpack.js +1 -0
package/package.json +7 -8
package/src/config/base.ts +6 -6
package/src/config/client.ts +11 -1
package/src/entry/client-entry.tsx +2 -6
package/src/entry/server-entry.tsx +10 -22

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,39 @@
+## [6.2.16](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.15...plugin-react@6.2.16) (2022-05-04)
+## [6.2.15](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.14...plugin-react@6.2.15) (2022-04-27)
+### Bug Fixes
+* ci ([57e713f](https://github.com/zhangyuang/ssr/commit/57e713f1f96b4ceb893837c15c6032b23a0b1a4c))
+* whitList concat userconfig ([fdd971a](https://github.com/zhangyuang/ssr/commit/fdd971ab11aebc0f348d789e758183b877e791af))
+* whitList concat userconfig ([e2328f8](https://github.com/zhangyuang/ssr/commit/e2328f87f5cfc18c9a30867e4f6e18d0df5c1ba3))
+### Features
+* add ssr-serialize-javascript code optimize ([41bb14d](https://github.com/zhangyuang/ssr/commit/41bb14d31efd89d4a85d5220544d2f7a3883e1a3))
+* support props.ssrApp in vue3 ([8985037](https://github.com/zhangyuang/ssr/commit/898503753cbe69187d27f91c70dff3f4cd4a0b2a))
+## [6.2.14](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.13...plugin-react@6.2.14) (2022-04-20)
+### Bug Fixes
+* update preinstall ([2b4b869](https://github.com/zhangyuang/ssr/commit/2b4b869c28b83b414bef10260e5561bc3773cea9))
+### Features
+* optimize customescript ([f374760](https://github.com/zhangyuang/ssr/commit/f3747608d4684576875968394eca6315e2fa8dd1))
+* plugin-react add react-refresh, remove module.hot ([7bee211](https://github.com/zhangyuang/ssr/commit/7bee211ddfefaef688713f505756e1155320b844))
 ## [6.2.13](https://github.com/zhangyuang/ssr/compare/plugin-react@6.2.12...plugin-react@6.2.13) (2022-04-18)

package/README.md ADDED Viewed

@@ -0,0 +1,305 @@
+<div>
+简体中文 ｜ <a href="./README_EN.md">English</a>
+</div>
+<h1 align="center"> SSR </h1>
+<div align="center">
+  <img src="https://gw.alicdn.com/tfs/TB1ckATCGL7gK0jSZFBXXXZZpXa-540-540.jpg" width="300" />
+</div>
+<br />
+<div align="center">
+  <strong>A most advanced ssr framework on Earth that implemented serverless-side render specification for faas and traditional web server.</strong>
+</div>
+<br />
+<div align="center">
+<a href="https://github.com/zhangyuang/ssr/actions" target="_blank"><img src="https://github.com/zhangyuang/ssr/workflows/CI/badge.svg" alt="githubActions" />
+<a href="https://www.cypress.io/" target="_blank"><img src="https://img.shields.io/badge/cypress-dashboard-brightgreen.svg" alt="cypress" />
+<a href="https://npmcharts.com/compare/ssr" target="_blank"><img src="https://img.shields.io/npm/dm/ssr" alt="download" />
+<a href="https://github.com/zhangyuang/ssr" target="_blank"><img src="https://img.shields.io/badge/node-%3E=12-green.svg?color=4dc71f" alt="Node" ></a>
+<a href="https://github.com/zhangyuang/ssr" target="_blank"><img src="https://img.shields.io/github/stars/zhangyuang/ssr.svg?color=4dc71f" alt="Node" ></a>
+</div>
+<br />
+`ssr` 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看[文档](http://doc.ssr-fc.com/docs/features$ssr)
+此框架脱胎于 [egg-react-ssr](https://github.com/zhangyuang/egg-react-ssr) 项目和 `ssr` v4版本`（midway-faas + react ssr）`，在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 `Serverless` 方式部署或是以传统 `Node.js` 的应用形式部署，并且我们专注于提升 `Serverless` 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。
+在最新的版本中，同时支持 `React` 和 `Vue2/Vue3` 作为服务端渲染框架且开发工具侧我们同样支持了最流行的 `Vite` 来提升应用的启动速度和 HMR 速度，且提供一键以 `Serverless` 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 `ssr` 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 `ssr` 框架。
+阅读我们的 [官方文档](http://doc.ssr-fc.com/) 获得更加详细的了解。事实上文档本身便是用 `ssr` 框架开发并通过 `Serverless` 部署到阿里云服务
+![](https://res.wx.qq.com/op_res/B9tJE-lFR3gCif92sM4BeeqAcoJSZbJK-auM7MACgomrWm58C1moA3BfatZ5gS-tgZHYyk57e0JQRtgdcgho-g)
+## 什么情况下你应该选择 ssr 框架
+- 需要在 `Node.js` 与前端框架结合的场景使用，与其他纯前端的框架不同 `ssr` 框架是专为服务端渲染场景或者 `Node.js` 与前端结合的场景打造的框架
+- 需要一个开箱即用的服务端渲染能力，不需要手动去组合不同的前端框架与服务端框架之间的联系
+- 需要框架层面的渲染降级能力，在服务端渲染出错时自动降级到客户端渲染
+- 需要一个配置简单逻辑清晰的框架， `ssr` 框架的渲染逻辑和应用构建逻辑是同类型框架中最清晰的
+- 可能会改动技术栈，如从 `Vue2` 升级为 `Vue3`，从 `Vue3` 降级为 `Vue2` 或 `React/Vue` 互相切换
+- 需要在服务端渲染场景下开箱即用使用 `antd` `vant` 等流行 `ui` 库
+- 需要能够同时支持 `Webpack`, `Vite` 两种开发工具，以便同时得到快速的启动速度 `HMR` 速度以及稳定的生产环境代码
+- 需要在 `Vue3` 场景支持 `Script Setup` 以及 [pinia](https://pinia.vuejs.org/) 作为数据管理方案
+## 哪些应用在使用
+正在使用这个项目的公司(应用), 如果您正在使用但名单中没有列出来的话请提 [issue](https://github.com/zhangyuang/ssr/issues)，欢迎推广分享，我们将随时提供技术支持
+<table>
+<tr>
+<td align="center"><a target="_blank" href="http://youku.com/"><img src="https://img.alicdn.com/tfs/TB17DTuXkH0gK0jSZPiXXavapXa-680-133.svg" width="120"/><br />
+ <sub><b>优酷视频
+</b></td>
+<td align="center" style="width: 120px;"><a target="_blank" href="https://yulebao.alibaba.com/"><img src="https://gw.alicdn.com/tfs/TB1CmlIIFT7gK0jSZFpXXaTkpXa-190-46.png" width="120"/><br><sub><b>阿里影业娱乐宝
+</b></sub></a></td>
+<td align="center"><a href="https://www.niuniuda.com/mall" target="_blank"><img src="https://img.alicdn.com/tfs/TB1df_8pBr0gK0jSZFnXXbRRXXa-160-60.png" width="120" alt="牛牛搭"/><br />
+<a href="https://www.niuniuda.com/mall" target="_blank"><sub><b>牛牛搭
+</b></a></td>
+<td align="center"><a href="https://www.gszq.com/" target="_blank"><img src="https://www.gszq.com/static/media/icon-slogan.4d1c7974.png
+" width="120" alt="国盛证券"/><br />
+<a href="https://www.gszq.com/" target="_bvlank"><sub><b>国盛证券
+</b></a></td>
+<td align="center"><a href="https://m.isle.org.cn" target="_blank"><img src="https://res.wx.qq.com/op_res/qzBjcpT1AZDopDDkEJfj5gKFADotYHTgD33lz9xvZUIj7VJaIR_8HE4lfOxwaiYBgi4V2xXm0xLmAcdQxF4IrQ" width="120" alt="三易科技"/><br />
+<a href="https://m.isle.org.cn" target="_bvlank"><sub><b>三易科技
+</b></a></td>
+<td align="center"><a href="https://help.seewo.com/" target="_blank"><img src="https://img.alicdn.com/tfs/TB11Xo3q4v1gK0jSZFFXXb0sXXa-350-55.png" width="120" alt="cvte"/><br /><a href="https://help.seewo.com/" target="_blank"><sub><b>希沃帮助中心
+</b></a></td>
+<td align="center"><a href="https://wecard.qq.com/index/" target="_blank"><img src="https://img.alicdn.com/tfs/TB1pTZGrFT7gK0jSZFpXXaTkpXa-164-164.jpg" width="120" alt="腾讯微卡"/><br />
+<a href="https://wecard.qq.com/index/" target="_blank"><sub><b>腾讯微卡
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://www.habisummercamp.com/" target="_blank"><img src="https://res.wx.qq.com/op_res/XXUpF56bDue53vZadoCSPSnqKF3bZqPOQnqsPa_ngEARa0OUIW22pX7eKsftPb6pc5ny62cR_wXM4g5xJ7G3DQ
+" width="200px;margin: 20px 0" alt="Happy"/><br />
+<a href="https://www.habisummercamp.com/" target="_bvlank"><b>HappyPC
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://m.habisummercamp.com/" target="_blank"><img src="https://res.wx.qq.com/op_res/XXUpF56bDue53vZadoCSPSnqKF3bZqPOQnqsPa_ngEARa0OUIW22pX7eKsftPb6pc5ny62cR_wXM4g5xJ7G3DQ
+" width="200px;margin: 20px 0" alt="Happy"/><br />
+<a href="https://m.habisummercamp.com/" target="_bvlank"><b>HappyMobile
+</b></a></td>
+</tr>
+<tr>
+<td align="center"><a href="https://syzs.qq.com/" target="_blank"><img src="images/syzs.png" width="120" alt="腾讯手游助手"/><br />
+<a href="https://syzs.qq.com/" target="_bvlank"><sub><b>腾讯手游助手
+</b></a></td>
+<td align="center"><a href="https://kcmall.b2bwings.com/home" target="_blank"><img src="https://img.alicdn.com/imgextra/i1/O1CN01P7CAop1h7qQ3noefa_!!6000000004231-2-tps-211-79.png" width="120" alt="国家现代农业科技创新中心"/><br />
+<a href="https://kcmall.b2bwings.com/home" target="_bvlank"><sub><b>国家现代农业科技创新中心
+</b></a></td>
+<td align="center"><a target="_blank" href="http://ssr-fc.com/"><img src="https://img.alicdn.com/tfs/TB13DzOjXP7gK0jSZFjXXc5aXXa-212-48.png" width="120"/><br><sub><b>部署于阿里云示例应用
+</b></sub></a></td>
+<td align="center"><a target="_blank" href="http://tx.ssr-fc.com/"><img src="http://s0.60logo.com/uploads/items/images/soft/180126/tengxunyun.svg" width="120"/><br><sub><b>部署于腾讯云示例应用
+</b></sub></a></td>
+<td align="center"><a href="https://www.100.com/" target="_blank"><img src="https://oss.bs2dl.100.com/hippo/config/f13ee98cfca7ce13888752c1261081b44bd356fd.png" width="120" alt="100教育"/><br />
+<a href="https://www.100.com/" target="_bvlank"><sub><b>100教育
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://m.film.qq.com/x/tva-vip-center/" target="_blank"><img src="https://res.wx.qq.com/op_res/x7sWI9AfUK1QwH0EDhKp4e_bGWxYOQ_1RlZqBFy9JntJzaE4aRzNhVgmxLNloAFpSQ-mBr9X9pux3QlV9QHHvQ" width="200px;margin: 20px 0" alt="腾讯视频"/><br />
+<a href="https://m.film.qq.com/x/tva-vip-center/" target="_bvlank"><b>腾讯视频
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://blog.dreamer2q.wang/" target="_blank"><img src="https://res.wx.qq.com/op_res/MxxGgjPFRiTgjiReUefs2aMce-SgNvxxTB9U87YYhcOu6KPw9er7r2Lc0ne-b90nFstTUpc8REDwpxfUreKV1g" width="200px;margin: 20px 0" alt="Dream2qBlog"/><br />
+<a href="https://blog.dreamer2q.wang/" target="_bvlank"><b>个人博客
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://jiawu.dewu.com" target="_blank"><img src="https://cdn.poizon.com/node-common/31116a45953ad8b468c6c832036aac88.png" width="200px;margin: 20px 0" alt="Dream2qBlog"/><br />
+<a href="https://jiawu.dewu.com" target="_bvlank"><b>得物
+</b></a></td>
+<td align="center"><a href="https://www.myweimai.com/#sectionOne" target="_blank"><img src="https://img.alicdn.com/tfs/TB16i3VrQT2gK0jSZPcXXcKkpXa-400-400.jpg" width="120" alt="微脉"/><br />
+<a href="https://www.myweimai.com/#sectionOne" target="_bvlank"><sub><b>微脉
+</b></a></td>
+</tr>
+<tr>
+<td align="center"><a target="_blank" href="https://campaign.vmate.com/vrbollywood"><img src="https://img.alicdn.com/tfs/TB17p6Vhbj1gK0jSZFOXXc7GpXa-512-512.png" width="120" alt="vmate 积分商城"/><br />
+  <a target="_blank" href="https://job.alibaba.com/zhaopin/position_detail.htm?trace=qrcode_share&positionCode=GP524819"><sub><b>Vmate短视频
+</b></a></td>
+<td align="center"><a target="_blank" href="https://enjoysales.paat.com/"><img src="https://img.alicdn.com/tfs/TB1Ma0BiEY1gK0jSZFMXXaWcVXa-836-836.png" width="120" alt="火炽星原CRM"/><br />
+<a target="_blank" href="https://enjoysales.paat.com/"><sub><b>火炽星原CRM
+</b></a></td>
+<td align="center" style="height: 100px"><a href="https://www.paixin.com/" target="_blank"><img src="https://www.paixin.com/favicon.ico" width="200px;margin: 20px 0" alt="Happy"/><br />
+<a href="https://www.paixin.com/" target="_bvlank"><b>拍信创意
+</b></a></td>
+<td align="center"><a href="https://www.66tools.com/" target="_blank"><img src="https://cdn.66tools.com/extension/chrome_qrcode_avatar.png" width="120" alt="极速二维码"/><br />
+<a href="https://www.66tools.com/" target="_bvlank"><sub><b>极速二维码
+</b></a></td>
+</tr>
+</table>
+## Features
+- 🌱　极易定制：前端支持 React/Vue2/Vue3 等现代Web框架；
+- 🚀　开箱即用：内置 10+ 脚手架配套扩展，如 [Pinia](https://pinia.vuejs.org/introduction.html#basic-example)、[antd](https://ant.design/components/overview-cn/)、[vant](https://github.com/youzan/vant)、TypeScript、Hooks等；
+- 🧲　插件驱动：基于插件架构，用户更加专注于业务逻辑；
+- 💯　Serverless优先：一键发布到各种Serverless平台，也支持传统Web Server，比如Egg、Midway、Nest等。
+- 🛡　高可用场景，可无缝从SSR降级到CSR，最佳容灾方案。
+- 😄　功能丰富，构建工具支持 Webpack/Vite，全新的 `Vue3 Script Setup` 支持
+## 已实现的功能
+🚀 表示已经实现的功能
+| 里程碑                                                                 | 状态 |
+| ---------------------------------------------------------------------- | ---- |
+| 支持任意服务端框架与任意前端框架的组合使用。(Serverless/Midway/NestJS) + (React/Vue2/Vue3)             | 🚀   |
+| 最丝滑的 [vite](https://vite-design.surge.sh/) [支持](http://doc.ssr-fc.com/docs/features$vite) |  🚀    |
+| 最小而美的实现服务端渲染功能                           | 🚀   |
+| 针对Serverless 场景对代码包的大小的严格限制，将生产环境的代码包大小做到极致            | 🚀   |
+| 同时支持约定式前端路由和声明式前端路由                            | 🚀   |
+| 摒弃传统模版引擎，所有页面元素统一使用前端组件作为 DSL          | 🚀   |
+| 同时支持三种渲染模式，提供服务端渲染一键降级为客户端渲染的能力                           | 🚀   |
+| 统一不同框架服务端客户端的数据获取方式，做到高度复用                                 | 🚀   |
+| 类型友好，全面拥抱 TS                                | 🚀   |
+| 支持无缝接入 [antd](https://github.com/ant-design/ant-design) [vant](https://vant-contrib.gitee.io/vant/#/) 无需修改任何配置                             | 🚀   |
+| 支持使用 less 作为 css 预处理器                                                | 🚀   |
+| 微前端场景下无缝[使用](http://doc.ssr-fc.com/docs/features$faq#%E4%B8%8E%20micro-app%20%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8)              | 🚀   |
+| React Hooks 实现极简的[数据管理](http://doc.ssr-fc.com/docs/features$communication#React%20%E5%9C%BA%E6%99%AF)方案，摒弃传统的 redux/dva 等数据管理方案                         |    🚀  |
+| Vue3 场景提供 [Pinia](https://pinia.vuejs.org/introduction.html#basic-example) 以及 [Provide/Inject](http://doc.ssr-fc.com/docs/features$communication#Vue%20%E5%9C%BA%E6%99%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88) 代替 `Vuex` 进行跨组件通信                     |    🚀  |
+| 支持在阿里云 [云平台](https://zhuanlan.zhihu.com/p/139210473)创建使用          | 🚀     |
+| ssr deploy 一键部署到[阿里云](https://www.aliyun.com/)平台           | 🚀   |
+| ssr deploy --tencent 无需修改任何配置一键部署到[腾讯云](https://cloud.tencent.com/)平台                                   | 🚀                                |
+## 方案对比
+为什么要选择 `ssr` 框架以及与同类型框架的方案对比请查看[文档](http://doc.ssr-fc.com/docs/why)
+## 快速开始
+我们提供了 [create-ssr-app](https://github.com/zhangyuang/create-ssr-app) 脚手架来让用户可以迅速的创建不同类型的应用。
+目前官方提供了以下类型的模版给开发者直接使用。用户可根据自己的实际技术栈选择不同的模版进行开发。
+虽然技术栈不同但开发思想是一致的，在任何技术栈的组合中我们的开发命令, 构建命令以及渲染原理都是完全一致的
+注意: 在 `Midway.js` `Nest.js` 场景下我们都已实现了一键部署到 `Serverless` 平台的能力。但底层实现略有差异。更加详细的介绍可以阅读 [Serverless](http://doc.ssr-fc.com/docs/features$serverless) 章节。如需要大量使用 `Serverless` 平台提供的能力，我们建议创建 `Midway.js` 类型的应用。强烈建议阅读我们的 [官方文档](http://doc.ssr-fc.com/) 来获得更加详细的了解
+- [nestjs-react-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/nestjs-react-ssr)
+- [nestjs-vue-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/nestjs-vue-ssr)
+- [nestjs-vue3-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/nestjs-vue3-ssr)
+- [nestjs-vue3-ssr-pinia](https://github.com/zhangyuang/nestjs-vue3-ssr-pinia)
+- [midway-react-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/midway-react-ssr)
+- [midway-vue-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/midway-vue-ssr)
+- [midway-vue3-ssr](https://github.com/zhangyuang/ssr/tree/dev/example/midway-vue3-ssr)
+开发者可根据实际技术栈需要创建不同类型的应用快速开始
+### 创建项目
+通过 `npm init` 命令我们可以创建上述的任意模版
+```bash
+$ npm init ssr-app my-ssr-project
+$ cd my-ssr-project
+$ yarn # 建议使用 yarn, 也可以 npm install
+$ yarn start
+$ open http://localhost:3000 # 访问应用
+$ yarn build # 资源构建，等价于 npx ssr build
+$ yarn start:vite # 以 vite 模式启动，等价于 npx ssr start --vite
+```
+![](images/start-vite3.gif)
+## 线上案例
+通过访问以下链接来预览该框架通过 Serverless 一键部署到阿里云/腾讯云服务的应用详情。
+通过使用 queryParams `csr=true` 来让 SSR 服务端渲染模式一键降级为 CSR 客户端渲染模式，也可以通过 `config.js` 来进行配置。
+- http://ssr-fc.com/ 部署到阿里云的 React SSR 应用
+- http://ssr-fc.com?csr=true 部署到阿里云的 React SSR 应用, 以 CSR 模式访问
+- http://tx.ssr-fc.com 部署到腾讯云的 React SSR 应用
+- http://tx.ssr-fc.com?csr=true 部署到腾讯云的 React SSR 应用, 以 CSR 模式访问
+- http://vue.ssr-fc.com 部署到阿里云的 Vue SSR 应用
+- http://vue3.ssr-fc.com 部署到阿里云的 Vue3 SSR 应用
+- http://vue.ssr-fc.com?csr=true 部署到阿里云的 Vue SSR 应用, 以 CSR 模式访问
+- http://vue3.ssr-fc.com?csr=true 部署到阿里云的 Vue3 SSR 应用, 以 CSR 模式访问
+## 生态系统
+| Project | Status | Description |
+|---------|--------|-------------|
+| [ssr]          | [![ssr-status]][ssr] | cli for ssr framework |
+| [ssr-core-vue]          | [![ssr-core-vue-status]][ssr-core-vue] | core render for vue |
+| [ssr-core-react]          | [![ssr-core-react-status]][ssr-core-react] | core render for react |
+| [ssr-plugin-midway]          | [![ssr-plugin-midway-status]][ssr-plugin-midway] | provide start and build fetature by [midway@2.0](https://midwayjs.org/) |
+| [ssr-plugin-nestjs]          | [![ssr-plugin-nestjs-status]][ssr-plugin-nestjs] | provide start and build feature by [NestJS](https://docs.nestjs.com/) |
+| [ssr-plugin-react]          | [![ssr-plugin-react-status]][ssr-plugin-react] | develop react application only be used in development |
+| [ssr-plugin-vue]          | [![ssr-plugin-vue-status]][ssr-plugin-vue] | develop vue2 application only be used in development |
+| [ssr-plugin-vue3]          | [![ssr-plugin-vue3-status]][ssr-plugin-vue3] | develop vue3 application only be used in development |
+| [ssr-server-utils]          | [![ssr-server-utils-status]][ssr-server-utils] | server utils in Node.js environment |
+| [ssr-client-utils]          | [![ssr-client-utils-status]][ssr-client-utils] | client utils in browser environment |
+| [ssr-hoc-react]          | [![ssr-hoc-react-status]][ssr-hoc-react] | provide hoc component for react |
+| [ssr-hoc-vue3]          | [![ssr-hoc-vue3-status]][ssr-hoc-vue3] | provide hoc component for vue3 |
+| [ssr-types]          | [![ssr-types-status]][ssr-types] | provide common types |
+| [ssr-types-react]          | [![ssr-types-react-status]][ssr-types-react] | provide react scene types |
+| [ssr-webpack]          | [![ssr-webpack-status]][ssr-webpack] | start local server and build production bundle by webpack |
+[ssr-status]: https://img.shields.io/npm/v/ssr.svg
+[ssr-client-utils-status]: https://img.shields.io/npm/v/ssr-client-utils.svg
+[ssr-core-react-status]: https://img.shields.io/npm/v/ssr-core-react.svg
+[ssr-core-vue-status]: https://img.shields.io/npm/v/ssr-core-vue.svg
+[ssr-hoc-react-status]: https://img.shields.io/npm/v/ssr-hoc-react.svg
+[ssr-hoc-vue3-status]: https://img.shields.io/npm/v/ssr-hoc-vue3.svg
+[ssr-plugin-midway-status]: https://img.shields.io/npm/v/ssr-plugin-midway.svg
+[ssr-plugin-nestjs-status]: https://img.shields.io/npm/v/ssr-plugin-nestjs.svg
+[ssr-plugin-react-status]: https://img.shields.io/npm/v/ssr-plugin-react.svg
+[ssr-plugin-vue-status]: https://img.shields.io/npm/v/ssr-plugin-vue.svg
+[ssr-plugin-vue3-status]: https://img.shields.io/npm/v/ssr-plugin-vue3.svg
+[ssr-server-utils-status]: https://img.shields.io/npm/v/ssr-server-utils.svg
+[ssr-types-status]: https://img.shields.io/npm/v/ssr-types.svg
+[ssr-types-react-status]: https://img.shields.io/npm/v/ssr-types-react.svg
+[ssr-webpack-status]: https://img.shields.io/npm/v/ssr-webpack.svg
+[ssr]: https://github.com/zhangyuang/ssr/tree/dev/packages/cli
+[ssr-client-utils]: https://github.com/zhangyuang/ssr/tree/dev/packages/client-utils
+[ssr-core-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/core-react
+[ssr-core-vue]: https://github.com/zhangyuang/ssr/tree/dev/packages/core-vue
+[ssr-hoc-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/hoc-react
+[ssr-hoc-vue3]: https://github.com/zhangyuang/ssr/tree/dev/packages/hoc-vue3
+[ssr-plugin-midway]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-midway
+[ssr-plugin-nestjs]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-nestjs
+[ssr-plugin-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-react
+[ssr-plugin-vue]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-vue
+[ssr-plugin-vue3]: https://github.com/zhangyuang/ssr/tree/dev/packages/plugin-vue3
+[ssr-server-utils]: https://github.com/zhangyuang/ssr/tree/dev/packages/server-utils
+[ssr-types]: https://github.com/zhangyuang/ssr/tree/dev/packages/types
+[ssr-types-react]: https://github.com/zhangyuang/ssr/tree/dev/packages/types-react
+[ssr-webpack]: https://github.com/zhangyuang/ssr/tree/dev/packages/webpack
+## CONTRIBUTING
+如果你想为本应用贡献代码，请阅读[贡献文档](./CONTRIBUTING.md)，我们为你准备了丰富的脚本用于 bootstrap
+## License
+[MIT](LICENSE)
+## 答疑群
+虽然我们已经尽力检查了一遍应用，但仍有可能有疏漏的地方，如果你在使用过程中发现任何问题或者建议，欢迎提[issue](https://github.com/zhangyuang/ssr/issues)或者[PR](https://github.com/zhangyuang/ssr/pulls)
+`注: 由于微信交流群人数限制，进群请添加私人二维码并备注进入 ssr 交流群，由于是私人微信，拉群后将会自行删除好友，敬请谅解。我们更加鼓励通过 issue 和 discussion 来交流问题`
+<div style="display:flex">
+<!-- <img src="https://res.wx.qq.com/op_res/7F1t4Z8yCHWilehbcFGjAj0yVn0URMiWBGVJa-TVu_eqw5IwUXA2kPYBnfX6YRHy0FVBB-yC6l0IEL02QTJkLg" width="300"> -->
+<img src="https://res.wx.qq.com/op_res/Nv12X2und927FEOvJ5iflzX-WBW07GSC22kumTCiShZnudKpG0jMuRs70ecHQb3Hy1QjjaASNzyOuMgHr43Wpw" width="300">
+</div>
+## 代码行数
+```bash
+$ cloc packages --include-ext=ts
+     984 text files.
+     668 unique files.
+     823 files ignored.
+github.com/AlDanial/cloc v 1.90  T=0.57 s (284.6 files/s, 10042.8 lines/s)
+-------------------------------------------------------------------------------
+Language                     files          blank        comment           code
+-------------------------------------------------------------------------------
+TypeScript                     161            480            197           5004
+-------------------------------------------------------------------------------
+SUM:                           161            480            197           5004
+-------------------------------------------------------------------------------
+```
+## 前端开发手册
+[如何打造舒适高效的前端开发环境](http://fe.ssr-fc.com/)
+## 项目 Star 数增长趋势
+[![Stargazers over time](https://starchart.cc/zhangyuang/ssr.svg)](https://starchart.cc/zhangyuang/ssr)

package/cjs/config/base.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import * as WebpackChain from 'webpack-chain';
-declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => IConfig;
+declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => import("ssr-types-react").IConfig;
 export { getBaseConfig };
+//# sourceMappingURL=base.d.ts.map

package/cjs/config/base.js CHANGED Viewed

@@ -7,9 +7,9 @@ const webpack = require("webpack");
 const MiniCssExtractPlugin = require((0, ssr_server_utils_1.loadModuleFromFramework)('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = (0, ssr_server_utils_1.loadConfig)();
+    const { babelOptions, isDev } = (0, ssr_server_utils_1.loadConfig)();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -41,7 +41,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -98,8 +98,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     (0, ssr_server_utils_1.setStyle)(chain, /\.css$/, {
         rule: 'css',
         isServer,
@@ -138,3 +138,4 @@ const getBaseConfig = (chain, isServer) => {
     return config;
 };
 exports.getBaseConfig = getBaseConfig;
+//# sourceMappingURL=base.js.map

package/cjs/config/client.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@
 import * as WebpackChain from 'webpack-chain';
 declare const getClientWebpack: (chain: WebpackChain) => import("webpack").Configuration;
 export { getClientWebpack };
+//# sourceMappingURL=client.d.ts.map

package/cjs/config/client.js CHANGED Viewed

@@ -8,11 +8,12 @@ const base_1 = require("./base");
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = ssr_server_utils_1.loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = (0, ssr_server_utils_1.loadConfig)();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = (0, ssr_server_utils_1.loadConfig)();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = (0, ssr_server_utils_1.getOutputPublicPath)();
     (0, base_1.getBaseConfig)(chain, false);
@@ -89,6 +90,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {
@@ -105,3 +114,4 @@ const getClientWebpack = (chain) => {
     return chain.toConfig();
 };
 exports.getClientWebpack = getClientWebpack;
+//# sourceMappingURL=client.js.map

package/cjs/config/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.d.ts.map

package/cjs/config/index.js CHANGED Viewed

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./client"), exports);
 __exportStar(require("./server"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/config/server.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import * as WebpackChain from 'webpack-chain';
 import * as webpack from 'webpack';
 declare const getServerWebpack: (chain: WebpackChain) => webpack.Configuration;
 export { getServerWebpack };
+//# sourceMappingURL=server.d.ts.map

package/cjs/config/server.js CHANGED Viewed

@@ -35,3 +35,4 @@ const getServerWebpack = (chain) => {
     return chain.toConfig();
 };
 exports.getServerWebpack = getServerWebpack;
+//# sourceMappingURL=server.js.map

package/cjs/entry/client-entry.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 declare const clientRender: () => Promise<void>;
 export { clientRender };
+//# sourceMappingURL=client-entry.d.ts.map

package/cjs/entry/client-entry.js CHANGED Viewed

@@ -8,14 +8,13 @@ const ssr_client_utils_1 = require("ssr-client-utils");
 const ssr_hoc_react_1 = require("ssr-hoc-react");
 const create_router_1 = require("./create-router");
 const context_1 = require("./context");
-const { FeRoutes, layoutFetch, App, PrefixRouterBase } = create_router_1.Routes;
+const { FeRoutes, layoutFetch, App } = create_router_1.Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
     // 客户端渲染||hydrate
-    const baseName = (_b = (_a = (window.microApp && window.clientPrefix)) !== null && _a !== void 0 ? _a : window.prefix) !== null && _b !== void 0 ? _b : PrefixRouterBase;
+    const baseName = window.microApp ? window.clientPrefix : window.prefix;
     const routes = await (0, ssr_client_utils_1.preloadComponent)(FeRoutes, baseName);
     ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](React.createElement(react_router_dom_1.BrowserRouter, { basename: baseName },
         React.createElement(context_1.AppContext, null,
@@ -30,9 +29,6 @@ const clientRender = async () => {
                         const WrappedComponent = (0, ssr_hoc_react_1.wrapComponent)(component);
                         return (React.createElement(react_router_dom_1.Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 exports.clientRender = clientRender;
 if (!window.__disableClientRender__) {
@@ -40,3 +36,4 @@ if (!window.__disableClientRender__) {
     // 可用于微前端场景下自定义什么时候进行组件渲染的逻辑调用
     clientRender();
 }
+//# sourceMappingURL=client-entry.js.map

package/cjs/entry/context.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IProps } from 'ssr-types-react';
 export declare function AppContext(props: IProps): JSX.Element;
+//# sourceMappingURL=context.d.ts.map

package/cjs/entry/context.js CHANGED Viewed

@@ -29,3 +29,4 @@ function AppContext(props) {
     return (React.createElement(create_context_1.STORE_CONTEXT.Provider, { value: { state, dispatch } }, props.children));
 }
 exports.AppContext = AppContext;
+//# sourceMappingURL=context.js.map

package/cjs/entry/create-context.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import { Context } from 'react';
 import { IContext } from 'ssr-types-react';
 declare let STORE_CONTEXT: Context<IContext>;
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.d.ts.map

package/cjs/entry/create-context.js CHANGED Viewed

@@ -17,3 +17,4 @@ else {
         state: {}
     });
 }
+//# sourceMappingURL=create-context.js.map

package/cjs/entry/create-router.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { ReactRoutesType } from 'ssr-types-react';
 declare const Routes: ReactRoutesType;
 export { Routes };
+//# sourceMappingURL=create-router.d.ts.map

package/cjs/entry/create-router.js CHANGED Viewed

@@ -24,3 +24,4 @@ if (ManualRoutesWithType.FeRoutes) {
     });
     Routes.FeRoutes = combineRoutes;
 }
+//# sourceMappingURL=create-router.js.map

package/cjs/entry/server-entry.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { ISSRContext, IConfig } from 'ssr-types-react';
 declare const serverRender: (ctx: ISSRContext, config: IConfig) => Promise<React.ReactElement>;
 export { serverRender };
+//# sourceMappingURL=server-entry.d.ts.map

package/cjs/entry/server-entry.js CHANGED Viewed

@@ -4,23 +4,15 @@ exports.serverRender = void 0;
 const React = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const ssr_server_utils_1 = require("ssr-server-utils");
-// @ts-expect-error
-const serializeWrap = require("serialize-javascript");
+const ssr_serialize_javascript_1 = require("ssr-serialize-javascript");
 // @ts-expect-error
 const create_context_1 = require("_build/create-context");
-// @ts-expect-error
-const index_tsx_1 = require("@/components/layout/index.tsx");
 const create_router_1 = require("./create-router");
-const { FeRoutes, layoutFetch, PrefixRouterBase, state } = create_router_1.Routes;
-const serialize = serializeWrap.default || serializeWrap;
+const { FeRoutes, layoutFetch, state, Layout } = create_router_1.Routes;
 const serverRender = async (ctx, config) => {
     var _a;
     const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
-    let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
-    const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
-    if (base) {
-        path = (0, ssr_server_utils_1.normalizePath)(path, base);
-    }
+    const path = (0, ssr_server_utils_1.normalizePath)(ctx.request.path, prefix);
     const routeItem = (0, ssr_server_utils_1.findRoute)(FeRoutes, path);
     if (!routeItem) {
         throw new Error(`
@@ -36,11 +28,7 @@ const serverRender = async (ctx, config) => {
     if (isVite && isDev) {
         injectCss.push(React.createElement("script", { src: "/@vite/client", type: "module", key: "vite-client" }));
         injectCss.push(React.createElement("script", { key: "vite-react-refresh", type: "module", dangerouslySetInnerHTML: {
-                __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+                __html: ssr_server_utils_1.reactRefreshFragment
             } }));
     }
     else {
@@ -57,11 +45,11 @@ const serverRender = async (ctx, config) => {
             } }));
     }
     const injectScript = [
-        isVite && React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
-                __html: 'window.__USE_VITE__=true'
-            } }),
-        (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...(isVite ? [React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
+                    __html: 'window.__USE_VITE__=true'
+                } })] : []),
+        ...((isVite && isDev) ? [React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" })] : []),
+        ...dynamicJsOrder.map(js => manifest[js]).filter(item => !!item).map(item => React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
@@ -90,11 +78,12 @@ const serverRender = async (ctx, config) => {
     }
     const combineData = isCsr ? null : Object.assign(state !== null && state !== void 0 ? state : {}, layoutFetchData !== null && layoutFetchData !== void 0 ? layoutFetchData : {}, fetchData !== null && fetchData !== void 0 ? fetchData : {});
     const injectState = isCsr ? null : React.createElement("script", { dangerouslySetInnerHTML: {
-            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; ${base && `window.prefix="${base}"`};${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
+            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${(0, ssr_serialize_javascript_1.serialize)(combineData)}; window.prefix="${prefix}";${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
         } });
     return (React.createElement(react_router_dom_1.StaticRouter, { location: ctx.request.url },
         React.createElement(create_context_1.STORE_CONTEXT.Provider, { value: { state: combineData } },
-            React.createElement(index_tsx_1.default, { ctx: ctx, config: config, staticList: staticList, injectState: injectState },
+            React.createElement(Layout, { ctx: ctx, config: config, staticList: staticList, injectState: injectState },
                 React.createElement(Component, null)))));
 };
 exports.serverRender = serverRender;
+//# sourceMappingURL=server-entry.js.map

package/cjs/index.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export declare function clientPlugin(): {
     build: () => Promise<void>;
 };
 export * from './tools/vite';
+//# sourceMappingURL=index.d.ts.map

package/cjs/index.js CHANGED Viewed

@@ -44,3 +44,4 @@ function clientPlugin() {
 }
 exports.clientPlugin = clientPlugin;
 __exportStar(require("./tools/vite"), exports);
+//# sourceMappingURL=index.js.map

package/cjs/tools/vite.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ declare const clientConfig: UserConfig;
 declare const viteStart: () => Promise<void>;
 declare const viteBuild: () => Promise<void>;
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.d.ts.map

package/cjs/tools/vite.js CHANGED Viewed

@@ -97,3 +97,4 @@ const viteBuild = async () => {
     await (0, vite_1.build)({ ...serverConfig, mode: 'production' });
 };
 exports.viteBuild = viteBuild;
+//# sourceMappingURL=vite.js.map

package/cjs/tools/webpack.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export declare const webpackStart: () => Promise<void>;
 export declare const webpackBuild: () => Promise<void>;
+//# sourceMappingURL=webpack.d.ts.map

package/cjs/tools/webpack.js CHANGED Viewed

@@ -20,3 +20,4 @@ const webpackBuild = async () => {
     await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
 };
 exports.webpackBuild = webpackBuild;
+//# sourceMappingURL=webpack.js.map

package/esm/config/base.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import * as WebpackChain from 'webpack-chain';
-declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => IConfig;
+declare const getBaseConfig: (chain: WebpackChain, isServer: boolean) => import("ssr-types-react").IConfig;
 export { getBaseConfig };
+//# sourceMappingURL=base.d.ts.map

package/esm/config/base.js CHANGED Viewed

@@ -4,9 +4,9 @@ import * as webpack from 'webpack';
 const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-plugin'));
 const WebpackBar = require('webpackbar');
 const loadModule = loadModuleFromFramework;
-const addBabelLoader = (chain, envOptions) => {
+const addBabelLoader = (chain, envOptions, isServer) => {
     var _a, _b;
-    const { babelOptions } = loadConfig();
+    const { babelOptions, isDev } = loadConfig();
     chain.use('babel-loader')
         .loader(loadModule('babel-loader'))
         .options({
@@ -38,7 +38,7 @@ const addBabelLoader = (chain, envOptions) => {
             [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
             [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
             ...(_b = babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) !== null && _b !== void 0 ? _b : []
-        ]
+        ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
         .end();
 };
@@ -95,8 +95,8 @@ const getBaseConfig = (chain, isServer) => {
     else {
         babelForExtraModule = module.end().exclude.add(/core-js/).end();
     }
-    addBabelLoader(babelModule, envOptions);
-    addBabelLoader(babelForExtraModule, envOptions);
+    addBabelLoader(babelModule, envOptions, isServer);
+    addBabelLoader(babelForExtraModule, envOptions, isServer);
     setStyle(chain, /\.css$/, {
         rule: 'css',
         isServer,
@@ -135,3 +135,4 @@ const getBaseConfig = (chain, isServer) => {
     return config;
 };
 export { getBaseConfig };
+//# sourceMappingURL=base.js.map

package/esm/config/client.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@
 import * as WebpackChain from 'webpack-chain';
 declare const getClientWebpack: (chain: WebpackChain) => import("webpack").Configuration;
 export { getClientWebpack };
+//# sourceMappingURL=client.d.ts.map

package/esm/config/client.js CHANGED Viewed

@@ -5,11 +5,12 @@ import { getBaseConfig } from './base';
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const safePostCssParser = require('postcss-safe-parser');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS);
 const loadModule = loadModuleFromFramework;
 let asyncChunkMap = {};
 const getClientWebpack = (chain) => {
-    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig();
+    const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig();
     const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP);
     const publicPath = getOutputPublicPath();
     getBaseConfig(chain, false);
@@ -86,6 +87,14 @@ const getClientWebpack = (chain) => {
     chain.when(generateAnalysis, chain => {
         chain.plugin('analyze').use(BundleAnalyzerPlugin);
     });
+    chain.when(isDev, chain => {
+        chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+            overlay: {
+                sockHost: host,
+                sockPort: fePort
+            }
+        }));
+    });
     chain.plugin('WriteAsyncManifest').use(class WriteAsyncChunkManifest {
         apply(compiler) {
             compiler.hooks.watchRun.tap('thisCompilation', async () => {
@@ -102,3 +111,4 @@ const getClientWebpack = (chain) => {
     return chain.toConfig();
 };
 export { getClientWebpack };
+//# sourceMappingURL=client.js.map

package/esm/config/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.d.ts.map

package/esm/config/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export * from './client';
 export * from './server';
+//# sourceMappingURL=index.js.map

package/esm/config/server.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import * as WebpackChain from 'webpack-chain';
 import * as webpack from 'webpack';
 declare const getServerWebpack: (chain: WebpackChain) => webpack.Configuration;
 export { getServerWebpack };
+//# sourceMappingURL=server.d.ts.map

package/esm/config/server.js CHANGED Viewed

@@ -32,3 +32,4 @@ const getServerWebpack = (chain) => {
     return chain.toConfig();
 };
 export { getServerWebpack };
+//# sourceMappingURL=server.js.map

package/esm/entry/client-entry.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 declare const clientRender: () => Promise<void>;
 export { clientRender };
+//# sourceMappingURL=client-entry.d.ts.map

package/esm/entry/client-entry.js CHANGED Viewed

@@ -5,14 +5,13 @@ import { preloadComponent } from 'ssr-client-utils';
 import { wrapComponent } from 'ssr-hoc-react';
 import { Routes } from './create-router';
 import { AppContext } from './context';
-const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes;
+const { FeRoutes, layoutFetch, App } = Routes;
 const clientRender = async () => {
-    var _a, _b, _c, _d;
     const IApp = App !== null && App !== void 0 ? App : function (props) {
         return props.children;
     };
     // 客户端渲染||hydrate
-    const baseName = (_b = (_a = (window.microApp && window.clientPrefix)) !== null && _a !== void 0 ? _a : window.prefix) !== null && _b !== void 0 ? _b : PrefixRouterBase;
+    const baseName = window.microApp ? window.clientPrefix : window.prefix;
     const routes = await preloadComponent(FeRoutes, baseName);
     ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](React.createElement(BrowserRouter, { basename: baseName },
         React.createElement(AppContext, null,
@@ -27,9 +26,6 @@ const clientRender = async () => {
                         const WrappedComponent = wrapComponent(component);
                         return (React.createElement(Route, { exact: true, key: path, path: path, render: () => React.createElement(WrappedComponent, { key: location.pathname }) }));
                     })))))), document.getElementById('app'));
-    if (!window.__USE_VITE__) {
-        (_d = (_c = module === null || module === void 0 ? void 0 : module.hot) === null || _c === void 0 ? void 0 : _c.accept) === null || _d === void 0 ? void 0 : _d.call(_c); // webpack 场景下的 hmr
-    }
 };
 if (!window.__disableClientRender__) {
     // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层
@@ -37,3 +33,4 @@ if (!window.__disableClientRender__) {
     clientRender();
 }
 export { clientRender };
+//# sourceMappingURL=client-entry.js.map

package/esm/entry/context.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { IProps } from 'ssr-types-react';
 export declare function AppContext(props: IProps): JSX.Element;
+//# sourceMappingURL=context.d.ts.map

package/esm/entry/context.js CHANGED Viewed

@@ -25,3 +25,4 @@ export function AppContext(props) {
     const [state, dispatch] = useReducer(combineReducer, initialState);
     return (React.createElement(STORE_CONTEXT.Provider, { value: { state, dispatch } }, props.children));
 }
+//# sourceMappingURL=context.js.map

package/esm/entry/create-context.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import { Context } from 'react';
 import { IContext } from 'ssr-types-react';
 declare let STORE_CONTEXT: Context<IContext>;
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.d.ts.map

package/esm/entry/create-context.js CHANGED Viewed

@@ -14,3 +14,4 @@ else {
     });
 }
 export { STORE_CONTEXT };
+//# sourceMappingURL=create-context.js.map

package/esm/entry/create-router.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { ReactRoutesType } from 'ssr-types-react';
 declare const Routes: ReactRoutesType;
 export { Routes };
+//# sourceMappingURL=create-router.d.ts.map

package/esm/entry/create-router.js CHANGED Viewed

@@ -21,3 +21,4 @@ if (ManualRoutesWithType.FeRoutes) {
     Routes.FeRoutes = combineRoutes;
 }
 export { Routes };
+//# sourceMappingURL=create-router.js.map

package/esm/entry/server-entry.d.ts CHANGED Viewed

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { ISSRContext, IConfig } from 'ssr-types-react';
 declare const serverRender: (ctx: ISSRContext, config: IConfig) => Promise<React.ReactElement>;
 export { serverRender };
+//# sourceMappingURL=server-entry.d.ts.map

package/esm/entry/server-entry.js CHANGED Viewed

@@ -1,23 +1,15 @@
 import * as React from 'react';
 import { StaticRouter } from 'react-router-dom';
-import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk } from 'ssr-server-utils';
-// @ts-expect-error
-import * as serializeWrap from 'serialize-javascript';
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, reactRefreshFragment } from 'ssr-server-utils';
+import { serialize } from 'ssr-serialize-javascript';
 // @ts-expect-error
 import { STORE_CONTEXT as Context } from '_build/create-context';
-// @ts-expect-error
-import Layout from '@/components/layout/index.tsx';
 import { Routes } from './create-router';
-const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes;
-const serialize = serializeWrap.default || serializeWrap;
+const { FeRoutes, layoutFetch, state, Layout } = Routes;
 const serverRender = async (ctx, config) => {
     var _a;
     const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config;
-    let path = ctx.request.path; // 这里取 pathname 不能够包含 queryString
-    const base = prefix !== null && prefix !== void 0 ? prefix : PrefixRouterBase; // 以开发者实际传入的为最高优先级
-    if (base) {
-        path = normalizePath(path, base);
-    }
+    const path = normalizePath(ctx.request.path, prefix);
     const routeItem = findRoute(FeRoutes, path);
     if (!routeItem) {
         throw new Error(`
@@ -33,11 +25,7 @@ const serverRender = async (ctx, config) => {
     if (isVite && isDev) {
         injectCss.push(React.createElement("script", { src: "/@vite/client", type: "module", key: "vite-client" }));
         injectCss.push(React.createElement("script", { key: "vite-react-refresh", type: "module", dangerouslySetInnerHTML: {
-                __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+                __html: reactRefreshFragment
             } }));
     }
     else {
@@ -54,11 +42,11 @@ const serverRender = async (ctx, config) => {
             } }));
     }
     const injectScript = [
-        isVite && React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
-                __html: 'window.__USE_VITE__=true'
-            } }),
-        (isVite && isDev) && React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" }),
-        ...dynamicJsOrder.map(js => manifest[js]).map(item => item && React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
+        ...(isVite ? [React.createElement("script", { key: "viteWindowInit", dangerouslySetInnerHTML: {
+                    __html: 'window.__USE_VITE__=true'
+                } })] : []),
+        ...((isVite && isDev) ? [React.createElement("script", { type: "module", src: '/node_modules/ssr-plugin-react/esm/entry/client-entry.js', key: "vite-react-entry" })] : []),
+        ...dynamicJsOrder.map(js => manifest[js]).filter(item => !!item).map(item => React.createElement("script", { key: item, src: item, type: isVite ? 'module' : '' }))
     ];
     const staticList = {
         injectCss,
@@ -87,7 +75,7 @@ const serverRender = async (ctx, config) => {
     }
     const combineData = isCsr ? null : Object.assign(state !== null && state !== void 0 ? state : {}, layoutFetchData !== null && layoutFetchData !== void 0 ? layoutFetchData : {}, fetchData !== null && fetchData !== void 0 ? fetchData : {});
     const injectState = isCsr ? null : React.createElement("script", { dangerouslySetInnerHTML: {
-            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; ${base && `window.prefix="${base}"`};${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
+            __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; window.prefix="${prefix}";${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
         } });
     return (React.createElement(StaticRouter, { location: ctx.request.url },
         React.createElement(Context.Provider, { value: { state: combineData } },
@@ -95,3 +83,4 @@ const serverRender = async (ctx, config) => {
                 React.createElement(Component, null)))));
 };
 export { serverRender };
+//# sourceMappingURL=server-entry.js.map

package/esm/index.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export declare function clientPlugin(): {
     build: () => Promise<void>;
 };
 export * from './tools/vite';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.js CHANGED Viewed

@@ -26,3 +26,4 @@ export function clientPlugin() {
     };
 }
 export * from './tools/vite';
+//# sourceMappingURL=index.js.map

package/esm/tools/vite.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ declare const clientConfig: UserConfig;
 declare const viteStart: () => Promise<void>;
 declare const viteBuild: () => Promise<void>;
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.d.ts.map

package/esm/tools/vite.js CHANGED Viewed

@@ -91,3 +91,4 @@ const viteBuild = async () => {
     await build({ ...serverConfig, mode: 'production' });
 };
 export { viteBuild, viteStart, serverConfig, clientConfig };
+//# sourceMappingURL=vite.js.map

package/esm/tools/webpack.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export declare const webpackStart: () => Promise<void>;
 export declare const webpackBuild: () => Promise<void>;
+//# sourceMappingURL=webpack.d.ts.map

package/esm/tools/webpack.js CHANGED Viewed

@@ -15,3 +15,4 @@ export const webpackBuild = async () => {
     const clientConfigChain = new WebpackChain();
     await Promise.all([startServerBuild(getServerWebpack(serverConfigChain)), startClientBuild(getClientWebpack(clientConfigChain))]);
 };
+//# sourceMappingURL=webpack.js.map

package/package.json CHANGED Viewed

@@ -1,15 +1,13 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.2.13",
+  "version": "6.2.16",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"tsc -p ./tsconfig.cjs.json --inlineSourceMap false\" \" tsc -p ./tsconfig.esm.json --inlineSourceMap false\"",
-    "build:only": "concurrently \"tsc-transpile-only --skipLibCheck -p ./tsconfig.cjs.json --inlineSourceMap false\" \" tsc-transpile-only --skipLibCheck -p ./tsconfig.esm.json --inlineSourceMap false\"",
-    "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \"",
-    "watch:cjs": "tsc -w -p ./tsconfig.cjs.json"
+    "build": "concurrently \"tsc -p ./tsconfig.cjs.json \" \" tsc -p ./tsconfig.esm.json\"",
+    "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \""
   },
   "repository": {
     "type": "git",
@@ -34,6 +32,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.5.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
     "@vitejs/plugin-react": "^1.0.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-import": "1.13.3",
@@ -54,11 +53,12 @@
     "postcss-preset-env": "^7.0.0",
     "postcss-safe-parser": "^6.0.0",
     "react": "^17.0.1",
+    "react-dev-utils": "^11.0.4",
     "react-dom": "^17.0.0",
+    "react-refresh": "^0.12.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.1.2",
-    "react-dev-utils": "^11.0.4",
-    "serialize-javascript": "^6.0.0",
+    "ssr-serialize-javascript": "^6.0.0",
     "ssr-client-utils": "^6.2.7",
     "ssr-hoc-react": "^6.2.7",
     "ssr-server-utils": "^6.2.10",
@@ -79,7 +79,6 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/webpack": "^4.41.10",
     "concurrently": "^5.1.0",
-    "ssr-types": "^6.2.3",
     "ssr-types-react": "^6.2.7"
   }
 }

package/src/config/base.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { join } from 'path'
-import { Mode } from 'ssr-types'
+import { Mode } from 'ssr-types-react'
 import { getCwd, loadConfig, getLocalNodeModules, setStyle, addImageChain, loadModuleFromFramework } from 'ssr-server-utils'
 import * as WebpackChain from 'webpack-chain'
 import * as webpack from 'webpack'
@@ -9,8 +9,8 @@ const MiniCssExtractPlugin = require(loadModuleFromFramework('mini-css-extract-p
 const WebpackBar = require('webpackbar')
 const loadModule = loadModuleFromFramework
-const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any) => {
-  const { babelOptions } = loadConfig()
+const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOptions: any, isServer: boolean) => {
+  const { babelOptions, isDev } = loadConfig()
   chain.use('babel-loader')
     .loader(loadModule('babel-loader'))
     .options({
@@ -42,7 +42,7 @@ const addBabelLoader = (chain: WebpackChain.Rule<WebpackChain.Module>, envOption
         [loadModule('@babel/plugin-proposal-private-methods'), { loose: true }],
         [loadModule('@babel/plugin-proposal-private-property-in-object'), { loose: true }],
         ...babelOptions?.plugins ?? []
-      ]
+      ].concat((!isServer && isDev) ? loadModule('react-refresh/babel') : [])
     })
     .end()
 }
@@ -106,8 +106,8 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     babelForExtraModule = module.end().exclude.add(/core-js/).end()
   }
-  addBabelLoader(babelModule, envOptions)
-  addBabelLoader(babelForExtraModule, envOptions)
+  addBabelLoader(babelModule, envOptions, isServer)
+  addBabelLoader(babelForExtraModule, envOptions, isServer)
   setStyle(chain, /\.css$/, {
     rule: 'css',

package/src/config/client.ts CHANGED Viewed

@@ -7,12 +7,13 @@ import { getBaseConfig } from './base'
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
 const safePostCssParser = require('postcss-safe-parser')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const generateAnalysis = Boolean(process.env.GENERATE_ANALYSIS)
 const loadModule = loadModuleFromFramework
 let asyncChunkMap: Record<string, string[]> = {}
 const getClientWebpack = (chain: WebpackChain) => {
-  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig } = loadConfig()
+  const { isDev, chunkName, getOutput, cwd, useHash, chainClientConfig, host, fePort } = loadConfig()
   const shouldUseSourceMap = isDev || Boolean(process.env.GENERATE_SOURCEMAP)
   const publicPath = getOutputPublicPath()
   getBaseConfig(chain, false)
@@ -92,6 +93,15 @@ const getClientWebpack = (chain: WebpackChain) => {
   chain.when(generateAnalysis, chain => {
     chain.plugin('analyze').use(BundleAnalyzerPlugin)
   })
+  chain.when(isDev, chain => {
+    chain.plugin('fast-refresh').use(new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockHost: host,
+        sockPort: fePort
+      }
+    }))
+  })
   chain.plugin('WriteAsyncManifest').use(
     class WriteAsyncChunkManifest {
       apply (compiler: any) {

package/src/entry/client-entry.tsx CHANGED Viewed

@@ -7,9 +7,8 @@ import { IWindow, LayoutProps, ReactRoutesType } from 'ssr-types-react'
 import { Routes } from './create-router'
 import { AppContext } from './context'
-const { FeRoutes, layoutFetch, App, PrefixRouterBase } = Routes as ReactRoutesType
+const { FeRoutes, layoutFetch, App } = Routes as ReactRoutesType
-declare const module: any
 declare const window: IWindow
 const clientRender = async (): Promise<void> => {
@@ -17,7 +16,7 @@ const clientRender = async (): Promise<void> => {
     return props.children!
   }
   // 客户端渲染||hydrate
-  const baseName = (window.microApp && window.clientPrefix) ?? window.prefix ?? PrefixRouterBase
+  const baseName = window.microApp ? window.clientPrefix : window.prefix
   const routes = await preloadComponent(FeRoutes, baseName)
   ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](
     <BrowserRouter basename={baseName}>
@@ -44,9 +43,6 @@ const clientRender = async (): Promise<void> => {
     </BrowserRouter>
     , document.getElementById('app'))
-  if (!window.__USE_VITE__) {
-    module?.hot?.accept?.() // webpack 场景下的 hmr
-  }
 }
 if (!window.__disableClientRender__) {
   // 如果服务端直出的时候带上该记号，则默认不进行客户端渲染，将处理逻辑交给上层

package/src/entry/server-entry.tsx CHANGED Viewed

@@ -1,25 +1,17 @@
 import * as React from 'react'
 import { StaticRouter } from 'react-router-dom'
-import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk } from 'ssr-server-utils'
+import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, reactRefreshFragment } from 'ssr-server-utils'
 import { ISSRContext, IConfig, ReactRoutesType, ReactESMFeRouteItem } from 'ssr-types-react'
-// @ts-expect-error
-import * as serializeWrap from 'serialize-javascript'
+import { serialize } from 'ssr-serialize-javascript'
 // @ts-expect-error
 import { STORE_CONTEXT as Context } from '_build/create-context'
-// @ts-expect-error
-import Layout from '@/components/layout/index.tsx'
 import { Routes } from './create-router'
-const { FeRoutes, layoutFetch, PrefixRouterBase, state } = Routes as ReactRoutesType
-const serialize = serializeWrap.default || serializeWrap
+const { FeRoutes, layoutFetch, state, Layout } = Routes as ReactRoutesType
 const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
   const { mode, parallelFetch, disableClientRender, prefix, isVite, isDev, clientPrefix } = config
-  let path = ctx.request.path // 这里取 pathname 不能够包含 queryString
-  const base = prefix ?? PrefixRouterBase // 以开发者实际传入的为最高优先级
-  if (base) {
-    path = normalizePath(path, base)
-  }
+  const path = normalizePath(ctx.request.path, prefix)
   const routeItem = findRoute<ReactESMFeRouteItem>(FeRoutes, path)
   if (!routeItem) {
@@ -39,11 +31,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   if (isVite && isDev) {
     injectCss.push(<script src="/@vite/client" type="module" key="vite-client"/>)
     injectCss.push(<script key="vite-react-refresh" type="module" dangerouslySetInnerHTML={{
-      __html: ` import RefreshRuntime from "/@react-refresh"
-      RefreshRuntime.injectIntoGlobalHook(window)
-      window.$RefreshReg$ = () => {}
-      window.$RefreshSig$ = () => (type) => type
-      window.__vite_plugin_react_preamble_installed__ = true`
+      __html: reactRefreshFragment
     }} />)
   } else {
     dynamicCssOrder.forEach(css => {
@@ -61,11 +49,11 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   }
   const injectScript = [
-    isVite && <script key="viteWindowInit" dangerouslySetInnerHTML={{
+    ...(isVite ? [<script key="viteWindowInit" dangerouslySetInnerHTML={{
       __html: 'window.__USE_VITE__=true'
-    }} />,
-    (isVite && isDev) && <script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />,
-    ...dynamicJsOrder.map(js => manifest[js]).map(item => item && <script key={item} src={item} type={isVite ? 'module' : ''}/>)
+    }} />] : []),
+    ...((isVite && isDev) ? [<script type="module" src='/node_modules/ssr-plugin-react/esm/entry/client-entry.js' key="vite-react-entry" />] : []),
+    ...dynamicJsOrder.map(js => manifest[js]).filter(item => !!item).map(item => <script key={item} src={item} type={isVite ? 'module' : ''}/>)
   ]
   const staticList = {
     injectCss,
@@ -96,7 +84,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   }
   const combineData = isCsr ? null : Object.assign(state ?? {}, layoutFetchData ?? {}, fetchData ?? {})
   const injectState = isCsr ? null : <script dangerouslySetInnerHTML={{
-    __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; ${base && `window.prefix="${base}"`};${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
+    __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; window.prefix="${prefix}";${clientPrefix && `window.clientPrefix="${clientPrefix}"`}`
   }} />
   return (