Update components/rendering guide

packages/lit-dev-content/samples/docs/templates/compose/my-page.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/compose/my-page.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement, property} from 'lit-element';
 
 function headerTemplate(title) {
   return html`<header>${title}</header>`;
@@ -10,29 +10,20 @@ function footerTemplate() {
   return html`<footer>Your footer here.</footer>`;
 }
 
+@customElement('my-page')
 class MyPage extends LitElement {
-  static get properties() {
-    return {
-      article: {
-        attribute: false,
-      },
-    };
-  }
 
-  constructor() {
-    super();
-    this.article = {
+  @property({attribute: false})
+  article: string = {
       title: 'My Nifty Article',
       text: 'Some witty text.',
-    };
-  }
+    }
 
   render() {
     return html`
       ${headerTemplate(this.article.title)}
-      ${articleTemplate(this.article.text)} 
+      ${articleTemplate(this.article.text)}
       ${footerTemplate()}
     `;
   }
 }
-customElements.define('my-page', MyPage);

packages/lit-dev-content/samples/docs/templates/composeimports/my-article.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/composeimports/my-article.ts

@@ -1,10 +1,10 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement} from 'lit-element';
 
+@customElement('my-article')
 class MyArticle extends LitElement {
   render() {
     return html`
       <article>article</article>
     `;
   }
 }
-customElements.define('my-article', MyArticle);

packages/lit-dev-content/samples/docs/templates/composeimports/my-footer.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/composeimports/my-footer.ts

@@ -1,10 +1,10 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement} from 'lit-element';
 
+@customElement('my-footer')
 class MyFooter extends LitElement {
   render() {
     return html`
       <footer>footer</footer>
     `;
   }
 }
-customElements.define('my-footer', MyFooter);

packages/lit-dev-content/samples/docs/templates/composeimports/my-header.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/composeimports/my-header.ts

@@ -1,10 +1,10 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement} from 'lit-element';
 
+@customElement('my-header')
 class MyHeader extends LitElement {
   render() {
     return html`
       <header>header</header>
     `;
   }
 }
-customElements.define('my-header', MyHeader);

packages/lit-dev-content/samples/docs/templates/composeimports/my-page.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/composeimports/my-page.ts

@@ -1,9 +1,10 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement} from 'lit-element';
 
 import './my-header.js';
 import './my-article.js';
 import './my-footer.js';
 
+@customElement('my-page')
 class MyPage extends LitElement {
   render() {
     return html`
@@ -13,4 +14,3 @@ class MyPage extends LitElement {
     `;
   }
 }
-customElements.define('my-page', MyPage);

packages/lit-dev-content/samples/docs/templates/design/dom-manip.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/design/dom-manip.ts

@@ -1,7 +1,7 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement} from 'lit-element';
 
 // Anti-pattern. Avoid!
-
+@customElement('dom-manip')
 class DomManip extends LitElement {
   constructor() {
     super();
@@ -24,4 +24,3 @@ class DomManip extends LitElement {
     }, 3000);
   }
 }
-customElements.define('dom-manip', DomManip);

packages/lit-dev-content/samples/docs/templates/design/update-properties.js → packages/lit-dev-content/samples/docs/components/shadowdom/templates/design/update-properties.ts

@@ -1,25 +1,23 @@
-import { LitElement, html } from 'lit-element';
+import {LitElement, html, customElement, property} from 'lit-element';
 
