Root/vite7

.github/workflows/ci-root.yml

@@ -3,7 +3,7 @@ name: CI Root
 on:
   push:
     branches:
-      - 'root/*'
+      - "root/*"
 
 jobs:
   changed-files:
@@ -41,7 +41,7 @@ jobs:
           pnpm install --frozen-lockfile
           pnpm run lint
 
-  typecheck:
+  build:
     needs: changed-files
     runs-on: ubuntu-22.04
     if: needs.changed-files.outputs.files != 'true'
@@ -54,4 +54,4 @@ jobs:
           cache: pnpm
       - run: |
           pnpm install --frozen-lockfile
-          pnpm run --recursive typecheck
+          pnpm run build

.github/workflows/ci-vanilla.yml

@@ -3,7 +3,7 @@ name: CI Vanilla
 on:
   push:
     branches:
-      - "*/*"
+      - "!root/*"
     paths:
       - "vanilla/**"
       - ".github/workflows/ci-vanilla.yml"
@@ -63,7 +63,7 @@ jobs:
           pnpm install --frozen-lockfile --filter "@hdoc/dev-challenges" --filter "$app_name"...
           pnpm run lint:vanilla vanilla/"$app_name"
 
-  typecheck:
+  build:
     needs: changed-files
     runs-on: ubuntu-22.04
     if: needs.changed-files.outputs.files != 'true'
@@ -77,7 +77,7 @@ jobs:
       - run: |
           app_name='${{ needs.changed-files.outputs.app_name }}'
           pnpm install --frozen-lockfile --filter "@hdoc/dev-challenges" --filter "$app_name"...
-          pnpm --filter "$app_name" typecheck
+          pnpm --filter "$app_name" build
 
   test-unit:
     needs: changed-files

.github/workflows/deploy.yml

@@ -53,7 +53,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Build challenges
-        run: pnpm run build
+        run: pnpm run build --deploy
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

TODO.md

@@ -1,31 +1,32 @@
 # TODO
 
-## Vite
+## All apps
 
-### Update to `v7`
+- try to remove `typescript` from `devDependencies`. ensure all projects are
+  using the same version of `typescript`. See [Running scripts in workspaces](https://pnpm.io/9.x/cli/run#details)
 
-- Ensure `github-jobs`, `quote-generator` and `weather-app` uses version from
-  `catalog:`
+## Vanilla
 
-### Use `build.rollupOptions.output.manualChunks` instead of `splitVendorChunkPlugin()`
+- ensure all apps are type-checked before building
 
-Create custom `vite-config` package that exports this option. By default, it
-will split into `index-<hash>.(js|css)` and `vendor-<hash>.(js|css)`. i.e.:
+## Legacy
 
-```js
-{
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id) {}
-      }
-    }
-  }
-}
-```
+- remove `engines` field from `package.json` files. affected apps:
 
-Affected files:
+  - `button-component`
+  - `input-component`
+  - `country-quiz`
+  - `todo-app`
+  - `windbnb`
 
-- `legacy/country-quiz/vite.config.ts`
-- `legacy/windbnb/vite.config.ts`
-- `_templates/app/react/vite.config.ts.hygen`
+  `pnpm` version is set in `packageManager` of root `package.json` and
+  `node` version is set in root `.nvmrc`.
+
+- update `tsconfig.*.json` files to match [create-vite@8.2.0][create-vite@8.2.0]
+- update `eslint` to `v9` and config files to match [create-vite@8.2.0][create-vite@8.2.0]
+- migrate content-only apps to `astro`. pre-render content to static HTML.
+- update projects using `astro` to use `astro@v5`
+  - `@astrojs/upgrade` requires an explicit version in `package.json` instead
+    of `catalog:` protocol
+
+[create-vite@8.2.0]: https://github.com/vitejs/vite/tree/create-vite%408.2.0/packages/create-vite/template-react-ts

_templates/app/react/package.json.hygen

@@ -28,9 +28,9 @@ to: apps/<%= name %>/package.json
     "react-dom": "catalog:"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7"
   }
 }

_templates/app/react/vite.config.ts.hygen

@@ -2,10 +2,22 @@
 to: apps/<%= name %>/vite.config.ts
 ---
 
