123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
// @ts-check
import { createElement as h } from "react";
import documentHasStyleSheet from "./documentHasStyleSheet.mjs";import HeadManager from "./HeadManager.mjs";import LinkCss from "./LinkCss.mjs";
/** * Creates a Ruck app route plan for route content with CSS dependencies that * must be loaded in the document head before the route content mounts and be * removed again when navigation to this route aborts, or after navigation to * the next route for a different page. * @param {RouteContentWithCss *   | Promise<RouteContentWithCss>} routeContentWithCss Route content with CSS *   dependencies. * @param {import("./HeadManager.mjs").default} headManager Head tag manager. * @param {boolean} isInitialRoute Is it the initial route. * @returns {import("./serve.mjs").RoutePlan} */export default function routePlanForContentWithCss(  routeContentWithCss,  headManager,  isInitialRoute,) {  if (typeof routeContentWithCss !== "object" || !routeContentWithCss) {    throw new TypeError(      "Argument 1 `routeContentWithCss` must be an object or promise.",    );  }
  if (!(headManager instanceof HeadManager)) {    throw new TypeError(      "Argument 2 `headManager` must be a `HeadManager` instance.",    );  }
  if (typeof isInitialRoute !== "boolean") {    throw new TypeError("Argument 3 `isInitialRoute` must be a boolean.");  }
  /** @type {Set<import("react").ReactNode>} */  const links = new Set();
  /** @type {(() => void) | null} */  let endPoll = null;
  return {    content: Promise.resolve(routeContentWithCss).then(      async (resolvedRouteContent) => {        if (typeof routeContentWithCss !== "object" || !routeContentWithCss) {          throw new TypeError(            "Function `routePlanForContentWithCss` argument 1 `routeContentWithCss` must resolve an object.",          );        }
        if (!(resolvedRouteContent.css instanceof Set)) {          throw new TypeError("Export `css` must be a `Set` instance.");        }
        for (const href of resolvedRouteContent.css) {          if (typeof href !== "string") {            throw new TypeError("CSS `href` must be a string.");          }
          const link = h(LinkCss, { href });
          links.add(link);          headManager.add(            // Todo: Unopinionated way to name the key.            `2-${href}`,            link,          );        }
        // Skip waiting for CSS loading for the initial route. It doesn’t make        // sense to wait for CSS to load in SSR, but SSR only involves the        // initial route anyway.        if (typeof document !== "undefined" && !isInitialRoute) {          // Await the stylesheets adding to the DOM and loading. Any that are          // already added to the DOM need to be awaited loading, if they          // haven’t loaded yet, but not if it’s initial SSR page load hydration          // time.
          // Poll until all the route CSS dependencies have loaded (regardless          // of success or failure due to 404s, unparsable CSS, etc.) or route          // cleanup (due to abort) happens.          await /** @type {Promise<void>} */ (            new Promise((resolve) => {              endPoll = () => {                endPoll = null;
                clearInterval(interval);
                // Wait for the CSS to apply to the document.                setTimeout(resolve, 50);              };
              const interval = setInterval(() => {                // The wait for the style sheets to load is done when the                // document has every one, ignoring ones who’s loading status                // can’t be checked.                let done = true;
                for (const href of resolvedRouteContent.css) {                  try {                    done = documentHasStyleSheet(href);                  } catch (cause) {                    // This style sheet’s loading status can’t be checked so                    // it’s ignored.                    console.error(                      new Error(                        `Check if the document has stylesheet ${href} failed.`,                        { cause },                      ),                    );                  }                  if (!done) break;                }
                if (done && endPoll) endPoll();              }, 10);            })          );        }
        return resolvedRouteContent.content;      },    ),
    // Shouldn’t run during SSR.    cleanup() {      if (endPoll) endPoll();      for (const link of links) headManager.remove(link);    },  };}
/** * Ruck app route content with CSS dependencies. * @typedef {object} RouteContentWithCss * @prop {import("react").ReactNode} content Content. * @prop {Set<string>} css CSS absolute or relative URLs. */