shadaj/slinky

Everything about Slinky -- issues, ideas for features, where it's being used, and more

jhegedus42

@jhegedus42

i come back a bit later... and for now, i go back to the complicated but rock solid scalajs-react

Shadaj Laddad

@shadaj

@jhegedus42 this is a limitation of class components (the equivalent in ES6 is not supported either because you cannot create classes inside of function bodies). Functional components do support this pattern, and are the modern style for React development anyways.

Øyvind Raddum Berg

@oyvindberg

You actually can in javascript, it's a scala.js limitation that you can't

Shadaj Laddad

@shadaj

Ah, I stand corrected! Still recommend functional components though, they enable more use cases and often result in much simpler code, in addition to being supported in this situation.

jhegedus42

@jhegedus42

@shadaj hmmm... i don't know but somehow I think scalajs-react can do something like that... as far as I remember ... anyway... no big rush... i make something work... and if scalajs-react will be a dealbreaker ... then i will look into other solutions....

Charlie Hills

@contagnas

Is it possible to use the clean up functionally of useEffect in Slinky?

From the React docs:

Effects may also optionally specify how to “clean up” after them by returning a function.

But useEffect in Slinky returns Unit:

  def useEffect(thunk: js.Function0[EffectCallbackReturn]): Unit = js.native

Ramnivas Laddad

@ramnivas

@contagnas Yes, you may. See, for example, https://github.com/payalabs/use-slinky-hooks/blob/master/src/main/scala/com/payalabs/slinky/hooks/WindowsHooks.scala#L27

Charlie Hills

@contagnas

Oh, gotcha, it's in the EffectCallbackReturn; I misinterpreted that signature :flushed:

Antoine Doeraene

@sherpal

how can we make a Component extend a trait when we use @react? Specifically, when compiled I see that this inside the component is not a Component but something else. I can provide a more concrete example if it's not clear :D

Ramnivas Laddad

@ramnivas

What is the use case you are trying to address?

Antoine Doeraene

@sherpal

