Merge pull request #214 from ice-lab/release-next

Release next

.eslintignore

@@ -14,6 +14,7 @@ coverage/
 /packages/*/__tests__
 /packages/*/lib/
 /packages/*/esm/
+/packages/*/es2017/
 
 # 忽略第三方包
 /vendor/loader.js

.eslintrc.js

@@ -41,6 +41,7 @@ module.exports = getESLintConfig('react-ts', {
     '@typescript-eslint/no-unnecessary-type-arguments': 0,
     '@typescript-eslint/await-thenable': 0,
     '@typescript-eslint/prefer-nullish-coalescing': 0,
+    '@typescript-eslint/consistent-type-imports': 2,
   },
   parserOptions: {
     project: [],

.github/workflows/auto-publisher.yml

@@ -12,9 +12,11 @@ jobs:
       matrix:
         node-version: [14.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           registry-url: https://registry.npmjs.org/

.github/workflows/ci.yml

@@ -12,13 +12,15 @@ jobs:
       matrix:
         node-version: [14.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - name: Set branch name
         run: echo >>$GITHUB_ENV BRANCH_NAME=${GITHUB_REF#refs/heads/}
       - name: Echo branch name
         run: echo ${BRANCH_NAME}
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           registry-url: https://registry.npmjs.org/
@@ -34,6 +36,8 @@ jobs:
       - run: npm run dependency:check
       - run: npm run lint
       - run: npm run test
+        env:
+          TEST: true
       - run: npm run version:check
         env:
           ACCESS_KEY_ID: ${{ secrets.ACCESS_KEY_ID }}

.github/workflows/coverage.yml

@@ -0,0 +1,64 @@
+name: Coverage
+
+env:
+  NODE_OPTIONS: --max-old-space-size=6144
+
+on:
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - 'examples/**'
+      - 'website/**'
+      - '**/*.md'
+  pull_request:
+    types:
+      - 'opened'
+      - 'synchronize'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  coverage:
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: read
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          registry-url: https://registry.npmjs.org/
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+        with:
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-node-jest-${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-node-jest-${{ matrix.node-version }}
+      - run: npm run setup
+      - run: npm run cov
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        env:
+          CI: true

.github/workflows/website.yml

@@ -5,43 +5,43 @@ on:
       - 'website/**'
     branches:
       - master
+      - release-next
+  workflow_dispatch:
 
 # 任务
 jobs:
   build-and-deploy:
     # 服务器环境：最新版 Ubuntu
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./website
     steps:
       # 拉取代码
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Cache .pnpm-store
+        id: cache
+        uses: actions/cache@v1
         with:
-          node-version: 14.x
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-node${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - name: Install pnpm
+        run: npm i pnpm -g
 
-      - uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+      - run: pnpm install --filter=./website
 
-      - run: yarn
-      - run: yarn build
+      - run: cd website && pnpm build
 
       # 部署到 GitHub Pages
       - name: Deploy
         uses: JamesIves/[email protected]
-        if: github.ref == 'refs/heads/master'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/release-next'
         with:
           BRANCH: gh-pages
-          FOLDER: website/build
+          FOLDER: website/build

CONTRIBUTING.md

@@ -0,0 +1,100 @@
+# 参与贡献
+
+## 环境准备
+
+1. 保证 Node.js 版本是 Node.js 14 以上。推荐安装 Node.js 16+ 版本，会大大提升本地调试速度
+2. ICE 仓库是 `monorepo`，并使用 `pnpm workspace`。因此需要安装 [pnpm](https://pnpm.io/) 包管理工具
+3. 在项目根目录下执行 `pnpm setup` 后会安装依赖和编译代码
+
+> 如果在安装 puppeteer 的时候过慢，可以参考此 [issue](https://github.com/puppeteer/puppeteer/issues/6833#issuecomment-863488626) 进行配置 chromium 缓存。
+
+## 目录说明
+
+```markdown
+ice-next
+├── examples            # 存档各种示例代码
+├── packages            # 存放 npm 包
+|  ├── bundles          # 依赖预编译，锁定框架三方依赖版本，框架中的依赖需要从此包导入模块
+|  ├── ice              # 工程代码，包括创建 service、构建任务、Webpack 和 esbuild 的打包编译逻辑等
+|  ├── plugin-auth      # Auth 插件
+|  ├── route-manifest   # 根据约定式路由生成路由配置
+|  ├── runtime          # 运行时代码，包括 Client/Server 入口、Document、路由组件等
+|  ├── types            # 公共 TS 依赖
+|  └── webpack-config   # 存放 Webpack 默认的配置项
+├── scripts             # 执行脚本
+├── tests               # 测试用例
+|  ├── integration
+|  └── utils
+└── website             # ICE 官方文档
+```
+
+补充说明：
+
+1. `packages` 目录下以 `plugin-xxx` 命名的都是插件包，插件的开发规范可以参考[文档]()
+2. `packages/types` 是用于存放公共的 TS 类型声明，以在其他 `package` 中进行复用
+
+## 调试
+
+### 启动 watch 命令
+
+此命令用于监听 `packages` 目录下代码变更，并增量编译代码。
+
+```bash
+pnpm watch
+```
+
+### 跑 example
+
+`examples` 目录下存放了各种用于测试的 demo，并且自动 Link 到 `packages` 目录下的代码。只需执行以下命令即可开始调试：
+
+```bash
+# 进入某个 example
+$ cd examples/basic-project
+# 调试 example
+$ pnpm start
+```
+
+`packages` 目录下的 `npm` 包在进行代码编译时会生成 `SourceMap`，结合 IDE 可以很方便进行断点调试。以 VS  Code 为例：
+
+1. 选择 `JavaScript Debug Terminal` 进入 Debug 模式：
+![image](https://user-images.githubusercontent.com/44047106/172011203-8b3b4016-8f7b-4743-bbef-30672ab04b03.png)
+
+2. 进入某个 `example` 目录并执行 `pnpm start` 开始调试
+
+3. 在某一行设置一个断点，当代码执行到此行时，将会停止执行并可查看各个变量的值
+![image](https://user-images.githubusercontent.com/44047106/172013483-028d0fa8-8634-46fe-bbb6-1b28b39b8ce1.png)
+
+## 测试
+
+ICE 使用 [vitest](https://vitest.dev/) 进行单元测试和集成测试。执行以下命令可快速运行项目中的测试用例：
+
+```bash
+# 执行一次测试并生成代码覆盖率
+$ pnpm test
+# 启用 Test Watch 模式
+$ pnpm test:watch
+# 只跑部分测试用例
+$ pnpm test basic-project.test.ts
+```
+
+## 文档
+
+ICE 的文档使用了 [docusaurus](https://docusaurus.io/) 进行搭建。执行以下命令即可开始文档的开发：
+
+```bash
+# 进入到 website 目录
+$ cd websites
+# 安装依赖
+$ yarn install
+# 本地预览
+$ yarn start 
+```
+
+## 发布
+
+```bash
+# 发布 alpha 版本
+$ pnpm publish:alpha
+# 发布 beta 版本
+$ pnpm publish:beta
+```

constants.ts

@@ -0,0 +1,4 @@
+export const ICE_PKG_PACKAGES = [
+  'rax-compat',
+  'jsx-runtime',
+];

examples/basic-project/ice.config.ts → examples/basic-project/ice.config.mts

@@ -1,5 +1,7 @@
 import { defineConfig } from '@ice/app';
 import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
+import auth from '@ice/plugin-auth';
+import compatRax from '@ice/plugin-rax-compat';
 
 export default defineConfig({
   publicPath: '/',
@@ -14,6 +16,6 @@ export default defineConfig({
     return webpackConfig;
   },
   dropLogLevel: 'warn',
-  plugins: ['@ice/plugin-auth'],
+  plugins: [auth(), compatRax()],
   eslint: true,
-});
+});

examples/basic-project/package.json

@@ -11,8 +11,14 @@
   "dependencies": {
     "@ice/app": "workspace:*",
     "@ice/plugin-auth": "workspace:*",
+    "@ice/plugin-rax-compat": "workspace:*",
     "@ice/runtime": "workspace:*",
     "ahooks": "^3.3.8",
+    "rax": "^1.2.2",
+    "rax-image": "^2.4.1",
+    "rax-is-valid-element": "^1.0.0",
+    "rax-text": "^2.2.0",
+    "rax-view": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -22,6 +28,6 @@
     "browserslist": "^4.19.3",
     "regenerator-runtime": "^0.13.9",
     "speed-measure-webpack-plugin": "^1.5.0",
-    "webpack": "^5.72.0"
+    "webpack": "^5.73.0"
   }
-}
+}

examples/basic-project/src/app.tsx

@@ -1,4 +1,5 @@
-import { GetAppData, GetAppConfig } from 'ice';
+import { defineAppConfig } from 'ice';
+import { defineAuthConfig } from '@ice/plugin-auth/esm/types';
 
 if (process.env.ICE_CORE_ERROR_BOUNDARY === 'true') {
   console.error('__REMOVED__');
@@ -9,21 +10,17 @@ console.warn('__WARN__');
 console.error('__ERROR__');
 console.log('process.env.HAHA', process.env.HAHA);
 
-export const getAppData: GetAppData = () => {
-  return new Promise((resolve) => {
-    resolve({
-      title: 'gogogogo',
-      auth: {
-        admin: true,
-      },
-    });
-  });
-};
-
-export const getAppConfig: GetAppConfig = (appData) => {
+export const auth = defineAuthConfig(() => {
+  // fetch auth data
   return {
-    auth: {
-      initialAuth: appData?.auth,
+    initialAuth: {
+      admin: true,
     },
   };
-};
+});
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+});

examples/basic-project/src/components/Logo/index.jsx

@@ -0,0 +1,10 @@
+import { createElement } from 'rax';
+import Image from 'rax-image';
+
+import styles from './index.module.css';
+
+export default (props) => {
+  const { uri } = props;
+  const source = { uri };
+  return <Image className={styles.logo} source={source} />;
+};

examples/basic-project/src/components/Logo/index.module.css

@@ -0,0 +1,5 @@
+.logo {
+  width: 200rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+}