Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 27 22:14
    shadaj synchronize #263
  • Nov 27 22:14

    shadaj on tag-bundle-size

    Fix container building compile … (compare)

  • Nov 27 21:59
    shadaj synchronize #263
  • Nov 27 21:59

    shadaj on tag-bundle-size

    Re-enable feature flags (compare)

  • Nov 27 21:59
    shadaj synchronize #263
  • Nov 27 21:59

    shadaj on tag-bundle-size

    Re-enable feature flags (compare)

  • Nov 27 21:56
    shadaj synchronize #263
  • Nov 27 21:56

    shadaj on tag-bundle-size

    Fix derivation crash to enable … Setup GitHub Actions CI (#289) … Fix #286, support useCallback w… and 12 more (compare)

  • Nov 22 06:49
    steelbluelee edited #301
  • Nov 22 06:48
    steelbluelee opened #301
  • Oct 28 23:15
    Jake6329 closed #300
  • Oct 28 23:15
    Jake6329 commented #300
  • Oct 28 23:07
    shadaj commented #300
  • Oct 28 22:43
    Jake6329 edited #300
  • Oct 28 22:35
    Jake6329 edited #300
  • Oct 28 22:33
    Jake6329 opened #300
  • Oct 20 18:03
    shadaj closed #282
  • Oct 20 18:03
    shadaj commented #282
  • Oct 19 17:14

    shadaj on update-native-docs

    (compare)

  • Oct 19 17:13

    shadaj on master

    Update React Native docs to ref… (compare)

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
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
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 { ... }
mcallisto
@mcallisto
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