Feature: App Creator による設計手段の実装

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
@@ -8,24 +10,65 @@
 
 ## Usage
 
-### 1. Import from CDN
+Example code (with App Creator):
+```js
+import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
-URL: https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js
+class Greeting extends RenderComponent {
+    constructor() {
+        super();
+        this.title = "render.js";
+        this.message = "Hello World";
+    }
 
-```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
-```
+    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(); }
 
-### 2. Use
+    build() {
+        return super.build({
+            children: [
+                new Greeting(),
+            ]
+        });
+    }
+}
+
+const render = new Render();
+
+render.runApp({
+    root: document.body,
+    app: new MyApp(),
+});
+```
 
-A sample code:
+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");
 
-const app = () => {
-    let title = "render.js";
-    let message = "Hello World";
+function app() {
+    const title = "render.js";
+    const message = "Hello World";
 
     return [
         render.$div({
@@ -50,13 +93,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
 

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
@@ -8,24 +10,65 @@
 
 ## 利用方法
 
-### 1. CDNからインポートする
+コード例 (App Creator):
+```js
+import { Render, RenderApp, RenderComponent } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
 
-URL: https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js
+class Greeting extends RenderComponent {
+    constructor() {
+        super();
+        this.title = "render.js";
+        this.message = "Hello World";
+    }
 
-```js
-import { Render } from 'https://cdn.yoneyo.com/scripts/render/render-v1.0.0.js';
-```
+    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(); }
 
-### 2. 使う
+    build() {
+        return super.build({
+            children: [
+                new Greeting(),
+            ]
+        });
+    }
+}
+
+const render = new Render();
+
+render.runApp({
+    root: document.body,
+    app: new MyApp(),
+});
+```
 
-サンプルコード:
+またはレンダリングのみ (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({
@@ -50,13 +93,16 @@ render.build({
 });
 ```
 
+### サンプルコード
+
+- **サンプルコード: [examples/](./examples/).**
+
 ### リソース
 
 - **ドキュメント: https://render-js.yoneyo.com/ .**
 - **ウェブデモ: https://render-js.yoneyo.com/examples/ .**
-- **サンプルコード: [examples/](./examples/).**
 
-## ビルド
+## 開発
 
 ### 1. パッケージをインストールする
 

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();

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();
 

examples/app.js

@@ -0,0 +1,57 @@
+/**!
+ * 
+ * render.js
+ * 
+ * Copyright (C) 2025 よね/Yone
+ * 
+ * Licensed under the MIT License.
+ * 
+ * https://github.com/yone1130/render.js
+ * 
+ */
+
+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";
+        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 Greeting(),
+            ]
+        });
+    }
+}
+
+const render = new Render();
+
+render.runApp({
+    root: document.body,
+    app: new MyApp(),
+});

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");

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();

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>;
+}

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 } 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"),
+        ]
+    };
+}

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>;
+}