npm - dinou - Versions diffs - 1.1.1 → 1.3.0 - Mend

dinou 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +216 -1
package/dinou/asset-require-hook.js +58 -0
package/dinou/createScopedName.js +8 -0
package/dinou/render-html.js +30 -11
package/dinou/server.js +29 -16
package/dinou/ssg.js +17 -9
package/eject.js +12 -4
package/package.json +55 -45
package/postcss.config.js +6 -0
package/webpack.config.js +77 -4

package/README.md CHANGED Viewed

@@ -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
@@ -96,6 +100,10 @@ dinou main features are:
 - [`.env` file](#env-file)
+- [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)
@@ -895,6 +903,209 @@ dinou is ready to manage env vars in the code that runs on the Server side (Serv
 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 `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>
+```
+- Example with client components:
+  ```typescript
+  // src/layout.tsx
+  "use client";
+  import type { ReactNode } from "react";
+  import "./global.css";
+  export default function Layout({ children }: { children: ReactNode }) {
+    return (
+      <html lang="en">
+        <head>
+          <title>dinou app</title>
+          <link rel="icon" type="image/png" href="/favicon.ico" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest"></link>
+          <link href="/styles.css" rel="stylesheet"></link>
+        </head>
+        <body>{children}</body>
+      </html>
+    );
+  }
+  ```
+  ```css
+  /* global.css */
+  @import "tailwindcss";
+  .test1 {
+    background-color: purple;
+  }
+  ```
+  ```typescript
+  // src/page.tsx
+  "use client";
+  import styles from "./page.module.css";
+  export default function Page() {
+    return (
+      <div className={`text-red-500 test1 ${styles.test2}`}>hi world!</div>
+    );
+  }
+  ```
+  ```css
+  /* src/page.module.css */
+  .test2 {
+    text-decoration: underline;
+  }
+  ```
+  ```typescript
+  // src/css.d.ts
+  declare module "*.module.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+  }
+  ```
+- 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.
+- Example with server components:
+  ```typescript
+  // src/layout.tsx
+  import type { ReactNode } from "react";
+  export default async function Layout({ children }: { children: ReactNode }) {
+    return (
+      <html lang="en">
+        <head>
+          <title>dinou app</title>
+          <link rel="icon" type="image/png" href="/favicon.ico" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+          <link rel="manifest" href="/site.webmanifest"></link>
+          <link href="/styles.css" rel="stylesheet"></link>
+        </head>
+        <body>{children}</body>
+      </html>
+    );
+  }
+  ```
+  ```css
+  /* global.css */
+  @import "tailwindcss";
+  .test1 {
+    background-color: purple;
+  }
+  ```
+  ```typescript
+  // src/page.tsx
+  import styles from "./page.module.css";
+  export default async function Page() {
+    return (
+      <div className={`text-red-500 test1 ${styles.test2}`}>hi world!</div>
+    );
+  }
+  ```
+  ```css
+  /* src/page.module.css */
+  .test2 {
+    text-decoration: underline;
+  }
+  ```
+  ```typescript
+  // src/css.d.ts
+  declare module "*.module.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+  }
+  ```
+  ```typescript
+  // src/styles.ts
+  "use client"; // <-- This is key.
+  import "./global.css";
+  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.
@@ -908,3 +1119,7 @@ Run `npm run build` (or `npx dinou build`) to build the app and `npm start` (or
 ## License
 dinou is licensed under the [MIT License](https://github.com/roggc/dinou/blob/master/LICENSE.md).
+```
+```

package/dinou/asset-require-hook.js ADDED Viewed

@@ -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/createScopedName.js ADDED Viewed

@@ -0,0 +1,8 @@
+const genericNames = require("generic-names");
+const path = require("path");
+const generate = genericNames("[hash:base64]", {
+  context: path.resolve(process.cwd(), "src"),
+});
+module.exports = generate;

package/dinou/render-html.js CHANGED Viewed

@@ -1,12 +1,23 @@
-require("@babel/register")({
-  ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
-  presets: [
-    ["@babel/preset-react", { runtime: "automatic" }],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["@babel/plugin-transform-modules-commonjs"],
+const addHook = require("./asset-require-hook.js");
+const { register } = require("esbuild-register/dist/node");
+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 { renderToPipeableStream } = require("react-dom/server");
 const { getJSX, getSSGJSX } = require("./get-jsx");
 const { renderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
@@ -26,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);
@@ -38,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 CHANGED Viewed

@@ -1,27 +1,35 @@
 require("dotenv/config");
-const register = require("react-server-dom-webpack/node-register");
+const webpackRegister = require("react-server-dom-webpack/node-register");
 const path = require("path");
 const { readFileSync } = require("fs");
 const { renderToPipeableStream } = require("react-server-dom-webpack/server");
 const express = require("express");
 const { spawn } = require("child_process");
-const babelRegister = require("@babel/register");
+const { register } = require("esbuild-register/dist/node");
 const webpack = require("webpack");
 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");
-register();
-babelRegister({
-  ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
-  presets: [
-    ["@babel/preset-react", { runtime: "automatic" }],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["@babel/transform-modules-commonjs"],
+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";
@@ -70,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 CHANGED Viewed

@@ -1,14 +1,22 @@
-const babelRegister = require("@babel/register");
+const { register } = require("esbuild-register/dist/node");
 const { buildStaticPages } = require("./build-static-pages");
-babelRegister({
-  ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
-  presets: [
-    ["@babel/preset-react", { runtime: "automatic" }],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["@babel/transform-modules-commonjs"],
+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 CHANGED Viewed

@@ -16,10 +16,18 @@ if (fs.existsSync(path.join(modulePath, "webpack.config.js"))) {
   );
 }
-fs.copyFileSync(
-  path.join(modulePath, "LICENSE.md"),
-  path.join(projectRoot, "dinou/LICENSE.md")
-);
+if (fs.existsSync(path.join(modulePath, "postcss.config.js"))) {
+  fs.copyFileSync(
+    path.join(modulePath, "postcss.config.js"),
+    path.join(projectRoot, "postcss.config.js")
+  );
+}
+// 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 CHANGED Viewed

@@ -1,45 +1,55 @@
-{
-  "name": "dinou",
-  "version": "1.1.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",
-    "@babel/register": "^7.27.1",
-    "babel-loader": "^10.0.0",
-    "commander": "^14.0.0",
-    "copy-webpack-plugin": "^13.0.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^16.5.0",
-    "express": "^5.1.0",
-    "react-server-dom-webpack": "^19.1.0",
-    "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.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",
+    "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/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};

package/webpack.config.js CHANGED Viewed

@@ -3,15 +3,19 @@ const path = require("path");
 const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");
 const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const createScopedName = require("./dinou/createScopedName");
 const isDevelopment = process.env.NODE_ENV !== "production";
 module.exports = {
   mode: isDevelopment ? "development" : "production",
-  entry: [
-    isDevelopment && "webpack-hot-middleware/client?reload=true",
-    path.resolve(__dirname, "./dinou/client.jsx"),
-  ].filter(Boolean),
+  entry: {
+    main: [
+      isDevelopment && "webpack-hot-middleware/client?reload=true",
+      path.resolve(__dirname, "./dinou/client.jsx"),
+    ].filter(Boolean),
+  },
   output: {
     path: path.resolve(process.cwd(), "./public"),
     filename: "main.js",
@@ -37,6 +41,60 @@ module.exports = {
         },
         exclude: [/node_modules\/(?!dinou)/, /dist/],
       },
+      {
+        test: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                getLocalIdent: (context, localIdentName, localName) => {
+                  return createScopedName(localName, context.resourcePath);
+                },
+              },
+              importLoaders: 1,
+            },
+          },
+          "postcss-loader",
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /\.module\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                config: path.resolve(__dirname, "postcss.config.js"),
+              },
+            },
+          },
+        ],
+      },
+      {
+        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: [
@@ -51,8 +109,23 @@ module.exports = {
         },
       ],
     }),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+    }),
   ].filter(Boolean),
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        styles: {
+          name: "styles",
+          type: "css/mini-extract",
+          chunks: "all",
+          enforce: true,
+        },
+      },
+    },
+  },
 };