テーマコンポーネントにライブラリをロードする方法

開発
1

@merefield さん – これはまだこの方法で合っていますか？

qrcode.js を使ってブラウザでQRコードを生成しようとしています。

CSP にもブロックされています。同じホスト上にあるのに、なぜ CSP の問題なのか理解できません。これは本番サーバーで discourse_theme を使ってデバッグしています。

イニシャライザーにこれを記述しています。

import loadScript from "discourse/lib/load-script";
import { withPluginApi } from "discourse/lib/plugin-api";
// import QRCode from "discourse/lib/qrcode";
export default {
  name: "qrcode",
  ensureQRCode() {
    window.console.log(settings.theme_uploads.QRCode);
    return loadScript(settings.theme_uploads.QRCode).then(() => {
      return loadScript(settings.theme_uploads.QRCode);
    });
  },
  initialize(container) {
    withPluginApi("0.8.7", (api) => {
      api.decorateCookedElement((cooked, postWidget) => {
        const placeholderNodes = cooked.querySelectorAll(
          ".d-wrap[data-wrap=qrcode]"
        );
        this.ensureQRCode();
        // const qr = new QRCode(
        //   document.getElementById("qrcode"),
        //   "http://jindo.dev.naver.com/collie"
        // );
...

そして、コンポーネントでは行っていない this.ensureQRCode(); を呼び出さないと、スクリプトをロードする関数が呼び出されないようです。

スクリプトは利用可能で、取得できます（about.json と /assets/qrcode.js は正しく設定したはずです）。しかし、ブラウザはそれをロードすることを拒否します。

「いいね！」 2
2

loadscript の結果は Promise なので、それに依存するコードは、私の例のように .then ブロックに入れる必要があります。

「いいね！」 3
3

これが似たようなものかどうかわかりませんが（そうではないと思いますが）、これは簡単なはずなのに、私を狂わせています。

「いいね！」 1
4

どうもありがとうございます！

でも、それをやったと思ったのですが：

    return loadScript(settings.theme_uploads.QRCode).then(() => {
      return loadScript(settings.theme_uploads.QRCode);
    });

あなたの例をできるだけ少なく変更しようとしました :slight_smile:

後でコードを使用しようとするときに .then を使用する必要があるのでしょうか？

しかし、それはCSPの問題を解決しませんよね？

image

「いいね！」 2
5

私の2つの主なアドバイスは次のとおりです。

ライブラリをassetsフォルダに配置する

これによりCSPが解決され、テーマが自己完結型になり、サードパーティから読み込むのではなく、良い習慣と見なされます。

遅延読み込みする

必要になったときにのみ、await loadScriptを使用して遅延読み込みできます。これにより、必要のないページでは読み込まれず、サイト全体の速度が低下することはありません。

これらの良い実践に従っているテーマの良い例は、https://github.com/discourse/discourse-mermaid-theme-componentです。

「いいね！」 6
6

はい、まさにその通りです。:+1: 私の例ではそのようになっています。

「いいね！」 3
7

もう一つ質問があります。...initializers/mycode.js と ...api-initializers/mycode.js の違いは何ですか？

お二人とも、本当にありがとうございました！

それは良い例でした！理解することができました！

あなたの例に従ったつもりでしたが、JavaScriptはまだ、すべてが同じように見える、ねじれた迷路のようです。

「いいね！」 3