From 5933b438c7a3ae0b5bf9d550c1544ad8ca4d257d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Wed, 4 Jun 2025 19:35:37 +0900
Subject: [PATCH 01/13] Ref(render): Remove unused RenderElement import in
 render.ts

---
 src/render.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/render.ts b/src/render.ts
index ebad867..490cdbf 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -10,7 +10,6 @@
  * 
  */
 
-import { RenderElement } from "./element.js";
 import { ElementOptions } from "./types/element-options.js";
 import { RenderArguments } from "./types/render-arguments.js";
 import { Version } from "version";

From cb7c93370ad2d5eff7f3b9a914feba1bf7f8f039 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Wed, 4 Jun 2025 19:39:51 +0900
Subject: [PATCH 02/13] Refactor(elements): Simplify create method in multiple
 element classes by removing unnecessary variable assignments

---
 src/elements/a.ts       | 3 +--
 src/elements/button.ts  | 3 +--
 src/elements/div.ts     | 3 +--
 src/elements/h1.ts      | 3 +--
 src/elements/h2.ts      | 3 +--
 src/elements/h3.ts      | 3 +--
 src/elements/h4.ts      | 3 +--
 src/elements/h5.ts      | 3 +--
 src/elements/h6.ts      | 3 +--
 src/elements/image.ts   | 3 +--
 src/elements/li.ts      | 3 +--
 src/elements/nav.ts     | 3 +--
 src/elements/p.ts       | 3 +--
 src/elements/section.ts | 3 +--
 src/elements/span.ts    | 3 +--
 src/elements/ul.ts      | 3 +--
 16 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/src/elements/a.ts b/src/elements/a.ts
index e1371d1..65688d0 100644
--- a/src/elements/a.ts
+++ b/src/elements/a.ts
@@ -19,7 +19,6 @@ export class A extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("a");
-        return element;
+        return this._create("a");
     }
 }
\ No newline at end of file
diff --git a/src/elements/button.ts b/src/elements/button.ts
index f9cc54e..106bce4 100644
--- a/src/elements/button.ts
+++ b/src/elements/button.ts
@@ -19,7 +19,6 @@ export class Button extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("button");
-        return element;
+        return this._create("button");
     }
 }
\ No newline at end of file
diff --git a/src/elements/div.ts b/src/elements/div.ts
index b8de516..589b3d5 100644
--- a/src/elements/div.ts
+++ b/src/elements/div.ts
@@ -19,7 +19,6 @@ export class Div extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("div");
-        return element;
+        return this._create("div");
     }
 }
diff --git a/src/elements/h1.ts b/src/elements/h1.ts
index 19ab5dd..3421124 100644
--- a/src/elements/h1.ts
+++ b/src/elements/h1.ts
@@ -19,7 +19,6 @@ export class H1 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h1");
-        return element;
+        return this._create("h1");
     }
 }
\ No newline at end of file
diff --git a/src/elements/h2.ts b/src/elements/h2.ts
index 3af4fca..4729810 100644
--- a/src/elements/h2.ts
+++ b/src/elements/h2.ts
@@ -19,7 +19,6 @@ export class H2 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h2");
-        return element;
+        return this._create("h2");
     }
 }
\ No newline at end of file
diff --git a/src/elements/h3.ts b/src/elements/h3.ts
index 5740bfa..40ede7f 100644
--- a/src/elements/h3.ts
+++ b/src/elements/h3.ts
@@ -19,7 +19,6 @@ export class H3 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h3");
-        return element;
+        return this._create("h3");
     }
 }
\ No newline at end of file
diff --git a/src/elements/h4.ts b/src/elements/h4.ts
index 5f4336f..1fbb43d 100644
--- a/src/elements/h4.ts
+++ b/src/elements/h4.ts
@@ -19,7 +19,6 @@ export class H4 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h4");
-        return element;
+        return this._create("h4");
     }
 }
\ No newline at end of file
diff --git a/src/elements/h5.ts b/src/elements/h5.ts
index 0f89942..17c564f 100644
--- a/src/elements/h5.ts
+++ b/src/elements/h5.ts
@@ -19,7 +19,6 @@ export class H5 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h5");
-        return element;
+        return this._create("h5");
     }
 }
\ No newline at end of file
diff --git a/src/elements/h6.ts b/src/elements/h6.ts
index 494adc9..7e97122 100644
--- a/src/elements/h6.ts
+++ b/src/elements/h6.ts
@@ -19,7 +19,6 @@ export class H6 extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("h6");
-        return element;
+        return this._create("h6");
     }
 }
