Loading script from public folder not working #863

dominikwilkowski · 2024-09-01T22:49:17Z

dominikwilkowski
Sep 1, 2024

Hi folks.
I'm new to Trunk and am using it with leptos.

The setup

I used this template to get started: cargo generate --git https://github.com/leptos-community/start-csr
My main.rs file looks like this:

use leptos::logging::log;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();

    mount_to_body(|| {
        view! {
            <App />
        }
    })
}

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Html lang="en" dir="ltr" attr:data-theme="light"/>
        <Title text="Welcome to Leptos CSR"/>
        <Meta charset="UTF-8"/>
        <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <Router>
            <Routes>
                <Route path="/" view=Page/>
            </Routes>
        </Router>
    }
}

#[component]
pub fn Page() -> impl IntoView {
    view! {
          <script data-trunk src="qr-scanner.umd.min.js" rel="copy-file"></script>
    }
}

My files look like this:

.
├── Cargo.lock
├── Cargo.toml
├── README.md
├── Trunk.toml
├── dist
│   ├── csr-b8cf5b1ae7a29d15.js
│   ├── csr-b8cf5b1ae7a29d15_bg.wasm
│   ├── favicon-e9cbd8f50cc65bf2.ico
│   ├── index.html
│   └── styles-b3c1c68ee90b19f9.css
├── index.html
├── public
│   ├── favicon.ico
│   ├── qr-scanner-worker.min.js
│   ├── qr-scanner.umd.min.js
│   └── styles.css
├── rust-toolchain.toml
└── src
    └── main.rs

My Trunk.toml is empty right now but I tried a bunch of different things there including:

[[hooks]]
stage = "build"
command = "cp"
command_arguments = ["-r", "public", "dist"]

My Cargo.toml:

[package]
name = "csr"
version = "0.1.0"
edition = "2021"
authors = ["Dominik Wilkowski <Hi@Dominik-Wilkowski.com>"]

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

[dependencies]
leptos = { version = "0.6", features = ["csr", "nightly"] }
leptos_meta = { version = "0.6", features = ["csr", "nightly"] }
leptos_router = { version = "0.6", features = ["csr", "nightly"] }
console_log = "1"
log = "0.4"
console_error_panic_hook = "0.1"
leptos-qr-scanner = { path = "../.." }

# utils
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
# strum_macros = "0.25"


