dinou 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -5,6 +5,31 @@ 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.1.0]
+
+### Added
+
+- Server Functions handling.
+
+## [2.0.3]
+
+### Fixed
+
+- Fixed cross-platform path handling using Node.js `path` module for macOS/Linux compatibility in `get-jsx.js`, `get-error-jsx.js`, and `build-static-pages.js`.
+- Added `awaitWriteFinish` to `chokidar` in `server.js` to avoid parsing incomplete manifest files on macOS.
+
+## [2.0.2]
+
+### Fixed
+
+- Watch server components in react manifest plugin.
+
+## [2.0.1]
+
+### Fixed
+
+- Use createFromFetch from react-server-dom-esm in client-error.jsx.
+
 ## [2.0.0]
 
 ### Changed

package/dinou/build-static-pages.js

@@ -357,7 +357,7 @@ async function buildStaticPages() {
             const updatedSlots = {};
             for (const [slotName, slotElement] of Object.entries(slots)) {
               const slotFolder = path.join(
-                layoutPath.split("\\").slice(0, -1).join("\\"),
+                path.dirname(layoutPath),
                 `@${slotName}`
               );
               const [slotPath] = getFilePathAndDynamicParams(

package/dinou/get-error-jsx.js

@@ -58,10 +58,10 @@ function getErrorJSX(reqPath, query, error) {
     });
 
     const noLayoutErrorPath = path.join(
-      pagePath.split("\\").slice(0, -1).join("\\"),
+      path.dirname(pagePath),
       `no_layout_error`
     );
-    if (existsSync(path.resolve(process.cwd(), `${noLayoutErrorPath}`))) {
+    if (existsSync(noLayoutErrorPath)) {
       return jsx;
     }
 

package/dinou/get-jsx.js

@@ -55,11 +55,13 @@ async function getJSX(reqPath, query) {
         params: dParams ?? {},
         query,
       });
+      
+      const notFoundDir = path.dirname(notFoundPath);
       const noLayoutNotFoundPath = path.join(
-        notFoundPath.split("\\").slice(0, -1).join("\\"),
+        notFoundDir,
         `no_layout_not_found`
       );
-      if (existsSync(path.resolve(process.cwd(), `${noLayoutNotFoundPath}`))) {
+      if (existsSync(noLayoutNotFoundPath)) {  
         return jsx;
       }
     }
@@ -71,7 +73,8 @@ async function getJSX(reqPath, query) {
       params: dynamicParams,
       query,
     };
-    const pageFolder = pagePath.split("\\").slice(0, -1).join("\\");
+    
+    const pageFolder = path.dirname(pagePath);
     const [pageFunctionsPath] = getFilePathAndDynamicParams(
       reqSegments,
       query,

package/dinou/server-function-proxy.js

@@ -0,0 +1,23 @@
+// public/server-function-proxy.js
+import { createFromFetch } from "@matthamlin/react-server-dom-esm/client";
+
+export function createServerFunctionProxy(id) {
+  return new Proxy(() => {}, {
+    apply: async (_target, _thisArg, args) => {
+      const res = await fetch("/____server_function____", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id, args }),
+      });
+      if (!res.ok) throw new Error("Server function failed");
+
+      const contentType = res.headers.get("content-type") || "";
+
+      if (contentType.includes("text/x-component")) {
+        return createFromFetch(Promise.resolve(res));
+      } else {
+        return res.json();
+      }
+    },
+  });
+}

package/dinou/server.js

@@ -289,6 +289,48 @@ app.get(/^\/.*\/?$/, async (req, res) => {
   }
 });
 
