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

Merge branch 'master' of https://github.com/PolymerLabs/lit-element-starter-ts into clean-script

Browse Source
This commit is contained in:
Arthur Evans
2020-04-14 11:11:08 -07:00
parent e0ef707dfd f28a35d88a
commit 72bbaf998d
15 changed files with 4649 additions and 4562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.eleventy.cjs
View File

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

11
.eslintrc.json
View File

@@ -9,17 +9,18 @@
"ecmaVersion": 2020, "ecmaVersion": 2020,
"sourceType": "module" "sourceType": "module"
}, },
"plugins": [ "plugins": ["@typescript-eslint"],
"@typescript-eslint"
],
"rules": { "rules": {
"no-unexpected-multiline": "off", "no-unexpected-multiline": "off",
"@typescript-eslint/indent": "off", "@typescript-eslint/indent": "off",
"@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-unused-vars": ["warn", { "@typescript-eslint/no-unused-vars": [
"warn",
{
"argsIgnorePattern": "^_" "argsIgnorePattern": "^_"
}] }
]
} }
} }

1
custom-elements.json
View File

@@ -3,6 +3,7 @@
"tags": [ "tags": [
{ {
"name": "my-element", "name": "my-element",
"path": "./src/my-element.ts",
"description": "An example element.", "description": "An example element.",
"attributes": [ "attributes": [
{ {

4
docs/examples/index.html
View File

@@ -53,9 +53,9 @@
<p>This is child content</p> <p>This is child content</p>
</my-element> </my-element>
<h3>CSS</h3> <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> <pre class="language-css"><code class="language-css"> <span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid 1px blue<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span><br> <span class="token punctuation">}</span></code></pre>
<h3>HTML</h3> <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> <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-element</span><span class="token punctuation">></span></span><br> <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><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-element</span><span class="token punctuation">></span></span></code></pre>
</div> </div>
</section> </section>

2
docs/examples/name-property/index.html
View File

@@ -45,7 +45,7 @@
<div> <div>
<p><my-element name="Earth"></my-element></p> <p><my-element name="Earth"></my-element></p>
<h3>HTML</h3> <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> <pre class="language-html"><code class="language-html"><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></code></pre>
</div> </div>
</section> </section>

6
docs/index.html
View File

@@ -32,7 +32,7 @@
<section class="columns"> <section class="columns">
<div> <div>
<p><code>&lt;my-element&gt;</code> is just an HTML element. You can it anywhere you can use HTML!</p> <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> <pre class="language-html"><code class="language-html"><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></code></pre>
</div> </div>
<div> <div>
<p><my-element></my-element></p> <p><my-element></my-element></p>
@@ -42,7 +42,7 @@
<section class="columns"> <section class="columns">
<div> <div>
<p><code>&lt;my-element&gt;</code> can be configured with attributed in plain HTML.</p> <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> <pre class="language-html"><code class="language-html"><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></code></pre>
</div> </div>
<div> <div>
<p><my-element name="HTML"></my-element></p> <p><my-element name="HTML"></my-element></p>
@@ -52,7 +52,7 @@
<section class="columns"> <section class="columns">
<div> <div>
<p><code>&lt;my-element&gt;</code> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html</p> <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 &amp;lt;my-element&amp;gt;&lt;/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> <pre class="language-js"><code class="language-js"><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><br><br><span class="token keyword">const</span> name<span class="token operator">=</span><span class="token string">"lit-html"</span><span class="token punctuation">;</span><br><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> &lt;h2>This is a &amp;lt;my-element&amp;gt;&lt;/h2><br> &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><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>
<div> <div>
<h2>This is a &lt;my-element&gt;</h2> <h2>This is a &lt;my-element&gt;</h2>

6
docs/install/index.html
View File

@@ -29,14 +29,14 @@
<h1>Install</h1> <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> <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> <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> <pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> i my-element</code></pre>
<h2>CDN</h2> <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>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> <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> <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> <pre class="language-html"><code class="language-html"><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></code></pre>
<h3>JavaScript</h3> <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> <pre class="language-html"><code class="language-html">import {MyElement} from 'https://unpkg.com/my-element?module';</code></pre>
</main> </main>
</div> </div>

152
docs/my-element.bundled.js
View File

File diff suppressed because one or more lines are too long

2
docs/prism-okaidia.css
View File

@@ -59,7 +59,7 @@ pre[class*="language-"] {
color: #f8f8f2; color: #f8f8f2;
} }
.namespace { .token.namespace {
opacity: .7; opacity: .7;
} }

10
karma.conf.cjs
View File

@@ -1,24 +1,24 @@
const { createDefaultConfig } = require('@open-wc/testing-karma'); const {createDefaultConfig} = require('@open-wc/testing-karma');
const merge = require('deepmerge'); const merge = require('deepmerge');
module.exports = config => { module.exports = (config) => {
config.set( config.set(
merge(createDefaultConfig(config), { merge(createDefaultConfig(config), {
frameworks: ['mocha', 'chai'], frameworks: ['mocha', 'chai'],
client: { client: {
mocha: {ui: 'tdd'} mocha: {ui: 'tdd'},
}, },
files: [ files: [
{ {
pattern: config.grep ? config.grep : 'test/**/*_test.js', pattern: config.grep ? config.grep : 'test/**/*_test.js',
type: 'module' type: 'module',
}, },
], ],
// See the karma-esm docs for all options // See the karma-esm docs for all options
esm: { esm: {
nodeResolve: true, nodeResolve: true,
}, },
}), })
); );
return config; return config;
}; };

10892
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

46
package.json
View File

@@ -9,7 +9,9 @@
"build": "tsc", "build": "tsc",
"build:watch": "tsc --watch", "build:watch": "tsc --watch",
"clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}", "clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
"lint": "lit-analyzer && eslint 'src/**/*.ts'", "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
"lint:eslint": "eslint 'src/**/*.ts'",
"lint:lit-analyzer": "lit-analyzer",
"format": "prettier src/* --write", "format": "prettier src/* --write",
"docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen", "docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
"docs:clean": "rimraf docs", "docs:clean": "rimraf docs",
@@ -27,41 +29,41 @@
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js" "checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
}, },
"keywords": [ "keywords": [
"web component", "web-components",
"lit-element", "lit-element",
"typescript" "typescript"
], ],
"author": "The Polymer Authors", "author": "The Polymer Authors",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
"lit-element": "^2.2.1" "lit-element": "^2.3.1"
}, },
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^0.9.0", "@11ty/eleventy": "^0.10.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3", "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
"@open-wc/testing": "^2.4.2", "@open-wc/testing": "^2.5.10",
"@open-wc/testing-karma": "^3.2.19", "@open-wc/testing-karma": "^3.3.11",
"@rollup/plugin-replace": "^2.2.1", "@rollup/plugin-replace": "^2.3.1",
"@types/chai": "^4.2.7", "@types/chai": "^4.2.11",
"@types/mocha": "^5.2.7", "@types/mocha": "^7.0.2",
"@typescript-eslint/eslint-plugin": "^2.12.0", "@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.12.0", "@typescript-eslint/parser": "^2.27.0",
"chai": "^4.2.0", "chai": "^4.2.0",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"es-dev-server": "^1.23.1", "es-dev-server": "^1.46.1",
"eslint": "^6.7.2", "eslint": "^6.8.0",
"karma": "^4.4.1", "karma": "^4.4.1",
"karma-chai": "^0.1.0", "karma-chai": "^0.1.0",
"karma-mocha": "^1.3.0", "karma-mocha": "^1.3.0",
"lit-analyzer": "^1.1.9", "lit-analyzer": "^1.1.10",
"mocha": "^6.2.2", "mocha": "^7.1.1",
"prettier": "^1.19.1", "prettier": "^2.0.4",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^1.27.13", "rollup": "^1.32.1",
"rollup-plugin-filesize": "^6.2.1", "rollup-plugin-filesize": "^7.0.0",
"rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^5.1.3", "rollup-plugin-terser": "^5.3.0",
"typescript": "^3.7.2", "typescript": "^3.8.3",
"web-component-analyzer": "^1.0.0" "web-component-analyzer": "^1.0.3"
} }
} }

