https://kotlinlang.org logo
#javascript
Title
# javascript
r

Reuben Firmin

12/14/2023, 11:54 AM
I'm wrapping Mermaid, and trying to install a plugin, but something's strange about the exported module. what they're looking for is:
Copy code
<script type="module">
  import mermaid from '<https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs>';
  import zenuml from '<https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs>';
  await mermaid.registerExternalDiagrams([zenuml]);
</script>
error and what I've got so far in thread
Copy code
@file:JsModule("mermaid")
@file:JsNonModule
package tdz.jslib

import org.w3c.dom.Element

@JsName("default")
external object Mermaid {

    fun initialize(options: InitOptions)

    fun registerExternalDiagrams(ext: Array<ExternalDiagram>)

    fun run(options: RunOptions)
}
...
external interface ExternalDiagram
Copy code
@file:JsModule("@mermaid-js/mermaid-zenuml")
@file: JsNonModule
package tdz.jslib

@JsName("plugin")
external object ZenUML: ExternalDiagram
error: Module not found: Error: Package path . is not exported from package /home/rfirmin/code/startup/thedozone/build/js/node_modules/@mermaid-js/mermaid-zenuml
also tried as:
Copy code
@JsName("default")
external val ZenUML: ExternalDiagram
a

Artem Kobzar

12/14/2023, 12:58 PM
and what is placed inside the
/home/rfirmin/code/startup/thedozone/build/js/node_modules/@mermaid-js/mermaid-zenuml
. Could you please show package.json
r

Reuben Firmin

12/14/2023, 12:59 PM
sure: ``````
Copy code
{
  "name": "@mermaid-js/mermaid-zenuml",
  "version": "0.1.2",
  "description": "MermaidJS plugin for ZenUML integration",
  "module": "dist/mermaid-zenuml.core.mjs",
  "types": "dist/detector.d.ts",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/mermaid-zenuml.core.mjs",
      "types": "./dist/detector.d.ts"
    },
    "./*": "./*"
  },
  "keywords": [
    "diagram",
    "markdown",
    "zenuml",
    "mermaid"
  ],
  "repository": {
    "type": "git",
    "url": "<https://github.com/mermaid-js/mermaid>",
    "directory": "packages/mermaid-zenuml"
  },
  "contributors": [
    "Peng Xiao (<https://github.com/MrCoder>)",
    "Sidharth Vinod (<https://sidharth.dev>)",
    "Dong Cai (<https://github.com/dontry>)"
  ],
  "license": "MIT",
  "dependencies": {
    "@zenuml/core": "^3.0.3"
  },
  "devDependencies": {
    "mermaid": "^10.3.0"
  },
  "peerDependencies": {
    "mermaid": ">=10.0.0"
  },
  "files": [
    "dist"
  ],
  "scripts": {}
}⏎
interestingly, the compiler picks up this error if I try to do:
Copy code
console.log(ZenUML)
...whereas if it's just:
Copy code
Mermaid.registerExternalDiagrams(arrayOf(ZenUML))
that turns into a runtime error
gross/hacky approach which works (but probably isn't maintainable):
Copy code
@JsModule("@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.core.mjs")
@JsNonModule
external val ZenUML: ExternalDiagram
Copy code
Mermaid.registerExternalDiagrams(arrayOf(ZenUML.asDynamic().default))
t

turansky

12/15/2023, 1:47 AM
Do you use
es
module kind?
r

Reuben Firmin

12/15/2023, 9:40 PM
Honestly I forget where we configured this. The whole bundle is imported into an htmx/kotlinx.html backend:
Copy code
// on the main class which is exported
@OptIn(ExperimentalJsExport::class)
@JsExport
...
Copy code
fun FlowContent.bundleInit() {
        script {
            src="/static/bundle/main.bundle.js"
        }

        script {
            unsafe {
                // initializes our bundle - see Lobster under jsMain
                raw("window.bundle = new lobster.ah.view.Lobster();")
            }
        }
    }