Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • May 18 01:57
    fdietze edited #549
  • May 16 14:44
    cornerman commented #49
  • May 13 07:43

    mergify[bot] on master

    Update scalajs-dom to 2.2.0 (#6… (compare)

  • May 13 07:43
    mergify[bot] closed #616
  • May 13 07:38
    mergify[bot] labeled #616
  • May 13 07:37
    scala-steward opened #616
  • May 12 23:22
    busti commented #49
  • May 12 23:20
    busti commented #49
  • May 01 00:41
    fdietze synchronize #549
  • May 01 00:41

    fdietze on scala3

    Improve workaround comment (compare)

  • May 01 00:32
    fdietze synchronize #549
  • May 01 00:32

    fdietze on scala3

    Move UndefinedModifier into low… Almost fix the last compile err… (compare)

  • Apr 30 23:11
    cornerman synchronize #549
  • Apr 30 23:11

    cornerman on scala3

    potential fix (compare)

  • Apr 28 16:45
    fdietze synchronize #549
  • Apr 28 16:45

    fdietze on scala3

    Scala 3 (compare)

  • Apr 28 15:27
    fdietze synchronize #552
  • Apr 28 15:27

    fdietze on explicit-dependencies

    Add sbt-explicit-dependencies p… (compare)

  • Apr 27 18:29
    cornerman synchronize #549
  • Apr 27 18:29

    cornerman on scala3

    fix compile errors (compare)

Sait Sami Kocataş
@Deliganli
hi everyone, how could I use a canvas, update it with observable (or fs2.Stream)?
johannes karoff
@cornerman
Hi there, what exactly do you want to do with the canvas? They are a bit tricky. I did this to be able to paint a chart inside of it:
    canvas(
      managedElement { elem =>
        val context = elem.asInstanceOf[dom.html.Canvas].getContext("2d").asInstanceOf[org.scalajs.dom.raw.CanvasRenderingContext2D]
        // do something with context

        cancelable(() => /*destroy something*/)
      }
    )
Does that help?
Sait Sami Kocataş
@Deliganli
thanks @cornerman I will try it out when possible :)
I was gonna draw some circles and update their position etc based on an event stream, thinking to do this in a canvas. I have no idea how frontend works honestly, just trying out.
elyphas
@elyphas

Hi, is there a way to not trigger an event when the app start? in this code:

  def getId = ( hdlFiscalPeriod: Observable[Int], hdlFolio: Observable[String])
        .parMapN { case (fiscal_period: Int, folio: String) => (fiscal_period,  folio) }

onInput
            .value
            .debounce(800 milliseconds)
            .transformLifted{ e: Observable[String] =>
              e
                .distinctUntilChanged
                .debounce(800 milliseconds)
                .withLatestFrom(getId) {case (txt@_, idCreditStoreDocument) =>
                    println("#################################")
                    idCreditStoreDocument
                }
} --> repo.eventListItems

The problem I have is that repo.eventListItems is making the query but with one data and I need two.
I tried filter after debounce but it is ignore
I have two inputs and one is by default.
year and number the year is by default so this is year is triggering the event. at the start of the app.

Felix Dietze
@fdietze
:tada: I finally found the time to update the readme and website of outwatch: https://github.com/outwatch/outwatch and https://outwatch.github.io/docs/readme.html
Let me know what you think :)
moritz bust
@busti
Cheers :tada:
moritz bust
@busti
@fdietze The examples look really good
Felix Dietze
@fdietze
Thank you :)
ioleo
@ioleo
Hi, I'm need an event handler to access the elemet's scrollTop position, but can't figure out how. I've tried:
import outwatch._
import outwatch.dsl._
import org.scalajs.dom.raw.HTMLElement
import zio.Task
import zio.interop.catz._

object Header {
  def apply(): HtmlVNode = {
    val logo = Task {
      val isDetached = events.document.onScroll.map { e =>
        val scrollTop = e.target.asInstanceOf[HTMLElement].scrollTop
        println(s"top dist = $scrollTop")
        if (scrollTop > 50) "detached" else "attached"
      }.debounceMillis(250)

      div(
       // ...
         className <- isDetached
       )
    }
    div(logo)
  }
}
ioleo
@ioleo
However it throws at runtime. I guess the asInstanceOf is wrong. What would be the correct way?
ioleo
@ioleo
Alright I see now why it fails e.target is actually HTMLDocument.
ioleo
@ioleo
For future reference, the solution is:

    val fixedOnScroll = events.document.onScroll.debounceMillis(100).map { e =>
      val documentElement = e.target.asInstanceOf[HTMLDocument]
      val scrollDistance = documentElement.documentElement.scrollTop
      if (scrollDistance > 50) VDomModifier(position.fixed, left := "50%", marginLeft := "-250px")
      else VDomModifier(position.relative, left := "auto", marginLeft := "auto")
    }

    div(
      // ...
      fixedOnScroll
    )
