@django-bridge/react 0.3.2 → 0.4.0-rc.7

package/dist/index.d.ts

@@ -1,43 +1,6 @@
-import React, { ReactNode, ReactElement, FunctionComponent, Context } from 'react';
-import Telepath from 'telepath-unpack';
-
-type MessageLevel = "info" | "success" | "warning" | "error";
-interface TextMessage {
-    level: MessageLevel;
-    text: string;
-}
-interface HTMLMessage {
-    level: MessageLevel;
-    html: string;
-}
-type Message = TextMessage | HTMLMessage;
-interface ReloadResponse {
-    status: "reload";
-}
-interface RedirectResponse {
-    status: "redirect";
-    path: string;
-}
-interface RenderResponse {
-    status: "render";
-    overlay: boolean;
-    title: string;
-    view: string;
-    props: Record<string, unknown>;
-    context: Record<string, unknown>;
-    messages: Message[];
-}
-interface CloseOverlayResponse {
-    status: "close-overlay";
-    messages: Message[];
-}
-interface ServerErrorResponse {
-    status: "server-error";
-}
-interface NetworkErrorResponse {
-    status: "network-error";
-}
-type DjangoBridgeResponse = ReloadResponse | RedirectResponse | RenderResponse | CloseOverlayResponse | ServerErrorResponse | NetworkErrorResponse;
+import React, { ReactNode, ReactElement, Context } from 'react';
+import { Message, Config as Config$1, Frame, DjangoBridgeResponse } from '@django-bridge/common';
+export { Frame, Message, Metadata, DjangoBridgeResponse as Response } from '@django-bridge/common';
 
 interface NavigateOptions {
     pushState?: boolean;
@@ -84,17 +47,10 @@ declare const Link: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<H
     skipDirtyFormCheck?: boolean;
 } & React.RefAttributes<HTMLAnchorElement>>;
 
