How can I get the total number of files at build time and then pass it to web assembly in Yew?

Question

I'm currently building an image carousel. I want to count the contents of a directory that is only accessible at the OS level and pass the result to a static hashmap inside a web assembly module in Yew.

Here's a use_reducer paired with a Context in which I'd like the default state to hold the count of files.

use std::{cmp::max, collections::HashMap, fs, rc::Rc};
use yew::prelude::*;

extern crate web_sys;

// A macro to provide `println!(..)`-style syntax for `console.log` logging.
macro_rules! log {
    ( $( $t:tt )* ) => {
        web_sys::console::log_1(&format!( $( $t )* ).into());
    }
}

pub enum CarouselAction {
    Prev,
    Next,
}

#[derive(Debug, PartialEq, Eq, Clone)]
pub struct CarouselState {
    chapter_state: HashMap<i32, i32>,
    pub page: i32,
    pub chapter: i32,
}

pub type CarouselContext = UseReducerHandle<CarouselState>;

impl Default for CarouselState {
    fn default() -> Self {
        let dir = "./assets/carousel/op";
        let total_chapters = fs::read_dir(dir)
            .unwrap()
            .filter(|entry| entry.as_ref().unwrap().metadata().unwrap().is_file())
            .count();
        log!("TOTAL CHAPTERS {}", total_chapters);
        Self {
            chapter_state: HashMap::new(),
            page: 1,
            chapter: 1043,
        }
    }
}

impl Reducible for CarouselState {
    // Reducer Action Type
    type Action = CarouselAction;

    fn reduce(self: Rc<Self>, action: Self::Action) -> Rc<Self> {
        match action {
            CarouselAction::Prev => Self {
                page: max(self.page - 1, 1),
                chapter: self.chapter,
                chapter_state: self.chapter_state.to_owned(),
            }
            .into(),
            CarouselAction::Next => {
                log!("self.page {}", self.page);
                Self {
                    page: self.page + 1,
                    chapter: self.chapter,
                    chapter_state: self.chapter_state.to_owned(),
                }
                .into()
            }
        }
    }
}

#[derive(PartialEq, Debug, Properties)]
pub struct CarouselContextProps {
    #[prop_or_default]
    pub children: Children,
}

#[function_component(CarouselContextProvider)]
pub fn carousel_context_provider(props: &CarouselContextProps) -> Html {
    let state = use_reducer(CarouselState::default);
    html! {
        <ContextProvider<CarouselContext> context={state}>
            {props.children.clone()}
        </ContextProvider<CarouselContext>>
    }
}

pub fn use_carousel_context() -> impl Hook<Output = Option<UseReducerHandle<CarouselState>>> {
    use_context::<CarouselContext>()
}

The code in question is:

impl Default for CarouselState {
    fn default() -> Self {
        let dir = "./assets/carousel/op";
        let total_chapters = fs::read_dir(dir)
            .unwrap()
            .filter(|entry| entry.as_ref().unwrap().metadata().unwrap().is_file())
            .count();
        log!("TOTAL CHAPTERS {}", total_chapters);
        Self {
            chapter_state: HashMap::new(),
            page: 1,
            chapter: 1043,
        }
    }
}

I'm running the filesystem in the browser, which is not accessible, and it's returning an error (obviously). I want to run this block of code before it gets compiled to wasm and holds its result in the chapter_state hash map.

Is this possible?

I'm currently thinking of using a separate script that generates a file with the hashmap result and then including that file in yew.

Answer 1

As @cafce25 pointed out, the trick is to use a build.rs file.

Yew has no way of "injecting" a JSON file. So we programmatically created a info.rs file that contained a HashMap from our output.

Here's the content of build.rs (which lives in the root, outside src)

Here's our code:

use std::{collections::HashMap, fs};

fn main() {
    println!("cargo:rerun-if-changed=build.rs");
    let out_dir = "./src/";

    let mut chapter_state: HashMap<i16, i8> = HashMap::new();

    let dir_path = "./src/assets/manga/one_piece"; // replace with your directory path

    let manga_folders = fs::read_dir(dir_path).expect("Failed to read directory");

    for read in manga_folders {
        let entry = match read {
            Err(_) => continue,
            Ok(e) => e,
        };

        if !entry.path().is_dir() {
            continue;
        }

        if let Some(folder_name) = entry.path().file_name().and_then(|n| n.to_str()) {
            if let Ok(folder_num) = folder_name.parse::<i16>() {
                let count = fs::read_dir(entry.path())
                    .expect("Failed to read directory")
                    .count() as i8;

                chapter_state.insert(folder_num, count);
            }
        }
    }

    let mut sorted_manga_folders: Vec<(i16, i8)> = chapter_state.into_iter().collect();
    sorted_manga_folders.sort_by_key(|&(chapter, _)| -chapter);


    let mut chapter_concat: String = "[".to_owned();
    for (index, (chapter, page)) in sorted_manga_folders.iter().enumerate() {
        let comma_suffix = if index == sorted_manga_folders.len() - 1 {
            ""
        } else {
            ","
        };
        chapter_concat.push_str(&format!("({}, {}){}", chapter, page, comma_suffix));
    }

    chapter_concat.push_str("]");

    println!("cargo:warning={:?}", &chapter_concat);

    let info_rs = format!(
        "
        use std::collections::HashMap;
        pub fn get_chapters() -> HashMap<i16, i8> {{
        let chapter_state: HashMap<i16, i8> = HashMap::from({});
            chapter_state
        }}
    
    ",
        chapter_concat
    );

    let dest_path = format!("{}/info.rs", out_dir);
    fs::write(&dest_path, info_rs).unwrap();
}

What we do here (feel free to suggest a better way) is:

1. Build a HashMap akin to the JSON of shape:

{
  [chapter: number]: number;
}

2. Read the directories' content and fill in the hashmap.
3. We create a info.rs file that returns a hashmap (metaprogramming), yielding a result like this:

        use std::collections::HashMap;
        pub fn get_chapters() -> HashMap<i16, i8> {
        let chapter_state: HashMap<i16, i8> = HashMap::from([(1047, 20),(1046, 17),(1045, 20),(1044, 17),(1043, 17),(1042, 17)]);
            chapter_state
        }