Initial checkin.
This commit is contained in:
Arthur Evans
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
*.js.map
|
||||||
|
*.d.ts
|
||||||
|
*.d.ts.map
|
||||||
48
README.md
Normal file
48
README.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 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.
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Install dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm -i
|
||||||
|
```
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
To build 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:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build:watch
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Preview
|
||||||
|
|
||||||
|
Run the dev server and open the project in a new browser tab:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
## More information
|
||||||
|
|
||||||
|
See [Get started](https://lit-element.polymer-project.org/guide/start) on the LitElement site for
|
||||||
|
more information.
|
||||||
|
|
||||||
9
demo.html
Normal file
9
demo.html
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<script type="module" src="./build/my-element.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<my-element></my-element>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
my-element.ts
Normal file
24
my-element.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
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
Normal file
48
npm-debug.log
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
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 ]
|
||||||
3891
package-lock.json
generated
Normal file
3891
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "lit-element-starter-ts",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"es-dev-server": "^1.23.1",
|
||||||
|
"lit-analyzer": "^1.1.9",
|
||||||
|
"typescript": "^3.7.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lit-element": "^2.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
55
tsconfig.json
Normal file
55
tsconfig.json
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2017",
|
||||||
|
"module": "es2015",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"lib": ["esnext.array", "esnext", "es2017", "dom"],
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"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,
|
||||||
|
"experimentalDecorators": 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"my-element.ts"
|
||||||
|
],
|
||||||
|
"exclude": []
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user