From fdb213f57c797d0996ef417d63ee5580749ea5e5 Mon Sep 17 00:00:00 2001 From: Curran Date: Sun, 28 Jan 2024 07:45:48 -0500 Subject: [PATCH 1/6] Add browser build. Closes #69 --- .gitignore | 2 ++ package-lock.json | 33 +++++++++++++++++++++++++++++++++ package.json | 2 ++ rollup.config.js | 47 ++++++++++++++++++++++++++++++++++++++--------- src/index.ts | 3 ++- 5 files changed, 77 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 5f34e423..a31302a8 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ node_modules .history plugin.js plugin.js.map +browser.js +browser.js.map \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 94036620..21e9c367 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "3.1.2", "license": "MIT", "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", @@ -234,6 +235,38 @@ "node": ">= 8" } }, + "node_modules/@rollup/plugin-alias": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz", + "integrity": "sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==", + "dev": true, + "dependencies": { + "slash": "^4.0.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } + } + }, + "node_modules/@rollup/plugin-alias/node_modules/slash": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", + "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@rollup/plugin-commonjs": { "version": "14.0.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz", diff --git a/package.json b/package.json index 4f147b77..2d8725f7 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "types": "./index.d.ts", "default": "./plugin.js" }, + "./browser": "./browser.js", "./package.json": "./package.json" }, "scripts": { @@ -37,6 +38,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", diff --git a/rollup.config.js b/rollup.config.js index edcd9ffa..5f1c0f60 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,14 +1,43 @@ +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 + // Unsupported use case: importing the plugin directly in the browser + { + input: 'src/index.ts', + plugins: [ + alias({ + // Replace imports from 'prettier' with 'prettier/standalone' + entries: [ + // But don't touch 'prettier/plugins/babel' + { find: 'prettier/plugins/babel', replacement: 'prettier/plugins/babel' }, + { find: 'prettier', replacement: 'prettier/standalone' }, + ], + }), + resolve(), + commonjs(), + typescript(), + ], + external: ['prettier/standalone', 'prettier/plugins/babel', 'svelte/compiler'], + output: { + file: 'browser.js', + format: 'esm', + sourcemap: true, + }, + }, +]; diff --git a/src/index.ts b/src/index.ts index 40d15d3d..15dfc2f2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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 = { hasPragma, parse: (text) => { try { - return { ...require(`svelte/compiler`).parse(text), __isRoot: true }; + return { ...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. From a87a9a7fead8b7251c5833ca1e1b819873f6779a Mon Sep 17 00:00:00 2001 From: Curran Date: Mon, 29 Jan 2024 08:32:11 -0500 Subject: [PATCH 2/6] Update files to include browser build --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 2d8725f7..3ce32237 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "files": [ "plugin.js", "plugin.js.map", + "browser.js", + "browser.js.map", "index.d.ts" ], "types": "./index.d.ts", From 82941ae3a483a408a3ac0a494cc22becbc67c809 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 13 Feb 2024 10:27:36 +0100 Subject: [PATCH 3/6] tweaks, omit sourcemap --- package.json | 1 - rollup.config.js | 8 +------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/package.json b/package.json index 3ce32237..dc0b8a10 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "plugin.js", "plugin.js.map", "browser.js", - "browser.js.map", "index.d.ts" ], "types": "./index.d.ts", diff --git a/rollup.config.js b/rollup.config.js index 5f1c0f60..84d774a3 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -22,12 +22,7 @@ export default [ input: 'src/index.ts', plugins: [ alias({ - // Replace imports from 'prettier' with 'prettier/standalone' - entries: [ - // But don't touch 'prettier/plugins/babel' - { find: 'prettier/plugins/babel', replacement: 'prettier/plugins/babel' }, - { find: 'prettier', replacement: 'prettier/standalone' }, - ], + entries: [{ find: 'prettier', replacement: 'prettier/standalone' }], }), resolve(), commonjs(), @@ -37,7 +32,6 @@ export default [ output: { file: 'browser.js', format: 'esm', - sourcemap: true, }, }, ]; From 09e90ef62a784028b50ee416394fed38771c11cb Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 13 Feb 2024 11:33:34 +0100 Subject: [PATCH 4/6] changelog, docs --- CHANGELOG.md | 1 + README.md | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 988f36fb..ee07ab29 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index d4dbc82a..a799ac13 100644 --- a/README.md +++ b/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 From b52e0e710f489f31944c6d70e450b8fa8e6bd425 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 13 Feb 2024 11:36:21 +0100 Subject: [PATCH 5/6] gitignore --- .gitignore | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index a31302a8..08863dc7 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,4 @@ node_modules .history plugin.js plugin.js.map -browser.js -browser.js.map \ No newline at end of file +browser.js \ No newline at end of file From 90acefc615382a23df85604f93a762010e7d924e Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 13 Feb 2024 11:37:47 +0100 Subject: [PATCH 6/6] clarify --- rollup.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index 84d774a3..fd12ae57 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -17,7 +17,8 @@ export default [ }, // Browser build // Supported use case: importing the plugin from a bundler like Vite or Webpack - // Unsupported use case: importing the plugin directly in the browser + // 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: [