npm - @cfdez11/vex - Versions diffs - 0.1.0 - Mend

@cfdez11/vex 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/README.md +1383 -0
package/client/app.webmanifest +14 -0
package/client/favicon.ico +0 -0
package/client/services/cache.js +55 -0
package/client/services/hmr-client.js +22 -0
package/client/services/html.js +377 -0
package/client/services/hydrate-client-components.js +97 -0
package/client/services/hydrate.js +25 -0
package/client/services/index.js +9 -0
package/client/services/navigation/create-layouts.js +172 -0
package/client/services/navigation/create-navigation.js +103 -0
package/client/services/navigation/index.js +8 -0
package/client/services/navigation/link-interceptor.js +39 -0
package/client/services/navigation/metadata.js +23 -0
package/client/services/navigation/navigate.js +64 -0
package/client/services/navigation/prefetch.js +43 -0
package/client/services/navigation/render-page.js +45 -0
package/client/services/navigation/render-ssr.js +157 -0
package/client/services/navigation/router.js +48 -0
package/client/services/navigation/use-query-params.js +225 -0
package/client/services/navigation/use-route-params.js +76 -0
package/client/services/reactive.js +231 -0
package/package.json +24 -0
package/server/index.js +115 -0
package/server/prebuild.js +12 -0
package/server/root.html +15 -0
package/server/utils/cache.js +89 -0
package/server/utils/component-processor.js +1526 -0
package/server/utils/data-cache.js +62 -0
package/server/utils/delay.js +1 -0
package/server/utils/files.js +723 -0
package/server/utils/hmr.js +21 -0
package/server/utils/router.js +373 -0
package/server/utils/streaming.js +315 -0
package/server/utils/template.js +263 -0

package/server/utils/hmr.js ADDED Viewed

@@ -0,0 +1,21 @@
+/**
+ * HMR (Hot Module Replacement) event bus for dev mode (FEAT-03).
+ *
+ * When a `.html` file changes in dev:
+ *   1. The file watcher in `component-processor.js` invalidates the in-memory
+ *      caches (processHtmlFileCache, parsedTemplateCache, etc.) and re-generates
+ *      the client bundle for that file, then calls `hmrEmitter.emit('reload')`.
+ *   2. The SSE endpoint in `index.js` listens on `hmrEmitter` and forwards the
+ *      event to all connected browsers.
+ *   3. The HMR client script in the browser receives the event and triggers a
+ *      full-page reload so the user sees the updated page immediately.
+ *
+ * Using a single shared EventEmitter avoids coupling the file watcher
+ * (component-processor.js) directly to the HTTP server (index.js).
+ *
+ * This module is a no-op in production — nothing imports it there.
+ */
+import { EventEmitter } from "events";
+export const hmrEmitter = new EventEmitter();

package/server/utils/router.js ADDED Viewed

