Skip to content

Commit 122a21e

Browse files
aomarksaomarks
authored
Merge pull request #1 from PolymerLabs/lit-element-shack
Add LitElement and Polymer 3 versions of the Shack benchmark
2 parents 2731794 + e279d77 commit 122a21e

28 files changed

+2496
-95
lines changed

‎.clang-format‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
BasedOnStyle: Google
2+
AlignAfterOpenBracket: AlwaysBreak
3+
AllowAllParametersOfDeclarationOnNextLine: false
4+
AllowShortBlocksOnASingleLine: false
5+
AllowShortCaseLabelsOnASingleLine: false
6+
AllowShortFunctionsOnASingleLine: None
7+
AllowShortIfStatementsOnASingleLine: false
8+
AllowShortLoopsOnASingleLine: false
9+
BinPackArguments: false

‎lit-element/lit-element/package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lit-element/lit-element/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"private": true,
3+
"dependencies": {
4+
"lit-element": "^2.1.0"
5+
}
6+
}

‎lit-element/lit-element/shack/elements/shack-app.js‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
4+
* This code may only be used under the BSD style license found at
5+
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
6+
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
7+
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
8+
* Google as part of the polymer project is also subject to an additional IP
9+
* rights grant found at http://polymer.github.io/PATENTS.txt
10+
*/
11+
12+
import './shack-item.js';
13+
import './shack-cart.js';
14+
15+
import {css, html, LitElement} from 'lit-element';
16+
17+
class ShackApp extends LitElement {
18+
static get properties() {
19+
return {
20+
page: {type: String},
21+
cart: {type: Array},
22+
categories: {type: Object},
23+
};
24+
}
25+
26+
static get styles() {
27+
return css`
28+
:host {
29+
font-family: "Arial", sans-serif;
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
}
34+
35+
#pageHeader {
36+
flex-basis: 130px;
37+
flex-shrink: 0;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
}
42+
43+
#logo {
44+
margin: 26px 0 0 0;
45+
font-size: 16px;
46+
letter-spacing: 4px;
47+
color: #202020;
48+
}
49+
50+
shack-cart {
51+
position: absolute;
52+
right: 20px;
53+
top: 20px;
54+
}
55+
56+
#categoryNav {
57+
display: flex;
58+
justify-content: center;
59+
margin-top: 46px;
60+
}
61+
62+
#categoryNav > a {
63+
margin: 0 20px;
64+
text-decoration: none;
65+
color: #202020;
66+
font-size: 13px;
67+
padding-bottom: 9px;
68+
min-width: 110px;
69+
text-align: center;
70+
cursor: pointer;
71+
}
72+
73+
#categoryNav > a[active] {
74+
border-bottom: 2px solid #172c50;
75+
}
76+
77+
main {
78+
display: flex;
79+
flex-direction: column;
80+
align-items: center;
81+
min-width: 500px;
82+
flex-grow: 1;
83+
width: 100%;
84+
}
85+
86+
#hero {
87+
width: 100%;
88+
flex-basis: 320px;
89+
flex-shrink: 0;
90+
background-color: #e7e7e7;
91+
}
92+
93+
#categoryTitle {
94+
font-size: 16px;
95+
font-weight: normal;
96+
margin: 37px 0 0 0;
97+
}
98+
99+
#numItems {
100+
color: #757575;
101+
font-size: 13px;
102+
margin-top: 8px;
103+
}
104+
105+
#list {
106+
max-width: 1000px;
107+
display: flex;
108+
flex-direction: row;
109+
flex-wrap: wrap;
110+
margin: 0;
111+
padding: 0;
112+
}
113+
114+
shack-item {
115+
flex-basis: 33%;
116+
margin-top: 43px;
117+
}
118+
119+
shack-item:nth-child(7n+1) {
120+
--shack-item-placeholder-color: #d1fdb5;
121+
}
122+
shack-item:nth-child(7n+2) {
123+
--shack-item-placeholder-color: #ffe7a6;
124+
}
125+
shack-item:nth-child(7n+3) {
126+
--shack-item-placeholder-color: #ffe4fe;
127+
}
128+
shack-item:nth-child(7n+4) {
129+
--shack-item-placeholder-color: #cfffff;
130+
}
131+
shack-item:nth-child(7n+5) {
132+
--shack-item-placeholder-color: #feff9b;
133+
}
134+
shack-item:nth-child(7n+6) {
135+
--shack-item-placeholder-color: #d0ebff;
136+
}
137+
shack-item:nth-child(7n+7) {
138+
--shack-item-placeholder-color: #ffd9d9;
139+
}
140+
141+
#demoNotice {
142+
background-color: #202020;
143+
color: white;
144+
font-size: 12px;
145+
padding: 12px 24px;
146+
margin-top: 30px;
147+
}
148+
`;
149+
}
150+
151+
constructor() {
152+
super();
153+
this.cart = [];
154+
}
155+
156+
render() {
157+
return html`
158+
<header id="pageHeader">
159+
<h1 id="logo">SHACK</h1>
160+
<shack-cart .items=${this.cart}></shack-cart>
161+
<nav id="categoryNav">${this.categoryNav()}</nav>
162+
</header>
163+
164+
<main id="categoryList">
165+
<div id="hero"></div>
166+
<h2 id="categoryTitle">${this.categories[this.page].title}</h2>
167+
<span id="numItems">
168+
(${this.categories[this.page].items.length} items)
169+
</span>
170+
171+
<div id="list">
172+
${this.categories[this.page].items.map((item) => html`
173+
<shack-item .title=${item.title}
174+
.price=${item.price}
175+
@click=${(e) => this.clickItem(item, e)}
176+
</shack-item>
177+
`)}
178+
</div>
179+
</main>
180+
181+
<footer id="footer">
182+
<div id="demoNotice">DEMO ONLY</div>
183+
</footer>
184+
`;
185+
}
186+
187+
categoryNav() {
188+
return Object.keys(this.categories)
189+
.map(
190+
(c) => html`<a ?active=${this.page === c} @click=${
191+
(e) =>
192+
this.clickCategory(c, e)}>${this.categories[c].title}</a>`);
193+
}
194+
195+
clickCategory(category, event) {
196+
event.preventDefault();
197+
this.page = category;
198+
}
199+
200+
clickItem(item, event) {
201+
event.preventDefault();
202+
this.cart = [item.title, ...this.cart];
203+
}
204+
}
205+
206+
customElements.define('shack-app', ShackApp);