+app.post("/____server_function____", async (req, res) => {
+  try {
+    const { id, args } = req.body;
+    const [fileUrl, exportName] = id.split("#");
+
+    let relativePath = fileUrl.replace(/^file:\/\/\/?/, "");
+    const absolutePath = path.resolve(process.cwd(), relativePath);
+
+    const mod = require(absolutePath);
+
+    const fn = exportName === "default" ? mod.default : mod[exportName];
+
+    if (typeof fn !== "function") {
+      return res.status(400).json({ error: "Export is not a function" });
+    }
+
+    const result = await fn(...args);
+
+    if (
+      result &&
+      result.$$typeof === Symbol.for("react.transitional.element")
+    ) {
+      res.setHeader("Content-Type", "text/x-component");
+      const manifest = readFileSync(
+        path.resolve(
+          process.cwd(),
+          `${webpackFolder}/react-client-manifest.json`
+        ),
+        "utf8"
+      );
+      const moduleMap = JSON.parse(manifest);
+      const { pipe } = renderToPipeableStream(result, moduleMap);
+      pipe(res);
+    } else {
+      res.json(result);
+    }
+  } catch (err) {
+    console.error("Server function error:", err);
+    res.status(500).json({ error: err.message });
+  }
+});
+
 const port = process.env.PORT || 3000;
 
 app.listen(port, async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {

package/rollup-plugins/rollup-plugin-server-functions.js

@@ -0,0 +1,79 @@
+// rollup-plugin-server-functions.js
+const path = require("path");
+const parser = require("@babel/parser");
+const traverse = require("@babel/traverse").default;
+
+function parseExports(code) {
+  const ast = parser.parse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"],
+  });
+  const exports = new Set();
+
+  traverse(ast, {
+    ExportDefaultDeclaration() {
+      exports.add("default");
+    },
+    ExportNamedDeclaration(p) {
+      if (p.node.declaration) {
+        if (p.node.declaration.type === "FunctionDeclaration") {
+          exports.add(p.node.declaration.id.name);
+        } else if (p.node.declaration.type === "VariableDeclaration") {
+          p.node.declaration.declarations.forEach((d) => {
+            if (d.id.type === "Identifier") {
+              exports.add(d.id.name);
+            }
+          });
+        }
+      } else if (p.node.specifiers) {
+        p.node.specifiers.forEach((s) => {
+          if (s.type === "ExportSpecifier") {
+            exports.add(s.exported.name);
+          }
+        });
+      }
+    },
+  });
+
+  return Array.from(exports);
+}
+
+function serverFunctionsPlugin() {
+  return {
+    name: "server-functions-proxy",
+    transform(code, id) {
+      if (!code.trim().startsWith('"use server"')) return null;
+
+      const exports = parseExports(code);
+      if (exports.length === 0) return null;
+
+      const fileUrl = `file:///${path.relative(process.cwd(), id)}`;
+
+      // Generamos un módulo que exporta proxies en lugar del código real
+      let proxyCode = `
+        import { createServerFunctionProxy } from "/serverFunctionProxy.js";
+      `;
+
+      for (const exp of exports) {
+        const key =
+          exp === "default" ? `${fileUrl}#default` : `${fileUrl}#${exp}`;
+        if (exp === "default") {
+          proxyCode += `export default createServerFunctionProxy(${JSON.stringify(
+            key
+          )});\n`;
+        } else {
+          proxyCode += `export const ${exp} = createServerFunctionProxy(${JSON.stringify(
+            key
+          )});\n`;
+        }
+      }
+
+      return {
+        code: proxyCode,
+        map: null,
+      };
+    },
+  };
+}
+
+module.exports = serverFunctionsPlugin;

package/rollup.config.js

@@ -12,6 +12,7 @@ const reactRefreshWrapModules = require("./react-refresh/react-refresh-wrap-modu
 const { esmHmrPlugin } = require("./react-refresh/rollup-plugin-esm-hmr.js");
 const dinouAssetPlugin = require("./rollup-plugins/dinou-asset-plugin.js");
 const tsconfigPaths = require("rollup-plugin-tsconfig-paths");
+const serverFunctionsPlugin = require("./rollup-plugins/rollup-plugin-server-functions");
 
 const isDevelopment = process.env.NODE_ENV !== "production";
 const outputDirectory = isDevelopment ? "public" : "dist3";
@@ -31,10 +32,18 @@ module.exports = async function () {
           ),
           main: path.resolve(__dirname, "dinou/client.jsx"),
           error: path.resolve(__dirname, "dinou/client-error.jsx"),
+          serverFunctionProxy: path.resolve(
+            __dirname,
+            "dinou/server-function-proxy.js"
+          ),
         }
       : {
           main: path.resolve(__dirname, "dinou/client.jsx"),
           error: path.resolve(__dirname, "dinou/client-error.jsx"),
+          serverFunctionProxy: path.resolve(
+            __dirname,
+            "dinou/server-function-proxy.js"
+          ),
         },
     output: {
       dir: outputDirectory,
@@ -95,7 +104,12 @@ module.exports = async function () {
         },
       }),
       copy({
-        targets: [{ src: "favicons/*", dest: outputDirectory }],
+        targets: [
+          {
+            src: "favicons/*",
+            dest: outputDirectory,
+          },
+        ],
         flatten: true,
       }),
       reactClientManifest({
@@ -103,6 +117,7 @@ module.exports = async function () {
       }),
       isDevelopment && reactRefreshWrapModules(),
       isDevelopment && esmHmrPlugin(),
+      serverFunctionsPlugin(),
     ].filter(Boolean),
     watch: {
       exclude: ["public/**"],
@@ -111,6 +126,9 @@ module.exports = async function () {
       if (
         warning.message.includes(
           'Module level directives cause errors when bundled, "use client"'
+        ) ||
+        warning.message.includes(
+          'Module level directives cause errors when bundled, "use server"'
         )
       ) {
         return;