@@ -0,0 +1,373 @@
+import {
+  renderSuspenseComponent,
+  generateReplacementContent,
+} from "./streaming.js";
+import { getCachedComponentHtml, getRevalidateSeconds, revalidateCachedComponentHtml, saveCachedComponentHtml } from "./cache.js";
+import { getPagePath } from "./files.js";
+import { renderPageWithLayout } from "./component-processor.js";
+/**
+ * Routes currently being regenerated in the background.
+ *
+ * When an ISR page is stale we serve the cached version immediately and kick off
+ * a background re-render. This Set prevents multiple concurrent requests from
+ * all triggering their own regeneration for the same route simultaneously —
+ * only the first one wins; the others get the stale cache until it is replaced.
+ */
+const revalidatingRoutes = new Set();
+const FALLBACK_ERROR_HTML = `
+  <!DOCTYPE html>
+  <html>
+  <head><title>Error 500</title></head>
+  <body>
+    <h1>Error 500 - Internal Server Error</h1>
+    <p>An unexpected error has occurred.</p>
+    <p><a href="/">Back to home</a></p>
+  </body>
+  </html>
+`;
+/**
+ * Sends HTML response
+ * @param {import("http").ServerResponse} res
+ * @param {number} statusCode
+ * @param {string} html
+ */
+const sendResponse = (res, statusCode, html) => {
+  res.writeHead(statusCode, { "Content-Type": "text/html" });
+  res.end(html);
+};
+/**
+ * Start stream response, sending html and update html chunks
+ * @param {import("http").ServerResponse} res
+ * @param {string[]} htmlChunks
+ */
+const sendStartStreamChunkResponse = (res, statusCode, html, htmlChunks) => {
+  res.writeHead(statusCode, {
+    "Content-Type": "text/html; charset=utf-8",
+    "Transfer-Encoding": "chunked",
+    "X-Content-Type-Options": "nosniff",
+  });
+  sendStreamChunkResponse(res, html, htmlChunks)
+};
+/**
+ * Send html and update html chunks
+ * @param {import("http").ServerResponse} res
+ * @param {string[]} htmlChunks
+ */
+const sendStreamChunkResponse = (res, html, htmlChunks) => {
+  res.write(html);
+  htmlChunks.push(html);
+}
+/**
+ * Close html and end response
+ * @param {import("http").ServerResponse} res
+ * @param {string[]} htmlChunks
+ */
+const endStreamResponse = (res, htmlChunks) => {
+  res.write("</body></html>");
+  res.end();
+  htmlChunks.push("</body></html>")
+}
+/**
+ * Renders a page using SSR, optionally streams suspense components,
+ * applies Incremental Static Regeneration (ISR) when enabled,
+ * and sends the resulting HTML response to the client.
+ *
+ * This function supports:
+ * - Full server-side rendering
+ * - Streaming suspense components
+ * - ISR with cache revalidation
+ * - Graceful abort handling on client disconnect
+ *
+ * @async
+ * @function renderAndSendPage
+ *
+ * @param {Object} params
+ * @param {string} params.pageName
+ *   Name of the page to be rendered (resolved to a server component path).
+ *
+ * @param {number} [params.statusCode=200]
+ *   HTTP status code used for the response.
+ *
+ * @param {Object} [params.context={}]
+ *   Rendering context shared across server components.
+ *
+ * @param {import("http").IncomingMessage} params.context.req
+ *   Incoming HTTP request instance.
+ *
+ * @param {import("http").ServerResponse} params.context.res
+ *   HTTP response instance used to stream or send HTML.
+ *
+ * @param {Object.<string, any>} [params.context]
+ *   Additional arbitrary values exposed to the rendering pipeline.
+ *
+ * @param {Object} params.route
+ *   Matched route configuration.
+ *
+ * @param {string} params.route.path
+ *   Public route path (e.g. "/home").
+ *
+ * @param {string} params.route.serverPath
+ *   Internal server path used for resolution.
+ *
+ * @param {Object} params.route.meta
+ *   Route metadata.
+ *
+ * @param {boolean} params.route.meta.ssr
+ *   Whether the route supports server-side rendering.
+ *
+ * @param {boolean} params.route.meta.requiresAuth
+ *   Indicates if authentication is required.
+ *
+ * @param {number} params.route.meta.revalidate
+ *   ISR revalidation interval in seconds. A value > 0 enables ISR.
+ *
+ * @returns {Promise<void>}
+ *   Resolves once the response has been fully sent.
+ *
+ * @throws {Error}
+ *   Throws if rendering or streaming fails before the response is committed.
+ */
+/**
+ * Re-renders a stale ISR page and saves the result to cache without sending
+ * any HTTP response.
+ *
+ * Renders with `awaitSuspenseComponents = true` so all Suspense boundaries
+ * are resolved synchronously and the full HTML is available in one pass.
+ *
+ * @param {string} pagePath    - Absolute path to the page .html file.
+ * @param {object} context     - Request context (provides req.params for getData).
+ * @param {string} cacheKey    - Normalised pathname used as the ISR cache key.
+ */
+async function revalidateInBackground(pagePath, context, cacheKey) {
+  try {
+    // awaitSuspenseComponents=true resolves all suspense boundaries synchronously
+    // so we get the complete HTML in a single renderPageWithLayout call.
+    const { html } = await renderPageWithLayout(pagePath, context, true);
+    await saveCachedComponentHtml({ componentPath: cacheKey, html });
+  } catch (error) {
+    console.error(`[ISR] Background revalidation failed for ${cacheKey}:`, error.message);
+  }
+}
+async function renderAndSendPage({
+  pageName,
+  statusCode = 200,
+  context = {},
+  route,
+}) {
+  const pagePath = getPagePath(pageName);
+  const revalidateSeconds = getRevalidateSeconds(route.meta?.revalidate ?? 0);
+  const isISR = revalidateSeconds !== 0;
+  // Normalise the cache key to pathname only
+  // `context.req.url` includes the query string (e.g. `/page?debug=true`).
+  // Using the full URL as a cache key means `/page` and `/page?debug=true`
+  // generate two separate cache entries for the same page content.
+  const isrCacheKey = new URL(context.req.url, "http://x").pathname;
+  if(isISR) {
+    const { html: cachedHtml, isStale } = await getCachedComponentHtml({
+      componentPath: isrCacheKey,
+      revalidateSeconds: revalidateSeconds,
+    });
+    if (cachedHtml && !isStale) {
+      sendResponse(context.res, statusCode, cachedHtml);
+      return;
+    }
+    // Stale-while-revalidate: serve stale content immediately so the
+    // user never waits for a re-render, then regenerate the page in the background.
+    // The lock prevents multiple concurrent requests from all re-rendering at once.
+    if (cachedHtml && isStale) {
+      sendResponse(context.res, statusCode, cachedHtml);
+      if (!revalidatingRoutes.has(isrCacheKey)) {
+        revalidatingRoutes.add(isrCacheKey);
+        revalidateInBackground(pagePath, context, isrCacheKey)
+          .finally(() => revalidatingRoutes.delete(isrCacheKey));
+      }
+      return;
+    }
+  }
+  const { html, suspenseComponents, serverComponents } =
+    await renderPageWithLayout(pagePath, context);
+  // if no suspense components, send immediately
+  if (suspenseComponents.length === 0) {
+    sendResponse(context.res, statusCode, html);
+    if(isISR) {
+      saveCachedComponentHtml({ componentPath: isrCacheKey, html });
+    }
+    return;
+  }
+  const htmlChunks = [];
+  let abortedStream = false;
+  let errorStream = false
+  context.res.on("close", () => abortedStream = true);
+  // send initial HTML (before </body>)
+  const [beforeClosing] = html.split("</body>");
+  sendStartStreamChunkResponse(context.res, 200, beforeClosing, htmlChunks)
+  // stream suspense components
+  const renderPromises = suspenseComponents.map(async (suspenseComponent) => {
+    try {
+      const renderedContent = await renderSuspenseComponent(
+        suspenseComponent,
+        serverComponents
+      );
+      const replacementContent = generateReplacementContent(
+        suspenseComponent.id,
+        renderedContent
+      );
+      sendStreamChunkResponse(context.res, replacementContent, htmlChunks)
+    } catch (error) {
+      console.error(`Error rendering suspense ${suspenseComponent.id}:`, error);
+      const errorContent = generateReplacementContent(
+        suspenseComponent.id,
+        `<div class="text-red-500">Error loading content</div>`
+      );
+      context.res.write(errorContent);
+      errorStream = true;
+    }
+  });
+  await Promise.all(renderPromises);
+  endStreamResponse(context.res, htmlChunks);
+  if(isISR && !abortedStream && !errorStream) {
+    saveCachedComponentHtml({
+      componentPath: isrCacheKey,
+      html: htmlChunks.join("")
+    });
+  }
+}
+/**
+ * Handles an incoming HTTP request for a page route.
+ *
+ * Resolves the appropriate route, builds the rendering context,
+ * delegates rendering to `renderAndSendPage`, and ensures that
+ * errors are handled gracefully by rendering a fallback error page.
+ *
+ * @async
+ * @function handlePageRequest
+ *
+ * @param {import("http").IncomingMessage} req
+ *   Incoming HTTP request.
+ *
+ * @param {import("http").ServerResponse} res
+ *   HTTP response used to send rendered content.
+ *
+ * @param {Object|null} route
+ *   Matched route definition. If null, a fallback 404 route is used.
+ *
+ * @param {string} route.path
+ *   Public URL path of the route.
+ *
+ * @param {Object} route.meta
+ *   Route metadata used during rendering.
+ *
+ * @returns {Promise<void>}
+ *   Resolves once the response has been fully handled.
+ */
+export async function handlePageRequest(req, res, route) {
+  const pageName = route.path.slice(1);
+  const context = { req, res };
+  try {
+    await renderAndSendPage({ pageName, context, route });
+  } catch (e) {
+    // redirect() in a server script throws a structured error.
+    // Intercept it before the generic 500 handler so the browser gets a proper redirect.
+    if (e.redirect) {
+      res.redirect(e.redirect.statusCode, e.redirect.path);
+      return;
+    }
+    const errorData = {
+      message: e.message || "Internal server error",
+      code: 500,
+      details: "Could not load the requested page",
+      path: route.path,
+      stack: e.stack,
+    };
+    try {
+      await renderAndSendPage({
+        pageName: "error",
+        statusCode: 500,
+        context: {
+          ...context,
+          ...errorData,
+        },
+        route,
+      });
+    } catch (err) {
+      console.error(`Failed to render error page: ${err.message}`);
+      sendResponse(res, 500, FALLBACK_ERROR_HTML);
+    }
+  }
+}
+/**
+ * Handler to mark a cached component or page as stale for ISR-like revalidation.
+ *
+ * This endpoint allows clients to request that the server invalidate the cached HTML
+ * of a specific component or page. The cache will be regenerated automatically
+ * on the next request for that component.
+ *
+ * @async
+ * @param {import('express').Request} req - The Express request object. Expects a query parameter `path` specifying the component/page path to revalidate.
+ * @param {import('express').Response} res - The Express response object. Will send a JSON response indicating success or failure.
+ *
+ * @returns {Promise<import('express').Response>} JSON response with:
+ *   - 200: { message: string } if the cache was successfully marked as stale
+ *   - 400: { error: string } if the required `path` query parameter is missing
+ *   - 500: { error: string } if an unexpected error occurs during revalidation
+ *
+ * @example
+ * Client request:
+ * POST /revalidate?path=/about
+ *
+ * Response:
+ * {
+ *   "message": "Cache for '/about' marked as stale. It will regenerate on next request."
+ * }
+ */
+export async function revalidatePath(req, res) {
+  try {
+    const componentPath = req.query.path;
+    if (!componentPath) {
+      return res.status(400).json({ error: "Missing 'path' query parameter" });
+    }
+    await revalidateCachedComponentHtml(componentPath);
+    return res.status(200).json({
+      message: `Cache for '${componentPath}' marked as stale. It will regenerate on next request.`
+    });
+  } catch (err) {
+    console.error("Error revalidating cache:", err);
+    return res.status(500).json({ error: "Failed to revalidate cache" });
+  }
+}