moritz bust
@busti
Glad to hear that you found a solution.
Aleksandr
@steakoverflow-me
Hello to all!

Hi, I'm need an event handler to access the elemet's scrollTop position, but can't figure out how. I've tried:

import outwatch._
import outwatch.dsl._
import org.scalajs.dom.raw.HTMLElement
import zio.Task
import zio.interop.catz._

object Header {
  def apply(): HtmlVNode = {
    val logo = Task {
      val isDetached = events.document.onScroll.map { e =>
        val scrollTop = e.target.asInstanceOf[HTMLElement].scrollTop
        println(s"top dist = $scrollTop")
        if (scrollTop > 50) "detached" else "attached"
      }.debounceMillis(250)

      div(
       // ...
         className <- isDetached
       )
    }
    div(logo)
  }
}

I can't get how you made it to work? I mean div(logo) when logo is the zio.Task. For me there is a error like

Found: (logo : zio.Task[outwatch.HtmlVNode]) 
Required: outwatch.VDomModifier
Felix Dietze
@fdietze
@steakoverflow-me I think ZIO Task is not supported yet. Use IO or Monix Task instead. @cornerman used to work on ZIO support, but it's not merged yet: outwatch/outwatch#442
johannes karoff
@cornerman
You should be able to use https://github.com/zio/interop-cats, because it gives you an Effect instance for zio tasks. You get this implicit via the import: import zio.interop.catz._. Though you need an implicit runtime in the scope.
As @fdietze pointed out, we are currently working on a better zio support in the PR, but i think, it might need some more time to be merged. Until then interop-cats is the way to go.
@steakoverflow-me ^
moritz bust
@busti
I can confirm what @cornerman said about the implicit runtime. I have been toying around with zio for some time now aswell and it works quite well with outwatch.
Try adding this like to your scope for example:
implicit def runtime = Runtime.default
Not the purest thing, but it does the job for getting started.
moritz bust
@busti

@cornerman I have made some progress implementing what I was talking about recently.
Please take a look at https://github.com/busti/hummingbird
I have started implementing the concept into outwatch on this branch: https://github.com/busti/outwatch/tree/integrate_hummingbird

Unfortunately my current implementation is flawed. Since using the library requires passing around instances of the base trait and not implementations of it, there will be instances of them at every call. Value-Classes don't work in this case.

I will probably try to refactor what I have so far to remove that limitation.
But what do you think of the general idea and of how the interface is designed?

bblfish
@bblfish:matrix.org
[m]
Hi, has there been a recent blog post or talk on Outwatch since the 2017 talk, giving some idea of how it has evolved?
bblfish
@bblfish:matrix.org
[m]
btw. where does the name OutWatch come from? My first impression was that it could be Australian, something to do with the Outback ...
bblfish
@bblfish:matrix.org
[m]
I used scalajs-react 6-7 years ago. I guess outwatch is more closely designed for scala and has a number of advantages. Also I was wondering how it compared with Laminar. I wonder if Laminar making changes directly to the browser actually speeds things up or slows things down.
bblfish
@bblfish:matrix.org
[m]
going through the docs. Very helpful.
bblfish
@bblfish:matrix.org
[m]

Laminar's library Airstream has the following to say:

Some reactive UI libraries such as Outwatch give you a way to bind the lifecycle of subscriptions to the lifecycle of corresponding UI components, and that automatically kills the subscription (removes the observer) when the UI component it relates to is destroyed. However, the underlying streaming libraries that such UI libraries use have no concept of such binding, and so in those libraries you can manually call stream.addObserver and create a subscription that will not be automatically killed when the UI component that it conceptually relates to is unmounted.

Is that still true? Is that easy to fix?

bblfish
@bblfish:matrix.org
[m]
I watched your 2017 talk in full now.
moritz bust
@busti

@bblfish:matrix.org I was personally drawn to outwach because it combined the syntax of scalatags with monix, a library I had already used before. We have since replaced monix with an abstraction that makes it possible to use other reactive programming libraries such as scala.Rx and perhaps fs2, we have also adopted the F[_] pattern for effects, which basically allows me to share large portions of code between my backend server and the frontend and something that makes the library stand out more than it did when I first started using it.
There is still a lot of work going on regarding the streaming and effect abstraction parts though to allow for more library support such as zio and zio-streams.

