dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a static site generator

Browse Source 
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
This commit is contained in:
Justin Fagnani
2019-12-19 20:48:45 -08:00
committed by Justin Fagnani
parent 2b3e914666
commit fc662728eb
28 changed files with 5770 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.eleventy.cjs Normal file
View File

@@ -0,0 +1,15 @@
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(syntaxHighlight);
return {
dir: {
input: "docs-src",
output: "docs"
},
templateExtensionAliases: {
"11ty.cjs": "11ty.js",
"11tydata.cjs": "11tydata.js"
}
};
};

51
custom-elements.json Normal file
View File

@@ -0,0 +1,51 @@
{
"version": "experimental",
"tags": [
{
"name": "my-element",
"description": "An example element.",
"attributes": [
{
"name": "name",
"description": "The name to say \"Hello\" to.",
"type": "string",
"default": "\"World\""
},
{
"name": "count",
"description": "The number of times the button has been clicked.",
"type": "number",
"default": "0"
}
],
"properties": [
{
"name": "name",
"attribute": "name",
"description": "The name to say \"Hello\" to.",
"type": "string",
"default": "\"World\""
},
{
"name": "count",
"attribute": "count",
"description": "The number of times the button has been clicked.",
"type": "number",
"default": "0"
}
],
"slots": [
{
"name": "",
"description": "This element has a slot"
}
],
"cssParts": [
{
"name": "button",
"description": "The button"
}
]
}
]
}

7
docs-src/_README.md Normal file
View File

@@ -0,0 +1,7 @@
This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the [eleventy](11ty.dev) static site generator.
The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
To view the site locally, run `npm run serve`.
To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.

8
docs-src/_data/api.11tydata.js Normal file
View File

@@ -0,0 +1,8 @@
const fs = require('fs');
module.exports = () => {
const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
return {
customElements,
};
};

34
docs-src/_includes/example.11ty.cjs Normal file
View File

@@ -0,0 +1,34 @@
const page = require('./page.11ty.cjs');
/**
* This template extends the page template and adds an examples list.
*/
module.exports = function(data) {
return page({
...data,
content: renderExample(data),
});
};
const renderExample = ({name, content, collections, page}) => {
return `
<h1>Example: ${name}</h1>
<section class="examples">
<nav class="collection">
<ul>
${collections.example === undefined
? ''
: collections.example.map((post) => `
<li class=${post.url === page.url ? 'selected' : ''}>
<a href="/docs${post.url}">${ post.data.description.replace('<', '&lt;') }</a>
</li>
`).join('')}
</ul>
</nav>
<div>
${content}
</div>
</section>
`;
};

9
docs-src/_includes/footer.11ty.cjs Normal file
View File

@@ -0,0 +1,9 @@
module.exports = function(data) {
return `
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>`;
};

7
docs-src/_includes/header.11ty.cjs Normal file
View File

@@ -0,0 +1,7 @@
module.exports = function(data) {
return `
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>`;
};

9
docs-src/_includes/nav.11ty.cjs Normal file
View File

@@ -0,0 +1,9 @@
module.exports = function(data) {
return `
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>`;
};

30
docs-src/_includes/page.11ty.cjs Normal file
View File

@@ -0,0 +1,30 @@
const header = require('./header.11ty.cjs');
const footer = require('./footer.11ty.cjs');
const nav = require('./nav.11ty.cjs');
module.exports = function(data) {
return `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${data.title}</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
${header()}
${nav(data)}
<div id="main-wrapper">
<main>
${data.content}
</main>
</div>
${footer()}
</body>
</html>`;
};

85
docs-src/api.11ty.cjs Normal file
View File