6
rollup.config.js
View File

@@ -42,6 +42,6 @@ export default {
}), }),
filesize({ filesize({
showBrotliSize: true, showBrotliSize: true,
}) }),
] ],
} };

25
src/test/my-element_test.ts
View File

@@ -4,7 +4,6 @@ import {fixture, html} from '@open-wc/testing';
const assert = chai.assert; const assert = chai.assert;
suite('my-element', () => { suite('my-element', () => {
test('is defined', () => { test('is defined', () => {
const el = document.createElement('my-element'); const el = document.createElement('my-element');
assert.instanceOf(el, MyElement); assert.instanceOf(el, MyElement);
@@ -12,32 +11,40 @@ suite('my-element', () => {
test('renders with default values', async () => { test('renders with default values', async () => {
const el = await fixture(html`<my-element></my-element>`); const el = await fixture(html`<my-element></my-element>`);
assert.shadowDom.equal(el, ` assert.shadowDom.equal(
el,
`
<h1>Hello, World!</h1> <h1>Hello, World!</h1>
<button part="button">Click Count: 0</button> <button part="button">Click Count: 0</button>
<slot></slot> <slot></slot>
`); `
);
}); });
test('renders with a set name', async () => { test('renders with a set name', async () => {
const el = await fixture(html`<my-element name="Test"></my-element>`); const el = await fixture(html`<my-element name="Test"></my-element>`);
assert.shadowDom.equal(el, ` assert.shadowDom.equal(
el,
`
<h1>Hello, Test!</h1> <h1>Hello, Test!</h1>
<button part="button">Click Count: 0</button> <button part="button">Click Count: 0</button>
<slot></slot> <slot></slot>
`); `
);
}); });
test('handles a click', async () => { test('handles a click', async () => {
const el = await fixture(html`<my-element></my-element>`) as MyElement; const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
const button = el.shadowRoot!.querySelector('button')!; const button = el.shadowRoot!.querySelector('button')!;
button.click(); button.click();
await el.updateComplete; await el.updateComplete;
assert.shadowDom.equal(el, ` assert.shadowDom.equal(
el,
`
<h1>Hello, World!</h1> <h1>Hello, World!</h1>
<button part="button">Click Count: 1</button> <button part="button">Click Count: 1</button>
<slot></slot> <slot></slot>
`); `
);
}); });
}); });

2
tsconfig.json
View File

@@ -20,7 +20,7 @@
"plugins": [ "plugins": [
{ {
"name": "ts-lit-plugin", "name": "ts-lit-plugin",
"strict": true, "strict": true
} }
] ]
}, },