@vercel/microfrontends
Version:
Defines configuration and utilities for microfrontends development
3 lines • 5.8 kB
JavaScript
"use client";
import{forwardRef as Z,useContext as D}from"react";import z from"next/link.js";import{useState as C,useEffect as O}from"react";import{pathToRegexp as x}from"path-to-regexp";var c=class{constructor(e,r){this.pathCache={};if(this.serialized=e,r?.removeFlaggedPaths)for(let o of Object.values(e.applications))o.routing&&(o.routing=o.routing.filter(n=>!n.flag));this.applications=e.applications}static fromEnv(e,r){if(!e)throw new Error("No microfrontends configuration found");return new c(JSON.parse(e),r)}isEqual(e){return JSON.stringify(this.applications)===JSON.stringify(e.applications)}getApplicationNameForPath(e){if(!e.startsWith("/"))throw new Error("Path must start with a /");if(this.pathCache[e])return this.pathCache[e];let r=new URL(e,"https://example.com").pathname;for(let[n,i]of Object.entries(this.applications))if(i.routing){for(let a of i.routing)for(let s of a.paths)if(x(s).test(r))return this.pathCache[e]=n,n}let o=Object.entries(this.applications).find(([,n])=>n.default);return o?(this.pathCache[e]=o[0],o[0]):null}serialize(){return this.serialized}};var m=null;async function I(){try{let t=await fetch("/.well-known/vercel/microfrontends/client-config");if(t.status!==200)return null;let e=await t.json();return new c(e.config)}catch{return null}}function p(t,{removeFlaggedPathsFromDefault:e}={}){let[r,o]=C(c.fromEnv(t,{removeFlaggedPaths:e})),[n,i]=C(!0);return O(()=>{if(process.env.NODE_ENV==="test"&&process.env.MFE_FORCE_CLIENT_CONFIG_FROM_SERVER!=="1"){i(!1);return}let a=c.fromEnv(t);if(!Object.values(a.applications).some(l=>l.routing?.some(u=>u.flag))){i(!1);return}m||(m=I()),m.then(l=>{l&&o(u=>u.isEqual(l)?u:l)}).finally(()=>{i(!1)})},[t,r.applications]),{clientConfig:r,isLoading:n}}import{createContext as R,useCallback as F,useEffect as T,useMemo as b,useState as E}from"react";import{Fragment as A,jsx as P,jsxs as k}from"react/jsx-runtime";var h=R({prefetchHref:()=>{}});function oe({children:t}){let[e,r]=E(new Set),[o,n]=E(!1);T(()=>{n(typeof navigator<"u"&&(navigator.userAgent.includes("Firefox")||navigator.userAgent.includes("Safari")&&!navigator.userAgent.includes("Chrome")))},[]);let i=F(s=>{e.has(s)||r(new Set(e).add(s))},[e]),a=b(()=>({prefetchHref:i}),[i]);return o?k(h.Provider,{value:a,children:[t,[...e].map(s=>P("link",{as:"fetch",href:s,rel:"preload"},s))]}):P(A,{children:t})}import{useEffect as L,useState as S}from"react";import M from"next/script.js";import{jsx as H}from"react/jsx-runtime";var d="data-prefetch",f={anyZone:"[data-zone]",external:'[data-zone="null"]',sameZone:'[data-zone="same"]',prefetch:`[${d}]`},v={and:[{href_matches:"/*"},{selector_matches:f.anyZone},{not:{selector_matches:f.sameZone}},{not:{selector_matches:f.external}}]},w={and:[{href_matches:"/*"},{selector_matches:f.anyZone},{not:{selector_matches:f.sameZone}},{not:{selector_matches:f.external}},{selector_matches:f.prefetch}]};function _(t){if(!t)return!0;if("checkVisibility"in t)return t.checkVisibility({opacityProperty:!0});let e=t,r=window.getComputedStyle(e);return r.display==="none"||r.visibility==="hidden"||r.opacity==="0"?!1:_(e.parentElement)}function le(){let{isLoading:t}=p(process.env.NEXT_PUBLIC_MFE_CLIENT_CONFIG),[e,r]=S([]);return L(()=>{if(t)return;let n=new IntersectionObserver(i=>{i.forEach(a=>{a.isIntersecting&&!a.target.hasAttribute(d)&&_(a.target)&&a.target.setAttribute(d,"true")})},{root:null,rootMargin:"0px",threshold:.1});return e.forEach(i=>n.observe(i)),()=>{n.disconnect()}},[t,e]),L(()=>{if(t)return;let n=new MutationObserver(i=>{i.some(s=>s.type==="childList"&&s.addedNodes.length>0||s.type==="attributes"&&s.attributeName==="href")&&r(Array.from(document.querySelectorAll(`a${f.anyZone}:not(${f.prefetch}):not(${f.sameZone}):not(${f.external})`)))});return n.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["href"]}),()=>{n.disconnect()}},[t]),t?null:H(M,{dangerouslySetInnerHTML:{__html:JSON.stringify({prefetch:[{eagerness:"moderate",where:v},{eagerness:"immediate",where:w}],prerender:[{eagerness:"conservative",where:v}]})},id:"prefetch-zones-links",type:"speculationrules"})}import{jsx as N}from"react/jsx-runtime";var B=process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;function U(t){let{clientConfig:e,isLoading:r}=p(process.env.NEXT_PUBLIC_MFE_CLIENT_CONFIG,{removeFlaggedPathsFromDefault:!0}),o=typeof t=="string"&&t.startsWith("/"),n=o?e.getApplicationNameForPath(t):null;return typeof t=="string"&&!t.length?{zoneOfHref:null,isDifferentZone:!1,isLoading:!1}:{zoneOfHref:n,isDifferentZone:!o||(n?B!==n:!1),isLoading:r}}var X=Z(({children:t,...e},r)=>{let{prefetchHref:o}=D(h),{zoneOfHref:n,isDifferentZone:i,isLoading:a}=U(e.href);function s(){e.href&&o(e.href)}if(i&&n!==null){let{prefetch:l,...u}=e;return N("a",{...u,"data-zone":n,onFocus:e.prefetch!==!1?s:void 0,onMouseOver:e.prefetch!==!1?s:void 0,children:t})}return N(z,{...e,"data-zone":n?"same":"null",prefetch:e.prefetch??(a?!1:void 0),ref:r,children:t})});X.displayName="MicrofrontendsLink";import{forwardRef as $}from"react";import{Image as V}from"next/dist/client/image-component.js";import{getImageProps as W}from"next/image.js";var J="vc-ap";function y({name:t}){if(!t)throw new Error("Name is required to generate an asset prefix");return`${J}-${t}`}import{jsx as K}from"react/jsx-runtime";var g=process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION,q=(t,e)=>()=>`/${t}${e}`,G=$(({...t},e)=>{let{clientConfig:r}=p(process.env.NEXT_PUBLIC_MFE_CLIENT_CONFIG),o=g&&!r.applications[g]?.default?y({name:g}):null,{props:{src:n}}=W(t);return K(V,{loader:o?q(o,n):void 0,...t,ref:e})});G.displayName="MicrofrontendsImage";export{G as Image,X as Link,le as PrefetchCrossZoneLinks,h as PrefetchCrossZoneLinksContext,oe as PrefetchCrossZoneLinksProvider,U as useZoneForHref};
//# sourceMappingURL=client.js.map