Hey everyone, We are working on a feature where we enable 2-way video conversation among participants similar to zoom. The screenshot above shows our in-meeting user interface. We are using zoom’s video sdk and one of the recommendations from zoom is that draw all visible tiles(member videos) on a single canvas with pagination options. So if there are 20 participants in a meeting then 8 participants’ videos are to be rendered on screen and there will be pagination options. I am very new in web app development and my spidy sense tells me that it requires some CSS wizardry and co-coordinate system knowledge. Can someone suggest to me how should i go about it?

Hi all, another KMP -> JS question if anyone knows: When compiling a Kotlin method with default values, it seems the current behaviour ( 1.7.10 ) is to make ALL parameters in the function signature ‘optional’ in terms of the Typescript definition, even the ones where we haven’t specified a default value. Is this by design? It seems unsafe, because the params without defaults will possibly be undefined when the function is called from JS. example code: Kotlin

fun hello(param1:String, param2:String, param3:Boolean = false ) {}

JS.dt.ts

hello(param1?: string, param2?: string, param3?: boolean): void;

For our team, the slow continuous build process of kotlin/js is still one of the biggest pain points. Is there a solution to reduce this hot reload times? As far as I understand, it is always one big js created that also includes all the library code when hot reloading. Can this be split to the unchanged library code with only the specific project code been rebundeld? Any other idea is welcome, sourceMaps = false is already active.

Hello, has any one been getting

info There appears to be trouble with your network connection. Retrying...

for kotlin js builds too frequently in github actions lately? or is it just me? Whats even more ironik is simply reruning the job, passes.

Can you use KSP with the JS IR compiler? If so, are there any examples I could check out? Thanks!

I'm upgrading gradle to 5.7 and getting

> Task :sqldelight:kotlinNpmInstall
error <https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz>: Extracting tar content of undefined failed, the file appears to be corrupt: "ENOENT: no such file or directory, stat '/Users/runner/Library/Caches/Yarn/v6/npm-typescript-3.9.5-586f0dba300cde8be52dd1ac4f7e1009c1b13f36-integrity/node_modules/typescript/lib/typingsInstaller.js'"

> Task :sqldelight:kotlinNpmInstall FAILED
...
> Task :web:kotlinSourcesJar

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':sqldelight:kotlinNpmInstall'.
>                 Process 'Resolving NPM dependencies using yarn' returns 1
                  
                  yarn install v1.22.17

and running out of ideas for what could be going on. It might be a corrupt cache of some sort but this is happening on CI and I'm not sure how to force a clear of the cache

Hi, how could I set up tests that only call once the constructor or just an initialization function, for now with a class it calls the constructor once per test and I depend on a library that have methods that should be only called once per project I'm using Karma as tests

I have a few questions about splitting code, in particular this warning:

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  index.js (516 KiB)
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (516 KiB)
      index.js
webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit <https://webpack.js.org/guides/code-splitting/>

After going to that website it remains a bit unclear how I should approach this, for two reasons: • How do I effectively set this up for Kotlin/JS? • The generated filenames by this action seem somewhat random; How would I handle this in my pebble templates? (currently hardcoded to index.js)

I've just run into this error when I execute `jsBrowser*Run`:

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function

I found some discussion about this problem (eg. https://kotlinlang.slack.com/archives/C0B8L3U69/p1655183383117179?thread_ts=1655180593.195219&cid=C0B8L3U69) and a reported issue (KT-52776 KJS / Gradle: Webpack version update despite yarn.lock breaks Kotlin/JS build). Unfortunatelly the workaround does not work for me. Do you have any idea how this could be solved? Thanks.

I've been poking around Webpack and DCE in Kotlin/JS because I would like to have dynamic module loading. I understand that this is not supported as of now, but I'm willing to put in some work to find a solution. The concept is that we have a basic application (web client + server) and the user can add modules that contain both JVM parts and UI parts. A kind of a plugin concept, many systems provide this function. The JVM part is quite trivial, we've got that working already. As for the JS part. Checking the code the Kotlin compiler produces, it seems perfectly viable to forget Webpack. This of course means no DCE, but to be honest, I don't really care about DCE. The reason is that DCE helps up until a point, but then, as the application grows, the single-bundle concept starts to hurt more than the DCE helps. So, my plan is to get rid of Webpack altogether and just go with plain modules. The real question is, how to get these modules and how to ensure that all the "requires" use the proper name. The Kotlin compiler actually produces these modules, they are there... somewhere. :) I hacked around a bit and got it almost working already. However, it would be nice to have a "clean" solution for this. I'm not really worried about dependencies, we have like 6 from Kotlin (kotlin, atomicfu, serialization, coroutines, datetime -> js-joda) and a few from our own modules. Any pointers/ideas would be welcome, thanks.

So feeling particularly dumb, I have an example Kotlin/react js project and I am trying to add some .jar dependencies via gradle. I'm trying to use the file tree implementation statement but the dependencies don't appear to be imported. Any ideas?

