refac: update ren interface

src/components/layout.mts

@@ -1,21 +1,17 @@
 import { AnyNode, Elem } from "ren";
 
-export async function Layout(page: AnyNode): Promise<Elem> {
+export function Layout(page: AnyNode): Elem {
-  return new Elem("html")
+  return new Elem("html").withAttr("lang", "ru").withChildren(
-    .withAttr("lang", "ru")
+    new Elem("head").withChildren(
-    .withChild(
+      new Elem("meta").withAttr("charset", "utf-8"),
-      new Elem("head").withChildren([
+      new Elem("link").withAttrs({
-        new Elem("meta").withAttr("charset", "utf-8"),
+        rel: "stylesheet",
-        new Elem("link").withAttrs({
+        href: "/static/styles.css",
-          rel: "stylesheet",
+      }),
-          href: "/static/styles.css",
+      new Elem("title").withText("hello world")
-        }),
+    ),
-        new Elem("title").withText("hello world"),
+    new Elem("body").withChildren(
-      ])
+      new Elem("div").withAttr("id", "root").withChildren(page)
     )
-    .withChild(
+  );
-      new Elem("body").withChild(
-        new Elem("div").withAttr("id", "root").withChild(page)
-      )
-    );
 }

src/components/page_layout.mts

@@ -1,24 +1,24 @@
 import { AnyNode, Elem } from "ren";
 
-export async function PageLayout(children: AnyNode[]): Promise<Elem> {
+export function PageLayout(...children: AnyNode[]): Elem {
   return new Elem("div")
     .withAttr("id", "main")
-    .withChildren([
+    .withChildren(
       Header(),
-      new Elem("div").withAttr("class", "content").withChildren(children),
+      new Elem("div").withAttrs({ class: "content" }).withChildren(...children),
-      Footer(),
+      Footer()
-    ]);
+    );
 }
 
 export function Header(): Elem {
-  return new Elem("header").withChild(HeaderNav());
+  return new Elem("header").withChildren(HeaderNav());
 }
 
 export function HeaderNav(): Elem {
-  return new Elem("nav").withChildren([
+  return new Elem("nav").withChildren(
     new Elem("a").withAttr("href", "/").withText("About"),
-    new Elem("a").withAttr("href", "/works").withText("Works"),
+    new Elem("a").withAttr("href", "/works").withText("Works")
-  ]);
+  );
 }
 
 export function Footer(): Elem {

src/server.mts

@@ -43,15 +43,15 @@ async function handleHttpReq(
       if (/^[/](?:about[/]?)?$/.test(req.url)) {
         httpRes
           .writeHead(200, { "content-type": "text/html" })
-          .end(await ren.render(Layout(AboutPage())));
+          .end(ren.render(Layout(AboutPage())));
       } else if (/^[/]works[/]?/.test(req.url)) {
         httpRes
           .writeHead(200, { "content-type": "text/html" })
-          .end(await ren.render(Layout(WorksPage())));
+          .end(ren.render(Layout(WorksPage())));
       } else {
         httpRes
           .writeHead(404, { "content-type": "text/html" })
-          .end(await ren.render(Layout(E404())));
+          .end(ren.render(Layout(E404())));
       }
     }
   } catch (err) {
@@ -63,10 +63,7 @@ async function handleHttpReq(
   }
 }
 
-const mimeTypeByExt = new Map([
+const mimeTypeByExt = new Map([[".css", "text/css"]]);
-  [".html", "text/html"],
-  [".css", "text/css"],
-]);
 
 export function tryIntoAppServerRequest(
   req: http.IncomingMessage

src/views/about.mts

@@ -1,6 +1,6 @@
 import { PageLayout } from "../components/page_layout.mjs";
-import { AnyAsyncNode, Elem } from "ren";
+import { AnyNode, Elem } from "ren";
 
-export async function AboutPage(): AnyAsyncNode {
+export function AboutPage(): AnyNode {
-  return PageLayout([new Elem("p").withText("Привет мир")]);
+  return PageLayout(new Elem("p").withText("Привет мир"));
 }

src/views/e404.mts

@@ -1,6 +1,6 @@
 import { PageLayout } from "../components/page_layout.mjs";
-import { AnyAsyncNode, Elem } from "ren";
+import { AnyNode, Elem } from "ren";
 
-export async function E404(): AnyAsyncNode {
+export function E404(): AnyNode {
-  return PageLayout([new Elem("p").withText("Page not found")]);
+  return PageLayout(new Elem("p").withText("Page not found"));
 }

src/views/works.mts

@@ -1,6 +1,6 @@
 import { PageLayout } from "../components/page_layout.mjs";
-import { AnyAsyncNode, Elem } from "ren";
+import { AnyNode, Elem } from "ren";
 
-export async function WorksPage(): AnyAsyncNode {
+export function WorksPage(): AnyNode {
-  return PageLayout([new Elem("p").withText("Works")]);
+  return PageLayout(new Elem("p").withText("Works"));
 }

static/styles.css

@@ -5,27 +5,23 @@
 }
 
 html {
-  height: 100%;
   background-color: #eee;
 }
 
-body {
+html, body {
   height: 100%;
 }
-  
+
 #root {
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
   align-items: stretch;
 }
 
-#main {
+#root, #main {
   display: flex;
-  flex: 1 0;
   flex-direction: column;
 }
 
-.content {
+#main, .content {
   flex: 1 0;
 }