Topic/change state management

.github/workflows/create_heroku_review_app.yaml

@@ -1,13 +1,40 @@
 name: Review App
 on:
-  pull_request_target:
-    types: [opened]
+  pull_request:
+    types: [opened, synchronize]
 
 jobs:
   create-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - name: Get PR Number
+        id: get_pr_number
+        run: echo "::set-output name=pr_number::${{ github.event.pull_request.number }}"
+
+      - name: Check if PR Number is greater than 140
+        id: set_step_id
+        run: |
+          pr_number=${{ steps.get_pr_number.outputs.pr_number }}
+          if [ $pr_number -gt 140 ]; then
+            echo "::set-output name=step_id::true"
+          else
+            echo "::set-output name=step_id::false"
+          fi
+
+      - name: Display step_id
+        run: echo "Step ID is ${{ steps.set_step_id.outputs.step_id }}"
+
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
+        if: ${{ steps.set_step_id.outputs.step_id == 'true' }}
+        with:
+          action: destroy
+        env:
+          HEROKU_API_TOKEN: ${{ secrets.HEROKU_API_TOKEN }}
+          HEROKU_PIPELINE_ID: ${{ secrets.HEROKU_PIPELINE_ID }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
+        if: ${{ steps.set_step_id.outputs.step_id == 'true' }}
         with:
           action: create
         env:

.github/workflows/destroy_heroku_review_app.yaml

@@ -7,7 +7,7 @@ jobs:
   destroy-review-app:
     runs-on: ubuntu-latest
     steps:
-      - uses: fastruby/manage-heroku-review-app@9fa49f0320460f278c3687bc348dd0cbb18555dc # v1.3
+      - uses: kqito/manage-heroku-review-app@55e434ad5ac86f21cf2f7654de1566973fbc7046
         with:
           action: destroy
         env:

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative"
-}
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
+}

memo.md

@@ -0,0 +1,36 @@
+- TOPのサーバーレスポンスが一番重い
+  - clientはReact Router v7を使っている
+    - p-min-lazyを使って最低1秒まつようになっている
+      - サーバーサイドで読み込んでいるせい？ https://react-router-docs-ja.techtalk.jp/start/framework/data-loading#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%87%E3%83%BC%E3%82%BF%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0
+    - TOPページのフィードのネスト構造をprefetch関数で取得している
+    - storeでも同じfetchしてる？
+- fastifyのlogレベル有効か
+- /api/recommended/entranceのレスポンス時間が1.7秒
+  - carouselとitemを分けれるんじゃないか
+
+- SWR 入れた
+- HomePageの再レンダリング治らない
+  - 複数のコンテキストがまとまっている
+  - まずはlayoutだけ切り離す
+  - https://github.com/dhmk083/dhmk-zustand-lens これを上手く使えてない
+
+
+- 次のボトルネック
+  - main.js
+    - 161MBもあり、ダウンロードに時間がかかる
+      - webpackでビルドしている
+        - new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+        - バンドル分析する
+    - サーバー応答待ち自体も長い
+
+- ビルドのコマンドはpackage.json
+- source-mapの分割で半分になった
+
+https://webpack.js.org/guides/code-splitting/#bundle-analysis
+
+- 大きく二つ
+  - iconify+json
+  - ffmpeg+core
+
+- TOP以外のページテスト落ちる 
+

package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "@wsh-2025/configs": "workspace:*"
   },
-  "packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387",
+  "packageManager": "pnpm@10.6.5",
   "engines": {
     "node": "22.14.0"
   },

workspaces/client/package.json

@@ -35,6 +35,7 @@
     "react-router-dom": "7.0.2",
     "react-use": "17.6.0",
     "setimmediate": "1.0.5",
+    "swr": "2.3.3",
     "tiny-invariant": "1.3.3",
     "type-fest": "4.29.1",
     "use-callback-ref": "1.3.3",
@@ -80,7 +81,7 @@
   },
   "wireit": {
     "build": {
-      "command": "webpack",
+      "command": "webpack --profile --json > stats.json",
       "files": [
         "../../pnpm-lock.yaml",
         "../schema/src/**/*",
@@ -101,4 +102,4 @@
       "command": "prettier --write ."
     }
   }
-}
+}

