added index to README

nathanjhood · Oct 17, 2024 · e3177c7 · e3177c7
1 parent ebc9eaf
commit e3177c7
Showing 1 changed file with 108 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,10 @@ Step by step!
 - [`'app-component': AppComponent`](#app-component-appcomponent)
 - [`AppComponent.render()`](#appcomponentrender)
 - [`AppComponent.render(innerHTML)`](#appcomponentrenderinnerhtml)
+- [`AppComponent.setup()`](#appcomponentsetup)
+- [`createElement('app-component')`](#createelementapp-component)
+- [`App()`](#app)
+- [`render(App)`](#renderapp)
 - [`<app-component>`](#app-component)
 - [Tips](#tips)
 - [Further Reading](#further-reading)
@@ -162,6 +166,7 @@ class AppComponent extends HTMLElement {
 ### `CustomElementRegistry`
 
 ```ts
+// IMPORTANT
 window.customElements.define('app-component', AppComponent);
 ```
 
@@ -170,14 +175,14 @@ window.customElements.define('app-component', AppComponent);
 ### `'app-component': AppComponent`
 
 ```ts
-window.customElements.define('app-component',
+window.customElements.define('app-component', // <-- wrap the class!
   class AppComponent extends HTMLElement {
     constructor() {
       super();
       this.innerHTML = `<slot>Your app goes here</slot>`;
     }
   }
-);
+); // <-- '.define()' ends here!
 ```
 
 ---
@@ -187,50 +192,126 @@ window.customElements.define('app-component',
 ### `AppComponent.render()`
 
 ```ts
-class AppComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.innerHTML = this.render();
-  }
-  render() {
-    return `<slot>Your app goes here</slot>`;
+window.customElements.define('app-component',
+  class AppComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.innerHTML = this.render();
+    }
+    render() {
+      return `<slot>Your app goes here</slot>`;
+    }
   }
-}
+);
 ```
 
 ---
 
 ### `AppComponent.render(innerHTML)`
 
 ```ts
-class AppComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.innerHTML = this.render('Your app goes here');
-  }
-  render(innerHTML: string): string {
-    return `<slot>${innerHTML}</slot>`;
+window.customElements.define('app-component',
+  class AppComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.innerHTML = this.render('Your app goes here');
+    }
+    render(innerHTML: string): string {
+      return `<slot>${innerHTML}</slot>`;
+    }
   }
-}
+);
 ```
 
 ---
 
 ### `AppComponent.setup()`
 
 ```ts
-class AppComponent extends HTMLElement {
-  constructor() {
-    super();
-	  this.setup();
-  }
-  setup(): void {
-    this.innerHTML = this.render('Your app goes here');
+window.customElements.define('app-component',
+  class AppComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.setup();
+    }
+    setup(): void {
+      this.innerHTML = this.render('Your app goes here');
+    }
+    render(innerHTML: string): string {
+      return `<slot>${innerHTML}</slot>`;
+    }
   }
-  render(innerHTML: string): string {
-    return `<slot>${innerHTML}</slot>`;
+);
+```
+
+---
+
+### `createElement('app-component')`
+
+```ts
+window.customElements.define('app-component',
+  class AppComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.setup();
+    }
+    setup(): void {
+      this.innerHTML = this.render('Your app goes here');
+    }
+    render(innerHTML: string): string {
+      return `<slot>${innerHTML}</slot>`;
+    }
   }
+);
+
+const app = document.createElement('app-component');
+```
+
+---
+
+### `App()`
+
+```ts
+const App = () => {
+  // define the component
+  window.customElements.define('app-component',
+    class AppComponent extends HTMLElement {
+      constructor() {
+        super();
+        this.setup();
+      }
+      setup(): void {
+        this.innerHTML = this.render('Your app goes here');
+      }
+      render(innerHTML: string): string {
+        return `<slot>${innerHTML}</slot>`;
+      }
+    }
+  );
+  // then return it
+  return document.createElement('app-component');
+}
+
+// Now we can assign it :)
+const app = App();
+```
+
+---
+
+### `render(App)`
+
+```ts
+// src/index.ts
+
+import App = require('./App');
+
+const render = (element: () => HTMLElement) = {
+  // ...attaches passed-in element to document
 }
+
+// so, pass it our App :)
+render(App)
+
 ```
 
 ---