(Sorry for the late reply) This is what I would like to achieve (I use props/state/class components but it should be the same):

Is there any possibility declare

AbstractTester

in Kotlin (without js)?

This also exists: https://github.com/Kabbura/Kunafa

Quite often when I have a continuous gradle build running in a terminal, then build in IDEA starts to fail with this exception. Only a full IDEA "Rebuild project" will fix the problem. Am I the only one with this problem ?

Error:Kotlin: [Internal Error] kotlin.KotlinNullPointerException
	at org.jetbrains.kotlin.incremental.TranslationResultMap.remove(IncrementalJsCache.kt:166)
	at org.jetbrains.kotlin.incremental.IncrementalJsCache.clearCacheForRemovedClasses(IncrementalJsCache.kt:107)
	at org.jetbrains.kotlin.jps.targets.KotlinJsModuleBuildTarget.updateCaches(KotlinJsModuleBuildTarget.kt:228)
	at org.jetbrains.kotlin.jps.build.KotlinBuilder.doBuild(KotlinBuilder.kt:464)
	at org.jetbrains.kotlin.jps.build.KotlinBuilder.build(KotlinBuilder.kt:295)
... more

Hey all, I am trying to integrate Atlaskit React components into a Kotlin Fullstack application. Unfortunately, I cannot get this working, would appreciate any help. I am starting with this component, because it is the simplest in terms of props: Overview: https://atlaskit.atlassian.com/packages/core/blanket Code: https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/core/blanket/src/Blanket.tsx Compiled JS:

import * as tslib_1 from "tslib";
import * as React from 'react';
import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent, } from '@atlaskit/analytics-next';
import { name as packageName, version as packageVersion } from './version.json';
import Div from './styled';
var Blanket = /** @class */ (function (_super) {
    tslib_1.__extends(Blanket, _super);
    function Blanket() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Blanket.prototype.render = function () {
        var _a = this.props, canClickThrough = _a.canClickThrough, isTinted = _a.isTinted, onBlanketClicked = _a.onBlanketClicked;
        var onClick = canClickThrough ? null : onBlanketClicked;
        var containerProps = { canClickThrough: canClickThrough, isTinted: isTinted, onClick: onClick };
        return React.createElement(Div, tslib_1.__assign({}, containerProps));
    };
    Blanket.defaultProps = {
        canClickThrough: false,
        isTinted: false,
        onBlanketClicked: function () { },
    };
    return Blanket;
}(React.Component));
export { Blanket as BlanketWithoutAnalytics };
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
export default withAnalyticsContext({
    componentName: 'blanket',
    packageName: packageName,
    packageVersion: packageVersion,
})(withAnalyticsEvents({
    onBlanketClicked: createAndFireEventOnAtlaskit({
        action: 'clicked',
        actionSubject: 'blanket',
        attributes: {
            componentName: 'blanket',
            packageName: packageName,
            packageVersion: packageVersion,
        },
    }),
})(Blanket));
//# sourceMappingURL=Blanket.js.map

My binding:

@file:JsModule("@atlaskit/blanket")

package atlaskit

import org.w3c.dom.events.Event
import react.*

external class Blanket : Component<BlanketProps, RState> {
    override fun render()
}

external interface BlanketProps : RProps {
    var canClickThrough: Boolean
    var isTinted: Boolean
    var onBlanketClicked: (Event) -> Unit
}

Creation:

child(Blanket::class) {
                    attrs.isTinted = true
                    attrs.canClickThrough = true
                    attrs.onBlanketClicked = {}
                }

This prints following error to the console: "Uncaught (in promise) TypeError: Cannot read property '$metadata$' of undefined" Any tips on what I am doing wrong?

@bashor Any chance you could consider supporting officially Web Component via a Kotlin equivalent of https://www.polymer-project.org/blog/2019-02-05-lit-element-and-lit-html-release in Kotlin/JS (it could require fixing https://youtrack.jetbrains.com/issue/KT-24882 as hinted by @jdemeulenaere) in order to provide an attractive way to do frontend with Kotlin without requiring a full rewrite of Angular/Vue/React?

i may need help with using uglify.js on what dce spits out i am getting this error:

