build: migration to rspack(rsbuild)

.github/workflows/ci.yml

@@ -22,6 +22,7 @@ jobs:
  - run: npm ci
  - run: npm run lint
  # - run: npm test
+ - run: npm run tsc
  - run: npm run build
 
  - run: npm run semantic-release

.gitignore

@@ -1,5 +1,6 @@
 # Project specifics
 /build
+/dist
 *.zip
 **/.DS_Store
 
@@ -64,4 +65,4 @@ typings/
 # dotenv environment variables file
 .env
 
-*storybook.log
+*storybook.log

package.json

@@ -15,21 +15,17 @@
  "scripts": {
  "lint": "eslint ./src",
  "test": "jest --verbose",
- "clear": "rimraf ./build && mkdirp ./build",
- "start": "npm-run-all clear build:assets start:code",
- "start:code": "cross-env NODE_ENV=development webpack -w",
- "dev": "npm start",
- "build": "npm-run-all clear build:*",
- "build:assets": "cp -r ./src/assets ./src/_locales ./src/manifest.json ./build",
- "build:code": "cross-env NODE_ENV=production webpack",
- "zip": "bestzip build.zip ./build",
- "release": "node ./scripts/release.js",
- "deploy": "node ./scripts/deploy.js",
+ "dev": "rsbuild build -w --mode=development",
+ "tsc": "tsc --noEmit",
+ "build": "rsbuild build",
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build",
  "prepare": "husky",
  "semantic-release": "node -r dotenv/config ./node_modules/.bin/semantic-release"
  },