‎lit-element/lit-element/shack/elements/shack-cart.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
4+
* This code may only be used under the BSD style license found at
5+
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
6+
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
7+
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
8+
* Google as part of the polymer project is also subject to an additional IP
9+
* rights grant found at http://polymer.github.io/PATENTS.txt
10+
*/
11+
12+
import {css, html, LitElement} from 'lit-element';
13+
14+
export class ShackCart extends LitElement {
15+
static get properties() {
16+
return {
17+
items: {type: Array},
18+
};
19+
}
20+
21+
static get styles() {
22+
return css`
23+
#button {
24+
font-size: 24px;
25+
}
26+
27+
#badge {
28+
position: absolute;
29+
right: -7px;
30+
top: -7px;
31+
background-color: #172c50;
32+
color: white;
33+
border-radius: 50%;
34+
width: 20px;
35+
height: 20px;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
font-size: 12px;
40+
}
41+
`;
42+
}
43+
44+
constructor() {
45+
super();
46+
this.items = [];
47+
}
48+
49+
render() {
50+
return html`
51+
<a id="button">🛒</a>
52+
<div id="badge">${this.items.length}</div>
53+
`;
54+
}
55+
}
56+
57+
customElements.define('shack-cart', ShackCart);

‎lit-element/lit-element/shack/elements/shack-item.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
4+
* This code may only be used under the BSD style license found at
5+
* http://polymer.github.io/LICENSE.txt The complete set of authors may be found
6+
* at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
7+
* be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
8+
* Google as part of the polymer project is also subject to an additional IP
9+
* rights grant found at http://polymer.github.io/PATENTS.txt
10+
*/
11+
12+
import {css, html, LitElement} from 'lit-element';
13+
14+
export class ShackItem extends LitElement {
15+
static get properties() {
16+
return {
17+
title: {type: String},
18+
price: {type: Number},
19+
};
20+
}
21+
22+
static get styles() {
23+
return css`
24+
:host {
25+
cursor: pointer;
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
}
30+
31+
.imagePlaceholder {
32+
height: 125px;
33+
width: 130px;
34+
padding-top: 24px;
35+
background-color: var(--shack-item-placeholder-color, gray);
36+
}
37+
38+
.title {
39+
color: #202020;
40+
font-size: 13px;
41+
font-weight: bold;
42+
margin-top: 36px;
43+
text-align: center;
44+
}
45+
46+
.price {
47+
color: #757575;
48+
font-size: 13px;
49+
margin-top: 4px;
50+
}
51+
`;
52+
}
53+
54+
constructor() {
55+
super();
56+
this.title = '';
57+
this.price = 0;
58+
}
59+
60+
render() {
61+
return html`
62+
<div class="imagePlaceholder"></div>
63+
<span class="title">${this.title}</span>
64+
<span class="price">\$${this.price.toFixed(2)}</span>
65+
`;
66+
}
67+
}
68+
69+
customElements.define('shack-item', ShackItem);

‎lit-element/lit-element/shack/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>lit-element shack benchmark</title>
5+
<script type="module" src="./index.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
}
10+
</style>
11+
</head>
12+
<body>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)