csr tweaks (#352)

Disse endringene sparer 0.1 kB (0.04 kB gziped) i csr.js, uten at jeg synes det går på bekostning av kodekvalitet.
navikt · Jul 2, 2024 · d4ea090 · d4ea090
1 parent 7b82370
commit d4ea090
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+};