rmccue/compile-and-run.html Secret

## compile-and-run.html
<html>
  <head>
    <title>HTMLBars example</title>
    <style type="text/css">
      #inputs {
        overflow: hidden;
      }

      #inputs label {
        float: left;
      }

      #inputs textarea {
        display: block;
        width: 300px;
        height: 150px;
        margin: 5px 10px 5px 0px;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <div id="inputs">
      <label>
        Data
        <textarea id="data">{"name": "Bob"}</textarea>
      </label>

      <label>
        Template
        <textarea id="template">Howdy {{name}}</textarea>
      </label>

      <label>
        Options
        <textarea id="options">{ "disableComponentGeneration": true }</textarea>
      </label>
    </div>

    <div id="actions">
      <button id="compile-template">Compile</button>
      <button id="run-template">Compile and Render</button>
    </div>

    <hr>

    <div id="output"></div>

    <script src="../assets/loader.js"></script>
    <script src="../amd/dom-helper.amd.js"></script>
    <script src="../amd/htmlbars-compiler.amd.js"></script>
    <script src="../amd/htmlbars-runtime.amd.js"></script>
    <script>
      var compileBtn = document.getElementById('compile-template'),
          runBtn     = document.getElementById('run-template'),
          dataarea   = document.getElementById('data'),
          textarea   = document.getElementById('template'),
          output     = document.getElementById('output'),
          skipRender = document.getElementById('skip-render'),
          options    = document.getElementById('options');

      var compiler    = requireModule('htmlbars-compiler'),
          DOMHelper   = requireModule('dom-helper').default,
          hooks       = requireModule('htmlbars-runtime').hooks,
          render      = requireModule('htmlbars-runtime').render;

      var templateSource = localStorage.getItem('templateSource');
      var data = localStorage.getItem('templateData');

      if (templateSource) {
        textarea.value = templateSource;
      }

      if (data) {
        dataarea.value = data;
      }

      compileBtn.addEventListener('click', function() { compile(false); });
      runBtn.addEventListener('click', function() { compile(true); });


      /************************* HAXXXX *************************/
      var preprocess = requireModule('htmlbars-syntax/parser').preprocess;
      var TemplateCompiler = requireModule("htmlbars-compiler/template-compiler").default;
      var HydrationOpcodeCompiler = requireModule("htmlbars-compiler/hydration-opcode-compiler").default;
      var testHydrationOpcodeCompiler = function () {
        HydrationOpcodeCompiler.apply(this, arguments);
      }
      Object.assign(testHydrationOpcodeCompiler.prototype, HydrationOpcodeCompiler.prototype);
      // testHydrationOpcodeCompiler.prototype = HydrationOpcodeCompiler.prototype;
      // testHydrationOpcodeCompiler.prototype.constructor = testHydrationOpcodeCompiler;
      testHydrationOpcodeCompiler.prototype.mustache = function (mustache, childIndex, childCount) {
        if (mustache.type == "PartialStatement") {
          mustache.hash = {
            pairs: [],
            type: "Hash"
          };
          mustache.path = {
            original: "partial",
            parts: ["partial"]
          };
          mustache.params = [
            {
              type: "StringLiteral",
              original: mustache.name.parts[0],
              value: mustache.name.parts[0],
            }
          ];
        }

        return HydrationOpcodeCompiler.prototype.mustache.apply(this, [mustache, childIndex, childCount]);
      };
      var testing = {
        compileSpec: function (string, options) {
          var ast = preprocess(string, options);
          var compiler = new TemplateCompiler(options);

          // HAX
          compiler.hydrationOpcodeCompiler = new testHydrationOpcodeCompiler();

          var program = compiler.compile(ast);
          return program;
        }
      };

      /************************* /HAXXXX *************************/

      function compile(shouldRender) {
        var source = textarea.value,
            data = dataarea.value,
            compileOptions;

        localStorage.setItem('templateSource', source);
        localStorage.setItem('templateData', data);

        try {
          data = JSON.parse(data);
        } catch(e) {
          data = {};
        }

        try {
          compileOptions = JSON.parse(options.value);
        } catch(e) {
          compileOptions = {};
        }

        try {
          var templateSpec = testing.compileSpec(source, compileOptions);
          output.innerHTML = '<pre><code>' + templateSpec + '</code></pre>';

          if (shouldRender) {
            var template = compiler.template(templateSpec);

            var env = {
              dom: new DOMHelper(),
              hooks: hooks,
              helpers: {},
              partials: {
                "foo": {
                  render: function () {
                    return compiler.compile('from foo');
                  },
                },
                "test": {
                  render: function () {
                    return compiler.compile('from test');
                  },
                },
              }
            };

            var scope = hooks.createFreshScope();

            hooks.bindSelf(env, scope, data);

            var dom = render(template, env, scope, { contextualElement: output }).fragment;

            output.innerHTML += '<hr><pre><code>' + JSON.stringify(data) + '</code></pre><hr>';
            output.appendChild(dom);
          }
        } catch(e) {
          output.innerHTML += 'Failure to run template: '+e.message;
          throw(e);
        }
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<title>HTMLBars example</title>
	<style type="text/css">
	#inputs {
	overflow: hidden;
	}

	#inputs label {
	float: left;
	}

	#inputs textarea {
	display: block;
	width: 300px;
	height: 150px;
	margin: 5px 10px 5px 0px;
	font-family: monospace;
	}
	</style>
	</head>
	<body>
	<div id="inputs">
	<label>
	Data
	<textarea id="data">{"name": "Bob"}</textarea>
	</label>

	<label>
	Template
	<textarea id="template">Howdy {{name}}</textarea>
	</label>

	<label>
	Options
	<textarea id="options">{ "disableComponentGeneration": true }</textarea>
	</label>
	</div>

	<div id="actions">
	<button id="compile-template">Compile</button>
	<button id="run-template">Compile and Render</button>
	</div>

	<hr>

	<div id="output"></div>

	<script src="../assets/loader.js"></script>
	<script src="../amd/dom-helper.amd.js"></script>
	<script src="../amd/htmlbars-compiler.amd.js"></script>
	<script src="../amd/htmlbars-runtime.amd.js"></script>
	<script>
	var compileBtn = document.getElementById('compile-template'),
	runBtn = document.getElementById('run-template'),
	dataarea = document.getElementById('data'),
	textarea = document.getElementById('template'),
	output = document.getElementById('output'),
	skipRender = document.getElementById('skip-render'),
	options = document.getElementById('options');

	var compiler = requireModule('htmlbars-compiler'),
	DOMHelper = requireModule('dom-helper').default,
	hooks = requireModule('htmlbars-runtime').hooks,
	render = requireModule('htmlbars-runtime').render;

	var templateSource = localStorage.getItem('templateSource');
	var data = localStorage.getItem('templateData');

	if (templateSource) {
	textarea.value = templateSource;
	}

	if (data) {
	dataarea.value = data;
	}

	compileBtn.addEventListener('click', function() { compile(false); });
	runBtn.addEventListener('click', function() { compile(true); });


	/*********************** HAXXXX ***********************/
	var preprocess = requireModule('htmlbars-syntax/parser').preprocess;
	var TemplateCompiler = requireModule("htmlbars-compiler/template-compiler").default;
	var HydrationOpcodeCompiler = requireModule("htmlbars-compiler/hydration-opcode-compiler").default;
	var testHydrationOpcodeCompiler = function () {
	HydrationOpcodeCompiler.apply(this, arguments);
	}
	Object.assign(testHydrationOpcodeCompiler.prototype, HydrationOpcodeCompiler.prototype);
	// testHydrationOpcodeCompiler.prototype = HydrationOpcodeCompiler.prototype;
	// testHydrationOpcodeCompiler.prototype.constructor = testHydrationOpcodeCompiler;
	testHydrationOpcodeCompiler.prototype.mustache = function (mustache, childIndex, childCount) {
	if (mustache.type == "PartialStatement") {
	mustache.hash = {
	pairs: [],
	type: "Hash"
	};
	mustache.path = {
	original: "partial",
	parts: ["partial"]
	};
	mustache.params = [
	{
	type: "StringLiteral",
	original: mustache.name.parts[0],
	value: mustache.name.parts[0],
	}
	];
	}

	return HydrationOpcodeCompiler.prototype.mustache.apply(this, [mustache, childIndex, childCount]);
	};
	var testing = {
	compileSpec: function (string, options) {
	var ast = preprocess(string, options);
	var compiler = new TemplateCompiler(options);

	// HAX
	compiler.hydrationOpcodeCompiler = new testHydrationOpcodeCompiler();

	var program = compiler.compile(ast);
	return program;
	}
	};

	/*********************** /HAXXXX ***********************/

	function compile(shouldRender) {
	var source = textarea.value,
	data = dataarea.value,
	compileOptions;

	localStorage.setItem('templateSource', source);
	localStorage.setItem('templateData', data);

	try {
	data = JSON.parse(data);
	} catch(e) {
	data = {};
	}

	try {
	compileOptions = JSON.parse(options.value);
	} catch(e) {
	compileOptions = {};
	}

	try {
	var templateSpec = testing.compileSpec(source, compileOptions);
	output.innerHTML = '<pre><code>' + templateSpec + '</code></pre>';

	if (shouldRender) {
	var template = compiler.template(templateSpec);

	var env = {
	dom: new DOMHelper(),
	hooks: hooks,
	helpers: {},
	partials: {
	"foo": {
	render: function () {
	return compiler.compile('from foo');
	},
	},
	"test": {
	render: function () {
	return compiler.compile('from test');
	},
	},
	}
	};

	var scope = hooks.createFreshScope();

	hooks.bindSelf(env, scope, data);

	var dom = render(template, env, scope, { contextualElement: output }).fragment;

	output.innerHTML += '<hr><pre><code>' + JSON.stringify(data) + '</code></pre><hr>';
	output.appendChild(dom);
	}
	} catch(e) {
	output.innerHTML += 'Failure to run template: '+e.message;
	throw(e);
	}
	}
	</script>
	</body>
	</html>