Hello everybody :smiley:

UPDATE

Here is the latest API

/// The RoutingModule makes the enum variants representing modules loaded by the routes
/// By default, an enum variant snake case is equal to its module name
///
///  You can rename the path
///  You can specify routes that does not load module ( no init, no specific Model & Msg and no view )
///
///  When loading the module, a parser will get the init function , Model, Msg, Routes, Update, and View
///

#[derive(Debug, PartialEq, Clone, RoutingModules)]
// need to make a derive (Routing) or something maybe
#[modules_path = "pages"]
pub enum Routes {
    Login {
        query: IndexMap<String, String>, // -> http://localhost:8000/login?name=JohnDoe
    },
    Register,
    #[guard = " => guard => forbidden"]
    Dashboard(DashboardRoutes), // -> http://localhost:8000/dashboard/*
    // // #[default_route]
    #[guard = " => admin_guard => forbidden_user"]
    Admin {
        // -> /admin/:id/*
        id: String,
        children: AdminRoutes,
    },
    #[default_route]
    #[view = " => not_found"] // -> http://localhost:8000/not_found*
    NotFound,
    #[view = " => forbidden"] // -> http://localhost:8000/forbidden*
    Forbidden,
    #[as_path = ""]
    #[view = "theme => home"] // -> http://localhost:8000/
    Home,
}

I previously had OnInit and OnView derive but I removed them since RoutingModulesis enough. I also had #[model_scope] for fn init that I removed since it is automatically done with the RoutingModulesnow

End of Update

This PR is related to https://github.com/seed-rs/seed/issues/383

I am soo happy to show you what I have done so far but on the other hand, I am not entirely sure about your expectations regarding routing in general. This is just an example and the PR is a draft. This routing is built on the top for what we already have in Seed.

Basically my router listen to Msg::UrlRequested and then do stuff

The router can also accept closure to notify.

|r| orders.notify(subs::UrlRequested::new(r))

All your inputs are welcome to higher up this example to match your expectations & standards. As a newbie to rust I am facing few challenges:

• I have never implemented something like this from scratch (in rust at least).
• My main strength in Rust is doc and test and finding bug.
• I do not understand macro stuff for now.
• I have never been this deep into routing at least this year.
• I have some issue with enum.

I want to help and at the same time challenge myself, that is why I accepted starting something on routing also I did not look at any tutorials.

Here is the todo list on this example that might be relevant.

• [x] add UML schema that show the lifecyle of the router.
• [x] navigate through route, update url , go back & forward in history as mentioned in the issue.
• [x] having authenticated routes and guard them.
• [x] having nested routes.
• [x] having unit test.
• [x] work on the api.

PS: Here is the new todo list :+1: There are a lot of things probably wrong right now in the implementation, but it does the job for simple routing.

PS: my boilerplate in the init is ugly :hankey: , we need to fix it :stuck_out_tongue_closed_eyes:

Let's see what you think :+1: and let's make it beautiful :heart:

Update

We are working with @mankinskin together on it.

Now we have a crate for parsing enums into path : enum_paths

So we moved further into solving the nested route challenge:

• Nested routing now works
• Presenting the route needs to be done

So here is an intermediate todo that I suggest

• [x] change attribute "name" to path.

#[derive(Debug, PartialEq, Copy, Clone, AsPath)]
pub enum DashboardRoutes {
    Message,
    Statistics,
    #[path  = ""]
    Root,
}

• [x] ~~find a way to get the name~~ :

ex : the route "http://localhost:8000/dashboard/message" would be Message

let name = Routes::Dashboard(DashboardRoutes::Message).get_name();
log!(name);
//--> Message

• [x] find a way to display routes & nested routes in a menu.

├── Home
├── Login
├── Register

└── Dashboard
         ├── Root
         ├── Message
         ├── Statistics
├── NotFound

I need to chew on it tonight but I think I am having an idea on what to do tomorrow :

• [x] Implement extracting query parameter from String to enum and from enum to String + derive Macro

"dashboard/tasks/task/1?assigned=arn-the-long-beard" 

• [x] Implement nested routes inside dynamic + derive Macro if needed

