UNPKG

@vercel/microfrontends

Version:

Defines configuration and utilities for microfrontends development

3 lines 6.59 kB
"use client"; "use strict";var z=Object.create;var C=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var $=(t,e)=>{for(var r in e)C(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of U(e))!J.call(t,n)&&n!==r&&C(t,n,{get:()=>e[n],enumerable:!(o=B(e,n))||o.enumerable});return t};var x=(t,e,r)=>(r=t!=null?z(X(t)):{},y(e||!t||!t.__esModule?C(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>y(C({},"__esModule",{value:!0}),t);var ee={};$(ee,{Image:()=>Z,Link:()=>k,PrefetchCrossZoneLinks:()=>K,PrefetchCrossZoneLinksContext:()=>E,PrefetchCrossZoneLinksProvider:()=>q,useZoneForHref:()=>A});module.exports=V(ee);var P=require("react"),b=x(require("next/link.js"),1);var d=require("react");var O=require("path-to-regexp"),l=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 l(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((0,O.pathToRegexp)(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 L=null;async function W(){try{let t=await fetch("/.well-known/vercel/microfrontends/client-config");if(t.status!==200)return null;let e=await t.json();return new l(e.config)}catch{return null}}function h(t,{removeFlaggedPathsFromDefault:e}={}){let[r,o]=(0,d.useState)(l.fromEnv(t,{removeFlaggedPaths:e})),[n,i]=(0,d.useState)(!0);return(0,d.useEffect)(()=>{if(process.env.NODE_ENV==="test"&&process.env.MFE_FORCE_CLIENT_CONFIG_FROM_SERVER!=="1"){i(!1);return}let a=l.fromEnv(t);if(!Object.values(a.applications).some(u=>u.routing?.some(m=>m.flag))){i(!1);return}L||(L=W()),L.then(u=>{u&&o(m=>m.isEqual(u)?m:u)}).finally(()=>{i(!1)})},[t,r.applications]),{clientConfig:r,isLoading:n}}var f=require("react"),p=require("react/jsx-runtime"),E=(0,f.createContext)({prefetchHref:()=>{}});function q({children:t}){let[e,r]=(0,f.useState)(new Set),[o,n]=(0,f.useState)(!1);(0,f.useEffect)(()=>{n(typeof navigator<"u"&&(navigator.userAgent.includes("Firefox")||navigator.userAgent.includes("Safari")&&!navigator.userAgent.includes("Chrome")))},[]);let i=(0,f.useCallback)(s=>{e.has(s)||r(new Set(e).add(s))},[e]),a=(0,f.useMemo)(()=>({prefetchHref:i}),[i]);return o?(0,p.jsxs)(E.Provider,{value:a,children:[t,[...e].map(s=>(0,p.jsx)("link",{as:"fetch",href:s,rel:"preload"},s))]}):(0,p.jsx)(p.Fragment,{children:t})}var g=require("react"),R=x(require("next/script.js"),1);var T=require("react/jsx-runtime"),v="data-prefetch",c={anyZone:"[data-zone]",external:'[data-zone="null"]',sameZone:'[data-zone="same"]',prefetch:`[${v}]`},I={and:[{href_matches:"/*"},{selector_matches:c.anyZone},{not:{selector_matches:c.sameZone}},{not:{selector_matches:c.external}}]},G={and:[{href_matches:"/*"},{selector_matches:c.anyZone},{not:{selector_matches:c.sameZone}},{not:{selector_matches:c.external}},{selector_matches:c.prefetch}]};function F(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:F(e.parentElement)}function K(){let{isLoading:t}=h(process.env.NEXT_PUBLIC_MFE_CLIENT_CONFIG),[e,r]=(0,g.useState)([]);return(0,g.useEffect)(()=>{if(t)return;let n=new IntersectionObserver(i=>{i.forEach(a=>{a.isIntersecting&&!a.target.hasAttribute(v)&&F(a.target)&&a.target.setAttribute(v,"true")})},{root:null,rootMargin:"0px",threshold:.1});return e.forEach(i=>n.observe(i)),()=>{n.disconnect()}},[t,e]),(0,g.useEffect)(()=>{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${c.anyZone}:not(${c.prefetch}):not(${c.sameZone}):not(${c.external})`)))});return n.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["href"]}),()=>{n.disconnect()}},[t]),t?null:(0,T.jsx)(R.default,{dangerouslySetInnerHTML:{__html:JSON.stringify({prefetch:[{eagerness:"moderate",where:I},{eagerness:"immediate",where:G}],prerender:[{eagerness:"conservative",where:I}]})},id:"prefetch-zones-links",type:"speculationrules"})}var _=require("react/jsx-runtime"),j=process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;function A(t){let{clientConfig:e,isLoading:r}=h(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?j!==n:!1),isLoading:r}}var k=(0,P.forwardRef)(({children:t,...e},r)=>{let{prefetchHref:o}=(0,P.useContext)(E),{zoneOfHref:n,isDifferentZone:i,isLoading:a}=A(e.href);function s(){e.href&&o(e.href)}if(i&&n!==null){let{prefetch:u,...m}=e;return(0,_.jsx)("a",{...m,"data-zone":n,onFocus:e.prefetch!==!1?s:void 0,onMouseOver:e.prefetch!==!1?s:void 0,children:t})}return(0,_.jsx)(b.default,{...e,"data-zone":n?"same":"null",prefetch:e.prefetch??(a?!1:void 0),ref:r,children:t})});k.displayName="MicrofrontendsLink";var M=require("react"),w=require("next/dist/client/image-component.js"),H=require("next/image.js");var Q="vc-ap";function S({name:t}){if(!t)throw new Error("Name is required to generate an asset prefix");return`${Q}-${t}`}var D=require("react/jsx-runtime"),N=process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION,Y=(t,e)=>()=>`/${t}${e}`,Z=(0,M.forwardRef)(({...t},e)=>{let{clientConfig:r}=h(process.env.NEXT_PUBLIC_MFE_CLIENT_CONFIG),o=N&&!r.applications[N]?.default?S({name:N}):null,{props:{src:n}}=(0,H.getImageProps)(t);return(0,D.jsx)(w.Image,{loader:o?Y(o,n):void 0,...t,ref:e})});Z.displayName="MicrofrontendsImage";0&&(module.exports={Image,Link,PrefetchCrossZoneLinks,PrefetchCrossZoneLinksContext,PrefetchCrossZoneLinksProvider,useZoneForHref}); //# sourceMappingURL=client.cjs.map