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

Update lit-starter-ts to lit-next

Browse Source 
* Upgrades the source to work with lit-next
* Aligns the linting and formatting rules/settings & ignores with the monorepo
* Upgrades to the same version of typescript and tsconfig settings as the monorepo
* Upgrades the test runner from karma to web-test-runner
* Upgrades the dev server from es-dev-server to @web/dev-server
This commit is contained in:
Kevin Schaaf
2021-01-29 17:34:51 -08:00
parent 6b7f29aedb
commit fddb01149c
36 changed files with 5508 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs-src/.eleventyignore Normal file
View File

@@ -0,0 +1,2 @@
# Ignore files with a leading underscore; useful for e.g. readmes in source documentation
_*.md

4
docs-src/_data/api.11tydata.js
View File

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

20
docs-src/_includes/example.11ty.cjs
View File

@@ -4,8 +4,7 @@ const relative = require('./relative-path.cjs');
/**
* This template extends the page template and adds an examples list.
*/
module.exports = function(data) {
module.exports = function (data) {
return page({
...data,
content: renderExample(data),
@@ -18,13 +17,22 @@ const renderExample = ({name, content, collections, page}) => {
<section class="examples">
<nav class="collection">
<ul>
${collections.example === undefined
${
collections.example === undefined
? ''
: collections.example.map((post) => `
: collections.example
.map(
(post) => `
<li class=${post.url === page.url ? 'selected' : ''}>
<a href="${relative(page.url, post.url)}">${post.data.description.replace('<', '&lt;')}</a>
<a href="${relative(
page.url,
post.url
)}">${post.data.description.replace('<', '&lt;')}</a>
</li>
`).join('')}
`
)
.join('')
}
</ul>
</nav>
<div>

4
docs-src/_includes/footer.11ty.cjs
View File

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

2
docs-src/_includes/header.11ty.cjs
View File

@@ -1,4 +1,4 @@
module.exports = function(data) {
module.exports = function (data) {
return `
<header>
<h1>&lt;my-element></h1>

2
docs-src/_includes/nav.11ty.cjs
View File

@@ -1,6 +1,6 @@
const relative = require('./relative-path.cjs');
module.exports = function({page}) {
module.exports = function ({page}) {
return `
<nav>
<a href="${relative(page.url, '/')}">Home</a>

9
docs-src/_includes/page.11ty.cjs
View File

@@ -3,7 +3,7 @@ const footer = require('./footer.11ty.cjs');
const nav = require('./nav.11ty.cjs');
const relative = require('./relative-path.cjs');
module.exports = function(data) {
module.exports = function (data) {
const {title, page, content} = data;
return `
<!doctype html>
@@ -16,7 +16,12 @@ module.exports = function(data) {
<link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
<script type="module" src="${relative(page.url, '/my-element.bundled.js')}"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="/node_modules/lit/polyfill-support.js"></script>
<script type="module" src="${relative(
page.url,
'/my-element.bundled.js'
)}"></script>
</head>
<body>
${header()}

53
docs-src/api.11ty.cjs
View File

@@ -15,7 +15,9 @@ module.exports = class Docs {
const tags = customElements.tags;
return `
<h1>API</h1>
${tags.map((tag) => `
${tags
.map(
(tag) => `
<h2>&lt;${tag.name}></h2>
<div>
${tag.description}
@@ -23,41 +25,40 @@ module.exports = class Docs {
${renderTable(
'Attributes',
['name', 'description', 'type', 'default'],
tag.attributes)}
tag.attributes
)}
${renderTable(
'Properties',
['name', 'attribute', 'description', 'type', 'default'],
tag.properties)}
${/*
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('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)}
tag.cssParts
)}
${renderTable(
'CSS Custom Properties',
['name', 'description'],
tag.cssProperties)}
`).join('')}
tag.cssProperties
)}
`
)
.join('')}
`;
}
}
};
/**
* Renders a table of data, plucking the given properties from each item in
@@ -65,7 +66,7 @@ module.exports = class Docs {
*/
const renderTable = (name, properties, data) => {
if (data === undefined) {
return ''
return '';
}
return `
<h3>${name}</h3>
@@ -73,13 +74,17 @@ const renderTable = (name, properties, data) => {
<tr>
${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
</tr>
${data.map((i) => `
${data
.map(
(i) => `
<tr>
${properties.map((p) => `<td>${i[p]}</td>`).join('')}
</tr>
`).join('')}
`
)
.join('')}
</table>
`
`;
};
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

8
docs-src/examples/index.md
View File

@@ -19,10 +19,10 @@ description: A basic example
<h3>CSS</h3>
```css
p {
border: solid 1px blue;
padding: 8px;
}
p {
border: solid 1px blue;
padding: 8px;
}
```
<h3>HTML</h3>

13
docs-src/index.md
View File

@@ -55,12 +55,15 @@ title: <my-element> ⌲ Home
```js
import {html, render} from 'lit-html';
const name="lit-html";
const name = 'lit-html';
render(html`
<h2>This is a &lt;my-element&gt;</h2>
<my-element .name=${name}></my-element>
`, document.body);
render(
html`
<h2>This is a &lt;my-element&gt;</h2>
<my-element .name=${name}></my-element>
`,
document.body
);
```
</div>

2
docs-src/install.md
View File

@@ -20,11 +20,13 @@ npm CDNs like [unpkg.com]() can directly serve files that have been published to
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';
```