【AdobeXD】プラグイン開発4 プラグインファイルを分ける

チュートリアルをやる際

プラグインを一から作るのは面倒だったのでコメントアウトしていました。

ですが、コメントアウトが増えるとしんどいので、ファイルとして分割する方法を調べました。

dialog.jsというファイルを作りました。

dialog.js

// ダイアログを生成する
const showDialogY = (text) => {
    // create the dialog
    let dialog = document.createElement("dialog");

    // main container
    let container = document.createElement("div");
    container.style.minWidth = 400;
    container.style.padding = 40;

    // add content
    let title = document.createElement("h3");
    title.style.padding = 20;
    title.textContent = text;
    container.appendChild(title);

    // close button
    let closeButton = document.createElement("button");
    closeButton.textContent = "Yes";
    container.appendChild(closeButton);
    closeButton.onclick = (e) => {
        dialog.close();
    }

    document.body.appendChild(dialog);
    dialog.appendChild(container);
    dialog.showModal()
}

const showDialogTest = () => {
    showDialogY("Test");
}

module.exports = { // ..(1)
    showDialogY,
    showDialogTest
}

(1) module.exportsに公開する関数を登録

呼び出し側のmain.jsは以下のように記述

main.js

const { showDialogTest } = require("./dialog.js"); // ..(1)

module.exports = {
    commands: {
        "exportRendition": showDialogTest
    }
};

(1) ファイルのパスで取得する。

これできれい！