[dev-dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-test = "0.3"
web-sys = { version = "0.3", features = ["Document", "Window"] }


[profile.release]
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"

I'm using trunk serve --port 3000 --open to serve the site and check that the dist folder includes the file.

The issue

The script I'm trying to include just wont copy into the dist folder.

I tried:

<script src="qr-scanner.umd.min.js" data-no-minify data-trunk rel="inline"></script>
<script src="/qr-scanner.umd.min.js" data-no-minify data-trunk rel="inline"></script>
<script src="public/qr-scanner.umd.min.js" data-no-minify data-trunk rel="inline"></script>
<script src="/public/qr-scanner.umd.min.js" data-no-minify data-trunk rel="inline"></script>

I also tried:

<script src="qr-scanner.umd.min.js" data-trunk rel="inline"></script>
<script src="/qr-scanner.umd.min.js" data-trunk rel="inline"></script>
<script src="public/qr-scanner.umd.min.js" data-trunk rel="inline"></script>
<script src="/public/qr-scanner.umd.min.js" data-trunk rel="inline"></script>

and

<script src="qr-scanner.umd.min.js" data-trunk rel="copy-file"></script>
<script src="/qr-scanner.umd.min.js" data-trunk rel="copy-file"></script>
<script src="public/qr-scanner.umd.min.js" data-trunk rel="copy-file"></script>
<script src="/public/qr-scanner.umd.min.js" data-trunk rel="copy-file"></script>

and

<script src="qr-scanner.umd.min.js" data-trunk rel="copy-dir"></script>
<script src="/qr-scanner.umd.min.js" data-trunk rel="copy-dir"></script>
<script src="public/qr-scanner.umd.min.js" data-trunk rel="copy-dir"></script>
<script src="/public/qr-scanner.umd.min.js" data-trunk rel="copy-dir"></script>

even:

<script src="qr-scanner.umd.min.js" data-trunk data-target-path="/" rel="copy-file"></script>
<script src="/qr-scanner.umd.min.js" data-trunk data-target-path="/" rel="copy-file"></script>
<script src="public/qr-scanner.umd.min.js" data-trunk data-target-path="/" rel="copy-file"></script>
<script src="/public/qr-scanner.umd.min.js" data-trunk data-target-path="/" rel="copy-file"></script>

<script src="qr-scanner.umd.min.js" data-trunk data-target-path="qr-scanner.umd.min.js" rel="copy-file"></script>
<script src="/qr-scanner.umd.min.js" data-trunk data-target-path="/qr-scanner.umd.min.js" rel="copy-file"></script>
<script src="public/qr-scanner.umd.min.js" data-trunk data-target-path="public/qr-scanner.umd.min.js" rel="copy-file"></script>
<script src="/public/qr-scanner.umd.min.js" data-trunk data-target-path="/public/qr-scanner.umd.min.js" rel="copy-file"></script>
<script src="qr-scanner.umd.min.js" type="text/javascript"></script>

I would be happy for it to inline... anything at this point really.
I feel like I'm getting something fundamentally wrong here.

Answered by ctron

Sep 2, 2024

You need to add the script to the index.html, otherwise it won't be processed by trunk.

Alternatively, you can aim for an approach with wasm-bindgen, binding the JS API to Rust. That will lead to wasm-bindgen doing the processing, and trunk picking that up.

View full answer

ctron · 2024-09-02T06:48:34Z

ctron
Sep 2, 2024
Maintainer

I am trying to reproduce this (with 0.21.0.rc-3) and report what I find:

I noticed the asset type is stylesheet, which trunk doesn't support and reports as an error. The correct type would be css in this case. Also see: https://trunkrs.dev/guide/assets/index.html#css … I guess stylesheet would be more intuitive, but that hasn't changed. Room for improvement though I guess. It's actually funny that leptos creates the link to the correct docs, but creates the wrong HTML.

I was also able to create a file public/test.js, adding the following to the generated HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="/public/test.js" data-no-minify data-trunk rel="inline"></script> <!-- HERE -->
  </head>
  <body></body>
</html>

And running trunk build, it shows up in the dist folder:

➜  test git:(main) ls -1 dist/
favicon-e9cbd8f50cc65bf2.ico
index.html
styles-60c4419707258f5e.css
test-4b1c165d8b7f3bb0.js  # HERE
test-e708768a4b35a01e_bg.wasm
test-e708768a4b35a01e.js

Maybe you can add -vv to check the logs.

7 replies

dominikwilkowski Sep 2, 2024
Author

Specifically I'm trying to add the script inside the view macro of leptos. If I add the script to the html file it all works. I assume that's what's not working?

ctron Sep 2, 2024
Maintainer

You need to add the script to the index.html, otherwise it won't be processed by trunk.

Alternatively, you can aim for an approach with wasm-bindgen, binding the JS API to Rust. That will lead to wasm-bindgen doing the processing, and trunk picking that up.

Answer selected by dominikwilkowski

ctron Sep 2, 2024
Maintainer

Or you can use copy-file/copy-dir. But in that case, you need to use link, as described by the docs.

dominikwilkowski Sep 2, 2024
Author

I ended up doing this:

#[wasm_bindgen(module = "/public/qr-scanner-wrapper.min.js")]
extern "C" {
    #[derive(Clone, Debug)]
    type QrScanner;

    #[wasm_bindgen(constructor, js_name = new)]
    fn qr_new(
        video_elem: &web_sys::HtmlVideoElement,
        callback: &js_sys::Function,
        options: &JsValue,
    ) -> QrScanner;

    #[wasm_bindgen(method, js_name = start)]
    fn qr_start(this: &QrScanner);
    #[wasm_bindgen(method, js_name = stop)]
    fn qr_stop(this: &QrScanner);
    #[wasm_bindgen(method, js_name = destroy)]
    fn qr_destroy(this: &QrScanner);
}

I did try copy-file/copy-dir but couldn't get it to work inside the macro even with link.

dominikwilkowski Sep 2, 2024
Author

Thank you for confirming though. It took me a while before it clicked for me that the macro is leptos and may not know about trunk which is why it wasn't working. I would have lost hair if I hadn't lost it already years ago :)

ctron Sep 2, 2024
Maintainer

I think having the wrapped by wasm-bindgen is the best approach. I would be cool if you'd open source that too, so that others can re-use. Just an idea 😉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Loading script from public folder not working #863

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Loading script from public folder not working #863

dominikwilkowski Sep 1, 2024

The setup

The issue

Replies: 1 comment · 7 replies

ctron Sep 2, 2024 Maintainer

dominikwilkowski Sep 2, 2024 Author

ctron Sep 2, 2024 Maintainer

ctron Sep 2, 2024 Maintainer

dominikwilkowski Sep 2, 2024 Author

dominikwilkowski Sep 2, 2024 Author

ctron Sep 2, 2024 Maintainer

dominikwilkowski
Sep 1, 2024

Replies: 1 comment 7 replies

ctron
Sep 2, 2024
Maintainer

dominikwilkowski Sep 2, 2024
Author

ctron Sep 2, 2024
Maintainer

ctron Sep 2, 2024
Maintainer

dominikwilkowski Sep 2, 2024
Author

dominikwilkowski Sep 2, 2024
Author

ctron Sep 2, 2024
Maintainer