"dashboard/tasks/task/1/description"

• [x] Handle default route when no routes are matched + derive Macro if needed

pub enum MyRoutes {
    Login,
    Register,
    Dashboard(DashboardRoutes),
    #[default_route]
    NotFound,
    #[as_path = ""]
    Home,
    // Admin(page::admin::Model),
}

• [x] Handle protected route + derive Macro if needed How to specify a route is guarded ? custom attributes or specific field ?

• [x] Give access on the routing for init of page/component + derive Macro if needed

Msg::UrlChanged(subs::UrlChanged(url)) => model.page = Page::init(url, orders),

We need this to control init and pass orders to sub pages/components

• [x] Implement conversion to Route struct which hold information + impl + derive Macro if needed

pub struct Route {
  pub full_path: String,
    pub url: Option<Url>,
    pub segment:String,
    pub guarded: bool,
    pub default: bool,
    pub query_parameters: HashMap<String, String>,
    pub value: Routes,

Having this live conversion could help us to manipulate routes inside sub_pages / component easier

• [x] Unify the Api for custom router Having one single Router generated by the enum maybe Having easy API this way

#[derive(Routing)]
pub enum Routes {
    Login,
    Register,
    #[protected_route="user"]
    Dashboard(DashboardRoutes),
    #[default_route]
    NotFound,
    #[as_path = ""]
    Home,
    // Admin(page::admin::Model),
}

#[derive(Routing)]
pub enum Routes {
    Login,
    #[init = "pages::register::init"]
    Register,
    #[protected_route="user"]
    Dashboard(DashboardRoutes),
    #[default_route]
    NotFound,
    #[as_path = ""],
    Profile { param_id : String }, 
    Home { query_parameters : Hashmap<String,String> },
    // Admin(page::admin::Model),
}

I've been running into an issue where I have a few views which have a somewhat similar layout.

When the view is changed, the child elements which are similar are not updated. It would seem that the diffing algorithm is not taking into account certain attributes during the diff. The exact issue is as follows:

• two different parent elements with similar layout.
• both have an input element. The placeholders are different and even their bound At::Values are different.
• when switching between the views, the input elements are not updated.

I tried using different IDs on the parent elements which are being changed, in hopes that the diffing algorithm would see this as a fundamentally different element and invalidate all of its children, but I know there are lots of nuances here.

I have the code in a public repo, let me know if you need repro steps.

Instead of reinventing the wheel, it might be helpful to use an existing crate like one of the following:

• https://crates.io/crates/virtual-dom-rs
• https://crates.io/crates/squark-macros
• https://crates.io/crates/dominator (based on stdweb)
• https://crates.io/crates/simi (different direction)
• https://github.com/bodil/typed-html What do you think?

@MartinKavik @David-OConnor I'm starting to get half a mind to move the Init from build to run or something similar to isolate all the side effects inside of run instead of distributing the stateful effects across finish and run.

I think that this is better since we do this weird dance around initial_orders right now where we don't quite have the correct state to do what we have half the state we want inside Builder and half the state inside the App.

So we would have

App::build(update, view).finish().run_with_init(|_, _| {
    // Do things with url + orders.
    // `Init::default` is a wrapper for `Init::new(Model::default())`.
    Init::default()
})

or

App::build(update, view).finish().run() // Calls `Init::default` by default.

It's a bit of a departure from what we currently have, but I think that it makes the implementation a little less weird and the usage clearer about when exactly the InitFn happens (since it seems to run half in finish and half in run right now).

Personally, I also think that mount should also be inside Init since we might want to mount it to a different place depending on the initial route, but we seem to keep that around forever, so I changed my mind. Point is, there are parts of AppCfg that are not immutable, and I would like to change that.

The downsides, I think, are also fairly obvious in that it's a breaking change, and so on. Also, the model is now provided in the run method instead of the build method, which is also... unique, so to speak.

I haven't seen if the types work out yet, but it seems reasonable to me.

Originally posted by @AlterionX in https://github.com/David-OConnor/seed/pull/235#issuecomment-542944604

Description

Components have lifecycle hooks but do not provide a means to update the state of the app. This makes it difficult to cleanup any component actions. For example, consider a component that when mouseover occurs, will fetch data every ten seconds. When I leave the page and the component unmounts, I can catch the unmount event, but I have no way to send a message that would allow me to stop fetching.

I was able to handle this before the update to 0.3 by using state.update in the view function; but state is no longer passed in as an argument. At the moment, we are slowly integrating seed into an existing app, so we are not at the point where we are using routes (I think I could hook into there if I was). I think the easiest thing (from my point of view) would be to provide a way to send messages in lifecycle callbacks, similar to how events can send messages in their callback function. Is this something that can be done?

Regards,

Will

Suggested class! changes:

• [x] Rename class! to C! to improve readability and make it consistent with A, S, E, and T.
• [x] Accepts also String and other text types.
• [x] Don't write empty class to HTML, i.e. class![] shouldn't be rendered as <div class>.

Note: We need to write if_ function.

Changes:

• Change execution of the initial call to process_cmd_and_msg_queue to after the main_el_vdom is initialized. This allows for the msg processing to not cause issues if it attempts to force a render or something else similar. Forcing a render on init used to cause Seed to panic.
• Allow Seed to take over the children of the mount. This can be useful for SSR. Built-in SSR for Seed is my goal for now. This is partially related to #232, which is also related to #223.
• Warns of possibly questionable behavior when attempting to accomplish the above maneuver as it is now (see the doc comment for takeover_mount in AppBuilder). Due to this behavior and backwards compatibility, it is currently an opt in functionality.
• Adds a bunch of utility methods to the Node enum.
• Adds a function to recursively remove all workspace web_sys::Nodes.

Parts that need additional consideration (incomplete)

• Unsure if the listeners in the bootstrap should be set up -- not familiar with what they do. But it seems to work for now.
• Unsure of any other implications of moving the initial order processing to after the initialization of the main_el_vdom.
• Not sure if any of the utility methods added to the Node enum are actually of use.
• Might want to fully address the "recreation" behavior of bootstrap_vdom before this gets merged.

Consider:

