feat: implement complete Deno runtime support for Phoenix.React

- Add Phoenix.React.Runtime.Deno module with full Bun feature parity
- Implement Deno 2.x compatible bundling using deno compile
- Add development mode with source files and hot reloading
- Add production mode with standalone binary compilation
- Support JSX file extensions for proper React parsing
- Implement npm package support via --node-modules-dir flag
- Add comprehensive test suite (17 test cases)
- Update documentation and README with Deno configuration
- Add environment variable switching between Bun and Deno runtimes
- Fix import path resolution for relative module imports
- Update react_demo to support both runtimes via REACT_RUNTIME env var

Author: GSMLG-BOT

AGENTS.md

@@ -0,0 +1,19 @@
+# Agent Guidelines for Phoenix.React
+
+## Commands
+- **Build**: `mix deps.get && npm install`
+- **Format**: `mix format` (uses .formatter.exs config)
+- **Test**: `mix test` (requires 3s delay for server startup in test_helper.exs)
+- **Single test**: `mix test path/to/test.exs:line_number`
+- **Bundle React components**: `mix phx.react.bun.bundle --component-base=assets/component --output=priv/react/server.js`
+
+## Code Style
+- **Elixir**: Follow standard Elixir conventions, use `mix format`
+- **Module names**: PascalCase (e.g., `Phoenix.React.Server`)
+- **Function names**: snake_case
+- **Types**: Use `@type` and `@spec` for all public functions
+- **Error handling**: Return `{:ok, result}` or `{:error, reason}` tuples
+- **Imports**: Alias modules at top, use qualified calls when needed
+- **GenServer**: Use `@impl true` for callback implementations
+- **Documentation**: Include `@moduledoc` and `@doc` for public modules/functions
+- **React components**: Export `Component` function, use JSX syntax in .js files

README.md

@@ -47,7 +47,44 @@ config :phoenix_react_server, Phoenix.React,
 Supported `runtime`
 
 - [x] `Phoenix.React.Runtime.Bun`
-- [ ] `Phoenix.React.Runtime.Deno`
+- [x] `Phoenix.React.Runtime.Deno`
+
+### Using Deno Runtime
+
+To use Deno instead of Bun, configure the runtime and its specific settings:
+
+```elixir
+config :phoenix_react_server, Phoenix.React,
+  runtime: Phoenix.React.Runtime.Deno,
+  component_base: Path.expand("../assets/component", __DIR__),
+  cache_ttl: 60
+
+# Deno-specific configuration
+config :phoenix_react_server, Phoenix.React.Runtime.Deno,
+  cmd: System.find_executable("deno"),
+  server_js: Path.expand("../priv/react/server.js", __DIR__),
+  port: 5125,
+  env: :dev  # Use :prod for production
+```
+
+**Deno Requirements:**
+- Deno 2.x (recommended)
+- Components must use `.jsx` file extension for proper JSX parsing
+- Deno automatically downloads npm packages via `--node-modules-dir` flag
+
+**Environment Variable Switching:**
+You can also use environment variable to switch runtimes:
+
+```elixir
+runtime =
+  case System.get_env("REACT_RUNTIME", "bun") do
+    "bun" -> Phoenix.React.Runtime.Bun
+    "deno" -> Phoenix.React.Runtime.Deno
+    _ -> Phoenix.React.Runtime.Bun
+  end
+
+config :phoenix_react_server, Phoenix.React, runtime: runtime
+```
 
 Add Render Server in your application Supervisor tree.
 

devenv.nix

@@ -24,6 +24,9 @@ in
   languages.javascript.bun.enable = true;
   languages.javascript.bun.package = pkgs-stable.bun;
 
+  languages.deno.enable = true;
+  languages.deno.package = pkgs-stable.deno;
+
   scripts.hello.exec = ''
     figlet -w 120 $GREET | lolcat
   '';

lib/phoenix/mix/build/deno.ex

