feat: semi-standalone browser build

[dummdidumm]

Adds a semi-standalone browser build under prettier-plugin-svelte/browser.

part of #69 (full fix would mean import maps work, which they don't because you need svelte/compiler.cjs which has the wrong mime type on package CDNs - this isn't fixable within this package, rather needs a different file type upstream) closes #239 closes #257 closes #417

[dummdidumm]

@curran could you do a quick test if this works as expected for you in your use case?

[curran]

Oh wow nice! Yes I will test this out. Thank you for this work!

[curran]

It works brilliantly!

This is my usage code, in case it's useful for anyone as a reference:

https://github.com/vizhub-core/vzcode/blob/main/src/client/usePrettier/worker.ts

import { format } from 'prettier/standalone';
import * as prettierPluginBabel from 'prettier/plugins/babel';
import * as prettierPluginEstree from 'prettier/plugins/estree';
import * as prettierPluginHtml from 'prettier/plugins/html';
import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
import * as prettierPluginCSS from 'prettier/plugins/postcss';
import * as prettierPluginTypescript from 'prettier/plugins/typescript';
import * as prettierPluginSvelte from 'prettier-plugin-svelte/browser';
import { FileId } from '../../types';

const enableSvelte = true;

const parsers = {
  js: 'babel',
  jsx: 'babel',
  mjs: 'babel',
  cjs: 'babel',
  ts: 'typescript',
  tsx: 'typescript',
  css: 'css',
  //   '.less': 'less',
  //   '.scss': 'scss',
  html: 'html',
  json: 'json',
  json5: 'json5',
  md: 'markdown',
  markdown: 'markdown',
  //   '.vue': 'vue',
  // svelte: 'svelte',
};

if (enableSvelte) {
  // @ts-ignore
  parsers.svelte = 'svelte';
}

const plugins = [
  prettierPluginBabel,
  prettierPluginEstree,
  prettierPluginHtml,
  prettierPluginMarkdown,
  prettierPluginTypescript,
  prettierPluginCSS,
];

if (enableSvelte) {
  // @ts-ignore
  plugins.push(prettierPluginSvelte);
}

onmessage = async ({
  data,
}: {
  data: {
    // The text content of the file
    fileText: string;

    // The file extension
    // Supported extensions: https://prettier.io/docs/en/options.html#parser
    // The editor only supports
    // - JavaScript
    // - TypeScript
    // - HTML
    // - CSS
    // - JSON
    // - Markdown

    fileExtension: string;

    // The file id
    fileId: FileId;
  };
}) => {
  const { fileExtension, fileText, fileId } = data;
  const parser = parsers[fileExtension];

  // If no parser is found, just do nothing.
  // For example, if the user opens a CSV file,
  // then we don't want to run Prettier on it,
  // and we also don't want to show an error.
  if (!parser) {
    return;
  }

  try {
    const fileTextPrettified = await format(fileText, {
      parser,
      plugins,

      // This helps with Markdown files
      proseWrap: 'always',

      // Opinionated code style for JavaScript
      singleQuote: true,
      printWidth: 60,
    });

    postMessage({
      fileId,
      fileTextPrettified,
    });
  } catch (error) {
    postMessage({
      fileId,
      error: error.toString(),
    });
  }
};

[dummdidumm]

Thank you for checking and bringing this over the finish line!

[curran]

Hooray!

[curran]

Looking forward to the NPM release with these changes. Thanks again for all your great work on this!

[curran]

Oh I think it's here! Woohoo!

https://github.com/sveltejs/prettier-plugin-svelte/releases/tag/v3.2.0