Can't use Prettier within a browser

[bvaughn]

Following up from this Twitter comment; relates to babel/website/issues/1388 and babel/website/pull/1466.

The Babel REPL has been using Prettier via bundle.run for some time. Version 1.7.0 broke our ability to do this with the error: "cosmiconfig requires at least version 4 of Node". Version 1.8.0 introduced a different error: "os$2.homedir is not a function".

It would be ideal if Prettier output a browser-friendly UMD bundle for use-cases like this, but in lieu of that maybe it could at least work via a solution like rundle.run? 😄

For the time being, we've pinned Babel to use Prettier version 1.6.1. You can try it out here if you'd like.

[mitermayer]

This sounds reasonable to me, I can try looking into this during the weekend, unless @azz , @suchipi @ikatyang wants to look into this first

[bvaughn]

A UMD bundle would be so-so-so great ❤️ If there's support for that idea, I'd also be happy to help (although I am not familiar with Prettier's codebase)

[suchipi]

I think we can fix "os$2.homedir is not a function" with the same approach as in this PR (adding to the rollup-plugin-replace config): #2930

"cosmiconfig requires at least version 4 of Node" might require a change to cosmiconfig.

[suchipi]

Also, since we are already using rollup, we are probably not too far from generating a working UMD bundle.

[ikatyang]

How about extracting prettier.format() to another file? The browser version seems no need to read config file (fs-related), it only cares about prettier.format().

[bvaughn]

A trimmed down version for the browser would be slick.

Would also be nice if there were multiple UMD targets - so we could avoid loading parsers for targets/languages we don't care about (eg CSS).

But I don't want to be greedy. 😁

[duailibe]

The parsers are already bundled separately! Seems like we could do is have another bundle for the format function and we’ll have all the pieces in place, just needing some work so they can work together in the browser

[azz]

It already kind of works - the files here are built with rollup and already run in the browser, you just need this gross patch:

prettier/website/static/worker.js

Lines 5 to 26 in b4e7942

	self.global = self;
	self.util = {};
	self.path = {};
	self.Buffer = {
	isBuffer: function() {
	return false;
	}
	};
	// eslint-disable-next-line
	fs = module$1 = module = path = os = crypto = {};
	// eslint-disable-next-line no-undef
	os.homedir = function() {
	return "/home/prettier";
	};
	self.process = { argv: [], env: { PRETTIER_DEBUG: true }, version: "v8.5.0" };
	self.assert = { ok: function() {}, strictEqual: function() {} };
	self.require = function require(path) {
	if (path === "stream") {
	return { PassThrough() {} };
	}
	return self[path.replace(/.+-/, "")];
	};

We can definitely improve this, splitting the cli into a separate bundle is a great idea. I like the idea of making a UMD bundle, too.

[duailibe]

Now that I've worked a bit more on the playground there are a few problemas we need to sort to get this working:

• native node modules (see how we shim on the playground Can't use Prettier within a browser #3296 (comment))
• lazy load parsers (in the playground we patch require).

Does it make sense to ship a version with those shims and a custom require (not the hackish version we use) ?

[suchipi]

I think we should ship the shims, but instead of doing the lazy require stuff or using a custom require, we should ship a UMD bundle containing a factory function that users plug the parsers into, and we should ship the parser versions we vendor as UMD bundles.

[suchipi]

So eventual CommonJS usage would be something like:

const makePrettier = require("prettier/bundle/makePrettier"); // or whatever
const flowParser = require("prettier/bundle/flow");
const prettier = makePrettier({ flowParser })

And you would only ship the parsers you need

[siefkenj]

For my usage, it would be nice to be able to export prettier without a parser. I'm currently developing a parser out-of-tree, and I need to use the printDoc functions but not necessarily any parsing functions.

[j-f1]

@siefkenj Check out #3511 and #3536.

[duailibe]

I'm gonna start working on this now :)

[azz]

@duailibe Wow, I was just typing up #3574.

[duailibe]

Can't work on this right now, if anyone wants to take a shot at it (cc @azz)

[huv1k]

Any news on this? :) I think a lot of tools could benefit from it for example Graphql playground graphql/graphql-playground#327

[nickmccurdy]

This would also be great for using Prettier in browser extensions! See https://github.com/krawaller/prettier-js-extension.

[suchipi]

@duailibe has been doing some refactoring work that is getting us closer to this but we aren't all the way there yet, if I understand correctly.

[huv1k]

Thx we are rocking it in playground now :) graphql/graphql-playground#702

[azz]

Yep, shipped in 1.13.0:
https://prettier.io/docs/en/browser.html