dinou 1.2.0 → 1.3.1

package/README.md

@@ -46,7 +46,11 @@ dinou main features are:
 
 - TypeScript or JavaScript
 
-- Full control and customization through the command `npm run eject` (`npx dinou eject`).
+- Full control and customization through the command `npm run eject` (`npx dinou eject`)
+
+- Support for the use of `.css`, `.module.css`, and `Tailwind.css`
+
+- Support for the use of images in your components (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, `.webp`)
 
 ## Table of contents
 
@@ -98,6 +102,8 @@ dinou main features are:
 
 - [Styles (Tailwind.css, .module.css, and .css)](#styles-tailwindcss-modulecss-and-css)
 
+- [Images (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, and `.webp`)](#images-png-jpeg-jpg-gif-svg-and-webp)
+
 - [How to run a dinou app](#how-to-run-a-dinou-app)
 
 - [Eject dinou](#eject-dinou)
@@ -985,7 +991,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 `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.
+- **Only styles imported under `"use client"` directive will be detected by Webpack 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:
 
@@ -1067,6 +1073,39 @@ dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles
   import "./page.module.css";
   ```
 
+## Images (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, and `.webp`)
+
+dinou is ready to support the use of images in your components. Just do:
+
+```typescript
+// src/component.tsx
+"use client";
+
+import image from "./image.png"; // import the image from where it is located (inside src folder)
+
+export default function Component() {
+  return <img src={image} alt="image" />;
+}
+```
+
+**Only images imported under `"use client"` directive will be detected by Webpack and generated in `public` folder**. If you use server components, then you must create an additional file (e.g. `images.ts`) with the `"use client"` directive and import there the images too:
+
+```typescript
+// src/images.ts
+"use client";
+
+import "./image.png";
+```
+
+```typescript
+// src/component.tsx
+import image from "./image.png"; // import the image from where it is located (inside src folder)
+
+export default async function Component() {
+  return <img src={image} alt="image" />;
+}
+```
+
 ## 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.

package/dinou/asset-require-hook.js

@@ -0,0 +1,58 @@
+var fs = require("fs");
+var path = require("path");
+var interpolateName = require("loader-utils").interpolateName;
+
+function compiler(name, options) {
+  return function compile(file) {
+    var content = fs.readFileSync(file);
+    var context = { resourcePath: file };
+
+    var resolvedName;
+    if (typeof name === "function") {
+      var localName = path.basename(file, path.extname(file));
+      resolvedName = name(localName, file);
+    } else {
+      resolvedName = name;
+    }
+
+    var result = interpolateName(context, resolvedName, {
+      content: content,
+      regExp: options.regExp,
+    });
+
+    if (options.publicPath) {
+      result =
+        typeof options.publicPath === "function"
+          ? options.publicPath(result)
+          : options.publicPath + result;
+    }
+
+    return result;
+  };
+}
+
+function hook(extension, compile) {
+  require.extensions[extension] = function (module, file) {
+    try {
+      const url = compile(file);
+      module._compile("module.exports = " + JSON.stringify(url), file);
+    } catch (err) {
+      console.error("Error processing file", file, err);
+      throw err;
+    }
+  };
+}
+
+function addHook(opts) {
+  opts = opts || {};
+  var extensions = (opts.extensions || []).map(function (ext) {
+    return ext.replace(".", "");
+  });
+  var comp = compiler(opts.name, opts);
+
+  extensions.forEach(function (ext) {
+    hook("." + ext, comp);
+  });
+}
+
+module.exports = addHook;

package/dinou/render-html.js

@@ -1,3 +1,4 @@
+const addHook = require("./asset-require-hook.js");
 const { register } = require("esbuild-register/dist/node");
 register({
   target: "esnext",
@@ -8,6 +9,15 @@ const createScopedName = require("./createScopedName");
 require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
+addHook({
+  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
+  name: function (localName, filepath) {
+    const result = createScopedName(localName, filepath);
+    return result + ".[ext]";
+  },
+  publicPath: "images/",
+});
+
 const { renderToPipeableStream } = require("react-dom/server");
 const { getJSX, getSSGJSX } = require("./get-jsx");
 const { renderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
@@ -27,6 +37,7 @@ async function renderToStream() {
       onError(error) {
         console.error("Render error:", error);
         process.stderr.write(JSON.stringify({ error: error.message }));
+        process.exit(1);
       },
       onShellReady() {
         stream.pipe(process.stdout);
@@ -39,9 +50,16 @@ async function renderToStream() {
   }
 }
 
-try {
-  renderToStream();
-} catch (error) {
+process.on("uncaughtException", (error) => {
   process.stderr.write(JSON.stringify({ error: error.message }));
   process.exit(1);
-}
+});
+
+process.on("unhandledRejection", (reason) => {
+  process.stderr.write(
+    JSON.stringify({ error: reason.message || "Unhandled promise rejection" })
+  );
+  process.exit(1);
+});
+
+renderToStream();

package/dinou/server.js

@@ -11,19 +11,25 @@ const webpackDevMiddleware = require("webpack-dev-middleware");
 const webpackHotMiddleware = require("webpack-hot-middleware");
 const webpackConfig = require(path.resolve(__dirname, "../webpack.config.js"));
 const { getSSGJSXOrJSX } = require("./get-jsx.js");
-
+const addHook = require("./asset-require-hook.js");
 webpackRegister();
 register({
   target: "esnext",
   format: "cjs",
   extensions: [".js", ".jsx", ".ts", ".tsx"],
 });
-
 const createScopedName = require("./createScopedName");
-
 require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
+addHook({
+  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
+  name: function (localName, filepath) {
+    const result = createScopedName(localName, filepath);
+    return result + ".[ext]";
+  },
+  publicPath: "images/",
+});
 
 const app = express();
 const isDevelopment = process.env.NODE_ENV !== "production";
@@ -72,22 +78,27 @@ function renderAppToHtml(reqPath, paramsString) {
 
     let errorOutput = "";
     child.stderr.on("data", (data) => {
-      errorOutput += data;
+      errorOutput += data.toString();
+    });
+
+    child.on("error", (error) => {
+      reject(new Error(`Failed to start child process: ${error.message}`));
+    });
+
+    child.on("spawn", () => {
+      resolve(child.stdout);
     });
 
     child.on("close", (code) => {
       if (code !== 0) {
         try {
           const errorResult = JSON.parse(errorOutput);
-          reject(new Error(errorResult.error));
+          reject(new Error(errorResult.error || errorOutput));
         } catch {
           reject(new Error(`Child process failed: ${errorOutput}`));
         }
       }
     });
-
-    // Resolve the stream from the child process
-    resolve(child.stdout);
   });
 }
 

package/dinou/ssg.js

@@ -1,16 +1,22 @@
 const { register } = require("esbuild-register/dist/node");
 const { buildStaticPages } = require("./build-static-pages");
-
+const addHook = require("./asset-require-hook.js");
 register({
   target: "esnext",
   format: "cjs",
   extensions: [".js", ".jsx", ".ts", ".tsx"],
 });
-
 const createScopedName = require("./createScopedName");
-
 require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
+addHook({
+  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
+  name: function (localName, filepath) {
+    const result = createScopedName(localName, filepath);
+    return result + ".[ext]";
+  },
+  publicPath: "images/",
+});
 
 (async () => await buildStaticPages())();

package/eject.js

@@ -23,10 +23,11 @@ if (fs.existsSync(path.join(modulePath, "postcss.config.js"))) {
   );
 }
 
-fs.copyFileSync(
-  path.join(modulePath, "LICENSE.md"),
-  path.join(projectRoot, "dinou/LICENSE.md")
-);
+// don't copy the LICENSE.md file, as it is not needed in the project root
+// fs.copyFileSync(
+//   path.join(modulePath, "LICENSE.md"),
+//   path.join(projectRoot, "dinou/LICENSE.md")
+// );
 
 const pkg = require(path.join(projectRoot, "package.json"));
 pkg.scripts.dev =

package/package.json

@@ -1,54 +1,55 @@
-{
-  "name": "dinou",
-  "version": "1.2.0",
-  "description": "Minimal React 19 Framework",
-  "main": "index.js",
-  "bin": {
-    "dinou": "./cli.js"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "React 19",
-    "Framework"
-  ],
-  "author": "Roger Gomez Castells (@roggc)",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/roggc/dinou.git"
-  },
-  "dependencies": {
-    "@babel/core": "^7.27.1",
-    "@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",
-    "@tailwindcss/postcss": "^4.1.10",
-    "autoprefixer": "^10.4.21",
-    "babel-loader": "^10.0.0",
-    "commander": "^14.0.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",
-    "esbuild-register": "^3.6.0",
-    "express": "^5.1.0",
-    "generic-names": "^4.0.0",
-    "mini-css-extract-plugin": "^2.9.2",
-    "postcss": "^8.5.5",
-    "postcss-loader": "^8.1.1",
-    "react-server-dom-webpack": "^19.1.0",
-    "tailwindcss": "^4.1.10",
-    "webpack": "^5.99.8",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-middleware": "^7.4.2",
-    "webpack-hot-middleware": "^2.26.1"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  }
-}
+{
+  "name": "dinou",
+  "version": "1.3.1",
+  "description": "Minimal React 19 Framework",
+  "main": "index.js",
+  "bin": {
+    "dinou": "./cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "React 19",
+    "Framework"
+  ],
+  "author": "Roger Gomez Castells (@roggc)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/roggc/dinou.git"
+  },
+  "dependencies": {
+    "@babel/core": "^7.27.1",
+    "@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",
+    "@tailwindcss/postcss": "^4.1.10",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^10.0.0",
+    "commander": "^14.0.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",
+    "esbuild-register": "^3.6.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-server-dom-webpack": "^19.1.0",
+    "tailwindcss": "^4.1.10",
+    "webpack": "^5.99.8",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-middleware": "^7.4.2",
+    "webpack-hot-middleware": "^2.26.1"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}

package/webpack.config.js

@@ -75,6 +75,26 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        type: "asset/resource",
+        generator: {
+          filename: (pathData) => {
+            const resourcePath =
+              pathData.module.resourceResolveData?.path ||
+              pathData.module.resource;
+
+            const base = path.basename(
+              resourcePath,
+              path.extname(resourcePath)
+            );
+            const scoped = createScopedName(base, resourcePath);
+
+            return `images/${scoped}[ext]`;
+          },
+          publicPath: "/",
+        },
+      },
     ],
   },
   plugins: [