@django-bridge/react 0.3.0

package/dist/index.d.ts

@@ -0,0 +1,141 @@
+import React, { ReactNode, ReactElement, FunctionComponent, Context } from 'react';
+import Telepath from 'telepath-unpack';
+
+interface TextMessage {
+    level: "success" | "warning" | "error";
+    text: string;
+}
+interface HTMLMessage {
+    level: "success" | "warning" | "error";
+    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;
+
+interface NavigateOptions {
+    pushState?: boolean;
+    skipDirtyFormCheck?: boolean;
+}
+interface OpenOverlayOptions {
+    onClose?: () => void;
+}
+interface OverlayContextType {
+    overlay: boolean;
+    closeRequested: boolean;
+    requestClose: (options?: {
+        skipDirtyFormCheck?: boolean;
+    }) => void;
+    onCloseCompleted: () => void;
+}
+declare const OverlayContext: React.Context<OverlayContextType>;
+interface Navigation {
+    frameId: number;
+    path: string;
+    props: Record<string, unknown>;
+    context: Record<string, unknown>;
+    navigate: (path: string, options?: NavigateOptions) => Promise<void>;
+    replacePath: (frameId: number, path: string) => void;
+    submitForm: (path: string, data: FormData) => Promise<void>;
+    openOverlay: (path: string, render: (content: ReactNode) => ReactNode, options?: OpenOverlayOptions) => void;
+    refreshProps: () => Promise<void>;
+}
+declare const NavigationContext: React.Context<Navigation>;
+declare const FormWidgetChangeNotificationContext: React.Context<() => void>;
+declare const FormSubmissionStatus: React.Context<boolean>;
+interface Messages {
+    messages: Message[];
+    pushMessage: (message: Message) => void;
+}
+declare const MessagesContext: React.Context<Messages>;
+
+interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+    skipDirtyFormCheck?: boolean;
+}
+declare function buildLinkElement({ children, href, skipDirtyFormCheck, ...props }: LinkProps, { navigate }: Navigation, ref: ((instance: HTMLAnchorElement | null) => void) | React.MutableRefObject<HTMLAnchorElement | null> | null): ReactElement;
+declare const BuildLinkElement: React.Context<typeof buildLinkElement>;
+declare const Link: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    skipDirtyFormCheck?: boolean | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
+
+declare class Config {
+    views: Map<string, FunctionComponent>;
+    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> {
+    isDirty?: boolean;
+    disableDirtyCheck?: boolean;
+}
+declare function Form({ children, onSubmit: callerOnSubmit, isDirty: isInitiallyDirty, disableDirtyCheck, ...props }: FormProps): ReactElement;
+
+interface DirtyForm {
+    isDirty: boolean;
+    requestUnload: () => Promise<unknown>;
+    unloadRequested: boolean;
+    unloadBlocked: boolean;
+    confirmUnload: () => void;
+    cancelUnload: () => void;
+    unloadConfirmed: boolean;
+}
+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;
+    isLoading: boolean;
+    handleResponse: (response: DjangoBridgeResponse, path: string, pushState?: boolean, neverReload?: boolean) => Promise<void>;
+    navigate: (url: string, pushState?: boolean) => Promise<void>;
+    replacePath: (frameId: number, path: string) => void;
+    submitForm: (url: string, data: FormData) => Promise<void>;
+    refreshProps: () => Promise<void>;
+}
+
+interface AppProps {
+    config: Config;
+    initialResponse: DjangoBridgeResponse | JSON;
+}
+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 };

package/dist/index.js

@@ -0,0 +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 S=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,S.jsxs)("p",{children:["Unknown view '",s.view,"'"]});let u=(0,S.jsx)(y,{...s.props});return e.contextProviders.forEach((i,m)=>{u=(0,S.jsx)(i.Provider,{value:s.context[m],children:u})}),(0,S.jsx)(D.Provider,{value:h,children:(0,S.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,E,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:E};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 E=o(r.props),N=o(r.context),H=!P;H&&r.view===a.view&&a.shouldReloadCallback&&(H=a.shouldReloadCallback(f,E)),g(f,r.title,r.view,E,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 E=h.current,N=await r();E<y.current||(y.current=E,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)},[]),(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 M=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,M.jsx)("div",{children:(0,M.jsx)(Z,{handleBrowserUnload:!0,children:(0,M.jsxs)(B.Provider,{value:m,children:[p&&(0,M.jsx)(Z,{children:(0,M.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,M.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});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@django-bridge/react",
+  "version": "0.3.0",
+  "description": "The simple way to build Django applications with modern React frontends",
+  "repository": "https://github.com/django-bridge/django-bridge",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs --dts --minify --clean --out-dir dist",
+    "check-types": "tsc --noEmit"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "telepath-unpack": "^0.0.3"
+  },
+  "devDependencies": {
+    "@types/node": "^12.0.0",
+    "@types/react": "18",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}