forked from ahumphreys87/handlebars-idom
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (101 loc) · 3.43 KB
/
index.html
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<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>
var exports = {};
var module = {};
</script>
<script src="node_modules/htmlbars/dist/assets/loader.js"></script>
<script src="node_modules/htmlbars/dist/amd/dom-helper.amd.js"></script>
<script src="node_modules/htmlbars/dist/amd/htmlbars-syntax.amd.js"></script>
<script src="node_modules/htmlbars/dist/amd/htmlbars-runtime.amd.js"></script>
<script src="node_modules/htmlbars/dist/cjs/htmlbars-compiler/template-visitor.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 HTMLBars = requireModule('htmlbars-syntax'),
// 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); });
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 htmlbarsAstAll = HTMLBars.parse(source);
var templateVisitor = new TemplateVisitor();
templateVisitor.visit(htmlbarsAstAll);
console.log('template actions', templateVisitor.actions);
output.innerHTML = '<pre><code>' + JSON.stringify(templateVisitor.actions, null, 2) + '</code></pre>';
} catch(e) {
output.innerHTML += 'Failure to run template: '+e.message;
throw(e);
}
}
</script>
</body>
</html>