Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 01:15
    scala-steward closed #523
  • 01:15
    scala-steward commented #523
  • 01:15
    scala-steward opened #526
  • Dec 03 08:04

    shadaj on fix-495

    (compare)

  • Dec 03 08:04

    shadaj on master

    Support returning js.Function a… (compare)

  • Dec 03 08:04
    shadaj closed #525
  • Dec 03 08:04
    shadaj closed #495
  • Dec 03 07:38
    shadaj synchronize #525
  • Dec 03 07:38

    shadaj on fix-495

    Try to fix React Router (compare)

  • Dec 03 07:31
    shadaj synchronize #525
  • Dec 03 07:31

    shadaj on fix-495

    Fix peer dependency for React N… (compare)

  • Dec 03 07:28
    shadaj milestoned #525
  • Dec 03 07:28
    shadaj opened #525
  • Dec 03 07:28

    shadaj on fix-495

    Support returning js.Function a… (compare)

  • Nov 26 16:21
    scala-steward closed #522
  • Nov 26 16:21
    scala-steward commented #522
  • Nov 26 16:21
    scala-steward opened #524
  • Nov 19 04:51
    scala-steward opened #523
  • Nov 12 21:53
    scala-steward closed #509
  • Nov 12 21:53
    scala-steward commented #509
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 :)
asaadza
@asaadza
overloaded method := with alternatives: [T <: slinky.core.TagElement, E <: T#RefType](v: slinky.core.RefAttr[E]): slinky.core.AttrPair[T] <and> [T <: slinky.core.TagElement](v: T#RefType => Unit): slinky.core.AttrPair[T] cannot be applied to (() => Unit)
asaadza
@asaadza
Changing the domain of the callback (eg to some sort of scalajs-dom or slinky-dom element) does not seem to fix it either.
Is there some alternative to scalafiddle these days? Hopefully scala-center will take that over at some point because it was a great resource, for all sorts of reasons, while the available libs and scala/sjs versions were kept close to uptodate, and even though scastie is also really good too, it wouldn't probably help us here.
asaadza
@asaadza

@shadaj - is this the intended usage?

div(
  ref :=[div.tagType] { el =>
    if (el != null) {
      val rect = el.getBoundingClientRect()
      println(rect.top)
    }
  }
),

That works anyway (not sure why inference was failing, but with the explicit type param it's OK).
Nice job for including even that in Slinky! Have you, or anybody, actually used it anywhere?

Domantas Petrauskas
@ptrdom
Does @react macro work for anyone on IntelliJ 2020.3.1? Can't figure out how to make it work.
1 reply
peterstorm
@peterstorm:matrix.org
[m]
How do I best fetch data in a useEffect before rendering a the component? I tried the whole if (isLoading) { h1(“loading”) } else { render the stuff.... } but it didn’t seem to work
And I set the state in a useStare hook in the useEffect hook
peterstorm
@peterstorm:matrix.org
[m]
Ah, got it to work
Alexis Hernandez
@AlexITC
@peterstorm:matrix.org I built something reusable for that
Shadaj Laddad
@shadaj
@asaadza yep that's the API to use, but it's odd that you had to include the explicit type parameter (there's a test at https://github.com/shadaj/slinky/blob/master/tests/src/test/scala/slinky/core/TagTest.scala#L86 where functional refs are compiling without explicit type params, I wonder what's the difference)
peterstorm
@peterstorm:matrix.org
[m]
How in the world do I make a direct link work in Slinky? Or maybe just React in general? If I go to a link I have defined in a router, I get 404 when I visit it.