render.js

Overview

Usage

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

import { Render } from 'https://cdn.yoneyo.com/scripts/render@1.0.0/render.js';
const render = new Render();
const root = document.getElementById("root");
function app() {
 const title = "render.js";
 const message = "Hello World";
 return [
 render.$div({
 id: "app",
 children: [
 render.$h1({
 id: "title",
 textContent: title,
 }),
 render.$p({
 id: "message",
 textContent: message,
 }),
 ],
 }),
 ];
};
render.build({
 target: root,
 children: app(),
});

Example codes

Resources

Development

1. Install Packages

npm install

2. Build

npm run build

License