riftt 1.0.0 → 1.0.1

package/src/router.js

@@ -1,535 +0,0 @@
-import { gsap } from "gsap";
-import { processModules } from "./modules.js";
-
-function pathToRegex(path) {
-  const keys = [];
-  const regex = path.replace(/:([^/]+)/g, (_, key) => {
-    keys.push(key);
-    return "([^/]+)";
-  });
-  return { regex: new RegExp(`^${regex}$`), keys };
-}
-
-function matchRoute(pathname, routes) {
-  for (const r of routes) {
-    const { regex, keys } = pathToRegex(r.path);
-    const match = pathname.match(regex);
-    if (match) {
-      const params = {};
-      keys.forEach((k, i) => (params[k] = match[i + 1]));
-      return { route: r, params };
-    }
-  }
-  return null;
-}
-
-function findParentRoutes(pathname, routes) {
-  const parents = [];
-  const segments = pathname.split("/").filter(Boolean);
-
-  for (let i = 1; i < segments.length; i++) {
-    const testPath = `/${segments.slice(0, i).join("/")}`;
-
-    for (const route of routes) {
-      const { regex, keys } = pathToRegex(route.path);
-      const match = testPath.match(regex);
-      if (match) {
-        const params = {};
-        keys.forEach((k, idx) => (params[k] = match[idx + 1]));
-        parents.push({ route, params });
-        break;
-      }
-    }
-  }
-
-  return parents;
-}
-
-async function renderServerTemplate(
-  name,
-  props,
-  target,
-  dataset,
-  isInitialLoad = false,
-) {
-  let body = typeof props === "function" ? props({}) : props;
-
-  if (dataset) {
-    body = { ...body, dataset };
-  }
-
-  const html = await fetch(`/templates/${name}`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  }).then((r) => r.text());
-
-  target.innerHTML = html;
-
-  await processModules(target);
-
-  const scripts = target.querySelectorAll("script");
-  scripts.forEach((script) => {
-    const newScript = document.createElement("script");
-    if (script.src) {
-      newScript.src = script.src;
-    } else {
-      newScript.textContent = script.textContent;
-    }
-    script.parentNode.replaceChild(newScript, script);
-  });
-
-  await hydrateNestedTemplates(target, isInitialLoad);
-  await processElementTransitions(target, isInitialLoad);
-}
-
-async function playTransition(elements, transition) {
-  if (!transition) return;
-
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      // `from` is not a valid property, so remove it
-      const gsapVars = { ...transition, from: undefined };
-      gsapVars.onComplete = resolve;
-
-      if (transition.from) {
-        gsap.fromTo(elements, transition.from, gsapVars);
-      } else {
-        gsap.to(elements, gsapVars);
-      }
-    });
-  });
-}
-
-function parseJSON(jsonStr) {
-  try {
-    return JSON.parse(jsonStr);
-  } catch (e) {
-    try {
-      return Function(`"use strict"; return (${jsonStr})`)();
-    } catch (e2) {
-      throw new Error("invalid JSON syntax");
-    }
-  }
-}
-
-async function processElementTransitions(container, isInitialLoad = false) {
-  if (isInitialLoad) return;
-
-  const transitionPromises = [];
-
-  if (container.hasAttribute("r-transition-stagger-in")) {
-    try {
-      const transition = parseJSON(
-        container.getAttribute("r-transition-stagger-in"),
-      );
-      const children = Array.from(container.children);
-      if (children.length > 0) {
-        gsap.set(children, transition.from || {});
-        transitionPromises.push(playTransition(children, transition));
-      }
-    } catch (e) {
-      console.warn("invalid transition data on container stagger element:", e);
-    }
-  }
-
-  // descendants have stagger transitions?
-  const staggerElements = container.querySelectorAll(
-    "[r-transition-stagger-in]",
-  );
-  for (const el of staggerElements) {
-    try {
-      const transition = parseJSON(el.getAttribute("r-transition-stagger-in"));
-      const children = Array.from(el.children);
-      if (children.length > 0) {
-        gsap.set(children, transition.from || {});
-        transitionPromises.push(playTransition(children, transition));
-      }
-    } catch (e) {
-      console.warn("invalid transition data on stagger element:", e);
-    }
-  }
-
-  if (container.hasAttribute("r-transition-in")) {
-    try {
-      const transition = parseJSON(container.getAttribute("r-transition-in"));
-      gsap.set(container, transition.from || {});
-      transitionPromises.push(playTransition(container, transition));
-    } catch (e) {
-      console.warn("invalid transition data on container element:", e);
-    }
-  }
-
-  // descendants have individual transitions?
-  const individualElements = container.querySelectorAll("[r-transition-in]");
-  for (const el of individualElements) {
-    const parent = el.closest("[r-transition-stagger-in]");
-    if (parent && parent !== el) continue;
-
-    try {
-      const transition = parseJSON(el.getAttribute("r-transition-in"));
-      gsap.set(el, transition.from || {});
-      transitionPromises.push(playTransition(el, transition));
-    } catch (e) {
-      console.warn("invalid transition data on element:", e);
-    }
-  }
-
-  Promise.all(transitionPromises);
-}
-
-function captureGlobalTransitions(container) {
-  const globalTransitions = [];
-
-  if (container.hasAttribute("r-transition-stagger-in")) {
-    const transition = parseJSON(
-      container.getAttribute("r-transition-stagger-in"),
-    );
-    const children = Array.from(container.children);
-    if (children.length > 0) {
-      globalTransitions.push({
-        type: "stagger",
-        elements: children,
-        transition,
-      });
-      gsap.set(children, transition.from || {});
-    }
-    container.removeAttribute("r-transition-stagger-in");
-  }
-
-  if (container.hasAttribute("r-transition-in")) {
-    const transition = parseJSON(container.getAttribute("r-transition-in"));
-    globalTransitions.push({
-      type: "individual",
-      elements: container,
-      transition,
-    });
-    gsap.set(container, transition.from || {});
-    container.removeAttribute("r-transition-in");
-  }
-
-  return globalTransitions;
-}
-
-function runGlobalTransitions(globalTransitions) {
-  for (const { elements, transition } of globalTransitions) {
-    playTransition(elements, transition);
-  }
-}
-
-async function hydrateNestedTemplates(root, isInitialLoad = false) {
-  const els = root.querySelectorAll("[r-tpl]");
-  for (const el of els) {
-    const name = el.getAttribute("r-tpl");
-    const payload = el.getAttribute("r-tpl-props");
-    const dataset = el.getAttribute("r-dataset");
-
-    let data = payload ? parseJSON(payload) : {};
-
-    if (dataset) {
-      data = { ...data, dataset };
-    }
-
-    const html = await fetch(`/templates/${name}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    }).then((r) => r.text());
-
-    el.innerHTML = html;
-
-    await processModules(el);
-    await hydrateNestedTemplates(el, isInitialLoad);
-    await processElementTransitions(el, isInitialLoad);
-  }
-}
-
-function parseQuery(search) {
-  const params = {};
-  const urlParams = new URLSearchParams(search);
-  for (const [key, value] of urlParams) {
-    params[key] = value;
-  }
-  return params;
-}
-
-export function createRouter(routes) {
-  let currentPath = null;
-
-  async function navigate({
-    path,
-    initial = false,
-    linkProps = null,
-    linkTarget = null,
-    linkDataset = null,
-  }) {
-    const [pathname, search = ""] = path.split("?");
-    const matched = matchRoute(pathname, routes);
-    if (!matched) return console.error("rift: route not found:", pathname);
-
-    const { route, params } = matched;
-    const query = parseQuery(search);
-
-    if (initial) document.body.classList.add("loading");
-
-    let renders;
-
-    if (route.renders) {
-      renders = route.renders;
-    } else {
-      const parentRoutes = findParentRoutes(path, routes);
-      console.log("parentRoutes for", path, ":", parentRoutes);
-      const currentRender = {
-        template: route.template,
-        props: route.props,
-        target: route.target,
-      };
-
-      const filteredParents = parentRoutes.filter(
-        ({ route: parentRoute }) =>
-          !currentPath ||
-          (!currentPath.startsWith(`${parentRoute.path}/`) &&
-            currentPath !== parentRoute.path),
-      );
-
-      renders = [
-        ...filteredParents.map(
-          ({ route: parentRoute, params: parentParams }) => ({
-            template: parentRoute.template,
-            props: parentRoute.props,
-            target: parentRoute.target,
-            dataset: parentRoute.dataset,
-            params: parentParams,
-            skipTransition: false,
-          }),
-        ),
-        ...parentRoutes
-          .filter(({ route: parentRoute }) =>
-            currentPath?.startsWith(`${parentRoute.path}/`),
-          )
-          .map(({ route: parentRoute, params: parentParams }) => ({
-            template: parentRoute.template,
-            props: parentRoute.props,
-            target: parentRoute.target,
-            dataset: parentRoute.dataset,
-            params: parentParams,
-            skipTransition: true,
-          })),
-        { ...currentRender, skipTransition: false },
-      ];
-      console.log("renders:", renders);
-    }
-
-    for (const render of renders) {
-      const renderParams = render.params || params;
-      let props =
-        typeof render.props === "function"
-          ? render.props(renderParams, query)
-          : render.props;
-
-      if (linkProps) props = { ...props, ...linkProps };
-
-      const target =
-        (linkTarget && document.querySelector(linkTarget)) ||
-        (render.target && document.querySelector(render.target)) ||
-        document.getElementById("main");
-
-      const dataset = linkDataset || render.dataset || route.dataset;
-
-      if (target.id !== "main") {
-        // const mainContainer = document.getElementById("main");
-        // gsap.killTweensOf(mainContainer);
-        // gsap.set(mainContainer, { clearProps: "all" });
-      }
-
-      gsap.killTweensOf(target);
-      gsap.set(target, { clearProps: "all" });
-
-      target.classList.add("loading");
-
-      await renderServerTemplate(
-        render.template,
-        props,
-        target,
-        dataset,
-        initial || render.skipTransition,
-      );
-
-      target.classList.remove("loading");
-    }
-
-    if (initial) document.body.classList.remove("loading");
-
-    currentPath = path;
-    initial = false;
-    window.dispatchEvent(new CustomEvent("navigate"));
-  }
-
-  function init() {
-    document.addEventListener("click", (e) => {
-      const link = e.target.closest("[r-link]");
-      if (!link) {
-        return;
-      }
-      e.preventDefault();
-      const path = link.getAttribute("href");
-      const linkDataset = link.getAttribute("r-dataset");
-      const linkDatasetProps = link.getAttribute("r-dataset-props");
-      const linkTarget = link.getAttribute("r-target");
-
-      history.pushState({}, "", path);
-      window.dispatchEvent(new CustomEvent("navigate"));
-      navigate({
-        path,
-        linkProps: linkDatasetProps ? parseJSON(linkDatasetProps) : null,
-        linkDataset,
-        linkTarget,
-      });
-    });
-
-    window.addEventListener("popstate", () =>
-      navigate({ path: location.pathname + location.search }),
-    );
-  }
-
-  return {
-    navigate,
-    init,
-    hydrateNestedTemplates,
-    processElementTransitions,
-    captureGlobalTransitions,
-    runGlobalTransitions,
-    refresh: async (options = {}) => {
-      const doRefresh = async () => {
-        const { path = location.pathname + location.search, parents = false } =
-          options;
-        const [pathname, search = ""] = path.split("?");
-        const matched = matchRoute(pathname, routes);
-        if (!matched) return console.error("rift: route not found:", pathname);
-
-        const { route, params } = matched;
-        const query = parseQuery(search);
-
-        if (parents) {
-          const parentRoutes = findParentRoutes(path, routes);
-          const allRoutes = [...parentRoutes, { route, params }];
-
-          const usedTargets = new Set();
-          for (let i = allRoutes.length - 1; i >= 0; i--) {
-            const currentRoute = allRoutes[i].route;
-            const target = currentRoute.target || "#main";
-
-            if (!usedTargets.has(target)) {
-              usedTargets.add(target);
-              if (i < allRoutes.length - 1) {
-                const { route: parentRoute, params: parentParams } =
-                  allRoutes[i];
-                const targetEl =
-                  document.querySelector(target) ||
-                  document.getElementById("main");
-                const props =
-                  typeof parentRoute.props === "function"
-                    ? parentRoute.props(parentParams, query)
-                    : parentRoute.props;
-                await renderServerTemplate(
-                  parentRoute.template,
-                  props,
-                  targetEl,
-                  parentRoute.dataset,
-                  true,
-                );
-              }
-            }
-          }
-        }
-
-        const target =
-          document.querySelector(route.target) ||
-          document.getElementById("main");
-        const props =
-          typeof route.props === "function"
-            ? route.props(params, query)
-            : route.props;
-        await renderServerTemplate(
-          route.template,
-          props,
-          target,
-          route.dataset,
-          true,
-        );
-      };
-
-      if (document.startViewTransition) {
-        document.startViewTransition(doRefresh);
-      } else {
-        await doRefresh();
-      }
-    },
-    refreshTemplate: async (templateName, props = {}) => {
-      const refreshTasks = [];
-
-      // find all r-tpl elements with matching name
-      const elements = document.querySelectorAll(`[r-tpl="${templateName}"]`);
-      elements.forEach((element) => {
-        refreshTasks.push(async () => {
-          const response = await fetch(`/templates/${templateName}`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(props),
-          });
-          if (!response.ok)
-            return console.error("failed to fetch template:", templateName);
-          const html = await response.text();
-          element.innerHTML = html;
-          await processModules(element);
-        });
-      });
-
-      // find any routes with matching template name
-      const matchingRoutes = routes.filter(
-        (route) => route.template === templateName,
-      );
-      matchingRoutes.forEach((route) => {
-        const target =
-          document.querySelector(route.target) ||
-          document.getElementById("main");
-        if (target) {
-          refreshTasks.push(async () => {
-            const currentPath = location.pathname + location.search;
-            const matched = matchRoute(currentPath, [route]);
-            if (matched) {
-              const { params } = matched;
-              const [, search = ""] = currentPath.split("?");
-              const query = parseQuery(search);
-              const props =
-                typeof route.props === "function"
-                  ? route.props(params, query)
-                  : route.props;
-              await renderServerTemplate(
-                route.template,
-                props,
-                target,
-                route.dataset,
-                true,
-              );
-            }
-          });
-        }
-      });
-
-      if (refreshTasks.length === 0) {
-        return console.error("no templates found with name:", templateName);
-      }
-
-      const doRefresh = async () => {
-        await Promise.all(refreshTasks.map((task) => task()));
-      };
-
-      if (document.startViewTransition) {
-        document.startViewTransition(doRefresh);
-      } else {
-        await doRefresh();
-      }
-    },
-  };
-}