lit · justinfagnani · Jan 31, 2019 · Jan 28, 2019 · Jan 28, 2019 · Jan 28, 2019
diff --git a/docs/_includes/projects/index-typescript/custom-greeting.ts b/docs/_includes/projects/index-typescript/custom-greeting.ts
@@ -0,0 +1,10 @@
+import { LitElement, html, property } from 'lit-element';
+
+export class CustomGreeting extends LitElement {
+  @property({ type: String}) name = 'World';
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+
+customElements.define('custom-greeting', CustomGreeting);
diff --git a/docs/_includes/projects/index-typescript/index.html b/docs/_includes/projects/index-typescript/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+  <title>lit-element code sample</title>
+
+</head>
+
+  <body>
+    <custom-greeting></custom-greeting>
+  </body>
+
+</html>
diff --git a/docs/_includes/projects/index-typescript/index.ts b/docs/_includes/projects/index-typescript/index.ts
@@ -0,0 +1 @@
+import './custom-greeting.ts';
diff --git a/docs/_includes/projects/index-typescript/manifest.json b/docs/_includes/projects/index-typescript/manifest.json
@@ -0,0 +1,14 @@
+{
+  "files": [
+    "custom-greeting.ts",
+    "index.html",
+    "index.ts"
+  ],
+  "title": "lit-element code sample",
+  "description": "lit-element code sample",
+  "template": "typescript",
+  "dependencies": {
+    "lit-element": "latest",
+    "@webcomponents/webcomponentsjs": "latest"
+  }
+}
diff --git a/docs/_includes/projects/index/custom-greeting.js b/docs/_includes/projects/index/custom-greeting.js
@@ -1,22 +1,16 @@
 import { LitElement, html } from 'lit-element';
 
-// Create your custom component
 class CustomGreeting extends LitElement {
-  // Declare properties
   static get properties() {
-    return {
-      name: { type: String }
-    };
+    return { name: { type: String } };
   }
-  // Initialize properties
   constructor() {
     super();
     this.name = 'World';
   }
-  // Define a template
   render() {
     return html`<p>Hello, ${this.name}!</p>`;
   }
 }
-// Register the element with the browser
+
 customElements.define('custom-greeting', CustomGreeting);
diff --git a/docs/index.md b/docs/index.md
@@ -58,27 +58,29 @@ Get started
 </h1>
 
 <h2>
-Define a component in JavaScript:
+Define a component
 </h2>
 
-<h3 style="margin: 12px 0 0 0;">
-custom-greeting.js
-</h3>
+It's easy to define a Web Component with LitElement:
 
 ```js
-{% include projects/index/custom-greeting.js %}
+{% include projects/index-typescript/custom-greeting.ts %}
 ```
 
-<h2 style="margin-top: 40px;">Include the component in your web page:</h2>
+<h2 style="margin-top: 40px;">Use a component</h2>
 
-<h3 style="margin: 12px 0 0 0;">
-index.html
-</h3>
+Then use it anywhere you use HTML:
 
 ```html
 <custom-greeting></custom-greeting>
 ```
 
+Click **Launch code editor** to see a live sample.
+
+{% include project.html folder="index-typescript" openFile="custom-greeting.js" %}
+
+See the same sample with JavaScript instead of TypeScript:
+
 {% include project.html folder="index" openFile="custom-greeting.js" %}
 
 </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		import './custom-greeting.ts';
Copy link Contributor justinfagnani Jan 29, 2019 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. Why do we have a separate file here? We can just import the tag directly into the HTML. Copy link Author ghost Jan 29, 2019 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. because stackblitz, consistency, & clarity... StackBlitz requires index.ts/js & errors if I import modules from html I want to show the user clear chunks of code rather than large files with multiple elements in an example, writing them all in index.* becomes clunky so I have separate files for each element - for consistency, I do this even if there is only 1 element Copy link Contributor justinfagnani Jan 30, 2019 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I agree with separate files for elements in most cases (trying to show only how two elements can compose might be easier with two very small elements in one file). The stackblitz limitations should be gone with the `lit-html` project template, which will hopefully be usable tomorrow. We can think about migrating to that later...