Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 19 13:48
    evbo commented #196
  • May 13 10:51
    scala-steward closed #542
  • May 13 10:51
    scala-steward commented #542
  • May 13 10:51
    scala-steward opened #570
  • May 11 00:19
    evelant opened #569
  • May 10 13:53
    evbo commented #196
  • Apr 30 22:02
    shadaj demilestoned #240
  • Apr 30 22:00
    shadaj milestoned #537
  • Apr 30 22:00
    shadaj labeled #537
  • Apr 30 22:00
    shadaj commented #537
  • Apr 30 21:58
    shadaj commented #566
  • Apr 30 21:58
    shadaj milestoned #566
  • Apr 30 21:58
    shadaj labeled #566
  • Apr 30 21:57
    shadaj commented #566
  • Apr 30 21:56
    shadaj demilestoned #568
  • Apr 30 21:56
    shadaj milestoned #568
  • Apr 30 21:55
    shadaj milestoned #568
  • Apr 30 21:55
    shadaj labeled #568
  • Apr 27 18:45
    evbo opened #568
  • Apr 27 17:43
    evbo commented #556
Gabor Juhasz
@gjuhasz86
Not to mention the "loop" which is another pain point, I don't like the index-based addressing even in this solution
Alexis Hernandez
@AlexITC
you could propagate some state through the props to the panels, and each panel can choose if it is worth to do anything, instead of keeping the logic on the parent
Gabor Juhasz
@gjuhasz86
right, that's true
Gabor Juhasz
@gjuhasz86
ok then looking at this from a bit of a different angle: is there a way to keep the state in the parent, pass it to the children as props, but when the children wants to change it, it wouldn't have to call back to the parent who has to provide the exact way of how to change the state?
Gabor Juhasz
@gjuhasz86
I have the feeling that maybe its possible with redux... But I'd like to avoid spending another 2 weeks on a dead-end, so I'm interested in any suggestion
Alexis Hernandez
@AlexITC
I know two ways, you send the argument, or how to retrieve it, in the later case, you can share an object holding a var, which can be mutated, but I think that's a worse idea
Gabor Juhasz
@gjuhasz86
can you show me an example for "sending the argument"?
Alexis Hernandez
@AlexITC
just send such argument in the panel's props
Gabor Juhasz
@gjuhasz86

I mean I can do something like this:

val (nums, setNums) = useState(List((1,2),(3,4)))
nums.map{ p=> Panel(p) }

so far so good, but then I'd like each Panel to be able to change its own props

but that gets messy
Alexis Hernandez
@AlexITC
I'd invoke the useState on each panel's mutable state, and invoke the props callback when such state gets updated
Gabor Juhasz
@gjuhasz86
I'm sorry I don't see how that achieves what I want/ But anyways, it's late, I might give it another try in the morning (not too optimistic, though)
thanks for your help
Peter Storm
@peterstorm
Does anyone have an example with the ContextAPI in SLinky?
Gabor Juhasz
@gjuhasz86
So I was finally able to hack around the problem I had with calling into functional components. I'm passing in an observable using scala.rx. I guess it's still a hack but I didn't feel like rewriting the whole app again in a different framework.
Here's the code from before reimplemented with functional components and scala.rx in case anyone's interested: https://pastebin.com/DnLHpnZ8
Peter Storm
@peterstorm
Hmmm, cant seem to get useContext to work, when doing this:
package connect.ui.components.auth

import slinky.core._
import slinky.core.annotations.react
import slinky.web.html._
import org.scalajs.dom
import slinky.core.facade.{Fragment, ReactElement}
import slinky.web.ReactDOM
import slinky.core.facade.React
import slinky.core.facade.Hooks._
import typings.reactRouterDom.{ components => router}

import scala.scalajs.js

import connect.ui.domain.authentication.Auth
import org.scalablytyped.std.global.console


@react
object AuthContextProvider  {

   val authContext = React.createContext[Auth](Auth(false, "", "", 0, () => ()))

  case class Props(test: String, children: ReactElement*)

