refactor: convert react-app-scripts to vite

azu · May 6, 2024 · 8bf1c72 · 8bf1c72
1 parent 0f7bb39
commit 8bf1c72
Show file tree

Hide file tree

Showing 33 changed files with 682 additions and 136 deletions.
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,19 @@
   "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",
+    "build": "vite build",
+    "build:worker": "vite build vite.config.worker.js",
     "eject": "react-scripts eject",
-    "start": "npm-run-all build:worker start:*",
+    "start": "vite",
     "start:react": "react-scripts start",
     "test": "react-scripts test --env=node",
     "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,7 +57,7 @@
   },
   "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",
     "express": "^4.16.3",
@@ -67,14 +68,14 @@
     "prettier": "^2.4.1",
     "ts-loader": "^6.0.2",
     "typescript": "^3.5.1",
-    "webpack": "4.29.6",
-    "webpack-cli": "^3.3.6",
-    "workbox-cli": "^3.1.0"
+    "workbox-cli": "^3.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.1",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "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/src/domain/Hatebu/__tests__/BookmarkSearch-test.ts b/src/domain/Hatebu/__tests__/BookmarkSearch-test.ts
@@ -1,7 +1,7 @@
-import { matchBookmarkItem } from "../BookmarkSearch";
-import { BookmarkItem } from "../BookmarkItem";
-import * as assert from "assert";
-import { BookmarkDate } from "../BookmarkDate";
+import { matchBookmarkItem } from "../BookmarkSearch.js";
+import { BookmarkItem } from "../BookmarkItem.js";
+import * as assert from "node:assert";
+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;

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -1 +1,64 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />
+
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare module "*.avif" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.bmp" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.gif" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.jpg" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.jpeg" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.png" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.webp" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.svg" {
+    import * as React from "react";
+
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+
+    const src: string;
+    export default src;
+}
+
+declare module "*.module.css" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
+
+declare module "*.module.scss" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
+
+declare module "*.module.sass" {
+    const classes: { readonly [key: string]: string };
+    export default classes;
+}
diff --git a/src/setupProxy.js b/src/setupProxy.js
@@ -1,5 +1,6 @@
-const proxy = require("http-proxy-middleware");
-module.exports = function (app) {
+import proxy from "http-proxy-middleware";
+
+export default function (app) {
     app.use(
         proxy("/hatebu", {
             target: "https://b.hatena.ne.jp",
@@ -25,4 +26,4 @@ module.exports = function (app) {
             }
         })
     );
-};
+}
diff --git a/src/use-case/CreateHatebuUserUseCase.ts b/src/use-case/CreateHatebuUserUseCase.ts
@@ -1,6 +1,6 @@
 import { UseCase } from "almin";
-import { createHatebu } from "../domain/Hatebu/HatebuFactory";
-import { HatebuRepository, hatebuRepository } from "../infra/repository/HatebuRepository";
+import { createHatebu } from "../domain/Hatebu/HatebuFactory.js";
+import { HatebuRepository, hatebuRepository } from "../infra/repository/HatebuRepository.js";
 
 export const createCreateHatebuUserUseCase = () => {
     return new CreateHatebuUserUseCase({

diff --git a/src/use-case/InitializeSystemUseCase.ts b/src/use-case/InitializeSystemUseCase.ts
@@ -1,6 +1,6 @@
 import { UseCase } from "almin";
-import { HatebuRepository, hatebuRepository } from "../infra/repository/HatebuRepository";
-import { AppSessionRepository, appSessionRepository } from "../infra/repository/AppSessionRepository";
+import { HatebuRepository, hatebuRepository } from "../infra/repository/HatebuRepository.js";
+import { AppSessionRepository, appSessionRepository } from "../infra/repository/AppSessionRepository.js";
 
 export const createInitializeSystemUseCase = () => {
     return new InitializeSystemUseCase({