Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Angel-O
@Angel-O
Hi, I have a question: what is the library of choice when it comes to state management in scalajs-react ?
Naftoli Gugenheim
@nafg
There was Diode, but idk if it's maintained at all or even still usable
That said, I mostly don't use any library
I have some abstractions that help me
but I'm not doing any major state unidirectional flow architecture thing
Angel-O
@Angel-O
I'm thinking about something like Redux. I've used Diode in the past, but I'm not sure it is still actively maintained. Thank you
Naftoli Gugenheim
@nafg
Even in JS land redux etc. are not nearly as widely used anymore
Note that scalajs-react 2.0.0 supports react hooks. I'm not sure if that has any impact on overall state management
Angel-O
@Angel-O
Ok I see thank you @nafg. I will look into react hooks hopefully I can find something that sutid my use case m
Suits my use case *
elkhadirzyad
@elkhadirzyad
hello guys, is there a way to export css & less inside a scalajs project jar ?
Roberto Leibman
@rleibman
In the context of https://github.com/japgolly/scalajs-react/blob/master/doc/FX_AGNOSTICISM.md.... has anybody tried this with zio? what would it look like?
Naftoli Gugenheim
@nafg
@rleibman it looks like it expects a unary type constructor so you'd have to use a type alias, such as IIRC zio.Task
Roberto Leibman
@rleibman
@nafg Have you seen any examples?
Ryne Flood
@ryne.flood_gitlab
@rleibman @nafg I'd be interested in that as well
Naftoli Gugenheim
@nafg
@rleibman @ryne.flood_gitlab no. But I don't see any challenge. AFAICT you just need to write a typeclass instance for it.
To be clear, the question is not directly related to that particular page (https://github.com/japgolly/scalajs-react/blob/master/doc/FX_AGNOSTICISM.md)
That page is about writing a library that doesn't care whether you use ZIO or cats-effect or CallbackTo
Roberto Leibman
@rleibman
Right, basically I want to use ZIO in scalajs-react instead of callback.
(or ZIO's Task)
And change every reference to cats.effect.IO to zio.Task
And so on. For instance, it uses cats.Monad because that's how cats-effect works but you don't need that.
So alternatively delete everything that's not an override and delete the bodies and then reimplement
I guess it's a little unfortunate that that file hardcodes to cats.effect.IO instead of using cats-effect typeclasses. Then it would be easier to add ZIO monix etc. as long as you have cats.effect typeclass instances for your concrete effect type
Naftoli Gugenheim
@nafg
Maybe submit a PR that factors out as much as possible in that file to by effect-type agnostic based on cats-effect typeclasses (basically just an adapter between cats-effect typeclasses and scalajs-react typeclasses) and then does the cats-effect concrete types on top of that.
Roberto Leibman
@rleibman
eyes go blurry the moment I start hearing too much category theory :D
Naftoli Gugenheim
@nafg
That's how it is for everyone the first 20 times :laughing:
kalejami
@kalejami

Hey guys, is there any possibility to write components in F for scalajs-react-2.0.0

I got so far:

  class HelloCompF[F[_]: Async, G[_]: Sync: Effect.Dispatch] {
    final case class State(uuid: Option[UUID])

    final case class Backend($ : Generic.MountedRoot[G, F, Unit, State]) {
      def render(s: State): VdomElement =
        <.h4("Hallo World " + s.uuid.fold("")(_.toString))

      def init: G[Unit] = Sync[G]
        .delay(UUID.randomUUID())
        .flatMap(uuid => $.modState(_.copy(uuid = Some(uuid))))
    }

    private val component = ScalaComponent
      .builder[Unit]("Hello")
      .initialState(State(None))
      .backend(new Backend(_)) //this breaks because backend return Scala.BackendScope[Unit, State] but I Need Generic.MountedRoot[G, F, Unit, State]
      .componentDidMount(_.backend.init)
      .build

    def init(): Unmounted[Unit, State, Backend] = component()
  }

Is there any generic ScalaComponent Builder?

Also the docs says: https://github.com/japgolly/scalajs-react/blob/master/doc/MODULES.md

These are the instructions to use scalajs-react with cats.effect.{SyncIO,IO} as the default effects, meaning that in all cases where the return type would normally be a CallbackTo or an AsyncCallback you'll now get a SyncIO and IO respectively.

By default, the Callback classes won't even be on the classpath. If you include the callback module you'll get them back on the classpath and you'll be able to provide them directly to scalajs-react in places like component lifecycle callbacks, event handlers, etc. No additional imports required.

No additional imports required. But if have to import import japgolly.scalajs.react.util.EffectCatsEffect._ to get the Dispatch Implicit for SyncIO. Is this an error in the docs or a bug?

build.sbt

enablePlugins(ScalaJSPlugin)
enablePlugins(ScalaJSBundlerPlugin)

val scalaJsReactVer = "2.0.0"
val reactVer = "17.0.2"

libraryDependencies += "com.github.japgolly.scalajs-react" %%% "core-bundle-cats_effect" % scalaJsReactVer

name := "scalajs-react"

version := "0.1"

scalaVersion := "2.13.8"

Compile / npmDependencies ++= Seq(
  "react" -> reactVer,
  "react-dom" -> reactVer
)

scalaJSUseMainModuleInitializer := true
Naftoli Gugenheim
@nafg
kalejami
@kalejami

@nafg yep, I saw that, but I am not really sure how this could help to solve the problem. But maybe I don‘t fully understand the purpose.

The component is already in F but I am not able to mount it because the ScalaComponent Builder won‘t work in F just in DefaultSync and Async

Naftoli Gugenheim
@nafg
I don't know. Maybe at the end of the day the user (application developer) is expected to import a library that defines the default effect type to be whatever
Walter Chang
@weihsiu
i am using hooks with cats effect and everything is going fine until i needed to write my own custom hook. i have an algebra that requires cats.effect.Sync so when i used it in useEffectBy(), returning SyncIO, everything works. when i try to do the same thing in my custom hook, useEffectBy() insist on returning j.s.react.util.Effect.Sync. how can i make it work?
Walter Chang
@weihsiu
i think i figured out what's going on. when using cats effect with scalajs-react, Effect.Sync is c.e.SyncIO and i need to specify it while defining the custom hook. when i did that, everything worked.
Walter Chang
@weihsiu

something curious though: if i write ScalaFnComponent.withHooks[Unit] and then i have to write .customBy(_ => customHook(...)) otherwise i encounter

[error]    |ambiguous implicit arguments: both method unit in object Arg and method ctxProps in object Arg match type japgolly.scalajs.react.hooks.CustomHook.Arg[
[error]    |  japgolly.scalajs.react.hooks.HookCtx.P1[Unit, 
[error]    |    japgolly.scalajs.react.hooks.Hooks.UseState[List[String]]
[error]    |  ]
[error]    |, Unit] of parameter a of method custom in trait Primary
[error] one error found
[error] one error found

however, if i write `ScalaFnComponent.withHooks[String] instead, i can use .custom(customHook(...)) without any problem.

it seems having a props type of Unit is giving .custom() compilation error.

nkgm
@nkgm
Is there a way to get the reusability overlay on functional components?
peterstorm
@peterstorm:matrix.org
[m]
Hello! Does anyone have an example of using scalajs react with cats effect? Just a simple example with a functional component and a main, if possible!
peterstorm
@peterstorm:matrix.org
[m]
weihsiu (Walter Chang): would you mind linking some code? I’m very interested to see how you can use CE with sjsr :)
peterstorm
@peterstorm:matrix.org
[m]
@kalejami: Also interested to hear more about your progress, if you're willing to share :)
Walter Chang
@weihsiu

@peterstorm:matrix.org the repo is private :( but I can show some snippets below:

import cats.effect.*
import cats.syntax.all.*
import japgolly.scalajs.react.*
import japgolly.scalajs.react.vdom.html_<^.*
import org.scalajs.dom.Fetch
import org.scalajs.dom.HttpMethod
import org.scalajs.dom.RequestInit
import org.scalajs.dom.document
import pwasandbox.common.CatsEffects.*

import algebras.ServiceWorkerAlg

object TestClient2 extends IOApp.Simple:
  def sendWebPush(id: String, payload: String): IO[Unit] =
    Async[IO]
      .fromJSPromise(
        Fetch.fetch(
          s"api/send-web-push/$id",
          new RequestInit {
            override val method = HttpMethod.POST
            override val body = payload
          }
        )
      )
      .void

  val webPushComponent = ScalaFnComponent
    .withHooks[Unit]
    .useState(0)
    .useEffectBy((props, count) =>
      IO(
        document.title = s"you clicked ${count.value} times"
      )
    )
    .useState("banana")
    .render((props, count, fruit) =>
      <.div(
        <.button(
          ^.onClick --> sendWebPush("walter", "hello there"),
          "send web push"
        )
      )
    )

  val run = for
    reg <- ServiceWorkerAlg[IO].registerServiceWorker("/worker.js")
    pubKey <- ServiceWorkerAlg[IO].getVapidPublicKey()
    sub <- ServiceWorkerAlg[IO].subscribeWebPush(reg, pubKey)
    _ <- ServiceWorkerAlg[IO].registerWebPush("walter", sub)
    _ <- IO.println("web push registered")
    _ <- IO(
      webPushComponent().renderIntoDOM(document.querySelector("#content"))
    )
  yield ()

It doesn't include the algebras but they are all pretty straight forward tagless final affair.

peterstorm
@peterstorm:matrix.org
[m]
Awesome, thanks! I’ll see if I can figure it out
Roberto Leibman
@rleibman
I actually don't quite know where to ask (I imagine there's some js place, but I shudder at the thought).
I have this app that has a login page (a single page react app) and a main app (another single page react app). The login page is unsecured and the main app is secured. I'm moving away from cookie session security and into using bearer tokens. With cookie security I was able to set it so that only authenticated users had access to the main bundle (i.e. / is secured), but with bearer tokens I don't believe I can add a header to a get, post, redirect, etc. unless I use ajax.
Is there a way I can have an ajax call from within the login app that retrieves a second bundle (with the correct bearer token header) and then passes control to it?
If not, how would you handle it? my easy solution is to just ignore the issue and allow unauthenticated access to the bundle itself, and in this case it's no big deal, but I think that has an unsecure smell I don't like.
elkhadirzyad
@elkhadirzyad
hello everybody, i was using japgolly.scalajs.react.raw from 1.7.7 version, i cant find it in the version 2.0.0, any help ?
Naftoli Gugenheim
@nafg
@elkhadirzyad it was renamed, I think to facade
elkhadirzyad
@elkhadirzyad
@nafg thanks ;)
elkhadirzyad
@elkhadirzyad
hello everybody, in the version 2.0.0 of japgolly.scalajs.react.extra i'm looking for router.Redirect , i can not find it , any help ?
Naftoli Gugenheim
@nafg
@elkhadirzyad can you post your exact code?
andres.r.com
@andresrcom_twitter
do I get it right that instead of using StateSnapshot i can use suzaku-io/diode for state management?
Naftoli Gugenheim
@nafg
You can use both
Also try using hooks