        fn window_events(model: &Model) -> Vec<seed::dom_types::Listener<Msg>> {
            vec![
                mouse_ev(Ev::Click, |_| Msg::Increment),
                mouse_ev(Ev::Click, |_| Msg::Increment),
                mouse_ev(Ev::Click, |_| Msg::Increment),
                mouse_ev(Ev::Click, |_| Msg::Increment),
                mouse_ev(Ev::Click, |_| Msg::Increment),
            ]
        }

Where Msg::Increment just increments a counter on the model that starts at 0.

When a click event occurs, I'd expect the counter to increment to 5. Instead it only increments to 1.

Interestingly, all 5 listeners can be seen on the window:

I think there may be some sort of listener detach / re-attach that occurs after the first event and somehow causes the rest to be skipped.

Hi, I would like to implement UpdateEl for missing types, such as:

impl<Ms, T> UpdateEl<El<Ms>> for Option<T>
where
    T: UpdateEl<El<Ms>> { .. }

impl<Ms, T, E> UpdateEl<El<Ms>> for Result<T, E>
where
    T: UpdateEl<El<Ms>>,
    E: UpdateEl<El<Ms>> { .. }

// this would replace Vec<Style>, Vec<&Style>, Vec<EventHandler<Ms>>, Vec<El<Ms>> ...etc
impl<Ms, T> UpdateEl<El<Ms>> for Vec<T>
where
    T: UpdateEl<El<Ms>> { .. }

Is there a way to have an immutable Model as in Elm? The examples I've found don't return anything from update and mutate the model in place, e.g., https://github.com/David-OConnor/seed/blob/master/examples/counter/src/lib.rs#L37

The type signature of update suggests this is not possible, since it takes &mut Model as a parameter, and doesn't seem to have a return value: https://github.com/David-OConnor/seed/blob/master/src/vdom.rs#L141

Hi,

I'm watching seed several month. I like it and hope it become the wide-using wasm webapp dev framework.

everything is fine, except the following:

I'd like to create a frontend component library, like [ng-bootstrap](https://ng-bootstrap.github.io/#/components/alert/examples), using seed. It's a difficult task!

Is it possible that seed provide REACT like component, which have global level MODEL and component level MODEL at the same time?

Is it possible to provide a mechanism that make component can communicate with each other?

Disclaimer: I'm new to the Seed library; please let me know if this issue is misinformed.

Seed appears to not support the beforeinput event (i.e., is absent from event_names.rs).

This issue is to request support for the beforeinput event.

This reverts commit 08c4ce15255ac8d03df5315796e7b63e624e2987.

The fields are considered as unused by rustc, however they might be stored to be dropped in the right moment.

In the future we should analyze which field we can really delete, however I think we can do without such clean-up as Seed 0.8 is not the current version of Seed.

See: https://github.com/seed-rs/seed/issues/701

Commit 08c4ce15255ac8d03df5315796e7b63e624e2987 introduced some bug:

Uncaught Error: closure invoked recursively or destroyed already
    at imports.wbg.__wbindgen_throw
    at wasm_bindgen::throw_str::ha13545fa78d0389b
    at <dyn core::ops::function::Fn<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::he801481bf9a481f4
    at __wbg_adapter_42
    at WebSocket.real

I suppose, one of the unused fields were used to prevent from dropping the closure mentioned above. Rust says the field is unused, because its only use is to run drop() in the right moment. We should mark that field with #[allow(unused)] (or some more specific lint from the "unused" group) instead of removing it.

Seed 0.8 extended Closure with new method via a trait, because this method was missing in wasm-bindgen < 0.2.81. wasm-bindgen 0.2.81 introduced Closure::new.

Thus Closure::new changed meaning from <Closure as ClosureNew>::new() to Closure::new leading to compilation errors. These errors were fixed in Seed 0.9 (probably f284711f3fc4a9deebf70c9f0ce4d8ec1daca36f). Could you backport this fix to Seed 0.8, so that apps using Seed 0.8 can be compiled correctly using the newest version of wasm-bindgen?

https://github.com/seed-rs/seed/issues/685 is blocking me from moving to Seed 0.9.

I can create pull request with backported fix if you want. Unfortunatelly I cannot publish it to crates.io.

Before the release

• [x] 1. Create a new issue
• [x] 2. Update all official examples.
• [x] 3. Review the commit and PR history since last release. Ensure that all relevant changes are included in CHANGELOG.md, and that breaking changes are specifically annotated.
• [x] 4. Ensure the README.md reflects API changes.
• [x] 5. Update the CHANGELOG.md with the new release version.
• [x] 6. Ensure the version listed in Cargo.toml is updated.
• [x] 7. Update Rust tools: rustup update.
• [x] 8. Run cargo make populate_all to synchronize St, At and other enums with official values.
• [x] 9. Run cargo make verify to ensure tests pass, and clippy / fmt are run.
• [x] 10. Commit and push the repo.
• [x] 11. Check that CI pipeline passed.
• [x] 12. Run cargo package.
• [x] 13. Run cargo publish.
• [x] 14. Add a release on Github, following the format of previous releases.
• [ ] 15. Verify the docs page updated correctly.

After the release

• [ ] 16. Update all quickstarts.
• [ ] 17. Write documentation for the current release on the website.
• [ ] 18. Make sure the website's version selector shows the released version by default.
• [ ] 19. Notify authors of community tutorials, quickstarts and examples about a new Seed version.
• [ ] 20. Write announcements (chat, forum, etc.).

Versions

I can reproduce this bug in Seed 0.9 I cannot reproduce this bug in Seed 0.8

In short:

1. In view we return something like div![el_ref(&some_elref), div!["Some text"]]
2. After running view, inside update some_elref.get().is_none() is true.

This means that DOM node is not attached to ElRef under some conditions.

Example: https://github.com/wkordalski/seed-elref-bug

Run it with:

yarn
yarn run webpack serve

Open localhost:8888 Open Developer tools (esp. console). Click "Add measurements" few times (not every time this bug is visible)

Exploading assertion should be visible in the console.

...under some conditions

It seems that this bug is related to running async code or websockets.