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

Merge pull request #1 from PolymerLabs/config

Browse Source 
Some changes to configuration and example element
This commit is contained in:
Justin Fagnani
2019-12-17 14:39:12 -08:00
committed by GitHub
parent 387a753d1f 9df8c648f6
commit 2c090ee06f
11 changed files with 942 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
.gitignore vendored
View File

@@ -1,7 +1,8 @@
node_modules/ /node_modules/
dist/ /lib/
build/
*.js.map # top level source
*.d.ts my-element.js
*.d.ts.map my-element.js.map
my-element.d.ts
my-element.d.ts.map

28
LICENSE Normal file
View File

@@ -0,0 +1,28 @@
BSD 3-Clause License
Copyright (c) 2019, The Polymer Authors. All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of the copyright holder nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

31
README.md
View File

@@ -1,48 +1,43 @@
# LitElement TypeScript starter # LitElement TypeScript starter
This directory includes a sample component project using LitElement with TypeScript This project includes a sample component using LitElement with TypeScript.
This sample uses the TypeScript compiler (tsc) to produce JavaScript that runs in modern browsers.
This sample uses [ES dev server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server)
for previewing the project without a build step. ES dev server handles resolving Node-style
import specifiers, which aren't supported in browsers. It also automatically transpiles code
and adds polyfills to support older browsers.
## Setup ## Setup
Install dependencies: Install dependencies:
```bash ```bash
npm -i npm i
``` ```
## Build ## Build
To build JavaScript version of your component: This sample uses the TypeScript compiler to produce JavaScript that runs in modern browsers, and [lit-analyzer](https://www.npmjs.com/package/lit-analyzer), a program that type-checks and lints lit-html templates.
To build the JavaScript version of your component:
```bash ```bash
npm run build npm run build
``` ```
To watch files and rebuild when the files are modified, To watch files and rebuild when the files are modified, run the following command in a separate shell:
run the following command in a separate window:
```bash ```bash
npm run build:watch npm run build:watch
``` ```
Both the TypeScript compiler and lit-analyzer are configured to be very strict. You may want to change `tsconfig.json` to make them less strict.
## Preview ## Dev Server
Run the dev server and open the project in a new browser tab: This sample uses [ES dev server](https://github.com/open-wc/open-wc/tree/master/packages/es-dev-server) for previewing the project without additional build steps. ES dev server handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles JavaScript and adds polyfills to support older browsers.
To run the dev server and open the project in a new browser tab:
```bash ```bash
npm start npm run serve
``` ```
## More information ## More information
See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for more information.
more information.

9
demo.html
View File

@@ -1,9 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="./build/my-element.js"></script>
</head>
<body>
<my-element></my-element>
</body>
</html>

20
demo/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>&lt;my-element> Demo</title>
<script type="module" src="../my-element.js"></script>
<style>
p {
border: solid 1px blue;
padding: 8px;
}
</style>
</head>
<body>
<my-element>
<p>This is child content</p>
</my-element>
</body>
</html>

24
my-element.ts
View File

@@ -1,24 +0,0 @@
import { LitElement, html, customElement, property } from 'lit-element';
@customElement('my-element')
class MyElement extends LitElement {
@property({type: String})
name = 'World';
constructor() {
super();
}
render(){
return html`
<p>Hello, ${this.name}!</p>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}

48
npm-debug.log
View File

@@ -1,48 +0,0 @@
0 info it worked if it ends with ok
1 verbose cli [ '/Users/arthure/.nvm/versions/node/v6.11.3/bin/node',
1 verbose cli '/Users/arthure/.nvm/versions/node/v6.11.3/bin/npm',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using npm@3.10.10
3 info using node@v6.11.3
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle dev-server-only@1.0.0~prebuild: dev-server-only@1.0.0
6 silly lifecycle dev-server-only@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle dev-server-only@1.0.0~build: dev-server-only@1.0.0
8 verbose lifecycle dev-server-only@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle dev-server-only@1.0.0~build: PATH: /Users/arthure/.nvm/versions/node/v6.11.3/lib/node_modules/npm/bin/node-gyp-bin:/Users/arthure/work/polymer/lit-starter-projects/lit-element-starter-ts/node_modules/.bin:/Users/arthure/google-cloud-sdk/bin:/Users/arthure/.nvm/versions/node/v6.11.3/bin:/usr/local/git/current/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin
10 verbose lifecycle dev-server-only@1.0.0~build: CWD: /Users/arthure/work/polymer/lit-starter-projects/lit-element-starter-ts
11 silly lifecycle dev-server-only@1.0.0~build: Args: [ '-c', 'lit-analyzer my-element.ts && tsc' ]
12 silly lifecycle dev-server-only@1.0.0~build: Returned: code: 1 signal: null
13 info lifecycle dev-server-only@1.0.0~build: Failed to exec build script
14 verbose stack Error: dev-server-only@1.0.0 build: `lit-analyzer my-element.ts && tsc`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/Users/arthure/.nvm/versions/node/v6.11.3/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/Users/arthure/.nvm/versions/node/v6.11.3/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:920:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
15 verbose pkgid dev-server-only@1.0.0
16 verbose cwd /Users/arthure/work/polymer/lit-starter-projects/lit-element-starter-ts
17 error Darwin 18.7.0
18 error argv "/Users/arthure/.nvm/versions/node/v6.11.3/bin/node" "/Users/arthure/.nvm/versions/node/v6.11.3/bin/npm" "run" "build"
19 error node v6.11.3
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error dev-server-only@1.0.0 build: `lit-analyzer my-element.ts && tsc`
22 error Exit status 1
23 error Failed at the dev-server-only@1.0.0 build script 'lit-analyzer my-element.ts && tsc'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the dev-server-only package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error lit-analyzer my-element.ts && tsc
23 error You can get information on how to open an issue for this project with:
23 error npm bugs dev-server-only
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls dev-server-only
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

1462
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

30
package.json
View File

@@ -1,23 +1,27 @@
{ {
"name": "lit-element-starter-ts", "name": "lit-element-starter-ts",
"version": "1.0.0", "version": "0.0.0",
"description": "", "description": "A simple web component",
"main": "index.js", "main": "my-element.js",
"module": "my-element.js",
"type": "module",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "build": "lit-analyzer && tsc",
"build": "lit-analyzer my-element.ts && tsc", "build:watch": "tsc --watch",
"build:watch": "lit-analyzer my-element.ts && tsc --watch", "serve": "es-dev-server --app-index demo/index.html --node-resolve --watch --open",
"start": "es-dev-server --app-index demo.html --node-resolve --watch --open" "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"web component", "lit-element", "typescript"
],
"author": "The Polymer Authors",
"license": "BSD-3-Clause",
"dependencies": {
"lit-element": "^2.2.1"
}, },
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": { "devDependencies": {
"es-dev-server": "^1.23.1", "es-dev-server": "^1.23.1",
"lit-analyzer": "^1.1.9", "lit-analyzer": "^1.1.9",
"typescript": "^3.7.2" "typescript": "^3.7.2"
},
"dependencies": {
"lit-element": "^2.2.1"
} }
} }

52
src/my-element.ts Normal file
View File

@@ -0,0 +1,52 @@
/**
* @license
* Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
import { LitElement, html, customElement, property, css } from 'lit-element';
@customElement('my-element')
class MyElement extends LitElement {
static styles = css`
:host {
display: block;
border: solid 1px gray;
padding: 16px;
max-width: 800px;
}
`;
@property()
name = 'World';
@property({type: Number})
count = 0;
render(){
return html`
<h1>Hello, ${this.name}!</h1>
<button @click=${this._onClick}>Click Count: ${this.count}</button>
<div class="slot"><slot></slot></div>
`;
}
private _onClick() {
this.count++;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}

41
tsconfig.json
View File

@@ -1,55 +1,28 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2017", "target": "es2017",
"module": "es2015", "module": "es2015",
"moduleResolution": "node", "lib": ["es2017", "dom", "dom.iterable"],
"lib": ["esnext.array", "esnext", "es2017", "dom"],
"declaration": true, "declaration": true,
"declarationMap": true, "declarationMap": true,
"sourceMap": true, "sourceMap": true,
"inlineSources": true, "outDir": "./",
"rootDir": "./src",
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noImplicitReturns": true, "noImplicitReturns": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noImplicitAny": true, "moduleResolution": "node",
"noImplicitThis": true,
"outDir": "./build",
// Only necessary because @types/uglify-js can't find types for source-map
"skipLibCheck": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"plugins": [ "plugins": [
{ {
"name": "ts-lit-plugin", "name": "ts-lit-plugin",
"rules": { "strict": true,
"no-complex-attribute-binding": "error",
"no-expressionless-property-binding": "error",
"no-incompatible-property-type": "error",
"no-incompatible-type-binding": "error",
"no-invalid-attribute-name": "error",
"no-invalid-boolean-binding": "error",
"no-invalid-css": "off",
"no-invalid-directive-binding": "error",
"no-invalid-tag-name": "error",
"no-missing-import": "off",
"no-noncallable-event-binding": "error",
"no-nullable-attribute-binding": "off",
"no-unclosed-tag": "error",
"no-unknown-attribute": "off",
"no-unknown-event": "off",
"no-unknown-property": "error",
"no-unknown-property-converter": "error",
"no-unknown-slot": "off",
"no-unknown-tag-name": "error"
}
} }
] ]
}, },
"include": [ "include": ["src/**/*.ts"],
"my-element.ts"
],
"exclude": [] "exclude": []
} }