-import { defineConfig, splitVendorChunkPlugin } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), splitVendorChunkPlugin()],
+  plugins: [react()],
+  // TODO: choose a sub-path for `react` apps
+  // base: '/dev-challenges/PATH/<%= name %>',
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules")) return "vendor";
+        },
+      },
+    },
+  },
+  // TODO: add `resolve.alias` option
 })

_templates/app/vanilla/package.json.hygen

@@ -16,7 +16,7 @@ to: vanilla/<%= name %>/package.json
     "@lib/dom": "workspace:"
   },
   "devDependencies": {
-    "vite": "catalog:",
+    "vite": "catalog:vite7",
     "vite-plugin-html-minifier": "workspace:"
   }
 }

legacy/button-component/lib/css/styles.scss

@@ -1,6 +1,6 @@
-@import "button.scss";
-@import "button-outline.scss";
-@import "button-text.scss";
+@use "button.scss";
+@use "button-outline.scss";
+@use "button-text.scss";
 
-@import "sizes.scss";
-@import "colors.scss";
+@use "sizes.scss";
+@use "colors.scss";

legacy/button-component/package.json

@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@hrc/type-utils": "catalog:",
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7"
   },
   "engines": {
     "node": ">=18",

legacy/country-quiz/package.json

@@ -28,11 +28,11 @@
     "zustand": "catalog:"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:",
-    "vitest": "catalog:",
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7",
+    "vitest": "catalog:vite7",
     "vite-plugin-hrc-import": "catalog:"
   },
   "engines": {

legacy/country-quiz/vite.config.ts

@@ -1,12 +1,24 @@
 import path from 'path'
-import { defineConfig, splitVendorChunkPlugin } from 'vite'
+import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import hrcImportPlugin from 'vite-plugin-hrc-import'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), splitVendorChunkPlugin(), hrcImportPlugin()],
+  // NOTE: `vite-plugin-hrc-import` IS COMPATIBLE with vite@v7, but requires
+  // updating its `peerDependencies` to allow `vite@6` and `vite@7` to suppress
+  // `unmet peer` warnings.
+  plugins: [react(), hrcImportPlugin()],
   base: '/dev-challenges/legacy/country-quiz',
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) return 'vendor';
+        },
+      },
+    },
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src')

legacy/github-jobs/package.json

@@ -33,6 +33,7 @@
     "react-dom": "catalog:",
     "react-paginate": "catalog:",
     "react-router-dom": "catalog:",
+    "vite": "catalog:",
     "zod": "catalog:",
     "zustand": "catalog:"
   },

legacy/input-component/lib/css/styles.scss

@@ -1,6 +1,6 @@
-@import './colors.scss';
+@use './colors.scss';
 
-@import './label.scss';
-@import './input.scss';
-@import './helper-text.scss';
-@import './icon.scss'
+@use './label.scss';
+@use './input.scss';
+@use './helper-text.scss';
+@use './icon.scss'

legacy/input-component/package.json

@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@hrc/type-utils": "catalog:",
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7"
   },
   "engines": {
     "node": ">=18",

legacy/quote-generator/package.json

@@ -29,6 +29,7 @@
     "astro": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
+    "vite": "catalog:",
     "zod": "catalog:"
   },
   "devDependencies": {

legacy/todo-app/package.json

@@ -27,10 +27,10 @@
     "zustand": "catalog:"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:",
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7",
     "vite-plugin-hrc-import": "catalog:"
   },
   "engines": {

legacy/weather-app/package.json

@@ -31,6 +31,7 @@
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-loading-skeleton": "catalog:",
+    "vite": "catalog:",
     "zod": "catalog:",
     "zustand": "catalog:"
   },

legacy/windbnb/TODO.md

@@ -1 +1,6 @@
+# TODO
+
+- use smaller images for lower screen sizes
+- zoom-in image on hover
+- try to add a background to `<StayCard />` on hover
 - Apply lazy load to `<SearchDrawer />`

legacy/windbnb/package.json

@@ -30,10 +30,10 @@
   },
   "devDependencies": {
     "@hrc/type-utils": "catalog:",
-    "@vitejs/plugin-react": "catalog:",
-    "sass": "catalog:",
-    "typescript": "catalog:",
-    "vite": "catalog:"
+    "@vitejs/plugin-react": "catalog:vite7",
+    "sass": "catalog:vite7",
+    "typescript": "catalog:vite7",
+    "vite": "catalog:vite7"
   },
   "engines": {
     "node": ">=18",