playground: auto-fold some AST nodes (#8225)

website/playground/Playground.js

@@ -241,7 +241,10 @@ class Playground extends React.Component {
                         onSelectionChange={this.setSelection}
                       />
                       {editorState.showAst ? (
-                        <DebugPanel value={debug.ast || ""} />
+                        <DebugPanel
+                          value={debug.ast || ""}
+                          autoFold={util.getAstAutoFold(options.parser)}
+                        />
                       ) : null}
                       {editorState.showDoc ? (
                         <DebugPanel value={debug.doc || ""} />

website/playground/panels.js

@@ -66,6 +66,16 @@ class CodeMirrorPanel extends React.Component {
   updateValue(value) {
     this._cached = value;
     this._codeMirror.setValue(value);
+
+    if (this.props.autoFold instanceof RegExp) {
+      const lines = value.split("\n");
+      // going backwards to prevent unfolding folds created earlier
+      for (let i = lines.length - 1; i >= 0; i--) {
+        if (this.props.autoFold.test(lines[i])) {
+          this._codeMirror.foldCode(i);
+        }
+      }
+    }
   }
 
   updateOverlay() {
@@ -188,12 +198,13 @@ export function OutputPanel(props) {
   );
 }
 
-export function DebugPanel({ value }) {
+export function DebugPanel({ value, autoFold }) {
   return (
     <CodeMirrorPanel
       readOnly={true}
       lineNumbers={false}
       foldGutter={true}
+      autoFold={autoFold}
       mode="jsx"
       value={value}
     />

website/playground/util.js

@@ -51,3 +51,32 @@ export function getCodemirrorMode(parser) {
       return "jsx";
   }
 }
+
+const astAutoFold = {
+  estree: /^\s*"(loc|start|end)":/,
+  postcss: /^\s*"(source|input|raws|file)":/,
+  html: /^\s*"(sourceSpan|valueSpan|nameSpan|startSourceSpan|endSourceSpan|tagDefinition)":/,
+};
+
+export function getAstAutoFold(parser) {
+  switch (parser) {
+    case "flow":
+    case "babel":
+    case "babel-flow":
+    case "babel-ts":
+    case "typescript":
+    case "json":
+    case "json5":
+    case "json-stringify":
+      return astAutoFold.estree;
+    case "css":
+    case "less":
+    case "scss":
+      return astAutoFold.postcss;
+    case "html":
+    case "angular":
+    case "vue":
+    case "lws":
+      return astAutoFold.html;
+  }
+}