I want to implement @Lenses data class in anotherMain rather than in commonMain. How can I do that. Lenses data classes are not being recongnized outside of commonMain automatically.

A few weeks ago, we presented our approach to Full Stack Kotlin at the virtual kotlin user group. In it we demo a Fritz2 based example application which features an in house wrapper to do localization of the UI using Mozilla's fluent-js. As promised during the presentation, we now open sourced our Kotlin adapter for this. It works great with Fritz2 of course. But you may also be able to use it with other reactive web frameworks. The translations are represented as flows that update as you load different fluent files with translations. You can find the project here: https://github.com/formation-res/fluent-kotlin We'd be interested in any feedback. We think this is a great way to do localization with Fritz2. If you missed the presentation, you can find it here: I'll also be presenting this at KKON next week. https://rheinwerk-kkon.de/programm/

Hey Fritz folks, any suggestions on how to resolve possible KSP issues? I'm having a couple of problems. One, calling handlers directly (outside of a render) doesn't seem to work. As well, some of the code samples (like passing a parameter to a Handler<String>) doesn't compile. I'm on an M2 MB Air running Ventura. I'm using Kotlin 1.8.0 and KSP 1.8.10-1.0.9

😉 https://kotlinlang.slack.com/archives/CDFP59223/p1683766808976339

Hi,

How can I use fritz2 with websocket with stomp protocol ?

Thanks for merging my PR for updating 0.14. I just tested with our app and everything works with kotlin 1.9.0 now. Even the k2 compiler works! And it's quite a nice upgrade in compiler performance.

actually, k2 seems to still have issues with our project. Broke immediately on incremental recompilation.

Hey, Jilles! Thank you! Can you give us the details? The #k2-early-adopters channel would be best.

seems we're running into this one: https://youtrack.jetbrains.com/issue/KT-60601/K2-Overload-resolution-ambiguity-between-candidates-inline-method

Ah nice, I didnt realized there was a channel specific to Fritz2 here - does anyone in wider web ecosystem have an opinions on comparing it to other fine grain reactivity framework popular outside of KotlinJS like SolidJS., From glancing it seems more opinionated and a thinner core API (no createResource, createMemo etc..) but I may be interpretting this incorrectly.

I used a tiny framework called re-dom a few years ago. Good comparison in the sense that it's a minimal thing that doesn't attempt to implement a virtual dom. Still a nice framework but it's been a few years. I haven't used solidjs or vue.js. A lot of these frameworks are based on the notion that javascript sucks for writing html and therefore you need some kind of templating. Kotlin doesn't have that problem as it has internal DSLs that you can write. So there's very little need for templating if you have a kotlin dsl for html, css, etc. It's all Kotlin. Makes things a lot easier. And if it's missing, you just add your own dsl or extend the existing ones. Extension functions are amazing for that. I think the consensus on virtual dom trees is that they should mostly not be needed these days. And of course the state handling with Fritz2 is rock solid as it uses StateFlows and you simply use `data.render {}`on those. I think a lot of refactoring went into the underlying dom plumbing in the 1.0 release candidates. But basically if that's fast/good enough, what else would you need? You can of course still poke around in the dom directly if you need to. Useful if you are doing things like implementing drag and drop. Fritz2 doesn't stop you from doing that. But mostly, you don't need to.

I've spent the last few weeks building a new OSS rank evaluation UI called Rankquest Studio (rankquest.jillesvangurp.com) using the recent release candidates of Fritz2 and kotlin-js. I'm using my own fork for now until they can merge my pr for updating everything to kotlin 1.9.10. I'm also using the k2 compiler and this is making life a lot nicer with very speedy incremental compilation, which is really nice when you are constantly switching between browser and IDE. The new headless components in fritz2 are nice once you figure them out and everything is styled using tailwind css. I'm not a frontend developer but I was able to figure this out. I will be presenting this at the Elastic search meetup in Berlin tomorrow and I would appreciate people trying this out and giving me some feedback. Disclaimer, this is a beta release and there are still some rough edges.

Hi. I'm attempting to use the fritz2 headless components in my web app. I am tripping over basic problems. If you've solved these, please let me know. First, at the top of the documentation page for each headless element, there is a working example. Where can I see the code for these examples? I suspect that seeing how they did this would answer many of my questions. Second, when I attempt to follow the examples, I end up with unresolved references for things that should be defined as part of the dsl. For example:

import dev.fritz2.headless.components.*
import dev.fritz2.headless.foundation.*

popOver{

...

popOverPanel {

placement = Placement.Bottom // Placement unresolved

distance = 20 // distance unresolved

}

}

``````

Do anyone has it working with kotlin tests with Karma on 1.9.20? It all went great until I wanted to test some stuff, running test task ends with:

