Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 24 06:15
    scala-steward opened #550
  • Jan 24 06:15
    scala-steward commented #519
  • Jan 24 06:15
    scala-steward closed #519
  • Jan 21 22:28

    shadaj on main

    Run CI on main branch (compare)

  • Jan 21 22:27

    shadaj on main

    Branch changed from master to m… (compare)

  • Jan 21 22:27
    shadaj closed #549
  • Jan 21 10:23
    sideeffffect opened #549
  • Jan 21 06:06
    scala-steward opened #548
  • Jan 18 19:57
    AlexITC edited #547
  • Jan 18 19:56
    AlexITC commented #547
  • Jan 18 19:36
    shadaj commented #547
  • Jan 17 22:33
    AlexITC opened #547
  • Jan 13 19:33
    scala-steward closed #517
  • Jan 13 19:33
    scala-steward commented #517
  • Jan 13 19:33
    scala-steward opened #546
  • Jan 13 19:33
    scala-steward closed #544
  • Jan 13 19:33
    scala-steward commented #544
  • Jan 13 19:33
    scala-steward opened #545
  • Jan 12 19:05
    scala-steward closed #541
  • Jan 12 19:05
    scala-steward commented #541
Peter Storm
@peterstorm
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
mn98
@mn98
@edadma this one was shared by @pme123 a few days ago.
Eric K Richardson
@ekrich
@shadaj There really is not that much to support Scala.js with 3.0.0-M2. There could be non-obvious things and my stuff in non-ui. There is the Dotty plugin plus mapping the dependencies withisDotty` if needed. I have support in https://github.com/ekrich/sconfig/blob/master/build.sbt#L157-L161 and https://github.com/ekrich/sconfig/blob/master/project/plugins.sbt
evbo
@evbo

Seems since I've upgraded to scalajs 1.3.1, scala2.13, and slinky0.6.6that none of the slinky reader/writer auto conversions are taking place. I'm having to Type things likejs.Function0[Unit]instead of() => Unit` and am unsure what could be causing it? Any ideas on how to debug root cause for this?

For instance, one runtime error I get for not using a function type with js.Function3 is:

Uncaught org.scalajs.linker.runtime.UndefinedBehaviorError: java.lang.ClassCastException: (arg1$2, arg2$2, arg3$2) => f$4.applyOOOO(arg1$2, arg2$2, arg3$2) is not an instance of scala.Function3

Shadaj Laddad
@shadaj
hmm @evbo do you see warnings of using the fallback writer for the components that are having read/write crashes?
evbo
@evbo

@shadaj thanks I double checked and did not see compile warnings when running client/fastOptJS::startWebpackDevServer;~client/fastOptJS (only warn was that there were deprecations...)

I thought I should put together a simpler example, so here's an object used by my react-table facade for headerGroupProps the table uses to store header information:

case class HeaderGroupProps(key: String, role: String)

That compiles, but for this to successfully run I must write it as:

class HeaderGroupProps(val key: String, val role: String) extends js.Object

// example usage:
val g = headerGroup.getHeaderGroupProps()

Else I get error:

Uncaught org.scalajs.linker.runtime.UndefinedBehaviorError: java.lang.ClassCastException: [object Object] is not an instance of HeaderGroupProps

Another example (for a simple object used by same facade) where if I try to use a Seq instead of js.Array I get:

Uncaught org.scalajs.linker.runtime.UndefinedBehaviorError: java.lang.ClassCastException: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] is not an instance of scala.collection.immutable.Seq

Other versions I forgot to mention: sbt 1.3.13, Java 11.0.9.1

Jeaye Wilkerson
@jeaye
Hello! I've spent the past 4 days trying scala-js-react, Laminar, and Binding.scala. Now I've found Slinky.
Shadaj Laddad
@shadaj
@evbo that's very odd, I'll try to upgrade the Slinky build to the latest Scala.js version and see if that is causing problems; if possible could you take a look at the fastopt JS file and see if the readers are being generated?
also how is getHeaderGroupProps defined? JS objects will only be converted through Slinky readers when they are used as props for a Slinky component
nafg
@nafg
@jeaye what do you think about them in comparison?
asaadza
@asaadza

What's a reasonable/idiomatic way to do this given

  def useClientRect(initial: ClientRect) = {
    val (rect, setRect) = Hooks.useState[ClientRect](initial)
    val ref = Hooks.useCallback[Element => ()](node => {
      if (node != null) {
        setRect(node.getBoundingClientRect())
      }
    }, List())
    (rect, ref)
  }

?

asaadza
@asaadza

hopefully, this is not the best answer

  val component = FunctionalComponent[Unit] { _ => 
    val (rect, cb) = Draw.useClientRect(null) 
    val ref1 = Hooks.useRef[dom.html.Element](null)
    Hooks.useEffect({ () => cb(ref1.current) })
    div(
      h1(ref := ref1)("Tall Writings"),
      {
        if(rect != null)  
          h2(s"How tall?! ${rect.height}")
        else
          h2("nope")
      }
    )
  }

especially since it gives Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

asaadza
@asaadza
Even if adding a constraint/"dependency array" on useEffect enables it to run, is it possible to reason about the order of side-effects (setting the ref and calculating the bounding rectangle) and, rendering in such an impl?
Shadaj Laddad
@shadaj
@asaadza well what's happening is that the effect runs, which changes the state of your rect, which causes the effect to run again, and so on. You probably need to use useLayoutEffect with an empty dependency array so that the ref1 will be available but the effect will only run once
asaadza
@asaadza
@shadaj that's worth a try too, thanks, or one could just get a ref to the underlying dom.html.Element and use the client properties on it in some side-effecty hook (which might turn out to be the one you suggest anyway, to make sure everything is already where it is meant to be!). I was really more wondering whether slinky will support setting the ref attribute to a callback at some point, since it seems to make the non-determinism argument moot in such cases, or do you consider that to be an anti-pattern in this context.
PS that live example/hackery I linked to in my initial post is actually based on the react hooks FAQ, :) , and it did look like interesting "sugar" for that sort of use case, even though it's a shame we have to resort to such measures at all.
Shadaj Laddad
@shadaj
@asaadza Slinky already does support callback refs! You can use them on both tag elements and components. Are you unable to pass in a callback to ref := for some reason?
asaadza
@asaadza
yes :)