I can't seem to find any information about this, and I'm not sure if this is possible.
In a standard react app, you can do something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Client</title>
</head>
<body>
<div id="root"></div>
<script src="external_app_sdk.js"></script>
</body>
</html>
And then in the actual react app made in javascript, you can reference anything from link-to-external-javascript.js by importing it.
I'm working on a proof-of-concept project with Kotlin/JS, trying to build a react app which needs to reference javascript which is included in the index.html
file. So my file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Client</title>
</head>
<body>
<script src="Proof-of-Concept-React-App.js"></script>
<script src="external_app_sdk.js"></script>
</body>
</html>
I'm definitely not understanding how scope works here. My react components need to use javascript functions from external_app_sdk.js
and I'm not sure how to get them to be usable.
FWIW: I'm working on an iframe app which sits inside a website. This imported javascript exposes an API for that website which allows data to be retrieved from "above" the iframe.
Option B: Apparently, there is also an npm package which I could potentially add to my dependencies to expose these functions in kotlin like this:
implementation(npm("external_app_sdk", "1.2.3"))
But since it's pure JS, I know that I'll need to provide wrappers. That's not an issue, but the npm module doesn't have any module exports defined, so I don't think I can actually create wrappers for it. If anyone has any info about this, that would be much appreciated.