> Task :client:jsBrowserTest
Error in config file!
 TypeError: Cannot read properties of undefined (reading 'main')
    at C:\Users\fpiec\IdeaProjects\tabletop\build\js\packages\tabletop-client-test\karma.conf.js:135:18
    at createWebpackConfig (C:\Users\fpiec\IdeaProjects\tabletop\build\js\packages\tabletop-client-test\karma.conf.js:157:3)
    at module.exports (C:\Users\fpiec\IdeaProjects\tabletop\build\js\packages\tabletop-client-test\karma.conf.js:179:22)
    at Object.parseConfig (C:\Users\fpiec\IdeaProjects\tabletop\build\js\node_modules\karma\lib\config.js:470:26)
    at exports.run (C:\Users\fpiec\IdeaProjects\tabletop\build\js\node_modules\karma\lib\cli.js:288:26)
    at Object.<anonymous> (C:\Users\fpiec\IdeaProjects\tabletop\build\js\node_modules\karma\bin\karma:3:23)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
java.lang.IllegalStateException: command 'C:\Users\fpiec\.gradle\nodejs\node-v18.12.1-win-x64\node.exe' exited with errors (exit code: 1)

I use

tailwind.config.js

from tailwind template and it seems it gets merged into karma.conf.js on build. I tried with the template repository, tests work on the default 1.7.20 kotlin but by switching to 1.9.20 it ends with the same error I get.

What auth solution do you suggest I use for my web app that I've written with Fritz2?

Just wondering, is there any comparison of Fritz2 vs. compose-web, and when each might be better? Also, why wouldn't Fritz just use the compose compiler to simplify working with Flows? Or maybe I'm misunderstanding something about Fritz?

Compose-web is mainly focusing on wasm at this point. And nice as that is, it's not ready for mainstream usage and also limits you a bit in terms of delivering a well designed experience. Compose html is sort of usable but not getting a lot of love and attention lately. They haven't come out saying that it is deprecated just yet. But it is starting to feel like it. Fritz2 uses kotlin-js and is easy to use if you need to work with existing javascript libraries. Nice if you want to use existing web components. Also the headless component framework that comes with fritz2 is nice. And styling things with tailwind (or similar css frameworks) is pretty nice and easy and a bit more aligned with how the rest of the web does styling. I just think of kotlin-js as a nicer typescript and fritz2 as a nice framework that makes the most of kotlin-js that cuts me loose from the hellscape that is react development. Fritz2 does not depend on any compose classes but it's not that different in terms of how it works. State is represented using State Flows. The compose compiler kind of tries to hide that. Fritz2 is more explicit about it. If you have a flow, you can react to it by rendering it. Creating them is easy. There's a ksp based compiler for some annotations to make this easier. I'm not actually using that as I don't like having too much compiler magic and the code it generates isn't exactly rocket science or something I need a lot off.

I have a different perspective. Compose Web and Fritz2 may offer similar functionality. But Compose Web has a much, much bigger community behind it, and that really matters. I've enjoyed working with Fritz2, but I've found it incredibly frustrating to find zero training videos, zero libraries that can be used directly, and a two-week to two-month turnaround when I ask a question in this forum. By contrast, when I started to look at Kotlin Multiplatform, I immediately found five excellent videos that are teaching me how to build working multiplatform projects, including web -- no WASM required. And when I ask a question of an instructor on Udemy, he gets back to me in 24 hours.

I guess each one has a point here... thanks!

Is there any example about how to include a js library (like chartjs) and make it reactive to data change? I do not see anything in the documentation.

Also, I do not see anything regarding transitions (as in https://headlessui.com/react/transition) - Is there any examples about how to implement them?

I've created a nice tool with Fritz2 last weekend: https://fluent-ai.jillesvangurp.com/ Some nice good practices for people new to Kotlin-js and Fritz2: • uses koin for dependency injection • uses project fluent for localization • builds on the headless components provided by Fritz2 • easy to use abstractions for things like confirmation dialogs or busy popups that show when network traffic is happening @Gilles Barbier also some nice examples of transitions in there.

is it possible to embed fritz in an existing ktor application? The situation is: I have an existing project that is using kweb. but kweb was discontinued. The majority of the server is a rest API that's just using ktor. but then there's a small web frontend that currently uses kweb. and the way kweb worked was it added as a ktor plugin and handled any routes that weren't already defined.

What strategies do you use for dealing with the fact that asynchronous two-way binding on input fields will sometimes result in events queueing up and the input

value

being overwritten with data from the past?

Hello everyone, is there a way to have multiple entry points in a single fritz2 gradle module? (we’re adding fritz2 screens to an existing SSR app so it’s not a single-page app).

seems relevant here as well ..

Any recommendations on how do to localization with fritz2?

@Artūras Šlajus https://github.com/jillesvangurp/fluent-ai That's a fritz2 app for ai translating project fluent localization files, and it uses my fluent-kotlin library as well. So both an example of how to set up localization and a nice tool for AI generating additional translations. Bring your own API key for openai if you want to use it. I built this last year; we are using this internally for managing thousands of localization strings.

Hey, how do I render a html, I mean provide html code