Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 13 commits into from

Conversation

@yone1130
Copy link
Owner

@yone1130 yone1130 commented Jun 6, 2025 •
edited
Loading

Changes

Add

  • App や Component を継承する設計手段を実装
    このレンダリング方法を App Creator と呼ぶことにします。
    目的: 将来的に状態管理の仕組みなどを実装しやすくするため。

    • Render クラスにrunApp メソッドを追加
    • 関連する interface などの追加
    • /examples/app.js: App Creator のサンプルコードを追加
    • /README.md の全言語に App Creator のサンプルコードを追加

  • /README.md の全言語に DeepWiki.com のバッジを追加

Modify

  • render.js の CDN URL を変更
  • その他リファクタリング

App Creator のコード例

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

生成されるHTML

<body>
  <render-app>
    <render-component>
      <h1 id="title">render.js</h1>
      <p id="message">Hello World!</p>
    </render-component>
  </render-app>
</body>

yone1130 added 13 commits June 4, 2025 19:35
@yone1130 yone1130 self-assigned this Jun 6, 2025
@yone1130 yone1130 marked this pull request as ready for review June 6, 2025 14:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@yone1130 yone1130

Labels

feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@yone1130