feat: semi-standalone browser build (#430)

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

---------

Co-authored-by: Curran <[email protected]>

Author: dummdidumm

.gitignore

@@ -3,3 +3,4 @@ node_modules
 .history
 plugin.js
 plugin.js.map
+browser.js

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 3.2.0 (Unreleased)
 
 -   (feat) format JSON script tags
+-   (feat) introduce separate entry point using `prettier/standalone`
 -   (fix) don't duplicate comments of nested script/style tags
 -   (fix) handle updated `Snippet` block AST shape
 

README.md

@@ -220,6 +220,10 @@ Since we are using configuration overrides to handle svelte files, you might als
 }
 ```
 
+## Usage in the browser
+
+Usage in the browser is semi-supported. You can import the plugin from `prettier-plugin-svelte/browser` to get a version that depends on `prettier/standalone` and therefore doesn't use any node APIs. What isn't supported in a good way yet is using this without a build step - you still need a bundler like Vite to build everything together as one self-contained package in advance.
+
 ## Migration
 
 ```diff

package-lock.json

@@ -6,6 +6,7 @@
     "files": [
         "plugin.js",
         "plugin.js.map",
+        "browser.js",
         "index.d.ts"
     ],
     "types": "./index.d.ts",
@@ -14,6 +15,7 @@
             "types": "./index.d.ts",
             "default": "./plugin.js"
         },
+        "./browser": "./browser.js",
         "./package.json": "./package.json"
     },
     "scripts": {
@@ -37,6 +39,7 @@
     },
     "homepage": "https://github.com/sveltejs/prettier-plugin-svelte#readme",
     "devDependencies": {
+        "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-commonjs": "14.0.0",
         "@rollup/plugin-node-resolve": "11.0.1",
         "@types/node": "^14.0.0",

package.json

@@ -1,14 +1,38 @@
+import alias from '@rollup/plugin-alias';
 import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from 'rollup-plugin-typescript';
 
-export default {
-    input: 'src/index.ts',
-    plugins: [resolve(), commonjs(), typescript()],
-    external: ['prettier', 'svelte'],
-    output: {
-        file: 'plugin.js',
-        format: 'cjs',
-        sourcemap: true,
+export default [
+    // CommonJS build
+    {
+        input: 'src/index.ts',
+        plugins: [resolve(), commonjs(), typescript()],
+        external: ['prettier', 'svelte/compiler'],
+        output: {
+            file: 'plugin.js',
+            format: 'cjs',
+            sourcemap: true,
+        },
     },
-};
+    // Browser build
+    // Supported use case: importing the plugin from a bundler like Vite or Webpack
+    // Semi-supported use case: importing the plugin directly in the browser through using import maps.
+    //                          (semi-supported because it requires a svelte/compiler.cjs import map and the .cjs ending has the wrong mime type on CDNs)
+    {
+        input: 'src/index.ts',
+        plugins: [
+            alias({
+                entries: [{ find: 'prettier', replacement: 'prettier/standalone' }],
+            }),
+            resolve(),
+            commonjs(),
+            typescript(),
+        ],
+        external: ['prettier/standalone', 'prettier/plugins/babel', 'svelte/compiler'],
+        output: {
+            file: 'browser.js',
+            format: 'esm',
+        },
+    },
+];

rollup.config.js

@@ -4,6 +4,7 @@ import { hasPragma, print } from './print';
 import { ASTNode } from './print/nodes';
 import { embed, getVisitorKeys } from './embed';
 import { snipScriptAndStyleTagContent } from './lib/snipTagContent';
+import { parse } from 'svelte/compiler';
 
 const babelParser = prettierPluginBabel.parsers.babel;
 
@@ -29,7 +30,7 @@ export const parsers: Record<string, Parser> = {
         hasPragma,
         parse: (text) => {
             try {
-                return <ASTNode>{ ...require(`svelte/compiler`).parse(text), __isRoot: true };
+                return <ASTNode>{ ...parse(text), __isRoot: true };
             } catch (err: any) {
                 if (err.start != null && err.end != null) {
                     // Prettier expects error objects to have loc.start and loc.end fields.