feat: Add support for Builder visualization

website/src/components/visualization/Builder.js

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import prettier from 'prettier/standalone';
+import prettierBabelParser from 'prettier/parser-babel';
+import Editor from '../Editor';
+import {types} from 'babel7';
+
+const {BUILDER_KEYS} = types;
+
+export default function Builder({parseResult}) {
+ const nodes = parseResult.ast.body || parseResult.ast.program && parseResult.ast.program.body;
+ if (!Array.isArray(nodes)) {
+ return <div>Current parser not supported for builder view</div>
+ }
+ const builderCode = 'const t = require(\'@babel/types\');\n\n' + getFormattedBuilders(nodes).join('\n');
+ return (
+ <Editor value={builderCode} readOnly={true} />
+ );
+}
+
+function getFormattedBuilders(nodes) {
+ const entries = nodes.map(node => convertNodeToBuilder(node));
+ const options = {
+ printWidth: 50,
+ tabWidth: 2,
+ singleQuote: false,
+ trailingComma: 'none',
+ bracketSpacing: true,
+ jsxBracketSameLine: false,
+ parser: 'babel',
+ plugins: [prettierBabelParser],
+ };
+ return entries.map(code => prettier.format(code, options));
+}
+
+function convertNodeToBuilder(node) {
+ if (node.type === 'Literal') {
+ return `"${node.value}"`;
+ }
+ const keys = BUILDER_KEYS[node.type];
+ const result = `t.${node.type}(${keys.map(key => handleKey(key)).join(',')})`
+
+ function handleKey(key) {
+ const value = node[key];
+ if (typeof value === 'boolean') {
+ return `${value}`;
+ } else if (typeof value === 'string') {
+ return `"${value}"`;
+ } else if (typeof value === 'number') {
+ return value;
+ } else if (Array.isArray(value)) {
+ return `[${value.map(node => convertNodeToBuilder(node)).join(', ')}]`;
+ } else if (value && typeof value.type === 'string' && BUILDER_KEYS[value.type]) {
+ return convertNodeToBuilder(value);
+ } else if (value && value.type === 'Literal') {
+ return `"${value.value}"`;
+ } else {
+ return JSON.stringify(value);
+ }
+ }
+ return result;
+}
+
+
+Builder.propTypes = {
+ parseResult: PropTypes.object,
+};

website/src/components/visualization/index.js

@@ -1,7 +1,9 @@
 import JSON from './JSON';
 import Tree from './Tree';
+import Builder from './Builder';
 
 export default [
  Tree,
  JSON,
+ Builder,
 ];