Edoardo Luppi
12/26/2020, 5:59 PMandylamax
12/28/2020, 6:48 AM@JsExports
should work in the near future
Let @JsExport
export every thing to global namespace. Example in a module sea
file: sea/src/main/kotlin/com/sea/entities.kt
package com.sea
@JsExport
class Fish(val type: String = "Tilapia")
@JsExport
class Whale(val name: String = "Deep Blue")
and to be use in typescript as
import { Whale, Fish } from 'sea'
const whale = new Whale("Killer Whale");
const tilapia = new Fish();
However, since sometimes scoping is needed. We can pass parameters to the @JsExport
like so
package com.sea
@JsExport
class Fish(val type: String = "Tilapia")
@JsExport("mammals")
class Whale(val name: String = "Deep Blue")
and to be use in typescript as
import { mammals, Fish } from 'sea'
const whale = new mammals.Whale("Killer Whale");
const tilapia = new Fish();
I know this is hard right now (due to how the Compiler build js), but the very desired sytax from the above case is
import { Fish } from 'sea'
import { Whale } from 'sea/mammals'
const whale = new Whale("Killer Whale");
const tilapia = new Fish();
I hope this one gets some love
Issue is already on YT at https://youtrack.jetbrains.com/issue/KT-37710 please give more votesEdoardo Luppi
12/28/2020, 10:05 AMEdoardo Luppi
12/28/2020, 2:34 PMimport
or require
(inside a function) a JSON file. How does this translate to KotlinJS?Edoardo Luppi
12/28/2020, 8:58 PMcamdenorrb
12/29/2020, 9:52 AMDmitry Fedoseyev
12/30/2020, 8:52 AMval jsMain by getting {
dependencies {
implementation(npm("@types/webrtc", "0.0.26", generateExternals = true))
}
}
I’m getting conflicting declarations errors during the build.
Conflicting declarations: public open var latency: W3C.DoubleRange? /* = NumberRange? */, public open var latency: tsstdlib.DoubleRange?
Does anyone know how to resolve this?Nicodemus Ojwee
12/30/2020, 11:35 AMval imageUrl = kotlinext.js.require("./resources/images/${introSlides.image}")
The code below works.
val imageUrl = kotlinext.js.require("./resources/images/logo.png")
Dirk Hoffmann
12/30/2020, 12:03 PMstyledDiv {
css {
height = "\$pt-navbar-height".toInt().px
}
...
Dirk Hoffmann
01/02/2021, 3:08 PMvar onItemSelect: (item: T, event: React.SyntheticEvent<HTMLElement>) -> Unit
where do I get the React.SyntheticEvent<HTMLElement>
from? can't find it anywhere as React
does not exist...Jorrit
01/03/2021, 12:47 AMdasralph
01/03/2021, 11:43 AM./gradlew clean compileProductionExecutableKotlinJs
. But compileProductionExecutableKotlinJs
does not appear in the ./gradlew tasks
list, so I assume it is not the right one.
Which Gradle task should I use?
Posted in #multiplatformdasralph
01/03/2021, 11:43 AMIllegalStateException: Can't find name for declaration FUN name:Foo_init_$Create$ visibility:public modality:FINAL <> (bar:kotlin.String?, $mask0:<http://kotlin.Int|kotlin.Int>, $marker:kotlin.js.DefaultConstructorMarker?) returnType:api.model.Foo
.
I assume this is a bug but is there a small workaround for it? Or do I need to wait until it is fixed?
@ExperimentalJsExport
@JsExport
data class Foo(
val bar: String? = null
)
Posted in #multiplatformDirk Hoffmann
01/04/2021, 1:33 PMpublic render() {
const buttonText = this.state.film.title;
return (
<Example header="Select Sandbox">
<FilmSelect
items={Films.TOP_100_FILMS}
itemPredicate={Films.filterFilm}
itemRenderer={Films.renderFilm}
noResults={<MenuItem disabled={true} text="No results." />}
onItemSelect={this.handleValueChange}
>
<Button text={buttonText} rightIcon="caret-down" />
</FilmSelect>
</Example>
);
}
my try is:
val FilmSelect = Select.ofType<Film>()
val exampleSelect = functionalComponent <SelectExampleProps> { props ->
val (selectExampleState, setSelectExampleState) = useState(SelectExampleState(TOP_100_FILMS[0]))
child(genericCard("Select Sandbox")) {
child(FilmSelect::class) {
attrs.items = TOP_100_FILMS
attrs.itemPredicate = filterFilm
attrs.itemRenderer = renderFilm
attrs.noResults = noResultsFunc
attrs.onItemSelect = handleValueChange
child(Button::class) {
attrs.text = selectExampleState.selectedFilm.title
attrs.rightIcon = "caret-down"
}
}
}
val handleValueChange = { film: Film, event: SyntheticEvent__1<HTMLElement> ->
setSelectExampleState(SelectExampleState(film))
}
}
so itemRenderer is
typealias ItemRenderer<T> = (item: T, itemProps: IItemRendererProps) -> ReactElement?
how can I implement such a funtion returning a ReactElement but not being "in scope" ??
my try so far is:
val renderFilm: ItemRenderer<Film> = { film: Film, itemProps: IItemRendererProps ->
if (!itemProps.modifiers.matchesPredicate) {
null;
}
val text = "${film.rank}. ${film.title}"
child(MenuItem::class) {
attrs.key = film.rank
attrs.active = itemProps.modifiers.active
attrs.disabled = itemProps.modifiers.disabled
attrs.label = film.year.toString()
attrs.onClick = itemProps.handleClick
attrs.text = highlightText(text, itemProps.query)
}
}
val filterFilm : ItemPredicate<Film> = { query: String, film: Film, index: Number, exactMatch: Boolean ->
"${film.rank}. ${film.title.toLowerCase()} ${film.year}".indexOf(query.toLowerCase()) >= 0
}
but obviously the lambda has no `child(MenuItem::class
)` method I can use ...
how would I implement an ItemRenderer which returns the ReactElement ??Dirk Hoffmann
01/06/2021, 7:20 PMgaetan
01/07/2021, 12:58 PMJaroslav
01/07/2021, 3:17 PMbbaldino
01/08/2021, 6:37 PMLammert Westerhoff
01/10/2021, 3:25 PMwindow.fetch
with exactly the same url it does work. Anyone has any how to fix this?travis
01/11/2021, 12:16 AMLEGACY
) via generated static web page (using ./gradlew browserDistribution
and opening generated index.html
in browser)?
(looking to create a simple web page and deploy it to GitHub Pages)
Kotlin (module named webapp
)
@JsExport
fun main() { <http://console.info|console.info>("hi") }
@JsExport
fun hello() { <http://console.info|console.info>("hi") }
JavaScript
webapp.main() // Works when using `browserDistribution` and `browserDevelopmentRun` Gradle tasks.
webapp.hello() // Only works when using `browserDevelopmentRun` task.
Harald Pehl
01/12/2021, 7:43 AMsolidogen
01/12/2021, 11:43 PMJustin
01/13/2021, 4:29 PMProject
• SubProjectA
_Dependencies_:
• SubProjectB
_Dependencies_:
SubProjectA
• SubProjectC
_Dependencies_:
SubProjectB
--------------------------------------------
...I am trying to create a Javascript build of SubProjectC that can be used by a Typescript-based backend service.
The goal is to be able to add the JS build of SubProjectC via yarn
(or npm
).
I am able to create a JS build by adding the following in the build.gradle.kts
of all subprojects:
js(IR) {
useCommonJs()
browser {
testTask {
enabled = false
}
}
binaries.executable()
}
But when I try to call methods on the build of SubProjectC, it says it cannot find the nested dependencies (i.e. SubProjectA/SubProjectB).
Anyone know of any sample projects out there with this sort of layout?Lammert Westerhoff
01/13/2021, 9:36 PMMainScope
to launch a new coroutine in which I collect the Flow. If I leave things like that and the component gets unmounted because the user for example logs out, then the coroutine keeps running and collecting from the flow after the component is unmounted, resulting in React errors/warnings. I solved it by assigning a Job and then cancelling it in componentWillUnmount
. This doesn’t feel right though and I’d prefer some better solution in case anyone has suggestions. I was thinking something similar as Android view models have a viewModelScope
that automatically gets cancelled when the view model is cleared, but I can’t seem to find a way to do this.Emmanuel Oga
01/15/2021, 4:32 AMHampus Londögård
01/16/2021, 1:59 AMgenovich
01/16/2021, 10:00 AMspierce7
01/18/2021, 5:50 PMAndrew Adams
01/19/2021, 12:21 AMcommon/commonMain
. What I have right now will build if I include the enableFeaturePreview("GRADLE_METADATA") in settings.gradle
but will not be detected by intellij. If I do not include it, I can not build.
Apologies for the spam for those watching the other channel as well.jessewilson
01/19/2021, 3:52 AMSTRING_CASE_INSENSITIVE_ORDER
output
UNDEFINED_RESULT
These are all defined as top-level vals. My best guess is that the dead code eliminator doesn’t know how to prune these. Is that deliberate? Any idea what a fix might look like?