-
Notifications
You must be signed in to change notification settings - Fork 97
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add standalone build #239
Add standalone build #239
Conversation
da065cc
to
9fc5b76
Compare
e656a28
to
86883ed
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Could you tell me how to test this out locally?
Try putting together a svelte page like this: <script>
import * as sveltePlugin from 'prettier-plugin-svelte';
import prettier from 'prettier/esm/standalone';
import babelParser from 'prettier/esm/parser-babel';
import cssParser from 'prettier/esm/parser-postcss';
const formatted = prettier.format('<script>const thisIsCode = 1;</script><style></style><div>Svelte source code here</div>', {
parser: 'svelte',
plugins: [sveltePlugin, babelParser, cssParser]
});
</script>
<div>{formatted}</div> I havent used that exact code myself, so there may be a small issue in there somewhere. If you're using it in sveltekit, you'll need a svelte.config.js kit.vite section like kit: {
...,
vite: {
optimizeDeps: {
exclude: ['prettier-plugin-svelte', 'prettier']
},
ssr: {
noExternal: ['prettier']
}
}
} Let me know if you have any troubles and I can put up a demo page. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the long delay. I left some comments, let me know what you think.
@@ -44,5 +62,8 @@ | |||
"peerDependencies": { | |||
"prettier": "^1.16.4 || ^2.0.0", | |||
"svelte": "^3.2.0" | |||
}, | |||
"dependencies": { | |||
"buffer": "^5.7.1" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of adding a dependency on buffer
, could we instead do something like
// base64-string.ts
export const stringToBase64 = (str: string) => typeof btoa !== 'undefined' ? bota : Buffer.from(str).toString('base64');
export const base64ToString = (str: string) => typeof atob !== 'undefined' ? bota : Buffer.from(str, 'base64').toString();
and use that file in the appropriate places?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agree that the buffer
dependency feels sketchy.
@@ -3,12 +3,28 @@ | |||
"version": "2.3.1", | |||
"description": "Svelte plugin for prettier", | |||
"main": "plugin.js", | |||
"module": "esm/plugin.mjs", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see this file generated anywhere according to the rollup configs. Oversight?
"plugin.js.map" | ||
"plugin.js.map", | ||
"esm/**/*.mjs", | ||
"esm/**/*.mjs.map" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To save some bytes when publishing: Could we only publish the plugin map, not the standalone map?
".": { | ||
"browser": { | ||
"import": "./esm/standalone.mjs", | ||
"default": "./standalone.js" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For even more compatibility, add standalone.js
to the top level browser
field?
See also #417 |
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 <curran.kelleher@gmail.com>
The standalone build allows the plugin to be used in the browser, prettier/standalone. Allows for features such as in-browser formatting and codemods.
Have added an exports field to package.json to ensure the correct standalone/node/esm/cjs version of the package is used based on environment.
I've also changed the 'svelte' exclude to 'svelte/compiler' in the standalone rollup configs, as the compiler was getting bundled in and I have the feeling it isnt intended to be. If this is the case, you may want to adjust the standard rollup config too.