Can I use component/package from npm ?

[meepeek]

Description

I'm submitting a ... question

Writing everything from zero is quite a task. I wish I could use the component available while reimplement some in yew. Also, mobx like state management is necessary for me.

[hgzimmerman]

Your mention of external state management makes me think that you want to integrate Yew components as part of an existing React (or equivalent) project.

In that case, I would point you towards https://docs.rs/yew/0.10.0/yew/app/struct.App.html#method.mount_with_props which would attach a Yew component with a given set of properties to an element. You would have to write a shim exposing this function to JS using wasm_bindgen, or possibly using stdweb instead though.

If you want to use React (or equivalent) components from within a Yew application, I don't think there is a precedent for that, although it may be possible. I would start looking at the js macro in stdweb for writing a Rust->JS shim to instantiate a React component from within Yew, likely using Yew's ref feature as well.

I think trying to use mobx/redux from within Yew itself (as opposed to the JS component wrapping it) would be messy, given that Yew has its own state management system built into it.

Edit: There is precedent for using external JS libs as seen in this example.

[meepeek]

Thanks for the reply. based on that, there's something more I would like to ask:

1. I'm still not understand the example given. I think it starts in src/main by default, but there's no imports, how the pieces connected ? Is it looking in the file 'lib' by default like conventional file naming in ruby on rails ? Where's to put npm library ? How will it call objects from nodejs exports ?
2. Is there yew way for central state management ? This is an opinion, in my experience with react, inner component state like hook is quite limited in complex app for both code maintaining and rerendering control. Central state management like mobx making it easy to move logic around and keep component simple.
3. Is there anything similar to styled-components in yew ? It helps a lot with handling dynamic css class.

[hgzimmerman]

1. npm_and_rest is the name of the library and you don't need to explicitly import items in Rust (2018 edition) if you can refer to them by their absolute path. Hence npm_and_rest::Model acts effectively as both the import and use of that item; likewise with yew::start_app. The naming of this lies a little when it comes to where the JS code is gotten from. You can see in the index.html in static that it pulls in the lib from some CDN or another instead of a local node_modules directory. Look into building your app with webpack or parcel instead of cargo-web if you want to leverage npm packages, as you will have the tooling required to serve a bundle of them adjacent to the wasm file that represents your app.

2. There exists this thread talking about state management. What you want seems to be managing state separate from components in such a way that any component can grab the part of state that it wants. This is technically possible using Agents - but I don't recommend this strategy any more, because sending messages to Agents requires serializing and deserializing your message, which gets expensive pretty fast when you are passing large messages around. The recommended way currently is to pass state through props in a hierarchical manner, using Rc pointers to make sure that you aren't cloning huge amounts of data (because props need to have full ownership of their values and will implicitly clone to get that) when performance becomes a concern. I think that there might be some demand for a Redux-alike structure that functions similarly to Agents, but doesn't ser/de messages, and doesn't support running on web-workers.

3. I have a comment here that details the state of css-framework-wrapper libraries. Its not great at the moment.

[jstarry]

Seems like all questions have been addressed