Skip to content

Commit 806e1a7

Browse files
author
dcmox
committed
updated tests
1 parent 075785e commit 806e1a7

File tree

4 files changed

+182
-130
lines changed

4 files changed

+182
-130
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dcmox/stencil-js",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"private": false,
55
"description": "Just another template engine written in TypeScript. Mustache compatible!",
66
"main": "stencil.js",

‎tests/templates.ts

+94-122
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,105 @@
11
export const template = `
2-
<h1>Hello world!</h1>
3-
<p>
4-
Hello, my name is {{firstName}} {{lastName}}! Are you ready to build your own templating engine? I know I am!
5-
</p>
6-
<p>
7-
Some information about me:
8-
{{person.details.bio}}
9-
</p>
10-
<p>
11-
{{{paragraph|excerpt}}}
12-
</p>
13-
<p>
14-
This is a {{customFilter|lower}}. This is sanitized html: {{html|lower}}
15-
This is unfiltered html: {{html|raw}}
16-
This is also unfiltered html {{{html}}}
17-
</p>
18-
<p>
19-
Links:
20-
{{htmlLinks|linkify}}
21-
</p>
22-
23-
{{#condition}}
24-
Hello world! - This will display if condition evaluates to true!
25-
{{/condition}}
26-
27-
{{#anotherCondition}}
28-
This will not display if anotherCondition evaluates to false.
29-
{{/anotherCondition}}
30-
31-
People:
32-
<ul>
33-
{{#people}}
34-
<li>{{.}}</li>
35-
{{/people}}
36-
</ul>
37-
38-
Beatles:
39-
<ul>
40-
{{#beatles}}
41-
<ul>{{name}} - {{details.bio}}</ul>
42-
{{/beatles}}
43-
</ul>
44-
45-
{{#nested}}{{#a}}{{.}}, {{/a}}{{/nested}}
46-
47-
{{^anotherCondition}}
48-
This should display!
49-
{{/anotherCondition}}
50-
{{! This is a comment. Any tags that are not valid will just be omitted}}
51-
52-
{{arr}}
53-
54-
Nested tag:
55-
<ul>
56-
{{#nested.a}}
57-
<li>{{.}}</li>
58-
{{/nested.a}}
59-
</ul>
60-
61-
Even more nested tag:
62-
{{#nestedC.a}}{{b}}{{/nestedC.a}}
63-
64-
{{lotsOfHtml|stripTags}}
65-
66-
{{> subTemplate}}
67-
68-
Have a nice day!
2+
<html>
3+
<head>
4+
<title>stencil-js template engine demo</title>
5+
{{> styleSheet}}
6+
</head>
7+
<body>
8+
<main>
9+
{{> header}}
10+
{{> article}}
11+
</main>
12+
</body>
13+
</html>
6914
`
7015

71-
export const subTemplate = `
72-
<h1>This is a subtemplate</h1>
73-
<p>
74-
My name is {{name}}
75-
{{> anotherSubTemplate}}
76-
</p>
16+
export const styleSheet = `
17+
<style>
18+
body{
19+
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20+
margin: 0;
21+
}
22+
body a {
23+
text-decoration: none;
24+
color: #888;
25+
}
26+
body a:hover {
27+
text-decoration: underline;
28+
}
29+
#logo {
30+
font-size: 32px;
31+
}
32+
#logo span{
33+
color: #aaa;
34+
}
35+
header nav ul, header nav li{
36+
list-style: none;
37+
display: inline;
38+
margin: 0;
39+
padding-left: 0;
40+
}
41+
header nav {
42+
margin: 10px 0 20px 0;
43+
}
44+
header nav li{
45+
color: #888;
46+
border: 1px solid #eee;
47+
border-radius: 3px;
48+
padding: 4px 8px;
49+
}
50+
main {
51+
padding: 10px;
52+
width: 1000px;
53+
margin: 0 auto;
54+
background-color: #fafafa;
55+
height: 100%;
56+
}
57+
article {
58+
border-top: 1px dashed #ddd;
59+
}
60+
</style>
61+
`
62+
export const header = `
63+
<header>
64+
<div id="logo">
65+
Stencil-JS <span>templating engine</span>
66+
</div>
67+
{{> nav}}
68+
</header>
7769
`
7870

79-
export const anotherSubTemplate = `
80-
===Another Sub Template===
81-
{{beans}}
82-
{{> subSubTemplate}}
71+
export const nav = `
72+
<nav>
73+
<ul>
74+
<li><a href="#">Nav</a></li>
75+
<li><a href="#">Links</a></li>
76+
<li><a href="#">Go</a></li>
77+
<li><a href="#">Here</a></li>
78+
</ul>
79+
</nav>
8380
`
84-
export const subSubTemplate = `
85-
Hoorah!
81+
82+
export const article = `
83+
<article>
84+
<p>
85+
Welcome to Stencil JS! My name is {{firstName}} {{lastName|ucwords}}. If you discover any bugs,
86+
please feel free to report them to {{email}} or via the Stencil-JS GitHub page:
87+
{{gitHubPage|linkify}}
88+
</p>
89+
<p>
90+
If you find this script useful, please make sure to like the project and share it with
91+
other developers who may find it interesting as well!
92+
</p>
93+
<p>
94+
This demo was created to show off the capabilities of the template engine. If you have any
95+
feature requests or would like to contribute, feel free to share!
96+
</p>
97+
</article>
8698
`
8799

88100
export const view = {
101+
gitHubPage: 'https://github.com/dcmox/stencil-js',
89102
firstName: 'Daniel',
90-
lastName: 'Moxon',
91-
customFilter: 'CUSTOM FILTER',
92-
html: '<b>bold html</b>',
93-
htmlLinks: `http://www.google.com
94-
http://www.yahoo.com`,
95-
person: {
96-
name: 'Daniel Moxon',
97-
age: '31',
98-
details: {
99-
bio: 'I grew up in Washington State and was born on Valentine\'s day.'
100-
}
101-
},
102-
condition: true,
103-
anotherCondition: false,
104-
people: ['john', 'sally', 'sue'],
105-
beatles: [
106-
{ "firstName": "John", "lastName": "Lennon", details: { bio: 'I am a dude.' } },
107-
{ "firstName": "Paul", "lastName": "McCartney", details: { bio: 'I am also a dude.' } },
108-
{ "firstName": "George", "lastName": "Harrison" },
109-
{ "firstName": "Ringo", "lastName": "Starr" }
110-
],
111-
nested: {a: [1, 2, 3], b: [4, 5, 6]},
112-
nestedB: [
113-
{a: [1, 2, 3]},
114-
{a: [4, 5, 6]},
115-
],
116-
nestedC: {
117-
a: {b: 'One more time!!'}
118-
},
119-
arr: [1, 2, 3],
120-
"name": function () {
121-
return this.firstName + " " + this.lastName;
122-
},
123-
beans: 'Beans are good',
124-
paragraph: `This is a story about a developer who coded for over 20 years.
125-
And despite the career, he worked under his peers, whom only had just a few years.
126-
No matter the work, no matter the time, this developer just couldn't get another dime.
127-
Was it his past, was it his pride, or was it the fact that he never lied?`,
128-
lotsOfHtml: `<h1>Strip Tags</h1>
129-
<p>
130-
Will strip a lot of HTML including [<p><br><i><br /><a href="http://www.test.com" alt="test">Link removed</a>] (should be empty) tags among many others.
131-
</p>
132-
`
103+
lastName: 'moxon',
104+
email: '[email protected]'
133105
}

