Reproducible Trunk inf loop. Try it yourself

kappaisagreekletter commented 1 year ago

Hi, I wanted to make use of css-modules while porting my react site to yew + trunk. I could not get this to not go into an infinite loop. I even tried setting it so that it doesn't reload automatically in Trunk.toml as well as telling trunk to ignore the dir with the css file that is created by css-modules.

$ trunk --version
trunk 0.16.0

Anyway, let's get to the code:

$ cargo new inf-trunk-test

./html.index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" /
        <title>inf-trunk-test</title>
        <!-- rust wasm compilation options for trunk -->
        <link data-trunk rel="rust" data-wasm-opt="s" />
        <!-- css files -->
        <link data-trunk rel="css" href="css/app.css" />
    </head>
</html>

./Trunk.toml

[serve]
port = 8080

[[hooks]]
stage = "pre_build"
command = "sh"
command_arguments = [
    "-c",
    # trigger cargo build script (which generates css assets) before running Trunk build, because
    # Trunk runs asset pipelines (css and rust) in parallel. specify same target that is used by
    # Trunk so it can reuse compilation results (ie. not recompile css and rust twice)
    "cargo check --target wasm32-unknown-unknown",
]

./cargo.toml

[package]
name = "inf-trunk-test"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = "0.19"
css-modules = "0.5"

[build-dependencies]
css-modules = "0.5"

./build.rs

use css_modules::CssModules;

fn main() {
    let mut css_modules = CssModules::default();

    // Include all CSS files in the src dir:
    css_modules.add_modules("src/**/*.css").unwrap();

    // Compile all modules and export CSS into one file:
    css_modules.compile("css/app.css");
}

./src/main.rs

use css_modules::include_css_module;
use yew::prelude::*;

fn main() {
    yew::start_app::<App>();
}

#[function_component(App)]
fn app() -> html {
    let css = include_css_module!("test.css"); // relative path to your CSS

    html!(
        <div class={css["Test"]}>
            {"hi"}
        </div>
    )
}

./src/test.css

.Test {
    color: red;
}

Here is a snippet of what to expect:

$ trunk serve

thedodd commented 1 year ago

Yea, there appears to be an issue with recursively copying directories right now. We are attempting to track down what is causing this. Thanks for the report!

ctron commented 1 year ago

I think I am having the same problem.

Enigo commented 1 year ago

I have one more example. I was trying to configure dotenvy_macro = "0.15.7" to set up some env vars during compile time so that the production\test builds have correct values, but it resulted in infinity loop for the test build Trunk.toml

[[hooks]]
stage = "pre_build"
command = "sh"
command_arguments = ["-c", "echo 'BACKEND_ENDPOINT=http://backend:8081' > $TRUNK_SOURCE_DIR/.env"]

[[hooks]]
stage = "post_build"
command = "sh"
command_arguments = ["-c", "echo 'BACKEND_ENDPOINT=http://localhost:8081' > $TRUNK_SOURCE_DIR/.env"]

it works fine when I run trunk build --release but trunk serve goes into an infinity loop

ctron commented 1 year ago

I believe the fix in https://github.com/thedodd/trunk/pull/516 should work here too. I have this running for a while and don't have those issues any longer.

Unfortunately that PR doesn't seem to get any attention, so am leaning towards forking the project and releasing this on crates.io, because we do need this in our team. (and please don't see this as a complaint! we all have limited time!) But the more interest there is, the more this makes sense to me.

ctron commented 1 year ago

And there is a second way to fix this in PR https://github.com/thedodd/trunk/pull/569 … which also isn't getting merged :shrug:

trunk-rs / trunk

Reproducible Trunk inf loop. Try it yourself #461