【備忘録】esbuild-wasm用のsvelteプラグインを自作する

概要

esbuild公式がexapmleで掲載しているsvelte pluginが自分の環境ではうまく動かなかったので多少修正した備忘録です。

環境

node.jsが使えない環境のため、memfsベースの仮想fsを使用しています。

script.js

import * as svelte from 'svelte/compiler';

export function sveltePlugin(fs) {
    return {
        name: 'svelte',
        setup(build) {
            build.onLoad({ filter: /\.svelte$/ }, async (args) => {
                const isHttp = /^https?:\/\//.test(args.path);

                const source = isHttp
                    ? await (await fetch(args.path)).text()
                    : await fs.readFile(args.path, 'utf8');

                try {
                    const compiled = svelte.compile(
                        source,
                        {
                            filename: args.path,
                            css: 'injected',
                            sourcemap: false,
                            dev: true,
                            fragments: 'tree'
                        }
                    );
                    return { contents: compiled.js.code, loader: 'js' };
                } catch (e) { console.error(e) }
            }
        }
    }
};