refactor: convert react-app-scripts to vite (#14)

* update deps * refactor: convert react-app-scripts to vite * CI: update node versions * CI: update node * migrate to vitest * support netlify
azu · May 6, 2024 · 9e75656 · 9e75656
1 parent 18278a5
commit 9e75656
Show file tree

Hide file tree

Showing 34 changed files with 7,494 additions and 4,987 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -1,22 +1,40 @@
 name: test
 on: [push, pull_request]
-env:
-  CI: true
 jobs:
   test:
     name: "Test on Node.js ${{ matrix.node-version }}"
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 14, 16 ]
+        node-version: [ 20 ]
     steps:
       - name: checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
+          cache: yarn
       - name: Install
         run: yarn install
       - name: Test
         run: yarn test
+
+  build:
+    name: "Build on Node.js ${{ matrix.node-version }}"
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [ 20 ]
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+      - name: Install
+        run: yarn install
+      - name: Test
+        run: yarn run build
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -10,15 +10,17 @@
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
     <link rel="canonical" href="https://hatebupwa.netlify.app">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="https://hatebupwa.netlify.app/manifest.json">
+    <link rel="shortcut icon" href="https://hatebupwa.netlify.app/favicon.ico">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/img/hatenabookmark/favicon-192.png">
     <title>はてなブックマーク検索PWA</title>
+    <script type="module" src="src/index.tsx"></script>
 </head>
 <body>
 <a class="github-ribbon" href="https://github.com/azu/hatebupwa"><img
         style="position: absolute; top: 0; right: 0; border: 0;"
-        src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+        src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png"
+        alt="Fork me on GitHub"></a>
 <noscript>
     You should enable JavaScript.
 </noscript>

diff --git a/package.json b/package.json
@@ -4,18 +4,16 @@
   "description": "Hatena Bookmark search app.",
   "homepage": "https://hatebupwa.netlify.app/",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "npm-run-all build:worker build:react sw:generate",
-    "build:react": "react-scripts build",
-    "build:worker": "webpack --mode production --config webpack.worker.config.js",
-    "eject": "react-scripts eject",
-    "start": "npm-run-all build:worker start:*",
-    "start:react": "react-scripts start",
-    "test": "react-scripts test --env=node",
+    "build": "vite build",
+    "build:worker": "vite build vite.config.worker.js",
+    "test": "vitest run",
     "sw:generate": "workbox generateSW workbox-config.js",
     "package": "node tools/package-app.js",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css}\"",
-    "prepare": "git config --local core.hooksPath .githooks"
+    "prepare": "git config --local core.hooksPath .githooks",
+    "dev": "vite"
   },
   "prettier": {
     "singleQuote": false,
@@ -56,9 +54,10 @@
   },
   "devDependencies": {
     "@types/jest": "^22.2.2",
-    "@types/node": "^9.6.2",
+    "@types/node": "^20.11.5",
     "@types/react": "16.8.24",
     "@types/react-dom": "16.8.5",
+    "@vitejs/plugin-react": "^4.2.1",
     "express": "^4.16.3",
     "http-proxy-middleware": "^0.19.1",
     "lint-staged": "^12.1.2",
@@ -67,14 +66,14 @@
     "prettier": "^2.4.1",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.1",
-    "webpack": "4.29.6",
-    "webpack-cli": "^3.3.6",
+    "vite": "^5.1.1",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^1.6.0",
     "workbox-cli": "^3.1.0"
   },
   "resolutions": {
     "@types/react": "16.3.8",
-    "@types/react-dom": "16.0.5",
-    "webpack": "4.29.6"
+    "@types/react-dom": "16.0.5"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,css}": [

diff --git a/src/Context.ts b/src/Context.ts
@@ -1,10 +1,10 @@
 import { Context, StoreGroup } from "almin";
 import { createReactContext } from "@almin/react-context";
-import { UserFormContainerStore } from "./container/UserFormContainer/UserFormContainerStore";
-import { SearchContainerStore } from "./container/SearchContainer/SearchContainerStore";
+import { UserFormContainerStore } from "./container/UserFormContainer/UserFormContainerStore.js";
+import { SearchContainerStore } from "./container/SearchContainer/SearchContainerStore.js";
 import { AlminLogger } from "almin-logger";
