by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Sep 07 20:02

    oyvindberg on sbt14

    scalafmt (compare)

  • Sep 07 19:56

    oyvindberg on sbt14

    Bump sbt to 1.4.0-RC1 (Fix #168) (compare)

  • Sep 06 19:27

    oyvindberg on disable-scalajsdefined-traits-with-setters

    (compare)

  • Sep 06 19:27

    oyvindberg on master

    traits with setters cannot be `… Merge pull request #197 from Sc… (compare)

  • Sep 05 20:14

    oyvindberg on disable-scalajsdefined-traits-with-setters

    traits with setters cannot be `… (compare)

  • Sep 03 21:16

    oyvindberg on stMove

    wip stMove (compare)

  • Sep 03 20:59

    oyvindberg on disable-scalajsdefined-traits-with-setters

    traits with setters cannot be `… (compare)

  • Aug 31 00:16

    oyvindberg on gh-pages

    Deploy website Deploy website … (compare)

  • Aug 30 23:55

    oyvindberg on v1.0.0-beta25

    (compare)

  • Aug 30 23:46

    oyvindberg on tagmod-and-spreads

    (compare)

  • Aug 30 23:46

    oyvindberg on master

    Extend scalajs-react integratio… Add `unsafeSpread` to scalajs-r… Add explicit `build` method to … and 1 more (compare)

  • Aug 30 23:00

    oyvindberg on tagmod-and-spreads

    Add `unsafeSpread` to scalajs-r… Add explicit `build` method to … (compare)

  • Aug 30 22:37

    oyvindberg on tagmod-and-spreads

    Add explicit `build` method to … (compare)

  • Aug 30 22:30

    oyvindberg on tagmod-and-spreads

    Extend scalajs-react integratio… Add `unsafeSpread` to scalajs-r… Add explicit `build` method to … (compare)

  • Aug 30 22:07

    oyvindberg on tagmod-and-spreads

    Extend scalajs-react integratio… Add `unsafeSpread` to scalajs-r… (compare)

  • Aug 26 19:44

    oyvindberg on master

    Remove parallel runner, disable… (compare)

  • Aug 26 19:23

    oyvindberg on master

    chore(Dependencies) : update li… Merge pull request #193 from mv… (compare)

  • Aug 24 04:22

    oyvindberg on classes-can-not-extend-js-promise

    (compare)

  • Aug 24 04:22

    oyvindberg on master

    Follow-up from #192: Don't let … (compare)

  • Aug 24 04:11

    oyvindberg on upgrade-bloop

    (compare)

Øyvind Raddum Berg
@oyvindberg
@rleibman I haven't used scalajs-react since before hooks, so I'm not sure. It should be easy though, as long as you're in a functional component you just call the function
Roberto Leibman
@rleibman
Right, but the function doesn't return callback... I guess I can just wrap it in a callback.
Øyvind Raddum Berg
@oyvindberg
Well yeah, that's going to be manual. As far as I know there isn't a way to recognize a function as being a hook, so there isn't really any codegen we can do for it
Roberto Leibman
@rleibman
I ended up using ReactSound instead ,that's working so far.
Roberto Leibman
@rleibman

Mhh.. ReactSound is forcing a render of things I don't want rendered as it changes... (siblings) these re-renders cause traffic between client and server which I don't want. So I tried using the use-sound react hook this way:

    def playSound(soundUrlOpt: Option[String]): Callback = {
      soundUrlOpt.fold(Callback.empty) { url =>
        Callback { typings.useSound.mod.default(url) }
      }
}

But I get a react error:
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Øyvind Raddum Berg
@oyvindberg
read the hooks docs, you cant use them conditionally. this is what you get when js developers make things... convenient. also remember to use a functional component
Roberto Leibman
@rleibman
If I can figure it out (which I don't know exactly what you mean by either conditionally, or functional component), I'm gathering that I'll end up in the same problem that I have with the re-render. Let me move the question to the scalajs-react channel, since it's really not directly related to ScalablyTyped.
Roberto Leibman
@rleibman
Though of course, I welcome your answer.
Øyvind Raddum Berg
@oyvindberg
@rleibman functional component as in ScalaFnComponent in scalajs-react, and not conditional as in you only run it in one branch of the fold
Øyvind Raddum Berg
@oyvindberg
builders are finally coming to scalajs-react ScalablyTyped/Converter#177 :D
Roberto Leibman
@rleibman
Thank you! I know they'll make a lot of work for me :)
Andreas Gabor
@an-tex
yey!!
Andreas Gabor
@an-tex
i'll give it a shot in my reference project later on
Øyvind Raddum Berg
@oyvindberg
ported most of the demos as well, https://github.com/ScalablyTyped/ScalaJsReactDemos
some rough edges still, but it mostly works
Andreas Gabor
@an-tex
looks really neat! odd i'm getting that stImport errors. i'll try it in a different project
Andreas Gabor
@an-tex
yea same issue there
Øyvind Raddum Berg
@oyvindberg
if anybody else is tired of working with DOM elements in scalajs-react and slinky I'm now adding builders for react intrinsics (a, div and so on) as well :star: ScalablyTyped/Converter#179
Andreas Gabor
@an-tex
so sth like <.div.onClick(...).id(...).onFocus(...) ?
couldnt quite figure it out through the huge diff :o
Øyvind Raddum Berg
@oyvindberg
Yep, like this:
  import typings.react.{components => react}

  case class State(selectedIdx: Option[Int])

  val SlickTest =
    ScalaFnComponent[Seq[String]] { images =>
      val js.Tuple2(state, setState) = useState(State(None))

      def myOnClick(idx: Int) =
        Callback.info(s"clicked image $idx") >> Callback(setState(State(Some(idx))))

      val renderedImages: Seq[VdomElement] =
        images.zipWithIndex.map {
          case (source, idx) => react.img.withKey(idx).src(source).onClick(_ => myOnClick(idx))
        }

      val square = CSSProperties().setPosition(PositionProperty.relative).setLeft("200px").setWidth(500).setHeight(500)

      react.div.style(square)(
        react.label.style(CSSProperties().setColor("blue"))(
          s"Selected image index: ${state.selectedIdx.fold("none")(_.toString)}"
        ),
        ReactSlick
          .onInit(Callback.info("slick init"))
          .dots(true)
          .autoplay(true)
          .autoplaySpeed(1000)
          .slidesToShow(2)(renderedImages: _*)
      )
    }
not an implicit in sight, perfect IDE help, no weird symbols, all strongly typed, minimal generated javascript. I think it's really a big improvement
Øyvind Raddum Berg
@oyvindberg
ported the react-native demo to scalajs-react https://github.com/ScalablyTyped/ScalaJsReactDemos/tree/master/react-native/src/main/scala/hello/world - I think the experience of working with that is now just as good as for slinky
Roberto Leibman
@rleibman
Thank you!
elkhadirzyad
@elkhadirzyad
image.png
I got the error when compiling scala react js demos
Øyvind Raddum Berg
@oyvindberg
It's not released yet @elkhadirzyad . I'll release a new beta once I have a fix for ScalablyTyped/Converter#182
Jason Pickens
@steinybot
I’m guessing there is no support for having React.ForwardRefExoticComponent mapped to slinky.core.FunctionalComponentForwardedRef?
Øyvind Raddum Berg
@oyvindberg
No, I have no idea what those things are honestly
It might be easy to add. What do you need it for?
Jason Pickens
@steinybot
One of the components from the UI library I am using defines one of the components with that type and so the generated ST types aren’t much help. I got it working using an ExternalComponent.
Looks as though ExternalComponent has a RefType and can call withRef on it so all is well.
For reference the forwardRef stuff is documented here https://slinky.dev/docs/functional-components-and-hooks/
elkhadirzyad
@elkhadirzyad
thanks @oyvindberg, for slinkyReact demos, i can test them, there is no issue about them ?
Øyvind Raddum Berg
@oyvindberg
@steinybot the generated components also should have withRef, but perhaps not with the correct type. they also have a set where you can supply any prop
which library is this? I have never seen this pattern before
@elkhadirzyad yes, no issue there
Jason Pickens
@steinybot
It doesn’t seem to. It has:
def apply(props: P): slinky.core.facade.ReactElement | Null = js.native
the AmplifyAuthenticator component
elkhadirzyad
@elkhadirzyad
@oyvind, is stFlavour := Flavour.Japgolly means that we will have components written in scala react js instead of slinky ?
Øyvind Raddum Berg
@oyvindberg
@steinybot are you looking in typings.awsAmplifyUiReact.components?
@elkhadirzyad yes exactly. the functionality has been there for a long time, but I'm rewriting it to use the builder pattern now used for slinky components and to construct javascript objects
Jason Pickens
@steinybot
I’m looking at typings.awsAmplifyUiReact.mod#AmplifyAuthenticator
and the type typings.react.mod.ForwardRefExoticComponent
Øyvind Raddum Berg
@oyvindberg
right. I'm still working on documentation for this. What you'll find there is the 1-1 translation of typescript, which for react components is hard to use. for that reason the slinky and scalajs-react flavours generates a package with convenience boilerplate to make it all nice to use
Øyvind Raddum Berg
@oyvindberg
I see that the type of the ref prop is lost, so you'll have to use withRef and cast yourself for now. I'll look into that
elkhadirzyad
@elkhadirzyad
@oyvindberg , i have scala 2.12, how to upgrade to scala 2.13 in order to test scala react js demos ?
Øyvind Raddum Berg
@oyvindberg
It's determined by build.sbt in the project, so you just start sbt there and it downloads everything