@@ -0,0 +1,85 @@
/**
* This page generates its content from the custom-element.json file as read by
* the _data/api.11tydata.js script.
*/
module.exports = class Docs {
data() {
return {
layout: 'page.11ty.cjs',
title: '<my-element> ⌲ Docs',
};
}
render(data) {
const customElements = data.api['11tydata'].customElements;
const tags = customElements.tags;
return `
<h1>API</h1>
${tags.map((tag) => `
<h2>&lt;${tag.name}></h2>
<div>
${tag.description}
</div>
${renderTable(
'Attributes',
['name', 'description', 'type', 'default'],
tag.attributes)}
${renderTable(
'Properties',
['name', 'attribute', 'description', 'type', 'default'],
tag.properties)}
${/*
* Methods are not output by web-component-analyzer yet (a bug), so
* this is a placeholder so that at least _something_ will be output
* when that is fixed, and element maintainers will hopefully have a
* signal to update this file to add the neccessary columns.
*/
renderTable(
'Methods',
['name', 'description'],
tag.methods)}
${renderTable(
'Events',
['name', 'description'],
tag.events)}
${renderTable(
'Slots',
['name', 'description'],
tag.slots)}
${renderTable(
'CSS Shadow Parts',
['name', 'description'],
tag.cssParts)}
${renderTable(
'CSS Custom Properties',
['name', 'description'],
tag.cssProperties)}
`).join('')}
`;
}
}
/**
* Renders a table of data, plucking the given properties from each item in
* `data`.
*/
const renderTable = (name, properties, data) => {
if (data === undefined) {
return ''
}
return `
<h3>${name}</h3>
<table>
<tr>
${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
</tr>
${data.map((i) => `
<tr>
${properties.map((p) => `<td>${i[p]}</td>`).join('')}
</tr>
`).join('')}
</table>
`
};
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

34
docs-src/examples/index.md Normal file
View File

@@ -0,0 +1,34 @@
---
layout: example.11ty.cjs
title: <my-element> ⌲ Examples ⌲ Basic
tags: example
name: Basic
description: A basic example
---
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
```css
p {
border: solid 1px blue;
padding: 8px;
}
```
<h3>HTML</h3>
```html
<my-element>
<p>This is child content</p>
</my-element>
```

15
docs-src/examples/name-property.md Normal file
View File

@@ -0,0 +1,15 @@
---
layout: example.11ty.cjs
title: <my-element> ⌲ Examples ⌲ Name Property
tags: example
name: Name Property
description: Setting the name property
---
<my-element name="Earth"></my-element>
<h3>HTML</h3>
```html
<my-element name="Earth"></my-element>
```

72
docs-src/index.md Normal file
View File

@@ -0,0 +1,72 @@
---
layout: page.11ty.cjs
title: <my-element> ⌲ Home
---
# &lt;my-element>
`<my-element>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
## As easy as HTML
<section class="columns">
<div>
`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
```html
<my-element></my-element>
```
</div>
<div>
<my-element></my-element>
</div>
</section>
## Configure with attributes
<section class="columns">
<div>
`<my-element>` can be configured with attributed in plain HTML.
```html
<my-element name="HTML"></my-element>
```
</div>
<div>
<my-element name="HTML"></my-element>
</div>
</section>
## Declarative rendering
<section class="columns">
<div>
`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
```js
import {html, render} from 'lit-html';
const name="lit-html";
render(html`
<h2>This is a my-element>h2>
<my-element .name=${name}></my-element>
`, document.body);
```
</div>
<div>
<my-element name="lit-html"></my-element>
</div>
</section>

30
docs-src/install.md Normal file
View File

@@ -0,0 +1,30 @@
---
layout: page.11ty.cjs
title: <my-element> ⌲ Install
---
# Install
`<my-element>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
## Local Installation
```bash
npm i my-element
```
## CDN
npm CDNs like [unpkg.com]() can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specificers to full URLs.
### HTML
```html
<script type="module" src="https://unpkg.com/my-element?module"></script>
```
### JavaScript
```html
import {MyElement} from 'https://unpkg.com/my-element?module';
```

3
docs-src/package.json Normal file
View File

@@ -0,0 +1,3 @@
{
"type": "commonjs"
}

0
docs/_README/index.html Normal file
View File

111
docs/api/index.html Normal file
View File

@@ -0,0 +1,111 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Docs</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>API</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>Name</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>Name</th><th>Attribute</th><th>Description</th><th>Type</th><th>Default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>The name to say "Hello" to.</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td></td><td>This element has a slot</td>
</tr>
</table>
<h3>CSS Shadow Parts</h3>
<table>
<tr>
<th>Name</th><th>Description</th>
</tr>
<tr>
<td>button</td><td>The button</td>
</tr>
</table>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

162
docs/docs.css Normal file
View File

