https://kotlinlang.org logo
Docs
Join the conversationJoin Slack
Channels
100daysofcode
100daysofkotlin
100daysofkotlin-2021
advent-of-code
aem
ai
alexa
algeria
algolialibraries
amsterdam
android
android-architecture
android-databinding
android-studio
androidgithubprojects
androidthings
androidx
androidx-xprocessing
anime
anko
announcements
apollo-kotlin
appintro
arabic
argentina
arkenv
arksemdevteam
armenia
arrow
arrow-contributors
arrow-meta
ass
atlanta
atm17
atrium
austin
australia
austria
awesome-kotlin
ballast
bangladesh
barcelona
bayarea
bazel
beepiz-libraries
belgium
berlin
big-data
books
boston
brazil
brikk
budapest
build
build-tools
bulgaria
bydgoszcz
cambodia
canada
carrat
carrat-dev
carrat-feed
chicago
chile
china
chucker
cincinnati-user-group
cli
clikt
cloudfoundry
cn
cobalt
code-coverage
codeforces
codemash-precompiler
codereview
codingame
codingconventions
coimbatore
collaborations
colombia
colorado
communities
competitive-programming
competitivecoding
compiler
compose
compose-android
compose-desktop
compose-hiring
compose-ios
compose-mp
compose-ui-showcase
compose-wear
compose-web
connect-audit-events
corda
cork
coroutines
couchbase
coursera
croatia
cryptography
cscenter-course-2016
cucumber-bdd
cyprus
czech
dagger
data2viz
databinding
datascience
dckotlin
debugging
decompose
decouple
denmark
deprecated
detekt
detekt-hint
dev-core
dfw
docs-revamped
dokka
domain-driven-design
doodle
dsl
dublin
dutch
eap
eclipse
ecuador
edinburgh
education
effective-kotlin
effectivekotlin
emacs
embedded-kotlin
estatik
event21-community-content
events
exposed
failgood
fb-internal-demo
feed
firebase
flow
fluid-libraries
forkhandles
forum
fosdem
fp-in-kotlin
framework-elide
freenode
french
fritz2
fuchsia
functional
funktionale
gamedev
ge-kotlin
general-advice
georgia
geospatial
german-lang
getting-started
github-workflows-kt
glance
godot-kotlin
google-io
gradle
graphic
graphkool
graphql
graphql-kotlin
graviton-browser
greece
grpc
gsoc
gui
hackathons
hacktoberfest
hamburg
hamkrest
helios
helsinki
hexagon
hibernate
hikari-cp
hire-me
hiring
hongkong
hoplite
http4k
hungary
hyderabad
image-processing
india
indonesia
inkremental
intellij
intellij-plugins
intellij-tricks
internships
introduce-yourself
io
ios
iran
israel
istanbulcoders
italian
jackson-kotlin
jadx
japanese
jasync-sql
java-to-kotlin-refactoring
javadevelopers
javafx
javalin
javascript
jdbi
jhipster-kotlin
jobsworldwide
jpa
jshdq
juul-libraries
jvm-ir-backend-feedback
jxadapter
k2-early-adopters
kaal
kafka
kakao
kalasim
kapt
karachi
karg
karlsruhe
kash_shell
kaskade
kbuild
kdbc
kgen-doc-tools
kgraphql
kinta
klaxon
klock
kloudformation
kmdc
kmm-español
kmongo
knbt
knote
koalaql
koans
kobalt
kobweb
kodein
kodex
kohesive
koin
koin-dev
komapper
kondor-json
kong
kontent
kontributors
korau
korean
korge
korim
korio
korlibs
korte
kotest
kotest-contributors
kotless
kotlick
kotlin-asia
kotlin-beam
kotlin-by-example
kotlin-csv
kotlin-data-storage
kotlin-foundation
kotlin-fuel
kotlin-in-action
kotlin-inject
kotlin-latam
kotlin-logging
kotlin-multiplatform-contest
kotlin-mumbai
kotlin-native
kotlin-pakistan
kotlin-plugin
kotlin-pune
kotlin-roadmap
kotlin-samples
kotlin-sap
kotlin-serbia
kotlin-spark
kotlin-szeged
kotlin-website
kotlinacademy
kotlinbot
kotlinconf
kotlindl
kotlinforbeginners
kotlingforbeginners
kotlinlondon
kotlinmad
kotlinprogrammers
kotlinsu
kotlintest
kotlintest-devs
kotlintlv
kotlinultimatechallenge
kotlinx-datetime
kotlinx-files
kotlinx-html
kotrix
kotson
kovenant
kprompt
kraph
krawler
kroto-plus
ksp
ktcc
ktfmt
ktlint
ktor
ktp
kubed
kug-leads
kug-torino
kvision
kweb
lambdaworld_cadiz
lanark
language-evolution
language-proposals
latvia
leakcanary
leedskotlinusergroup
lets-have-fun
libgdx
libkgd
library-development
linkeddata
lithuania
london
losangeles
lottie
love
lychee
macedonia
machinelearningbawas
madrid
malaysia
mathematics
meetkotlin
memes
meta
metro-detroit
mexico
miami
micronaut
minnesota
minutest
mirror
mockk
moko
moldova
monsterpuzzle
montreal
moonbean
morocco
motionlayout
mpapt
mu
multiplatform
mumbai
munich
mvikotlin
mvrx
myndocs-oauth2-server
naming
navigation-architecture-component
nepal
new-mexico
new-zealand
newname
nigeria
nodejs
norway
npm-publish
nyc
oceania
ohio-kotlin-users
oldenburg
oolong
opensource
orbit-mvi
osgi
otpisani
package-search
pakistan
panamá
pattern-matching
pbandk
pdx
peru
philippines
phoenix
pinoy
pocketgitclient
polish
popkorn
portugal
practical-functional-programming
proguard
prozis-android-backup
pyhsikal
python
python-contributors
quasar
random
re
react
reaktive
realm
realworldkotlin
reductor
reduks
redux
redux-kotlin
refactoring-to-kotlin
reflect
refreshversions
reports
result
rethink
revolver
rhein-main
rocksdb
romania
room
rpi-pico
rsocket
russian
russian_feed
russian-kotlinasfirst
rx
rxjava
san-diego
science
scotland
scrcast
scrimage
script
scripting
seattle
serialization
server
sg-user-group
singapore
skia-wasm-interop-temp
skrape-it
slovak
snake
sofl-user-group
southafrica
spacemacs
spain
spanish
speaking
spek
spin
splitties
spotify-mobius
spring
spring-security
squarelibraries
stackoverflow
stacks
stayhungrystayfoolish
stdlib
stlouis
strife-discord-lib
strikt
students
stuttgart
sudan
swagger-gradle-codegen
swarm
sweden
swing
swiss-user-group
switzerland
talking-kotlin
tallinn
tampa
teamcity
tegal
tempe
tensorflow
terminal
test
testing
testtestest
texas
tgbotapi
thailand
tornadofx
touchlab-tools
training
tricity-kotlin-user-group
trójmiasto
truth
tunisia
turkey
turkiye
twitter-feed
uae
udacityindia
uk
ukrainian
uniflow
unkonf
uruguay
utah
uuid
vancouver
vankotlin
vertx
videos
vienna
vietnam
vim
vkug
vuejs
web-mpp
webassembly
webrtc
wimix_sentry
wwdc
zircon
Powered by Linen
javascript
  • j

    Jim

    03/02/2022, 8:13 PM
    Is there a way to safely apply annotations like
    @JsName
    and
    @JsModule
    to dukat generated externals?
    s
    • 2
    • 4
  • j

    Jim

    03/02/2022, 11:01 PM
    I'm also noticing some weirdness with dukat and such where it generates a type, totally what i want:
    open class Foo(config: `T$0`) {
      open fun bar(id: String): String
    }
    Then when I look at the js it's a little funky:
    var Foo = (function(() {
      function Foo(config) {
        ...
      }
    
      Foo.prototype.bar = function(id) {
        return "..."
      }
    }
    ..continued in thread Edit: I figured it out - the
    @JsModule
    needs to be for the whole file since it didn't know where
    T$0
    was coming from, I suspect
    • 1
    • 3
  • s

    shaktiman_droid

    03/03/2022, 1:18 AM
    How do you measure size impact of a Kotlin dependency on Kotlin/JS library release executable? • One option is to build a JS executable via
    jsBrowserDistribution
    where we get a fat
    .js
    file. Here is the output for this for my sample project
    shared.js => 122KB
    shared.js.map => 49KB
    • Another option is to ship library as an NPM module. For example @Big Chungus’s plugin task `packJsNpmPublication`provides output like this for same sample project
    npm notice === Tarball Contents === 
    npm notice 316.8kB Kmp_Library-shared.js    
    npm notice 117B    package.json             
    npm notice 71.7kB  Kmp_Library-shared.js.map
    npm notice 715B    Kmp_Library-shared.d.ts  
    npm notice === Tarball Details === 
    npm notice name:          shared                                  
    npm notice version:       0.1.0                                   
    npm notice filename:      shared-0.1.0.tgz                        
    npm notice package size:  74.5 kB                                 
    npm notice unpacked size: 389.3 kB
    # Which number to believe from both options? Now for example if I want to add
    kotlinx.datetime
    dependency in my project I want to measure how much size impact it would do to my library user.
    b
    • 2
    • 13
  • p

    Partho Paul

    03/03/2022, 6:38 AM
    Hi all, I'm getting
    org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':compileProductionExecutableKotlinJs'
    error while compiling my project. I tried deleting build and gradle folder and rebuilding but it didn't fix the issue. Attached in the thread is a snippet of the complete stack trace. Has anyone experienced something similar? Thanks in advance
    t
    v
    • 3
    • 4
  • a

    Ayfri

    03/04/2022, 12:32 AM
    Hi, simple question, how do I deal with theses types of issues ? it's an abstract method also, but Intellij doesn't show it up
    a
    t
    +3
    • 6
    • 7
  • a

    Alex Edwards

    03/05/2022, 5:24 AM
    I’m trying to optimize by antivirus (i’m not allowed to turn it off), I run gradle multiplatform that has js & jvm targets. I have excluded the obvious file extensions from the realtime scanning but are there any other not so obvious gradle/kotlin file types that I could exclude. Here is my list so far
    java;class;kt;jar;xml;json;ini;config;properties;ts;js;yml;yaml;mf;md
    g
    • 2
    • 1
  • p

    Partho Paul

    03/07/2022, 2:50 PM
    Hi all, I'm working on migrating a project from muirwik and kotlin-react-legacy to kotlin-mui and kotlin-react. In muirwik we had a method called toolbarJsToPartialCss which we were able to use as below:
    val themeStyles = object : StyleSheet("ComponentStyles", isStatic = true) {
                val toolbar by css {
                    toolbarJsCssToPartialCss(theme.mixins.toolbar)
                }
    }
    But I'm not able to figure out the alternative approach for kotlin-mui. Is there anything trivial which I'm missing? TIA
    t
    • 2
    • 1
  • m

    Moritz Hofmeister

    03/09/2022, 8:34 AM
    Regarding the kotlin-mui wrapper: How do I access the theme inside the sx prop? @turansky JS/TS documentation of sx (We are currently using class components and will only migrate to function components in the future, so useTheme is not really an option in our case)
    ✅ 1
    t
    s
    • 3
    • 4
  • m

    Moritz Hofmeister

    03/09/2022, 8:45 AM
    Regarding the new sx with the PropertiesBuilder: Is something like the first option possible to have typed classes or can it only be done like the second one? @turansky
    t
    • 2
    • 3
  • m

    Moritz Hofmeister

    03/11/2022, 2:56 PM
    How would one go about accessing the e.g.
    OutlinedTextFieldProps
    in
    kotlin-mui
    in a TextField component? Are they only accessible through
    unsafeCast
    ? I basically just want to access
    onChange
    t
    • 2
    • 5
  • a

    Ayfri

    03/14/2022, 12:00 PM
    Hi, I'm trying to build a Kotlin/JS project that was working fine on my fix computer on my portable computer and I'm getting this error
    Cannot find module 'C:\Users\pierr\.gradle\yarn\yarn-v1.22.10\bin\yarn.js'
    What might be wrong ?
    m
    • 2
    • 7
  • s

    shaktiman_droid

    03/14/2022, 4:29 PM
    Wrote second blog post in Kotlin/JS series
    @JsExport guide for exposing Kotlin to JS
    https://dev.to/touchlab/jsexport-guide-for-exposing-kotlin-to-js-20l9
    👍 4
    🙌 2
    • 1
    • 1
  • g

    GoldenCow

    03/15/2022, 4:22 AM
    I opened a premade Kotlin/JS project, and it has the file yarn.lock under the directory kotin-js-store. I published the code on Github, and Dependabot is giving me an alert that dependencies under yarn.lock is vulerable to security issues. But, I cannot update the dependencies through Dependabot, and yarn.lock file seems autogenerated, which means I cannot edit it. How can I update my dependencies in my yarn.lock file? My gradle dependencies are all up-to-date.
    ➕ 3
    e
    a
    • 3
    • 3
  • m

    Moritz Hofmeister

    03/15/2022, 11:26 AM
    @kotlin-mui: Is it possible to access the spacing function of the theme in a typed way? I’m currently doing a dynamic cast like:
    theme.asDynamic().spacing(2)
    t
    • 2
    • 4
  • j

    julien lengrand-lambert

    03/15/2022, 8:45 PM
    Hey everyone, I would like to import a local javascript file (that is not directly a npm dependency) in a kotlin js project. Is that possible? My google fu points me to [that Stack Overflow answer](https://stackoverflow.com/questions/67661122/is-it-possible-to-import-a-javascript-file-in-a-kotlin-js-project) talking about "hacking" it with local TS sources. Is that still the recommend way?
    t
    b
    • 3
    • 12
  • j

    julien lengrand-lambert

    03/16/2022, 9:40 AM
    Morning all, I'm quite new at interfacing JS and Kotlin. Say I have a very simple NPM dependency (@jlengrand/test-js) with an
    index.js
    file like this :
    function defaultComparator (a, b) {
        return a - b
    }
    
    export function isSorted (array, comparator) {
        if (!Array.isArray(array)) throw new TypeError('Expected Array, got ' + (typeof array))
        comparator = comparator || defaultComparator
    
        for (var i = 1, length = array.length; i < length; ++i) {
            if (comparator(array[i - 1], array[i]) > 0) return false
        }
    
        return true
    }
    
    export function returnValue(value) {
        return value;
    }
    I would like to be able to import both functions from Kotlin, so I do as such
    @JsModule("@jlengrand/test-js")
    @JsNonModule
    external fun <T> isSorted(a: Array<T>): Boolean
    
    @JsModule("@jlengrand/test-js")
    @JsNonModule
    external fun returnValue(s: String): String
    I can use the
    returnValue
    function in my Kotlin code, however, it seems to always try to import the
    isSorted
    function, given the error I get in my console :
    Uncaught TypeError: Expected Array, got string....
    As you can see, I have tried to extend from that documentation page (https://kotlinlang.org/docs/using-packages-from-npm.html), however I clearly seem to be missing a crucial piece of info. Would you have any pointers by any chance?
    b
    • 2
    • 24
  • m

    Moritz Hofmeister

    03/16/2022, 2:30 PM
    @kotlin-mui: I’m trying to make an extension function to set the
    min
    attribute and cannot figure out how to do it correctly:
    var InputBaseComponentProps.min: String
      get() = throw IllegalStateException()
      set(value) {
        return when (this) {
          is HTMLInputElement -> min = value
          else -> throw IllegalArgumentException("There is no min in this InputBaseComponentProps")
        }
      }
    This results in an exception because it apparently does not match with HTMLInputElement. As a reference, this works:
    val HTMLElement.value: String
      get() = when (this) {
        is HTMLInputElement -> value
        is HTMLTextAreaElement -> value
        else -> throw IllegalArgumentException("There is no value in this HTMLElement")
      }
    t
    • 2
    • 8
  • m

    Michal Klimczak

    03/17/2022, 7:12 PM
    What is the current golden standard for writing a js frontend plus jvm backend multiplatform project. I'm quite new to this (coming from kmm) and different examples and frameworks I find seem to do a lot of very specific magic in gradle. What I'm looking for is a basic solution where I build bsckend and frontend swparately and the generated js files (and html and other static) are then accessible for the backend app (because it handles the routing). Is this the right approach at all or should I have a separate apps with separate routing for frontend (with html/css/js views) and backend (with rest/json views)
    r
    b
    k
    • 4
    • 18
  • m

    Moritz Hofmeister

    03/18/2022, 1:08 PM
    @kotlin-mui: I noticed that specifying a property type like
    OutlinedTextFieldProps
    for
    TextField
    leads to not having the
    ChildrenBuilder
    in the current scope - This also means that it’s not possible to nest other (kotlin-mui) components without casting to the ChildrenBuilder first. Is there a nice way to solve this issue?
    t
    • 2
    • 2
  • z

    zilin jin

    03/19/2022, 7:16 PM
    [REMOTE], [PART-TIME], [FULL-TIME], [FREELANCE] I have experiences with building new tokens, auto trading bot, DEX fork, NFT marketplace, smart contract, and DApps in Cardano, Ethereum, Binance Smart Chain, Matic/Polygon, and Solana blockchains. 1. Blockchain 1) Smart contract development using Solidity and Haskell (3 years) 2) Hardhat, Truffle 3) Binance smartchain, uniswap folk 4) DeFi, Dex 5) ERC20, ERC721, ERC1155, BEP20 6) NFT Minting, NFT Drop, Lazy Minting 7) Solidity, Rust 😎 Integrating frontend with web3 (3 years) 2. Web Development: 1) React.js(React-redux, redux/toolkit, Next.js) 2) Angular.js(NgXs, NgRx, SSR) 3) Vue.js(Vue.js, Vuetify.js, Nuxt.js, Quasar framework) 4) Electron.js 3. Mobile Development: 1) React Native 2) Ionic Framework 3) Java 4) Flutter 5) Swift 4. Backend Development: 1) Node.js 2) Express.js 3) Java SpringBoot 4) Django/Flask 5. Improving loading time, site stickiness and user engagement 6. Project Management: 1) GitHub 2) BitBucket 3) GitLab 4) Devops 7. Database: 1) MySQL 2) MongoDB 3) PostgreSQL 4) OracleDB As a developer focused on customer satisfaction, I manage all aspects of web and mobile development-from concept to requirements definition, design, development, launch, maintenance and user support. I enjoy the client-facing role and working closely with members to produce high-quality deliverables. If my skills match your requirements, please contact me. Thanks.
    :not-kotlin: 4
    b
    m
    • 3
    • 2
  • c

    CLOVIS

    03/20/2022, 12:08 PM
    Couldn't find package pkg-dir
    since yesterday... Has anyone seen it already? full error message: https://gitlab.com/opensavvy/formulaide/-/jobs/2224663228#L65
    t
    • 2
    • 1
  • j

    Jim

    03/22/2022, 6:16 PM
    Are value classes safe to use in kotlin/js for 1.6.10?
    k
    t
    • 3
    • 5
  • s

    Sam Stone

    03/23/2022, 1:54 PM
    Does anyone have any book recommendations for learning Kotlin/JS?
    b
    j
    s
    • 4
    • 16
  • j

    Julius

    03/23/2022, 10:35 PM
    I have some issues with kotlin/js because of missing javascript knowledge: https://stackoverflow.com/questions/71586237/how-to-use-asyncgenerators-with-kotlin-js I'm thankful for any help🙏
    t
    • 2
    • 4
  • g

    Grégory Lureau

    03/24/2022, 6:01 PM
    Announcing KustomExport: an experimental KSP project to provide better Typescript APIs! Some features
    @JsExport
    doesn't provide but
    @KustomExport
    does: • support exporting
    enum
    ,
    interface
    ,
    sealed class
    • ability to remove the namespace • support exporting
    List
    (mapped into
    Array
    ) • remove useless methods from
    data class
    • support
    suspend
    methods (with cooperative cancellation via AbortController) Do you need something else? Please open an issue to help this project! Have a nice day Kotlin developers! :kotlin-intensifies:
    🔥 4
    👍🏽 1
    ❤️ 7
    :kotlin-intensifies: 14
    👍 11
    😮 2
    a
    j
    • 3
    • 8
  • g

    Grégory Lureau

    03/26/2022, 9:41 PM
    I've noticed a runtime error when upgrading from 1.6.10 to 1.6.20-RC2. The use case involves an
    internal
    +
    lateinit
    field inside a
    @JsExport
    annotated class.
    TypeError: Cannot read properties of undefined
    Did you already experienced something similar? Or am I missing something new in the compiler? I've created a ticket just in case, don't hesitate to star it if it makes sense to you. (It's actually a duplicate of KT-50504)
    ✅ 1
    k
    • 2
    • 2
  • s

    Slackbot

    03/28/2022, 3:56 AM
    This message was deleted.
    t
    d
    • 3
    • 3
  • a

    Akram Bensalem

    03/29/2022, 6:47 PM
    I got this error when I add :
    browser()
    inside the
    js(IR){}
    + when I remove
    browser()
    and try to run the app I got this error
    Task 'jsBrowserDevelopmentRun' not found in project ':webApp'
    s
    • 2
    • 7
  • a

    ankushg

    03/29/2022, 8:55 PM
    Are there any planned updates to how extension functions/properties will be treated in the new JS IR compiler? It would be great if they could be `@JsExport`ed as functions that just take the target as a parameter Asking because migrating to KSP stops us from modifying classes directly
    b
    • 2
    • 4
  • r

    Ran

    03/30/2022, 8:43 AM
    Kotlin JS InterOp External doesn’t work I added big-number dependency for jsMain:
    val jsMain by getting {
        dependencies {
            implementation(npm("big-number", "2.0.0", true))
        }
    }
    In jsMain, I use external to tell compiler that the BigNumber class is implemented by js:
    external class BigNumber(raw: dynamic) {
        fun plus(number: BigNumber): BigNumber
    }
    The I use BigNumber in kotlin code, but i get this error:
    ReferenceError: BigNumber is not defined
    Is there anyone can give me a help, thanks so much.
    g
    b
    • 3
    • 7
Powered by Linen
Title
r

Ran

03/30/2022, 8:43 AM
Kotlin JS InterOp External doesn’t work I added big-number dependency for jsMain:
val jsMain by getting {
    dependencies {
        implementation(npm("big-number", "2.0.0", true))
    }
}
In jsMain, I use external to tell compiler that the BigNumber class is implemented by js:
external class BigNumber(raw: dynamic) {
    fun plus(number: BigNumber): BigNumber
}
The I use BigNumber in kotlin code, but i get this error:
ReferenceError: BigNumber is not defined
Is there anyone can give me a help, thanks so much.
g

Grégory Lureau

03/30/2022, 9:12 AM
Do you have the same packageName/namespace in JS and Kotlin?
r

Ran

03/30/2022, 9:16 AM
No, I defined the external class under package com.calculation.tools
b

Big Chungus

03/30/2022, 9:24 AM
https://dev.to/mpetuska/js-in-kotlinjs-c4g
external declarations depend on how JS/TS code is exported.
r

Ran

03/30/2022, 9:24 AM
Ok, I’ll read the doc you provided throughly, thanks so much
Thanks, I solved my problem.
b

Big Chungus

03/30/2022, 2:30 PM
Glad to hear that. Mind posting back here what was the root cause and the solution in case somebody else encounters it in the future?
View count: 5