chore: RSC対応コンポーネント・非対応コンポーネントを機会的に洗い出して担保できる仕組みを導入する #4985
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,7 +32,7 @@ commands: | |
| - run: | | ||
| sudo corepack enable | ||
| sudo corepack prepare | ||
| pnpm install | ||
| - save_cache: | ||
| paths: | ||
| - node_modules | ||
|
|
@@ -57,6 +57,27 @@ commands: | |
| command: pnpm ui test-storybook:ci | ||
| - store_test_results: | ||
| path: junit.xml | ||
| run-e2e-test: | ||
| steps: | ||
| - run: | ||
| name: build and store smarthr-ui package | ||
| working_directory: packages/smarthr-ui | ||
| command: npx yalc publish | ||
|
There was a problem hiding this comment. 現状のSandboxだと、以下みたいに pnpm workspace 使って、開発中の smarthr-ui パッケージを取り込んでます。 smarthr-ui/sandbox/next/package.json Line 15 in 03210ba ただ pnpm の仕様なのか Next の仕様なのか定かでないんですが、このやり方だと import { Text } from 'smarthr-ui'とだけ読み込んでも、ツリーシェイキングとか関係なくエントリーファイル(index.ts) からすべてのモジュールが読み込まれてしまって、一つでもクライアントコンポーネントがあるとその時点でアウトという事象が発生してしまいます。。 ので、 There was a problem hiding this comment. CI で動かす分には手順通りに常に実行してくれるから良いんですが、ローカルで試したいときにこの手順が煩雑すぎるので、
There was a problem hiding this comment. 下記の２つの方法を試してみると良いかもです
バレルファイルはツリーシェイキングに対応していないみたいで、自前で
There was a problem hiding this comment. うひょー！試してみますね！ There was a problem hiding this comment. んあー、惜しいですね…。 const nextConfig = {
experimental: {
optimizePackageImports: ['smarthr-ui'],
},
}で、確かに開発サーバー起動後に、RSC対応コンポーネントのページを開いてもそのモジュールしか読み込まれずにRSCレンダリングに成功するんですが、その後RSC非対応コンポーネントのページを開くと useEffect とかが読み込まれてしまって、以降は RSC対応コンポーネントのページを開いてもエラーが出続けます…。 エラーが出ることを正常としてる本PRのユースケースがハックすぎるだけで、このオプション自体は有用そうですね！ There was a problem hiding this comment.
|
||
| - run: | ||
| name: Setup Next.js sandbox | ||
| working_directory: sandbox/next | ||
| command: npx yalc add smarthr-ui | ||
|
There was a problem hiding this comment. このコマンドで |
||
| - run: | ||
| name: Start Next.js sandbox | ||
| working_directory: sandbox/next | ||
| command: pnpm dev | ||
| background: true | ||
| - run: | ||
| name: Run E2E Test | ||
| working_directory: sandbox/next | ||
| command: | | ||
| pnpm playwright install chromium | ||
| pnpm playwright test | ||
|
There was a problem hiding this comment. やや惰性で Playwright を使った E2E テストにしてます。 ただ本PR時点での使い方だと、Playwright を使うほどでもない気がする。Vitest でも済ませられそうだし極論 curl してステータスコード見るだけでも完結しそう。 |
||
| run-chromatic: | ||
| steps: | ||
| - checkout | ||
|
|
@@ -100,6 +121,13 @@ jobs: | |
| - setup-for-test | ||
| - install-noto-sans-cjk-jp | ||
| - run-a11y-test | ||
| e2e-test: | ||
| executor: node-active-lts-browsers | ||
| working_directory: ~/repo | ||
| resource_class: large | ||
|
There was a problem hiding this comment. Next.js の開発サーバーを起動してリクエストを受け取りまくるって構造の都合上、large (4CPU) を使います。ややお高いですが、デカいプロダクトが何個もある org 全体で見たら誤差程度なので…。 |
||
| steps: | ||
| - setup-for-test | ||
| - run-e2e-test | ||
| chromatic-deployment: | ||
| executor: node-active-lts | ||
| resource_class: medium+ | ||
|
|
@@ -121,6 +149,8 @@ workflows: | |
| context: smarthr-dockerhub | ||
| - a11y-test: | ||
| context: smarthr-dockerhub | ||
| - e2e-test: | ||
| context: smarthr-dockerhub | ||
| - chromatic-deployment: | ||
| filters: | ||
| branches: | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
smarthr-ui パッケージだけでなく sandbox まで含めて全部インストールします。
sandbox は他のジョブでは不要なため無駄は生じますが、どのみちキャッシュが CircleCI に残るので問題はなさそう。