@@ -0,0 +1,162 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
color: #333;
font-family: 'Open Sans', arial, sans-serif;
min-width: min-content;
min-height: 100vh;
font-size: 18px;
display: flex;
flex-direction: column;
align-items: stretch;
}
#main-wrapper {
flex-grow: 1;
}
main {
max-width: 1024px;
margin: 0 auto;
}
a:visited {
color: inherit;
}
header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 360px;
margin: 0;
background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
color: white;
}
footer {
width: 100%;
min-height: 120px;
background: gray;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px;
margin-top: 64px;
}
h1 {
font-size: 2.5em;
font-weight: 400;
}
h2 {
font-size: 1.6em;
font-weight: 300;
margin: 64px 0 12px;
}
h3 {
font-weight: 300;
}
header h1 {
width: auto;
font-size: 2.8em;
margin: 0;
}
header h2 {
width: auto;
margin: 0;
}
nav {
display: grid;
width: 100%;
max-width: 100%;
grid-template-columns: repeat(auto-fit, 240px);
justify-content: center;
border-bottom: 1px solid #efefef;
}
nav > a {
color: #444;
display: block;
flex: 1;
font-size: 18px;
padding: 20px 0;
text-align: center;
text-decoration: none;
}
nav > a:hover {
text-decoration: underline;
}
nav.collection {
border: none;
}
nav.collection > ul {
padding: 0;
list-style: none;
}
nav.collection > ul > li {
padding: 4px 0;
}
nav.collection > ul > li.selected {
font-weight: 600;
}
nav.collection a {
text-decoration: none;
}
nav.collection a:hover {
text-decoration: underline;
}
section.columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
grid-gap: 48px;
justify-content: center;
}
section.columns > div {
flex: 1;
}
section.examples {
display: grid;
grid-template-columns: 240px minmax(400px, 784px);
grid-gap: 48px;
justify-content: center;
}
section.examples h2:first-of-type {
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
font-weight: 600;
}
td, th {
border: solid 1px #aaa;
padding: 4px;
text-align: left;
}

96
docs/docs/index.html Normal file
View File

@@ -0,0 +1,96 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Docs</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/docs/">Documentation</a>
<a href="/docs/install/">Install</a>
</nav>
<main>
<h1>Documentation</h1>
<h2>&lt;my-element></h2>
<div>
An example element.
</div>
<h3>Attributes</h3>
<table>
<tr>
<th>name</th><th>description</th><th>type</th><th>default</th>
</tr>
<tr>
<td>name</td><td>undefined</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Properties</h3>
<table>
<tr>
<th>name</th><th>attribute</th><th>description</th><th>type</th><th>default</th>
</tr>
<tr>
<td>name</td><td>name</td><td>undefined</td><td>string</td><td>"World"</td>
</tr>
<tr>
<td>count</td><td>count</td><td>The number of times the button has been clicked.</td><td>number</td><td>0</td>
</tr>
</table>
<h3>Slots</h3>
<table>
<tr>
<th>name</th><th>description</th>
</tr>
<tr>
<td></td><td>This element has a slot</td>
</tr>
</table>
</main>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

54
docs/examples/basic/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h2>Basic Use</h2>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

66
docs/examples/index copy/index.html Normal file
View File

@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Examples</h1>
<nav class="collection">
<ul>
<li><a href="/docs/examples/">A basic example</a></li>
,
<li><a href="/docs/examples/index copy/">A basic example</a></li>
</ul>
</nav>
<h2>Basic Use</h2>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

73
docs/examples/index.html Normal file
View File

@@ -0,0 +1,73 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Example: Basic</h1>
<section class="examples">
<nav class="collection">
<ul>
<li class=selected>
<a href="/docs/examples/">A basic example</a>
</li>
<li class=>
<a href="/docs/examples/name-property/">Setting the name property</a>
</li>
</ul>
</nav>
<div>
<style>
my-element p {
border: solid 1px blue;
padding: 8px;
}
</style>
<my-element>
<p>This is child content</p>
</my-element>
<h3>CSS</h3>
<pre class="language-css"><code class="language-css"><span class="highlight-line"> <span class="token selector">p</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span></span><br><span class="highlight-line"> <span class="token punctuation">}</span></span></code></pre>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>This is child content<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

63
docs/examples/name-property/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Name Property</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Example: Name Property</h1>
<section class="examples">
<nav class="collection">
<ul>
<li class=>
<a href="/docs/examples/">A basic example</a>
</li>
<li class=selected>
<a href="/docs/examples/name-property/">Setting the name property</a>
</li>
</ul>
</nav>
<div>
<p><my-element name="Earth"></my-element></p>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Earth<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

72
docs/index.html Normal file
View File

