【Figma】rollupとsvelteで作るFigmaプラグイン

2022-6-8

環境

Node v18.3.0
npm 8.12.1

設定ファイル

rollup

必要なプラグインをインストールする

npm i -D rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-typescript2 typescript tslib rollup-plugin-bundle-html-plus

rollup.config.jsを作成する

// rollup.config.js
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import html from "rollup-plugin-html-bundle";

export default [
    // code
    {
        input: "src/code.ts",
        output: {
            name: "code",
            file: "dist/code.js"
        },
        plugins: [
            typescript({ tsconfig: "tsconfig.json" }),
            nodeResolve(),
            commonjs({ transformMixedEsModules: true }),
        ],
        watch: {
            clearScreen: true
        }
    },
    // ui
    {
        input: "src/ui.html",
        output: {
            dir: "dist",
        },
        plugins: [
            html({
                target: 'dist/ui.html',
                inline: true,
            }),
        ]
    }
];

typescriptの設定

tsconfig.jsonを作成する

tsc --initで作成もできるが、このままコピーしても大丈夫

{
  "compilerOptions": {
    "lib": ["es5", "es6", "dom"],
    "strict": true,
    "noImplicitAny": false,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@figma"
    ],
    "esModuleInterop": true
  },
  "exclude": ["rollup.config.js"]
}

figma

npm i -D @figma/plugin-typings

manifest.jsonを作成する

{
    "name": "figcode",
    "api": "1.0.0",
    "main": "dist/code.js",
    "ui": "dist/ui.html"
}

codeとhtmlファイル

// src/code.ts
figma.showUI(__html__, { width: 600, height: 400 });
figma.ui.onmessage = (msg) => {
    if (msg.type == "cancel") {
        figma.closePlugin();
    }
}

<!-- src/template.html -->
<html>
  <head></head>
  <body></body>
</html>

<!-- src/ul.html -->

コマンド追加

package.jsonのscriptsにbuildを足して実行する

{
    "scripts": {
        "build": "rollup -c"
    }
}

npm run build

svelteを使う

まず必要なライブラリをインストールします

npm i -D svelte svelte-preprocess rollup-plugin-svelte @tsconfig/svelte rollup-plugin-json

設定ファイルの書き換え

installしたライブラリを読み込みます

...
import svelte from "rollup-plugin-svelte";
import preprocess from "svelte-preprocess";

import json from "rollup-plugin-json";

const isProduction = !process.env.ROLLUP_WATCH;

export default {
    ...
    // ui
    {
        input: "src/app.ts",
        output: {
            format: "umd",
            name: "ui",
            file: "dist/app.js",
        },
        plugins: [
            json(),
            svelte({
                dev: !isProduction,
                preprocess: preprocess(),
            }),
            typescript({ 
                tsconfig: "tsconfig.ui.json",
                sourceMap: !isProduction,
            }),
            nodeResolve({
                browser: true,
                dedupe: ["svelte"],
                extensions: [".svelte", ".ts", ".js"],
            }),
            commonjs({ transformMixedEsModules: true }),
            html({
                target: 'dist/ui.html',
                inline: true,
            }),
        ],
    }
}

次にsrc/app.tsとsrc/main.svelteを作成します

// src/app.ts
// @ts-ignore
import App from './main.svelte'

const app = new App({
  target: document.body,
})

export default app

// src/main.svelte
<script>
  let value = "change me!"
</script>

<input type="text" bind:value>
{value}

tsconfig.ui.jsonを作成する

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "compilerOptions": {
        "types": ["node", "svelte"]
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

cssを.cssファイルに分けない

rollup.config.jsを編集する

// rollup.config.js
...
export default [
    ...,
    // ui
    {
        ...,
        plugins: [
            svelte({
                ...,
                emitCss: false,
            })
        ]
    }
];

この設定でsvelteファイルをapp.tsやmain.svelteに読み込んでいけば,表示側はちゃんと作れそうです

参考

Building: Rollup Plugin HTML
@rollup/plugin-node-resolve
Create your first Figma plugin with Svelte

Mekogma