‎tests/test.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<html>
2+
<head>
3+
<title>stencil-js template engine demo</title>
4+
<style>
5+
body{
6+
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
7+
margin: 0;
8+
}
9+
body a {
10+
text-decoration: none;
11+
color: #888;
12+
}
13+
body a:hover {
14+
text-decoration: underline;
15+
}
16+
#logo {
17+
font-size: 32px;
18+
}
19+
#logo span{
20+
color: #aaa;
21+
}
22+
header nav ul, header nav li{
23+
list-style: none;
24+
display: inline;
25+
margin: 0;
26+
padding-left: 0;
27+
}
28+
header nav {
29+
margin: 10px 0 20px 0;
30+
}
31+
header nav li{
32+
color: #888;
33+
border: 1px solid #eee;
34+
border-radius: 3px;
35+
padding: 4px 8px;
36+
}
37+
main {
38+
padding: 10px;
39+
width: 1000px;
40+
margin: 0 auto;
41+
background-color: #fafafa;
42+
height: 100%;
43+
}
44+
article {
45+
border-top: 1px dashed #ddd;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<main>
51+
<header>
52+
<div id="logo">
53+
Stencil-JS <span>templating engine</span>
54+
</div>
55+
<nav>
56+
<ul>
57+
<li><a href="#">Nav</a></li>
58+
<li><a href="#">Links</a></li>
59+
<li><a href="#">Go</a></li>
60+
<li><a href="#">Here</a></li>
61+
</ul>
62+
</nav>
63+
</header>
64+
<article>
65+
<p>
66+
Welcome to Stencil JS! My name is {{firstName}} {{lastName}}. If you discover any bugs,
67+
please feel free to report them to {{email}} or via the Stencil-JS GitHub page:
68+
{{gitHubPage|linkify}}
69+
</p>
70+
<p>
71+
If you find this script useful, please make sure to like the project and share it with
72+
other developers who may find it interesting as well!
73+
</p>
74+
<p>
75+
This demo was created to show off the capabilities of the template engine. If you have any
76+
feature requests or would like to contribute, feel free to share!
77+
</p>
78+
</article>
79+
</main>
80+
</body>
81+
</html>

‎tests/usage.ts

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { Stencil } from '../stencil'
2-
import { template, subTemplate, anotherSubTemplate, subSubTemplate, view } from './templates'
2+
import { template, article, header, nav, view, styleSheet } from './templates'
33

44
const subTemplates = {
5-
subTemplate,
6-
anotherSubTemplate,
7-
subSubTemplate
5+
styleSheet,
6+
article,
7+
header,
8+
nav
89
}
910

10-
const options = {
11-
newLineToBr: true
12-
}
11+
const options = {}
1312

1413
console.time('Render time')
1514
const rendered = Stencil.render(template, view, subTemplates)

0 commit comments

Comments
 (0)