# The Development Loop

The pad has a layout but the preview does not work yet. In this chapter we
bring it to life with two complementary techniques: **hot reload** for
editing the pad's own source code, and **runtime compilation** for compiling
widget code typed into the pad's editor.

Along the way we will learn how to inspect a running app from `iex`, a
useful debugging skill.

## Hot reload

In chapter 2 you used `--watch` to enable hot reload on a per-run basis.
Let us make it the default for development. Create a `config/` directory
with the following files:

```elixir
# config/config.exs
import Config

import_config "#{config_env()}.exs"
```

```elixir
# config/dev.exs
import Config

config :plushie, code_reloader: true
```

You also need stub files for the other environments so the import does
not fail. Create `config/test.exs` and `config/prod.exs` each containing
just `import Config`.

With this in place, `mix plushie.gui` enables hot reload automatically
in dev without the `--watch` flag. Plushie watches your `lib/` directory.
Edit any `.ex` file, save it, and the running app recompiles in place --
your model state is preserved.

This is how you develop the pad itself. Change the view, save, see the
result. You have been using this already if you tried the "Try it" exercises
in previous chapters.

Hot reload works because the runtime re-calls `view/1` with the current
model after recompilation. The new view function produces a new tree, the
runtime diffs it against the old one, and only the changes are sent to the
renderer.

## Making the preview work

The pad's editor holds Plushie widget code. We want to compile that code
and render the result in the preview pane. This requires three steps:

1. **Parse** - check that the code is valid Elixir syntax
2. **Compile** - compile it into a module with macro expansion
3. **Render** - call the module's `view/0` function and embed the result

Here is the helper that does all three:

```elixir
defp compile_preview(source) do
  case Code.string_to_quoted(source) do
    {:error, {meta, message, token}} ->
      line = Keyword.get(meta, :line, "?")
      {:error, "Line #{line}: #{message}#{token}"}

    {:ok, _ast} ->
      try do
        Code.put_compiler_option(:ignore_module_conflict, true)
        [{module, _}] = Code.compile_string(source)

        if function_exported?(module, :view, 0) do
          {:ok, module.view()}
        else
          {:error, "Module must export a view/0 function"}
        end
      rescue
        e -> {:error, Exception.message(e)}
      after
        Code.put_compiler_option(:ignore_module_conflict, false)
      end
  end
end
```

`Code.string_to_quoted/1` parses the source without evaluating it. If the
syntax is invalid, we get an error with a line number.

`Code.compile_string/1` compiles the source into a module. This runs the
full Elixir compilation pipeline including macro expansion, so
`import Plushie.UI` and the DSL macros work exactly as they would in a
normal `.ex` file. We set `ignore_module_conflict` to suppress the warning
that appears when saving the same experiment twice (redefining the module).

The compiled module's `view/0` function returns a widget tree. Because
widget structs compose naturally, we can place this tree directly in the
pad's view.

Errors at any stage are caught and displayed as text in the preview pane.
The pad never crashes from bad experiment code.

## Wiring up the save button

Update `init/1` to compile a starter experiment on startup, and add a save
handler to `update/2`:

```elixir
@starter_code """
defmodule Pad.Experiments.Hello do
  import Plushie.UI

  def view do
    column padding: 16, spacing: 8 do
      text("greeting", "Hello, Plushie!", size: 24)
      button("btn", "Click Me")
    end
  end
end
"""

def init(_opts) do
  model = %{
    source: @starter_code,
    preview: nil,
    error: nil
  }

  case compile_preview(model.source) do
    {:ok, tree} -> %{model | preview: tree}
    {:error, msg} -> %{model | error: msg}
  end
end

def update(model, %WidgetEvent{type: :click, id: "save"}) do
  case compile_preview(model.source) do
    {:ok, tree} -> %{model | preview: tree, error: nil}
    {:error, msg} -> %{model | error: msg, preview: nil}
  end
end
```

Now when you type experiment code in the editor and click Save, the
preview updates with the rendered widgets. Syntax errors, compile errors, and
runtime errors all show as red text in the preview pane.

## The experiment format

Experiments are modules with a `view/0` function:

```elixir
defmodule Pad.Experiments.Hello do
  import Plushie.UI

  def view do
    column padding: 16, spacing: 8 do
      text("greeting", "Hello, Plushie!", size: 24)
      button("btn", "Click Me")
    end
  end
end
```

This is the same DSL code you write in an app's `view/1`. Experiments
just don't have a model, so the function takes no arguments.

## Inspecting a running app from iex

Sometimes you want to look at the model or tree of a running app. Start an
`iex` session and launch the app directly:

