Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 13 21:20
    scala-steward opened #233
  • Dec 12 02:52

    Atry on master

    Update scalafmt-core to 2.3.2 Merge pull request #230 from sc… (compare)

  • Dec 12 02:52
    Atry closed #230
  • Dec 12 02:50
    scala-steward opened #232
  • Dec 12 02:48
    Atry closed #218
  • Dec 12 02:47
    scala-steward opened #231
  • Dec 12 02:47
    scala-steward opened #230
  • Dec 12 02:47
    scala-steward opened #229
  • Dec 12 02:46
    scala-steward opened #228
  • Dec 12 02:46
    scala-steward opened #227
  • Dec 12 02:46
    scala-steward opened #226
  • Dec 07 10:20
    Atry commented #175
  • Dec 07 10:02
    adrobisch commented #175
  • Dec 01 21:52
    Atry commented #175
  • Dec 01 12:39
    adrobisch commented #175
  • Nov 24 09:02
    adrobisch commented #175
  • Nov 24 05:37
    Atry commented #175
  • Nov 24 03:38
    Atry commented #175
  • Nov 23 21:44
    adrobisch commented #175
  • Nov 23 21:44
    adrobisch commented #175
Wojtek Pituła
@Krever

thanks. Another thing,: how this should be expressed correctly:

class ProcessDefsSelect(allDefs: BindingSeq[ProcessDefinition], selected: Var[Option[ProcessDefinition]]) {

  @dom
  def render: Binding[html.Select] = {
    <select class="ui dropdown" onchange={e: Event => selected.value = allDefs.bind.find(_.id == e.target.asInstanceOf[html.Select].value)} >
      {for (pDef <- allDefs) yield {
      <option value={pDef.id} selected={selected.bind.exists(_.id == pDef.id)} >
        {pDef.name}
      </option>
    }}
    </select>
  }

}

simple select component. This impl doesnt work due to allDefs.bind invoked in callback function...

Wojtek Pituła
@Krever
assigning allDefs.bind to variable outside callback function works fine
Mustafa Kuscu
@mcku
I have a question https://stackoverflow.com/questions/53119126/binding-scala-component-to-string-conversion. In this Gitter channel, there was a discussion on how to convert a scalatags typed tag to string. I need a similar way to do that for a Binding[Element].
Mustafa Kuscu
@mcku
Would it be possible to use a third party library like that alongside with binding.scala? As an example, consider the example setting content of popup: https://github.com/fancellu/scalajs-leaflet/blob/master/example/src/main/scala/example/Leaflet2.scala#L25
How can i set dynamic content in the popup that depends on binding.scala content?
Maybe an idea could be to build a modified leaflet library that avoids the builders and promotes binding.scala concepts, which might be a novel approach to mapping.
Leonid Turnaev
@glmars
Why are you thinking it isn't possible? I suppose, you can try and if you will have a concrete problem, you can write stackoverflow question. As I know there is a link in Readme to an example project of the using Google maps with Binding.scala which can be helpful for you.
Mustafa Kuscu
@mcku
Well, i like using leaflet, my other project is using leaflet. The binding.scala + google maps tutorial has binding.scala components for the search box related data binding only. The map is bound to the dom by the leaflet.js itself. Therefore it is outside of the managed code, the leaflet code updates the dom directly. Therefore the problem becomes how to integrate these together. This is a similar problem in the react world, too. In the react world i was using react-leaflet for managing the lifecycle of the map's sub components (https://react-leaflet.js.org/docs/en/intro.html#lifecycle-process). But here i don't know if it is possible to extend or customize the life cycle of dom components, the map in particular, and relate them to those of the binding.scala components. It may be just easier to re-implement leaflet.js in binding.scala, because leaflet.js includes lots of custom event handling stuff which is simply redundant in the existing of binding.scala.
Mustafa Kuscu
@mcku

For instance, when a map is initialized by leaflet, the container that is associated with the map is 'marked', therefore after a re-rendering caused by .bind, the map may become unusable because it won't contain leaflet.js-originated stuff... This one can be avoided by careful coding.

But one other thing is to use a dom annotated component's value within the non-binding-aware, external library. This one i still don't know. extfunc(x.bind) would this be recalculated after x changes?

