Handlebars_Analyzer/index.html at master · NETTUTS/Handlebars_Analyzer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <title>Handlebars.js</title>
        <link rel="stylesheet" href="prism.css">

        <script src="prism.js" data-manual></script>
        <script src="handlebars.js"></script>

        <style>
            body{
                margin: 0;
                padding: 0;
                font-family: "opensans", Arial, sans-serif;
                background: #F5F2F0;
                font-size: 13px;
            }
            #analysis {
                top: 0;
                left: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #analysis div {
                width: 33.33%;
                height: 50%;
                float: left;
                padding: 10px 20px;
                box-sizing: border-box;
                overflow: auto;
            }
            #function {
                width: 100% !important;
            }
        </style>
    </head>
    <body>
        <div id="analysis">
            <div id="tokens"><h1>Tokens:</h1></div>
            <div id="operations"><h1>Operations:</h1></div>
            <div id="output"><h1>Output:</h1></div>
            <div id="function">
                <h1>Function:</h1>
                <pre><code class="language-javascript" id="source"></code></pre>
            </div>
        </div>


    <script id="dt" type="template/handlebars">
        Hello {{name}}!
    </script>

    <script>
        Handlebars.registerHelper("doubled", function(number){
            return number * 2;
        });
    </script>

    <script>
        var src = document.getElementById("dt").innerHTML.trim();

        //Display Output
        var t = Handlebars.compile(src);
        document.getElementById("output").innerHTML += t({name: "Gabriel"});

        //Display Tokens
        var tokenizer = Handlebars.parse(src);
        var tokenStr = "";
        for (var i in tokenizer.statements) {
            var token = tokenizer.statements[i];
            tokenStr += "<p>" + (parseInt(i)+1) + ") ";
            switch (token.type) {
                case "content":
                    tokenStr += "[string] - \"" + token.string + "\"";
                    break;
                case "mustache":
                    tokenStr += "[placeholder] - " + token.id.string;
                    break;
                case "block":
                    tokenStr += "[block] - " + token.mustache.id.string;
            }
        }
        document.getElementById("tokens").innerHTML += tokenStr;


        //Display Operations
        var opSequence = new Handlebars.Compiler().compile(tokenizer, {});
        var opStr = "";
        for (var i in opSequence.opcodes) {
            var op = opSequence.opcodes[i];
            opStr += "<p>" + (parseInt(i)+1) + ") - " + op.opcode;
        }
        document.getElementById("operations").innerHTML += opStr;

        //Display Function
        var outputFunction = new Handlebars.JavaScriptCompiler().compile(opSequence, {}, undefined, true);
        document.getElementById("source").innerHTML = outputFunction.toString();
        Prism.highlightAll();
    </script>
    </body>
</html>