From 16108193fdbced37381a0086fac6d593905c1b9f Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 22 Sep 2023 09:55:13 +0200
Subject: [PATCH] chore: add `template` vs `render()` section to readme

---
 README.md           | 12 +++++++++++-
 demo/HelloWorld.mjs |  2 +-
 demo/SimpleText.mjs |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index caf6ba4..db12ba4 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,7 @@ The result is a reactive UI on property changes.
 1. [Import via unpkg](#import-via-unpkg)
 1. [Installation via npm](#installation-via-npm)
 1. [Usage](#usage)
+1. [`template` vs `render()`](#template-vs-render)
 1. [Quick Start Example](#quick-start-example)
 1. [Life-Cycle Hooks](#life-cycle-hooks)
     1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized
@@ -82,6 +83,15 @@ The result is a reactive UI that updates on attribute changes:
 
 <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
 
+## `template` vs `render()`
+
+This mental model attempts to reduce the cognitive complexity of authoring components:
+
+1. The `template` is a read-only property (initialized with a `get` keyword) that represents *how* the component view is rendered. This makes the template close to modification.
+1. There is a `render()` method that triggers a view render.
+1. This `render()` method is *automatically* called under the hood every time an attribute value changed.
+1. You can *optionally* call this `render()` method at any point to trigger a render if you need.
+
 ## Quick Start Example
 
 Here is an example of using a custom element in a single .html file:
@@ -179,4 +189,4 @@ class ClickableText extends WebComponent {
     return `<span style="cursor:pointer">Click me!</span>`;
   }
 }
-```
+```
\ No newline at end of file
diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index 488e046..394a2f2 100644
--- a/demo/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -1,6 +1,6 @@
 // @ts-check
 
-import WebComponent from "../dist";
+import WebComponent from "../src/index.js";
 
 export class HelloWorld extends WebComponent {
   name = "World";
diff --git a/demo/SimpleText.mjs b/demo/SimpleText.mjs
index 02ac0c4..a2886f9 100644
--- a/demo/SimpleText.mjs
+++ b/demo/SimpleText.mjs
@@ -1,6 +1,6 @@
 // @ts-check
 
-import WebComponent from "../dist/index";
+import WebComponent from "../src/index.js";
 
 class SimpleText extends WebComponent {
   onInit() {