workspaces/client/src/app/createRoutes.tsx

@@ -11,97 +11,100 @@ export function createRoutes(store: ReturnType<typeof createStore>): RouteObject
         {
           index: true,
           async lazy() {
-            const { HomePage, prefetch } = await lazy(
+            const { HomePage } = await lazy(
               import('@wsh-2025/client/src/pages/home/components/HomePage'),
               1000,
             );
             return {
               Component: HomePage,
-              async loader() {
-                return await prefetch(store);
-              },
+              // async loader() {
+              //   return await prefetch(store);
+              // },
             };
           },
         },
         {
           async lazy() {
-            const { EpisodePage, prefetch } = await lazy(
+            const { EpisodePage } = await lazy(
               import('@wsh-2025/client/src/pages/episode/components/EpisodePage'),
               1000,
             );
             return {
               Component: EpisodePage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              // async loader({ params }) {
+              //   return await prefetch(store, params);
+              // },
             };
           },
           path: '/episodes/:episodeId',
         },
         {
           async lazy() {
-            const { prefetch, ProgramPage } = await lazy(
+            const { ProgramPage } = await lazy(
               import('@wsh-2025/client/src/pages/program/components/ProgramPage'),
               1000,
             );
             return {
               Component: ProgramPage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              // async loader({ params }) {
+              //   return await prefetch(store, params);
+              // },
             };
           },
           path: '/programs/:programId',
         },
         {
           async lazy() {
-            const { prefetch, SeriesPage } = await lazy(
+            const { SeriesPage } = await lazy(
               import('@wsh-2025/client/src/pages/series/components/SeriesPage'),
               1000,
             );
             return {
               Component: SeriesPage,
-              async loader({ params }) {
-                return await prefetch(store, params);
-              },
+              // async loader({ params }) {
+              //   return await prefetch(store, params);
+              // },
             };
           },
           path: '/series/:seriesId',
         },
         {
           async lazy() {
-            const { prefetch, TimetablePage } = await lazy(
+            const { TimetablePage } = await lazy(
               import('@wsh-2025/client/src/pages/timetable/components/TimetablePage'),
               1000,
             );
             return {
               Component: TimetablePage,
-              async loader() {
-                return await prefetch(store);
-              },
+              // async loader() {
+              //   return await prefetch(store);
+              // },
             };
           },
           path: '/timetable',
         },
         {
           async lazy() {
-            const { NotFoundPage, prefetch } = await lazy(
+            const { NotFoundPage } = await lazy(
               import('@wsh-2025/client/src/pages/not_found/components/NotFoundPage'),
               1000,
             );
             return {
               Component: NotFoundPage,
-              async loader() {
-                return await prefetch(store);
-              },
+              // async loader() {
+              //   return await prefetch(store);
+              // },
             };
           },
           path: '*',
         },
       ],
       Component: Document,
       async loader() {
-        return await prefetch(store);
+        console.log('Document prefetch start');
+        const res = await prefetch(store);
+        console.log('Document prefetch end', res);
+        return res;
       },
       path: '/',
     },

workspaces/client/src/app/createStore.ts

@@ -1,4 +1,4 @@
-import { withLenses } from '@dhmk/zustand-lens';
+import { lens, withLenses } from '@dhmk/zustand-lens';
 import _ from 'lodash';
 import { createStore as createZustandStore } from 'zustand/vanilla';
 
@@ -21,7 +21,7 @@ interface Props {
 export const createStore = ({ hydrationData }: Props) => {
   const store = createZustandStore(
     withLenses(() => ({
-      features: {
+      features: lens(() => ({
         auth: createAuthStoreSlice(),
         channel: createChannelStoreSlice(),
         episode: createEpisodeStoreSlice(),
@@ -30,12 +30,12 @@ export const createStore = ({ hydrationData }: Props) => {
         recommended: createRecommendedStoreSlice(),
         series: createSeriesStoreSlice(),
         timetable: createTimetableStoreSlice(),
-      },
-      pages: {
+      })),
+      pages: lens(() => ({
         episode: createEpisodePageStoreSlice(),
         program: createProgramPageStoreSlice(),
         timetable: createTimetablePageStoreSlice(),
-      },
+      })),
     })),
   );