Interop with pure-JS React components about scalajs-react HOT 16 CLOSED

Exposing a constructor is directly is useful for components such as https://github.com/rpflorence/react-nested-router where it's expecting the handler prop to be a pure react component constructor. Temporarily I've made this change to expose the u object directly. https://github.com/ddispaltro/scalajs-react/commit/95df2aa0afde1a510d047fd4634ec7b8edf09ec6

from scalajs-react.

I played around this extensively yesterday and got the interop I was looking for with the children and transferring properties. I spoke with the facebook dev team and they are deprecating various API in order to get more inline with japgolly's approach for each function and removing the reliance on "this."

I was able to achieve the interop but I created a new library using abstract data types and cake layers. Its not the japgolly library. However, the idea that was used could be reused. It involved recognizing that at least in 0.11, the constructor returns a descriptor, and I had to trampoline off the descriptor in order to get the this.props rebuild in the scala world to work. Based on facebook's comments, the ease of interop may increase in future versions. I could not wait for my needs, but I'm glad that people's thoughts are converging.

transferPropsTo is being deprecated but some jsx (think macros) are being put into play:
https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7

Having said this, it looks like a better answer is to merely change the constructor API to allow a generic, say Map[String, scala.Any] or js.Dynamic, type to be passed in from the parent and have the children handle the "ingest" directly using an explicit method. I'll test this, but its easy and should always work. It should help us get rid of all of this mess. At least this forces the serial/deserial out into the open where it belongs. I don't think this will apply to the this.context though...still under review.

from scalajs-react.

Glad to hear that you got your own use case working and thanks for sharing. We'll keep an eye on this. Looks like the React guys are still working things out.

from scalajs-react.

Note:

• ComponentConstructor_ = JS react component constructor, sometimes called component class in react doco.
• ReactComponentU_ = JS react component instance (UNMOUNTED)
• ReactComponentM = JS or Scala react component instance (MOUNTED)

from scalajs-react.

how can i pass local react component to third party components ?

 case class Location(path: js.UndefOr[String] = js.undefined, handler: js.UndefOr[js.Any] = js.undefined) {
    def toJs: js.Object = {
      val p = js.Dynamic.literal()
      handler.foreach(v => p.updateDynamic("handler")(v))
      path.foreach(v => p.updateDynamic("path")(v))
      p
    }

    def apply(children: Modifier*): ReactComponentU_ = {
      val f = ReactRouter.Location
      f(toJs, js.Array(children: _*)).asInstanceOf[ReactComponentU_]
    }
  }

i want to pass my component as a handler

  val dude = ReactComponentB[Unit]("dude")
  .render(P => {
    div("hey")
  }).buildU

Location("/dude",dude())

Uncaught Error: Route handler should be a component or a function but got: %s

from scalajs-react.

I haven't tried this but you should be able to pass a Scala component to a JS one via the type ReactElement. So in your example above I would change

(path: js.UndefOr[String] = js.undefined, handler: js.UndefOr[js.Any] = js.undefined)

to

(path: String, handler: ReactElement)

(I dropped the UndefOr wrappers because I imagine both args would be mandatory in this case?)

Note: Even when you get JS components using your Scala components, they won't be able to interact with props or state. To rephase, if the JS component expects to be able to feed your Scala component it's not going to happen without hacks.

from scalajs-react.

Is it mostly the router that everyone wants to use from JS? I wrote a router in Scala.JS that IMO is much much better than everything else out there. Maybe I should prioritise moving that into scalajs-react...

from scalajs-react.

Router is definitely something that everyone needs. So one that works well with scalajs-react will help a lot (either as a part of the scalajs-react project or as an associate project).

from scalajs-react.

wow you already wrote router in scala.js ? , cool then i don't waste more time on that . i have one more question what are the equivalent types in scala.js-react world for the following types

React.PropTypes.node,
React.PropTypes.oneOf(['News', 'Photos'])
React.PropTypes.func

from scalajs-react.

Ok, I'll move the Router into this lib sooner rather than later.

@chandu0101 I didn't port any of that PropTypes stuff because I believe it concerns JS prop type safety, where as using Scala, we get all that type safety for free just by successful compilation.

from scalajs-react.

btw router issue = #29

from scalajs-react.

looks like i am not clear in the question , my concern is how can i pass ReactElement (/node) to third part components ? when i pass html tags(scala tags) it rendered as plain string !

@router
thank you mate ,waiting for it ..

from scalajs-react.

Oh? I thought I answered that 7 comments above this one. Casting a Scalatag to a ReactElement should do the trick. Oh! But then you might need to call .toJsCtor, I'm not sure, I don't use any plain JS React components.

from scalajs-react.

i tried ReactElement trick, didn't worked :( , sorry i forgot to mention in my previous posts . I'll stick to porting required components instead of all these interop hacks.

Thank You
Chandra

from scalajs-react.

From the title we have "Support JS React mixins" is already done.

Are @chandu0101's PRs (5a76e38 & #137) enough to close this?

from scalajs-react.

I believe this is now closed. There've been many additions made to facilitate this, the latest of which (#157 #158) finish it off completely.

from scalajs-react.