I have this javascript library that is written in TypeScript
(function(f) {
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = f()
} else if (typeof define === "function" && define.amd) {
define([], f)
} else {
var g;
if (typeof window !== "undefined") {
g = window
} else if (typeof global !== "undefined") {
g = global
} else if (typeof self !== "undefined") {
g = self
} else {
g = this
}
g.richTextEditor = f()
}
}
)(function() {
var define, module, exports;
return (function() {
function r(e, n, t) {
function o(i, f) {
if (!n[i]) {
if (!e[i]) {
var c = "function" == typeof require && require;
if (!f && c)
return c(i, !0);
if (u)
return u(i, !0);
var a = new Error("Cannot find module '" + i + "'");
throw a.code = "MODULE_NOT_FOUND",
a
}
var p = n[i] = {
exports: {}
};
e[i][0].call(p.exports, function(r) {
var n = e[i][1][r];
return o(n || r)
}, p, p.exports, r, e, n, t)
}
return n[i].exports
}
for (var u = "function" == typeof require && require, i = 0; i < t.length; i++)
o(t[i]);
return o
}
return r
}
)()({
1: [function(require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.showHello = void 0;
const greet_1 = require("./greet");
function showHello(divName, name) {
const elt = document.getElementById(divName);
elt.innerText = (0,
greet_1.sayHello)(name);
}
exports.showHello = showHello;
}
, {
"./greet": 2
}],
2: [function(require, module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sayHello = void 0;
function sayHello(compiler) {
return `Hello from ${compiler}`;
}
exports.sayHello = sayHello;
}
, {}]
}, {}, [1])(1)
});
and I am trying to execute showHello function in this library using JSInterop in Blazor using following code
public class TypeScriptInterop
{
private readonly Lazy<Task<IJSObjectReference>> _moduleTask;
public TypeScriptInterop(IJSRuntime jsRuntime)
{
_moduleTask = new(()=>
jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazored.RichTextEditor/js/bundle.generated.js").AsTask());
}
public async ValueTask TsButtonClicked()
{
var javaScript = await _moduleTask.Value;
if (_moduleTask.IsValueCreated)
{
Console.WriteLine("Captured Js");
}
await javaScript.InvokeVoidAsync("richTextEditor.showHello", "greeting", "Ubhaya");
}
}
when I run this I get the error message saying
WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find ‘richTextEditor.showHello’ (‘richTextEditor’ was undefined).
but if I use <script src="./_content/Blazored.RichTextEditor/js/bundle.generated.js"></script>
inside the index.html in blazor wasm project. it works correctly.
I am trying to create a Blazor component library. is there a way to do this in my current approach since I want to use JS isolation.