fix: Handle task event and add cd to build.

lib/phoenix/mix/build/bun.ex

@@ -15,7 +15,7 @@ defmodule Mix.Tasks.Phx.React.Bun.Bundle do
   @shortdoc "Bundle components into server.js"
   def run(args) do
     {opts, _argv} =
-      OptionParser.parse!(args, strict: [component_base: :string, output: :string])
+      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()
@@ -44,14 +44,28 @@ defmodule Mix.Tasks.Phx.React.Bun.Bundle do
     tmp_file = "#{File.cwd!()}/server.js"
     File.write!(tmp_file, result)
 
+    cd = Keyword.get(opts, :cd, File.cwd!())
+
+    outdir = Path.dirname(output)
+
+    if File.exists?(output) do
+      File.rm!(output)
+    end
+
     {out, code} =
-      System.cmd("bun", ["build", "--target=bun", "--outdir=#{Path.dirname(output)}", tmp_file])
+      System.cmd("bun", ["build", "--target=bun", "--outdir=#{outdir}", tmp_file], cd: cd)
+
+    IO.puts(~s[cd #{cd}; bun build --target=bun --outdir=#{outdir} #{tmp_file}])
+    IO.puts("out #{code}: #{out}")
 
     if code != 0 do
-      IO.puts(out)
       throw("bun build failed(#{code})")
     end
 
+    if Path.join(outdir, "server.js") != output do
+      File.rename(Path.join(outdir, "server.js"), output)
+    end
+
     File.rm!(tmp_file)
   rescue
     error ->

lib/phoenix/react/runtime.ex

@@ -31,12 +31,13 @@ defmodule Phoenix.React.Runtime do
     DynamicSupervisor.start_child(__MODULE__, spec)
   end
 
-  defstruct [:component_base, :port, :server_js, render_timeout: 300_000]
+  defstruct [:component_base, :port, :server_js, :cd, render_timeout: 300_000]
 
   @type t :: %__MODULE__{
           render_timeout: integer(),
           component_base: path(),
           server_js: path(),
+          cd: path(),
           port: port()
         }
 

lib/phoenix/react/runtime/bun.ex

@@ -33,7 +33,8 @@ defmodule Phoenix.React.Runtime.Bun do
      %Runtime{
        component_base: component_base,
        render_timeout: render_timeout,
-       server_js: config()[:server_js]
+       server_js: config()[:server_js],
+       cd: config()[:cd]
      }, {:continue, :start_port}}
   end
 
@@ -119,11 +120,13 @@ defmodule Phoenix.React.Runtime.Bun do
   def start_file_watcher(component_base) do
     Logger.debug("Building server.js bundle")
 
-    Mix.Task.run("phx.react.bun.bundle", [
+    Mix.Tasks.Phx.React.Bun.Bundle.run([
       "--component-base",
       component_base,
       "--output",
-      config()[:server_js]
+      config()[:server_js],
+      "--cd",
+      config()[:cd]
     ])
 
     Logger.debug("Starting file watcher")
@@ -132,20 +135,26 @@ defmodule Phoenix.React.Runtime.Bun do
 
   @impl true
   def handle_info({:component_base_changed, path}, state) do
-    Logger.debug("component_base changed: #{path}")
-
     Task.async(fn ->
-      Mix.Task.run("phx.react.bun.bundle", [
+      Logger.debug("component_base changed: #{path}, rebuilding...")
+
+      Mix.Tasks.Phx.React.Bun.Bundle.run([
         "--component-base",
         state.component_base,
         "--output",
-        config()[:server_js]
+        state.server_js,
+        "--cd",
+        state.cd
       ])
     end)
 
     {:noreply, state}
   end
 
+  def handle_info({_ref, :ok}, state) do
+    {:noreply, state}
+  end
+
   def handle_info({_port, {:data, msg}}, state) do
     Logger.debug(msg)
     {:noreply, state}

mix.exs

@@ -2,7 +2,7 @@ defmodule Phoenix.React.Mixfile do
   use Mix.Project
 
   @source_url "https://github.com/gsmlg-dev/phoenix-react.git"
-  @version "0.5.0"
+  @version "0.5.1"
 
   def project do
     [

react_demo/assets/component/markdown.js

@@ -1,10 +1,22 @@
 import * as React from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import MDEditor from '@uiw/react-md-editor';
+
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
 import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 export const Component = (props = {}) => {
+
+  // return (
+  //   <MDEditor.Markdown 
+  //     source={props.data}
+  //     style={{ 
+  //       whiteSpace: 'pre-wrap',
+  //       padding: '1rem',
+  //     }}
+  //   />
+  // );
   return (
     <Markdown 
       className="markdown-body"

react_demo/config/dev.exs

@@ -38,5 +38,5 @@ config :phoenix_react_server, Phoenix.React,
 config :phoenix_react_server, Phoenix.React.Runtime.Bun,
   cd: Path.expand("..", __DIR__),
   cmd: System.find_executable("bun"),
-  server_js: Path.expand("../priv/react/dev/server.js", __DIR__),
+  server_js: Path.expand("../priv/react/server.js", __DIR__),
   env: :dev

react_demo/config/prod.exs

@@ -16,7 +16,6 @@ config :react_demo, ReactDemoWeb.Endpoint,
 
 
 config :phoenix_react_server, Phoenix.React.Runtime.Bun,
-  cd: Path.expand("..", __DIR__),
   cmd: System.find_executable("bun"),
   server_js: Path.expand("../priv/react/server.js", __DIR__),
   port: 5124,

react_demo/lib/react_demo_web/controllers/page_html/home.html.heex

@@ -1,7 +1,7 @@
 <div class="card">
   <div class="card-body">
     <h3 class="card-title justify-center">This markdown is rendered with <code>react-dom/server</code></h3>
-    <div class="prose m-auto min-w-max">
+    <div class="m-auto min-w-max">
       <.react_markdown
         data={@markdown_doc}
       />