From 1c66625f37ec6d3e79b21e53ab355bad02ba901f Mon Sep 17 00:00:00 2001 From: Lucas Duailibe Date: Sun, 27 May 2018 15:17:38 -0300 Subject: [PATCH] Add standalone docs (#4550) --- docs/browser.md | 54 +++++++++++++++++++++++++++++++++++++++++++ website/sidebars.json | 3 ++- 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 docs/browser.md diff --git a/docs/browser.md b/docs/browser.md new file mode 100644 index 000000000..e33a74eb7 --- /dev/null +++ b/docs/browser.md @@ -0,0 +1,54 @@ +--- +id: browser +title: Browser +--- + +Run Prettier in the browser with the `standalone.js` UMD bundle shipped in the NPM package (starting in version 1.13). The new UMD bundle only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins. + +### `prettier.format(code, options)` + +Unlike the `format` function from the [main API](api.md#prettierformatsource-options), this function does not load plugins automatically, so a `plugins` property is required if you want to load plugins. Additionally, the parsers included in the Prettier package won't be loaded automatically, so you need to load them before using them. + +See [Usage](#usage) below for examples. + +## Usage + +### Global + + +```html + + + +``` + +### AMD + +```js +define([ + "https://unpkg.me/prettier@1.13.0/standalone.js", + "https://unpkg.me/prettier@1.13.0/parser-graphql.js" +], (prettier, ...plugins) => { + prettier.format("query { }", { parser: "graphql", plugins }); +}); +``` + +### CommonJS + +```js +const prettier = require("prettier/standalone"); +const plugins = [require("prettier/parser-graphql")]; +prettier.format("query { }", { parser: "graphql", plugins }); +``` + +This syntax doesn't necessarily work in the browser, but it can be used when bundling the code with browserify, Rollup, webpack, or another bundler. + +### Worker + +```js +importScripts("https://unpkg.me/prettier@1.13.0/standalone.js"); +importScripts("https://unpkg.me/prettier@1.13.0/parser-graphql.js"); +prettier.format("query { }", { parser: "graphql", plugins: prettierPlugins }); +``` diff --git a/website/sidebars.json b/website/sidebars.json index 7ccc5cfde..0e8ebabbf 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -11,11 +11,12 @@ "Usage": [ "install", "cli", + "api", + "browser", "plugins", "precommit", "watching-files", "eslint", - "api", "ignore" ], "Configuring Prettier": [