I am interested in developing a JavaScript library using Kotlin Multiplatform (such as the project found here, which includes a websocket server and a JavaScript client). My goal is to build this library as an npm package and then import it into my Vue project, or any other framework.
What I have achieved so far with the chat project:
- Built the JavaScript sources using
./gradlew build - Published them using
yarn publish(configured remote registry URL) - Added the published package to
package.jsonby manually updating the project name to@chat/clientin the generatedpackage.json:
{
"name": "@chat/client",
"version": "0.0.1",
"private": false,
"workspaces": [
"packages/chat-frontend",
"packages/chat-frontend-test",
"packages_imported/kotlin/1.6.21",
"packages_imported/ktor-ktor-client-core-js-ir/2.0.0",
"packages_imported/kotlin-test-js-runner/1.6.21"
],
"resolutions": {},
"devDependencies": {},
"dependencies": {},
"peerDependencies": {},
"optionalDependencies": {},
"bundledDependencies": []
}
- Added
@JsExportannotation onwriteMessagein src/frontendMain/kotlin/main.kt
Challenges I faced in my Vue project:
- Importing
writeMessagethat was exported in a .kt file (visible in source but not actually exported) - Importing anything via
import * from '@chat/client' - Accessing any other folder along
'@chat/client/*' - Using the generated files in any meaningful way
The structure of the generated package seems unconventional:
~ ls build/js/*
build/js/package.json build/js/yarn.lock
build/js/node_modules:
... (npm dependencies from Kotlin/JS module)
build/js/packages:
chat-frontend chat-frontend-test
build/js/packages_imported:
... (Kotlin/JS dependencies)
~ ls build/js/packages/chat-frontend/*
build/js/packages/chat-frontend/package.json build/js/packages/chat-frontend/webpack.config.js
build/js/packages/chat-frontend/kotlin:
chat-frontend chat-frontend.js chat-frontend.js.map chat-frontend.meta.js
(chat-frontend contains package dir tree and a file frontend.kjsm)
build/js/packages/chat-frontend/kotlin-dce:
chat-frontend.js
ktor-*.js
kotlinx-*.js
... (compiler output ???)
build/js/packages/chat-frontend/node_modules:
... (webpack cli and dev-server files)
If you have any insights, tips, or examples of projects that demonstrate this integration, please share. I have reviewed the Kotlin/JS documentation extensively but could not find information on importing Kotlin-generated .js files in a JavaScript/TypeScript project.
EDIT:
I have updated my fork of the ktor-samples project with Kotlin/JS build files: build-js folder and
src/backendMain/resources/chat.jschat folder in the forked project.