Some changes to configuration and example element
This commit is contained in:
Justin Fagnani
18
.gitignore
vendored
18
.gitignore
vendored
@@ -1,7 +1,15 @@
|
||||
node_modules/
|
||||
dist/
|
||||
build/
|
||||
lib/
|
||||
test/
|
||||
|
||||
*.js.map
|
||||
*.d.ts
|
||||
*.d.ts.map
|
||||
# generated test source
|
||||
/test/**/*.js
|
||||
/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
31
README.md
@@ -1,48 +1,43 @@
|
||||
# LitElement TypeScript starter
|
||||
|
||||
This directory includes a sample component project 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.
|
||||
This project includes a sample component using LitElement with TypeScript.
|
||||
|
||||
## Setup
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
npm -i
|
||||
npm i
|
||||
```
|
||||
|
||||
## 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
|
||||
npm run build
|
||||
```
|
||||
|
||||
To watch files and rebuild when the files are modified,
|
||||
run the following command in a separate window:
|
||||
To watch files and rebuild when the files are modified, run the following command in a separate shell:
|
||||
|
||||
```bash
|
||||
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
|
||||
npm start
|
||||
npm run serve
|
||||
```
|
||||
|
||||
## More information
|
||||
|
||||
See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for
|
||||
more information.
|
||||
|
||||
See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for more information.
|
||||
|
||||
@@ -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
18
demo/index.html
Normal 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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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
1462
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@@ -1,23 +1,27 @@
|
||||
{
|
||||
"name": "lit-element-starter-ts",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"version": "0.0.0",
|
||||
"description": "A simple web component",
|
||||
"main": "my-element.js",
|
||||
"module": "my-element.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "lit-analyzer my-element.ts && tsc",
|
||||
"build:watch": "lit-analyzer my-element.ts && tsc --watch",
|
||||
"start": "es-dev-server --app-index demo.html --node-resolve --watch --open"
|
||||
"build": "lit-analyzer && tsc",
|
||||
"build:watch": "tsc --watch",
|
||||
"serve": "es-dev-server --app-index demo/index.html --node-resolve --watch --open",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"keywords": [
|
||||
"web component"
|
||||
],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"lit-element": "^2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"es-dev-server": "^1.23.1",
|
||||
"lit-analyzer": "^1.1.9",
|
||||
"typescript": "^3.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit-element": "^2.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
38
src/my-element.ts
Normal file
38
src/my-element.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,28 @@
|
||||
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2017",
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["esnext.array", "esnext", "es2017", "dom"],
|
||||
"lib": ["es2017", "dom", "dom.iterable"],
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"outDir": "./",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"outDir": "./build",
|
||||
// Only necessary because @types/uglify-js can't find types for source-map
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "ts-lit-plugin",
|
||||
"rules": {
|
||||
"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"
|
||||
}
|
||||
"strict": true,
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"my-element.ts"
|
||||
],
|
||||
"include": ["src/**/*.ts"],
|
||||
"exclude": []
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user