Mustafa Kuscu
@mcku

i realize that i might have been missing a basic feature until now. :/ i don't know how others use watch but watch does this. If i put the external func in Binding{} and add watch, it works. Binding{extfunc(x.bind)}.watch()

let me go and break my head.. (:|)

Mustafa Kuscu
@mcku
One more question. Let's say we have a single page app (SPA) and would like to use a legacy library that is jQuery based, such that some random elements need to be initialized by some jQuery plugin. The SPA renders totally different layouts depending on some conditions (like authentication), therefore it is not guaranteed after the first page load the elements are attached to the DOM. Is there a way to attach an initializer to a div just for this purpose, so that wherever the div is being used, it is going to get the initializer invoked? (If you know an answer and are willing to answer on SO, I can enter a question there, too.)
Mustafa Kuscu
@mcku
Just to make things clear, even workarounds like this after where dom.render() gets called did not help
def applyOnMount(selector: String, f: () => Unit):Unit = {
    val elemFound: Boolean = org.scalajs.dom.document.body.querySelectorAll(selector).length > 0
    if (!elemFound) {
      println(s"waiting for elem $selector")
      js.timers.setTimeout(Duration.seconds(1000).milliseconds) {
        println(s"recursing for $selector")
        applyOnMount(selector,f)
      }
    } else {
      println(s"applying on elem $selector")
      f
    }
  }