Well basically I wan't to model "forms" with streams (what it means follows). Concretely, I'm using akka-stream (via Akka.js, not by political convinction but because that's the framework I know). I'd like to create a Sink that behaves like a "state sink". That is, the sink receives elements in input and modify the state of my component. In order to stay as general as I can, I tried to implement it the following way:

def stateSink[In](component: Component)(stateChanger: In => component.State => component.State) = Sink.foreach[In](in => component.setState(stateChanger(in)))

That is, the user is required to give a function that takes an In and returns a function to change the state of the component.

Ideally, I wanted to use it inside a component by doing

val mySink = stateSink(this)(someStateChanger)

but it appears that this is not a Component when I define my class @react MyComponent extends Component. Moreover, I wanted to actually define stateSink in a trait that would extend Component (so that I don't have to call this, I can simply make my Component extend this trait). But either way, the problem is the same when I compile.

Ramnivas Laddad

@ramnivas

I think I understand the general idea of what you are trying to do. Not completely sure, but perhaps a better design would be to use a custom hook. This way, you can separate the streaming aspect from the component. Take a look at hooks such as https://github.com/payalabs/use-slinky-hooks/blob/master/src/main/scala/com/payalabs/slinky/hooks/WindowsHooks.scala#L15 to see if something like that could used as a basis.

Antoine Doeraene

@sherpal

Ah yes, I'm not yet familiar enough with react to have thought of that. I'll have a look into it! thanks

Ramnivas Laddad

@ramnivas

In general, in our experience, using FunctionalComponent along with custom hooks makes life quite easy.

Matthieu Baechler

@mbaechler

Hello, we are trying slinky but wondering if there is alternative to writing all bindings manually ?

Shadaj Laddad

@shadaj

@mbaechler yes! There are auto-generated bindings for popular libraries at https://github.com/oyvindberg/ScalablyTyped

Matthieu Baechler

@mbaechler

oh thanks ! :heart:

Øyvind Raddum Berg

@oyvindberg

We'll have some great news to announce on that front really soon :)

Matthieu Baechler

@mbaechler

Ok, so I have some bindings (react-chartjs-2) from ScalablyTyped but sadly I'm still struggling to make it work. I'm trying to instanciate a Bar class but I can't figure out how to pass some Props (see https://github.com/oyvindberg/ScalablyTyped/blob/master/r/react-chartjs-2/src/main/scala/typings/reactDashChartjsDash2/reactDashChartjsDash2Mod/Bar.scala for Bar source code)

Øyvind Raddum Berg

@oyvindberg

So it's somewhat rough still, but everything you need is there. The best example to look at is here https://github.com/oyvindberg/ScalablyTypedDemos/blob/master/antd-slinky/src/main/scala/demo/App.scala . All the components from react-chartjs-2 are gathered in https://github.com/oyvindberg/ScalablyTyped/blob/master/r/react-chartjs-2/src/main/scala/typings/reactDashChartjsDash2/reactDashChartjsDash2Components.scala . Then you can use the slinky integration to get slinky ExternalComponents https://github.com/oyvindberg/ScalablyTyped/blob/master/facades/react-slinky/src/main/scala/typings/react/ScalableSlinky.scala#L30

For antd we wrote a boilerplate file here https://github.com/oyvindberg/ScalablyTyped/blob/master/facades/antd-slinky/src/main/scala/typings/antd/AntdFacade.scala to have something which is convenient to use

but like I said, stay tuned - we'll have a much better story

Antoine Doeraene

@sherpal

you are selling a lot of dreams @oyvindberg :D

mcallisto

@mcallisto

I must say that so far the efforts of @oyvindberg turned out into very useful and working code :+1:

Mardo Del Cid

@mardo

Hey guys! What do you use for global state? Is there any redux-like lib for slinky?

Matthieu Baechler

@mbaechler

I'm interested in the answer, we started integrating diode but we would clearly benefit from some feedback from the community

Wojtek Pituła

@Krever

Hey all, I'm preparing to spin up a new project with https://github.com/shadaj/expo-template-scala and probably appollo-scalajs (for communication with the backend). Is there anything I should know? Like "Oh this is outdated" or "no, dont use this approach, we are preparing something better". Last time I checked slinky it was somewhere near 0.2.0 and I expect a lot changed in the meantime. Is react-native support alive and "production-readish" ?

Wojtek Pituła

@Krever

I have a first question. Mentioned template uses class component with

  @JSExportTopLevel("app")
  val app = App.componentConstructor

I wanted to refactor it to use FunctionalComponent but I have no idea how to replace componentConstructor thing

Wojtek Pituła

@Krever

Okey, nvm figured it out, val app: ReactComponentClass[Unit] = App.component :)

Shadaj Laddad

@shadaj

@mardo @mbaechler both Diode and Redux work with Slinky! The former will definitely be easier to set up since it's a Scala library itself, but Redux should work fine too with some ExternalComponent definitions. @ramnivas might be able to answer some more questions about how using Diode is

@Krever the Expo template is the way to go for Slinky and React Native! Slinky doesn't have any specific internals for React Native, since it uses only the core React APIs, so it mostly just provides a standard set of ExternalComponent definitions that can be user-supplemented if anything is missing. React Native is definitely a focus for Slinky and work is still active, I'm planning on building support for the "React Fresh" hot loading feature that's the new recommended approach.

Wojtek Pituła

@Krever

@shadaj thanks! I have to (sadly) admit I abadoned the slinky approach for now. I tried to use react-navigation and failed miserably. I wasnt brave enough to create my own bindngs (because they will probably be incomplete and buggy) and I wasnt able to use autogenerated one (scalably typed) as well, because they were super non-user-friendly and quite complicated. And because my project was proof-of-concept I decided to fallback to typescript for now.

Øyvind Raddum Berg

@oyvindberg

I tried to use that library as well @Krever - it was a complete nightmare. I did get something working, and then they just released a major version which broke everything :D Does anybody know if there other routing libs for react native?

Øyvind Raddum Berg

@oyvindberg

Also i would use diode hundred times over redux from Scala.js

Matthieu Baechler

@mbaechler

@oyvindberg @shadaj thank you for your feedback

Ramnivas Laddad

@ramnivas

Definitely Diode, since it is written specifically with Scala in mind.

Shadaj Laddad

@shadaj

React Router supports native (https://reacttraining.com/react-router/native/guides/quick-start), and has a pretty external component-friendly API so perhaps that will work?

Øyvind Raddum Berg

@oyvindberg

Doh, of course :)

I'll try that

mcallisto

@mcallisto

I use React Router for native as well, but if anyone has better alternatives I would be be happy to know them

mcallisto

@mcallisto

@shadaj in your Expo template I would like to use a @react object App { ... } (new functional component) instead of the existing @react class App extends Component { ... }

How I have to change the current Main object https://github.com/shadaj/expo-template-scala/blob/master/src/main/scala/hello/world/Main.scala ?

mcallisto

@mcallisto

This line https://github.com/shadaj/expo-template-scala/blob/e46797bffb0083a3de48a9349b46ef5d88fe4115/src/main/scala/hello/world/Main.scala#L16 of course no longer compiles and I cannot find the correct solution...

mcallisto

@mcallisto

Definitely Diode, since it is written specifically with Scala in mind.

@ramnivas are you using the provided ReactConnector with slinky?

Ramnivas Laddad

@ramnivas

I explored using Diode earlier, but aren't using it now (didn't need global state management due to the nature of the app).

Shadaj Laddad

@shadaj

@mcallisto you should be able to replace with val app: ReactComponentClass[_] = App. This will actually handle both functional and class components, so we should probably just change the template.

mcallisto

@mcallisto

@mcallisto you should be able to replace with val app: ReactComponentClass[_] = App. This will actually handle both functional and class components, so we should probably just change the template.

It does not seem to work in the functional case, I get the following type mismatch compile error:

[error]  found   : ***.App.type
[error]  required: slinky.core.ReactComponentClass[_]
[error]   val app: ReactComponentClass[_] = App
[error]                                     ^

I explored using Diode earlier, but aren't using it now (didn't need global state management due to the nature of the app).

Thank you @ramnivas I will try anyway to explore diode a little more

mcallisto

@mcallisto

@shadaj found, it has to be val app: ReactComponentClass[_] = App.component in the functional case. Thank you!

mcallisto

@mcallisto

Regarding diode and slinky, I have updated the simple example version from @ryneflood, see https://github.com/mcallisto/slinky-diode-example/tree/functional-hooks

Where communities thrive

People

Repo info

Activity