Hey all … I posted this in <#C3PQML5NU|multiplatfo...

# javascript

[Bradleycorn]

Hey all … I posted this in #multiplatform but got no response. Hopefully someone here can help me with this javascript issue:
I’ve created a new multiplatform project that creates a library and one of its targets is javascript. I’m trying to produce a package that I can publish to an npm registry. Everything complies OK, but the output for the js target seems …. odd.  The produced package.json files have a few problems:
1. they have dependencies with “hardcoded” absolute file paths, like:  "kotlin": "file:/Users/brad.ball/dev/multiplatform/new/wager-utils/build/js/packages_imported/kotlin/1.5.0",
2. the dependencies list contains entries for kotlin-test-js-runner and kotlin-test . Why would those be dependencies for a published package? Seems like at best they should be devDependencies.
With the hard coded file paths, you can’t really publish the package or use it anywhere but on the machine where it was generated…
The full package.json output is included in the replies thread…

Am I doing something wrong? I have a pretty standard gradle config, haven’t really changed much from what was produced by IntelliJ when creating the project. (edited)

[Bradleycorn]

here’s what the full package.json output looks like:

{
  "name": "wager-utils",
  "version": "1.1.6",
  "main": "kotlin/wager-utils.js",
  "devDependencies": {},
  "dependencies": {
    "kotlin": "file:/Users/brad.ball/dev/multiplatform/new/wager-utils/build/js/packages_imported/kotlin/1.5.0",
    "kotlin-test-js-runner": "file:/Users/brad.ball/dev/multiplatform/new/wager-utils/build/js/packages_imported/kotlin-test-js-runner/1.5.0",
    "kotlin-test": "file:/Users/brad.ball/dev/multiplatform/new/wager-utils/build/js/packages_imported/kotlin-test/1.5.0"
  },
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": []
}

[turansky]

AFAIK separate “public” packageJson tasks exists

[Bradleycorn]

yep, I tried ./gradlew jsPublicPackageJson and it produced this package.json :

{
  "name": "wager-utils",
  "version": "1.1.6",
  "main": "wager-utils.js",
  "types": "wager-utils.d.ts",
  "devDependencies": {},
  "dependencies": {},
  "peerDependencies": {},
  "optionalDependencies": {},
  "bundledDependencies": []
}

There’s no dependencies listed at all, so I presume the wager-utils.js that it references is supposed to have all the dependencies bundled in (and webpack’d??). But, there’s no wager-utils.js file in the directory with the package.json … I’m not sure where to find the appropriate wager-utils.js ?

[turansky]

I’m not sure where to find the appropriate wager-utils.js

build/distributions ?

[Bradleycorn]

there’s a version in /build/distributions/wager-utils.js but that seems WAY too small to have everything bundled; it’s only 560 bytes?

[turansky]

IR?

[Bradleycorn]

am I using IR?

[turansky]

Which compiler do you use? IR or legacy?

[Bradleycorn]

yes I believe I’m using IR (sorry, I’m new to multiplatform and using kotlin for js).
but let me double check. If I remember right, the IR setup for multiplatform is a little bit different

[Bradleycorn]

Yep, I’m using multiplatform version 1.5.0 (I think 1.5 has IR enabled by default, right?), and my js target specifies it explicitly:

js(IR) {
        browser {
            commonWebpackConfig {
                cssSupport.enabled = false
            }
        }
        binaries.executable()
    }

[turansky]

In IR you need to use @JsExport annotation, if you want to export type or function

[Bradleycorn]

ah ha!

[turansky]

Otherwise you will have empty distribution

[Bradleycorn]

which explains the tiny output file 🙂

[Bradleycorn]

That would explain it.. I’m porting over from a really old original version of this project ( think the old version was using kotlin 1.3.4) …

Ok, so I guess I could switch it to use the legacy compiler … But that seems dumb and not “future proof”, so perhaps I’m better off adding the annotation where neccessary. Luckily this project is pretty small so that shouldn’t be too bad

[Bradleycorn]

Thanks for your help @turansky.. This should get me pointed in the right direction!

[turansky]

Feel free to ask new questions! 🙂
Do you need root export in you library?

[Bradleycorn]

@turansky I do have a new question …
I’ve got a class kind of like this:

package com.myLib

@JsExport
class MyClass internal constructor(private val myProp: Int) {
   // .. some methods and properties ... 

   companion object {
       fun create(value: Int): MyClass {
              return MyClass(value * 2)
       }
   }
}

[Bradleycorn]

it builds fine … and I can use it in another js application.
However, it doesn’t seem to have the companion object for MyClass … in my other js application (it’s Angluar) if I do:

import { com } from '../../myLib'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'web';

  public test() {
    
    let temp = com.myApp.MyClass.Companion.create(1);
  }

}

it fails and says Property ‘Companion’ does not exist on type ‘typeof MyClass’

[turansky]

Which Kotlin version do you use?
AFAIK It’s resolved in 1.5.0

[Bradleycorn]

plugins {
    kotlin("multiplatform") version "1.5.0"

1.5.0

[turansky]

You can remove redundant com.myApp. package via Webpack 🙂
Looks like you need root export. 🙂

[Bradleycorn]

yeah that would be nice

[turansky]

Namespace emulation

[Bradleycorn]

interesting workaround

[turansky]

Like with @JsStatic :)