https://kotlinlang.org logo
Join Slack
Powered by
Hello everyone, are there anywhere guides for cre...
# javascript
z
Hello everyone, are there anywhere guides for creating KotlinJS Wrappers for Typescript libraries? I'm trying to create a wrapper for React Wordcloud, but i dont get how to wrap the important library parts (https://www.npmjs.com/package/react-wordcloud) (Especially this 
export type
thing, i dont get how to wrap this for KotlinJS)
✔️ 1
t
Copy code
// TS
type X = string

// Kotlin
typealias X = String
Copy code
// TS
type Z = 'a' | 'b' | 'c'

// Kotlin
@JsName("String")
external sealed class Z

object Zs {
   val A: Z = "a".unsafeCast<Z>()
   val B: Z = "b".unsafeCast<Z>()
   val C: Z = "c".unsafeCast<Z>()
}
z
Ah, okay. Thanks!
t
One more example
Copy code
// Kotlin
@JsName("String")
external sealed class Z

private fun Z(source:String) =
    unsafeCast<Z>() 

object Zs {
   val A: Z = Z("a")
   val B: Z = Z("b")
   val C: Z = Z("c")
}
👍 1
z
@turansky Thank you again for your help, i managed to get it mostly running. But i cannot find a mapping for 
JSX.Element
do you know a way to map it? (or do i need to implement it by myself?)
Because 
ReactElement
does not seem to work
t
Because 
ReactElement
 does not seem to work
In which cases?
z
Copy code
@file: JsModule("react-wordcloud")
@file: JsNonModule

package react.wordcloud

import react.*

external interface Props {
    var callbacks: Callbacks
    var maxWords: Number?
    var minSize: MinMaxPair
    var options: Options
    var size: MinMaxPair
    var words: List<Word>
}

external fun ReactWordcloud(props: Props): ReactElement
Maybe i'm using it in a wrong way, i have only little experience with JavaScript in general.
It is also possible that i am misinterpreting the error, i'll post them here
Copy code
Uncaught TypeError: ReactWordcloud is not a function
    at reactWordCloud (webpack-internal:///./kotlin/firmensuche.js:11542)
    at AppComponent.render_ss14n$ (webpack-internal:///./kotlin/firmensuche.js:10772)
    at eval (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:601)
    at buildElements (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:221)
    at AppComponent.RComponent.render (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:606)
    at finishClassComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17160)
    at updateClassComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17110)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:237)
Copy code
webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:19527 The above error occurred in the <AppComponent> component:
    in AppComponent (created by Context.Consumer)
    in Route (created by RootComponent)
    in Switch (created by RootComponent)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by RootComponent)
    in RootComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit <https://fb.me/react-error-boundaries> to learn more about error boundaries.
Copy code
Uncaught TypeError: ReactWordcloud is not a function
    at reactWordCloud (webpack-internal:///./kotlin/firmensuche.js:11542)
    at AppComponent.render_ss14n$ (webpack-internal:///./kotlin/firmensuche.js:10772)
    at eval (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:601)
    at buildElements (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:221)
    at AppComponent.RComponent.render (webpack-internal:///../../packages_imported/kotlin-react/0.0.0/kotlin-react.js:606)
    at finishClassComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17160)
    at updateClassComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17110)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:237)
t
ReactWordcloud.kt
ReactWordcloud.kt
👍 1
z
Thanks again! After applying your solution it compiled, But now i have an other problem:
Copy code
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ReactWordCloud`.
    at createFiberFromTypeAndProps (react-dom.development.js?18e1:23965)
    at createFiberFromElement (react-dom.development.js?18e1:23988)
    at reconcileSingleElement (react-dom.development.js?18e1:14233)
    at reconcileChildFibers (react-dom.development.js?18e1:14293)
    at reconcileChildren (react-dom.development.js?18e1:16762)
    at finishClassComponent (react-dom.development.js?18e1:17180)
    at updateClassComponent (react-dom.development.js?18e1:17110)
    at beginWork (react-dom.development.js?18e1:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js?18e1:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?18e1:237)
I did some trial and error, but it didn't change the result.
This is my code for the whole import section.
Imports.kt
t
Works?
Is it functional component (
ReactWordcloud
) ?
z
Yes, the functional component is 
ReactWordcloud
. In the original code it is defined as 
export default function ReactWordcloud(props: Props): JSX.Element;
(see https://github.com/chrisrzhou/react-wordcloud/blob/master/src/index.d.ts)
And calling it causes my SPA to crash.
t
Copy code
@JsModule("react-wordcloud")
external val ReactWordcloud:FunctionalComponent<WordcloudProps>
z
Thanks again! I changed the 
ReactWordcloud
to
Copy code
@JsModule("react-wordcloud")
@JsNonModule
external val ReactWordcloud: FunctionalComponent<WordCloudProps>
and tired to call it in my application with
Copy code
child(ReactWordcloud){
    attrs {
        words = listOf(
                WordImpl("Test1", 1),
                WordImpl("Test2", 2),
                WordImpl("Test3", 3)
        )
    }
}
But unfortunalety, the error does not change
Copy code
ncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `AppComponent`.
    at createFiberFromTypeAndProps (react-dom.development.js?18e1:23965)
    at createFiberFromElement (react-dom.development.js?18e1:23988)
    at createChild (react-dom.development.js?18e1:13628)
    at reconcileChildrenArray (react-dom.development.js?18e1:13900)
    at reconcileChildFibers (react-dom.development.js?18e1:14305)
    at reconcileChildren (react-dom.development.js?18e1:16762)
    at updateHostComponent (react-dom.development.js?18e1:17302)
    at beginWork (react-dom.development.js?18e1:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js?18e1:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?18e1:237)
Is there maybe a problem with kotlin and TypeScript?
t
1.4-M3
?
z
No i'm using 
1.3.72
To be more precise: I've installed the 
1.4-M3
Kotlin-Plugin, but i've configured i my gradle 
kotlin("multiplatform") version "1.3.72"
t
Try this please
Copy code
@file:JsModule("react-wordcloud")

@JsName("default")
external val ReactWordcloud:FunctionalComponent<WordcloudProps>
✔️ 1
Separate file required
z
It worked! Thanks a lot!
But i'm a little bit confused, why does this work?
Or better: why does is not work in the same file
t
You can vote for ticket 🙂
z
Thanks again!
t
cc @Ilya Goncharov [JB]
z
And i voted ^^
Short feedback: Thanks to your fix i can continue with my work. But it was quite frustrating to figure that out and it cost me like 3 days and i needed you help. If they want to keep this "feature" in Kotlin there should be at least a 
Warning
(Compiler or IDE doesn't matter)
@turansky At this point, i want to thank you again, you saved me a lot of time (As i said before, i'm usually developing backend and thats my first time doing frontend with JS)
t
@zeugederunity Feel free to ask new questions 🙂
👍 1
2 Views
Open in Slack
PreviousNext
Powered by