After developing a Kotlin Multiplatform application that generates JS and TypeScript output files, I am now exploring how to integrate these output files into a TypeScript project. As someone new to TypeScript and the npm ecosystem, I'm navigating through the process step by step.
https://i.sstatic.net/NMxbg.png
The initial package.json file located inside the hotel directory is configured as follows:
{
"main": "kotlin/hotel.js",
"devDependencies": {
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"source-map-loader": "0.2.4",
"webpack-dev-server": "3.10.3",
"css-loader": "3.4.2",
"style-loader": "1.1.3"
},
"dependencies": {
"kotlin": "file:/home/vlad/Code/hotel-state/build/js/packages_imported/kotlin/1.4.0-M2",
"kotlin-source-map-loader": "file:/home/vlad/Code/hotel-state/build/js/packages_imported/kotlin-source-map-loader/1.4.0-M2"
},
"peerDependencies": {},
"optionalDependencies": {},
"bundledDependencies": [],
"name": "hotel",
"version": "1.0.0"
}
The second package.json file found inside the js directory has the following setup:
{
"private": true,
"workspaces": [
"packages/hotel",
"packages/hotel-test"
],
"devDependencies": {},
"dependencies": {},
"peerDependencies": {},
"optionalDependencies": {},
"bundledDependencies": [],
"name": "hotel",
"version": "1.0.0"
}
In order to link from the hotel directory, I executed:
sudo npm link hotel
For my second project, I added the following to my package.json followed by an npm install:
"dependencies": {
"hotel": "file:/usr/lib/node_modules/hotel",
"lit-html": "^1.2.1"
},
https://i.sstatic.net/UgRgM.png
Despite seeing the hotel package in the autocomplete prompt, it consistently displays a red line underneath. When attempting to use it within other TypeScript files, the compilation process halts.
The typescript headers in the hotel.d.ts contain a namespace delineation:
declare namespace hotel {
type Nullable<T> = T | null | undefined
namespace com.harakati.hotel {
/* ErrorDeclaration: Class com.harakati.hotel.TH with kind: OBJECT */
}
namespace com.harakati.hotel {
class Room {
constructor(roomNumber: Nullable<number>)
static Room_init_$Create$(roomNumber: Nullable<number>, $mask0: number, $marker: Nullable<any /*Class kotlin.js.DefaultConstructorMarker with kind: OBJECT*/>): com.harakati.hotel.Room
roomNumber: number;
}
}
Have I properly linked the packages?
Is the inclusion of this linked package accurate?
Are there any additional steps or details that may have been overlooked during this integration process?