-declare class Config {
-    views: Map<string, FunctionComponent>;
+declare class Config extends Config$1 {
     contextProviders: Map<string, Context<unknown>>;
-    telepathRegistry: Telepath;
     constructor();
-    addView: <P>(name: string, component: FunctionComponent<P>) => Config;
     addContextProvider: <C>(name: string, context: Context<C>) => Config;
-    addAdapter: <Cls>(name: string, ctor: {
-        new (...args: any[]): Cls;
-    }) => Config;
-    unpack: (data: Record<string, unknown>) => Record<string, unknown>;
 }
 
 interface FormProps extends React.HTMLProps<HTMLFormElement> {
@@ -103,6 +59,12 @@ interface FormProps extends React.HTMLProps<HTMLFormElement> {
 }
 declare function Form({ children, onSubmit: callerOnSubmit, isDirty: isInitiallyDirty, disableDirtyCheck, ...props }: FormProps): ReactElement;
 
+interface RenderFrameProps {
+    config: Config;
+    frame: Frame;
+}
+declare function RenderFrame({ config, frame }: RenderFrameProps): ReactElement;
+
 interface DirtyForm {
     isDirty: boolean;
     requestUnload: () => Promise<unknown>;
@@ -115,15 +77,6 @@ interface DirtyForm {
 declare const DirtyFormContext: React.Context<DirtyForm>;
 declare function DirtyFormMarker(): React.ReactElement;
 
-interface Frame<Props = Record<string, unknown>> {
-    id: number;
-    path: string;
-    title: string;
-    view: string;
-    props: Props;
-    context: Record<string, unknown>;
-    shouldReloadCallback?: (newPath: string, newProps: Props) => boolean;
-}
 interface NavigationController {
     parent: NavigationController | null;
     currentFrame: Frame;
@@ -141,4 +94,4 @@ interface AppProps {
 }
 declare function App({ config, initialResponse }: AppProps): ReactElement;
 
-export { App, type AppProps, BuildLinkElement, Config, type DirtyForm, DirtyFormContext, DirtyFormMarker, Form, FormSubmissionStatus, FormWidgetChangeNotificationContext, type Frame, Link, type Message, MessagesContext, type Navigation, NavigationContext, type NavigationController, OverlayContext, type DjangoBridgeResponse as Response, buildLinkElement };
+export { App, type AppProps, BuildLinkElement, Config, type DirtyForm, DirtyFormContext, DirtyFormMarker, Form, FormSubmissionStatus, FormWidgetChangeNotificationContext, Link, MessagesContext, type Navigation, NavigationContext, type NavigationController, OverlayContext, RenderFrame, buildLinkElement };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var fe=Object.create;var X=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var ye=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var xe=(e,o)=>{for(var t in o)X(e,t,{get:o[t],enumerable:!0})},ce=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of he(o))!Re.call(e,n)&&n!==t&&X(e,n,{get:()=>o[n],enumerable:!(s=Ce(o,n))||s.enumerable});return e};var k=(e,o,t)=>(t=e!=null?fe(ye(e)):{},ce(o||!e||!e.__esModule?X(t,"default",{value:e,enumerable:!0}):t,e)),we=e=>ce(X({},"__esModule",{value:!0}),e);var ke={};xe(ke,{App:()=>Fe,BuildLinkElement:()=>te,Config:()=>A,DirtyFormContext:()=>b,DirtyFormMarker:()=>V,Form:()=>oe,FormSubmissionStatus:()=>$,FormWidgetChangeNotificationContext:()=>Y,Link:()=>ue,MessagesContext:()=>B,NavigationContext:()=>D,OverlayContext:()=>G,buildLinkElement:()=>ee});module.exports=we(ke);var F=k(require("react"));var _=k(require("react"));var x=k(require("react")),U=require("react/jsx-runtime"),Q=x.default.createContext(()=>{}),b=x.default.createContext({isDirty:!1,requestUnload:()=>Promise.resolve(),unloadRequested:!1,unloadBlocked:!1,confirmUnload:()=>{},cancelUnload:()=>{},unloadConfirmed:!1});function Z({handleBrowserUnload:e=!1,children:o}){let[t,s]=x.default.useState(!1),[n,a]=x.default.useState({cb:()=>{}}),[p,g]=x.default.useState(!1),[c,v]=x.default.useState(!1),d=x.default.useRef(null),h=()=>d.current&&!!d.current.querySelector("div.dirty-form-marker")||!1;x.default.useEffect(()=>{if(e&&c){let m="This page has unsaved changes.",l=R=>h()?(R.returnValue=m,m):"";return window.addEventListener("beforeunload",l),()=>{window.removeEventListener("beforeunload",l)}}return()=>{}},[e,c]);let y=x.default.useContext(Q),u=x.default.useCallback(()=>{v(h()),y()},[y]),i=x.default.useMemo(()=>({isDirty:c,requestUnload:()=>c&&h()?(s(!0),new Promise(m=>{a({cb:m})})):Promise.resolve(),unloadRequested:t,unloadBlocked:c&&t,confirmUnload:()=>{t&&(g(!0),n.cb(),s(!1),a({cb:()=>{}}))},cancelUnload:()=>{t&&(s(!1),a({cb:()=>{}}))},unloadConfirmed:p}),[c,n,p,t]);return(0,U.jsx)("div",{ref:d,children:(0,U.jsx)(Q.Provider,{value:u,children:(0,U.jsx)(b.Provider,{value:i,children:o})})})}function V(){let e=x.default.useContext(Q);return x.default.useEffect(e),(0,U.jsx)("div",{className:"dirty-form-marker",style:{display:"none"}})}var O=k(require("react")),G=O.default.createContext({overlay:!1,closeRequested:!1,requestClose:()=>{console.error("OverlayContext.requestClose() called from outside an overlay")},onCloseCompleted:()=>{console.error("OverlayContext.onCloseCompleted() called from outside an overlay")}}),D=O.default.createContext({frameId:0,path:"/",props:{},context:{},navigate:()=>(console.error("navigate() called from outside a Django Bridge Browser"),Promise.resolve()),replacePath:()=>{console.error("replacePath() called from outside a Django Bridge Browser")},submitForm:()=>(console.error("submitForm() called from outside a Django Bridge Browser"),Promise.resolve()),openOverlay:()=>{throw console.error("openOverlay() called from outside a Django Bridge Browser"),new Error("Modal cannot be opened here")},refreshProps:()=>(console.error("refreshProps() called from outside a Django Bridge Browser"),Promise.resolve())}),Y=O.default.createContext(()=>{}),$=O.default.createContext(!1),B=O.default.createContext({messages:[],pushMessage:()=>{}});var E=require("react/jsx-runtime");function Pe({config:e,navigationController:o,openOverlay:t}){let{currentFrame:s,navigate:n,replacePath:a,submitForm:p,refreshProps:g}=o,{isDirty:c,requestUnload:v,cancelUnload:d}=_.default.useContext(b),h=_.default.useMemo(()=>({frameId:s.id,path:s.path,props:s.props,context:s.context,navigate:(i,m={})=>!c||m.skipDirtyFormCheck===!0?(m.skipDirtyFormCheck===!0&&d(),n(i,m.pushState)):v().then(()=>n(i,m.pushState)),replacePath:a,submitForm:p,openOverlay:t,refreshProps:g}),[s,a,p,t,c,v,d,n,g]),y=e.views.get(s.view);if(!y)return(0,E.jsxs)("p",{children:["Unknown view '",s.view,"'"]});let u=(0,E.jsx)(y,{...s.props});return e.contextProviders.forEach((i,m)=>{u=(0,E.jsx)(i.Provider,{value:s.context[m],children:u})}),(0,E.jsx)(D.Provider,{value:h,children:(0,E.jsx)("div",{children:u},s.id)})}var J=Pe;async function q(e,o){let t,s={"X-Requested-With":"DjangoBridge"};o&&(s["X-DjangoBridge-Overlay"]="true");try{t=await fetch(e,{headers:s})}catch{return{status:"network-error"}}return t.status===500?{status:"server-error"}:t.headers.get("X-DjangoBridge-Status")?t.json():{status:"reload"}}async function de(e,o,t){let s,n={"X-Requested-With":"DjangoBridge"};t&&(n["X-DjangoBridge-Overlay"]="true");try{s=await fetch(e,{method:"post",headers:n,body:o})}catch{return{status:"network-error"}}return s.status===500?{status:"server-error"}:s.headers.get("X-DjangoBridge-Status")?s.json():{status:"reload"}}var C=require("react");var z=1;function K(e,o,t,s,n={}){z+=1;let[a,p]=(0,C.useState)({id:z,path:s,title:"Loading",view:"loading",props:{},context:{}}),g=(0,C.useCallback)((r,f,w,P,M,N,H=!0,ge=!0)=>{let ne=a.id,se=w!==a.view||ge;if(se&&(z+=1,ne=z),!e&&(document.title=f,H)){let ie=0,ve=window.scrollY,le=window.history?.state;le?.prevPath===r&&(ie=le.prevScrollPosition??0),window.history.pushState({prevPath:window.location.pathname,prevScrollPosition:ve},"",r),window.scrollTo(0,ie)}let ae={id:ne,path:r,title:f,view:w,props:P,context:M};p(ae),n.onNavigation&&n.onNavigation(ae,se,N)},[n,a.id,a.view,e]),[c,v]=(0,C.useState)(null),d=(0,C.useCallback)((r,f,w=!0,P=!1)=>{if(r.status==="reload")if(!e)window.location.href=f;else return e.handleResponse(r,f);else{if(r.status==="redirect")return v(r.path),Promise.resolve();if(r.status==="render"){if(e&&!r.overlay)return e.handleResponse(r,f);let M=o(r.props),N=o(r.context),H=!P;H&&r.view===a.view&&a.shouldReloadCallback&&(H=a.shouldReloadCallback(f,M)),g(f,r.title,r.view,M,N,r.messages,w,H)}else if(r.status==="close-overlay")n.onOverlayClose&&n.onOverlayClose(r.messages);else{if(r.status==="server-error")return n.onServerError&&n.onServerError("server"),Promise.reject();if(r.status==="network-error")return n.onServerError&&n.onServerError("network"),Promise.reject()}}return Promise.resolve()},[n,a,e,g,o]),h=(0,C.useRef)(1),y=(0,C.useRef)(1),u=(0,C.useCallback)(async(r,f,w,P=!1)=>{h.current+=1;let M=h.current,N=await r();M<y.current||(y.current=M,N!==null&&await d(N,f,w,P))},[d]),i=(0,C.useCallback)((r,f=!0)=>{let w=r;if(!r.startsWith("/")){let P=new URL(r);if(P.origin!==window.location.origin)return window.location.href=r,Promise.resolve();w=P.pathname+P.search}return u(()=>q(w,!!e),w,f)},[u,e]),m=(0,C.useCallback)((r,f)=>{r===a.id&&(a.path=f,e||history.replaceState({},"",a.path))},[a,e]),l=(0,C.useCallback)((r,f)=>u(()=>de(r,f,!!e),r,!0),[u,e]),R=(0,C.useCallback)(()=>u(()=>q(a.path,!!e),a.path,!1,!0),[a.path,u,e]);return(0,C.useEffect)(()=>{d(t,s,!1)},[]),(0,C.useEffect)(()=>{c&&(v(null),i(c))},[i,c]),{parent:e,currentFrame:a,isLoading:a.view==="loading",handleResponse:d,navigate:i,replacePath:m,submitForm:l,refreshProps:R}}var I=k(require("react"));var me=require("react/jsx-runtime");function ee({children:e,href:o,skipDirtyFormCheck:t=!1,...s},{navigate:n},a){return(0,me.jsx)("a",{onClick:g=>{o&&(g.preventDefault(),n(o,{skipDirtyFormCheck:t}))},href:o||"#",ref:a,...s,children:e})}var te=I.default.createContext(ee),be=I.default.forwardRef((e,o)=>{let t=I.default.useContext(D);return I.default.useContext(te)(e,t,o)}),ue=be;var pe=k(require("telepath-unpack")),A=class{views;contextProviders;telepathRegistry;constructor(){this.views=new Map,this.contextProviders=new Map,this.telepathRegistry=new pe.default,this.addAdapter("Date",Date)}addView=(o,t)=>(this.views.set(o,t),this);addContextProvider=(o,t)=>(this.contextProviders.set(o,t),this);addAdapter=(o,t)=>(this.telepathRegistry.register(o,t),this);unpack=o=>this.telepathRegistry.unpack(o)};var L=k(require("react"));var j=require("react/jsx-runtime");function oe({children:e,onSubmit:o,isDirty:t=!1,disableDirtyCheck:s=!1,...n}){let{submitForm:a,navigate:p}=L.default.useContext(D),[g,c]=L.default.useState(!1),[v,d]=L.default.useState(t),{cancelUnload:h}=L.default.useContext(b),y=i=>{if(v&&h(),!(o&&(o(i),i.defaultPrevented))&&i.target instanceof HTMLFormElement){if(g){i.preventDefault();return}let m=new FormData(i.target);if(i.nativeEvent instanceof SubmitEvent&&i.nativeEvent.submitter){let{submitter:l}=i.nativeEvent;(l instanceof HTMLButtonElement||l instanceof HTMLInputElement)&&l.name&&l.value&&m.set(l.name,l.value)}if(i.target.method==="post")i.preventDefault(),c(!0),a(i.target.action,m).catch(()=>c(!1));else if(i.target.method==="get"){i.preventDefault();let l=Array.from(m.entries()).map(r=>`${encodeURIComponent(r[0])}=${encodeURIComponent(r[1])}`).join("&"),R=i.target.action+(i.target.action.indexOf("?")===-1?"?":"&")+l;c(!0),p(R).catch(()=>c(!1))}}},u=L.default.useCallback(()=>{d(!0)},[]);return(0,j.jsxs)("form",{onSubmit:y,...n,children:[v&&!s&&(0,j.jsx)(V,{}),(0,j.jsx)($.Provider,{value:g,children:(0,j.jsx)(Y.Provider,{value:u,children:e})})]})}var W=k(require("react"));var T=require("react/jsx-runtime");function re({config:e,initialResponse:o,initialPath:t,parentNavigationContoller:s,render:n,requestClose:a,closeRequested:p,onCloseCompleted:g,onServerError:c}){let{pushMessage:v}=W.default.useContext(B),d=K(s,e.unpack,o,t,{onNavigation:(i,m,l)=>{l.forEach(v)},onOverlayClose:i=>{i.forEach(v),a()},onServerError:c}),h=W.default.useContext(b),y=W.default.useCallback(({skipDirtyFormCheck:i=!1}={})=>{!i&&h.isDirty?h.requestUnload().then(()=>a()):a()},[h,a]),u=W.default.useMemo(()=>({overlay:!0,closeRequested:p,requestClose:y,onCloseCompleted:g}),[p,g,y]);return d.isLoading?(0,T.jsx)(T.Fragment,{}):(0,T.jsx)(G.Provider,{value:u,children:n((0,T.jsx)(J,{config:e,navigationController:d,openOverlay:()=>{}}))})}var S=require("react/jsx-runtime");function Fe({config:e,initialResponse:o}){let[t,s]=F.default.useState([]),n=F.default.useCallback(l=>{s(t.concat([l]))},[t]),a=F.default.useCallback(l=>{l==="server"?n({level:"error",text:"A server error occurred. Please try again later."}):l==="network"&&n({level:"error",text:"A network error occurred. Please check your internet connection or try again later."})},[n]),[p,g]=F.default.useState(null),[c,v]=F.default.useState(!1),d=F.default.useRef(null),h=(l,R,r)=>{R&&(v(!0),d.current=null),R?s(r):r.forEach(n)},y=window.location.pathname+window.location.search+window.location.hash,u=K(null,e.unpack,o,y,{onNavigation:h,onServerError:a});F.default.useEffect(()=>{let l=document.querySelector(".django-bridge-load");l instanceof HTMLElement&&(l.classList.add("django-bridge-load--hidden"),setTimeout(()=>{l.remove()},200));let R=()=>{u.navigate(document.location.pathname,!1)};return window.addEventListener("popstate",R),()=>{window.removeEventListener("popstate",R)}},[]);let i=async(l,R,{onClose:r}={})=>{let f=await q(l,!0);r&&(d.current=r),v(!1),g({render:R,initialResponse:f,initialPath:l})},m=F.default.useMemo(()=>({messages:t,pushMessage:n}),[t,n]);return(0,S.jsx)(Z,{handleBrowserUnload:!0,children:(0,S.jsxs)(B.Provider,{value:m,children:[p&&(0,S.jsx)(Z,{children:(0,S.jsx)(re,{config:e,initialResponse:p.initialResponse,initialPath:p.initialPath,parentNavigationContoller:u,render:l=>p.render(l),requestClose:()=>v(!0),closeRequested:c,onCloseCompleted:()=>{g(null),v(!1),d.current&&(d.current(),d.current=null)},onServerError:a})}),!u.isLoading&&(0,S.jsx)(J,{config:e,navigationController:u,openOverlay:(l,R,r)=>void i(l,R,r)})]})})}0&&(module.exports={App,BuildLinkElement,Config,DirtyFormContext,DirtyFormMarker,Form,FormSubmissionStatus,FormWidgetChangeNotificationContext,Link,MessagesContext,NavigationContext,OverlayContext,buildLinkElement});
+"use strict";var xe=Object.create;var V=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var Re=Object.getPrototypeOf,Pe=Object.prototype.hasOwnProperty;var Fe=(e,t)=>{for(var a in t)V(e,a,{get:t[a],enumerable:!0})},me=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of he(t))!Pe.call(e,r)&&r!==a&&V(e,r,{get:()=>t[r],enumerable:!(s=ye(t,r))||s.enumerable});return e};var M=(e,t,a)=>(a=e!=null?xe(Re(e)):{},me(t||!e||!e.__esModule?V(a,"default",{value:e,enumerable:!0}):a,e)),be=e=>me(V({},"__esModule",{value:!0}),e);var Ee={};Fe(Ee,{App:()=>Me,BuildLinkElement:()=>re,Config:()=>A,DirtyFormContext:()=>b,DirtyFormMarker:()=>$,Form:()=>ne,FormSubmissionStatus:()=>K,FormWidgetChangeNotificationContext:()=>z,Link:()=>ue,MessagesContext:()=>O,NavigationContext:()=>k,OverlayContext:()=>J,RenderFrame:()=>Q,buildLinkElement:()=>te});module.exports=be(Ee);var w=M(require("react")),pe=require("@django-bridge/common");var g=require("react"),q=require("@django-bridge/common"),G=1;function Y(e,t,a,s,r={}){G+=1;let[n,u]=(0,g.useState)({id:G,path:s,metadata:{title:"Loading"},view:"loading",props:{},context:{}}),f=(0,g.useCallback)((o,p,P,F,D,N,j=!0,ge=!0)=>{let ie=n.id,se=P!==n.view||ge;if(se&&(G+=1,ie=G),!e&&(document.title=p.title,j)){let ce=0,Ce=window.scrollY,de=window.history?.state;de?.prevPath===o&&(ce=de.prevScrollPosition??0),window.history.pushState({prevPath:window.location.pathname,prevScrollPosition:Ce},"",o),window.scrollTo(0,ce)}let le={id:ie,path:o,metadata:p,view:P,props:F,context:D};u(le),r.onNavigation&&r.onNavigation(le,se,N)},[r,n.id,n.view,e]),[c,v]=(0,g.useState)(null),d=(0,g.useCallback)((o,p,P=!0,F=!1)=>{if(o.action==="reload")if(!e)window.location.href=p;else return e.handleResponse(o,p);else{if(o.action==="redirect")return v(o.path),Promise.resolve();if(o.action==="render"){if(e&&!o.overlay)return e.handleResponse(o,p);let D=t(o.props),N=t(o.context),j=!F;j&&o.view===n.view&&n.shouldReloadCallback&&(j=n.shouldReloadCallback(p,D)),f(p,o.metadata,o.view,D,N,o.messages,P,j)}else if(o.action==="close-overlay")r.onOverlayClose&&r.onOverlayClose(o.messages);else{if(o.action==="server-error")return r.onServerError&&r.onServerError("server"),Promise.reject();if(o.action==="network-error")return r.onServerError&&r.onServerError("network"),Promise.reject()}}return Promise.resolve()},[r,n,e,f,t]),C=(0,g.useRef)(1),x=(0,g.useRef)(1),m=(0,g.useCallback)(async(o,p,P,F=!1)=>{C.current+=1;let D=C.current,N=await o();D<x.current||(x.current=D,N!==null&&await d(N,p,P,F))},[d]),l=(0,g.useCallback)((o,p=!0)=>{let P=o;if(!o.startsWith("/")){let F=new URL(o);if(F.origin!==window.location.origin)return window.location.href=o,Promise.resolve();P=F.pathname+F.search}return m(()=>(0,q.djangoGet)(P,!!e),P,p)},[m,e]),R=(0,g.useCallback)((o,p)=>{o===n.id&&(n.path=p,e||history.replaceState({},"",n.path))},[n,e]),i=(0,g.useCallback)((o,p)=>m(()=>(0,q.djangoPost)(o,p,!!e),o,!0),[m,e]),y=(0,g.useCallback)(()=>m(()=>(0,q.djangoGet)(n.path,!!e),n.path,!1,!0),[n.path,m,e]);return(0,g.useEffect)(()=>{d(a,s,!1)},[]),(0,g.useEffect)(()=>{c&&(v(null),l(c))},[l,c]),{parent:e,currentFrame:n,isLoading:n.view==="loading",handleResponse:d,navigate:l,replacePath:R,submitForm:i,refreshProps:y}}var h=M(require("react")),H=require("react/jsx-runtime"),_=h.default.createContext(()=>{}),b=h.default.createContext({isDirty:!1,requestUnload:()=>Promise.resolve(),unloadRequested:!1,unloadBlocked:!1,confirmUnload:()=>{},cancelUnload:()=>{},unloadConfirmed:!1});function ee({handleBrowserUnload:e=!1,children:t}){let[a,s]=h.default.useState(!1),[r,n]=h.default.useState({cb:()=>{}}),[u,f]=h.default.useState(!1),[c,v]=h.default.useState(!1),d=h.default.useRef(null),C=()=>d.current&&!!d.current.querySelector("div.dirty-form-marker")||!1;h.default.useEffect(()=>{if(e&&c){let R="This page has unsaved changes.",i=y=>C()?(y.returnValue=R,R):"";return window.addEventListener("beforeunload",i),()=>{window.removeEventListener("beforeunload",i)}}return()=>{}},[e,c]);let x=h.default.useContext(_),m=h.default.useCallback(()=>{v(C()),x()},[x]),l=h.default.useMemo(()=>({isDirty:c,requestUnload:()=>c&&C()?(s(!0),new Promise(R=>{n({cb:R})})):Promise.resolve(),unloadRequested:a,unloadBlocked:c&&a,confirmUnload:()=>{a&&(f(!0),r.cb(),s(!1),n({cb:()=>{}}))},cancelUnload:()=>{a&&(s(!1),n({cb:()=>{}}))},unloadConfirmed:u}),[c,r,u,a]);return(0,H.jsx)("div",{ref:d,children:(0,H.jsx)(_.Provider,{value:m,children:(0,H.jsx)(b.Provider,{value:l,children:t})})})}function $(){let e=h.default.useContext(_);return h.default.useEffect(e),(0,H.jsx)("div",{className:"dirty-form-marker",style:{display:"none"}})}var oe=M(require("react"));var S=M(require("react")),J=S.default.createContext({overlay:!1,closeRequested:!1,requestClose:()=>{console.error("OverlayContext.requestClose() called from outside an overlay")},onCloseCompleted:()=>{console.error("OverlayContext.onCloseCompleted() called from outside an overlay")}}),k=S.default.createContext({frameId:0,path:"/",props:{},context:{},navigate:()=>(console.error("navigate() called from outside a Django Bridge Browser"),Promise.resolve()),replacePath:()=>{console.error("replacePath() called from outside a Django Bridge Browser")},submitForm:()=>(console.error("submitForm() called from outside a Django Bridge Browser"),Promise.resolve()),openOverlay:()=>{throw console.error("openOverlay() called from outside a Django Bridge Browser"),new Error("Modal cannot be opened here")},refreshProps:()=>(console.error("refreshProps() called from outside a Django Bridge Browser"),Promise.resolve())}),z=S.default.createContext(()=>{}),K=S.default.createContext(!1),O=S.default.createContext({messages:[],pushMessage:()=>{}});var L=require("react/jsx-runtime");function we({config:e,frame:t}){let a=e.views.get(t.view);if(!a)return(0,L.jsxs)("p",{children:["Unknown view '",t.view,"'"]});let s=(0,L.jsx)(a,{...t.props});return e.contextProviders.forEach((r,n)=>{s=(0,L.jsx)(r.Provider,{value:t.context[n],children:s})}),(0,L.jsx)("div",{children:s},t.id)}var Q=we;var X=require("react/jsx-runtime");function ke({config:e,navigationController:t,openOverlay:a}){let{currentFrame:s,navigate:r,replacePath:n,submitForm:u,refreshProps:f}=t,{isDirty:c,requestUnload:v,cancelUnload:d}=oe.default.useContext(b),C=oe.default.useMemo(()=>({frameId:s.id,path:s.path,props:s.props,context:s.context,navigate:(x,m={})=>!c||m.skipDirtyFormCheck===!0?(m.skipDirtyFormCheck===!0&&d(),r(x,m.pushState)):v().then(()=>r(x,m.pushState)),replacePath:n,submitForm:u,openOverlay:a,refreshProps:f}),[s,n,u,a,c,v,d,r,f]);return(0,X.jsx)(k.Provider,{value:C,children:(0,X.jsx)("div",{children:(0,X.jsx)(Q,{config:e,frame:s})},s.id)})}var Z=ke;var I=M(require("react"));var fe=require("react/jsx-runtime");function te({children:e,href:t,skipDirtyFormCheck:a=!1,...s},{navigate:r},n){return(0,fe.jsx)("a",{onClick:f=>{t&&(f.preventDefault(),r(t,{skipDirtyFormCheck:a}))},href:t||"#",ref:n,...s,children:e})}var re=I.default.createContext(te),De=I.default.forwardRef((e,t)=>{let a=I.default.useContext(k);return I.default.useContext(re)(e,a,t)}),ue=De;var ve=require("@django-bridge/common"),A=class extends ve.Config{contextProviders;constructor(){super(),this.contextProviders=new Map}addContextProvider=(t,a)=>(this.contextProviders.set(t,a),this)};var B=M(require("react"));var T=require("react/jsx-runtime");function ne({children:e,onSubmit:t,isDirty:a=!1,disableDirtyCheck:s=!1,...r}){let{submitForm:n,navigate:u}=B.default.useContext(k),[f,c]=B.default.useState(!1),[v,d]=B.default.useState(a),{cancelUnload:C}=B.default.useContext(b),x=l=>{if(v&&C(),!(t&&(t(l),l.defaultPrevented))&&l.target instanceof HTMLFormElement){if(f){l.preventDefault();return}let R=new FormData(l.target);if(l.nativeEvent instanceof SubmitEvent&&l.nativeEvent.submitter){let{submitter:i}=l.nativeEvent;(i instanceof HTMLButtonElement||i instanceof HTMLInputElement)&&i.name&&i.value&&R.set(i.name,i.value)}if(l.target.method==="post")l.preventDefault(),c(!0),n(l.target.action,R).catch(()=>c(!1));else if(l.target.method==="get"){l.preventDefault();let i=Array.from(R.entries()).map(o=>`${encodeURIComponent(o[0])}=${encodeURIComponent(o[1])}`).join("&"),y=l.target.action+(l.target.action.indexOf("?")===-1?"?":"&")+i;c(!0),u(y).catch(()=>c(!1))}}},m=B.default.useCallback(()=>{d(!0)},[]);return(0,T.jsxs)("form",{onSubmit:x,...r,children:[v&&!s&&(0,T.jsx)($,{}),(0,T.jsx)(K.Provider,{value:f,children:(0,T.jsx)(z.Provider,{value:m,children:e})})]})}var W=M(require("react"));var U=require("react/jsx-runtime");function ae({config:e,initialResponse:t,initialPath:a,parentNavigationContoller:s,render:r,requestClose:n,closeRequested:u,onCloseCompleted:f,onServerError:c}){let{pushMessage:v}=W.default.useContext(O),d=Y(s,e.unpack,t,a,{onNavigation:(l,R,i)=>{i.forEach(v)},onOverlayClose:l=>{l.forEach(v),n()},onServerError:c}),C=W.default.useContext(b),x=W.default.useCallback(({skipDirtyFormCheck:l=!1}={})=>{!l&&C.isDirty?C.requestUnload().then(()=>n()):n()},[C,n]),m=W.default.useMemo(()=>({overlay:!0,closeRequested:u,requestClose:x,onCloseCompleted:f}),[u,f,x]);return d.isLoading?(0,U.jsx)(U.Fragment,{}):(0,U.jsx)(J.Provider,{value:m,children:r((0,U.jsx)(Z,{config:e,navigationController:d,openOverlay:()=>{}}))})}var E=require("react/jsx-runtime");function Me({config:e,initialResponse:t}){let[a,s]=w.default.useState([]),r=w.default.useCallback(i=>{s(a.concat([i]))},[a]),n=w.default.useCallback(i=>{i==="server"?r({level:"error",text:"A server error occurred. Please try again later."}):i==="network"&&r({level:"error",text:"A network error occurred. Please check your internet connection or try again later."})},[r]),[u,f]=w.default.useState(null),[c,v]=w.default.useState(!1),d=w.default.useRef(null),C=(i,y,o)=>{y&&(v(!0),d.current=null),y?s(o):o.forEach(r)},x=window.location.pathname+window.location.search+window.location.hash,m=Y(null,e.unpack,t,x,{onNavigation:C,onServerError:n});w.default.useEffect(()=>{let i=document.querySelector(".django-bridge-load");i instanceof HTMLElement&&(i.classList.add("django-bridge-load--hidden"),setTimeout(()=>{i.remove()},200));let y=()=>{m.navigate(document.location.pathname,!1)};return window.addEventListener("popstate",y),()=>{window.removeEventListener("popstate",y)}},[]);let l=async(i,y,{onClose:o}={})=>{let p=await(0,pe.djangoGet)(i,!0);o&&(d.current=o),v(!1),f({render:y,initialResponse:p,initialPath:i})},R=w.default.useMemo(()=>({messages:a,pushMessage:r}),[a,r]);return(0,E.jsx)(ee,{handleBrowserUnload:!0,children:(0,E.jsxs)(O.Provider,{value:R,children:[u&&(0,E.jsx)(ee,{children:(0,E.jsx)(ae,{config:e,initialResponse:u.initialResponse,initialPath:u.initialPath,parentNavigationContoller:m,render:i=>u.render(i),requestClose:()=>v(!0),closeRequested:c,onCloseCompleted:()=>{f(null),v(!1),d.current&&(d.current(),d.current=null)},onServerError:n})}),!m.isLoading&&(0,E.jsx)(Z,{config:e,navigationController:m,openOverlay:(i,y,o)=>void l(i,y,o)})]})})}0&&(module.exports={App,BuildLinkElement,Config,DirtyFormContext,DirtyFormMarker,Form,FormSubmissionStatus,FormWidgetChangeNotificationContext,Link,MessagesContext,NavigationContext,OverlayContext,RenderFrame,buildLinkElement});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@django-bridge/react",
-  "version": "0.3.2",
+  "version": "0.4.0-rc.7",
   "description": "The simple way to build Django applications with modern React frontends",
   "repository": "https://github.com/django-bridge/django-bridge",
   "license": "BSD-3-Clause",
@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "telepath-unpack": "^0.0.3"
+    "telepath-unpack": "^0.0.4",
+    "@django-bridge/common": "*"
   },
   "devDependencies": {
     "@types/node": "^12.0.0",