Figma Svelte plugin Rollup + Typescript config

README.md

Using two directories in src folder: ui and code with two separate tsconfig files. ui folder contains an empty.ts file with export {} to satisfy the compiler.

This is a heavily modified Rollup config from https://github.com/thomas-lowry/figsvelte

rollup.config.js

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import svg from "rollup-plugin-svg";
import typescript from "@rollup/plugin-typescript";
import autoPreprocess from "svelte-preprocess";

/* Post CSS */
import postcss from "rollup-plugin-postcss";
import cssnano from "cssnano";

/* Inline to single html */
import htmlBundle from "rollup-plugin-html-bundle";

const production = !process.env.ROLLUP_WATCH;

export default [
  {
    input: "src/ui/main.js",
    output: {
      format: "iife",
      name: "ui",
      file: "src/_build/bundle.js",
    },
    plugins: [
      svelte({
        compilerOptions: {
          // enable run-time checks when not in production
          dev: !production,
        },
        preprocess: autoPreprocess(),
      }),

      typescript({
        sourceMap: !production,
        tsconfig: "./src/ui/tsconfig.json",
      }),

      // If you have external dependencies installed from
      // npm, you'll most likely need these plugins. In
      // some cases you'll need additional configuration —
      // consult the documentation for details:¡
      // https://github.com/rollup/plugins/tree/master/packages/commonjs
      resolve({
        browser: true,
        dedupe: (importee) =>
          importee === "svelte" || importee.startsWith("svelte/"),
        extensions: [".svelte", ".mjs", ".js", ".json", ".node"],
      }),
      commonjs(),
      svg(),
      postcss({
        extensions: [".css"],
        plugins: [cssnano()],
      }),
      htmlBundle({
        template: "src/ui/template.html",
        target: "public/index.html",
        inline: true,
      }),

      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production && terser(),
    ],
    watch: {
      clearScreen: false,
    },
  },
  {
    input: "src/code/code.ts",
    output: {
      file: "public/code.js",
      format: "cjs",
      name: "code",
    },
    plugins: [
      typescript({ tsconfig: "./src/code/tsconfig.json" }),
      commonjs(),
      production && terser(),
    ],
  },
];