Uno Platform から JavaScript のライブラリを使いたい

日本語情報だとひらりんさんのブログにまとまってます！

himanago.hatenablog.com

私がはまったのは、iziToast というライブラリでトースト出そうとして

function showToast(text) {
    iziToast.show({ title: 'Info', message: text });
}

という関数を JS に作って C# 側から以下のように呼んでも iziToast が undefined になっていてエラーになる感じです。iziToast.js と css は WasmScripts と WasmCSS フォルダーにおいて埋め込みリソースに設定していてもダメでした。

WebAssemblyRuntime.InvokeJS($"showToast('{text}');");

解決策

iziToast.js をステップ実行していると最初の iziToast の宣言をする処理が以下のようになっていたのですが

最初の if 文に入っていて define 関数で定義されるようなルートを通ってました。require.js が Uno Platform の WASM の実行時には読み込まれているようで（実際に Chrome の開発者モードで見てみるとそうなってました）特に名前指定なしで define したときはファイル名で require しないといけないみたいなんですね。

qiita.com

なので、JavaScript の showToast を以下のようにして require するようにしたら無事 iziToast を Uno Platform から使えました。

// こんな感じかfunction showToast(text) {
    require(['iziToast'], function (iziToast) {
        iziToast.show({ title: 'Info', message: text });
    });
}// こっちでも OKconst iziToast = require('iziToast');
function showToast(text) {
    iziToast.show({ title: 'Info', message: text });
}

ちゃんとトースト出てますね。

iziToast のサイト

https://izitoast.marcelodolza.com/