From d4ea090056c182c7be661f23a6eb09d1f9d17f09 Mon Sep 17 00:00:00 2001
From: Andreas Nordahl <andnorda@gmail.com>
Date: Tue, 2 Jul 2024 12:49:00 +0200
Subject: [PATCH] csr tweaks (#352)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Disse endringene sparer 0.1 kB (0.04 kB gziped) i csr.js, uten at jeg synes
det går på bekostning av kodekvalitet.
---
 packages/client/src/csr.ts                    | 43 +++++++------------
 .../src/helpers/html-element-builder.ts       |  6 +--
 .../src/lib/html-element-string-builder.ts    | 12 +-----
 packages/shared/types.ts                      |  6 +--
 4 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/packages/client/src/csr.ts b/packages/client/src/csr.ts
index 3bf26c02..09a560e1 100644
--- a/packages/client/src/csr.ts
+++ b/packages/client/src/csr.ts
@@ -2,39 +2,28 @@ import { CsrPayload } from "decorator-shared/types";
 import { buildHtmlElement } from "./helpers/html-element-builder";
 
 const findOrError = (id: string) => {
-    const el = document.getElementById(id);
+    const el = document.getElementById(`decorator-${id}`);
 
     if (!el) {
-        throw new Error(
-            `Could not find element with id ${id}. See documentation on nav-dekoratoren on github.`,
-        );
+        throw new Error(`No elem:${id}. See github.com/navikt/decorator-next`);
     }
 
-    return el as HTMLDivElement;
+    return el;
 };
 
-async function hydrate() {
-    const [header, footer, envEl] = [
-        "decorator-header",
-        "decorator-footer",
-        "decorator-env",
-    ].map(findOrError);
-
-    const envUrl = envEl.dataset.src as string;
-
-    const response = await fetch(envUrl);
-    const elements = (await response.json()) as CsrPayload;
-
-    header.outerHTML = elements.header;
-    footer.outerHTML = elements.footer;
-
-    // Set decorator state before script evaulation
-    window.__DECORATOR_DATA__ = elements.data;
-
-    elements.scripts
-        .map(buildHtmlElement)
-        .forEach((script) => document.body.appendChild(script));
-}
+const hydrate = () =>
+    fetch(findOrError("env").dataset.src!)
+        .then((res) => res.json())
+        .then((elements: CsrPayload) => {
+            (["header", "footer"] as const).forEach(
+                (key) => (findOrError(key).outerHTML = elements[key]),
+            );
+            window.__DECORATOR_DATA__ = elements.data;
+
+            elements.scripts
+                .map(buildHtmlElement)
+                .forEach((script) => document.body.appendChild(script));
+        });
 
 if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", hydrate);
diff --git a/packages/client/src/helpers/html-element-builder.ts b/packages/client/src/helpers/html-element-builder.ts
index 5b2eb3e4..1e7872af 100644
--- a/packages/client/src/helpers/html-element-builder.ts
+++ b/packages/client/src/helpers/html-element-builder.ts
@@ -3,9 +3,9 @@ import { HtmlElementProps } from "decorator-shared/types";
 export const buildHtmlElement = ({ tag, attribs, body }: HtmlElementProps) => {
     const element = document.createElement(tag);
 
-    Object.entries(attribs).forEach(([name, value]) => {
-        element.setAttribute(name, value);
-    });
+    for (const key in attribs) {
+        element.setAttribute(key, attribs[key]);
+    }
 
     if (body) {
         element.textContent = body;
diff --git a/packages/server/src/lib/html-element-string-builder.ts b/packages/server/src/lib/html-element-string-builder.ts
index 384f9e72..c0ea1c53 100644
--- a/packages/server/src/lib/html-element-string-builder.ts
+++ b/packages/server/src/lib/html-element-string-builder.ts
@@ -5,13 +5,5 @@ export const buildHtmlElementString = ({
     tag,
     attribs,
     body,
-    selfClosing,
-}: HtmlElementProps) => {
-    const attribsString = buildHtmlAttribsString(attribs);
-
-    if (selfClosing) {
-        return `<${tag} ${attribsString} />`;
-    }
-
-    return `<${tag} ${attribsString}>${body ?? ""}</${tag}>`;
-};
+}: HtmlElementProps) =>
+    `<${tag} ${buildHtmlAttribsString(attribs)}>${body ?? ""}</${tag}>`;
diff --git a/packages/shared/types.ts b/packages/shared/types.ts
index e811409e..24a3460e 100644
--- a/packages/shared/types.ts
+++ b/packages/shared/types.ts
@@ -147,7 +147,5 @@ export type CsrPayload = {
 export type HtmlElementProps = {
     tag: string;
     attribs: Record<string, string>;
-} & (
-    | { body?: string; selfClosing?: never }
-    | { body?: never; selfClosing?: boolean }
-);
+    body?: string;
+};