dinou 4.0.7 → 4.0.9

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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/).
 
+## [4.0.9]
+
+### Changed
+
+- Remove unused dependency '@pmmmwh/react-refresh-webpack-plugin'.
+- Delete unnecessary commented code and translate comments to English.
+
+## [4.0.8]
+
+### Changed
+
+- Increase versions of concurrently and copy-webpack-plugin for vulnerabilities.
+- Uninstall css-modules-require-hook and create dinou/core/css-require-hook.js.
+
 ## [4.0.7]
 
 ### Fixed

package/dinou/core/babel-esm-loader.js

@@ -6,10 +6,7 @@ const createScopedName = require("./createScopedName");
 const { extensionsWithDot } = require("./asset-extensions.js");
 const { getAbsPathWithExt } = require("./get-abs-path-with-ext.js");
 
-require("css-modules-require-hook")({
-  generateScopedName: createScopedName,
-  extensions: [".css"],
-});
+require("./css-require-hook.js")();
 
 exports.resolve = async function resolve(specifier, context, defaultResolve) {
   const absPathWithExt = getAbsPathWithExt(specifier, context);

package/dinou/core/build-static-pages.js

@@ -69,6 +69,12 @@ function createBailoutProxy(target, label, onBailout) {
   });
 }
 
+/**
+ * Compiles all static pages in the application.
+ * Crawls the "src/" folder to collect all routes, resolves dynamic path segments,
+ * mock-renders them inside a server context, and serializes successful static renders
+ * into RSC JSON payloads.
+ */
 async function buildStaticPages() {
   const srcFolder = path.resolve(process.cwd(), "src");
   const distFolder = path.resolve(process.cwd(), "dist");
@@ -82,6 +88,11 @@ async function buildStaticPages() {
     mkdirSync(distFolder, { recursive: true });
   }
 
+  /**
+   * Recursively traverses the page directory tree to collect all eligible static routes.
+   * Handles static folder names, route groups (e.g. "(group)"), and dynamic parameters
+   * like catch-all segments or optional segments by resolving their static paths.
+   */
   async function collectPages(
     currentPath,
     segments = [],
@@ -141,8 +152,7 @@ async function buildStaticPages() {
             pagePath && path.dirname(pagePath) === dynamicPath;
           if (isLocalPage && !dynamic?.()) {
             console.log(
-              `Found optional catch-all route: ${
-                segments.join("/") ?? ""
+              `Found optional catch-all route: ${segments.join("/") ?? ""
               }/[[...${paramName}]]`,
             );
             try {
@@ -283,8 +293,7 @@ async function buildStaticPages() {
             pagePath && path.dirname(pagePath) === dynamicPath;
           if (isLocalPage && !dynamic?.()) {
             console.log(
-              `Found catch-all route: ${
-                segments.join("/") ?? ""
+              `Found catch-all route: ${segments.join("/") ?? ""
               }/[...${paramName}]`,
             );
             try {
@@ -308,17 +317,13 @@ async function buildStaticPages() {
                       const val = pathItem[key];
 
                       // 🛡️ FIX 1: Relaxed validation.
-                      // We only throw error if the CURRENT parameter (which is mandatory catch-all) is missing.
-                      // If parent keys are missing (key !== paramName), we allow undefined (assume optional).
+                      // Mark the route as invalid (skipping its generation) if any parent parameter segment is missing.
                       if (
                         (val === undefined || val === null || val === "") &&
                         i < arr.length - 1
                       ) {
                         notValidRoute = true;
                       }
-                      // throw new Error(
-                      //   `[Dinou] The mandatory catch-all parameter '${paramName}' is undefined in ${dynamicPath}.`
-                      // );
                       return val;
                     });
                     if (notValidRoute) continue;
@@ -329,7 +334,6 @@ async function buildStaticPages() {
                   // 🛡️ FIX 2: Segment filtering.
                   // Flatten (.flat) to handle the catch-all array and filter undefineds from parents.
                   const validSegmentsToAdd = segmentsToAdd.flat();
-                  // .filter((s) => s !== undefined && s !== null && s !== "");
 
                   const paramsToAdd = isObject
                     ? pathItem
@@ -393,8 +397,7 @@ async function buildStaticPages() {
             pagePath && path.dirname(pagePath) === dynamicPath;
           if (isLocalPage && !dynamic?.()) {
             console.log(
-              `Found optional dynamic route: ${
-                segments.join("/") ?? ""
+              `Found optional dynamic route: ${segments.join("/") ?? ""
               }/[[${paramName}]]`,
             );
             try {
@@ -537,16 +540,12 @@ async function buildStaticPages() {
                       }
                       const val = pathItem[key];
 
-                      // 🛡️ CHANGE: We only throw error if the CURRENT parameter (which is mandatory) is missing.
-                      // If a parent parameter is missing (key !== paramName), we assume it could be optional.
+                      // 🛡️ CHANGE: If a parent parameter is missing, we mark the route as invalid to skip it.
                       if (
                         (val === undefined || val === null || val === "") &&
                         i < arr.length - 1
                       ) {
                         notValidRoute = true;
-                        // throw new Error(
-                        //   `[Dinou] The mandatory parameter '${paramName}' is undefined in ${dynamicPath}.`
-                        // );
                       }
                       return val;
                     });
@@ -555,9 +554,7 @@ async function buildStaticPages() {
                     segmentsToAdd = [pathItem];
                   }
 
-                  // 🛡️ CHANGE: We filter undefineds here too, because a parent could be optional
                   const validSegmentsToAdd = segmentsToAdd.flat();
-                  // .filter((s) => s !== undefined && s !== null && s !== "");
 
                   const paramsToAdd = isObject
                     ? pathItem
@@ -566,7 +563,7 @@ async function buildStaticPages() {
                   pages.push(
                     ...(await collectPages(
                       dynamicPath,
-                      [...segments, ...validSegmentsToAdd], // Use the filtered version
+                      [...segments, ...validSegmentsToAdd],
                       { ...params, ...paramsToAdd },
                     )),
                   );
@@ -639,16 +636,12 @@ async function buildStaticPages() {
                         }
                         const val = pathItem[key];
 
-                        // 🛡️ CHANGE: We only throw error if the CURRENT parameter (which is mandatory) is missing.
-                        // If a parent parameter is missing (key !== paramName), we assume it could be optional.
+                        // 🛡️ CHANGE: If a parent parameter is missing, we mark the route as invalid to skip it.
                         if (
                           (val === undefined || val === null || val === "") &&
                           i < arr.length - 1
                         ) {
                           notValidRoute = true;
-                          // throw new Error(
-                          //   `[Dinou] The mandatory parameter '${paramName}' is undefined in ${dynamicPath}.`
-                          // );
                         }
                         return val;
                       });
@@ -657,9 +650,7 @@ async function buildStaticPages() {
                       segmentsToAdd = [pathItem];
                     }
 
-                    // 🛡️ CHANGE: We filter undefineds here too, because a parent could be optional
                     const validSegmentsToAdd = segmentsToAdd.flat();
-                    // .filter((s) => s !== undefined && s !== null && s !== "");
 
                     const paramsToAdd = isObject
                       ? pathItem
@@ -668,7 +659,7 @@ async function buildStaticPages() {
                     pages.push(
                       ...(await collectPages(
                         dynamicPath,
-                        [...segments, ...validSegmentsToAdd, entry.name], // Use the filtered version
+                        [...segments, ...validSegmentsToAdd, entry.name],
                         { ...params, ...paramsToAdd },
                       )),
                     );
@@ -742,6 +733,7 @@ async function buildStaticPages() {
     return pages;
   }
 
+  // Crawl complete, start rendering and serialization loop for all discovered static pages
   const pages = await collectPages(srcFolder);
 
   for (const { path: folderPath, segments, params } of pages) {
@@ -853,10 +845,8 @@ async function buildStaticPages() {
         );
         const pageModule = await importModule(pagePath);
         const Page = pageModule.default ?? pageModule;
-        // Set displayName for better serialization
-        // if (!Page.displayName) Page.displayName = "Page";
 
-        let props = { params /* searchParams: {}*/ };
+        let props = { params };
 
         const [pageFunctionsPath] = getFilePathAndDynamicParams(
           segments,
@@ -882,6 +872,7 @@ async function buildStaticPages() {
         let jsx = React.createElement(Page, props);
         jsx = { ...jsx, __modulePath: pagePath };
 
+        // Resolve and nest layout components from the page folder up to the source root
         const noLayoutPath = path.join(folderPath, "no_layout");
         if (!existsSync(noLayoutPath)) {
           const layouts = getFilePathAndDynamicParams(
@@ -921,7 +912,7 @@ async function buildStaticPages() {
               }
               let props = {
                 params: dParams,
-                /*searchParams: {},*/ ...updatedSlots,
+                ...updatedSlots,
               };
               if (index === layouts.length - 1 || resetLayoutPath) {
                 props = { ...props, ...(pageFunctionsProps?.layout ?? {}) };
@@ -936,6 +927,7 @@ async function buildStaticPages() {
           }
         }
 
+        // Render the layout-nested React element tree to client-side RSC JSON format
         return await asyncRenderJSXToClientJSX(jsx);
       });
 
@@ -950,16 +942,12 @@ async function buildStaticPages() {
         continue;
       }
 
-      // const outputPath = path.join(distFolder, segments.join("/"));
-      // mkdirSync(outputPath, { recursive: true });
-
-      // const jsonPath = path.join(outputPath, "index.json");
-
       const sideEffects = {
         redirect: mockRes._redirectUrl,
         cookies: mockRes._cookies,
       };
 
+      // Store the serialized RSC JSON, revalidation timer, and side effects (cookies/redirects)
       setJSXJSON(reqPath, {
         jsx: serializeReactElement(jsx),
         revalidate: revalidate?.(),
@@ -976,6 +964,11 @@ async function buildStaticPages() {
   console.log(`Static site generated with ${pages.length} pages`);
 }
 
+/**
+ * Renders and compiles a single page dynamically on-demand at runtime.
+ * Used for Incremental Static Regeneration (ISR) or on-demand page generation.
+ * Follows the same bailout detection and RSC serialization logic as the build compiler.
+ */
 async function buildStaticPage(reqPath, isDynamic = null) {
   const srcFolder = path.resolve(process.cwd(), "src");
 
@@ -1130,7 +1123,7 @@ async function buildStaticPage(reqPath, isDynamic = null) {
       const pageModule = await importModule(pagePath);
       const Page = pageModule.default ?? pageModule;
 
-      let props = { params: dParams /*searchParams: {}*/ };
+      let props = { params: dParams };
       const [pageFunctionsPath] = getFilePathAndDynamicParams(
         segments,
         {},
@@ -1194,7 +1187,6 @@ async function buildStaticPage(reqPath, isDynamic = null) {
             }
             let layoutProps = {
               params: dParams,
-              // searchParams: {},
               ...updatedSlots,
             };
             if (index === layouts.length - 1 || resetLayoutPath) {
@@ -1268,6 +1260,11 @@ function filterProps(props_) {
   return props_;
 }
 
+/**
+ * Recursively serializes a React element tree into a custom JSON format.
+ * This format represents the React Server Component (RSC) payload sent to the client,
+ * mapping HTML tags, React fragments, Suspense boundaries, and Client Component stubs.
+ */
 function serializeReactElement(element) {
   if (React.isValidElement(element)) {
     let type;
@@ -1288,7 +1285,7 @@ function serializeReactElement(element) {
       }
       try {
         componentName = element.type.displayName || element.type.name;
-      } catch (e) {}
+      } catch (e) { }
 
       if (!modulePath && global.__DINOU_MODULE_MAP) {
         const meta = global.__DINOU_MODULE_MAP.get(element.type);

package/dinou/core/css-require-hook.js

@@ -0,0 +1,64 @@
+const fs = require("fs");
+const postcss = require("postcss");
+const createScopedName = require("./createScopedName");
+
+function registerCSSRequireHook() {
+  require.extensions[".css"] = function (module, filename) {
+    const cssContent = fs.readFileSync(filename, "utf8");
+    const jsonResult = {};
+
+    const plugin = {
+      postcssPlugin: "extract-classes",
+      Rule(rule) {
+        // Ignore classes inside animations (@keyframes)
+        if (rule.parent && rule.parent.name === "keyframes") {
+          return;
+        }
+
+        const selector = rule.selector;
+        // Regex to capture valid class names
+        const classRegex = /\.([_a-zA-Z0-9-]+)/g;
+        let match;
+
+        while ((match = classRegex.exec(selector)) !== null) {
+          const className = match[1];
+
+          // Handle :global and :local selectors
+          const index = match.index;
+          const before = selector.slice(0, index);
+          const lastGlobal = before.lastIndexOf(":global");
+          const lastLocal = before.lastIndexOf(":local");
+
+          // If the class is under an active :global scope, do not hash it
+          if (lastGlobal > lastLocal) {
+            const afterGlobal = before.slice(lastGlobal);
+            if (afterGlobal.includes("(")) {
+              const openParens = afterGlobal.split("(").length - 1;
+              const closeParens = afterGlobal.split(")").length - 1;
+              if (openParens > closeParens) {
+                jsonResult[className] = className;
+                continue;
+              }
+            } else {
+              // Example: :global .my-class (without parentheses)
+              jsonResult[className] = className;
+              continue;
+            }
+          }
+
+          // If it is a local class, generate the corresponding deterministic hash
+          if (!jsonResult[className]) {
+            jsonResult[className] = createScopedName(className, filename);
+          }
+        }
+      }
+    };
+
+    // Process strictly synchronously (PostCSS is synchronous if its plugins are)
+    postcss([plugin]).process(cssContent, { from: filename }).css;
+
+    module.exports = jsonResult;
+  };
+}
+
+module.exports = registerCSSRequireHook;

package/dinou/core/generating-isg.js

@@ -1,4 +1,3 @@
-// dinou/core/promote-to-static.js
 const fs = require("fs").promises;
 const path = require("path");
 const { existsSync, copyFileSync } = require("fs");
@@ -65,8 +64,8 @@ function generatingISG(reqPath, isDynamicFromServer) {
         console.log(`✅ [ISG] Successfully promoted ${reqPath} to static.`);
       } else {
         // Cleanup if failed
-        await fs.unlink(pageResult.tempPath).catch(() => {});
-        await fs.unlink(rscResult.tempPath).catch(() => {});
+        await fs.unlink(pageResult.tempPath).catch(() => { });
+        await fs.unlink(rscResult.tempPath).catch(() => { });
         console.warn(`⚠️ [ISG] Failed to generate HTML/RSC for ${reqPath}`);
       }
     } catch (e) {

package/dinou/core/get-error-jsx.js

@@ -66,7 +66,6 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
     const Page = pageModule.default ?? pageModule;
     jsx = React.createElement(Page, {
       params: dynamicParams ?? {},
-      // searchParams: query,
       error,
     });
 
@@ -152,7 +151,6 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
 
                 updatedSlotElement = React.createElement(SlotError, {
                   params: slotErrorParams, // Resolved params (if any)
-                  // searchParams: query,
                   key: slotName,
                   error: serializedError, // We pass the captured error
                 });
@@ -176,7 +174,7 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
         }
         let props = {
           params: dParams,
-          /* searchParams: query,*/ ...updatedSlots,
+          ...updatedSlots,
         };
         jsx = React.createElement(Layout, props, jsx);
         const layoutFolderPath = path.dirname(layoutPath);

package/dinou/core/get-file-path-and-dynamic-params.js

@@ -37,7 +37,6 @@ function getSlots(currentPath, reqSegments, query) {
 
         slots[slotName] = React.createElement(Slot, {
           params: slotParams,
-          // searchParams: query,
           key: slotName,
           __modulePath: slotPath ?? null,
         });

package/dinou/core/get-jsx.js

@@ -109,7 +109,6 @@ async function getJSX(
 
     let props = {
       params: dynamicParams,
-      // searchParams: query,
     };
 
     const pageFolder = path.dirname(pagePath);
@@ -207,7 +206,6 @@ async function getJSX(
 
               updatedSlotElement = React.createElement(SlotError, {
                 params: slotErrorParams,
-                // searchParams: query,
                 key: slotName,
                 error: serializedError,
               });
@@ -227,7 +225,7 @@ async function getJSX(
           updatedSlots[slotName] = updatedSlotElement;
         }
       }
-      let props = { params: dParams, /*searchParams: query,*/ ...updatedSlots };
+      let props = { params: dParams, ...updatedSlots };
       if (index === layouts.length - 1 || resetLayoutPath) {
         props = { ...props, ...(pageFunctionsProps?.layout ?? {}) };
       }

package/dinou/core/get-ssg-jsx-or-jsx.js

@@ -4,10 +4,10 @@ const { getJSXJSON } = require("./jsx-json.js");
 
 async function getSSGJSXOrJSX(reqPath, query, isDevelopment = false) {
   const isNotFound = null;
-  const result = /*Object.keys(query).length ||*/ isDevelopment
+  const result = isDevelopment
     ? await getJSX(reqPath, query, isNotFound, isDevelopment)
     : (await getSSGJSX(getJSXJSON(reqPath))) ??
-      (await getJSX(reqPath, query, isNotFound, isDevelopment));
+    (await getJSX(reqPath, query, isNotFound, isDevelopment));
   return result;
 }
 

package/dinou/core/render-app-to-html.js

@@ -52,10 +52,6 @@ function renderAppToHtml(
     renderHtmlPath, // ⬅️ CHANGE 2: The script (path) is the first argument of fork (no need for "node")
     scriptArgs, // Positional arguments for the script (process.argv)
     {
-      // env: {
-      //   NODE_ENV: process.env.NODE_ENV,
-      //   DINOU_BUILD_TOOL: process.env.DINOU_BUILD_TOOL,
-      // }, // You can pass other environment variables if necessary
       // ⬅️ CHANGE 3: Apply Whitelist to execArgv, resetting inherited options
       execArgv: childExecArgv,
       // ⬅️ CHANGE 4: stdio needs 'ipc' for fork to work and for the future communication channel
@@ -129,7 +125,7 @@ function renderAppToHtml(
             if (options && options.httpOnly) {
               console.error(
                 `[Dinou Error] Cannot set HttpOnly cookie '${name}' because streaming has already started. ` +
-                  `Headers are sent, and document.cookie cannot write HttpOnly cookies.`,
+                `Headers are sent, and document.cookie cannot write HttpOnly cookies.`,
               );
               return; // We do nothing because it would fail silently in the browser
             }

package/dinou/core/render-html.js

@@ -14,9 +14,7 @@ babelRegister({
 const addHook = require("./asset-require-hook.js");
 const { extensions } = require("./asset-extensions.js");
 const createScopedName = require("./createScopedName");
-require("css-modules-require-hook")({
-  generateScopedName: createScopedName,
-});
+require("./css-require-hook.js")();
 addHook({
   extensions,
   name: function (localName, filepath) {
@@ -142,12 +140,12 @@ async function renderToStream(
     try {
       const isNotFound = {};
       const jsx =
-        /*Object.keys(query).length ||*/ isDevelopment ||
-        isDynamic ||
-        !hasJsxJson
+        isDevelopment ||
+          isDynamic ||
+          !hasJsxJson
           ? renderJSXToClientJSX(
-              await getJSX(reqPath, query, isNotFound, isDevelopment),
-            )
+            await getJSX(reqPath, query, isNotFound, isDevelopment),
+          )
           : ((await getSSGJSX(jsxJson)) ??
             renderJSXToClientJSX(
               await getJSX(reqPath, query, isNotFound, isDevelopment),
@@ -162,7 +160,7 @@ async function renderToStream(
               try {
                 stream.unpipe(process.stdout);
                 stream.destroy();
-              } catch {}
+              } catch { }
             }
             const isProd = process.env.NODE_ENV === "production";
 
@@ -190,28 +188,25 @@ async function renderToStream(
                   writeErrorOutput(error, isProd);
                   process.exit(1);
                 },
-                // bootstrapModules: [getAssetFromManifest("error.js")],
                 bootstrapModules: isDevelopment
                   ? [
-                      getAssetFromManifest("error.js"),
-                      isWebpack
-                        ? undefined
-                        : getAssetFromManifest("runtime.js"),
-                    ].filter(Boolean)
+                    getAssetFromManifest("error.js"),
+                    isWebpack
+                      ? undefined
+                      : getAssetFromManifest("runtime.js"),
+                  ].filter(Boolean)
                   : [getAssetFromManifest("error.js")],
                 bootstrapScriptContent: `window.__DINOU_ERROR_MESSAGE__=${JSON.stringify(
                   error.message || "Unknown error",
-                )};window.__DINOU_ERROR_NAME__=${JSON.stringify(error.name)};${
-                  isDevelopment
-                    ? `window.__DINOU_ERROR_STACK__=${JSON.stringify(
-                        error.stack || "No stack trace available",
-                      )};`
-                    : ""
-                }${
-                  isDevelopment
+                )};window.__DINOU_ERROR_NAME__=${JSON.stringify(error.name)};${isDevelopment
+                  ? `window.__DINOU_ERROR_STACK__=${JSON.stringify(
+                    error.stack || "No stack trace available",
+                  )};`
+                  : ""
+                  }${isDevelopment
                     ? `window.HMR_WEBSOCKET_URL="ws://localhost:3001";`
                     : ""
-                }`,
+                  }`,
               });
             } catch (err) {
               console.error("Render error (no error.tsx?):", err);
@@ -225,14 +220,14 @@ async function renderToStream(
         },
         bootstrapModules: isDevelopment
           ? [
-              getAssetFromManifest("main.js"),
-              isWebpack ? undefined : getAssetFromManifest("runtime.js"),
-            ].filter(Boolean)
+            getAssetFromManifest("main.js"),
+            isWebpack ? undefined : getAssetFromManifest("runtime.js"),
+          ].filter(Boolean)
           : [getAssetFromManifest("main.js")],
         ...(isDevelopment
           ? {
-              bootstrapScriptContent: `window.HMR_WEBSOCKET_URL="ws://localhost:3001";`,
-            }
+            bootstrapScriptContent: `window.HMR_WEBSOCKET_URL="ws://localhost:3001";`,
+          }
           : {}),
       });
     } catch (error) {

package/dinou/core/server-function-proxy-webpack.js

@@ -1,8 +1,7 @@
-// public/server-function-proxy.js
 import { createFromFetch } from "react-server-dom-webpack/client";
 
 function createServerFunctionProxy(id) {
-  return new Proxy(() => {}, {
+  return new Proxy(() => { }, {
     apply: async (_target, _thisArg, args) => {
       let body;
       const headers = {
@@ -39,7 +38,7 @@ function createServerFunctionProxy(id) {
         const range = document.createRange();
         const documentFragment = range.createContextualFragment(html);
         document.body.appendChild(documentFragment);
-        return new Promise(() => {});
+        return new Promise(() => { });
       }
 
       // Case 2: RSC or Hybrid Stream (Buffered)