  val component = FunctionalComponent[Props] { props =>

    val (isAuthenticated, setIsAuthenticated) = useState(false)


    def loginHandler(): Unit = {
        console.log("loginHandler called")
        setIsAuthenticated(true)
        router.Redirect(to = "/")

    }

    authContext.Provider(value = Auth(isAuthenticated, "", "", 0, loginHandler _))(
        props.children
    )

  }
}
If i then useContext(AuthContextProvider.authContext) in a different component
It only uses the initial context i provided
But if I do AuthContextProvider.authContext.Consumer( context => ...) it works
Peter Storm
@peterstorm
I tried to use it in the App componenet, but that didnt make too much sense
So apologies, it works perfectly well in nested components :)
Sina
@sinaghaffari
Any alternatives to slinky-styled-components since that hasn't been released for Scala 2.13?
Peter Storm
@peterstorm
Does Slinky support React.lazy and Suspense?
Peter Storm
@peterstorm
Ah, suspense i can see. and I can use suspense without lazy, right?
Pascal Mengelt
@pme123
Hi there, I created 2 examples:
A Simple Example using Slinky with a Scalably Typed example (Plotly & Ant Design).
https://github.com/pme123/scalably-slinky-example
The famous TODO List as a client-server example with Slinky.
https://github.com/pme123/slinky-todos
nafg
@nafg
Is Slinky already being ported to scala 3? If not, what is the plan?
Shadaj Laddad
@shadaj
@peterstorm yeah, you can use suspense with a couple libraries (Apollo Client comes to mind); I do hope to get lazy working soon, once the bundle splitting support in Scala.js stabilizes
@pme123 that's awesome! Do you mind creating a PR to add those to https://slinky.dev/docs/resources/ ?
@nafg not as of right now, I haven't explored the state of Scala.js and the associated tooling in Scala 3 too much now. I don't expect there to be too many issues getting the Slinky core, minus @react working, since the remaining macros are mostly just for typeclass derivation.
Pascal Mengelt
@pme123
@shadaj you already merged it;)
mn98
@mn98
@pme123 thanks for sharing those sample projects, they'll be very helpful!
I've been using Slinky with Play and scala-js to handle all the routing/client-server interaction, to good effect. Out of curiosity, are there any reasons why you took smaller components rather than a framework such as Play? If this is too off-topic please feel free to PM me if you wouldn't mind. Thanks!
Pascal Mengelt
@pme123
@mn98 I use Play for my work - so in my freetime I try mainly stuff that interests me and could be an option for a future project at work - so in case of http4s it is the functional part that interests me;).
Peter Storm
@peterstorm
Play is way too opinionated imo, we use http4s at work too, for our admin interface, also made with Slinky
mn98
@mn98
@pme123 @peterstorm thanks, both! I'm toying with moving to http4s anyway, so might give that a shot.
But not abandoning Slinky any time soon, this stuff is superb!
Peter Storm
@peterstorm
Yeah Slinky with Scalably typed for the frontend is a godsent
evbo
@evbo

Just wondering has anyone played with Laminar at all?

The syntax feels very similar to slinky (at least the linked example!). Curious to hear people's thoughts and opinions on it

Anton Sviridov
@keynmol

I've used slinky (for native) and use Laminar for any other frontend work.

I've never learned react so I'm not sold on its model, which is why I prefer a smaller library (Laminar) :)

They have very different purposes - Laminar is more of a library for FRP - it doesn't have high level things like props, components, managed state. It has all the tools for you to build that, but it's a library, not a framework.
evbo
@evbo

@keynmol thanks for sharing. The first line on laminar's website reads: "Render Laminar elements inside React apps or the other way in just a few lines of code."

But has you're experience been react(slinky) and laminar don't interoperate so easy?

Anton Sviridov
@keynmol
Sorry, I should've clarified - I didn't use them together :)
zetashift
@zetashift
If one is to start with Slinky now, are object based components recommended or functional ones using hooks?
mn98
@mn98
@zetashift I started with OO components but quickly moved to functional components and hooks. I would recommend going straight to the functional approach.
But I don't think this is really a Slinky question, more a React question generally.
Shadaj Laddad
@shadaj
+1 on @mn98, the Slinky homepage still uses class components because that's what the React homepage does, but I personally use functional components whenever possible
Peter Storm
@peterstorm
Can I use suspense with something simple? Like just the Fetch API?
zetashift
@zetashift
@mn98 yea that was what I was hoping for! I'm going through react and functional components are so much easier and most mention that it's the way forward. But I saw most samples in Slinky use class components so I thought they might be recommended for slinky.
Shadaj Laddad
@shadaj
@peterstorm you might still need a library (like https://github.com/dai-shi/react-suspense-fetch), since there's a fairly complicated API that you have to use to set up suspense yourself
Edward A. Maxedon, Sr.
@edadma
I'd be interested in using slinky with ant design. Can't seem to get that to work. Are there any working example projects?
nafg
@nafg
@edadma I believe the ScalablyTyped demos include one