See examples on how ES6 classes work with React. Those examples should apply to @JsTypes as well.
On Sun, Mar 13, 2016 at 2:12 PM, Colin Alworth <niloc...@gmail.com> wrote: > Yikes, that's rather opinionated. I don't personally work with React, but > I guess I'm surprised that it can't handle actual inheritance (or even > defining a prototype and attaching it to a constructor). > > Based on what you have there and the details described at > https://facebook.github.io/react/docs/top-level-api.html, I'd suspect > that they actually want the equivalent of the class object itself, not an > instance of it (the line between them is blury in JS already). > > > One thing that makes components different than standard prototypal > classes is that you don't need to call new on them. They are convenience > wrappers that construct backing instances (via new) for you. > > This seems to imply that you can't be guaranteed that your constructors > will actually be called, but also reinforces the idea that they don't want > you to pass in a class instance, just the methods that should be called on > the eventually-created instances. More details from > https://facebook.github.io/react/docs/component-specs.html seem to say > that you are actually expected to pass in just a bag of properties, one of > which will be that `render` function, which can trust that a `this` will be > specified to provide `props` and `state`. > > If there is a hook that lets you define your own constructor or factory > method, that would be good to have to correctly do the GWT object wiring > (perhaps some jsinterop expert can pipe up here as to what will be lost > without that being called). Otherwise, some jsni or JsObject-building code > that copies references to functions over to the a map-like object would be > ideal. A JsProperty-annotated field may be enough to convince the compiler > to generate correct code inside your function to access those properties, > but I would be less sure about non-static helper methods still being around > in the generated component. > > On Sun, Mar 13, 2016 at 3:35 PM Paul Stockley <pstockl...@gmail.com> > wrote: > >> We have started using React (using ES6 and FlowTypes) which is quite >> nice. However, we have a large GWT application that we want to start >> embedding React within. This makes perfect sense for migrating away from >> Widgets to a more modern approach. So I decided I would try and define a >> Java Api for React. After a couple of hours I got a really hacky prototype >> basically working. The code looks like >> >> private ClassicComponentClass<BaseProps> customComponent; >> >> >> public void onModuleLoad() { >> >> customComponent = React.createClass(new CustomComponent()); >> >> HTMLProps props = Props.newHTML(); >> props.setDefaultValue("Test"); >> >> DOMElement<HTMLProps> div = >> React.createElement("div", props, >> React.createElement("div", null), >> React.createElement(customComponent, null), >> React.createElement("div", null, "An example") >> ); >> >> ReactDOM.render(div, Document.get().getElementById("mainCont")); >> } >> >> >> @JsType(namespace = JsPackage.GLOBAL, name="CustomComponent") >> public class CustomComponent { >> >> @JsMethod >> public ReactElement<?> render() { >> return React.createElement("div", null, "It works"); >> } >> } >> >> >> >> This works fine for intrinsic React components. The problem is defining >> custom components. The React.createClass function needs to take a plain >> javascript object with certain methods defined (render, lifecyle methods >> etc). If I pass a Java object marked as JsType, this doesn't work because >> the render method needs to be defined on the top level object. The code puts >> it on a different prototype which doesn't work because React does the >> following: >> >> >> >> for (var name in spec) { >> if (!spec.hasOwnProperty(name)) { --Isn't true for render >> continue; >> } >> >> >> Is there some way to achieve what I want with JsInterop? I tried extending >> another base class marked with isNative=true. However, this results in a >> runtime error when trying to construct an object of that type. >> >> >> I am going to try a real hack with a JSNI method that constructs an object >> given the various >> >> methods as parameters. >> >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "GWT Contributors" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to google-web-toolkit-contributors+unsubscr...@googlegroups.com. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-web-toolkit-contributors/1dfb2508-9f88-4ecc-a30f-51814c496082%40googlegroups.com >> <https://groups.google.com/d/msgid/google-web-toolkit-contributors/1dfb2508-9f88-4ecc-a30f-51814c496082%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > -- > You received this message because you are subscribed to the Google Groups > "GWT Contributors" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to google-web-toolkit-contributors+unsubscr...@googlegroups.com. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-web-toolkit-contributors/CADcXZMycRicPkGNiPHab-d9ZAL4afWkVkwaU7%2Bu649AHPQX6Xw%40mail.gmail.com > <https://groups.google.com/d/msgid/google-web-toolkit-contributors/CADcXZMycRicPkGNiPHab-d9ZAL4afWkVkwaU7%2Bu649AHPQX6Xw%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "GWT Contributors" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit-contributors+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-web-toolkit-contributors/CAN%3DyUA1ac%3Dg2xYQSjSih5F9YwOo1dg2whskQg7MS8y54FdCPJQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
