create-slots
Version:
Bring slots to React components
2 lines • 2.68 kB
JavaScript
import*as n from"react";import*as u from"react";var m=typeof window>"u"?u.useEffect:u.useLayoutEffect,y=e=>{let t=u.createContext(e);return t.displayName="SlotsContext",t},x=e=>typeof e=="string"?e:e.displayName||e.name||"Component",h=["$$typeof","render","displayName","defaultProps"],E=(e,t)=>{if(typeof t=="string")return e;let r=Object.getOwnPropertyNames(t).reduce((o,s)=>(h.includes(s)||(o[s]=t[s]),o),{});return Object.assign(e,r)};import*as l from"react";var d="slots-wrapper",N=new RegExp(`^<${d}>.*</${d}>$`),v=({name:e,forceUpdate:t,children:r})=>{let o=l.useRef(null),s=l.useRef(!1);return m(()=>{var c;if(!s.current&&((c=o.current)==null?void 0:c.innerHTML)){let i=o.current.innerHTML;i&&!N.test(i)&&console.warn(`Unwrapped children found in "${e}", either wrap them in slots or remove`)}s.current=!0,t()},[e]),s.current?l.createElement(l.Fragment,null,r):l.createElement(d,{ref:o},r)};import*as p from"react";var f=p.createContext({rescan:()=>{}}),P=({children:e})=>{let[t,r]=p.useReducer(()=>[],[]),o=p.useMemo(()=>({rescan:r}),[t]);return p.createElement(f.Provider,{value:o},e)};var C=e=>{let t=new Map;return{register(r,o){t.set(r,o)},update(r,o){t.set(r,o),e==null||e(r)},unmount(r){t.delete(r),e==null||e(r)},clear(){t.clear()},has(r){return t.has(r)},get(){return Array.from(t.values())}}};var _=(e,t)=>e.filter(r=>r.type===t),O=(e,t)=>e.find(r=>r.type===t),U=(e,t)=>{for(let r=e.length-1;r>=0;r--)if(e[r].type===t)return e[r]},A=(e,t)=>e.type===t,b=e=>{if(!e)return;let{key:t,ref:r,props:o}=e;return{...o,key:t,ref:r}};var R=y(void 0),$=({children:e})=>e(),w=e=>{let t=0;return()=>`${e}_${t++}`},M=w("s"),K=({children:e,callback:t})=>{let r=n.useReducer(()=>[],[])[1],o=n.useMemo(()=>C(r),[r]);return n.createElement(n.Fragment,null,n.createElement(R.Provider,{value:o},n.createElement(P,null,process.env.NODE_ENV==="production"?e:n.createElement(v,{name:"HostSlots",forceUpdate:r},e))),n.createElement($,null,()=>t(o.get())))},X=(e,t)=>n.createElement(K,{children:e,callback:t}),q=e=>{let t=w(M()),r=n.forwardRef(({$slot_key$:c,...i},S)=>{let a=n.useContext(R);if(!a)return null;let g=n.useContext(f),T=n.createElement(s,{key:c,ref:S,...i});return a.register(c,T),n.useEffect(()=>{a.has(c)&&a.update(c,T)}),m(()=>(a.clear(),g.rescan(),()=>a.unmount(c)),[a]),null}),o=(c,i)=>{if(!n.useContext(R))return e?n.createElement(e,{ref:i,...c}):null;let[a]=n.useState(t);return n.createElement(r,{ref:i,$slot_key$:a,...c})};o.displayName=e?`Slot(${x(e)})`:"Slot";let s=n.forwardRef(o);return e?E(s,e):s};export{K as HostSlots,X as createHost,q as createSlot,U as getLastSlot,O as getSlot,b as getSlotProps,_ as getSlots,A as isSlot};
//# sourceMappingURL=index.js.map