one/dist/cjs/router/conditionalSlotPathname.test.cjs

One is a new React Framework that makes Vite serve both native and web.

var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
  value: mod,
  enumerable: true
}) : target, mod));
var import_react = __toESM(require("react"), 1);
var import_react_test_renderer = __toESM(require("react-test-renderer"), 1);
var import_vitest = require("vitest");
var import_hooks = require("../hooks.cjs");
var import_Root = require("../Root.cjs");
var import_Navigator = require("../views/Navigator.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
globalThis.IS_REACT_ACT_ENVIRONMENT = true;
globalThis.requestAnimationFrame ??= cb => setTimeout(() => cb(0), 0);
globalThis.cancelAnimationFrame ??= id => clearTimeout(id);
const routerRoot = "app";
function makeRoutes(modules) {
  globalThis["__vxrnVersion"] = (globalThis["__vxrnVersion"] ?? 0) + 1;
  const routes = {};
  for (const [file, module2] of Object.entries(modules)) {
    routes[`/${routerRoot}/${file}`] = module2;
  }
  return routes;
}
const slotLayout = {
  default: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Navigator.Slot, {})
};
const leaf = label => ({
  default: () => label
});
function routeTreeWithGate(gate) {
  const Gate = gate;
  return makeRoutes({
    "_layout.tsx": slotLayout,
    "(app)/_layout.tsx": {
      default: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(Gate, {
        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Navigator.Slot, {})
      })
    },
    "(app)/index.tsx": leaf("app-index"),
    "(app)/project/_layout.tsx": slotLayout,
    "(app)/project/[projectId]/_layout.tsx": slotLayout,
    "(app)/project/[projectId]/[sessionId]/_layout.tsx": slotLayout,
    "(app)/project/[projectId]/[sessionId]/index.tsx": leaf("session"),
    "(site)/_layout.tsx": slotLayout,
    "(site)/pricing.tsx": leaf("pricing")
  });
}
function renderAt(path, routes) {
  let renderer;
  (0, import_react_test_renderer.act)(() => {
    renderer = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Root.Root, {
      path,
      routes,
      routerRoot,
      isClient: false
    }));
  });
  return renderer;
}
function bodyText(renderer) {
  const collect = node => typeof node === "string" ? node : Array.isArray(node) ? node.map(collect).join("") : node ? collect(node.children ?? []) : "";
  return collect(renderer.toJSON());
}
(0, import_vitest.describe)("a layout that renders something other than its <Slot />", () => {
  (0, import_vitest.it)("does not move the pathname while the URL stands still", () => {
    const pathnames = [];
    let setBlocked;
    function Probe() {
      const pathname = (0, import_hooks.usePathname)();
      if (pathnames[pathnames.length - 1] !== pathname) pathnames.push(pathname);
      return null;
    }
    function Gate({
      children
    }) {
      const [blocked, set] = import_react.default.useState(true);
      setBlocked = set;
      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Probe, {}), blocked ? "placeholder" : children]
      });
    }
    const renderer = renderAt("/project/p1/main", routeTreeWithGate(Gate));
    (0, import_vitest.expect)(bodyText(renderer)).toBe("placeholder");
    (0, import_react_test_renderer.act)(() => setBlocked(false));
    (0, import_vitest.expect)(bodyText(renderer)).toBe("session");
    (0, import_react_test_renderer.act)(() => setBlocked(true));
    (0, import_vitest.expect)(bodyText(renderer)).toBe("placeholder");
    (0, import_react_test_renderer.act)(() => setBlocked(false));
    (0, import_vitest.expect)(pathnames).toEqual(["/project/p1/main"]);
  });
  (0, import_vitest.it)("settles when the gate itself reads the pathname", async () => {
    let renders = 0;
    let requestBlock;
    function Gate({
      children
    }) {
      const pathname = (0, import_hooks.usePathname)();
      const [blockRequested, setBlockRequested] = import_react.default.useState(false);
      requestBlock = () => setBlockRequested(true);
      renders++;
      if (renders > 100) {
        throw new Error(`gate rendered ${renders} times without settling`);
      }
      const blocked = blockRequested && pathname.startsWith("/project/");
      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
        children: blocked ? "blocked" : children
      });
    }
    const renderer = renderAt("/project/p1/main", routeTreeWithGate(Gate));
    await (0, import_react_test_renderer.act)(async () => {});
    (0, import_vitest.expect)(bodyText(renderer)).toBe("session");
    await (0, import_react_test_renderer.act)(async () => requestBlock());
    await (0, import_react_test_renderer.act)(async () => {});
    (0, import_vitest.expect)(bodyText(renderer)).toBe("blocked");
    (0, import_vitest.expect)(renders).toBeLessThan(20);
  });
});