chore(examples): update webpack/react example

examples/webpack-react/.gitignore

@@ -1,89 +1,4 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
 .DS_Store
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Webpack
 .webpack/
-
-# Distributions
-dist/
+dist/

examples/webpack-react/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.experimental.useFlatConfig": true,
+  "search.exclude": {
+    "**/dist": true,
+    "**/node_modules": true
+  },
+  "editor.rulers": [100]
+}

examples/webpack-react/README.md

@@ -2,11 +2,11 @@
 
 ## WASM module
 
-Make sure the WASM file can be loaded, e.g. by using `copy-webpack-plugin`.
+The `MediaInfoModule.wasm` file is copied during build using `copy-webpack-plugin`.
 
 ```javascript
 const wasmFile = path.resolve(
-  __dirname,
+  import.meta.dirname,
   '..',
   'node_modules',
   'mediainfo.js',

examples/webpack-react/eslint.config.js

@@ -0,0 +1,26 @@
+import globals from 'globals'
+import reactJsxRuntime from 'eslint-plugin-react/configs/jsx-runtime.js'
+import tsEslint from 'typescript-eslint'
+
+export default tsEslint.config(
+  ...tsEslint.configs.strictTypeChecked,
+  ...tsEslint.configs.stylisticTypeChecked,
+  {
+    files: ['**/*.{js,ts,tsx}'],
+    ...reactJsxRuntime,
+    languageOptions: {
+      ...reactJsxRuntime.languageOptions,
+      globals: globals.browser,
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    settings: {
+      react: { version: 'detect' },
+    },
+  },
+  {
+    ignores: ['dist/*', 'eslint.config.js'],
+  }
+)

examples/webpack-react/package.json

@@ -2,37 +2,37 @@
   "name": "mediainfojs-webpack-react-example",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.config.dev.js",
     "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
     "serve": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js && cross-env serve dist/",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/"
+    "lint": "eslint src/"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-    "@types/node": "^18.11.5",
-    "@types/react": "^18.0.23",
-    "@types/react-dom": "^18.0.7",
-    "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@types/node": "^20.12.13",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/webpack-env": "^1.18.5",
+    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.26.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.10",
-    "html-webpack-plugin": "^5.5.0",
-    "react-refresh": "^0.14.0",
-    "serve": "^14.0.1",
-    "ts-loader": "9.4.1",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "eslint": "^9.3.0",
+    "eslint-plugin-react": "^7.34.2",
+    "globals": "^15.3.0",
+    "html-webpack-plugin": "^5.6.0",
+    "react-refresh": "^0.14.2",
+    "serve": "^14.2.3",
+    "ts-loader": "9.5.1",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.11.0",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "mediainfo.js": "link:../..",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }