ブラウザで使用するためsvelte用のprettierプラグインをUMD版でビルドする備忘録

コード整形ツールのPrettierをブラウザで使用する
 コード整形ツールのPrettierをブラウザで使用する2(php編)
svelte用のprettierプラグインprettier-plugin-svelteのエラー対処の備忘録
これらの記事の延長線でsvelteをブラウザでprettierにかけたかったときの備忘録。例によって現状公式のパーサー一覧にはsvelteがない。
thebells1111氏のプルリクを参考にする。
thebells1111氏はsvelte-prettier-browser-plugin-demoというデモも行っている。
加えてUMD化はplugin-phpを参考にする。standalone化するときのコミットログとrollup.config.jsが特に重要。

UMD化

大元はprettier-plugin-svelteを使用する。

git clone https://github.com/sveltejs/prettier-plugin-svelte
cd https://github.com/sveltejs/prettier-plugin-svelte
npm install

必要な追加パッケージをインストールする。

npm install rollup-plugin-alias
npm install rollup-plugin-replace
npm install rollup-plugin-babel
npm install rollup-plugin-json
npm install rollup-plugin-terser
npm install @babel/core
npm install @babel/preset-env
npm install buffer

plugin-phpのrollup.config.jsを修正

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript';

import alias from "rollup-plugin-alias";
import replace from "rollup-plugin-replace";
import babel from "rollup-plugin-babel";
import json from "rollup-plugin-json";
import { terser } from "rollup-plugin-terser";

export default {
    input: "src/index.ts",
    output: {
        file: "standalone.js",
        format: "umd",
        name: "prettierPlugins.svelte",
        exports: "named",
        globals: {
            prettier: "prettier",
        },
        paths: {
            prettier: "prettier/standalone",
        },
    },
    external: ["prettier", "svelte"],
    plugins: [
        resolve({
            preferBuiltins: true,
        }),
        commonjs(),
        typescript(),
        alias({
            entries: [
                {
                    find: "assert",
                    replacement: "assert.js",
                },
            ],
        }),
        replace({
            "process.arch": JSON.stringify("x32"),
        }),
        json(),
        babel({
            babelrc: false,
            plugins: [],
            compact: false,
            presets: [
                [
                    require.resolve("@babel/preset-env"),
                    {
                        targets: {
                            browsers: [
                                ">0.25%",
                                "not ie 11",
                                "not op_mini all",
                            ],
                        },
                        modules: false,
                    },
                ],
            ],
        }),
        terser(),
    ],
};

src/embed.ts, src/lib/snipTagContent.tsはthebells1111氏のプルリクに従う。
src/lib/browser.tsは

export const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
import { Buffer } from 'buffer/';
export const browserBuffer = Buffer;

とする。
src/index.ts は

import { parse } from 'svelte/compiler';

を追加して

                return <ASTNode>{ ...require(`svelte/compiler`).parse(text), __isRoot: true };

この部分を

                return <ASTNode>{ ...parse(text), __isRoot: true };

へと修正する。
これをビルドしてstandalone.jsを作成する。

npm run build

使い方は他のプラグインと同様。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Browser Prettier</title>
<meta charset="utf-8">
</head>
<body>
    <script src="https://unpkg.com/prettier@2.0.5/standalone.js"></script>
    <script src="standalone.js"></script>
 
    <script>
      const TestCode = `
      //test code
const testa= "aaa"
 const  testb  =   "bbb"
  const   testc  =   "cccc"
`;
      const result = prettier.format(TestCode, {
        parser: "svelte",
        plugins: prettierPlugins,
      });
      console.log(result);
/*
//test code
const testa = "aaa";
const testb = "bbb";
const testc = "cccc";
*/
    </script>
</body>
</html>