Parse error at build/kotlin-js-min/client-js/main/d2v-chord-js.js.map:1,10
{"version":3,"file":"d2v-chord-js.js","sources":["../../../../../d2v-chord-commo
          ^
ERROR: Unexpected token: punc «:», expected: punc «;»
    at JS_Parse_Error.get (eval at <anonymous> (/usr/lib/node_modules/uglify-js/tools/node.js:20:1), <anonymous>:71:23)
    at fatal (/usr/lib/node_modules/uglify-js/bin/uglifyjs:296:53)
    at run (/usr/lib/node_modules/uglify-js/bin/uglifyjs:240:9)
    at Object.<anonymous> (/usr/lib/node_modules/uglify-js/bin/uglifyjs:165:5)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)

an i am not sure if thats a well known error or if i am calling uglifyjs completely wrong

im receiving an object from "real" js code which has all the properties like a data class i defined, but is not an instance of that class. is there an easy way to convert it into an object of my class in that case?

Anyone here has experience with Gradle kotlin-frontend-plugin? I'm wondering whether npm dependencies with typescript definitions are directly usable from Kotlin without manual declaration of

external

declarations. I guess I could generate Kotlin externals using ts2kt, but is it done out-of-the box by the plugin?

What's this new dukat thing? https://github.com/Kotlin/dukat Does anybody know how it compares to ts2kt?

@Lawik I haven't tried this yet, but can you use the raw javascript to write the require statement?

Hello guys, I'm facing this rare issue:

ERROR in ../node_modules_imported/kotlin-extensions/kotlin-extensions.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/home/sergio/projects/timesheet/js/build/node_modules_imported/kotlin-extensions'
 @ ../node_modules_imported/kotlin-extensions/kotlin-extensions.js 112:37-78
 @ ../node_modules_imported/kotlin-react-dom/kotlin-react-dom.js
 @ ./output.js

Any help? It's rare because I have another project with exactly the same structure and works fine I'll paste the build.gradle file on the thread

Could I call firebase from kotlin?

How can I load assets (png, svg, etc) when using the

kotlin-frontend

plugin? Preferably from the

resources

folder.

Kotlin react wrapper says "Major version number of this wrapper matches that of React itself." Unfortunately, only 16 is available: https://bintray.com/kotlin/kotlin-js-wrappers/kotlin-react Is an 16.8.x in the works?

how would i create objects of an `external`ly defined classes?

What are the main problems that Angular, ReactJS and VueJS solve? As i understand it, all three of them have a change detection mechanism that can figure out when data changes and then a mechanism to figure out which parts of the DOM to update. Is there a whitepaper somewhere explaining what algorithms they use for change detection and what they use to figure out which parts of the DOM needs updating? Curious about how much work it would be to build a pure KotlinJS framework that runs on top of kotlinx.html

I see this pattern a lot but I cant really figure out how to do the same from KotlinJS. Ie. how can I define a class and then export it in a decorated fashion?

class MyComponent extends React.Component {
  render () {
    return <div className={this.props.classes.root} />;
  }
}

export default withStyles(styles)(MyComponent);

I am about to build a webpack for myself from a project that is an MPP. In older examples, I find gradle stuff like 'kotlinFrontend { webpackBundle { ... } }'. Would anyone know how to get a webpack of my javascripts from an mpp (or is this question better suited for #multiplatform maybe?)

If we try to implement interface, it produce generating

getter/setters

via

Object.defineProperty

. For example:

external interface IModel {
    val id: Int
    var name: String
}

class CModel (
    override val id: Int,
    override var name: String
) : IModel

will transpilled to:

function CModel(id, name) {
    this.id_4s8xc9$_0 = id;
    this.name_j0rqo7$_0 = name;
  }
  Object.defineProperty(CModel.prototype, 'id', {
    get: function () {
      return this.id_4s8xc9$_0;
    }
  });
  Object.defineProperty(CModel.prototype, 'name', {
    get: function () {
      return this.name_j0rqo7$_0;
    },
    set: function (name) {
      this.name_j0rqo7$_0 = name;
    }
  });

How to avoid generating

getter/setter

? I need to interact with JS/TS libs. And such libs see only mangled fields, because properties defined via

Object.defineProperty

not accessible by

Object.getOwnPropertyNames()

. Using

external interface

and

@JsName()

don't help. If we define

class

, which does not implement any

interface

such

getter/setters

will not be generated. I also noticed that such

getter/setters

are generated only for properties which have

override

Hello, kotlin-frontend-plugin generates package.json with 'kotlin' dependency If Kotlin/JS is used for distibuting js library (kotlin is bundled) and consumers depend on this library, they should install 'kotlin' dependency. But why is it necessary, if it was bundled? And where can they take 'kotlin' dependency from?

Is this

kotlin-dce-js

plugin (https://kotlinlang.org/docs/reference/javascript-dce.html) still the thing to use, or is this frontend plugin replacing it? https://github.com/Kotlin/kotlin-frontend-plugin

Anyone knows an implementation of

Result<V, E : Exception>

(similar to: https://github.com/kittinunf/Result) with support for Kotlin/JS?

I'm trying to get kotlinjs to work with Firebase cloud functions, but I'm running into an issue when I build my project. The structure of the project calls for a directory called

/functions

that contains

index.js

,

node_modules

,

package.json

and

package-lock.json

. My source is in

/src/main/kotlin

. Every time I build,

index.js

is correctly put into

/functions

but the other files are deleted. My

build.gradle

file is below. Any one have any advice?

plugins {
    id 'kotlin2js' version '1.3.31'
}

group 'com.myapp'
version '1.0.0'

repositories {
    mavenCentral()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

compileKotlin2Js.kotlinOptions {
    moduleKind = "commonjs"
    outputFile = "functions/index.js"
    sourceMap = true
}

More context: if I "build" using Intellij this happens. If I run

./gradlew build

it does not.

Hey guys! I'm getting an error when trying to call a function created with Koltin and coroutines from javascript. It's a very simple call:

applicationApi.fetchCharacters(function (result) {
    console.log(result)
})

And the error:

IllegalStateException: No more continuations to resume

Any suggestion on what it's going on?

I see a lot of work in the Gradle plugin https://github.com/JetBrains/kotlin/tree/master/libraries/tools/kotlin-gradle-plugin/src/main/kotlin/org/jetbrains/kotlin/gradle/targets/js. There are npm and webpack. When can this be expected in the release? Does this mean that https://github.com/Kotlin/kotlin-frontend-plugin becomes obsolete?

How can I access Js Array in Kotlin file ?

This message was deleted.