i think i will use the img

loads

event workaround whenver i need to get something loaded once the dom is ready seems like the browser does not give you any callback for once a specific domElement is constructed.. only the whole dom at once

div("mountpoint", id = "map-mountpoint"){
        img(id = "map-loading-screen") {
            // there nees to be something to load for the event to fire
            src("<https://images.squarespace-cdn.com/content/v1/571fc5edd210b89083925aba/1538386611004-KSNMFIBVFZVLZ87ZG2Y8/ke17ZwdGBToddI8pDm48kCAcKCAp1mJfKUNHInBbGg57gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1USLl2-GtoEZOTuQCER9og-NsW-mZEHbjAwvLbYwUUwze4mIkeL7oL2X-WUQoOqRAoA/ShibuyaRiver.jpg?format=2500w>")
            loads.map { event: Event ->
                console.log("node:", domNode)
                console.log("event:", event)
                console.log("parent:", domNode.parentElement) // do something with this
                domNode.remove() // remove the image
            }.watch()
        }
    }

i doubt that fritz could make ths much prettier or easier to use but i hope it will anyways

How could one add another component from ChakraUI? Is the only way by trying to guess what html/css/js they might have used in all variation of their components? Just wondering why couldn't fritz2 just base themselves on ChakraUI's elements themselves and not re-invent the wheel? I'm sure there's a good reason, it just seems harder to add components for those that are rusty in css and js...

Sorry to by pushy, but is there any ETA for IR support? I've seen some commits being pushed for that, so curious when the next version is planned to surface?

we have a Substore containing

List<String>

and a

.renderEach

seems to not work on it.. did we overlook anything ? our goal is to have a varaible amount of text fields that we can add or remove with a +/- button in a form seems like .renderEach only gets called initally for the last value in the list and does not emit any html i am wondering if we imported the wrong function it kinda works if we do

roles.data.renderEach

but now we have to make the update calls go though the store that contains the list of them and need to figure out which one we were editing, probably each if we just make a data class for it that contains the value and a unique id, but that seems like .. unnecessary complexity

Been thinking that it'd be nice to have fritz2 public api available in common sourceSet. This would future proof the framework for potential expansion into kotlin wasm once that's stable

Is there any place where people save “fritz2 webcomponents” or such? Would be cool! I’m gonna create a simple image-slider myself and thought I might as well open-source it for people to use.

I feel that current styling api is way too verbose and makes code look very ugly. I'd strongly recommend reconsidering it now while you still can, with readability in mind. Thoughts?

Hey just hit a few timeouts with jcenter. The fritz2 artifacts seem to still depend on that and also the fritz2 plugin defines that as the defailt. Have you thought about where to host that next?

https://docs.fritz2.dev/StylingDSL.html this seems to be not allowed in kotlin syntax? 2 trailing lambda blocks seems to not be allowed

🎉 We are happy to announce a new version of fritz2! 🎉 The version 0.9 includes • improved API • improved performance & memory consumption • support Kotlin 1.4.30 & IR compiler • improved components (alpha) Here is the full release-note on github

Fritz2 components in action: kamp.ml

fritz2 is now available on MavenCentral 🎉 https://search.maven.org/search?q=g:dev.fritz2 Thank you for your help on that! https://github.com/jwstegemann/fritz2/issues/284

Been working with fritz2 whole weekend, and I gotta say, my main pressure point was state handling with stores. I'm sure it's just me not understanding the concept in full, so could you please extend that part of the docs going into a bit more advanced topics such as "thunks", asyncronous composite actions, merging store flows into composite flow, rendering an element that depends on multiple stores, etc...

I am using bootstrap styling in some parts of my app (v5.0.0-beta1) and just upgraded fritz2 to v0.9.1. Now I get this error related to the fritz2 styling. Does not break anything, but you might have a look at it.

