refactor: update repo

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: "pnpm"
       - run: pnpm install
       - run: pnpm lint

README.md

@@ -1,7 +1,9 @@
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![package phobia][package-phobia-src]][package-phobia-href]
-[![github actions][checks-src]][checks-href]
+<!-- automd:badges packagephobia -->
+
+[![npm version](https://img.shields.io/npm/v/webpackbar)](https://npmjs.com/package/webpackbar)
+[![npm downloads](https://img.shields.io/npm/dm/webpackbar)](https://npm.chart.dev/webpackbar)
+
+<!-- /automd -->
 
 <div align="center">
   <!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
@@ -20,7 +22,7 @@
 
 ✔ Windows compatible
 
-✔ **Fully** customizable using reporters
+✔ Fully customizable using reporters
 
 ✔ Advanced build profiler
 
@@ -42,35 +44,44 @@
 
 To begin, you'll need to install `webpackbar`:
 
-Using npm:
+<!-- automd:pm-i -->
 
-```bash
-npm install webpackbar -D
-```
+```sh
+# ✨ Auto-detect
+npx nypm install webpackbar
+
+# npm
+npm install webpackbar
+
+# yarn
+yarn add webpackbar
 
-Using yarn:
+# pnpm
+pnpm install webpackbar
 
-```bash
-yarn add webpackbar -D
+# bun
+bun install webpackbar
+
+# deno
+deno install webpackbar
 ```
 
+<!-- /automd -->
+
 Then add the reporter as a plugin to your webpack config.
 
-**webpack.config.js**
+**webpack.config.mjs**
 
 ```js
-const webpack = require("webpack");
-const WebpackBar = require("webpackbar");
-
-module.exports = {
-  context: path.resolve(__dirname),
-  devtool: "source-map",
-  entry: "./entry.js",
-  output: {
-    filename: "./output.js",
-    path: path.resolve(__dirname),
-  },
-  plugins: [new WebpackBar()],
+import WebpackBar from "webpackbar";
+
+export default {
+  entry: "./src/entry.js",
+  plugins: [
+    new WebpackBar({
+      /* options */
+    }),
+  ],
 };
 ```
 
@@ -130,30 +141,28 @@ A reporter should be instance of a class or plain object and functions for speci
 **Simple logger:**
 
 ```js
-{
- start(context) {
-   // Called when (re)compile is started
- },
- change(context) {
-   // Called when a file changed on watch mode
- },
- update(context) {
-   // Called after each progress update
- },
- done(context) {
-   // Called when compile finished
- },
- progress(context) {
-   // Called when build progress updated
- },
- allDone(context) {
-   // Called when _all_ compiles finished
- },
- beforeAllDone(context) {
- },
- afterAllDone(context) {
- },
-}
+const logger = {
+  start(context) {
+    // Called when (re)compile is started
+  },
+  change(context) {
+    // Called when a file changed on watch mode
+  },
+  update(context) {
+    // Called after each progress update
+  },
+  done(context) {
+    // Called when compile finished
+  },
+  progress(context) {
+    // Called when build progress updated
+  },
+  allDone(context) {
+    // Called when _all_ compiles finished
+  },
+  beforeAllDone(context) {},
+  afterAllDone(context) {},
+};
 ```
 
 `context` is the reference to the plugin. You can use `context.state` to access status.

eslint.config.mjs

@@ -0,0 +1,11 @@
+import unjs from "eslint-config-unjs";
+
+// https://github.com/unjs/eslint-config
+export default unjs({
+  ignores: ["/node_modules", "**/dist", "test/**/dist"],
+  rules: {
+    "unicorn/prevent-abbreviations": 0,
+    "unicorn/no-null": 0,
+    "@typescript-eslint/no-require-imports": 0,
+  },
+});

package.json

@@ -4,7 +4,6 @@
   "description": "Elegant ProgressBar and Profiler for Webpack",
   "repository": "unjs/webpackbar",
   "license": "MIT",
-  "main": "./dist/index.cjs",
   "type": "module",
   "exports": {
     "import": {
@@ -16,48 +15,52 @@
       "default": "./dist/index.cjs"
     }
   },
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "build": "unbuild",
-    "dev": "webpack --config ./playground/webpack.config.cjs",
-    "lint": "eslint --ext .ts,.mjs . && prettier -c .",
-    "lint:fix": "eslint --fix --ext .ts,.mjs . && prettier -w .",
+    "lint": "eslint . && prettier -c .",
+    "lint:fix": "eslint --fix . && prettier -w .",
     "prepack": "unbuild",
+    "play": "webpack --config ./playground/webpack.config.mjs",
     "release": "pnpm test && changelogen --release && npm publish && git push --follow-tags",
     "test": "pnpm lint && mocha ./test/*.test.*"
   },
   "dependencies": {
-    "ansi-escapes": "^4.3.2",
-    "chalk": "^4.1.2",
+    "ansi-escapes": "^7.0.0",
     "consola": "^3.2.3",
-    "figures": "^3.2.0",
-    "markdown-table": "^2.0.0",
+    "figures": "^6.1.0",
+    "markdown-table": "^3.0.4",
     "pretty-time": "^1.1.0",
     "std-env": "^3.7.0",
-    "wrap-ansi": "^7.0.0"
+    "wrap-ansi": "^9.0.0"
   },
   "devDependencies": {
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.11.16",
-    "changelogen": "^0.5.5",
-    "eslint": "^8.56.0",
-    "eslint-config-unjs": "^0.2.1",
-    "jiti": "^1.21.0",
+    "@babel/standalone": "^7.26.2",
+    "@types/mocha": "^10.0.9",
+    "@types/node": "^22.9.0",
+    "automd": "^0.3.12",
+    "chalk": "^5.3.0",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.14.0",
+    "eslint-config-unjs": "^0.4.1",
+    "jiti": "^2.4.0",
     "memory-fs": "^0.5.0",
-    "mocha": "^10.2.0",
-    "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
+    "mocha": "^10.8.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3",
     "unbuild": "^2.0.0",
-    "webpack": "^5.90.1",
+    "webpack": "^5.96.1",
     "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
     "webpack": "3 || 4 || 5"
   },
+  "packageManager": "pnpm@9.12.3",
   "engines": {
     "node": ">=14.21.3"
   }
-}
+}

playground/babel.mjs

@@ -0,0 +1,3 @@
+import babel from "@babel/standalone";
+
+console.log(babel.transform("const a = 1;"));

playground/chalk.mjs

@@ -0,0 +1,3 @@
+import chalk from "chalk";
+
+console.log(chalk.blue("Hello world!"));

playground/webpack.config.cjs → playground/webpack.config.mjs

@@ -1,21 +1,24 @@
-const path = require("node:path");
-const WebpackBar = require("webpackbar");
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import WebpackBar from "webpackbar";
 
 // let lastProgress;
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 const config = (name, color) => ({
   mode: "production",
   context: __dirname,
   devtool: false,
   target: "node",
-  entry: "./index.mjs",
-  stats: false,
+  entry: `./${name}.mjs`,
+  stats: true,
   output: {
     filename: "./output.cjs",
-    path: path.join(__dirname, "/dist"),
+    path: join(__dirname, "/dist"),
   },
   module: {
-    rules: [{ test: /\.js$/, use: path.resolve(__dirname, "test-loader.cjs") }],
+    rules: [{ test: /\.js$/, use: join(__dirname, "test-loader.cjs") }],
   },
   plugins: [
     new WebpackBar({
@@ -35,4 +38,4 @@ const config = (name, color) => ({
   ],
 });
 
-module.exports = [config("OrangeBar", "orange")];
+export default [config("chalk", "cyan"), config("babel", "yellow")];