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

Some changes to configuration and example element

Browse Source
This commit is contained in:
Justin Fagnani
2019-12-12 14:33:23 -08:00
parent 387a753d1f
commit 3f1e3a1d2d
10 changed files with 902 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.gitignore vendored
View File

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

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>

18
demo/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<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

26
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": [], "keywords": [
"web component"
],
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": {
"lit-element": "^2.2.1"
},
"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"
} }
} }

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

@@ -0,0 +1,38 @@
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": []
} }