feat: solution for support ssr

examples/core-react/001-intro.md

@@ -2,18 +2,18 @@
 group:
   title: 介绍
   order: 0
-toc: false
+toc: content
 ---
 
 # 简介
 
 ## SchemaRender
 
-`SchemaRender` 是一套 `默认简单`，但又追求 `灵活`、`可高定`、`好用的` 表单渲染解决方案，旨在沉淀解决常见表单案例的渲染库，与相关的通用组件，以提升研发效率。
+`SchemaRender` 是一套 `默认简单`，但又追求 `灵活`、`可高定`、`好用的` 表单渲染解决方案，旨在沉淀解决常见表单案例的渲染库，与相关的通用组件，以提升研发效率；支持 SSR(Server-Side Rendering) 渲染。
 
 内容目录：
 
-- `Core`: 表单渲染库内核，通过一套简易的 [JSON Schema](./003-schema.md) 构建出一套表单，内核主要处理 Schema 协议、渲染器编排、逻辑联动、校验能力等，支持 SSR(Server-Side Rendering)。
+- `Core`: 表单渲染库内核，通过一套简易的 [JSON Schema](./003-schema.md) 构建出一套表单，内核主要处理 Schema 协议、渲染器编排、逻辑联动、校验能力等。
 - `FormRender`: 基于 Core + [Antd](https://ant.design) 封装的开箱即用的表单渲染库。
 - `Search`：基于 FormRender 封装的开箱即用的条件搜索组件。
 - `SearchTable`：基于 Search + Antd Table 封装的条件搜索表格。
@@ -22,14 +22,22 @@ toc: false
 目前项目是基于 React 技术栈实现的，所以后缀都加了 `-react` 字眼，后续可能会将 Core 抽离成不依赖于技术栈的纯 JavaScript 项目，以便支持任何技术框架。
 :::
 
-FormRender、Search 没有很好的支持 SSR，如果是 Next.js 项目，可以动态导入并配置 ssr 为不启用，如下示例。
+## SSR
 
-```jsx | pure
-import dynamic from 'next/dynamic'
+FormRender、Search、SearchTable 使用的是 css module 的样式方案，故项目需要开启模块编译。
+
+`Next.js` 项目须配置 `next.config.js` 文件：
 
-const FormRender = dynamic(() => import('@schema-render/form-render-react'), {
-  ssr: false,
-})
+```jsx | pure
+// 编译 node_modules 下的模块
+{
+  transpilePackages: [
+    '@schema-render/core-react',
+    '@schema-render/form-render-react',
+    '@schema-render/search-react',
+    '@schema-render/search-table-react',
+  ]
+}
 ```
 
 ## Core

package.json

@@ -2,7 +2,6 @@
   "name": "root",
   "private": true,
   "scripts": {
-    "build": "node scripts/build-cli.mjs",
     "cov": "yarn test --coverage",
     "dev": "yarn docs",
     "docs": "ERROR_OVERLAY=none dumi dev",
@@ -41,8 +40,6 @@
     "@j-lints/eslint-config-ts-react": "^0.0.2",
     "@j-lints/stylelint-config-scss": "^0.0.2",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.44",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",

packages/core-react/package.json

@@ -15,17 +15,12 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
   "files": [
-    "dist/cjs",
-    "dist/esm",
-    "dist/umd"
+    "src"
   ],
-  "scripts": {
-    "build": "father build"
-  },
+  "scripts": {},
   "dependencies": {},
   "peerDependencies": {
     "react": ">=16.9.0",

packages/form-render-react/package.json

@@ -15,17 +15,13 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
   "files": [
-    "dist"
+    "src"
   ],
-  "scripts": {
-    "build": "father build"
-  },
+  "scripts": {},
   "dependencies": {
-    "@emotion/css": "^11.11.2",
     "@schema-render/core-react": "^1.10.1",
     "dayjs": "^1.11.0"
   },

packages/form-render-react/src/FormRender.tsx

@@ -9,7 +9,7 @@ import FormRenderContext from './FormRenderContext'
 import useActions from './hooks/useActions'
 import useItemLayout from './hooks/useItemLayout'
 import useSchema from './hooks/useSchema'
-import * as styles from './index.style'
+import styles from './index.module.css'
 import zh_CN from './locale/zh_CN'
 import renderers from './renderers/index'
 import type {

packages/form-render-react/src/index.style.ts → packages/form-render-react/src/index.module.css

@@ -1,11 +1,9 @@
-import { cij } from './cssinjs'
-
-export const formRender = cij`
+.formRender {
   --schema-render-color-description: #999;
   --schema-render-color-required-mark: #ff4d4f;
   --schema-render-color-warning: #faad14;
   --schema-render-color-error: #ff4d4f;
 
-  font-size: 16px;
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
-`
+  font-size: 16px;
+}

packages/form-render-react/src/index.tsx

@@ -1,5 +1,4 @@
 import FormRender from './FormRender'
-export { cij } from './cssinjs'
 
 export default FormRender
 

packages/form-render-react/src/itemLayouts/Horizontal/styles.ts → packages/form-render-react/src/itemLayouts/Horizontal/index.module.css

@@ -1,59 +1,57 @@
-import { cij } from '../../cssinjs'
-
-export const main = cij`
+.main {
   display: flex;
   align-items: center;
-`
+}
 
-export const header = cij`
-  flex: 0 0 100px;
-  justify-content: flex-end;
+.header {
   display: flex;
   align-items: center;
-  margin-right: 15px;
+  justify-content: flex-end;
+  flex: 0 0 100px;
   height: max-content;
-`
+  margin-right: 15px;
+}
 
-export const title = cij`
+.title {
   word-break: break-all;
-`
+}
 
-export const mark = cij`
+.mark {
   margin-right: 4px;
   color: var(--schema-render-color-required-mark);
   position: relative;
   top: 2px;
-`
+}
 
-export const titleTooltip = cij`
+.titleTooltip {
   margin-left: 4px;
   position: relative;
   top: 1px;
-`
+}
 
-export const body = cij`
+.body {
   flex-grow: 1;
-`
+}
 
-export const footer = cij`
-  word-break: break-all;
+.footer {
   padding-left: 115px;
+  word-break: break-all;
+}
 
-  &:empty {
-    display: none;
-  }
-`
+.footer:empty {
+  display: none;
+}
 
-export const description = cij`
+.description {
   margin-top: 6px;
   color: var(--schema-render-color-description);
-`
+}
 
-export const errorMsg = cij`
+.errorMsg {
   margin-top: 6px;
   color: var(--schema-render-color-error);
-`
+}
 
-export const warningMsg = cij`
+.warningMsg {
   color: var(--schema-render-color-warning);
-`
+}

packages/form-render-react/src/itemLayouts/Horizontal/index.tsx

@@ -6,7 +6,7 @@ import type { FC } from 'react'
 
 import useFormRenderContext from '../../hooks/useFormRenderContext'
 import type { IFormRenderProps } from '../../typings'
-import * as styles from './styles'
+import styles from './index.module.css'
 
 const { classNames } = utils
 

packages/form-render-react/src/itemLayouts/Vertical/styles.ts → packages/form-render-react/src/itemLayouts/Vertical/index.module.css

@@ -1,42 +1,40 @@
-import { cij } from '../../cssinjs'
-
-export const header = cij`
+.header {
   margin-bottom: 8px;
-`
+}
 
-export const title = cij`
+.title {
   word-break: break-all;
-`
+}
 
-export const mark = cij`
+.mark {
   margin-right: 4px;
   color: var(--schema-render-color-required-mark);
   position: relative;
   top: 2px;
-`
+}
 
-export const titleTooltip = cij`
+.titleTooltip {
   margin-left: 4px;
-`
+}
 
-export const footer = cij`
+.footer {
   word-break: break-all;
+}
 
-  &:empty {
-    display: none;
-  }
-`
+.footer:empty {
+  display: none;
+}
 
-export const description = cij`
+.description{
   margin-top: 8px;
   color: var(--schema-render-color-description);
-`
+}
 
-export const errorMsg = cij`
+.errorMsg{
   margin-top: 8px;
   color: var(--schema-render-color-error);
-`
+}
 
-export const warningMsg = cij`
+.warningMsg {
   color: var(--schema-render-color-warning);
-`
+}

packages/form-render-react/src/itemLayouts/Vertical/index.tsx

@@ -6,7 +6,7 @@ import type { FC } from 'react'
 
 import useFormRenderContext from '../../hooks/useFormRenderContext'
 import type { IFormRenderProps } from '../../typings'
-import * as styles from './styles'
+import styles from './index.module.css'
 
 const { classNames } = utils
 

packages/form-render-react/src/typings/global.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css'