I managed to set up a javascript debug configuration in Intellij Idea, and to add functional breakpoints in my client side kotlin code. But if I try to step over, the IDE loads the big obuscated js file from my project... IDE version is 2022.2.1 Preview Ultimate (but I had the same behavior with the previous version). I'm using js(IR).

I added a file to the

jsMain/resources

directory of my library module, but it doesn't end up in

build/js/packages

for the final module. Is there anything needed to tell Gradle to put resources from dependencies there?

Hello, I’m trying to setup fritz2 with a project that includes native applications. So, I got the application running but it cannot find the

.js

file in

index.html

My current problem is that there are two build folders being created. 1 in project folder and one in shared folder.

Complete n00b question: I was hoping to use Kotlin in addition to my existing backend JavaScript code using Node. So I setup a new project and selected NodeJS Application and it created the Hello World app, which I can run with

/gradlew run

. But I want to be able to take the JavaScript output and use it in my existing app. Where is the JS? I see there's a /build/js folder but no .js files, even after doing a

./gradlew build

. :: confused ::

Related but slightly different, and possibly just as n00by: I’m building a multi-platform library, and my tests fail on JS IR, though they pass on all other platforms – including JS Legacy. Where can I find the two generated JS versions of the code so that I can compare them and gain any insight into what’s going on there?

Hello, is there some multiplatform library to consistently represent floating-point numbers across all platforms? I'm working on "replay" system for my game, and I really need numbers to be consistent across platforms, but with default Float it fails on JS, where I can't even do

Float.fromBits((-1e11f).toRawBits())

without getting distorted results

Hey I'm asking myself if it would be possible to generate using for example KSP a Partial version of any type using an annotation so we can more easily mimic the TypeScript definition that uses

Partial<something>

? It would set all the external fields to nullable and override ones from the parents.

Hello. Getting this error when using a npm dependency:

The engine "node" is incompatible with this module. Expected version ">=16.0.0". Got "14.17.0"

Is there a way to configure the

kotlinNpmInstall

task to use a different version of node?

Hi all, any way to create a custom html tag element with the new kotlin-react-dom instead of the legacy? This used to work:

inline fun ChildrenBuilder.auiDropdownMenu(block: RDOMBuilder<AUI_DROPDOWN_MENU>.() -> Unit): Unit = tag(block) {
    AUI_DROPDOWN_MENU(mapOf(), it)
}
class AUI_DROPDOWN_MENU(
    initialAttributes: Map<String, String>,
    override val consumer: TagConsumer<*>
) : HTMLTag("aui-dropdown-menu", consumer, initialAttributes, null, false, false),
    CommonAttributeGroupFacadeFlowInteractivePhrasingContent

but now I want to migrate this code and cannot find out how to do it

Hi guys! 🙂 I want to write an app that can be viewed in a web browser. I want to draw a lot of lines, squares etc on some canvas and make animations. I want to make some file processing (10-15 mb per file). I wish to load the entire file into RAM to speed things up. Not sure if I need multithreading. I have NO knowledge of JS\CSS\HTML at all, but I know Kotlin. What framework\library should I use for this task? Thanks!

Hi ! Is there an equivalent to electron but for Kotlin/JS ?

Are any other folks running in to following (and using any particular workaround for now?) https://youtrack.jetbrains.com/issue/KTIJ-22303

Want to make sure my assumptions are correct, first time working with Kotiln JS target &

dynamic

types: I have a js function from an imported library which returns

dynamic

. I'm trying to cast the return type's properties to kotlin types to create a typesafe wrapper of sorts. I can cast js primitives to kotlin primitives fine, but anything more complex like a js

Uint8Array

as

UByteArray

give me a

ClassCastException

. Wondering what the strategy is for this? Do I need to create my own

Uint8Array

type & implementations?

I just updated one of my projects to use both

LEGACY

and

IR

compilers to support some users (I was only using

IR

before). After doing so I got strange test failures that were all related to conditions in a

when

not matching properly. Works on JS IR and all other backends except JS LEGACY:

when(uriString[end]) {
  '/',
  '\\',
  '?',
  '#'
  -> break // break isn't executed when uriString[end] == '/'
}

Works on all backends:

val c = uriString[end]
if(c == '/' || c == '\\' || c == '?' || c == '#') break

Is behavior like this expected?

Hi, why isn't there any operation on Number ? If I have an external interface having

x: Number, y: Number

, how would I create an operator function

plus

, should I convert or

unsafeCast<Double>

the numbers for every operation I need ? Or add operator functions to Number with

unsafeCast<Double>

every time ?

I met some trouble when I try to upload a file to some OSS server. The console report ‘ClassCastException’ and I can’t cast a ArrayBuffer to Blob

Thanks everyone, finally I read file as dataUrl to get the base64 code and trans it to ByteArray (ktor only support this). And successed upload my file to OSS😪

Heyo. Trying to convert a

Uint8Array

into a utf-8 string. Anyone know the best practice way to do this, since a

Uint8Array

isn't back by a

UByteArray

internally (from what I can tell) ?

Friendly greetings ! would you suggest “Use new JS IR compiler” for a new hobby project, with no planned external dependencies, that will create a fullscreen canvas for a browser openGLES application ? (like a game, except that it won’t be a game)