tagu-tagu 3.2.3 → 3.2.5

package/README.md

@@ -54,6 +54,7 @@ button({css: {background: "blue"}}, "Hello!");
 
 #### Modify existing element
 You can use initializers for existing element.
+[JSFiddle](https://jsfiddle.net/do_the_simplest/o87nw6zL/15/)
 
 ```typescript
 import { Modify } from "tagu-tagu";
@@ -72,7 +73,185 @@ Modify(document.body, {
 
 ```
 
+#### `html` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/6p9jh45L/2/)
+```typescript
+import { div } from "tagu-tagu";
+
+// Element: innerHTML
+function HtmlExample() {
+	return div({ html: `<button>Hello World!</button>` });
+}
+
+document.body.appendChild(HtmlExample());
+
+```
+
+#### `css` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/mfLutvnc/1/)
+
+```typescript
+import { button } from "tagu-tagu";
+
+// element.style.setProperty
+function CssExample() {
+	return button({
+		css: { width: "300px", height: "300px" },
+	});
+}
+
+document.body.appendChild(CssExample());
+```
+
+#### `attr` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/r8a423pw/1/)
+
+```typescript
+import { input } from "tagu-tagu";
+
+// Element: setAttribute
+function AttrExample() {
+	return input({
+		attr: { type: "color" },
+	});
+}
+
+document.body.appendChild(AttrExample());
+```
+
+#### `prop` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/mc38ksqw/1/)
+
+```typescript
+import { option, select } from "tagu-tagu";
+
+// Element: setAttribute
+function AttrExample() {
+	return select([option("One"), option("Two"), option("Three")], {
+		prop: { selectedIndex: 1 },
+	});
+}
+
+document.body.appendChild(AttrExample());
+```
+
+#### `on` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/Lsjmw263/)
+```typescript
+import { button } from "tagu-tagu";
+
+// Element: addEventListener
+function OnExample() {
+	return button("Click Me", { on: { click: () => alert("Hello!") } });
+}
+
+document.body.appendChild(OnExample());
+```
+
+#### `$` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/b8roj7wx/1/)
+```html
+<form>
+    <div>Name: <input id="name"></div>
+    <div>Age: <input id="age"></div>
+    <button id="submit">Submit</button>
+</form>
+<script type="module" src="index.ts"></script>
+```
+```typescript
+import { Modify, style } from "tagu-tagu";
+
+// Element: querySelector
+function $Example() {
+	Modify("form", {
+		$: {
+			"#name": { prop: { defaultValue: "Einstein" } },
+			"#age": { attr: { type: "number" }, prop: { defaultValue: 26 } },
+			"#submit": [
+				style({
+					"#submit": {
+						background: "blue",
+						color: "white",
+						border: "none",
+						"border-radius": "10px",
+					},
+					"#submit:hover": {
+						background: "skyblue",
+					},
+				}),
+			],
+		},
+	});
+}
+
+$Example();
+```
+
+#### `$$` initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/gqe5378t/1/)
+```html
+<meta charset="utf-8">
+<div>
+    <h1>Unfertilized Eggs</h1>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+</div>
+<div id="fertilized">
+    <h1>Click!</h1>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+    <button>🥚</button>
+</div>
+<script type="module" src="index.ts"></script>
+```
+```typescript
+import { Modify } from "tagu-tagu";
+
+// Element: querySelectorAll
+function $$Example() {
+	Modify("#fertilized", {
+		$$: {
+			button: {
+				on: {
+					click: (e) => {
+						(e.target as HTMLButtonElement).textContent = "🐣";
+					},
+				},
+			},
+		},
+	});
+}
+
+$$Example();
+```
+
+#### Callback initializer
+[JSFiddle](https://jsfiddle.net/do_the_simplest/tfj8uqa7/3/)
+```typescript
+import { button, div } from "tagu-tagu";
+
+function InitializerCallbackExample() {
+	return div([
+		div([
+			div([
+				button("Deep", (button) =>
+					console.log("debug:", button, "is created!"),
+				),
+			]),
+		]),
+	]);
+}
+
+document.body.appendChild(InitializerCallbackExample());
+```
+
 ### `If`
+[JSFiddle](https://jsfiddle.net/do_the_simplest/bxuqsh1d/19/)
 
 ```typescript
 import { div, If, input, span, useState } from "tagu-tagu";
@@ -103,6 +282,7 @@ document.body.appendChild(IfExample());
 ```
 
 ### `Switch`
+[JSFiddle](https://jsfiddle.net/do_the_simplest/vw8hrz1t/14/)
 
 ```typescript
 import { button, div, Switch, useState } from "tagu-tagu";
@@ -132,6 +312,7 @@ document.body.appendChild(SwitchExample());
 ```
 
 ### `For`
+[JSFiddle](https://jsfiddle.net/do_the_simplest/soLa9v6t/12/)
 
 ```typescript
 import { button, div, For, useState } from "tagu-tagu";
@@ -166,6 +347,7 @@ document.body.appendChild(ForExample());
 
 ### Data binding
 You can use data of ancestors.
+[JSFiddle](https://jsfiddle.net/do_the_simplest/9u6oz2bc/6/)
 
 ```typescript
 import { button, div, useBinding, useState } from "tagu-tagu";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tagu-tagu",
-	"version": "3.2.3",
+	"version": "3.2.5",
 	"description": "A lightweight helper for vanilla `HTMLElement`, with reactivity.",
 	"keywords": [
 		"front-end",