remix-island/dist/index.cjs

utils to render remix into a dom-node instead of the whole document

"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var src_exports = {};
__export(src_exports, {
  createHead: () => createHead,
  removeOldHead: () => removeOldHead,
  renderHeadToString: () => renderHeadToString,
  switchRootComponent: () => switchRootComponent
});
module.exports = __toCommonJS(src_exports);
var import_react = require("react");
var import_react_dom = require("react-dom");
var import_react2 = require("@remix-run/react");
var import_server = require("react-dom/server");
let globalMounted = false;
function createHead(Comp, { id = "remix-island", cleanup = true } = {}) {
  const Head = (props) => {
    const [mounted, setMounted] = (0, import_react.useState)(globalMounted);
    (0, import_react.useEffect)(() => {
      if (cleanup) {
        removeOldHead(Head);
      }
      globalMounted = true;
      setMounted(true);
    }, []);
    if (!mounted && props.__remix_island_render_server) {
      return (0, import_react.createElement)(Comp);
    }
    if (mounted) {
      return (0, import_react_dom.createPortal)((0, import_react.createElement)(Comp), document.head);
    }
    return null;
  };
  Head.displayName = "RemixIslandHead";
  Head.__remix_island_id = id;
  return Head;
}
function renderHeadToString({
  request,
  remixContext,
  Head
}) {
  const head = (0, import_server.renderToString)(
    (0, import_react.createElement)(import_react2.RemixServer, {
      context: switchRootComponent(remixContext, Head),
      url: request.url
    })
  );
  const id = Head.__remix_island_id;
  return `<!--${id}-start-->${head}<!--${id}-end-->`;
}
function switchRootComponent(remixContext, Head) {
  var _a;
  let serverHandoffString = remixContext.serverHandoffString;
  if (serverHandoffString) {
    const serverHandoff = JSON.parse(serverHandoffString);
    (_a = serverHandoff == null ? void 0 : serverHandoff.state) == null ? true : delete _a.errors;
    serverHandoffString = JSON.stringify(serverHandoff);
  }
  const _b = remixContext.routeModules.root, { Layout } = _b, rootModuleWithoutLayout = __objRest(_b, ["Layout"]);
  return __spreadProps(__spreadValues({}, remixContext), {
    serverHandoffString,
    staticHandlerContext: __spreadProps(__spreadValues({}, remixContext.staticHandlerContext), {
      errors: null
      // remove errors from context
    }),
    routeModules: __spreadProps(__spreadValues({}, remixContext.routeModules), {
      root: __spreadProps(__spreadValues({}, rootModuleWithoutLayout), {
        default: () => (0, import_react.createElement)(Head, { __remix_island_render_server: true })
      })
    })
  });
}
function removeOldHead(Head, parent = document.head) {
  let foundOldHeader = false;
  const nodesToRemove = [];
  const id = Head.__remix_island_id;
  for (const node of parent.childNodes) {
    if (!foundOldHeader && node.nodeName !== "#comment") {
      continue;
    }
    if (foundOldHeader && node.nodeName === "#comment" && node.nodeValue === `${id}-end`) {
      nodesToRemove.push(node);
      break;
    }
    if (foundOldHeader || node.nodeName === "#comment" && node.nodeValue === `${id}-start`) {
      foundOldHeader = true;
      nodesToRemove.push(node);
    }
  }
  for (const node of nodesToRemove) {
    node.remove();
  }
}
//# sourceMappingURL=index.cjs.map