• At this stage, the HTML page is still at the state of "dehydrated", without any of the reactivity or event listeners added (In other words, it's waiting to be "hydrated")

Reactivity

• create_signal is similar to useState in React, and almost equivalent to createSignal in SolidJS
• create_effect is almost equivalent to useEffect in React, but there's a difference;
  • It doesn't take that dependency array
    • Leptos automatically tracks deps knowing which signals are accessed within the effect so you don't have to explictly add it
      • For example, if use_last is true, the effect will rerun whenever first, last, or use_lastchanges in this case
      • but if not, only will first be the tracking target

      let (first, set_first) = create_signal(String::new());
      let (last, set_last) = create_signal(String::new());
      let (use_last, set_use_last) = create_signal(true);
      
      create_effect(move |_| {
          log(
              if use_last.get() {
                  format!("{} {}", first.get(), last.get())
              } else {
                  first.get()
              },
          )
      });
      

Async

• create_resource allows you to integrate async into the sync reactive system
  • The word "resource" points to reactive data structure in this context
  • It lets the Future into a signal that returns Some(T) if it's resolved, and None if it's still pending, rather than waiting for its data to be loaded with .async
  • Just like useSWR or useSWRInfinite in swr, a React hooks library, it takes a source signal as its first arg, and a fetcher as its second one

  let (count, set_count) = create_signal(0);
  
  let async_data = create_resource(
      count, // a source signal
      |value| async move {
          logging::log!("loading data from API");
          load_data(value).await
      }, // a fetcher (every time `count` changes, this will run)
  );
  

  • To create a resource that runs only once, you can pass a non-reactive, empty source signal:

  let once = create_resource(|| (), |_| async move { load_data().await });
  

• Compared to create_resource, create_action is more suitable for a situation where an async function needs to run in response to a user's action such as clicking a button
  • e.g., create_action for add_todo, create_resource for list_todos
• Unlike create_resource, create_local_resource handles local resources that don't load on the server but in the browser
  • Since the Future that a fetcher will generate runs only on the local system, its data type doesn't need to be serializable
• Both <Suspense> and <Transition> take resource elements as their children, observing the status of them loading
  • If resources are still loading, the fallback component is displayed instead
• The difference between <Suspense> and <Transition> is the former one causes flickering every time the data reloaded whereas the latter one only shows the fallback the first time
• <Async> is the no fallback version of <Suspense> that helps omit a bit of boilerplates

sea-orm-cli

• When you want to start database configurations from scratch, execute this command:

sea-orm-cli migrate init

• It generates a start-up Rust lib dir migration at the working dir, and you can set up migration code there

• Refer to SeaORM/docs/next/migration/setting-up-migration/

• After you've done setting it up, execute this command:

sea-orm-cli generate entity -u postgres://postgres:postgres@localhost:5432/postgres -o entity/src

• It generates entity files based on your migration settings

TailwindCSS standalone CLI

• Reflect the styles in style/input.css on style/output.css by executing this command:

tailwindcss -i style/input.css -o style/output.css --watch

• In the --watch mode, changes will be reflected soon after you've made in style/input.css

Reference

• Leptos Guide
• Leptos-Use Guide
• SeaORM/docs/next/migration/setting-up-migration/
• vault81/todo-vault
• Module sqlx_postgres::types
• JSON Placeholder
• Material Tailwind Tabs
• How to generate a vec of enum options in Rust [duplicate]