+ "browserslist": [
+ "last 5 chrome versions"
+ ],
  "release": {
  "branches": [
  "master"
@@ -42,11 +38,17 @@
  {
  "extensionId": "ojhhcfhabhligodffabdhcaoicecaboo",
  "asset": "e-clock_${branch.name}_v${nextRelease.version}.zip",
- "distFolder": "build",
  "target": "draft"
  }
  ],
- "@semantic-release/github"
+ [
+ "@semantic-release/github",
+ {
+ "assets": [
+ "e-clock*.zip"
+ ]
+ }
+ ]
  ]
  },
  "commitlint": {
@@ -63,61 +65,48 @@
  },
  "devDependencies": {
  "@chromatic-com/storybook": "^1.6.1",
- "@commitlint/cli": "^19.3.0",
+ "@commitlint/cli": "^19.4.0",
  "@commitlint/config-conventional": "^19.2.2",
- "@storybook/addon-essentials": "^8.2.2",
- "@storybook/addon-interactions": "^8.2.2",
- "@storybook/addon-links": "^8.2.2",
- "@storybook/addon-onboarding": "^8.2.2",
- "@storybook/addon-styling-webpack": "^1.0.0",
- "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
- "@storybook/blocks": "^8.2.2",
- "@storybook/preset-scss": "^1.0.3",
- "@storybook/react": "^8.2.2",
- "@storybook/react-webpack5": "^8.2.2",
- "@storybook/test": "^8.2.2",
- "@types/chrome": "^0.0.268",
+ "@rsbuild/core": "^1.0.1-beta.11",
+ "@rsbuild/plugin-react": "^1.0.1-beta.11",
+ "@rsbuild/plugin-sass": "^1.0.1-beta.11",
+ "@rsbuild/plugin-type-check": "^1.0.1-beta.11",
+ "@storybook/addon-essentials": "^8.2.8",
+ "@storybook/addon-interactions": "^8.2.8",
+ "@storybook/addon-links": "^8.2.8",
+ "@storybook/addon-onboarding": "^8.2.8",
+ "@storybook/blocks": "^8.2.8",
+ "@storybook/react": "^8.2.8",
+ "@storybook/test": "^8.2.8",
+ "@types/chrome": "^0.0.270",
  "@types/react": "^18.3.3",
  "@types/react-dom": "^18.3.0",
- "@types/react-transition-group": "^4.4.10",
+ "@types/react-transition-group": "^4.4.11",
  "@typescript-eslint/eslint-plugin": "^7.13.0",
  "@typescript-eslint/parser": "^7.13.0",
- "chrome-webstore-upload": "^0.2.2",
- "cross-env": "^6.0.3",
- "css-loader": "^7.1.2",
+ "chrome-webstore-upload": "^3.1.0",
  "dotenv": "^16.4.5",
- "eslint-plugin-react": "^7.34.2",
+ "eslint-plugin-react": "^7.35.0",
  "eslint-plugin-storybook": "^0.8.0",
- "html-webpack-plugin": "^5.6.0",
  "husky": "^9.1.4",
  "identity-obj-proxy": "^3.0.0",
  "jest": "^29.7.0",
- "jest-fetch-mock": "^2.1.2",
+ "jest-fetch-mock": "^3.0.3",
  "lint-staged": "^15.2.8",
- "mini-css-extract-plugin": "^2.9.0",
- "mkdirp": "^3.0.1",
- "npm-run-all": "^4.1.5",
- "prettier": "^3.3.2",
+ "prettier": "^3.3.3",
  "react-test-renderer": "^18.3.1",
- "rimraf": "^6.0.1",
- "sass": "^1.77.5",
- "sass-loader": "^14.2.1",
  "semantic-release": "^24.0.0",
  "semantic-release-chrome": "^3.2.0",
- "semver": "^6.3.0",
+ "semver": "^7.6.3",
  "simple-git": "^3.25.0",
- "storybook": "^8.2.2",
- "style-loader": "^1.3.0",
- "ts-loader": "^9.5.1",
- "typescript": "^5.5.3",
- "webpack": "^5.92.0",
- "webpack-cli": "^5.1.4"
+ "storybook": "^8.2.8",
+ "storybook-react-rsbuild": "0.0.11",
+ "typescript": "^5.5.4"
  },
  "dependencies": {
- "@reduxjs/toolkit": "^2.2.6",
- "bestzip": "^2.1.4",
- "classnames": "^2.2.6",
- "crypto-js": "^3.1.9-1",
+ "@reduxjs/toolkit": "^2.2.7",
+ "classnames": "^2.5.1",
+ "crypto-js": "^4.2.0",
  "eslint": "^8.57.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",

rsbuild.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
+
+export default defineConfig({
+ plugins: [pluginReact(), pluginSass(), pluginTypeCheck()],
+ tools: {
+ cssLoader: {
+ url: false,
+ },
+ htmlPlugin: {
+ template: 'src/index.html',
+ title: 'New Tab',
+ },
+ },
+ output: {
+ copy: [
+ { from: 'src/manifest.json' },
+ { from: 'src/_locales', to: '_locales' },
+ { from: 'src/assets', to: 'assets' },
+ ],
+ },
+});

src/index.html

@@ -1,11 +1,9 @@
 <!doctype html>
 <html>
  <head>
- <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="color-scheme" content="dark" />
- <title>New Tab</title>
  </head>
 
  <body>

src/main.scss → src/index.scss

@@ -17,6 +17,7 @@ html,
 :root {
  font-family: 'Inter', sans-serif;
 }
+
 @supports (font-variation-settings: normal) {
  :root {
  font-family: 'Inter var', sans-serif;

src/main.tsx → src/index.tsx

@@ -1,4 +1,4 @@
-import './main.scss';
+import './index.scss';
 
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';

src/types/index.ts

@@ -1,33 +1,3 @@
-import { dock } from '../config';
-
-export interface ISettings {
- autoHideDock: boolean;
- backgroundColor: string;
- backgroundGradient: string;
- backgroundGradientAngle: string;
- backgroundImage: string;
- backgroundPattern: string;
- backgroundPriority: string;
- backgroundImageUrl: string;
- color: string;
- delimiterBlinking: boolean;
- displaySeconds: boolean;
- animateDigits: boolean;
- displayDate: boolean;
- fontFamily: string;
- fontSize: number;
- use24format: boolean;
- displayWeather: boolean;
- temperatureUnits: 'c' | 'f';
- useLocation: 'custom' | 'auto';
- customLocation: string;
-}
-
-export type DockSettings = {
- [key: string]: boolean;
-};
-
-export type DockConfig = typeof dock;
 export type WeatherResponseLocation = {
  city: string;
 };