@@ -0,0 +1,132 @@
+defmodule Mix.Tasks.Phx.React.Deno.Bundle do
+  @moduledoc """
+  Create server.js bundle for `deno` runtime,
+  bundle all components and render server in one file for otp release.
+
+  ## Usage
+
+  ```shell
+  mix phx.react.deno.bundle --component-base=assets/component --output=priv/react/server.js
+  ```
+
+  """
+  require Logger
+
+  use Mix.Task
+
+  @shortdoc "Bundle components into server.js"
+  def run(args) do
+    {opts, _argv} =
+      OptionParser.parse!(args, strict: [component_base: :string, output: :string, cd: :string])
+
+    component_base = Keyword.get(opts, :component_base)
+    base_dir = Path.absname(component_base, File.cwd!()) |> Path.expand()
+
+    components =
+      if File.dir?(base_dir) do
+        find_files(base_dir)
+      else
+        throw("component_base dir is not exists: #{base_dir}")
+      end
+
+    output = Keyword.get(opts, :output)
+    Logger.info("Bundle component in directory [#{component_base}] into #{output}")
+
+    cd = Keyword.get(opts, :cd, File.cwd!())
+
+    # Create JSX files for Deno
+    jsx_dir = Path.join(Path.dirname(output), "jsx_components")
+    File.mkdir_p!(jsx_dir)
+    # Clean up first
+    File.rm_rf!(jsx_dir)
+    File.mkdir_p!(jsx_dir)
+
+    files =
+      components
+      |> Enum.map(fn abs_path ->
+        filename = Path.relative_to(abs_path, base_dir)
+        ext = Path.extname(filename)
+        basename = Path.basename(filename, ext)
+
+        # Create JSX version for Deno
+        jsx_path = Path.join(jsx_dir, "#{basename}.jsx")
+        File.cp!(abs_path, jsx_path)
+
+        {basename, jsx_path}
+      end)
+
+    quoted = EEx.compile_file("#{__DIR__}/server_deno.js.eex")
+
+    {result, _bindings} =
+      Code.eval_quoted(quoted, files: files, base_dir: base_dir, output: output)
+
+    _outdir = Path.dirname(output)
+
+    if File.exists?(output) do
+      File.rm!(output)
+    end
+
+    # Check if this is a source file (ends with _source.js) or binary output
+    if String.ends_with?(output, "_source.js") do
+      # For development, fix import paths to be relative and write the source file
+      jsx_dir = Path.join(Path.dirname(output), "jsx_components")
+      result = String.replace(result, "\"#{jsx_dir}/", "\"./jsx_components/")
+      File.write!(output, result)
+      Logger.info("Created Deno source file: #{output}")
+    else
+      # For production, create binary
+      tmp_file = "#{cd}/server_deno.js"
+      File.write!(tmp_file, result)
+
+      # Deno 2.x removed bundle, use compile instead
+      {out, code} =
+        System.cmd("deno", ["compile", "--output", output, tmp_file], cd: cd)
+
+      Logger.info(~s[cd #{cd}; deno compile --output #{output} #{tmp_file}])
+      Logger.info("out #{code}: #{out}")
+
+      if code != 0 do
+        throw("deno compile failed(#{code})")
+      end
+
+      File.rm!(tmp_file)
+    end
+
+    # Clean up JSX files only for production builds
+    unless String.ends_with?(output, "_source.js") do
+      File.rm_rf!(jsx_dir)
+    end
+  rescue
+    error ->
+      IO.inspect(error)
+  catch
+    error ->
+      IO.inspect(error)
+  end
+
+  def find_files(dir) do
+    find_files(dir, [])
+  end
+
+  defp find_files(dir, acc) do
+    case File.ls(dir) do
+      {:ok, entries} ->
+        entries
+        |> Enum.reduce(acc, fn entry, acc ->
+          path = Path.join(dir, entry)
+
+          cond do
+            # Recurse into subdirectories
+            File.dir?(path) -> find_files(path, acc)
+            # Collect files
+            File.regular?(path) -> [path | acc]
+            true -> acc
+          end
+        end)
+
+      # Ignore errors (e.g., permission issues)
+      {:error, _} ->
+        acc
+    end
+  end
+end

lib/phoenix/mix/build/server_deno.js.eex

@@ -0,0 +1,153 @@
+import { serve } from "https://deno.land/[email protected]/http/server.ts";
+import React from "npm:react";
+import { renderToReadableStream, renderToString, renderToStaticMarkup } from "npm:react-dom/server";
+
+const __comMap = {};
+<%= for {{name, file}, idx} <- Enum.with_index(files) do %>
+import { Component as __component_<%= idx %> } from "<%= file %>";
+__comMap["<%= name %>"] = __component_<%= idx %>;
+<% end %>
+
+const { COMPONENT_BASE, DENO_ENV } = Deno.env.toObject();
+
+const isDev = DENO_ENV === 'development';
+
+const port = parseInt(Deno.env.get("PORT") || "5226");
+
+const handler = async (req) => {
+  try {
+    let bodyStream = req.body;
+    if (isDev) {
+      const bodyText = await req.text();
+      console.log('Request: ', req.method, req.url, bodyText);
+      bodyStream = new ReadableStream({
+        start(controller) {
+          controller.enqueue(new TextEncoder().encode(bodyText));
+          controller.close();
+        }
+      });
+    }
+    const { url } = req;
+    const uri = new URL(url);
+    const { pathname } = uri;
+
+    if (pathname.startsWith('/stop')) {
+      return new Response('{"message":"ok"}', {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
+
+    if (pathname.startsWith('/render_to_static_markup/')) {
+      const props = await req.json();
+      const fileName = pathname.replace(/^\/render_to_static_markup\//, '');
+      const Component = __comMap[fileName];
+      if (!Component) {
+        return new Response(`Not Found, component not found.`, {
+          status: 404,
+          headers: {
+            "Content-Type": "text/html",
+          },
+        });
+      }
+      const jsxNode = React.createElement(Component, props);
+      const html = renderToStaticMarkup(jsxNode);
+      return new Response(html, {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      });
+    }
+
+    if (pathname.startsWith('/render_to_string/')) {
+      const props = await req.json();
+      const fileName = pathname.replace(/^\/render_to_string\//, '');
+      const Component = __comMap[fileName];
+      const jsxNode = React.createElement(Component, props);
+      const html = renderToString(jsxNode);
+      return new Response(html, {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      });
+    }
+
+    if (pathname.startsWith('/render_to_readable_stream/')) {
+      const props = await req.json();
+      const fileName = pathname.replace(/^\/render_to_readable_stream\//, '');
+      const Component = __comMap[fileName];
+      const jsxNode = React.createElement(Component, props);
+      const stream = await renderToReadableStream(jsxNode);
+      return new Response(stream, {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      });
+    }
+
+    return new Response(`Not Found, not matched request.`, {
+      status: 404,
+      headers: {
+        "Content-Type": "text/html",
+      },
+    });
+  } catch(error) {
+    const html = `
+    <div role="alert" class="alert alert-error">
+      <div>
+        <div class="font-bold">${escapeHtml(error.toString())}</div>
+        <pre style="white-space: pre-wrap;">${escapeHtml(error.stack || '')}</pre>
+      </div>
+    </div>
+    `;
+    return new Response(html, {
+      status: 500,
+      headers: {
+        "Content-Type": "text/html",
+      },
+    });
+  }
+};
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+console.log(`Server started at http://localhost:${port}`);
+console.log(`COMPONENT_BASE`, COMPONENT_BASE);
+console.log(`DENO_ENV`, DENO_ENV);
+
+const ppid = Deno.pid;
+const checkParentInterval = setInterval(() => {
+  try {
+    // Try to check if parent process still exists
+    Deno.kill(ppid, "0");
+  } catch (e) {
+    console.log("Parent process exited. Shutting down server...");
+    clearInterval(checkParentInterval);
+    Deno.exit(0);
+  }
+}, 1000);
+
+const shutdown = async (signal) => {
+  console.log(`\nReceived ${signal}. Cleaning up...`);
+  clearInterval(checkParentInterval);
+  console.log("Cleanup done. Exiting.");
+  Deno.exit(0);
+};
+
+Deno.addSignalListener("SIGINT", () => {
+  shutdown("SIGINT");
+});
+
+Deno.addSignalListener("SIGTERM", () => {
+  shutdown("SIGTERM");
+});
+
+await serve(handler, { port });