\ No newline at end of file
diff --git a/src/elements/image.ts b/src/elements/image.ts
index e93ad9b..d5a2fe1 100644
--- a/src/elements/image.ts
+++ b/src/elements/image.ts
@@ -19,7 +19,6 @@ export class Image extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("img");
-        return element;
+        return this._create("img");
     }
 }
\ No newline at end of file
diff --git a/src/elements/li.ts b/src/elements/li.ts
index b27c088..23a6ad0 100644
--- a/src/elements/li.ts
+++ b/src/elements/li.ts
@@ -19,7 +19,6 @@ export class Li extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("li");
-        return element;
+        return this._create("li");
     }
 }
diff --git a/src/elements/nav.ts b/src/elements/nav.ts
index 6b4c06d..77c3f53 100644
--- a/src/elements/nav.ts
+++ b/src/elements/nav.ts
@@ -19,7 +19,6 @@ export class Nav extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("nav");
-        return element;
+        return this._create("nav");
     }
 }
\ No newline at end of file
diff --git a/src/elements/p.ts b/src/elements/p.ts
index 0f65c13..d54a152 100644
--- a/src/elements/p.ts
+++ b/src/elements/p.ts
@@ -19,7 +19,6 @@ export class P extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("p");
-        return element;
+        return this._create("p");
     }
 }
diff --git a/src/elements/section.ts b/src/elements/section.ts
index 7332d7e..a3c0139 100644
--- a/src/elements/section.ts
+++ b/src/elements/section.ts
@@ -19,7 +19,6 @@ export class Section extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("section");
-        return element;
+        return this._create("section");
     }
 }
diff --git a/src/elements/span.ts b/src/elements/span.ts
index 49b67eb..f07b256 100644
--- a/src/elements/span.ts
+++ b/src/elements/span.ts
@@ -19,7 +19,6 @@ export class Span extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("span");
-        return element;
+        return this._create("span");
     }
 }
\ No newline at end of file
diff --git a/src/elements/ul.ts b/src/elements/ul.ts
index d50ef00..d5ebf3e 100644
--- a/src/elements/ul.ts
+++ b/src/elements/ul.ts
@@ -19,7 +19,6 @@ export class Ul extends RenderElement {
     }
 
     create(): HTMLElement {
-        const element: HTMLElement = this._create("ul");
-        return element;
+        return this._create("ul");
     }
 }
\ No newline at end of file

From ee29ebb2dbd07f3affea6c95c6cbec02be5b14dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:24:33 +0900
Subject: [PATCH 03/13] Feat: Add feature that RenderApp and RenderComponent
 classes with associated models and methods

---
 src/app/app.model.ts             | 20 +++++++++
 src/app/app.ts                   | 45 ++++++++++++++++++++
 src/component/component.model.ts | 19 +++++++++
 src/component/component.ts       | 44 +++++++++++++++++++
 src/elements/a.ts                |  2 +-
 src/elements/button.ts           |  2 +-
 src/elements/div.ts              |  2 +-
 src/{ => elements}/element.ts    | 22 +++++++++-
 src/elements/elements.ts         | 38 +++++++++--------
 src/elements/h1.ts               |  2 +-
 src/elements/h2.ts               |  2 +-
 src/elements/h3.ts               |  2 +-
 src/elements/h4.ts               |  2 +-
 src/elements/h5.ts               |  2 +-
 src/elements/h6.ts               |  2 +-
 src/elements/image.ts            |  2 +-
 src/elements/li.ts               |  2 +-
 src/elements/nav.ts              |  2 +-
 src/elements/p.ts                |  2 +-
 src/elements/section.ts          |  2 +-
 src/elements/span.ts             |  2 +-
 src/elements/ul.ts               |  2 +-
 src/render.ts                    | 73 ++++++++++++++++----------------
 src/types/runapp-arguments.ts    | 18 ++++++++
 24 files changed, 239 insertions(+), 72 deletions(-)
 create mode 100644 src/app/app.model.ts
 create mode 100644 src/app/app.ts
 create mode 100644 src/component/component.model.ts
 create mode 100644 src/component/component.ts
 rename src/{ => elements}/element.ts (75%)
 create mode 100644 src/types/runapp-arguments.ts

