Here are all of my imports just in case https://pastebin.com/3zm6eZTg
No way =( It compiles after addition of this:
def scheduler: Scheduler = Scheduler.global
def options: IO.Options = IO.defaultOptions.withSchedulerFeatures(scheduler)
implicit lazy val catsEffect: ConcurrentEffect[Task] =
new CatsConcurrentEffectForTask()(scheduler, options)But nothing on the screen, unfortunately. Even no input field.
Hello there. I'm trying to get into outwatch. It seems to me that the docs are a bit outdated, what's the most recent/best source?
In particular, at the moment I want to get a simple example to work:
import cats.effect._
import outwatch._
import outwatch.dsl._
import outwatch.reactive.handler._
import outwatch.util._
import scala.concurrent.ExecutionContext.Implicits.global
object Main extends IOApp {
private val app = for {
hdl <- Handler.createF[IO]("")
qry <- IO.pure(hdl.map(query => Http.Request(s"https://someurl.org?query=$query")))
res <- IO(Http.get(qry).map(_.body))
xml <- IO.pure(div(
input(onInput.value --> hdl),
span(child <-- res)
))
rnd <- OutWatch.renderInto[IO]("#app", xml)
} yield rnd
override def run(args: List[String]): IO[ExitCode] =
app.as(ExitCode.Success)
}but child is not available. Am I missing an import? Or did something change? Thanks!
child <-- and just put the observable into the element directly: span(res)
Source and a typeclass Sink. You should be able to implement them with Stream and Actor respectively. Then you can use them in the outwatch dsl.
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*/)
}
)
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.eventListItemsThe 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.
Let me know what you think :)
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)
}
}
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
)
Hi, I'm need an event handler to access the elemet's
scrollTopposition, 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.VDomModifierEffect 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.
Try adding this like to your scope for example:
implicit def runtime = Runtime.defaultNot the purest thing, but it does the job for getting started.
@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?
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?