subay 0.0.12 → 0.1.0

package/README.md

@@ -603,10 +603,8 @@ const Greeting = (name: string, children: () => Node[]) => {
 
 **Component Usage**
 
-When using a component in a template, reference the component at the tag position.
-Because the template is an HTML string, self-closing tags are not supported when referencing.
-The parameters passed to the component must be in the same order as the component's declared parameters.
-The parameters received by the component are always consistent with those passed in.
+Subay components do not support interpolation at the tag position in templates. Instead, they are used through direct calls or deferred calls.
+A deferred call means creating a function that returns the result of the component call.
 
 **Example**
 
@@ -618,9 +616,14 @@ const Greeting = (greet: string, name: () => string) => {
 };
 
 const name = o('World');
-const app = html` <div><${Greeting} greet=${'Hello'} name=${name}></${Greeting}></div> `;
 
-document.body.append(...app);
+// Direct call
+const app1 = html` <div>${Greeting('Hello', name)}</div> `;
+
+// Deferred call
+const app2 = html` <div>${() => Greeting('Hello', name)}</div> `;
+
+document.body.append(...app1);
 ```
 
 **Don't Do This**
@@ -633,25 +636,19 @@ const Greeting = (greet: string, name: () => string) => {
 };
 
 const name = o('World');
-// Error, the following span will be treated as a child node of Greeting.
+// Error - Interpolation at tag position
 const app = html`
     <div>
-        <${Greeting}
-            greet=${'Hello'}
-            name=${name}
-        />
-        <span></span>
+        <${Greeting} greet=${'Hello'} name=${name}></${Greeting}>
     </div>
 `;
-// Error, parameter order is inconsistent with Greeting's parameters
-const app = html` <div><${Greeting} name=${name} greet=${'Hi'} ></${Greeting}></div> `;
 
 document.body.append(...app);
 ```
 
 **Dynamic Components**
 
-The interpolation at the tag position can be the return value of `S` or `o`, and components can be dynamically selected for rendering based on conditions.
+You can dynamically select which component to render based on conditions by returning different components from a function.
 
 **Example**
 
@@ -668,14 +665,13 @@ const Farewell = (name: () => string) => {
 
 const showGreeting = o(true);
 const name = o('World');
-const Component = S(() => (showGreeting() ? Greeting : Farewell));
 
 const app = html`
     <div>
-        <${Component} name=${name} ></${Component}>
+        ${() => (showGreeting() ? Greeting(name) : Farewell(name))}
         <button onclick=${() => showGreeting(!showGreeting())}>Toggle</button>
     </div>
 `;
 
 document.body.append(...app);
-```
+```