diff --git a/src/app/app.model.ts b/src/app/app.model.ts
new file mode 100644
index 0000000..e609075
--- /dev/null
+++ b/src/app/app.model.ts
@@ -0,0 +1,20 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+import { RenderComponent } from "../component/component.js";
+import { Render } from "../render.js";
+
+export interface RenderAppModel {
+    id: string;
+    render: Render;
+    build({ children }: { children: Array<HTMLElement | RenderComponent> }): Array<HTMLElement>;
+}
\ No newline at end of file
diff --git a/src/app/app.ts b/src/app/app.ts
new file mode 100644
index 0000000..3bedff3
--- /dev/null
+++ b/src/app/app.ts
@@ -0,0 +1,45 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+import { RenderComponent } from "../component/component.js";
+import { Render, RenderElement, RenderElements } from "../render.js";
+import { RenderAppModel } from "./app.model.js";
+
+export abstract class RenderApp implements RenderAppModel {
+    constructor(id: string) {
+        this.id = id;
+        this.render = new Render();
+    }
+
+    id: string;
+    render: Render;
+
+    build({ children }: { children: Array<HTMLElement | RenderComponent> }): Array<HTMLElement> {
+        let builtChildren: Array<HTMLElement> = [];
+        
+        children.forEach((child) => {
+            if (child instanceof RenderComponent) {
+                builtChildren.push(...child.build({ children: [] }));
+                return;
+            }
+
+            builtChildren.push(child);
+        });
+
+        return [
+            new RenderElement({
+                id: this.id,
+                children: builtChildren,
+            })._createCustomElement("render-app"),
+        ]
+    };
+}
\ No newline at end of file
diff --git a/src/component/component.model.ts b/src/component/component.model.ts
new file mode 100644
index 0000000..445a7a9
--- /dev/null
+++ b/src/component/component.model.ts
@@ -0,0 +1,19 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+import { Render } from "../render.js";
+
+export interface RenderComponentModel {
+    id: string;
+    render: Render;
+    build({ children }: { children: Array<HTMLElement> }): Array<HTMLElement>;
+}
\ No newline at end of file
diff --git a/src/component/component.ts b/src/component/component.ts
new file mode 100644
index 0000000..29d74ac
--- /dev/null
+++ b/src/component/component.ts
@@ -0,0 +1,44 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+import { Render, RenderElement, RenderElements } from "../render.js";
+import { RenderComponentModel } from "./component.model.js";
+
+export abstract class RenderComponent implements RenderComponentModel {
+    constructor(id: string) {
+        this.id = id;
+        this.render = new Render();
+    }
+
+    id: string;
+    render: Render;
+
+    build({ children }: { children: Array<HTMLElement> }): Array<HTMLElement> {
+        let builtChildren: Array<HTMLElement> = [];
+        
+        children.forEach((child) => {
+            if (child instanceof RenderComponent) {
+                builtChildren.push(...child.build({ children: [] }));
+                return;
+            }
+
+            builtChildren.push(child);
+        });
+
+        return [
+            new RenderElement({
+                id: this.id,
+                children: builtChildren,
+            })._createCustomElement("render-component"),
+        ]
+    };
+}
\ No newline at end of file
diff --git a/src/elements/a.ts b/src/elements/a.ts
index 65688d0..9ffb033 100644
--- a/src/elements/a.ts
+++ b/src/elements/a.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class A extends RenderElement {
diff --git a/src/elements/button.ts b/src/elements/button.ts
index 106bce4..b5deaca 100644
--- a/src/elements/button.ts
+++ b/src/elements/button.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Button extends RenderElement {
diff --git a/src/elements/div.ts b/src/elements/div.ts
index 589b3d5..910058a 100644
--- a/src/elements/div.ts
+++ b/src/elements/div.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Div extends RenderElement {
diff --git a/src/element.ts b/src/elements/element.ts
similarity index 75%
rename from src/element.ts
rename to src/elements/element.ts
index 547660f..3ff9a73 100644
--- a/src/element.ts
+++ b/src/elements/element.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { ElementOptions } from "./types/element-options.js";
+import { ElementOptions } from "../types/element-options.js";
 
 export class RenderElement {
     options: ElementOptions;
@@ -71,4 +71,24 @@ export class RenderElement {
 
         return this.element;
     }
+
+    _createCustomElement(tagName: string): HTMLElement {
+        this.element = document.createElement(tagName);
+
+        if (typeof this.options.id === "string") {
+            this.element.id = this.options.id;
+        }
+
+        if (typeof this.options.className === "string") {
+            this.element.className = `render-element ${this.options.className}`;
+        } else {
+            this.element.className = "render-element";
+        }
+
+        if (Array.isArray(this.options.children) && this.options.children.every(child => child instanceof HTMLElement)) {
+            this.element.append(...this.options.children);
+        }
+
+        return this.element;
+    }
 }
diff --git a/src/elements/elements.ts b/src/elements/elements.ts
index 440562c..2648bf8 100644
--- a/src/elements/elements.ts
+++ b/src/elements/elements.ts
@@ -27,21 +27,23 @@ import { Section } from "./section.js";
 import { Span } from "./span.js";
 import { Ul } from "./ul.js";
 
-export {
-    A,
-    Button,
-    Div,
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    H6,
-    Image,
-    Li,
-    Nav,
-    P,
-    Section,
-    Span,
-    Ul,
-};
+abstract class RenderElements {
+    static A = A;
+    static Button = Button;
+    static Div = Div;
+    static H1 = H1;
+    static H2 = H2;
+    static H3 = H3;
+    static H4 = H4;
+    static H5 = H5;
+    static H6 = H6;
+    static Image = Image;
+    static Li = Li;
+    static Nav = Nav;
+    static P = P
+    static Section = Section;
+    static Span = Span;
+    static Ul = Ul;
+}
+
+export { RenderElements };
diff --git a/src/elements/h1.ts b/src/elements/h1.ts
index 3421124..e7fe97b 100644
--- a/src/elements/h1.ts
+++ b/src/elements/h1.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H1 extends RenderElement {
diff --git a/src/elements/h2.ts b/src/elements/h2.ts
index 4729810..d39b122 100644
--- a/src/elements/h2.ts
+++ b/src/elements/h2.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H2 extends RenderElement {
diff --git a/src/elements/h3.ts b/src/elements/h3.ts
index 40ede7f..5401105 100644
--- a/src/elements/h3.ts
+++ b/src/elements/h3.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H3 extends RenderElement {
diff --git a/src/elements/h4.ts b/src/elements/h4.ts
index 1fbb43d..c9dc0ed 100644
--- a/src/elements/h4.ts
+++ b/src/elements/h4.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H4 extends RenderElement {
diff --git a/src/elements/h5.ts b/src/elements/h5.ts
index 17c564f..b4ce207 100644
--- a/src/elements/h5.ts
+++ b/src/elements/h5.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H5 extends RenderElement {
diff --git a/src/elements/h6.ts b/src/elements/h6.ts
index 7e97122..ce3417a 100644
--- a/src/elements/h6.ts
+++ b/src/elements/h6.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class H6 extends RenderElement {
diff --git a/src/elements/image.ts b/src/elements/image.ts
index d5a2fe1..cf620fa 100644
--- a/src/elements/image.ts
+++ b/src/elements/image.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Image extends RenderElement {
diff --git a/src/elements/li.ts b/src/elements/li.ts
index 23a6ad0..bf3071e 100644
--- a/src/elements/li.ts
+++ b/src/elements/li.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Li extends RenderElement {
diff --git a/src/elements/nav.ts b/src/elements/nav.ts
index 77c3f53..6aca71b 100644
--- a/src/elements/nav.ts
+++ b/src/elements/nav.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Nav extends RenderElement {
diff --git a/src/elements/p.ts b/src/elements/p.ts
index d54a152..29d573b 100644
--- a/src/elements/p.ts
+++ b/src/elements/p.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class P extends RenderElement {
diff --git a/src/elements/section.ts b/src/elements/section.ts
index a3c0139..b33023d 100644
--- a/src/elements/section.ts
+++ b/src/elements/section.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Section extends RenderElement {
diff --git a/src/elements/span.ts b/src/elements/span.ts
index f07b256..e5347ef 100644
--- a/src/elements/span.ts
+++ b/src/elements/span.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Span extends RenderElement {
diff --git a/src/elements/ul.ts b/src/elements/ul.ts
index d5ebf3e..21bb61a 100644
--- a/src/elements/ul.ts
+++ b/src/elements/ul.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { RenderElement } from "../element.js";
+import { RenderElement } from "./element.js";
 import { ElementOptions } from "../types/element-options.js";
 
 export class Ul extends RenderElement {
diff --git a/src/render.ts b/src/render.ts
index 490cdbf..1ccaa68 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -12,100 +12,99 @@
 
 import { ElementOptions } from "./types/element-options.js";
 import { RenderArguments } from "./types/render-arguments.js";
+import { RunappArguments } from "./types/runapp-arguments.js";
 import { Version } from "version";
 
-import {
-    A,
-    Button,
-    Div,
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    H6,
-    Image,
-    Li,
-    Nav,
-    P,
-    Section,
-    Span,
-    Ul,
-} from "./elements/elements.js";
-
-export class Render {
-    version: Version;
+import { RenderApp } from "./app/app.js";
+import { RenderComponent } from "./component/component.js";
+import { RenderElement } from "./elements/element.js";
+import { RenderElements } from "./elements/elements.js";
 
+class Render {
     constructor() {
         this.version = new Version(1, 0, 0, Version.levels.dev);
     }
 
+    version: Version;
+
     build({ target, children }: RenderArguments): void {
         target.innerHTML = "";
         target.append(...children);
     }
 
+    runApp({ root, app }: RunappArguments): void {
+        root.innerHTML = "";
+        const children = app.build({ children: [] });
+        root.append(...children);
+    }
+
+    // ---
+    // Elements
+    // ---
+
     $a(options: ElementOptions): HTMLElement {
-        return new A(options).create();
+        return new RenderElements.A(options).create();
     }
 
     $button(options: ElementOptions): HTMLElement {
-        return new Button(options).create();
+        return new RenderElements.Button(options).create();
     }
 
     $div(options: ElementOptions): HTMLElement {
-        return new Div(options).create();
+        return new RenderElements.Div(options).create();
     }
 
     $h1(options: ElementOptions): HTMLElement {
-        return new H1(options).create();
+        return new RenderElements.H1(options).create();
     }
 
     $h2(options: ElementOptions): HTMLElement {
-        return new H2(options).create();
+        return new RenderElements.H2(options).create();
     }
 
     $h3(options: ElementOptions): HTMLElement {
-        return new H3(options).create();
+        return new RenderElements.H3(options).create();
     }
 
     $h4(options: ElementOptions): HTMLElement {
-        return new H4(options).create();
+        return new RenderElements.H4(options).create();
     }
 
     $h5(options: ElementOptions): HTMLElement {
-        return new H5(options).create();
+        return new RenderElements.H5(options).create();
     }
 
     $h6(options: ElementOptions): HTMLElement {
-        return new H6(options).create();
+        return new RenderElements.H6(options).create();
     }
 
     $img(options: ElementOptions): HTMLElement {
-        return new Image(options).create();
+        return new RenderElements.Image(options).create();
     }
 
     $li(options: ElementOptions): HTMLElement {
-        return new Li(options).create();
+        return new RenderElements.Li(options).create();
     }
 
     $nav(options: ElementOptions): HTMLElement {
-        return new Nav(options).create();
+        return new RenderElements.Nav(options).create();
     }
 
     $p(options: ElementOptions): HTMLElement {
-        return new P(options).create();
+        return new RenderElements.P(options).create();
     }
 
     $section(options: ElementOptions): HTMLElement {
-        return new Section(options).create();
+        return new RenderElements.Section(options).create();
     }
 
     $span(options: ElementOptions): HTMLElement {
-        return new Span(options).create();
+        return new RenderElements.Span(options).create();
     }
 
     $ul(options: ElementOptions): HTMLElement {
-        return new Ul(options).create();
+        return new RenderElements.Ul(options).create();
     }
 }
+
+export { Render, RenderApp, RenderComponent, RenderElement, RenderElements }
diff --git a/src/types/runapp-arguments.ts b/src/types/runapp-arguments.ts
new file mode 100644
index 0000000..d8f7d39
--- /dev/null
+++ b/src/types/runapp-arguments.ts
@@ -0,0 +1,18 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+import { RenderApp } from "../render.js";
+
+export interface RunappArguments {
+    root: HTMLElement;
+    app: RenderApp;
+}

From de0b38635d2158344fd92340112c6e5b96915c5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:25:05 +0900
Subject: [PATCH 04/13] Feat(example): Add app.js

---
 examples/app.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 examples/app.js

diff --git a/examples/app.js b/examples/app.js
new file mode 100644
index 0000000..81f4e11
--- /dev/null
+++ b/examples/app.js
@@ -0,0 +1,58 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+// import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render, RenderApp, RenderComponent } from '../dist/render.js';
+
+class GreetingElement extends RenderComponent {
+    constructor() {
+        super();
+        this.title = "render.js";
+        this.message = "Hello World";
+    }
+
+    build() {
+        const { $h1, $p } = this.render;
+
+        return super.build({
+            children: [
+                $h1({
+                    id: "title",
+                    textContent: this.title,
+                }),
+                $p({
+                    id: "message",
+                    textContent: this.message,
+                }),
+            ]
+        });
+    }
+}
+
+class MyApp extends RenderApp {
+    constructor() { super(); }
+
+    build() {
+        return super.build({
+            children: [
+                new GreetingElement(),
+                new GreetingElement(),
+                new GreetingElement(),
+            ]
+        });
+    }
+}
+
+new Render().runApp({
+    root: document.body,
+    app: new MyApp(),
+});

From 5ba0feb87296d02adfb213f67bf0440c071472b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:28:04 +0900
Subject: [PATCH 05/13] Style(Render): Sort import statements

---
 src/render.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/render.ts b/src/render.ts
index 1ccaa68..da6c53d 100644
--- a/src/render.ts
+++ b/src/render.ts
@@ -10,10 +10,11 @@
  * 
  */
 
-import { ElementOptions } from "./types/element-options.js";
+import { Version } from "version";
+
 import { RenderArguments } from "./types/render-arguments.js";
 import { RunappArguments } from "./types/runapp-arguments.js";
-import { Version } from "version";
+import { ElementOptions } from "./types/element-options.js";
 
 import { RenderApp } from "./app/app.js";
 import { RenderComponent } from "./component/component.js";

From 3ca5c3adb9b8b18e71fbf7c8d1c810a06e7b5aa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:28:43 +0900
Subject: [PATCH 06/13] Ref(App/Component): Remove unused import

---
 src/app/app.ts             | 4 ++--
 src/component/component.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/app.ts b/src/app/app.ts
index 3bedff3..db1aed6 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -11,7 +11,7 @@
  */
 
 import { RenderComponent } from "../component/component.js";
-import { Render, RenderElement, RenderElements } from "../render.js";
+import { Render, RenderElement } from "../render.js";
 import { RenderAppModel } from "./app.model.js";
 
 export abstract class RenderApp implements RenderAppModel {
@@ -25,7 +25,7 @@ export abstract class RenderApp implements RenderAppModel {
 
     build({ children }: { children: Array<HTMLElement | RenderComponent> }): Array<HTMLElement> {
         let builtChildren: Array<HTMLElement> = [];
-        
+
         children.forEach((child) => {
             if (child instanceof RenderComponent) {
                 builtChildren.push(...child.build({ children: [] }));
diff --git a/src/component/component.ts b/src/component/component.ts
index 29d74ac..59ff093 100644
--- a/src/component/component.ts
+++ b/src/component/component.ts
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render, RenderElement, RenderElements } from "../render.js";
+import { Render, RenderElement } from "../render.js";
 import { RenderComponentModel } from "./component.model.js";
 
 export abstract class RenderComponent implements RenderComponentModel {
@@ -24,7 +24,7 @@ export abstract class RenderComponent implements RenderComponentModel {
 
     build({ children }: { children: Array<HTMLElement> }): Array<HTMLElement> {
         let builtChildren: Array<HTMLElement> = [];
-        
+
         children.forEach((child) => {
             if (child instanceof RenderComponent) {
                 builtChildren.push(...child.build({ children: [] }));

From 5a1bef0ded57bab0aefe0bf888bd5bdccfdbef91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:34:57 +0900
Subject: [PATCH 07/13] Fix(examples): app.js: Update import statement for
 Render into CDN

---
 examples/app.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/app.js b/examples/app.js
index 81f4e11..24b26d0 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -10,8 +10,7 @@
  * 
  */
 
-// import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
-import { Render, RenderApp, RenderComponent } from '../dist/render.js';
+import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
 
 class GreetingElement extends RenderComponent {
     constructor() {

From da30b7475c33f6394934bd511305b95d463de2cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 11:46:59 +0900
Subject: [PATCH 08/13] Feat: Update render.js CDN path

---
 README.md                      | 4 ++--
 README_JP.md                   | 4 ++--
 docs/scripts/main.js           | 2 +-
 docs/scripts/pages/examples.js | 2 +-
 examples/app.js                | 2 +-
 examples/counter.js            | 2 +-
 examples/hello-world.js        | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 3728464..01961b2 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,10 @@
 
 ### 1. Import from CDN
 
-URL: https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js
+URL: https://cdn.yoneyo.com/scripts/render@1.0.0/render.js
 
 ```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 ```
 
 ### 2. Use
diff --git a/README_JP.md b/README_JP.md
index 6089408..c5eed74 100644
--- a/README_JP.md
+++ b/README_JP.md
@@ -10,10 +10,10 @@
 
 ### 1. CDNからインポートする
 
-URL: https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js
+URL: https://cdn.yoneyo.com/scripts/render@1.0.0/render.js
 
 ```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 ```
 
 ### 2. 使う
diff --git a/docs/scripts/main.js b/docs/scripts/main.js
index cc71dc4..674dcdd 100644
--- a/docs/scripts/main.js
+++ b/docs/scripts/main.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 
 const render = new Render();
diff --git a/docs/scripts/pages/examples.js b/docs/scripts/pages/examples.js
index 674e148..bab25ee 100644
--- a/docs/scripts/pages/examples.js
+++ b/docs/scripts/pages/examples.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 const render = new Render();
 
diff --git a/examples/app.js b/examples/app.js
index 24b26d0..9cf01fa 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 class GreetingElement extends RenderComponent {
     constructor() {
diff --git a/examples/counter.js b/examples/counter.js
index a7ca325..5795e4b 100644
--- a/examples/counter.js
+++ b/examples/counter.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 const render = new Render();
 const root = document.getElementById("root");
diff --git a/examples/hello-world.js b/examples/hello-world.js
index ca976ba..fd47d51 100644
--- a/examples/hello-world.js
+++ b/examples/hello-world.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 
 const render = new Render();

From a2fc114d8db636f4dd518c3b31110f8b09a83a2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 12:18:42 +0900
Subject: [PATCH 09/13] Fix(examples): app.js: Add missing import

---
 examples/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/app.js b/examples/app.js
index 9cf01fa..c51b71b 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -10,7 +10,7 @@
  * 
  */
 
-import { Render, RenderApp } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
+import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 class GreetingElement extends RenderComponent {
     constructor() {

From bf186ffc06e121e995fe46a9a1d4e951f30afedf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Thu, 5 Jun 2025 12:33:17 +0900
Subject: [PATCH 10/13] Docs(README): Add DeepWiki badge

---
 README.md    | 2 ++
 README_JP.md | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 01961b2..0bff0a1 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # render.js
 
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/yone1130/render.js)
+
 [> 日本語で読む](./README_JP.md)
 
 ## Overview
diff --git a/README_JP.md b/README_JP.md
index c5eed74..90da7e9 100644
--- a/README_JP.md
+++ b/README_JP.md
@@ -1,5 +1,7 @@
 # render.js
 
+[![DeepWiki に質問する](https://deepwiki.com/badge.svg)](https://deepwiki.com/yone1130/render.js)
+
 [> Read in English](./README.md)
 
 ## Overview

From ae7711bbcf93ad6091fcb8f6a231509911fd0345 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Fri, 6 Jun 2025 23:19:15 +0900
Subject: [PATCH 11/13] Doc(README): Update example codes in README

---
 README.md    | 64 ++++++++++++++++++++++++++++++++++++++++++++++------
 README_JP.md | 56 ++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 110 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 0bff0a1..b02df92 100644
--- a/README.md
+++ b/README.md
@@ -20,14 +20,61 @@ import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 ### 2. Use
 
-A sample code:
+Example code (with App Creator):
+```js
+class GreetingElement extends RenderComponent {
+    constructor() {
+        super();
+        this.title = "render.js";
+        this.message = "Hello World";
+    }
+
+    build() {
+        const { $h1, $p } = this.render;
+
+        return super.build({
+            children: [
+                $h1({
+                    id: "title",
+                    textContent: this.title,
+                }),
+                $p({
+                    id: "message",
+                    textContent: this.message,
+                }),
+            ]
+        });
+    }
+}
+
+class MyApp extends RenderApp {
+    constructor() { super(); }
+
+    build() {
+        return super.build({
+            children: [
+                new GreetingElement(),
+            ]
+        });
+    }
+}
+
+const render = new Render();
+
+render.runApp({
+    root: document.body,
+    app: new MyApp(),
+});
+```
+
+or just rendering (with Builder):
 ```js
 const render = new Render();
 const root = document.getElementById("root");
 
-const app = () => {
-    let title = "render.js";
-    let message = "Hello World";
+function app() {
+    const title = "render.js";
+    const message = "Hello World";
 
     return [
         render.$div({
@@ -52,13 +99,16 @@ render.build({
 });
 ```
 
-### More Resources
+### Example codes
+
+- **Example codes: [examples/](./examples/).**
+
+### Resources
 
 - **Documents: https://render-js.yoneyo.com/ .**
 - **Demos: https://render-js.yoneyo.com/examples/ .**
-- **Example codes: [examples/](./examples/).**
 
-## Build
+## Development
 
 ### 1. Install Packages
 
diff --git a/README_JP.md b/README_JP.md
index 90da7e9..63d462f 100644
--- a/README_JP.md
+++ b/README_JP.md
@@ -20,7 +20,54 @@ import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
 ### 2. 使う
 
-サンプルコード:
+コード例 (App Creator):
+```js
+class GreetingElement extends RenderComponent {
+    constructor() {
+        super();
+        this.title = "render.js";
+        this.message = "Hello World";
+    }
+
+    build() {
+        const { $h1, $p } = this.render;
+
+        return super.build({
+            children: [
+                $h1({
+                    id: "title",
+                    textContent: this.title,
+                }),
+                $p({
+                    id: "message",
+                    textContent: this.message,
+                }),
+            ]
+        });
+    }
+}
+
+class MyApp extends RenderApp {
+    constructor() { super(); }
+
+    build() {
+        return super.build({
+            children: [
+                new GreetingElement(),
+            ]
+        });
+    }
+}
+
+const render = new Render();
+
+render.runApp({
+    root: document.body,
+    app: new MyApp(),
+});
+```
+
+またはレンダリングのみ (Builder):
 ```js
 const render = new Render();
 const root = document.getElementById("root");
@@ -52,13 +99,16 @@ render.build({
 });
 ```
 
+### サンプルコード
+
+- **サンプルコード: [examples/](./examples/).**
+
 ### リソース
 
 - **ドキュメント: https://render-js.yoneyo.com/ .**
 - **ウェブデモ: https://render-js.yoneyo.com/examples/ .**
-- **サンプルコード: [examples/](./examples/).**
 
-## ビルド
+## 開発
 
 ### 1. パッケージをインストールする
 

From 840ecf2ce929639385d02f279d6a511bf067bb16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Fri, 6 Jun 2025 23:24:09 +0900
Subject: [PATCH 12/13] Doc(README): Update example codes in README

---
 README.md    | 18 ++++++------------
 README_JP.md | 24 +++++++++---------------
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index b02df92..8d5d377 100644
--- a/README.md
+++ b/README.md
@@ -10,19 +10,11 @@
 
 ## Usage
 
-### 1. Import from CDN
-
-URL: https://cdn.yoneyo.com/scripts/render@1.0.0/render.js
-
-```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
-```
-
-### 2. Use
-
 Example code (with App Creator):
 ```js
-class GreetingElement extends RenderComponent {
+import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
+
+class Greeting extends RenderComponent {
     constructor() {
         super();
         this.title = "render.js";
@@ -53,7 +45,7 @@ class MyApp extends RenderApp {
     build() {
         return super.build({
             children: [
-                new GreetingElement(),
+                new Greeting(),
             ]
         });
     }
@@ -69,6 +61,8 @@ render.runApp({
 
 or just rendering (with Builder):
 ```js
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
+
 const render = new Render();
 const root = document.getElementById("root");
 
diff --git a/README_JP.md b/README_JP.md
index 63d462f..25aee01 100644
--- a/README_JP.md
+++ b/README_JP.md
@@ -10,19 +10,11 @@
 
 ## 利用方法
 
-### 1. CDNからインポートする
-
-URL: https://cdn.yoneyo.com/scripts/render@1.0.0/render.js
-
-```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
-```
-
-### 2. 使う
-
 コード例 (App Creator):
 ```js
-class GreetingElement extends RenderComponent {
+import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
+
+class Greeting extends RenderComponent {
     constructor() {
         super();
         this.title = "render.js";
@@ -53,7 +45,7 @@ class MyApp extends RenderApp {
     build() {
         return super.build({
             children: [
-                new GreetingElement(),
+                new Greeting(),
             ]
         });
     }
@@ -69,12 +61,14 @@ render.runApp({
 
 またはレンダリングのみ (Builder):
 ```js
+import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
+
 const render = new Render();
 const root = document.getElementById("root");
 
-const app = () => {
-    let title = "render.js";
-    let message = "Hello World";
+function app() {
+    const title = "render.js";
+    const message = "Hello World";
 
     return [
         render.$div({

From a519cf24df98fd358a1d363d5c4aaadc93e3a95f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=88=E3=81=AD/Yone?= <git@yoneyo.com>
Date: Fri, 6 Jun 2025 23:24:35 +0900
Subject: [PATCH 13/13] Ref(examples): Update app.js

---
 examples/app.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/app.js b/examples/app.js
index c51b71b..c4b98be 100644
--- a/examples/app.js
+++ b/examples/app.js
@@ -12,7 +12,7 @@
 
 import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
-class GreetingElement extends RenderComponent {
+class Greeting extends RenderComponent {
     constructor() {
         super();
         this.title = "render.js";
@@ -43,15 +43,15 @@ class MyApp extends RenderApp {
     build() {
         return super.build({
             children: [
-                new GreetingElement(),
-                new GreetingElement(),
-                new GreetingElement(),
+                new Greeting(),
             ]
         });
     }
 }
 
-new Render().runApp({
+const render = new Render();
+
+render.runApp({
     root: document.body,
     app: new MyApp(),
 });