feat(): Replace laravel-mix with rollup bundler

README.md

@@ -7,6 +7,7 @@ Link to the article ["Setting up a WordPress plugin with React and TypeScript
 ## How to start
 
 If you use the Nix package manager, just type in `nix-shell`. Otherwise make sure that you have the following dependencies installed:
+- Docker
 - NodeJS >=18
 - NPM (if you don't want to use the included YARN 4.0.2)
 - PHP >=8.2 with composer
@@ -14,10 +15,10 @@ If you use the Nix package manager, just type in `nix-shell`. Otherwise make sur
 After that you can initialize the project:
 
 ```bash
-cd wp/src/wp-content/plugins/wp-react
+cd wp/src/wp-content/plugins/wp-dynamic-form
 yarn install
 yarn compose
-yarn prod
+yarn build
 ```
 
 Now you need to fire up the docker containers in the project root:

shell.nix

@@ -9,7 +9,7 @@ in
       nodejs
       yarn
       php
-	  php82Packages.composer
+	    php82Packages.composer
       bashInteractive
     ];
     shellHook = ''

wp/src/wp-content/plugins/wp-react/.gitignore

@@ -272,3 +272,4 @@ google-services.json
 # project related
 vendor
 assets/*.js
+assets/*.css

wp/src/wp-content/plugins/wp-react/app/Hook.php

@@ -33,6 +33,12 @@ final class Hook
                 ]);
 
                 wp_enqueue_script('wpreact-birds-js');
+
+                $path = WPREACT_PATH . 'assets/style.css';
+                $url = WPREACT_URL . 'assets/style.css';
+
+                wp_register_style('wpreact-birds-css', $url, [], $path);
+                wp_enqueue_style('wpreact-birds-css');
             });
 
             return '<div id="wpreact-birds"></div>';

wp/src/wp-content/plugins/wp-react/mix-manifest.json

@@ -1,3 +0,0 @@
-{
-    "/assets/birds.js": "/assets/birds.js"
-}

wp/src/wp-content/plugins/wp-react/package.json

@@ -6,16 +6,22 @@
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/babel__core": "^7",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
-    "laravel-mix": "^6.0.49",
+    "@types/rollup-plugin-peer-deps-external": "^2",
-    "postcss": "^8.4.35",
+    "rollup": "^4.12.0",
-    "ts-loader": "^9.3.1",
+    "rollup-plugin-import-css": "^3.4.0",
-    "typescript": "^4.8.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "webpack": "^5.90.2",
+    "tslib": "^2.6.2",
-    "webpack-cli": "^5.1.4",
+    "typescript": "^4.8.2"
-    "webpack-dev-server": "^5.0.1"
   },
   "dependencies": {
     "axios": "^1.6.7",
@@ -24,8 +30,7 @@
   },
   "scripts": {
     "compose": "composer install",
-    "watch": "mix watch",
+    "build": "rollup --config"
-    "prod": "mix --production"
   },
   "packageManager": "yarn@4.0.2"
 }

wp/src/wp-content/plugins/wp-react/rollup.config.mjs

@@ -0,0 +1,43 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from '@rollup/plugin-typescript';
+import css from "rollup-plugin-import-css";
+import image from '@rollup/plugin-image';
+import json from '@rollup/plugin-json';
+import terser from '@rollup/plugin-terser';
+
+export default {
+    input: 'resources/ts/birds/main.tsx',
+    output: [
+        {
+            file: 'assets/birds.js',
+            name: 'app',
+            sourcemap: 'inline',
+            format: 'es',
+            inlineDynamicImports: true
+        },
+    ],
+    plugins: [
+        peerDepsExternal(),
+        resolve({
+            browser: true,
+            dedupe: ['react', 'react-dom'],
+        }),
+        replace({
+            preventAssignment: true,
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        }),
+        commonjs(),
+        typescript({
+            tsconfig: 'tsconfig.json',
+            sourceMap: true,
+            inlineSources: true,
+        }),
+        image(),
+        css({ output: 'style.css', minify: true }),
+        json(),
+        terser()
+    ],
+};

wp/src/wp-content/plugins/wp-react/tsconfig.json

@@ -1,11 +1,33 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es5",
-    "module": "commonjs",
+    "lib": [
-    "jsx": "react",
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
     "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "skipLibCheck": true
+    "forceConsistentCasingInFileNames": true,
-  }
+    "module": "esnext",
-}
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "react": [
+        "./node_modules/@types/react"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "resources/ts/**/*.ts",
+    "resources/ts/**/*.tsx"
+  ],
+}

wp/src/wp-content/plugins/wp-react/webpack.mix.js

@@ -1,6 +0,0 @@
-const mix = require('laravel-mix')
-
-mix.ts('resources/ts/birds/main.tsx', 'assets/birds.js')
-    .react()
-    .sourceMaps()
-    .disableNotifications()