-import { hatebuRepository } from "./infra/repository/HatebuRepository";
-import { AppStore } from "./container/AppStore";
+import { hatebuRepository } from "./infra/repository/HatebuRepository.js";
+import { AppStore } from "./container/AppStore.js";
 
 export const AppStoreGroup = new StoreGroup({
     userFormContainer: new UserFormContainerStore({

diff --git a/src/component/HatebuSearchList/HatebuSearchList.tsx b/src/component/HatebuSearchList/HatebuSearchList.tsx
@@ -11,11 +11,12 @@ import {
 import * as Comlink from "comlink";
 import { HatebuSearchListItem } from "../../container/SearchContainer/SearchContainerStore";
 import { KeyboardEvent } from "react";
-
-const format = require("date-fns/format");
-const debouncePromise = require("debounce-promise");
-const Highlighter = require("react-highlight-words");
-
+import format from "date-fns/format";
+// @ts-expect-error: no types
+import debouncePromise from "debounce-promise";
+// @ts-expect-error: no types
+import Highlighter from "react-highlight-words";
+import FilterWorker from "../../../workers/filter?worker";
 export interface HatebuSearchListProps {
     autoFocus: boolean;
     items: HatebuSearchListItem[];
@@ -80,7 +81,7 @@ export class HatebuSearchList extends React.PureComponent<HatebuSearchListProps,
     private workerAPI!: import("../../../workers/filter").WorkerAPI;
 
     componentDidMount() {
-        this.filterWorker = new Worker(process.env.PUBLIC_URL + "/workers/filter.js");
+        this.filterWorker = new FilterWorker();
         this.workerAPI = Comlink.wrap(this.filterWorker);
         if (this.props.autoFocus) {
             this.focus();

diff --git a/src/container/AppStore.ts b/src/container/AppStore.ts
@@ -3,7 +3,7 @@ import {
     FailToFetchHatenaBookmarkPayload,
     FinishFetchHatenaBookmarkPayload,
     StartFetchHatenaBookmarkPayload
-} from "../use-case/hatebu-api/FetchHatenaBookmarkPayload";
+} from "../use-case/hatebu-api/FetchHatenaBookmarkPayload.js";
 
 export interface AppState {
     isFetching: boolean;

diff --git a/src/container/SearchContainer/SearchContainerStore.ts b/src/container/SearchContainer/SearchContainerStore.ts
@@ -1,7 +1,7 @@
 import { Payload, Store } from "almin";
-import { HatebuRepository } from "../../infra/repository/HatebuRepository";
-import { BookmarkItem } from "../../domain/Hatebu/BookmarkItem";
-import { SwitchCurrentHatebuUserUseCasePayload } from "../../use-case/SwitchCurrentHatebuUserUseCase";
+import { HatebuRepository } from "../../infra/repository/HatebuRepository.js";
+import { BookmarkItem } from "../../domain/Hatebu/BookmarkItem.js";
+import { SwitchCurrentHatebuUserUseCasePayload } from "../../use-case/SwitchCurrentHatebuUserUseCase.js";
 
 export interface HatebuSearchListItem extends BookmarkItem {}
 

diff --git a/src/container/UserFormContainer/UserFormContainerStore.ts b/src/container/UserFormContainer/UserFormContainerStore.ts
@@ -1,6 +1,6 @@
 import { Payload, Store } from "almin";
-import { HatebuRepository } from "../../infra/repository/HatebuRepository";
-import { SwitchCurrentHatebuUserUseCasePayload } from "../../use-case/SwitchCurrentHatebuUserUseCase";
+import { HatebuRepository } from "../../infra/repository/HatebuRepository.js";
+import { SwitchCurrentHatebuUserUseCasePayload } from "../../use-case/SwitchCurrentHatebuUserUseCase.js";
 
 export interface UserFormContainerState {
     name?: string;

diff --git a/src/domain/AppSession/AppSession.ts b/src/domain/AppSession/AppSession.ts
@@ -1,5 +1,5 @@
 import { Entity, Identifier, Serializer } from "ddd-base";
-import { Hatebu, HatebuIdentifier } from "../Hatebu/Hatebu";
+import { Hatebu, HatebuIdentifier } from "../Hatebu/Hatebu.js";
 
 export const AppSessionConverter: Serializer<AppSession, AppSessionJSON> = {
     toJSON(entity) {

diff --git a/src/domain/AppSession/AppSessionFactory.ts b/src/domain/AppSession/AppSessionFactory.ts
@@ -1,4 +1,4 @@
-import { AppSession, AppSessionIdentifier } from "./AppSession";
+import { AppSession, AppSessionIdentifier } from "./AppSession.js";
 import { ulid } from "ulid";
 
 export const createAppSession = () => {

diff --git a/src/domain/Hatebu/Bookmark.ts b/src/domain/Hatebu/Bookmark.ts
@@ -1,7 +1,7 @@
 import { Identifier, Serializer, ValueObject } from "ddd-base";
-import { BookmarkItem, BookmarkItemConverter, BookmarkItemJSON } from "./BookmarkItem";
-import { matchBookmarkItem } from "./BookmarkSearch";
-import { BookmarkDate } from "./BookmarkDate";
+import { BookmarkItem, BookmarkItemConverter, BookmarkItemJSON } from "./BookmarkItem.js";
+import { matchBookmarkItem } from "./BookmarkSearch.js";
+import { BookmarkDate } from "./BookmarkDate.js";
 import uniqBy from "lodash.uniqby";
 
 export const BookmarkConverter: Serializer<Bookmark, BookmarkJSON> = {

diff --git a/src/domain/Hatebu/BookmarkItem.ts b/src/domain/Hatebu/BookmarkItem.ts
@@ -1,5 +1,5 @@
 import { Serializer, ValueObject } from "ddd-base";
-import { BookmarkDate } from "./BookmarkDate";
+import { BookmarkDate } from "./BookmarkDate.js";
 
 export const BookmarkItemConverter: Serializer<BookmarkItem, BookmarkItemJSON> = {
     fromJSON(json) {

diff --git a/src/domain/Hatebu/BookmarkItemFactory.ts b/src/domain/Hatebu/BookmarkItemFactory.ts
@@ -1,5 +1,5 @@
-import { BookmarkItem } from "./BookmarkItem";
-import { BookmarkDate } from "./BookmarkDate";
+import { BookmarkItem } from "./BookmarkItem.js";
+import { BookmarkDate } from "./BookmarkDate.js";
 
 export type RawHatenaBookmark = {
     title: string;

diff --git a/src/domain/Hatebu/BookmarkSearch.ts b/src/domain/Hatebu/BookmarkSearch.ts
@@ -1,7 +1,7 @@
-import { BookmarkItem } from "./BookmarkItem";
-
-const memoize = require("micro-memoize").default;
-const regexCombiner = require("regex-combiner");
+import { BookmarkItem } from "./BookmarkItem.js";
+import memoize from "micro-memoize";
+// @ts-expect-error no type definition
+import regexCombiner from "regex-combiner";
 
 const stringifyBookmarkItem = (bookmark: BookmarkItem): string => {
     return `${bookmark.props.title}\t${bookmark.props.url}\t${

diff --git a/src/domain/Hatebu/Hatebu.ts b/src/domain/Hatebu/Hatebu.ts
@@ -1,6 +1,6 @@
 import { Entity, Identifier, Serializer } from "ddd-base";
-import { Bookmark, BookmarkConverter, BookmarkJSON } from "./Bookmark";
-import { BookmarkItem } from "./BookmarkItem";
+import { Bookmark, BookmarkConverter, BookmarkJSON } from "./Bookmark.js";
+import { BookmarkItem } from "./BookmarkItem.js";
 
 export const HatebuConverter: Serializer<Hatebu, HatebuJSON> = {
     fromJSON(json) {

diff --git a/src/domain/Hatebu/HatebuFactory.ts b/src/domain/Hatebu/HatebuFactory.ts
@@ -1,6 +1,6 @@
-import { Hatebu, HatebuIdentifier } from "./Hatebu";
-import { Bookmark } from "./Bookmark";
-import { BookmarkDate } from "./BookmarkDate";
+import { Hatebu, HatebuIdentifier } from "./Hatebu.js";
+import { Bookmark } from "./Bookmark.js";
+import { BookmarkDate } from "./BookmarkDate.js";
 
 export const createHatebu = (userName: string) => {
     if (userName.length === 0) {

diff --git a/...n/Hatebu/__tests__/BookmarkSearch-test.ts → ...n/Hatebu/__tests__/BookmarkSearch.test.ts b/...n/Hatebu/__tests__/BookmarkSearch-test.ts → ...n/Hatebu/__tests__/BookmarkSearch.test.ts
@@ -1,7 +1,8 @@
-import { matchBookmarkItem } from "../BookmarkSearch";
-import { BookmarkItem } from "../BookmarkItem";
-import * as assert from "assert";
-import { BookmarkDate } from "../BookmarkDate";
+import { describe, it } from "vitest";
+import * as assert from "node:assert";
+import { BookmarkItem } from "../BookmarkItem.js";
+import { matchBookmarkItem } from "../BookmarkSearch.js";
+import { BookmarkDate } from "../BookmarkDate.js";
 
 const createExampleBookmark = () => {
     return new BookmarkItem({

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,15 +3,14 @@ import * as ReactDOM from "react-dom";
 import { initializeIcons } from "@uifabric/icons";
 import { App } from "./container/App";
 import { Provider } from "./Context";
-// Register icons and pull the fonts from the default SharePoint cdn:
-initializeIcons();
 
-// require all css files
-function requireAll(r: any) {
-    r.keys().forEach(r);
+const cssFiles = import.meta.glob("./**/*.css");
+for (const path in cssFiles) {
+    cssFiles[path]();
 }
+// Register icons and pull the fonts from the default SharePoint cdn:
 
-requireAll((require as any).context("./", true, /\.css$/));
+initializeIcons();
 
 ReactDOM.render(
     <Provider>

diff --git a/src/infra/API/HatenaBookmarkFetcher.ts b/src/infra/API/HatenaBookmarkFetcher.ts
@@ -1,9 +1,9 @@
-import { RawHatenaBookmark } from "../../domain/Hatebu/BookmarkItemFactory";
-import { BookmarkDate } from "../../domain/Hatebu/BookmarkDate";
-
+import { RawHatenaBookmark } from "../../domain/Hatebu/BookmarkItemFactory.js";
+import { BookmarkDate } from "../../domain/Hatebu/BookmarkDate.js";
+import format from "date-fns/format";
+// @ts-expect-error no types
+import { parse } from "hatebu-mydata-parser";
 type AsocialBookmarkItem = import("asocial-bookmark").AsocialBookmarkItem;
-const format = require("date-fns/format");
-const parse = require("hatebu-mydata-parser").parse;
 export const fetchHatenaBookmark = (userName: string, sinceTime?: BookmarkDate): Promise<RawHatenaBookmark[]> => {
     // Support asocial-bookmark https://github.com/azu/asocial-bookmark
     // TODO: undocument ways

diff --git a/src/infra/repository/AppSessionRepository.ts b/src/infra/repository/AppSessionRepository.ts
@@ -1,7 +1,7 @@
 import { NonNullableRepository } from "ddd-base";
-import { AppSession, AppSessionConverter, AppSessionJSON } from "../../domain/AppSession/AppSession";
-import { createStorageInstance } from "./StorageManger";
-import { createAppSession } from "../../domain/AppSession/AppSessionFactory";
+import { AppSession, AppSessionConverter, AppSessionJSON } from "../../domain/AppSession/AppSession.js";
+import { createStorageInstance } from "./StorageManger.js";
+import { createAppSession } from "../../domain/AppSession/AppSessionFactory.js";
 
 export class AppSessionRepository extends NonNullableRepository<AppSession> {
     private storage: LocalForage;

diff --git a/src/infra/repository/HatebuRepository.ts b/src/infra/repository/HatebuRepository.ts
@@ -1,6 +1,6 @@
 import { NullableRepository } from "ddd-base";
-import { Hatebu, HatebuConverter, HatebuIdentifier, HatebuJSON } from "../../domain/Hatebu/Hatebu";
-import { createStorageInstance } from "./StorageManger";
+import { Hatebu, HatebuConverter, HatebuIdentifier, HatebuJSON } from "../../domain/Hatebu/Hatebu.js";
+import { createStorageInstance } from "./StorageManger.js";
 
 export class HatebuRepository extends NullableRepository<Hatebu> {
     private storage: LocalForage;

diff --git a/src/infra/repository/StorageManger.ts b/src/infra/repository/StorageManger.ts
@@ -1,7 +1,7 @@
 // MIT © 2017 azu
-import * as localForage from "localforage";
-
-const memoryStorageDriver = require("localforage-memoryStorageDriver");
+import localForage from "localforage";
+// @ts-expect-error no types
+import memoryStorageDriver from "localforage-memoryStorageDriver";
 
 export class StorageManger {
     currentDriver?: string;