ssr-plugin-react 6.1.18 → 6.1.22-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.22-alpha.1](https://github.com/zhangyuang/ssr/compare/v6.1.22-alpha.0...v6.1.22-alpha.1) (2021-12-11)
+
+
+### Features
+
+* support vite-style-import ([62d936b](https://github.com/zhangyuang/ssr/commit/62d936b62dd47365be8eb27564628adc139b619d))
+
+
+
+
+
+## [6.1.22-alpha.0](https://github.com/zhangyuang/ssr/compare/v6.1.21...v6.1.22-alpha.0) (2021-12-10)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
+## [6.1.21](https://github.com/zhangyuang/ssr/compare/v6.1.20...v6.1.21) (2021-12-09)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
+## [6.1.19](https://github.com/zhangyuang/ssr/compare/v6.1.18...v6.1.19) (2021-12-08)
+
+**Note:** Version bump only for package ssr-plugin-react
+
+
+
+
+
 ## [6.1.18](https://github.com/zhangyuang/ssr/compare/v6.1.17...v6.1.18) (2021-12-07)
 
 

package/README.md

@@ -24,9 +24,9 @@
 
 `ssr` 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看[文档](http://doc.ssr-fc.com/docs/features$ssr)
 
-此框架脱胎于 [egg-react-ssr](https://github.com/zhangyuang/egg-react-ssr) 项目和`ssr` v4.3版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。
+此框架脱胎于 [egg-react-ssr](https://github.com/zhangyuang/egg-react-ssr) 项目和 `ssr` v4版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 `Serverless` 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。
 
-在最新的 v5.0 版本中，同时支持 `React` 和 `Vue2/Vue3` 作为服务端渲染框架且构建工具我们同样支持了最流行的 `Vite` 来提升应用的启动速度和 HMR 速度，且提供一键以 Serverless 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 `ssr` 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 `ssr` 框架。
+在最新的版本中，同时支持 `React` 和 `Vue2/Vue3` 作为服务端渲染框架且开发工具侧我们同样支持了最流行的 `Vite` 来提升应用的启动速度和 HMR 速度，且提供一键以 `Serverless` 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 `ssr` 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 `ssr` 框架。
 
 阅读我们的 [官方文档](http://doc.ssr-fc.com/) 获得更加详细的了解。事实上文档本身便是用 `ssr` 框架开发并通过 `Serverless` 部署到阿里云服务
 
@@ -40,7 +40,7 @@
 - 需要一个配置简单逻辑清晰的框架， `ssr` 框架的渲染逻辑和应用构建逻辑是同类型框架中最清晰的
 - 可能会改动技术栈，如从 `Vue2` 升级为 `Vue3`，从 `Vue3` 降级为 `Vue2` 或 `React/Vue` 互相切换
 - 需要在服务端渲染场景下开箱即用使用 `antd` `vant` 等流行 `ui` 库
-- 需要能够同时支持 `Webpack`, `Vite` 两种构建工具，以便同时得到快速的启动速度 `HMR` 速度以及稳定的生产环境代码
+- 需要能够同时支持 `Webpack`, `Vite` 两种开发工具，以便同时得到快速的启动速度 `HMR` 速度以及稳定的生产环境代码
 
 ## 哪些应用在使用
 
@@ -136,7 +136,7 @@
 | 里程碑                                                                 | 状态 |
 | ---------------------------------------------------------------------- | ---- |
 | 支持任意服务端框架与任意前端框架的组合使用。(Serverless/Midway/Nestjs) + (React/Vue2/Vue3)             | 🚀   |
-| 支持 [vite](https://vite-design.surge.sh/) 作为构建工具在 SSR 场景下的组合[使用](http://doc.ssr-fc.com/docs/features$vite) |  🚀    |
+| 最丝滑的 [vite](https://vite-design.surge.sh/) [支持](http://doc.ssr-fc.com/docs/features$vite) |  🚀    |
 | 最小而美的实现服务端渲染功能                           | 🚀   |
 | 针对Serverless 场景对代码包的大小的严格限制，将生产环境的代码包大小做到极致            | 🚀   |
 | 同时支持约定式前端路由和声明式前端路由                            | 🚀   |
@@ -273,7 +273,7 @@ $ npm run start:vite # 以 vite 模式启动，等价于 npx ssr start --vite
 
 <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/ECwdFhkCwm6NE1c_jP-DOYaVaR8K_ORJeEzFlDW9eBJj8igF3yeut9KnoChxyqJ4ReJogCG9bL_qZ3OYdZBI0w" width="300">
+<img src="https://res.wx.qq.com/op_res/i1X1OIr2VfQ9MLcvsFOCyN4UWghSc85u64U8OeXxQWKrpdXvpnhe-gms1sUgtRr_QOHZPqanJ2G_lNzuN00ZvQ" width="300">
 </div>
 
 ## 前端开发手册

package/cjs/config/server.js

@@ -22,7 +22,7 @@ const getServerWebpack = (chain) => {
     const modulesDir = [(0, path_1.join)(cwd, './node_modules')];
     modulesDir.push((0, ssr_server_utils_1.getLocalNodeModules)());
     chain.externals((0, ssr_server_utils_1.nodeExternals)({
-        whitelist: [/\.(css|less|sass|scss)$/, /antd.*?(style)/].concat(whiteList || []),
+        whitelist: whiteList,
         // externals Dir contains example/xxx/node_modules ssr/node_modules
         modulesDir
     }));

package/cjs/tools/vite.js

@@ -4,9 +4,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.clientConfig = exports.serverConfig = exports.viteStart = exports.viteBuild = void 0;
 const ssr_server_utils_1 = require("ssr-server-utils");
 const plugin_react_1 = require("@vitejs/plugin-react");
+const vite_plugin_style_import_1 = require("vite-plugin-style-import");
 const build = require('vite').build;
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = (0, ssr_server_utils_1.loadConfig)();
 const { clientOutPut, serverOutPut } = getOutput();
+const styleImportConfig = {
+    include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+    resolves: [
+        (0, vite_plugin_style_import_1.AndDesignVueResolve)(),
+        (0, vite_plugin_style_import_1.VantResolve)(),
+        (0, vite_plugin_style_import_1.ElementPlusResolve)(),
+        (0, vite_plugin_style_import_1.NutuiResolve)(),
+        (0, vite_plugin_style_import_1.AntdResolve)()
+    ]
+};
 const serverConfig = {
     ...(0, ssr_server_utils_1.commonConfig)(),
     plugins: [
@@ -14,7 +25,8 @@ const serverConfig = {
             ...(_b = (_a = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _a === void 0 ? void 0 : _a.server) === null || _b === void 0 ? void 0 : _b.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin
+        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin,
+        (0, vite_plugin_style_import_1.default)(styleImportConfig)
     ],
     build: {
         ssr: reactServerEntry,
@@ -41,14 +53,15 @@ const clientConfig = {
             ...(_h = (_g = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _g === void 0 ? void 0 : _g.client) === null || _h === void 0 ? void 0 : _h.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin
+        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin,
+        (0, vite_plugin_style_import_1.default)(styleImportConfig)
     ],
     build: {
         ssrManifest: true,
         outDir: clientOutPut,
         rollupOptions: {
             input: reactClientEntry,
-            output: ssr_server_utils_1.output,
+            output: ssr_server_utils_1.rollupOutputOptions,
             plugins: [(0, ssr_server_utils_1.chunkNamePlugin)(), (0, ssr_server_utils_1.manifestPlugin)()]
         }
     },

package/esm/config/server.js

@@ -19,7 +19,7 @@ const getServerWebpack = (chain) => {
     const modulesDir = [join(cwd, './node_modules')];
     modulesDir.push(getLocalNodeModules());
     chain.externals(nodeExternals({
-        whitelist: [/\.(css|less|sass|scss)$/, /antd.*?(style)/].concat(whiteList || []),
+        whitelist: whiteList,
         // externals Dir contains example/xxx/node_modules ssr/node_modules
         modulesDir
     }));

package/esm/tools/vite.js

@@ -1,9 +1,20 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils';
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig } from 'ssr-server-utils';
 import react from '@vitejs/plugin-react';
+import styleImport, { AndDesignVueResolve, VantResolve, ElementPlusResolve, NutuiResolve, AntdResolve } from 'vite-plugin-style-import';
 const build = require('vite').build;
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = loadConfig();
 const { clientOutPut, serverOutPut } = getOutput();
+const styleImportConfig = {
+    include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+    resolves: [
+        AndDesignVueResolve(),
+        VantResolve(),
+        ElementPlusResolve(),
+        NutuiResolve(),
+        AntdResolve()
+    ]
+};
 const serverConfig = {
     ...commonConfig(),
     plugins: [
@@ -11,7 +22,8 @@ const serverConfig = {
             ...(_b = (_a = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _a === void 0 ? void 0 : _a.server) === null || _b === void 0 ? void 0 : _b.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin
+        (_d = (_c = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _c === void 0 ? void 0 : _c.server) === null || _d === void 0 ? void 0 : _d.extraPlugin,
+        styleImport(styleImportConfig)
     ],
     build: {
         ssr: reactServerEntry,
@@ -37,14 +49,15 @@ const clientConfig = {
             ...(_h = (_g = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _g === void 0 ? void 0 : _g.client) === null || _h === void 0 ? void 0 : _h.defaultPluginOptions,
             jsxRuntime: 'classic'
         }),
-        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin
+        (_k = (_j = viteConfig === null || viteConfig === void 0 ? void 0 : viteConfig()) === null || _j === void 0 ? void 0 : _j.client) === null || _k === void 0 ? void 0 : _k.extraPlugin,
+        styleImport(styleImportConfig)
     ],
     build: {
         ssrManifest: true,
         outDir: clientOutPut,
         rollupOptions: {
             input: reactClientEntry,
-            output: output,
+            output: rollupOutputOptions,
             plugins: [chunkNamePlugin(), manifestPlugin()]
         }
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssr-plugin-react",
-  "version": "6.1.18",
+  "version": "6.1.22-alpha.1",
   "description": "plugin-react for ssr",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -56,11 +56,12 @@
     "serialize-javascript": "^6.0.0",
     "ssr-client-utils": "^6.1.18",
     "ssr-hoc-react": "^6.1.18",
-    "ssr-server-utils": "^6.1.18",
-    "ssr-webpack": "^6.1.18",
+    "ssr-server-utils": "^6.1.22-alpha.1",
+    "ssr-webpack": "^6.1.22-alpha.1",
     "terser-webpack-plugin": "^2.3.5",
     "url-loader": "^4.1.1",
     "vite": "^2.7.0-beta.10",
+    "vite-plugin-style-import": "^1.4.0",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-chain": "^6.4.0",
     "webpack-manifest-plugin": "^2.2.0",
@@ -73,5 +74,5 @@
     "@types/webpack": "^4.41.10",
     "ssr-types-react": "^6.1.18"
   },
-  "gitHead": "7033461bb5347024123b67a2cb53a98dc2cf99c1"
+  "gitHead": "0da3318b02daad97eaddde35285470768e407064"
 }

package/src/config/server.ts

@@ -23,7 +23,7 @@ const getServerWebpack = (chain: WebpackChain) => {
   const modulesDir = [join(cwd, './node_modules')]
   modulesDir.push(getLocalNodeModules())
   chain.externals(nodeExternals({
-    whitelist: [/\.(css|less|sass|scss)$/, /antd.*?(style)/].concat(whiteList as RegExp[] || []),
+    whitelist: whiteList,
     // externals Dir contains example/xxx/node_modules ssr/node_modules
     modulesDir
   }))

package/src/tools/vite.ts

@@ -1,10 +1,26 @@
 import type { build as BuildType, UserConfig } from 'vite'
-import { loadConfig, chunkNamePlugin, output, manifestPlugin, commonConfig } from 'ssr-server-utils'
+import { loadConfig, chunkNamePlugin, rollupOutputOptions, manifestPlugin, commonConfig } from 'ssr-server-utils'
 import react from '@vitejs/plugin-react'
+import styleImport, {
+  AndDesignVueResolve,
+  VantResolve,
+  ElementPlusResolve,
+  NutuiResolve,
+  AntdResolve
+} from 'vite-plugin-style-import'
+
 const build: typeof BuildType = require('vite').build
 const { getOutput, reactServerEntry, reactClientEntry, viteConfig } = loadConfig()
 const { clientOutPut, serverOutPut } = getOutput()
-
+const styleImportConfig = {
+  include: ['**/*.vue', '**/*.ts', '**/*.js', '**/*.tsx', '**/*.jsx', /chunkName/],
+  resolves: [
+    AndDesignVueResolve(),
+    VantResolve(),
+    ElementPlusResolve(),
+    NutuiResolve(),
+    AntdResolve()]
+}
 const serverConfig: UserConfig = {
   ...commonConfig(),
   plugins: [
@@ -12,7 +28,9 @@ const serverConfig: UserConfig = {
       ...viteConfig?.()?.server?.defaultPluginOptions,
       jsxRuntime: 'classic'
     }),
-    viteConfig?.()?.server?.extraPlugin
+    viteConfig?.()?.server?.extraPlugin,
+    styleImport(styleImportConfig)
+
   ],
   build: {
     ssr: reactServerEntry,
@@ -39,14 +57,15 @@ const clientConfig: UserConfig = {
       ...viteConfig?.()?.client?.defaultPluginOptions,
       jsxRuntime: 'classic'
     }),
-    viteConfig?.()?.client?.extraPlugin
+    viteConfig?.()?.client?.extraPlugin,
+    styleImport(styleImportConfig)
   ],
   build: {
     ssrManifest: true,
     outDir: clientOutPut,
     rollupOptions: {
       input: reactClientEntry,
-      output: output,
+      output: rollupOutputOptions,
       plugins: [chunkNamePlugin(), manifestPlugin()]
     }
   },