I must admit that I am not as familiar with laminar as I want to be, but the whole ownership concept is super interesting and definitely something I want to take a deeper dive into in the future.
There is probably some interesting stuff that laminar does that we cannot do as easily since it's very tightly integrated with it's own streaming lib.

Since we want to support all kinds of streaming libraries handling lifecycles outside of those that arise from the DOM is outside our scope and must be handled by those libraries. I.e. I would love to know how fs2 solves the problems the airstream docs are talking about.

I personally like the F[_] functional programming style for libraries which is why I avoided using laminar in the past and I would like to migrate my front-end to zio in the future which is why I am looking into supporting it at the moment.

That being said, interacting with the dom directly is really interesting and probably somewhat faster. We currently use the javascript v-dom library (snabbdom)[https://github.com/snabbdom/snabbdom] for dom interaction.
I have some ideas on how we could model dom diffing directly in outwatch I never did anything specific.

bblfish
@bblfish:matrix.org
[m]
Thanks for the updates.
@busti Re the speed of updating the DOM directly or virtually, I can see arguments going both ways. If the events can be directed to small parts of the virtual dom so that it does not need to be recomputed completely, and if writing the diff can be done more efficiently in one go. rather than a lot of small changes, I could see the VDOM method being faster.
I don't know much about zio - I have been using akka to tell the truth, but that won't work that well on the client :-)
I need to try out one library to get going. I was thinking of cats effects. We used scalaz in banana-rdf 8 years ago.
The choice of effects libs in Outwatch could be very useful.
bblfish
@bblfish:matrix.org
[m]
Btw. having your own diffing lib is a big +point as I'd like to not depend on FB tech, since we are building https://www.youtube.com/watch?v=lgu8NUm5Zxk
bblfish
@bblfish:matrix.org
[m]
to build Solid apps we need the client to make a lot of requests around the web, and update the UI as new information becomes available.
bblfish
@bblfish:matrix.org
[m]
btw, are there any good talks on using scala http libs and effect systems in the browser to fetch resources etc...? I can't find much out there.
bblfish
@bblfish:matrix.org
[m]
I could not find outwatch on maven central. The doc says to use the latest commit. Is that some part of sbt that I don't know that compiles stuff from github?
  "com.github.outwatch.outwatch" %%% "outwatch" % "e02749756fdb3bad7fb92250ed8a2bfab0f69ea7"
I see we have "https://jitpack.io"
bblfish
@bblfish:matrix.org
[m]
I am trying to upgrade the demo example to Scala 3. I tried this https://github.com/bblfish/SolidCtrlApp but without got the following error
[success] Total time: 1 s, completed 7 Nov 2021, 21:43:34
[error] [webpack-cli] Unable to load '@webpack-cli/serve' command
[error] [webpack-cli] TypeError: options.forEach is not a function
[error]     at WebpackCLI.makeCommand (/Volumes/Dev/Programming/Scala3/solidapp/target/scala-3.1.0/scalajs-bundler/main/node_modules/webpack-cli/lib/webpack-cli.js:108:21)
[error]     at ServeCommand.apply (/Volumes/Dev/Programming/Scala3/solidapp/target/scala-3.1.0/scalajs-bundler/main/node_modules/@webpack-cli/serve/lib/index.js:41:19)
bblfish
@bblfish:matrix.org
[m]
I guess it is not a problem with scala 3.x because going down to 2.13 I get the same problem. Perhaps the version of webpack...
johannes karoff
@cornerman
@bblfish:matrix.org Hmm, I also do not get it to work with webpack5 and the scalajs-bundler rc1. Somehow there is some incompatible version of webpack-cli and webpack-cli/serve, with that version configuration.
Do you need webpack 5 for a specific reason?
bblfish
@bblfish:matrix.org
[m]
No, I was just trying to get the latest.
I found this https://youtrack.jetbrains.com/issue/KT-49124
But I think I am using 4.9.1
I am a bit slow because I don't really know the JS ecosystem tools
johannes karoff
@cornerman
If I force the deps webpack-cli -> 4.9.1 and @webpack-cli/serve -> 1.6.0, I get another runtime error:
[error] [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
[error]  - options has an unknown property 'inline'. These properties are valid:
[error]    object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
Something is incompatible there. Hmm.
I am still using webpack 4 in my projects without a problem. But might be worth asking in the scalajs-bundler channels.
bblfish
@bblfish:matrix.org
[m]
do you have a public git repo with a config that is working? (idally for scala3)
I don't really need the latest right now, I just need to get going :-)