Add wireformat view for glimmer transform (#187)

* Update "@glimmer/syntax" to v0.21.2

* handlebars: Add "glimmer-compiler" transform

This is essentially the same kind of transform as "glimmer" but with a different kind of output view

* Use JSONEditor component for JSON transformer output

website/css/style.css

@@ -314,6 +314,10 @@ html {
   bottom: 0;
 }
 
+.output > .no-toolbar {
+  top: 0;
+}
+
 #JSONEditor .CodeMirror {
   font-size: 0.9em;
 }

website/package.json

@@ -35,7 +35,8 @@
     "webpack": "^1.12.8"
   },
   "dependencies": {
-    "@glimmer/syntax": "^0.21.0",
+    "@glimmer/compiler": "^0.21.2",
+    "@glimmer/syntax": "^0.21.2",
     "acorn": "^4.0.4",
     "acorn-jsx": "^3.0.1",
     "acorn-to-esprima": "^1.0.2",

website/src/components/TransformOutput.js

@@ -1,9 +1,12 @@
 /*eslint no-new-func: 0*/
 import Editor from './Editor';
+import JSONEditor from './JSONEditor';
 import React from 'react';
 import halts, {loopProtect} from 'halting-problem';
 import {SourceMapConsumer} from 'source-map/lib/source-map-consumer';
 
+import stringify from 'json-stringify-safe';
+
 function loadJSTransformer(callback) {
   require(['../parsers/utils/transformJSCode'], toES5 => callback(toES5.default));
 }
@@ -140,14 +143,20 @@ export default class TransformOutput extends React.Component {
             lineNumbers={false}
             readOnly={true}
             value={this.state.error.message}
-          /> :
-          <Editor
-            posFromIndex={this._posFromIndex}
-            mode={this.props.mode}
-            key="output"
-            readOnly={true}
-            value={this.state.result}
-          />
+          /> : (
+            typeof this.state.result === 'string' ?
+            <Editor
+              posFromIndex={this._posFromIndex}
+              mode={this.props.mode}
+              key="output"
+              readOnly={true}
+              value={this.state.result}
+            /> :
+            <JSONEditor
+              className="container no-toolbar"
+              value={stringify(this.state.result, null, 2)}
+            />
+          )
         }
       </div>
     );

website/src/parsers/handlebars/transformers/glimmer-compiler/codeExample.txt

@@ -0,0 +1,11 @@
+module.exports = class {
+  transform(ast) {
+    this.syntax.traverse(ast, {
+      ElementNode(node) {
+        node.tag = node.tag.split('').reverse().join('');
+      }
+    });
+
+    return ast;
+  }
+};

website/src/parsers/handlebars/transformers/glimmer-compiler/index.js

@@ -0,0 +1,39 @@
+import compileModule from '../../../utils/compileModule';
+import pkg from '@glimmer/compiler/package.json';
+
+const ID = 'glimmer-compiler';
+
+export default {
+  id: ID,
+  displayName: ID,
+  version: pkg.version,
+  homepage: pkg.homepage || 'https://github.com/tildeio/glimmer',
+
+  defaultParserID: 'glimmer',
+
+  loadTransformer(callback) {
+    require(['@glimmer/compiler'], callback);
+  },
+
+  transform(glimmer, transformCode, code) {
+    const transformModule = compileModule(transformCode);
+
+    // allow "export default" instead of "module.exports = "
+    const transform = transformModule.__esModule ?
+      transformModule.default :
+      transformModule;
+
+    // compile template to wireformat
+    let result = glimmer.precompile(code, {
+      plugins: {
+        ast: [transform],
+      },
+    });
+
+    // parse wireformat into JSON
+    let json = JSON.parse(JSON.parse(result).block);
+
+    // pretty print JSON
+    return { code: json };
+  },
+};

website/webpack.config.js

@@ -90,7 +90,10 @@ module.exports = Object.assign({
         include: [
           path.join(__dirname, 'src'),
           path.join(__dirname, 'node_modules', 'jscodeshift', 'dist'),
+          path.join(__dirname, 'node_modules', '@glimmer', 'compiler', 'dist'),
           path.join(__dirname, 'node_modules', '@glimmer', 'syntax', 'dist'),
+          path.join(__dirname, 'node_modules', '@glimmer', 'util', 'dist'),
+          path.join(__dirname, 'node_modules', '@glimmer', 'wire-format', 'dist'),
         ],
         loader: 'babel',
         query: {

website/yarn.lock

@@ -2,13 +2,32 @@
 # yarn lockfile v1
 
 
-"@glimmer/syntax@^0.21.0":
+"@glimmer/compiler@^0.21.2":
+  version "0.21.2"
+  resolved "https://registry.yarnpkg.com/@glimmer/compiler/-/compiler-0.21.2.tgz#c8e4d2be85c3655de2f4bb6c4a014627dc09b36f"
+  dependencies:
+    "@glimmer/syntax" "^0.21.2"
+    "@glimmer/util" "^0.21.0"
+    "@glimmer/wire-format" "^0.21.0"
+    simple-html-tokenizer "^0.3.0"
+
+"@glimmer/syntax@^0.21.2":
   version "0.21.2"
   resolved "https://registry.yarnpkg.com/@glimmer/syntax/-/syntax-0.21.2.tgz#6a1469cf1eeefbf2d28fe5113b2795c9090cc16d"
   dependencies:
     handlebars "^3.0.3"
     simple-html-tokenizer "^0.3.0"
 
+"@glimmer/util@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@glimmer/util/-/util-0.21.0.tgz#86c1e972e2f777f5af664b59c5bc037b71e9ef00"
+
+"@glimmer/wire-format@^0.21.0":
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/@glimmer/wire-format/-/wire-format-0.21.0.tgz#ec97adafaf6d1bbd4d1fcf0cbd0a9df2784a22d5"
+  dependencies:
+    "@glimmer/util" "^0.21.0"
+
 "@types/node@^6.0.46":
   version "6.0.62"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.62.tgz#85222c077b54f25b57417bb708b9f877bda37f89"