3

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.

5
  • If I remember correctly your JS code has to be exported as an ES Module in order for JS Isolation to work. Not 100% sure but I can't see any other reason why your code should not work so that's where I would start to look. Commented Apr 12, 2023 at 11:40
  • I am very beginner for typescript. I follow this article typescriptlang.org/docs/handbook/gulp.html to compile to javascript. It provided the quoted javascript code Commented Apr 12, 2023 at 11:55
  • Unfortunately I don't work with JS/TS often enough to be able to tell you how to transform one type of module into another. But since most of the js code you provided is just plumbing code, rewriting the actual functionality in a simple ES Module should be trivial. Commented Apr 12, 2023 at 13:37
  • My question here would be: where did you find this lazy moduleTask approach that seemingly imports a JavaScript bundle when a button is clicked? Never seen such a thing. Also learn.microsoft.com/en-us/aspnet/core/blazor/… does not document this. The solution here would surely be to add the js file to the head section of your html page or any other supported location, so that it is correctly loaded when you open the page. Commented Apr 13, 2023 at 12:51
  • Lazy ModuleTask is using default template provided by the Microsoft for dotnet 7. Not sure in dotnet 6. Also mentioned and used in this video. youtube.com/live/I_zFlBKgl5s?feature=share Commented Apr 14, 2023 at 2:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.