Added ability to format editor using Prettier. Updated App.tsx with example.

Author: Justin Wilkerson

README.md

@@ -85,9 +85,10 @@ This hooks provides all of the method and properties provided by the Plugin API.
 | Name | Description |
 | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **code** | `string`  <br /><br /> The current code in the Monaco editor. This value updates on change to the Monaco editor with optional debouncing. Alias for `sandbox.getText()` |
-| **setCode** | `(code: string) => void`  <br /><br /> Set the code in the Monaco editor. Alias for `sandbox.setText()`  |
+| **setCode** | `(code: string, options: {format: "prettier" | "monaco"}) => void`  <br /><br /> Set the code in the Monaco editor with optional formatting with Prettier or Monaco. Alias for `sandbox.setText()`  |
 | **formatCode** | `() => void`  <br /><br /> Format the code in the Monaco editor. Alias for `sandbox.editor.getAction("editor.action.formatDocument").run()`  |
-| **markers** | `IMarker[]`  <br /><br /> Alias for `sandbox.monaco.editor.getModelMarkers({})` that is kept in sync via `sandbox.editor.onDidChangeModelDecorations`.    |
+| **prettier** | `prettier(config?: Options) => string`  <br /><br /> Format the code in the Monaco editor with prettier. Accepts a prettier config object.
+| **markers** | `(IMarker & {key: string})[]`  <br /><br /> Alias for `sandbox.monaco.editor.getModelMarkers({})` with added unique `key` property. Kept in sync via `sandbox.editor.onDidChangeModelDecorations`.    |
 | **setDebounce** | `(debounce: boolean) => void`  <br /><br /> Optionally debounce the `modelChange` event from the Plugin API. |
 | **sandbox** | `object`  <br /><br /> A DOM library for interacting with TypeScript and JavaScript code, which powers the heart of the TypeScript playground. This object provides several properties and methods to interact with the playground. See all of the available types in `src/plugin/vendor/sandbox.d.ts` and read more about the sandbox at [http://www.typescriptlang.org/v2/dev/sandbox/](http://www.typescriptlang.org/v2/dev/sandbox/). |
 | **modal** | `object`  <br /><br /> The model is an object which monaco uses to keep track of text in the editor. You can find the full type definition at `node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts`. |
@@ -97,6 +98,7 @@ This hooks provides all of the method and properties provided by the Plugin API.
 
 
 
+
 Here is the [type definition](https://github.com/Microsoft/monaco-editor/blob/master/monaco.d.ts#L875) for `IMarker`:
 
 ```typescript
@@ -126,6 +128,7 @@ const {
   code,
   setCode,
   formatCode,
+  prettier,
   markers,
   setDebounce,
   sandbox,
@@ -137,17 +140,25 @@ const {
 
 // Here are some examples of things you can do:
 
+setDebounce(true);
+
 // Set the code in the Monaco editor
 useEffect(() => {
-  setCode(`const greet = (): string => "Hi👋";`);
-  formatCode();
+  const defaultCode = `const greet = (): string => "Hi👋";`
+  setCode(defaultCode, {format: "prettier"});
 }, []);
 
 // Listen for changes to the code in the Monaco editor
 useEffect(() => {
   flashInfo("The code was updated.")
   showModal(code, "Here is your code")
 }, [code]);
+
+const renderMarkers = markers.map(marker => {
+  return <div key={marker.key}>{marker.message}</div>
+})
+
+// See App.tsx for additional usage examples
 ```
 
 ## Styling your plugin

package.json

@@ -30,16 +30,17 @@
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
     "@types/node": "^13.7.4",
+    "@types/prettier": "^1.19.0",
     "@types/react": "^16.9.22",
     "@types/react-dom": "^16.9.5",
     "concurrently": "^5.1.0",
     "cross-env": "^7.0.0",
     "monaco-editor": "^0.20.0",
+    "prettier": "^1.19.1",
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-css-only": "^2.0.0",
-    "rollup-plugin-livereload": "^1.0.4",
-    "rollup-plugin-postcss": "^2.0.6",
+    "rollup-plugin-postcss": "^2.1.1",
     "rollup-plugin-terser": "^5.2.0",
     "serve": "^11.3.0",
     "typescript": "^3.8.2"

rollup.config.js

@@ -24,15 +24,17 @@ export default {
     replace({
       "process.env.NODE_ENV": JSON.stringify(
         isProd ? "production" : "development"
-      )
+      ),
     }),
     image(),
     resolve({
       extensions,
       modulesOnly: false
     }),
     commonjs({
-      include: /node_modules/
+      include: /node_modules/,
+      // For prettier/parser-typescript
+      ignore: ["@microsoft/typescript-etw"]
     }),
     babel({
       extensions,

src/App.tsx

@@ -7,8 +7,8 @@ import "./App.css";
 const { useEffect } = React;
 
 const exampleCode = {
-  start: "function echo(arg) {\n  return arg;\n}",
-  end: "function echo<T>(arg:T): T {\n  return arg;\n}"
+  start: "function echo(arg) { return arg};",
+  end: "function echo<T>(arg:T): T {return arg;}"
 };
 
 const App: React.FC = () => {
@@ -22,13 +22,14 @@ const App: React.FC = () => {
     model,
     container,
     flashInfo,
-    showModal
+    showModal,
+    prettier
   } = usePlugin();
 
   setDebounce(true);
 
   useEffect(() => {
-    setCode(exampleCode.start);
+    setCode(exampleCode.start, { format: "prettier" });
   }, []);
 
   useEffect(() => {
@@ -41,21 +42,24 @@ const App: React.FC = () => {
     flashInfo("Cleared!");
   }
 
-  function handleOpenModal() {
-    showModal(code, "Here is your code.");
+  function handleFixCode() {
+    setCode(exampleCode.end, { format: "prettier" });
   }
 
-  function handleFixCode() {
-    setCode(exampleCode.end);
+  function handleMonacoFormat() {
     formatCode();
   }
 
+  function handlePrettierFormat() {
+    prettier();
+  }
+
   const renderMarkers = markers
     .sort((a, b) => (a.startLineNumber >= b.startLineNumber ? 1 : -1))
     .map(marker => {
       return (
         <div
-          key={marker.code?.toString()}
+          key={marker.key}
           className={css`
             margin-top: 20px;
           `}
@@ -78,9 +82,13 @@ const App: React.FC = () => {
       <button className={buttonClass} onClick={handleFixCode}>
         Fix the Code
       </button>
-      <button className={buttonClass} onClick={handleOpenModal}>
-        Open the Modal
+      <button className={buttonClass} onClick={handleMonacoFormat}>
+        Format with Monaco
+      </button>
+      <button className={buttonClass} onClick={handlePrettierFormat}>
+        Format with Prettier
       </button>
+
       <button className={buttonClass} onClick={handleClear}>
         Clear the Editor
       </button>
@@ -113,7 +121,7 @@ const buttonClass = css`
   display: inline-block;
   margin: 5px;
   padding: 5px;
-  min-width: 120px;
+  min-width: 150px;
   color: ${colors.blue};
   background: transparent;
   font-size: 0.9rem;

src/plugin/Provider.tsx

@@ -1,7 +1,18 @@
 import React from "react";
 import { Sandbox } from "./vendor/playground";
+import prettierLib from "prettier/standalone";
+import parserBabel from "prettier/parser-babylon";
+import parserTypescript from "prettier/parser-typescript";
+import { Options } from "prettier";
 const { useState, useEffect, createContext, useCallback } = React;
 
+const defaultPrettierConfig: Options = {
+  semi: true,
+  parser: "babel",
+  plugins: [parserBabel, parserTypescript],
+  tabWidth: 2
+};
+
 type Model = import("monaco-editor").editor.ITextModel;
 type ModelMarker = import("monaco-editor").editor.IMarker;
 type FlashInfo = (message: string) => void;
@@ -18,9 +29,10 @@ export type PluginContextProps = {
   model: Model;
   flashInfo: FlashInfo;
   showModal: ShowModal;
-  markers: ModelMarker[];
-  setCode(value: string): void;
+  markers: (ModelMarker & { key: string })[];
+  setCode(value: string, options?: { format: "prettier" | "monaco" }): void;
   formatCode(): void;
+  prettier(config?: Options): void;
   setDebounce(debounce: boolean): void;
 };
 
@@ -43,7 +55,14 @@ export const Provider: React.FC<ProviderProps> = ({
 
   useEffect(() => {
     const disposable = sandbox.editor.onDidChangeModelDecorations(() => {
-      const allMarkers = sandbox.monaco.editor.getModelMarkers({});
+      const allMarkers = sandbox.monaco.editor
+        .getModelMarkers({})
+        .map((marker, index) => {
+          return {
+            ...marker,
+            key: index.toString()
+          };
+        });
       setMarkers(allMarkers);
     });
     () => disposable.dispose();
@@ -57,16 +76,39 @@ export const Provider: React.FC<ProviderProps> = ({
     () => window.removeEventListener(eventName, listenerFn, false);
   }, [debounce]);
 
+  const setCode = useCallback(
+    (value: string, options?: { format: "prettier" | "monaco" }) => {
+      if (options && options.format === "prettier") {
+        const prettyCode = prettierLib.format(value, defaultPrettierConfig);
+        sandbox.setText(prettyCode);
+      } else if (options && options.format === "monaco") {
+        sandbox.editor.getAction("editor.action.formatDocument").run();
+      } else {
+        sandbox.setText(value);
+      }
+    },
+    []
+  );
+
   const formatCode = useCallback(() => {
     return sandbox.editor.getAction("editor.action.formatDocument").run();
   }, []);
 
-  const setCode = useCallback((value: string) => {
-    sandbox.setText(value);
-  }, []);
+  const prettier = useCallback(
+    (config?: Options) => {
+      const prettyCode = prettierLib.format(
+        code,
+        { ...config, ...defaultPrettierConfig } || defaultPrettierConfig
+      );
+
+      sandbox.setText(prettyCode);
+    },
+    [code]
+  );
 
   // @ts-ignore
   const { showModal, flashInfo } = window.playground.ui;
+
   const value = {
     model,
     showModal,
@@ -77,7 +119,8 @@ export const Provider: React.FC<ProviderProps> = ({
     setCode,
     formatCode,
     setDebounce,
-    markers
+    markers,
+    prettier
   };
   return (
     <PluginContext.Provider value={value}>{children}</PluginContext.Provider>

src/types/index.d.ts

@@ -11,5 +11,6 @@ declare global {
         flashInfo: (message: string) => void;
       };
     };
+    ts: typeof window.ts
   }
 }