Kahli Burke
@kahliburke
I’d investigate
杨博 (Yang Bo)
@Atry
Have you search the answer of your question on StackOverflow?
Mustafa Kuscu
@mcku
Thanks for the recommendation, @kahliburke, although i was trying to stay within the binding.scala tooling like watch(),.. Would it be possible to implement it using watch()? I have not tested MutationObserver before, i will consider using it instead of re-implementing some existing components in binding.scala.
Mustafa Kuscu
@mcku
@Atry got your point. A similar example I was following was @sadhen's here: http://sadhen.com/blog/2017/01/02/binding-with-semantic.html
Mustafa Kuscu
@mcku
When things build up including routing, ui navigation, authentication, working with local and remote data and futurebindings, social media logins, google/leaflet maps, etc, some sort of best practices become necessary. It may be a good idea to keep a binding.scala starter project with up to date best practices for reference and building shared experience. I don't mind offering a starter skeleton for going through common scrutiny if it helps...
杨博 (Yang Bo)
@Atry
:+1:
JohnZorn
@nakedcity
Hey guys any advice on any redux like for scala specially if I’m gonna use Binding.cala?
JohnZorn
@nakedcity
@channel
Pascal Mengelt
@pme123
@nakedcity here I always have to reference my little blog;) https://pme123.github.io/scala-adapters/development/binding-scala-redux/
Mustafa Kuscu
@mcku
@kahliburke thanks for the idea. Here is a gist. https://gist.github.com/mcku/9c360d39dba7915391207f84d1bd0680 . Using MutationObserver, I am able to use jQuery based semantic-ui components without rewriting them in binding.scala from scratch.
Mustafa Kuscu
@mcku
It is easy to rewrite simple ones but a complex dropdown component was an interesting and messy experiment for me.
Leonid Turnaev
@glmars
@nakedcity why you need it? We switched from something like Redux+React to Binding.scala, because it replaces both. We are happy with frontend now!
JohnZorn
@nakedcity
@glmars I do agree about there is not need but still I like to use some kinda mechanism where the state is centralize
I dont mind to switch to anything that does some state management I was even thinking about https://github.com/suzaku-io/diode
when it comes to redux the only that I really like of it is the dev tools which I have found very handy for following the state of the app
I was just asking what is the common practice when you work with Scala.Binding
杨博 (Yang Bo)
@Atry
There is a DEMO that demonstrates how to build a center state tree similar to Redux https://scalafiddle.io/sf/o5fWdS3/3
Note that subview1 and subview2 accept Binding as parameters instead of raw values, in order to partially rendering subviews that when only parts of store are changed.
In the above example, there is only one Var used in the entire application.
Mustafa Kuscu
@mcku
@nakedcity I also switched from a react+redux app to binding.scala. For keeping alignment with the old project, I am maintaining an actions.scala and a reducers.scala. I think the type safe copy (which @atry mentioned the demo) is the killer feature (would it be a bold statement to claim that it is something JS/TS world never had?) and can implement redux very easily. and you don't code on the overly-async javascript, instead scala and execution order is not an issue afaik (once upon a time I was banging my head with promise chains). Then the redux is not necessary because the state is already there in a stable manner. In JS world keeping a global state would be very unstable and would be hard to detect and reason on who modifies what. But simply you don't have such language-originated deficiencies in ScalaJs. That's a summary of my overall impression so far.
The redux middlewares have changed multiple times within the last 2 years. There was redux-thunk 2 years ago now they have some other thing (I can't remember). Now if you start you completely start with a different paradigm, and I don't expect a stable approach to develop there in the short or middle term.
JohnZorn
@nakedcity
Thanks for all the answers but still the question is what are you guys normally using diode, raw objects? I dont care about redux
Leonid Turnaev
@glmars
Yes. I used. Diode is the same as React (+ TypeScript :smile: ), only difference is Scala language.
Leonid Turnaev
@glmars

@mcku

Using MutationObserver, I am able to use jQuery based semantic-ui components without rewriting them in binding.scala from scratch

Could you check something like this: https://gist.github.com/glmars/a597f7c28931a38e2e9b3262279889a9 ?
The main ideas are using Element based selector in jQuery instead of string based and initializing of control right after creation.

Leonid Turnaev
@glmars
And if I my guess is correct you are using outdated jQuery facade (https://github.com/sjrd/scala-js-jquery)
There is new one: https://github.com/jducoeur/jquery-facade
Mustafa Kuscu
@mcku
I agree. I should admit that I never wanted to enter the jQuery zone. Because there already existed a separate semantic-ui project called stardust, which avoids jQuery completely. It is possible to inspire from that (which i did, too) and rewrite the components, as they did for the stardust. (http://react.semantic-ui.com, and for the dropdown, https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js ) But the rewrite can be an exhaustive task.
But the problem with the jQuery part is it only answers to queries after the element is on the dom. Therefore in a binding method, the element is still not mounted on the actual dom, if i understand it correctly. Nevertheless, i did not know this before and i have tried what you have suggested some time ago, and did not work and this is the conclusion i got after inspecting at the browser debugger.
Mustafa Kuscu
@mcku
There is also the udash jQuery facade. I was using that until i discovered that it was including a bootstrap dropdown (but later i partially realized that it was coming from udash-bootstrap), therefore removed it.
Mustafa Kuscu
@mcku
btw, i am using udash i18n for migrating existing translations from lingui. but modified it a little bit, so that {t("hello").bind} gives the correct translation. The idea came from here: https://lingui.js.org/tutorials/react-patterns.html#id1 and i think it is good, and that idea can be ported to scalajs
i think part of the work would be to write a sbt plugin that includes a macro to preprocess the code and extract messages, (lingui js uses babel for that), and a translating function that can utilize udash's translation provider and combining that with binding.scala. the result is very efficient and readable.
but i don't have the plugin yet. just the idea and a similar concept for the plugin of scalingua (https://github.com/makkarpov/scalingua) unfortunately i could not make it work in scalajs
Mustafa Kuscu
@mcku
for the udash translation wrapper, most of it is here https://gist.github.com/mcku/dd71065a93bf409e8688e75734fde6ce
JohnZorn
@nakedcity
@glmars dude do you have some example of integreation with diode?
Leonid Turnaev
@glmars
Integration with what? We didn't use diode with Binding.scala, before we switched to Binding.scala completely our stack was diode+scalajs-react.
Leonid Turnaev
@glmars
@mcku "i have tried what you have suggested some time ago, and did not work" Are you sure what problem was in initialization and not in missing watch/render/bind or something like this? In our case initialization after creation works well with https://getmdl.io/ and https://materializecss.com
杨博 (Yang Bo)
@Atry
@mcku Your example for translation is impressive!
JohnZorn
@nakedcity
@glmars do you have an example of your current setup? I want to see how is your architecture specially for Vos
JohnZorn
@nakedcity
Do you guys know some project like storybook or cosmos that you can easily plug-in with Binding-scala