evolit 0.1.0-alpha.2 → 0.1.0-alpha.21

package/src/ssr-adapter.js

@@ -1,4 +1,5 @@
 import { renderBootstrap, renderDocument } from "@litsx/ssr";
+import { createRouteSegmentPayload, renderRouteSegmentPayload } from "./route-segments.js";
 
 function escapeHtmlAttribute(value) {
   return String(value)
@@ -16,13 +17,52 @@ function normalizeHeadMarkup(value) {
   return typeof value === "string" ? value : "";
 }
 
+function renderDescriptionMarkup(description) {
+  return description
+    ? `<meta name="description" content="${escapeHtmlAttribute(description)}" />`
+    : "";
+}
+
+function renderRouteHeadMarkup(markup) {
+  return `<!--evolit:route-head:start-->${markup}<!--evolit:route-head:end-->`;
+}
+
+function normalizeDocumentAttributes(attributes) {
+  if (!attributes || typeof attributes !== "object" || Array.isArray(attributes)) return {};
+  return Object.fromEntries(
+    Object.entries(attributes)
+      .filter(([name, value]) => name !== "lang" && /^[^\s"'>/=]+$/.test(name) && value !== false && value != null)
+      .map(([name, value]) => [name, value === true ? true : String(value)]),
+  );
+}
+
+function renderDocumentAttributes(attributes) {
+  return Object.entries(normalizeDocumentAttributes(attributes))
+    .map(([name, value]) => value === true ? name : `${name}="${escapeHtmlAttribute(value)}"`)
+    .join(" ");
+}
+
+function createDocumentState(metadata) {
+  return {
+    lang: String(metadata.lang ?? "en"),
+    htmlAttributes: normalizeDocumentAttributes(metadata.htmlAttributes),
+    bodyAttributes: normalizeDocumentAttributes(metadata.bodyAttributes),
+  };
+}
+
+function renderDocumentStateScript(metadata) {
+  const serialized = JSON.stringify(createDocumentState(metadata))
+    .replaceAll("<", "\\u003C")
+    .replaceAll(">", "\\u003E")
+    .replaceAll("&", "\\u0026");
+  return `<script type="application/json" id="__EVOLIT_DOCUMENT__">${serialized}</script>`;
+}
+
 function resolveDocumentMetadata(routeMetadata = {}, adapterOptions = {}) {
   const description =
     routeMetadata.description ?? adapterOptions.description ?? "A LitSX application";
   const extraHead = [
-    description
-      ? `<meta name="description" content="${escapeHtmlAttribute(description)}" />`
-      : "",
+    renderDescriptionMarkup(description),
     normalizeHeadMarkup(adapterOptions.head),
     normalizeHeadMarkup(routeMetadata.head),
   ]
@@ -32,6 +72,7 @@ function resolveDocumentMetadata(routeMetadata = {}, adapterOptions = {}) {
   return {
     lang: String(routeMetadata.lang ?? adapterOptions.lang ?? "en"),
     title: String(routeMetadata.title ?? adapterOptions.title ?? "evolit"),
+    description: String(description),
     head: extraHead,
     htmlAttributes: {
       ...(adapterOptions.htmlAttributes ?? {}),
@@ -46,19 +87,18 @@ function resolveDocumentMetadata(routeMetadata = {}, adapterOptions = {}) {
 
 function createHtmlDocument({ body, metadata = {} }) {
   const title = metadata.title ? String(metadata.title) : "evolit";
-  const description =
-    metadata.description ? String(metadata.description) : "A LitSX application";
+  const htmlAttributes = renderDocumentAttributes(metadata.htmlAttributes);
+  const bodyAttributes = renderDocumentAttributes(metadata.bodyAttributes);
 
   return `<!DOCTYPE html>
-<html lang="${escapeHtmlAttribute(metadata.lang ?? "en")}">
+<html lang="${escapeHtmlAttribute(metadata.lang ?? "en")}"${htmlAttributes ? ` ${htmlAttributes}` : ""}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>${title}</title>${description ? `
-    <meta name="description" content="${escapeHtmlAttribute(description)}" />` : ""}
+    <title>${title}</title>
 ${metadata.head ? `    ${String(metadata.head).split("\n").join("\n    ")}` : ""}
   </head>
-  <body>${body}</body>
+  <body${bodyAttributes ? ` ${bodyAttributes}` : ""}>${body}</body>
 </html>`;
 }
 
@@ -69,6 +109,15 @@ function createRouteHeaders(routeResult, headers = {}) {
   };
 }
 
+function renderHydrationDataScript(hydrationData) {
+  if (!hydrationData) return "";
+  const serialized = JSON.stringify(hydrationData)
+    .replaceAll("<", "\\u003C")
+    .replaceAll(">", "\\u003E")
+    .replaceAll("&", "\\u0026");
+  return `<script type="application/json" id="__LITSX_HYDRATION__">${serialized}</script>`;
+}
+
 function responseHeadersToObject(headers) {
   const values = Object.fromEntries(headers.entries());
   if (typeof headers.getSetCookie === "function") {
@@ -111,6 +160,66 @@ export function createSsrAdapter(options = {}) {
         };
       }
 
+      if (typeof routeResult.tree === "string" && routeResult.ssrArtifacts) {
+        const result = routeResult.ssrArtifacts;
+        const metadata = resolveDocumentMetadata(routeResult.metadata, options);
+        const generatedBootstrap =
+          !options.bootstrap && !options.clientEntry && typeof options.resolveBootstrap === "function"
+            ? await options.resolveBootstrap({ routeResult, result })
+            : "";
+        const additionalHead =
+          typeof options.resolveAdditionalHead === "function"
+            ? await options.resolveAdditionalHead({ routeResult, result })
+            : "";
+        // Adapter head is global. Route metadata and renderer-provided head
+        // tags are delimited so browser navigation can replace only that part.
+        const routeHead = [
+          renderDescriptionMarkup(metadata.description),
+          normalizeHeadMarkup(routeResult.metadata?.head),
+          ...(result.headTags ?? []),
+        ]
+          .filter(Boolean)
+          .join("\n");
+        const composedHead = [
+          normalizeHeadMarkup(options.head),
+          renderRouteHeadMarkup(routeHead),
+          additionalHead,
+        ]
+          .filter(Boolean)
+          .join("\n");
+        const document = createHtmlDocument({
+          body: `${routeResult.tree}${renderHydrationDataScript(result.hydrationData)}`,
+          metadata: {
+            ...routeResult.metadata,
+            ...metadata,
+            head: composedHead,
+          },
+        });
+        const transformedDocument =
+          typeof options.transformDocument === "function"
+            ? await options.transformDocument({ routeResult, result, document })
+            : document;
+        const routeRuntimeScripts = [
+          renderRouteSegmentPayload(createRouteSegmentPayload(routeResult)),
+          renderDocumentStateScript(metadata),
+        ].filter(Boolean).join("\n");
+        const documentWithRouteSegments = routeRuntimeScripts
+          ? transformedDocument.replace("</body>", `${routeRuntimeScripts}\n</body>`)
+          : transformedDocument;
+        const body = generatedBootstrap
+          ? documentWithRouteSegments.replace(
+            "</body>",
+            `${renderBootstrap({ bootstrap: { content: generatedBootstrap } })}\n</body>`,
+          )
+          : documentWithRouteSegments;
+
+        return {
+          status: routeResult.status ?? 200,
+          headers: createRouteHeaders(routeResult, { "content-type": "text/html; charset=utf-8" }),
+          body,
+        };
+      }
+
       if (typeof routeResult.tree === "string") {
         const metadata = resolveDocumentMetadata(routeResult.metadata, options);
         return {
@@ -121,7 +230,6 @@ export function createSsrAdapter(options = {}) {
             metadata: {
               ...routeResult.metadata,
               ...metadata,
-              description: routeResult.metadata?.description ?? options.description,
             },
           }),
         };
@@ -156,6 +264,13 @@ export function createSsrAdapter(options = {}) {
             document: documentWithAdditionalHead,
           })
           : documentWithAdditionalHead;
+      const routeRuntimeScripts = [
+        renderRouteSegmentPayload(createRouteSegmentPayload(routeResult)),
+        renderDocumentStateScript(documentOptions),
+      ].filter(Boolean).join("\n");
+      const documentWithRouteSegments = routeRuntimeScripts
+        ? transformedDocument.replace("</body>", `${routeRuntimeScripts}\n</body>`)
+        : transformedDocument;
 
       if (generatedBootstrap) {
         const bootstrapMarkup = renderBootstrap({
@@ -163,7 +278,7 @@ export function createSsrAdapter(options = {}) {
             content: generatedBootstrap,
           },
         });
-        const documentWithBootstrap = transformedDocument.replace(
+        const documentWithBootstrap = documentWithRouteSegments.replace(
           "</body>",
           `${bootstrapMarkup}\n</body>`,
         );
@@ -178,7 +293,7 @@ export function createSsrAdapter(options = {}) {
       return {
         status: routeResult.status ?? 200,
         headers: createRouteHeaders(routeResult, { "content-type": "text/html; charset=utf-8" }),
-        body: transformedDocument,
+        body: documentWithRouteSegments,
       };
     },
   };

package/src/terminal.js

@@ -0,0 +1,32 @@
+const enabled = Boolean(process.stdout.isTTY) && !process.env.NO_COLOR;
+
+function style(open, value) {
+  return enabled ? `\u001B[${open}m${value}\u001B[0m` : String(value);
+}
+
+export const terminal = {
+  bold(value) {
+    return style("1", value);
+  },
+  dim(value) {
+    return style("2", value);
+  },
+  red(value) {
+    return style("31", value);
+  },
+  green(value) {
+    return style("32", value);
+  },
+  yellow(value) {
+    return style("33", value);
+  },
+  blue(value) {
+    return style("34", value);
+  },
+  magenta(value) {
+    return style("35", value);
+  },
+  cyan(value) {
+    return style("36", value);
+  },
+};

package/templates/default/yarnrc.yml.template

@@ -0,0 +1 @@
+nodeLinker: node-modules