Skip to content

Asset Reload

zolo dev also watches data files when the --watch <dir> flag is passed (recursive). Recognized formats include .json, .toml, .yaml, .csv, .wgsl, .glsl, .frag, .vert, and .hlsl. For each changed file, after a 150 ms debounce, the runtime calls pub fn __on_asset_reload(path: str, ext: str). Without that definition the event is silently discarded.

To run this demo you must pass the flag explicitly:

cd examples/features/21-hot-reload/05-asset-reload
zolo dev main.zolo --watch assets

The app.zolo module keeps the config in memory and exposes show() and the asset hook. When it detects the "json" extension, the hook re-reads the file with fs::read_to_string and replaces the live config:

Edit assets/config.json (e.g. change "speed") and watch the hook fire.

app.zolo
// Feature: HMR of assets — reload config without restarting

// Syntax: global hook `pub fn __on_asset_reload(path: str, ext: str)`

// When to use: games (shaders, sprites), apps with hot config,

// pipelines where data changes more often than the code.

//

// The watcher recognizes: .json .toml .yaml .yml .csv

//                         .wgsl .glsl .frag .vert .hlsl

// For each such file under `--watch <dir>` (recursive) or the

// implicit directories of the entry/modules, the hook is called.


use std::package
use std::json

let config: any = #{name: "default", speed: 1, color: "gray"}

pub fn show() {
  let live = package.loaded["app"]
  print("current config: name={live.config.name}, speed={live.config.speed}, color={live.config.color}")
}

pub fn __on_asset_reload(path: str, ext: str) {
  let live = package.loaded["app"]
  print(">>> asset changed: {path} ({ext})")
  if ext == "json" {
    let raw = fs::read_to_string(path)
    if raw != nil {
      live.config = json.parse(raw)
      print(">>> config reloaded")
    }
  }
}

Requires the Zolo CLI/host — open in the playground or run locally.

The entry point loads the initial JSON and hands control to the interactive loop:

main.zolo
// Feature: hot-reload of data

// Syntax: run with `zolo dev main.zolo --watch assets`.

// When to use: edit config.json and see the app react without restart.


use std::package
use std::json

use app::{show, __on_asset_reload}
fn main() {
  // Initial load.

  let raw = fs::read_to_string("assets/config.json")
  if raw != nil {
    let live = package.loaded["app"]
    live.config = json.parse(raw)
  }
  show()
  print("ENTER reprints. Edit assets/config.json and save.")
  print("Run with: zolo dev main.zolo --watch assets")
  while true {
    let line = io::read("*l")
    if line is nil || line == "q" {
      break
    }
    show()
  }
}

Requires the Zolo CLI/host — open in the playground or run locally.

Challenge

Add a field "theme": "dark" to assets/config.json and print it in show(). Save the JSON — the hook should reload it without any changes to the Zolo code.

enespt-br