package/server/utils/streaming.js ADDED Viewed

@@ -0,0 +1,315 @@
+import {
+  processClientComponent,
+  renderHtmlFile,
+} from "./component-processor.js";
+/**
+ * Parses a string of raw HTML-like attributes into a structured object.
+ * Return object will be used to pass props to components through template
+ *
+ * Supports:
+ *   - Dynamic props with `:` prefix (e.g., `:prop="value"`).
+ *   - Event handlers with `@` prefix (e.g., `@click="handler"`).
+ *   - Static attributes (e.g., `id="my-id"` or `class="my-class"`).
+ *
+ * @param {string} rawAttrs - The raw attribute string extracted from an element tag.
+ *
+ * @returns {Record<string, string>} An object mapping attribute names to their values.
+ *                                   Dynamic props and event handlers retain their raw
+ *                                   string representations (e.g., template expressions).
+ *
+ * @example
+ * parseAttributes(':links="${links}" @click="handleClick" id="my-component"');
+ * // Returns:
+ * // {
+ * //   links: '${links}',
+ * //   click: 'handleClick',
+ * //   id: 'my-component'
+ * // }
+ */
+function parseAttributes(rawAttrs) {
+  const attrs = {};
+  const regex = /:(\w+)=['"]([^'"]+)['"]|@(\w+)=['"]([^'"]+)['"]|(\w+)=['"]([^'"]+)['"]/g;
+  let match;
+  while ((match = regex.exec(rawAttrs)) !== null) {
+    if (match[1]) {
+      // Dynamic prop :prop
+      attrs[match[1]] = match[2];
+    } else if (match[3]) {
+      // Event handler @event
+      attrs[match[3]] = match[4];
+    } else if (match[5]) {
+      // Static prop
+      attrs[match[5]] = match[6];
+    }
+  }
+  return attrs;
+}
+/**
+ * Renders components in HTML
+ * @param {string} html
+ * @param {Map<string, { path: string }>} serverComponents
+ * @returns {Promise<string>}
+ */
+/**
+ * Renders server component instances in parallel.
+ *
+ * Each component type found in `serverComponents` may appear multiple times in
+ * the HTML (e.g. three `<UserCard>` tags). Previously they were rendered one by
+ * one in a serial `for` loop, even though each instance is fully independent.
+ *
+ * Now, all instances of a given component are kicked off at the same time with
+ * `Promise.all` and their results are applied in reverse-index order so that
+ * string offsets stay valid (replacing from the end of the string backwards).
+ *
+ * @param {string} html
+ * @param {Map<string, { path: string }>} serverComponents
+ * @returns {Promise<string>}
+ */
+async function processServerComponents(html, serverComponents) {
+  let processedHtml = html;
+  for (const [componentName, componentData] of serverComponents.entries()) {
+    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const componentRegex = new RegExp(
+      `<${escapedName}(?![a-zA-Z0-9_-])\\s*([^>]*?)\\s*(?:\\/>|>\\s*<\\/${escapedName}(?![a-zA-Z0-9_-])>)`,
+      "gi"
+    );
+    const replacements = [];
+    let match;
+    while ((match = componentRegex.exec(html)) !== null) {
+      replacements.push({
+        name: componentName,
+        attrs: parseAttributes(match[1]),
+        fullMatch: match[0],
+        start: match.index,
+        end: match.index + match[0].length,
+      });
+    }
+    if (replacements.length === 0) continue;
+    // Render all instances of this component concurrently, then apply results
+    // from the end of the string backwards so earlier offsets stay valid.
+    const rendered = await Promise.all(
+      replacements.map(({ attrs }) => renderHtmlFile(componentData.path, attrs))
+    );
+    for (let i = replacements.length - 1; i >= 0; i--) {
+      const { start, end } = replacements[i];
+      processedHtml =
+        processedHtml.slice(0, start) +
+        rendered[i].html +
+        processedHtml.slice(end);
+    }
+  }
+  return processedHtml;
+}
+/**
+ * Renders components in HTML and client scripts to load them
+ * @param {string} html
+ * @param {Map<string, { path: string }>} clientComponents
+ * @returns {Promise<{
+ *  html: string,
+ *  allScripts: Array<string>,
+ * }>}
+ */
+async function renderClientComponents(html, clientComponents) {
+  let processedHtml = html;
+  const allScripts = [];
+  for (const [componentName, { originalPath }] of clientComponents.entries()) {
+    const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const componentRegex = new RegExp(
+      `<${escapedName}\\b((?:\\s+(?:[^\\s>"'=]+(?:=(?:"[^"]*"|'[^']*'|[^\\s"'=<>]+))?))*?)\\s*\\/?>`,
+      "gi"
+    );
+    const replacements = [];
+    let match;
+    const htmlToProcess = processedHtml;
+    while ((match = componentRegex.exec(htmlToProcess)) !== null) {
+      const matchData = {
+        name: componentName,
+        attrs: parseAttributes(match[1]),
+        fullMatch: match[0],
+        start: match.index,
+        end: match.index + match[0].length,
+      };
+      replacements.push(matchData);
+    }
+    // Render in reverse order to maintain indices
+    for (let i = replacements.length - 1; i >= 0; i--) {
+      const { start, end, attrs } = replacements[i];
+      const htmlComponent = await processClientComponent(componentName, originalPath, attrs);
+      processedHtml =
+        processedHtml.slice(0, start) +
+        htmlComponent +
+        processedHtml.slice(end);
+    }
+  }
+  return { html: processedHtml, allScripts };
+}
+/**
+ * Renders server components, handling both regular and suspense boundaries
+ * Server components without suspense are rendered immediately.
+ * Server components inside <Suspense> boundaries are saved in suspenseComponents.
+ * @param {string} pageHtml
+ * @param {Map<string, { path: string }>} serverComponents
+ * @param {boolean} awaitSuspenseComponents - If true, renders suspense components immediately
+ * @returns {Promise<{
+ *   html: string,
+ *   suspenseComponents: Array<{
+ *     id: string,
+ *     content: string,
+ *   }>
+ * }>}
+ */
+async function renderServerComponents(pageHtml, serverComponents = new Map(), awaitSuspenseComponents = false) {
+  const suspenseComponents = [];
+  let suspenseId = 0;
+  let html = pageHtml;
+  // Fresh regex per call — avoids the shared-lastIndex race condition.
+  // Each request gets its own regex instance with lastIndex starting at 0.
+  const suspenseRegex = /<Suspense\s+fallback="([^"]*)">([\s\S]*?)<\/Suspense>/g;
+  let match;
+  while ((match = suspenseRegex.exec(html)) !== null) {
+    const id = `suspense-${suspenseId++}`;
+    const [fullMatch, fallback, content] = match;
+    const suspenseContent = awaitSuspenseComponents ? content : fallback;
+    // Render components in fallback if not awaiting suspense or in content if awaiting suspense
+    const fallbackHtml = await processServerComponents(
+      suspenseContent,
+      serverComponents
+    );
+    suspenseComponents.push({
+      id,
+      content: content,
+    });
+    // Replace suspense block with container and restart the search from the
+    // beginning of the modified string (indices have shifted after the replace).
+    const replacement = `<div id="${id}">${fallbackHtml}</div>`;
+    html = html.replace(fullMatch, replacement);
+    suspenseRegex.lastIndex = 0;
+  }
+  // Render all non-suspended components
+  html = await processServerComponents(html, serverComponents);
+  return { html, suspenseComponents };
+}
+/**
+ * Renders server components, client components in HTML, suspense components and client scripts to load client components
+ * @param {{
+ *  pageHtml: string,
+ *  serverComponents: Map<string, { path: string, originalPath: string, importStatement: string }>,
+ *  clientComponents: Map<string, { path: string, originalPath: string, importStatement: string }>,
+ *  awaitSuspenseComponents: boolean,
+ * }}
+ * @returns {Promise<{
+ *   html: string,
+ *   clientComponentsScripts: Array<string>,
+ *   suspenseComponents: Array<{
+ *    id: string,
+ *    content: string,
+ *   }>
+ * }>}
+ */
+export async function renderComponents({
+  html,
+  serverComponents = new Map(),
+  clientComponents = new Map(),
+  awaitSuspenseComponents = false,
+}) {
+  const hasServerComponents = serverComponents.size > 0;
+  const hasClientComponents = clientComponents.size > 0;
+  const { html: htmlServerComponents,  suspenseComponents } = hasServerComponents ?
+    await renderServerComponents(html, serverComponents, awaitSuspenseComponents) :
+    {
+      html,
+      suspenseComponents: [],
+    };
+  const { html: htmlClientComponents, allScripts: clientComponentsScripts } =
+    hasClientComponents ?
+      await renderClientComponents(htmlServerComponents, clientComponents) :
+      {
+        html: htmlServerComponents,
+        allScripts: [],
+      };
+  return {
+    html: htmlClientComponents,
+    suspenseComponents,
+    clientComponentsScripts,
+  };
+}
+/**
+ * Generates the streaming HTML payload that replaces a Suspense fallback with
+ * the real rendered content once it is ready.
+ *
+ * The payload consists of two parts streamed back-to-back:
+ *  1. A `<template id="…">` holding the rendered HTML (invisible to the user).
+ *  2. A tiny inline `<script>` that calls `window.hydrateTarget(targetId, sourceId)`.
+ *
+ * `window.hydrateTarget` is defined once in root.html via a single
+ * `<script src="hydrate.js">`. Using an inline call instead of a per-boundary
+ * `<script src="hydrate.js">` avoids the browser parsing and initialising the
+ * same script N times.
+ *
+ * @param {string} suspenseId     - The id of the fallback <div> to replace.
+ * @param {string} renderedContent - The real HTML to swap in.
+ * @returns {string}
+ */
+export function generateReplacementContent(suspenseId, renderedContent) {
+  const contentId = `${suspenseId}-content`;
+  return `<template id="${contentId}">${renderedContent}</template><script>window.hydrateTarget("${suspenseId}","${contentId}")</script>`;
+}
+/**
+ * Renders all components inside a suspense boundary
+ * @param {{
+ *   id: string,
+ *   content: string,
+ *   components: Array<{name: string, attrs: object, fullMatch: string}>
+ * }} suspenseComponent
+ * @param {Map<string, { path: string }>} serverComponents
+ * @returns {Promise<string>}
+ */
+export async function renderSuspenseComponent(
+  suspenseComponent,
+  serverComponents
+) {
+  const html = await processServerComponents(
+    suspenseComponent.content,
+    serverComponents
+  );
+  return html;
+}