```bash
iex -S mix
```

```elixir
iex> {:ok, pid} = Plushie.start_link(PlushiePad, binary: Plushie.Binary.path!())
```

Now the app is running and you have the iex prompt. Query the runtime:

```elixir
iex> Plushie.Runtime.get_model(Plushie.Runtime)
%{source: "...", preview: ..., error: nil}

iex> Plushie.Runtime.get_tree(Plushie.Runtime)
%{id: "main", type: "window", children: [...]}
```

`get_model/1` returns the current model. `get_tree/1` returns the normalized
UI tree. These are the same values your `view/1` and `update/2` work with --
seeing them directly helps when debugging layout issues or unexpected state.

The default runtime name is `Plushie.Runtime`. If you started Plushie with
a custom `name:` option, the runtime name follows the convention
`{name}.Runtime`.

## The complete pad

Here is the full module with compilation wired up:

```elixir
defmodule PlushiePad do
  use Plushie.App

  import Plushie.UI

  alias Plushie.Event.WidgetEvent

  @starter_code """
  defmodule Pad.Experiments.Hello do
    import Plushie.UI

    def view do
      column padding: 16, spacing: 8 do
        text("greeting", "Hello, Plushie!", size: 24)
        button("btn", "Click Me")
      end
    end
  end
  """

  def init(_opts) do
    model = %{
      source: @starter_code,
      preview: nil,
      error: nil
    }

    case compile_preview(model.source) do
      {:ok, tree} -> %{model | preview: tree}
      {:error, msg} -> %{model | error: msg}
    end
  end

  def update(model, %WidgetEvent{type: :input, id: "editor", value: source}) do
    %{model | source: source}
  end

  def update(model, %WidgetEvent{type: :click, id: "save"}) do
    case compile_preview(model.source) do
      {:ok, tree} -> %{model | preview: tree, error: nil}
      {:error, msg} -> %{model | error: msg, preview: nil}
    end
  end

  def update(model, _event), do: model

  def view(model) do
    window "main", title: "Plushie Pad" do
      column width: :fill, height: :fill do
        row width: :fill, height: :fill do
          text_editor "editor", model.source do
            width {:fill_portion, 1}
            height :fill
            highlight_syntax "ex"
            font :monospace
          end

          container "preview", width: {:fill_portion, 1}, height: :fill, padding: 16 do
            if model.error do
              text("error", model.error, color: :red)
            else
              if model.preview do
                model.preview
              else
                text("placeholder", "Press Save to compile and preview")
              end
            end
          end
        end

        row padding: 8 do
          button("save", "Save")
        end
      end
    end
  end

  defp compile_preview(source) do
    case Code.string_to_quoted(source) do
      {:error, {meta, message, token}} ->
        line = Keyword.get(meta, :line, "?")
        {:error, "Line #{line}: #{message}#{token}"}

      {:ok, _ast} ->
        try do
          Code.put_compiler_option(:ignore_module_conflict, true)
          [{module, _}] = Code.compile_string(source)

          if function_exported?(module, :view, 0) do
            {:ok, module.view()}
          else
            {:error, "Module must export a view/0 function"}
          end
        rescue
          e -> {:error, Exception.message(e)}
        after
          Code.put_compiler_option(:ignore_module_conflict, false)
        end
    end
  end
end
```

Run it:

```bash
mix plushie.gui PlushiePad
```

The starter experiment compiles on init, so you should see "Hello, Plushie!"
and a "Click Me" button in the preview pane immediately. Edit the code in
the editor, click Save, and the preview updates.

## Verify it

Update the test to verify compilation works:

```elixir
test "starter code compiles and renders on init" do
  assert_text("#preview/greeting", "Hello, Plushie!")
  assert_exists("#preview/btn")
end
```

The preview widgets have scoped IDs (`preview/greeting`, `preview/btn`)
because they are inside `container "preview"`. This is how scoped IDs
work. We will use them more in chapter 6.

## Try it

- Change the starter experiment: add a `checkbox`, a `slider`, or a
  `text_input` to the column. Save and see them render.
- Deliberately break the syntax: delete a closing `end`. Save and see
  the error message in the preview. Fix it and save again.
- Try writing a completely different experiment: a row of coloured buttons,
  or a progress bar with a label.
- Start iex (`iex -S mix`), launch the pad with
  `Plushie.start_link(PlushiePad, binary: Plushie.Binary.path!())`,
  and inspect the model with `Plushie.Runtime.get_model(Plushie.Runtime)`.

In the next chapter, we will add an event log to the pad so you can see
exactly what events widgets produce when you interact with them.

---

Next: [Events](05-events.md)