@@ -0,0 +1,72 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Home</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>&lt;my-element&gt;</h1>
<p><code>&lt;my-element&gt;</code> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.</p>
<h2>As easy as HTML</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</div>
<div>
<p><my-element></my-element></p>
</div>
</section>
<h2>Configure with attributes</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></span></code></pre>
</div>
<div>
<p><my-element name="HTML"></my-element></p>
</div>
</section>
<h2>Declarative rendering</h2>
<section class="columns">
<div>
<p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p>
<pre class="language-js"><code class="language-js"><span class="highlight-line"><span class="token keyword">import</span> <span class="token punctuation">{</span>html<span class="token punctuation">,</span> render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'lit-html'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span></span><br><span class="highlight-line"></span><br><span class="token function">render</span><span class="token punctuation">(</span>html<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><br><span class="highlight-line"> &lt;h2>This is a my-element>h2></span><br><span class="highlight-line"> &lt;my-element .name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">>&lt;/my-element></span><br></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</div>
<div>
<p><my-element name="lit-html"></my-element></p>
</div>
</section>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

51
docs/install/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Install</title>
<link rel="stylesheet" href="/docs/docs.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="/node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet" />
<script type="module" src="/my-element.js"></script>
</head>
<body>
<header>
<h1>&lt;my-element></h1>
<h2>A web component just for me.</h2>
</header>
<nav>
<a href="/docs/">Home</a>
<a href="/docs/examples/">Examples</a>
<a href="/docs/api/">API</a>
<a href="/docs/install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
<h1>Install</h1>
<p><code>&lt;my-element&gt;</code> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.</p>
<h2>Local Installation</h2>
<pre class="language-bash"><code class="language-bash"><span class="highlight-line"><span class="token function">npm</span> i my-element</span></code></pre>
<h2>CDN</h2>
<p>npm CDNs like <a href="">unpkg.com</a> can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.</p>
<p>For this element to work from unpkg.com specifically, you need to include the <code>?module</code> query parameter, which tells unpkg.com to rewrite &quot;bare&quot; module specificers to full URLs.</p>
<h3>HTML</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/my-element?module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span></code></pre>
<h3>JavaScript</h3>
<pre class="language-html"><code class="language-html"><span class="highlight-line">import {MyElement} from 'https://unpkg.com/my-element?module';</span></code></pre>
</main>
</div>
<footer>
<p>
Made with
<a href="https://github.com/PolymerLabs/lit-element-starter-ts">lit-element-starter-ts</a>
</p>
</footer>
</body>
</html>

4593
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -10,8 +10,10 @@
"build:watch": "tsc --watch",
"lint": "lit-analyzer && eslint 'src/**/*.ts'",
"format": "prettier src/* --write",
"docs": "npm run analyze & eleventy --config=.eleventy.cjs",
"docs:watch": "eleventy --config=.eleventy.cjs --watch",
"analyze": "wca analyze \"src/**/*.ts\" --outFile custom-elements.json",
"serve": "es-dev-server --app-index demo/index.html --node-resolve --watch --open",
"serve": "es-dev-server --node-resolve --watch",
"test": "karma start karma.conf.cjs",
"test:watch": "karma start karma.conf.cjs --auto-watch=true --single-run=false",
"test:update-snapshots": "karma start karma.conf.cjs --update-snapshots",
@@ -28,6 +30,8 @@
"lit-element": "^2.2.1"
},
"devDependencies": {
"@11ty/eleventy": "^0.9.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
"@open-wc/testing": "^2.4.2",
"@open-wc/testing-karma": "^3.2.19",
"@types/chai": "^4.2.7",

20
src/my-element.ts
View File

@@ -14,6 +14,12 @@
import {LitElement, html, customElement, property, css} from 'lit-element';
/**
* An example element.
*
* @slot - This element has a slot
* @csspart button - The button
*/
@customElement('my-element')
export class MyElement extends LitElement {
static styles = css`
@@ -25,16 +31,24 @@ export class MyElement extends LitElement {
}
`;
/**
* The name to say "Hello" to.
*/
@property()
name = 'World';
/**
* The number of times the button has been clicked.
*/
@property({type: Number})
count = 0;
render() {
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick}>Click Count: ${this.count}</button>
<button @click=${this._onClick} part="button">
Click Count: ${this.count}
</button>
<slot></slot>
`;
}
@@ -42,6 +56,10 @@ export class MyElement extends LitElement {
private _onClick() {
this.count++;
}
foo(): string {
return 'foo';
}
}
declare global {