dinou 1.10.1 → 2.0.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.0.0]
+
+### Changed
+
+- Migrated build system from Webpack to Rollup for both development and production.
+
 ## [1.10.1]
 
 ### Fixed

package/README.md

@@ -1,6 +1,6 @@
 # **dinou**: **A Minimal React 19 Framework**
 
-[**dinou**](https://github.com/roggc/dinou) is a **minimal React 19 framework**. dinou means 19 in Catalan. You can create a dinou [app](https://github.com/roggc/dinou-app) by running the command **`npx create-dinou@latest my-app`**.
+[**dinou**](https://dinou.dev) is a **minimal React 19 framework**. dinou means 19 in Catalan. You can create a dinou [app](https://github.com/roggc/dinou-app) by running the command **`npx create-dinou@latest my-app`**.
 
 Or you can create one by yourself with the following steps:
 
@@ -974,7 +974,7 @@ MY_VAR=my_value
 
 ## Styles (Tailwind.css, .module.css, and .css)
 
-dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles will be generated in a file in webpack folder named `styles.css`. So you must include this in your `page.tsx` or `layout.tsx` file, in the `head` tag:
+dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles will be generated in a file in `public` folder named `styles.css`. So you must include this in your `page.tsx` or `layout.tsx` file, in the `head` tag:
 
 ```typescript
 <link href="/styles.css" rel="stylesheet"></link>
@@ -1060,7 +1060,7 @@ dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles
 
 - The above will produce the text `hi world!` in red, underlined, and with a purple background color.
 
-- **Only styles imported under `"use client"` directive will be detected by Webpack and generated in a `styles.css` in webpack folder**. This means that if you want to use server components instead of client components, then you must create an additional file (e.g. `styles.ts`) where you use the `"use client"` directive and import all the `.css` files used in server components.
+- **Only styles imported under `"use client"` directive will be detected by dinou and generated in a `styles.css` in `public` folder**. This means that if you want to use server components instead of client components, then you must create an additional file (e.g. `styles.ts`) where you use the `"use client"` directive and import all the `.css` files used in server components.
 
 - Example with server components:
 
@@ -1159,7 +1159,7 @@ export default function Component() {
 }
 ```
 
-**Only assets imported under `"use client"` directive will be detected by Webpack and generated in webpack folder**. If you use **server components**, then you must create an additional file (e.g. `assets.ts`) with the `"use client"` directive and import there the assets too:
+**Only assets imported under `"use client"` directive will be detected by dinou and generated in `public` folder**. If you use **server components**, then you must create an additional file (e.g. `assets.ts`) with the `"use client"` directive and import there the assets too:
 
 ```typescript
 // src/assets.ts
@@ -1199,7 +1199,7 @@ declare module "*.png" {
 // and continue with the rest of supported file extensions
 ```
 
-If you miss a certain file extension you can eject and customize dinou to meet your requirements. Just eject and add the extension in these three places: `webpack.config.js`, `dinou/server.js`, and `dinou/render-html.js`. Just look for the place were all the extensions are mentioned and add yours in these three files.
+If you miss a certain file extension you can eject and customize dinou to meet your requirements. Just eject and add the extension in these three places: `rollup.config.js`, `dinou/server.js`, and `dinou/render-html.js`. Just look for the place were all the extensions are mentioned and add yours in these three files.
 
 ## Import alias (e.g. `"@/..."`)
 
@@ -1235,9 +1235,9 @@ dinou is ready to support import alias, as `import some from "@/..."`. If you wa
 
 ## How to run a dinou app
 
-Run `npm run dev` (or `npx dinou dev`) to start the dinou app in development mode. Wait for the logs of Webpack and `Listening on port <port>` to load the page on your browser. In development, webpack will emit his files in `____public____` folder.
+Run `npm run dev` (or `npx dinou dev`) to start the dinou app in development mode. Wait for the logs of the bundler (`waiting for changes...`) and the server (`Listening on port <port>`) to load the page on your browser. In development, the bundler will emit its files in `public` folder.
 
-Run `npm run build` (or `npx dinou build`) to build the app and `npm start` (or `npx dinou start`) to run it. In production, webpack will emit his files in `dist3` folder.
+Run `npm run build` (or `npx dinou build`) to build the app and `npm start` (or `npx dinou start`) to run it. In production, the bundler will emit its files in `dist3` folder.
 
 ## Eject dinou
 

package/cli.js

@@ -25,10 +25,10 @@ program
       dinouPath,
       "server.js"
     )}`;
-    const startDevServer = `webpack serve --config ${path.join(
+    const startDevServer = `cross-env NODE_ENV=development rollup -c ${path.join(
       __dirname,
-      "webpack.config.js"
-    )}`;
+      "rollup.config.js"
+    )} -w`;
     runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
   });
 
@@ -37,10 +37,8 @@ program
   .description("Builds the app for production")
   .action(() => {
     console.log("Building the app...");
-    const configPath = path.join(__dirname, "webpack.config.js");
-    runCommand(
-      `cross-env NODE_ENV=production npx webpack --config ${configPath}`
-    );
+    const configPath = path.join(__dirname, "rollup.config.js");
+    runCommand(`cross-env NODE_ENV=production npx rollup -c ${configPath}`);
   });
 
 program

package/dinou/client-error.jsx

@@ -1,5 +1,5 @@
 import { use } from "react";
-import { createFromFetch } from "react-server-dom-webpack/client";
+import { createFromFetch } from "@matthamlin/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 
 const cache = new Map();

package/dinou/client.jsx

@@ -1,5 +1,5 @@
 import { use } from "react";
-import { createFromFetch } from "react-server-dom-webpack/client";
+import { createFromFetch } from "@matthamlin/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 
 const cache = new Map();

package/dinou/render-html.js

@@ -195,7 +195,14 @@ async function renderToStream(reqPath, query) {
       onShellReady() {
         stream.pipe(process.stdout);
       },
-      bootstrapScripts: ["/main.js"],
+      bootstrapModules: isDevelopment
+        ? ["/main.js", "/runtime.js"]
+        : ["/main.js"],
+      ...(isDevelopment
+        ? {
+            bootstrapScriptContent: `window.HMR_WEBSOCKET_URL="ws://localhost:3001";`,
+          }
+        : {}),
     });
   } catch (error) {
     process.stdout.write(formatErrorHtml(error));

package/dinou/server.js

@@ -57,7 +57,132 @@ const generateStatic = require("./generate-static.js");
 const renderAppToHtml = require("./render-app-to-html.js");
 const revalidating = require("./revalidating.js");
 const isDevelopment = process.env.NODE_ENV !== "production";
-const webpackFolder = isDevelopment ? "____public____" : "dist3";
+const webpackFolder = isDevelopment ? "public" : "dist3";
+const chokidar = require("chokidar");
+const { fileURLToPath } = require("url");
+if (isDevelopment) {
+  const manifestPath = path.resolve(
+    process.cwd(),
+    `${webpackFolder}/react-client-manifest.json`
+  );
+  let currentManifest = {};
+
+  const watcher = chokidar.watch(manifestPath, { persistent: true });
+  let isInitial = true;
+
+  watcher.on("add", () => {
+    if (Object.keys(currentManifest).length === 0 && isInitial) {
+      // console.log("Initial manifest loaded.");
+      currentManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+      isInitial = false;
+      return;
+    }
+  });
+
+  function getParents(resolvedPath) {
+    const parents = [];
+    Object.values(require.cache).forEach((mod) => {
+      if (
+        mod.children &&
+        mod.children.some((child) => child.id === resolvedPath)
+      ) {
+        parents.push(mod.id);
+      }
+    });
+    return parents;
+  }
+
+  function clearRequireCache(modulePath, visited = new Set()) {
+    try {
+      const resolved = require.resolve(modulePath);
+      if (visited.has(resolved)) return;
+      visited.add(resolved);
+
+      if (require.cache[resolved]) {
+        delete require.cache[resolved];
+        // console.log(`[Server HMR] Cleared cache for ${resolved}`);
+
+        const parents = getParents(resolved);
+        for (const parent of parents) {
+          // Optional: Skip if parent not in src/ (safety)
+          if (parent.startsWith(path.resolve(process.cwd(), "src"))) {
+            clearRequireCache(parent, visited);
+          }
+        }
+      }
+    } catch (err) {
+      console.warn(
+        `[Server HMR] Could not resolve or clear ${modulePath}: ${err.message}`
+      );
+    }
+  }
+
+  // function clearAllUserCache() {
+  //   const srcDir = path.resolve(process.cwd(), "src");
+  //   Object.keys(require.cache).forEach((file) => {
+  //     if (file.startsWith(srcDir)) {
+  //       delete require.cache[file];
+  //     }
+  //   });
+  //   console.log(
+  //     "[Server HMR] Cleared all src/ require caches due to directive change."
+  //   );
+  // }
+
+  watcher.on("change", () => {
+    try {
+      const newManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+
+      // Handle removed entries: client -> server switch
+      for (const key in currentManifest) {
+        if (!(key in newManifest)) {
+          const absPath = fileURLToPath(key);
+          clearRequireCache(absPath);
+          // console.log(`Cleared cache for ${absPath} (client -> server)`);
+        }
+      }
+
+      // Handle added entries: server -> client switch
+      for (const key in newManifest) {
+        if (!(key in currentManifest)) {
+          const absPath = fileURLToPath(key);
+          clearRequireCache(absPath);
+          // console.log(`Cleared cache for ${absPath} (server -> client)`);
+        }
+      }
+      // if (
+      //   Object.keys(currentManifest).length !== Object.keys(newManifest).length
+      // ) {
+      //   // Only clear if there was a change (add/remove)
+      //   clearAllUserCache();
+      // }
+      currentManifest = newManifest;
+    } catch (err) {
+      console.error("Error handling manifest change:", err);
+    }
+  });
+
+  const srcWatcher = chokidar.watch(path.resolve(process.cwd(), "src"), {
+    persistent: true,
+    ignored: /node_modules/,
+  });
+
+  srcWatcher.on("change", (changedPath) => {
+    const posixPath = changedPath.split(path.sep).join(path.posix.sep);
+
+    const isClientComponent = Object.keys(currentManifest).some((key) =>
+      key.includes(posixPath)
+    );
+
+    if (!isClientComponent) {
+      clearRequireCache(changedPath);
+      // console.log(
+      //   `[Server HMR] Cleared cache for ${changedPath} in srcWatcher`
+      // );
+    }
+  });
+}
+
 const app = express();
 
 app.use(express.json());

package/eject.js

@@ -2,6 +2,8 @@ const fs = require("fs");
 const path = require("path");
 
 const dinouPath = path.resolve(__dirname, "dinou");
+const reactRefreshPath = path.resolve(__dirname, "react-refresh");
+const rollupPluginsPath = path.resolve(__dirname, "rollup-plugins");
 const modulePath = path.resolve(__dirname);
 const projectRoot = process.cwd();
 
@@ -9,10 +11,18 @@ fs.cpSync(dinouPath, path.join(projectRoot, "dinou"), {
   recursive: true,
 });
 
-if (fs.existsSync(path.join(modulePath, "webpack.config.js"))) {
+fs.cpSync(reactRefreshPath, path.join(projectRoot, "react-refresh"), {
+  recursive: true,
+});
+
+fs.cpSync(rollupPluginsPath, path.join(projectRoot, "rollup-plugins"), {
+  recursive: true,
+});
+
+if (fs.existsSync(path.join(modulePath, "rollup.config.js"))) {
   fs.copyFileSync(
-    path.join(modulePath, "webpack.config.js"),
-    path.join(projectRoot, "webpack.config.js")
+    path.join(modulePath, "rollup.config.js"),
+    path.join(projectRoot, "rollup.config.js")
   );
 }
 
@@ -25,10 +35,10 @@ if (fs.existsSync(path.join(modulePath, "postcss.config.js"))) {
 
 const pkg = require(path.join(projectRoot, "package.json"));
 pkg.scripts["start:express"] = "node --conditions react-server dinou/server.js";
-pkg.scripts["start:dev-server"] = "webpack serve --config webpack.config.js";
+pkg.scripts["start:dev-server"] = "cross-env NODE_ENV=development rollup -c -w";
 pkg.scripts.dev =
   'concurrently "npm run start:express" "npm run start:dev-server"';
-pkg.scripts.build = "cross-env NODE_ENV=production webpack";
+pkg.scripts.build = "cross-env NODE_ENV=production rollup -c";
 pkg.scripts.start =
   "cross-env NODE_ENV=production node --conditions react-server dinou/server.js";
 delete pkg.scripts.eject;
@@ -38,5 +48,5 @@ fs.writeFileSync(
 );
 
 console.log(
-  "Eject completed. Now you can customize the files in /dinou and webpack.config.js."
+  "Eject completed. Now you can customize the files in /dinou and rollup.config.js."
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "1.10.1",
+  "version": "2.0.1",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {
@@ -21,39 +21,43 @@
   },
   "dependencies": {
     "@babel/core": "^7.27.4",
+    "@babel/parser": "^7.28.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.27.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
+    "@babel/traverse": "^7.28.3",
+    "@matthamlin/react-server-dom-esm": "file:packages/vendor/react-server-dom-esm",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-replace": "^6.0.2",
     "@tailwindcss/postcss": "^4.1.10",
     "autoprefixer": "^10.4.21",
-    "babel-loader": "^10.0.0",
+    "chokidar": "^4.0.3",
     "commander": "^14.0.0",
     "concurrently": "^9.2.0",
-    "copy-webpack-plugin": "^13.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
     "css-modules-require-hook": "^4.2.3",
     "dotenv": "^16.5.0",
     "express": "^5.1.0",
     "generic-names": "^4.0.0",
     "loader-utils": "^3.3.1",
-    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.5.5",
-    "postcss-loader": "^8.1.1",
     "react-refresh": "^0.17.0",
     "react-server-dom-webpack": "^19.1.0",
+    "rollup": "^4.46.2",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^3.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
     "tailwindcss": "^4.1.10",
     "tsconfig-paths": "^4.2.0",
-    "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "webpack": "^5.99.8",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2"
+    "ws": "^8.18.3"
   },
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   }
 }

package/packages/vendor/react-server-dom-esm/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Meta Platforms, Inc. and affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/packages/vendor/react-server-dom-esm/README.md

@@ -0,0 +1,5 @@
+# react-server-dom-esm
+
+Experimental React Flight bindings for DOM using ESM.
+
+**Use it at your own risk.**