-/**
- * Use this pattern instead.
- */
+@customElement('update-properties')
 class UpdateProperties extends LitElement {
-  static get properties(){
-    return {
-      message: {type: String}
-    };
-  }
+
+  @property()
+  message: string = 'Loading';
+
   constructor() {
     super();
-    this.message = 'Loading';
     this.addEventListener('stuff-loaded', (e) => { this.message = e.detail } );
     this.loadStuff();
   }
+
   render() {
     return html`
       <p>${this.message}</p>
     `;
   }
+
   loadStuff() {
     setInterval(() => {
       let loaded = new CustomEvent('stuff-loaded', {
@@ -29,5 +27,3 @@ class UpdateProperties extends LitElement {
     }, 3000);
   }
 }
-
-customElements.define('update-properties', UpdateProperties);

packages/lit-dev-content/samples/docs/templates/compose/my-page.ts

@@ -0,0 +1,30 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators';
+
+function headerTemplate(title) {
+  return html`<header>${title}</header>`;
+}
+function articleTemplate(text) {
+  return html`<article>${text}</article>`;
+}
+function footerTemplate() {
+  return html`<footer>Your footer here.</footer>`;
+}
+
+@customElement('my-page')
+class MyPage extends LitElement {
+
+  @property({attribute: false})
+  article: string = {
+      title: 'My Nifty Article',
+      text: 'Some witty text.',
+    }
+
+  render() {
+    return html`
+      ${headerTemplate(this.article.title)}
+      ${articleTemplate(this.article.text)}
+      ${footerTemplate()}
+    `;
+  }
+}

packages/lit-dev-content/samples/docs/templates/compose/project.json

@@ -1,6 +1,12 @@
 {
   "files": {
-    "my-page.js": {},
+    "my-page.ts": {},
     "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
   }
 }

packages/lit-dev-content/samples/docs/templates/composeimports/my-article.ts

@@ -0,0 +1,11 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators';
+
+@customElement('my-article')
+class MyArticle extends LitElement {
+  render() {
+    return html`
+      <article>article</article>
+    `;
+  }
+}

packages/lit-dev-content/samples/docs/templates/composeimports/my-footer.ts

@@ -0,0 +1,11 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators';
+
+@customElement('my-footer')
+class MyFooter extends LitElement {
+  render() {
+    return html`
+      <footer>footer</footer>
+    `;
+  }
+}

packages/lit-dev-content/samples/docs/templates/composeimports/my-header.ts

@@ -0,0 +1,11 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators';
+
+@customElement('my-header')
+class MyHeader extends LitElement {
+  render() {
+    return html`
+      <header>header</header>
+    `;
+  }
+}

packages/lit-dev-content/samples/docs/templates/composeimports/my-page.ts

@@ -0,0 +1,17 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators';
+
+import './my-header.js';
+import './my-article.js';
+import './my-footer.js';
+
+@customElement('my-page')
+class MyPage extends LitElement {
+  render() {
+    return html`
+      <my-header></my-header>
+      <my-article></my-article>
+      <my-footer></my-footer>
+    `;
+  }
+}

packages/lit-dev-content/samples/docs/templates/composeimports/project.json

@@ -1,9 +1,15 @@
 {
   "files": {
-    "my-page.js": {},
-    "my-header.js": {},
-    "my-article.js": {},
-    "my-footer.js": {},
+    "my-page.ts": {},
+    "my-header.ts": {},
+    "my-article.ts": {},
+    "my-footer.ts": {},
     "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
   }
 }

packages/lit-dev-content/samples/docs/templates/define/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script type="module" src="./my-element.js"></script>
-  <title>lit-element code sample</title>
+  <title>Lit code sample</title>
 </head>
 <body>
   <my-element></my-element>

packages/lit-dev-content/samples/docs/templates/define/my-element.ts

@@ -0,0 +1,10 @@
+import {LitElement, html} from 'lit';
+import {customElement} from 'lit/decorators';
+
+@customElement('my-element')
+class MyElement extends LitElement {
+
+  render(){
+    return html`<p>Hello from my template.</p>`;
+  }
+}

packages/lit-dev-content/samples/docs/templates/define/project.json

@@ -1,7 +1,12 @@
 {
   "files": {
-    "my-element.js": {},
+    "my-element.ts": {},
     "index.html": {}
-
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
   }
 }

packages/lit-dev-content/samples/docs/templates/design/index.html

@@ -3,12 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script type="module" src="./dom-manip.js"></script>
   <script type="module" src="./update-properties.js"></script>
   <title>lit-element code sample</title>
 </head>
 <body>
-  <dom-manip></dom-manip>
   <update-properties></update-properties>
 </body>
 </html>

packages/lit-dev-content/samples/docs/templates/design/project.json

@@ -1,7 +1,12 @@
 {
   "files": {
-    "dom-manip.js": {},
-    "update-properties.js": {},
+    "update-properties.ts": {},
     "index.html": {}
+  },
+  "importMap": {
+    "imports": {
+      "lit": "https://cdn.skypack.dev/lit",
+      "lit/": "https://cdn.skypack.dev/lit/"
+    }
   }
 }

packages/lit-dev-content/samples/docs/templates/design/update-properties.ts

@@ -0,0 +1,29 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators';
+
+
+@customElement('update-properties')
+class UpdateProperties extends LitElement {
+
+  @property()
+  message: string = 'Loading...';
+
+  constructor() {
+    super();
+    this.loadStuff().then((content) => this.message = content);
+  }
+
+  render() {
+    return html`
+      <p>${this.message}</p>
+    `;
+  }
+
+  loadStuff() {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve('Content loaded.');
+      }, 3000);
+    }
+  }
+}

packages/lit-dev-content/samples/tutorial/intro/after/my-element.ts

@@ -1,5 +1,5 @@
 import {LitElement, html} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import {customElement} from 'lit/decorators';
 
 @customElement('my-element')
 class MyElement extends LitElement {

packages/lit-dev-content/samples/tutorial/intro/before/my-element.ts

@@ -1,5 +1,5 @@
 import {LitElement, html} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import {customElement} from 'lit/decorators';
 
 @customElement('my-element')
 class MyElement extends LitElement {