Double, and therefore the partial input is blocked.
onInput.mapToValue.map(_.toDouble) --> valueUpdater, which had the desired user behavior, but threw transient errors as exceptions in the console. It doesn't seem like I want that either.
Either[String, Double] instead of Doubles.
item is a Signal, not sure if it would work with a stream. I need to add some helper for this in the library itself... val inputVar = Var("")
input(
typ := "text",
controlled(
value <-- inputVar.signal,
onInput.mapToValue.filter(_.toDoubleOption.nonEmpty) --> inputVar,
),
item.map(_.value.toString) --> inputVar,
inputVar.signal --> { valueStr =>
valueStr.toDoubleOption.foreach(valueUpdater.onNext)
}
).filter(_.toDoubleOption.nonEmpty)
3 replies
double.toString doesn't return exactly the same string:
def inputForDouble(valueSignal: Signal[Double], valueUpdater: Observer[Double]): Input = {
val strValue = Var[String]("")
input(
typ := "text",
controlled(
value <-- strValue.signal,
onInput.mapToValue --> strValue,
),
valueSignal --> strValue.updater[Double] { (prevStr, newValue) =>
if prevStr.toDoubleOption == Some(newValue) then prevStr
else newValue.toString
},
strValue.signal --> { valueStr =>
valueStr.toDoubleOption.foreach(valueUpdater.onNext)
},
)
}
10 replies
Hey all. Could it be that Laminar (or better, the dom library), is missing the title tag in svg, i.e. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title
If so, how would I create a custom svg element on the fly. If not, I apologize for being blind, but where is it? :)
svg.svgTag("title", false)("your title here") seems to work \o/
import com.raquo.laminar.api.L._
svg.customSvgTag("title")("the text you want to show")1) Don't bother with live-reloading the chosen language. Bunch of complexity and overhead for nothing. Change the language via a full page reload if needed.
2) Pick some plain JS library (or a translation service which offers a JS SDK) that can load translated strings from a JSON file or something like that, so that you don't need to generate N webpack bundles, one for each language.
3) Pick some library / service that lets you use template vars in translation strings, and ideally provide comments to translators for each string you need to translate
4) You will probably need i18n on the backend as well, but you don't want to expose backend strings to the frontend
Now for actual libraries / services, I don't know, it's been a while since I needed that.
I have some issue to combine onClick with a Signal, I currently have the following code:
button(
typ := "submit",
cls.toggle("bell-fill") <-- isSubscribed,
cls.toggle("bell") <-- isSubscribed.map(!_),
cls := "w-6 bg-center pointer",
onClick.mapTo(isSubscribed) --> (clicked =>
if (clicked) unsubscribe(domainName.now, _ => requestTrigger.emit(()))
else subscribe(domainName.now, _ => requestTrigger.emit(()))
),
""
)This obviously does not work because isSubscribed is a Signal[Boolean]
A solution I had was to turn this 'inside out' and map a signal to an element, like that:
domainName.combineWith(isSubscribed).map { case (name, subscribed) =>
button(
typ := "submit",
cls.toggle("bell-fill") <-- isSubscribed,
cls.toggle("bell") <-- isSubscribed.map(!_),
cls := "w-6 bg-center pointer",
onClick.mapTo(subscribed) --> (clicked =>
if (clicked) unsubscribe(name, _ => requestTrigger.emit(()))
else subscribe(name, _ => requestTrigger.emit(()))
),
""
)
}But this feels wrong
What would be the proper approach here ?
You're right, that's wrong because you will be re-creating the button element every time your signal emits. You don't want that.
Instead, you want composeEvents so that you can use all stream operators, something like:
composeEvents(onClick)(_.sample(isSubscribed)) --> (clicked => ...)Alternatively:
inContext { _.events(onClick).sample(isSubscribed) --> (clicked => ...) }Note that the sample operator will trigger the observer only when the click happens, not when isSubscribed signal is updated. combineWithFn is another option.
33 replies
What is the order mounting happens in? I would assume parents before siblings and siblings at the top/left before siblings at the bottom/right. I.e.
val child1 = div()
val child2 = div()
val parent = div(child1, child2)will mount in order parent, child1, child2 when/if parent is eventually mounted.
Is that correct?
When you've built that val parent, you now have a parent div element with two children div-s in it. However, nothing is mounted yet, and no subscriptions have been activated.
Once you render() that parent div (or add it as a child to an already mounted div), that parent div will become mounted too, and all of its subscriptions (-->, <--, onMount*, etc.) will become activated.
Subscriptions created by modifiers (child elements are also modifiers) are activated in the same order as said modifiers appear in the Laminar element tree, depth-first. So yes, your last message is the correct and expected behavior.