I'm wrapping Mermaid, and trying to install a plug...

# javascript

[Reuben Firmin]

I'm wrapping Mermaid, and trying to install a plugin, but something's strange about the exported module. what they're looking for is:

<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

[Reuben Firmin]

@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

@file:JsModule("@mermaid-js/mermaid-zenuml")
@file: JsNonModule
package tdz.jslib

@JsName("plugin")
external object ZenUML: ExternalDiagram

[Reuben Firmin]

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

[Reuben Firmin]

https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/mermaid.ts#L238

[Reuben Firmin]

https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid-zenuml/src/detector.ts

[Reuben Firmin]

also tried as:

@JsName("default")
external val ZenUML: ExternalDiagram

[Artem Kobzar]

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

[Reuben Firmin]

sure:

``````

[Reuben Firmin]

{
  "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": {}
}⏎

[Reuben Firmin]

interestingly, the compiler picks up this error if I try to do:

console.log(ZenUML)

...whereas if it's just:

Mermaid.registerExternalDiagrams(arrayOf(ZenUML))

that turns into a runtime error

[Reuben Firmin]

gross/hacky approach which works (but probably isn't maintainable):

@JsModule("@mermaid-js/mermaid-zenuml/dist/mermaid-zenuml.core.mjs")
@JsNonModule
external val ZenUML: ExternalDiagram

Mermaid.registerExternalDiagrams(arrayOf(ZenUML.asDynamic().default))

[turansky]

Do you use es module kind?

[Reuben Firmin]

Honestly I forget where we configured this. The whole bundle is imported into an htmx/kotlinx.html backend:

// on the main class which is exported
@OptIn(ExperimentalJsExport::class)
@JsExport

...

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();")
            }
        }
    }