style.kt?2304:31 unable to insert rule in stylesheet: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule ':-moz-ui-invalid{box-shadow:none;}'. DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule ':-moz-ui-invalid{box-shadow:none;}'.
    at eval (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:3697:33)
    at Array.eval (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:3707:68)
    at eval (webpack-internal:///../../node_modules/stylis/dist/stylis.mjs:68:5957)
    at se (webpack-internal:///../../node_modules/stylis/dist/stylis.mjs:68:5651)
    at Styling.addDynamicCss_puj7f4$ (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:3763:7)
    at Styling.resetCss_61zpoe$ (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:3756:10)
    at resetCss (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:3790:27)
    at new Theme$Companion (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:11092:5)
    at Theme$Companion_getInstance (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:11109:7)
    at SpacesContext.left_bcpvvc$ (webpack-internal:///./kotlin-dce-dev/fritz2-styling-jsLegacy.js:2926:16)
eval @ style.kt?2304:31

message has been deleted

message has been deleted

Hey, this might come handy to you as well. I've written a small utility function that helps in keeping styled component DSL consistent with fritz2 components lib DSL (also I find this a lot more readable):

typealias StyledComponent<E> = RenderContext.(style: BoxParams.() -> Unit, block: E.() -> Unit) -> E
fun <E> styled(component: BasicComponent<E>): StyledComponent<E> = { style, block ->
  (component.styled(styling = style))(block)
}

//usage
fun RenderContext.preview() {
  styled(::div)({
   // div style
  }) {
   // div code and inner layout
    div {
      // child unstyled div
    } 
  }
}

🎉 We release a new version of our fritz2 KitchenSink demo! 🎉 It is based on our latest minor release 0.9.1 https://components.fritz2.dev/#Welcome It is currently on alpha status and more will come 😊 The source code of the site is provided on github

Both releases of Fritz2 (0.9 and 0.9.1) are broken. None of the libraries can be imported on the Kotlin JS side. This issue doesn't occur when using Fritz2 v0.8.

Nice things to know when using fritz2 ;) https://www.meetup.com/Virtual-Kotlin-User-Group/events/276886331/?rv=me1&_xtd=gatlbWFpbF9jbGlja9oAJDdjOTJiMDdlLTA0ZTAtNDkwZi05NGQxLTk5N2I1ZTRmZWE2NQ&_af=event&_af_eid=276886331

I want to get rid of any custom css in my fritz2 project, but could not find a way to do "transform: translate(-50%, 0%)" in the fritz2 styling universe. Is there a way to do that yet?

Hi All, Small Bounty Project! I think Kotlin is pretty cool and I am keen to use it in a multiplatform project I'm porting from another stack, I'd like to use: - Ktor in the backend - Kotlin/JS for React, Kvision or Fritz2 for front end. - Styling with Tailwind UI (not just Tailwind CSS) - Some sort of OpenID Auth (Auth0, Firebase Authentication.... don't really care which) I need a starter project built please :) The reason I am UI framework/library agnostic is simply because they all look good to me, but having a working starter like this should be all I need to get going. But this type of project bootstrapping always takes me longer than I would like. In fact, It's my view that the Kotlin space needs more of these types of starters to entice new developers into the world of Kotlin. To that end, I'd like to "sponsor" someone who could whip this sort of thing up, and either put it in their GitHub/Lab or send it someone else who is hosting starters like this (or me). Probably a tagged version at the basic multiplatform stage with css, post-css and a demo page all set up (because Tailwind can be very large, so dist needs to be built with care) And then another tag with auth added, as some may not need it or prefer to tackle auth in another way. I can spare $200 to $300 (USD) to sponsor someone to knock this out. And I can pay either with paypal.me or Crypto (just not ETH, gas costs are nuts right now!). Anyone interested!? I'm going to drop this message in a few channels, apologies for the spam!

What are good libraries / approaches for dealing with localization of texts for Fritz2

Hi, I'm here to discuss https://github.com/jwstegemann/fritz2/issues/444. I already has

GraphQLEntityRepository

and

GraphQLQueryRepository

mostly implemented (it works with our backend). And I have some DSL for writing queries (but it's uglier then I hoped for). So, what are some ideas/things you'd like to have it implemented?

https://github.com/jwstegemann/fritz2/pull/530 just worked an issue mentioned in this PR related to store.data.render by surrounding it with a div as suggested . Looks like this will be a nice one to get in. I was seeing some UnSupportedOperation related errors in the logs and was having some weirdness with things showing that should not be showing. Adding the div fixed it. Really appreciating all the hard work you are doing. 👍

Hello, I've just started doing something with fritz2, and I've used it to build an interactive web-based REPL client for a programming language I've been working on.

I'm still learning, and the code is, I'm sure, horrible but I have one specific issue I haven't been able to work around, even with bad code.

Basically, as the user is typing commands and the results are being displayed, once I reach the end of the screen I need to make sure the content is scrolled all the way to the bottom one another entry has been added to the end. If I do the scrolling as I add the entry, it won't work because at that time the DOM has not been updated yet.

So basically I need a way to be notified when the DOM has been synchronised with my store so that I can scroll the screen at that time.