Skip to content

Commit 7757b36

Browse files
committed
First
0 parents  commit 7757b36

8 files changed

+6524
-0
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

README.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# LitElement Hello World Example with Webpack
2+
3+
**To run:**
4+
5+
```
6+
npm install
7+
npm run dev
8+
```
9+
10+
This is the code:
11+
12+
```
13+
import {LitElement, html, customElement, property} from 'lit-element'
14+
15+
@customElement('main-view')
16+
class RandomView extends LitElement {
17+
@property({type: Number}) count = 0
18+
19+
clickHandler() {
20+
this.count++
21+
}
22+
23+
render() {
24+
return html`
25+
<p>The count is: ${this.count}</p>
26+
<button @click="${(this.clickHandler)}">Click</button>
27+
`
28+
}
29+
}
30+
```
31+
32+
---
33+
34+
[LitElement](https://lit-element.polymer-project.org/) is a cool library for creating web components. The problem is, the documentation sucks.
35+
36+
For example the home page example is literally just a "Hello World" that shows you nothing about how to change state or handle button clicks (Polymer team: please look at React's homepage for an example of how a library's homepage should look).
37+
38+
Nowhere in the documentation does it tell you how to set things up with webpack, instead telling you to simply use `polymer serve`. And getting things set up with Webpack with decorators is surprisingly time-consuming due to [this bug with babel decorators](https://github.com/Polymer/lit-element/issues/234).
39+
40+
I created this repo to 1. show a simple example of Lit-Element that's less worthless than "Hello World" 2. save you from the hassle of having to set up the webpack config.
41+
42+
The webpack config however is extremely simple and not meant for production. But at least with this basic working config, it should be easy to extend and get it to that point.
43+
44+
I'll probably update this repo to make things more complete as I learn more (still new to Lit-Element).

index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
</head>
6+
<body>
7+
<main-view></main-view>
8+
</body>
9+
</html>

index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './views/main-view.js'

0 commit comments

Comments
 (0)