@flows/react - npm Package Compare versions

Comparing version 1.8.1-canary.0 to 1.8.1-canary.1

dist/index.d.ts

@@ -107,5 +107,7 @@ import { FC, ReactNode } from 'react';
     /**
-     * Unique user ID. If no ID is provided, all users will be treated as one.
+     * Unique user ID.
+     *
+     * When `null` is passed the SDK is disabled. This is useful when you need to load the User ID asynchronously.
      */
-    userId: string;
+    userId: string | null;
     /**
@@ -112,0 +114,0 @@ * Object with custom [user properties](https://flows.sh/docs/users/properties). Values can be string, number, boolean, or date.

dist/index.js

 "use client"
-"use strict";var W=Object.defineProperty,Ko=Object.defineProperties,Go=Object.getOwnPropertyDescriptor,Jo=Object.getOwnPropertyDescriptors,Xo=Object.getOwnPropertyNames,io=Object.getOwnPropertySymbols;var mo=Object.prototype.hasOwnProperty,Ho=Object.prototype.propertyIsEnumerable;var po=(o,e,t)=>e in o?W(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,g=(o,e)=>{for(var t in e||(e={}))mo.call(e,t)&&po(o,t,e[t]);if(io)for(var t of io(e))Ho.call(e,t)&&po(o,t,e[t]);return o},S=(o,e)=>Ko(o,Jo(e));var Qo=(o,e)=>{for(var t in e)W(o,t,{get:e[t],enumerable:!0})},Yo=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Xo(e))!mo.call(o,r)&&r!==t&&W(o,r,{get:()=>e[r],enumerable:!(n=Go(e,r))||n.enumerable});return o};var Zo=o=>Yo(W({},"__esModule",{value:!0}),o);var ae={};Qo(ae,{FlowsProvider:()=>zo,FlowsSlot:()=>pe,resetAllWorkflowsProgress:()=>me,resetWorkflowProgress:()=>fe,startWorkflow:()=>ce,useCurrentFloatingBlocks:()=>U,useCurrentSlotBlocks:()=>j});module.exports=Zo(ae);var $=require("react"),fo=()=>{},K=(0,$.createContext)({blocks:[],components:{},tourComponents:{},runningTours:[],removeBlock:fo,updateBlock:fo}),b=()=>(0,$.useContext)(K);var E=require("react");var co=(o,{body:e,method:t,version:n})=>fetch(o,{method:t,headers:{"Content-Type":"application/json","x-flows-version":n},body:e?JSON.stringify(e):void 0}).then(async r=>{var s;let i=await r.text(),p=i?JSON.parse(i):void 0;if(!r.ok){let m=p;throw new Error((s=m==null?void 0:m.message)!=null?s:r.statusText)}return p}),V=(o,e)=>({getBlocks:t=>co(`${o}/v2/sdk/blocks`,{method:"POST",body:t,version:e}),sendEvent:t=>co(`${o}/v2/sdk/events`,{method:"POST",body:t,version:e})});function ao(o,e){return o===e||Number.isNaN(o)&&Number.isNaN(e)}function uo(o){return typeof o=="string"||typeof o=="symbol"?o:Object.is(o.valueOf(),-0)?"-0":o.toString()}function lo(o){let e=[],t=o.length;if(t===0)return e;let n=0,r="",i="",p=!1;for(o.charCodeAt(0)===46&&(e.push(""),n++);n<t;){let s=o[n];i?s==="\\"&&n+1<t?(n++,r+=o[n]):s===i?i="":r+=s:p?s==='"'||s==="'"?i=s:s==="]"?(p=!1,e.push(r),r=""):r+=s:s==="["?(p=!0,r&&(e.push(r),r="")):s==="."?r&&(e.push(r),r=""):r+=s,n++}return r&&e.push(r),e}function G(o){return o!==null&&(typeof o=="object"||typeof o=="function")}var oe=/^(?:0|[1-9]\d*)$/;function xo(o,e=Number.MAX_SAFE_INTEGER){switch(typeof o){case"number":return Number.isInteger(o)&&o>=0&&o<e;case"symbol":return!1;case"string":return oe.test(o)}}function go(o){return typeof o=="symbol"||o instanceof Symbol}var ee=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,te=/^\w*$/;function yo(o,e){return Array.isArray(o)?!1:typeof o=="number"||typeof o=="boolean"||o==null||go(o)?!0:typeof o=="string"&&(te.test(o)||!ee.test(o))||e!=null&&Object.hasOwn(e,o)}var ko=(o,e,t)=>{let n=o[e];(!(Object.hasOwn(o,e)&&ao(n,t))||t===void 0&&!(e in o))&&(o[e]=t)};function J(o,e,t){if(o==null&&!G(o))return o;let n=yo(e,o)?[e]:Array.isArray(e)?e:typeof e=="string"?lo(e):[e],r=o;for(let i=0;i<n.length&&r!=null;i++){let p=uo(n[i]),s=t;if(i!==n.length-1){let m=r[p];s=G(m)?m:xo(n[i+1])?[]:{}}ko(r,p,s),r=r[p]}return o}var vo=({block:o,exitNodeCb:e,removeBlock:t,setStateMemory:n})=>{var s,m,f;let r=({properties:c,parentKey:l})=>{var v;let a=g({},c);return Object.entries(c).forEach(([B,C])=>{Array.isArray(C)&&(a[B]=C.map((u,d)=>typeof u=="object"?r({properties:u,parentKey:[l,B,d].filter(h=>h!==void 0).join(".")}):u))}),delete a.f__exit_nodes,(v=c.f__exit_nodes)==null||v.forEach(B=>{let C=()=>e([l,B].filter(u=>u!==void 0).join("."));a[B]=C}),a},i=r({properties:o.data});for(let c of(s=o.propertyMeta)!=null?s:[])if(c.type==="state-memory"){let l={value:(m=c.value)!=null?m:!1,setValue:a=>{n(c.key,a)},triggers:(f=c.triggers)!=null?f:[]};J(i,c.key,l)}let p=o.exitNodes.reduce((c,l)=>{let a=()=>(t(o.id),e(l));return c[l]=a,c},{});return g(g({__flows:{key:o.key,workflowId:o.workflowId}},i),p)};var re="#22262d",ne="#fff",Bo="%cFlows%c",ho=`color:${ne};background:${re};padding:2px 4px;border-radius:4px`,T={error:(o,...e)=>{console.error(`${Bo} ${o}`,ho,"",...e)},warn:(o,...e)=>{console.warn(`${Bo} ${o}`,ho,"",...e)}};var X=(o,e)=>e?Array.isArray(e)?e.some(t=>X(o,t)):typeof o!="string"?!1:new RegExp(e).test(o):!0,H=(o,e)=>e===void 0?!0:Array.isArray(e)?e.some(t=>H(o,t)):o===e,Q=(o,e)=>e===void 0?!0:Array.isArray(e)?e.every(t=>Q(o,t)):o!==e;var Y=(o,e)=>e?Array.isArray(e)?e.some(t=>Y(o,t)):typeof o!="string"?!1:o.includes(e):!0,Z=(o,e)=>e?Array.isArray(e)?e.every(t=>Z(o,t)):typeof o!="string"?!1:!o.includes(e):!0;var A=({operator:o,pathname:e,value:t})=>o==="eq"?H(e,t):o==="ne"?Q(e,t):o==="contains"?Y(e,t):o==="notContains"?Z(e,t):o==="regex"?X(e,t):!0,wo=({eventTarget:o,value:e})=>e?Array.from(document.querySelectorAll(e)).some(t=>t.contains(o)):!1;var O=()=>window.location.pathname+window.location.search;var oo=(o,e)=>new Proxy(o,{get(t,n,r){return n==="props"&&e(o.id),Reflect.get(t,n,r)}});var I={};var Po="@flows/react",Co="1.8.1-canary.0";var L=`${Po}@${Co}`;var w=async o=>{let{apiUrl:e,environment:t,organizationId:n,userId:r}=I;!e||!t||!n||!r||await V(e,L).sendEvent(S(g({},o),{environment:t,organizationId:n,userId:r}))},So=new Set,eo=async o=>{So.has(o)||(So.add(o),await w({name:"block-activated",blockId:o}))};var To=({blocks:o,removeBlock:e})=>{let[t,n]=(0,E.useState)([]);return(0,E.useEffect)(()=>{n(i=>{let p=o.filter(f=>f.type==="tour"),s=new Map(i.map(f=>[f.blockId,f]));return p.map(f=>{var a,v;let c=s.get(f.id),l=(v=(a=c==null?void 0:c.currentBlockIndex)!=null?a:f.currentTourIndex)!=null?v:0;return{blockId:f.id,currentBlockIndex:l}})})},[o]),(0,E.useMemo)(()=>{let i=(s,m)=>{n(f=>f.map(c=>c.blockId===s?m(c):c))},p=(s,m)=>{i(s,f=>S(g({},f),{currentBlockIndex:m}))};return t.map(({blockId:s,currentBlockIndex:m})=>{var u,d,h;let f=o.find(x=>x.id===s);if(!f)return;let c=(u=f.tourBlocks)==null?void 0:u[m],l=m===((h=(d=f.tourBlocks)==null?void 0:d.length)!=null?h:0)-1,a=x=>{w({name:"tour-update",blockId:s,properties:{currentTourIndex:x}})};return{block:f,currentBlockIndex:m,activeStep:c,continue:()=>{if(l)e(s),w({name:"transition",propertyKey:"complete",blockId:s});else{let x=m+1;p(s,x),a(x)}},previous:()=>{var _;let x=m===0?m:m-1;for(;x>0&&f.tourBlocks&&!((_=f.tourBlocks.at(x))!=null&&_.componentType);)x-=1;p(s,x),a(x)},cancel:()=>{e(s),w({name:"transition",blockId:s,propertyKey:"cancel"})}}}).filter(s=>!!s)},[o,e,t])};var k=require("react");var y=require("react"),Io=({url:o,onMessage:e,onOpen:t})=>{let[n,r]=(0,y.useState)(),i=(0,y.useRef)(void 0),[p,s]=(0,y.useState)(0),m=(0,y.useRef)(t);(0,y.useEffect)(()=>{m.current=t},[t]);let f=(0,y.useRef)(e);(0,y.useEffect)(()=>{f.current=e},[e]);let c=(0,y.useCallback)(a=>{f.current(a)},[]),l=(0,y.useCallback)(()=>{if(i.current&&(i.current(),i.current=void 0),!o)return;let a=new WebSocket(o);r(a);let v=()=>{var u;(u=m.current)==null||u.call(m),s(0)},B=()=>{r(void 0),s(u=>u+1)};a.addEventListener("open",v),a.addEventListener("close",B),a.addEventListener("message",c);let C=()=>{a.removeEventListener("open",v),a.removeEventListener("close",B),a.removeEventListener("message",c),a.readyState===WebSocket.CONNECTING?a.addEventListener("open",()=>{a.close()}):a.close(),r(void 0)};return i.current=C,C},[c,o]);(0,y.useEffect)(()=>{let a=l();return()=>{a==null||a()}},[l]),(0,y.useEffect)(()=>{if(n)return;let a=setTimeout(()=>{l()},Math.min(1e3*2**p,1e4));return()=>{clearTimeout(a)}},[p,n,l]),(0,y.useEffect)(()=>()=>{i.current&&i.current()},[])};var Ao=({apiUrl:o,environment:e,organizationId:t,userId:n,userProperties:r})=>{let[i,p]=(0,k.useState)([]),[s,m]=(0,k.useState)(!1),f=(0,k.useMemo)(()=>({environment:e,organizationId:t,userId:n}),[e,t,n]),c=(0,k.useRef)(r);(0,k.useEffect)(()=>{c.current=r},[r]);let l=(0,k.useCallback)(()=>{V(o,L).getBlocks(S(g({},f),{userProperties:c.current})).then(u=>{var d;p(u.blocks),(d=u.meta)!=null&&d.usage_limited&&m(!0)}).catch(u=>{T.error("Failed to load blocks",u)})},[o,f]),a=(0,k.useMemo)(()=>s?void 0:`${o.replace("https://","wss://").replace("http://","ws://")}/ws/sdk/block-updates?${new URLSearchParams(f).toString()}`,[o,f,s]),v=(0,k.useCallback)(u=>{let d=JSON.parse(u.data),h=new Set([...d.exitedBlockIds,...d.updatedBlocks.map(x=>x.id)]);p(x=>[...x.filter(_=>!h.has(_.id)),...d.updatedBlocks])},[]);Io({url:a,onMessage:v,onOpen:l}),(0,k.useEffect)(()=>{i.forEach(u=>{var d;Ro(u),(d=u.tourBlocks)==null||d.forEach(h=>{Ro(h)})})},[i]);let B=(0,k.useCallback)(u=>{p(d=>d.filter(h=>h.id!==u))},[]),C=(0,k.useCallback)((u,d)=>{p(h=>h.map(x=>x.id===u?d(x):x))},[]);return{blocks:i,removeBlock:B,updateBlock:C}},Ro=o=>{o.slottable&&!o.slotId&&T.error(`Encountered workflow block "${o.componentType}" that is slottable but has no slotId`)};var P=require("react"),Mo=require("react/jsx-runtime"),se=200,ie=()=>{let[o,e]=(0,P.useState)(),t=(0,P.useRef)(o);return(0,P.useEffect)(()=>{t.current=o},[o]),(0,P.useEffect)(()=>{let n=window.setInterval(()=>{let r=O();t.current!==r&&e(r)},se);return()=>{clearInterval(n)}}),o},Eo=(0,P.createContext)(void 0),D=()=>{if((0,P.useContext)(Eo)!==void 0)return O()},Fo=({children:o})=>{let e=ie();return(0,Mo.jsx)(Eo.Provider,{value:e,children:o})};var R=require("react");var No=require("react");var Oo=()=>{let{runningTours:o}=b(),e=D(),[t]=(0,No.useState)(new Map),n=(0,R.useMemo)(()=>o.filter(r=>{var i;return!!((i=r.activeStep)!=null&&i.tourWait)}),[o]);return(0,R.useEffect)(()=>{n.forEach(r=>{var p,s,m;let i=(p=r.activeStep)==null?void 0:p.tourWait;(i==null?void 0:i.interaction)==="navigation"&&A({pathname:e,operator:(s=i.page)==null?void 0:s.operator,value:(m=i.page)==null?void 0:m.value})&&r.continue()})},[e,n]),(0,R.useEffect)(()=>{let r=i=>{let p=i.target;if(!p||!(p instanceof Element))return;let s=O();n.forEach(m=>{var c,l,a;let f=(c=m.activeStep)==null?void 0:c.tourWait;if((f==null?void 0:f.interaction)==="click"){let v=A({pathname:s,operator:(l=f.page)==null?void 0:l.operator,value:(a=f.page)==null?void 0:a.value});wo({eventTarget:p,value:f.element})&&v&&m.continue()}})};return addEventListener("click",r),()=>{removeEventListener("click",r)}},[e,n]),(0,R.useEffect)(()=>{o.forEach(r=>{let i=r.activeStep,p=t.get(r.block.id);p&&p.stepId!==(i==null?void 0:i.id)&&(clearTimeout(p.timeoutId),t.delete(r.block.id))})},[o,t]),(0,R.useEffect)(()=>{n.forEach(r=>{let i=r.activeStep,p=i==null?void 0:i.tourWait;if(i&&(p==null?void 0:p.interaction)==="delay"&&p.ms!==void 0&&!t.has(r.block.id)){let s=window.setTimeout(()=>{r.continue(),t.delete(r.block.id)},p.ms);t.set(r.block.id,{timeoutId:s,stepId:i.id})}})},[n,t]),null};var F=require("react");var to=({block:o,removeBlock:e,updateBlock:t})=>{if(!o.componentType)return[];let r=vo({block:o,removeBlock:e,exitNodeCb:p=>w({name:"transition",blockId:o.id,propertyKey:p}),setStateMemory:async(p,s)=>{t(o.id,m=>{var f;return S(g({},m),{propertyMeta:(f=m.propertyMeta)==null?void 0:f.map(c=>c.type==="state-memory"&&c.key===p?S(g({},c),{value:s}):c)})}),await w({name:"set-state-memory",blockId:o.id,propertyKey:p,properties:{value:s}})}}),i={id:o.id,type:"component",component:o.componentType,props:r};return oo(i,eo)},ro=o=>{let e=o.activeStep;if(!(e!=null&&e.componentType))return[];let t=o.currentBlockIndex===0,n={id:e.id,tourBlockId:o.block.id,type:"tour-component",component:e.componentType,props:S(g({__flows:{key:e.key,workflowId:e.workflowId}},e.data),{continue:o.continue,previous:t?void 0:o.previous,cancel:o.cancel})};return oo(n,eo)};var no=o=>o==null?void 0:o.slotId;var _o=()=>{let{blocks:o}=b(),e=D();return(0,F.useMemo)(()=>o.filter(t=>A({pathname:e,operator:t.page_targeting_operator,value:t.page_targeting_values})),[o,e])},Wo=()=>{let{runningTours:o}=b(),e=D();return(0,F.useMemo)(()=>o.filter(t=>{let n=t.activeStep;return n&&A({pathname:e,operator:n.page_targeting_operator,value:n.page_targeting_values})}),[e,o])},U=()=>{let o=_o(),e=Wo(),{removeBlock:t,updateBlock:n}=b(),r=(0,F.useMemo)(()=>o.filter(p=>!p.slottable).flatMap(p=>to({block:p,removeBlock:t,updateBlock:n})),[t,n,o]),i=(0,F.useMemo)(()=>e.filter(p=>{let s=p.activeStep;return s&&!s.slottable}).flatMap(ro),[e]);return[...r,...i]},$o=o=>"type"in o,Do=o=>{var e,t,n;return $o(o)?(e=o.slotIndex)!=null?e:0:(n=(t=o.activeStep)==null?void 0:t.slotIndex)!=null?n:0},j=o=>{let e=_o(),t=Wo(),{removeBlock:n,updateBlock:r}=b();return(0,F.useMemo)(()=>{let p=e.filter(m=>m.slottable&&no(m)===o),s=t.filter(m=>{var f;return((f=m.activeStep)==null?void 0:f.slottable)&&no(m.activeStep)===o});return[...p,...s].sort((m,f)=>Do(m)-Do(f)).flatMap(m=>$o(m)?to({block:m,removeBlock:n,updateBlock:r}):ro(m))},[n,o,r,e,t])};var Vo=require("react");var Lo=require("react/jsx-runtime"),q=({block:o})=>{let{components:e}=b(),t=e[o.component];return(0,Vo.useEffect)(()=>{t||T.error(`Component not found for workflow block "${o.component}"`)},[t,o.component]),t?(0,Lo.jsx)(t,g({},o.props)):null};var Uo=require("react");var jo=require("react/jsx-runtime"),z=({block:o})=>{let{tourComponents:e}=b(),t=e[o.component];return(0,Uo.useEffect)(()=>{t||T.error(`Tour Component not found for tour block "${o.component}"`)},[t,o.component]),t?(0,jo.jsx)(t,g({},o.props)):null};var M=require("react/jsx-runtime"),qo=()=>{let o=U();return(0,M.jsx)(M.Fragment,{children:o.map(e=>e.type==="component"?(0,M.jsx)(q,{block:e},e.id):e.type==="tour-component"?(0,M.jsx)(z,{block:e},e.tourBlockId):null)})};var N=require("react/jsx-runtime"),zo=({children:o,apiUrl:e="https://api.flows-cloud.com",environment:t,organizationId:n,userId:r,components:i,tourComponents:p,userProperties:s})=>{I.apiUrl=e,I.environment=t,I.organizationId=n,I.userId=r;let{blocks:m,removeBlock:f,updateBlock:c}=Ao({apiUrl:e,environment:t,organizationId:n,userId:r,userProperties:s}),l=To({blocks:m,removeBlock:f});return(0,N.jsx)(Fo,{children:(0,N.jsxs)(K.Provider,{value:{blocks:m,components:i,runningTours:l,tourComponents:p,removeBlock:f,updateBlock:c},children:[o,(0,N.jsx)(qo,{}),(0,N.jsx)(Oo,{})]})})};var so=require("react/jsx-runtime"),pe=({id:o,placeholder:e})=>{let t=j(o);return t.length?t.map(n=>n.type==="component"?(0,so.jsx)(q,{block:n},n.id):n.type==="tour-component"?(0,so.jsx)(z,{block:n},n.id):null):e!=null?e:null};var me=()=>w({name:"reset-progress"}),fe=o=>w({name:"reset-progress",workflowId:o}),ce=o=>w({name:"workflow-start",blockKey:o});
+"use strict";var W=Object.defineProperty,Ko=Object.defineProperties,Go=Object.getOwnPropertyDescriptor,Jo=Object.getOwnPropertyDescriptors,Xo=Object.getOwnPropertyNames,io=Object.getOwnPropertySymbols;var mo=Object.prototype.hasOwnProperty,Ho=Object.prototype.propertyIsEnumerable;var po=(o,e,t)=>e in o?W(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,d=(o,e)=>{for(var t in e||(e={}))mo.call(e,t)&&po(o,t,e[t]);if(io)for(var t of io(e))Ho.call(e,t)&&po(o,t,e[t]);return o},S=(o,e)=>Ko(o,Jo(e));var Qo=(o,e)=>{for(var t in e)W(o,t,{get:e[t],enumerable:!0})},Yo=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Xo(e))!mo.call(o,r)&&r!==t&&W(o,r,{get:()=>e[r],enumerable:!(n=Go(e,r))||n.enumerable});return o};var Zo=o=>Yo(W({},"__esModule",{value:!0}),o);var le={};Qo(le,{FlowsProvider:()=>zo,FlowsSlot:()=>fe,resetAllWorkflowsProgress:()=>ce,resetWorkflowProgress:()=>ae,startWorkflow:()=>ue,useCurrentFloatingBlocks:()=>U,useCurrentSlotBlocks:()=>j});module.exports=Zo(le);var $=require("react"),fo=()=>{},K=(0,$.createContext)({blocks:[],components:{},tourComponents:{},runningTours:[],removeBlock:fo,updateBlock:fo}),b=()=>(0,$.useContext)(K);var F=require("react");var co=(o,{body:e,method:t,version:n})=>fetch(o,{method:t,headers:{"Content-Type":"application/json","x-flows-version":n},body:e?JSON.stringify(e):void 0}).then(async r=>{var s;let i=await r.text(),p=i?JSON.parse(i):void 0;if(!r.ok){let m=p;throw new Error((s=m==null?void 0:m.message)!=null?s:r.statusText)}return p}),V=(o,e)=>({getBlocks:t=>co(`${o}/v2/sdk/blocks`,{method:"POST",body:t,version:e}),sendEvent:t=>co(`${o}/v2/sdk/events`,{method:"POST",body:t,version:e})});function ao(o,e){return o===e||Number.isNaN(o)&&Number.isNaN(e)}function uo(o){return typeof o=="string"||typeof o=="symbol"?o:Object.is(o.valueOf(),-0)?"-0":o.toString()}function lo(o){let e=[],t=o.length;if(t===0)return e;let n=0,r="",i="",p=!1;for(o.charCodeAt(0)===46&&(e.push(""),n++);n<t;){let s=o[n];i?s==="\\"&&n+1<t?(n++,r+=o[n]):s===i?i="":r+=s:p?s==='"'||s==="'"?i=s:s==="]"?(p=!1,e.push(r),r=""):r+=s:s==="["?(p=!0,r&&(e.push(r),r="")):s==="."?r&&(e.push(r),r=""):r+=s,n++}return r&&e.push(r),e}function G(o){return o!==null&&(typeof o=="object"||typeof o=="function")}var oe=/^(?:0|[1-9]\d*)$/;function xo(o,e=Number.MAX_SAFE_INTEGER){switch(typeof o){case"number":return Number.isInteger(o)&&o>=0&&o<e;case"symbol":return!1;case"string":return oe.test(o)}}function go(o){return typeof o=="symbol"||o instanceof Symbol}var ee=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,te=/^\w*$/;function yo(o,e){return Array.isArray(o)?!1:typeof o=="number"||typeof o=="boolean"||o==null||go(o)?!0:typeof o=="string"&&(te.test(o)||!ee.test(o))||e!=null&&Object.hasOwn(e,o)}var ko=(o,e,t)=>{let n=o[e];(!(Object.hasOwn(o,e)&&ao(n,t))||t===void 0&&!(e in o))&&(o[e]=t)};function J(o,e,t){if(o==null&&!G(o))return o;let n=yo(e,o)?[e]:Array.isArray(e)?e:typeof e=="string"?lo(e):[e],r=o;for(let i=0;i<n.length&&r!=null;i++){let p=uo(n[i]),s=t;if(i!==n.length-1){let m=r[p];s=G(m)?m:xo(n[i+1])?[]:{}}ko(r,p,s),r=r[p]}return o}var vo=({block:o,exitNodeCb:e,removeBlock:t,setStateMemory:n})=>{var s,m,f;let r=({properties:c,parentKey:l})=>{var v;let a=d({},c);return Object.entries(c).forEach(([B,C])=>{Array.isArray(C)&&(a[B]=C.map((u,g)=>typeof u=="object"?r({properties:u,parentKey:[l,B,g].filter(h=>h!==void 0).join(".")}):u))}),delete a.f__exit_nodes,(v=c.f__exit_nodes)==null||v.forEach(B=>{let C=()=>e([l,B].filter(u=>u!==void 0).join("."));a[B]=C}),a},i=r({properties:o.data});for(let c of(s=o.propertyMeta)!=null?s:[])if(c.type==="state-memory"){let l={value:(m=c.value)!=null?m:!1,setValue:a=>{n(c.key,a)},triggers:(f=c.triggers)!=null?f:[]};J(i,c.key,l)}let p=o.exitNodes.reduce((c,l)=>{let a=()=>(t(o.id),e(l));return c[l]=a,c},{});return d(d({__flows:{key:o.key,workflowId:o.workflowId}},i),p)};var re="#22262d",ne="#fff",Bo="%cFlows%c",ho=`color:${ne};background:${re};padding:2px 4px;border-radius:4px`,T={error:(o,...e)=>{console.error(`${Bo} ${o}`,ho,"",...e)},warn:(o,...e)=>{console.warn(`${Bo} ${o}`,ho,"",...e)}};var X=(o,e)=>e?Array.isArray(e)?e.some(t=>X(o,t)):typeof o!="string"?!1:new RegExp(e).test(o):!0,H=(o,e)=>e===void 0?!0:Array.isArray(e)?e.some(t=>H(o,t)):o===e,Q=(o,e)=>e===void 0?!0:Array.isArray(e)?e.every(t=>Q(o,t)):o!==e;var Y=(o,e)=>e?Array.isArray(e)?e.some(t=>Y(o,t)):typeof o!="string"?!1:o.includes(e):!0,Z=(o,e)=>e?Array.isArray(e)?e.every(t=>Z(o,t)):typeof o!="string"?!1:!o.includes(e):!0;var E=({operator:o,pathname:e,value:t})=>o==="eq"?H(e,t):o==="ne"?Q(e,t):o==="contains"?Y(e,t):o==="notContains"?Z(e,t):o==="regex"?X(e,t):!0,wo=({eventTarget:o,value:e})=>e?Array.from(document.querySelectorAll(e)).some(t=>t.contains(o)):!1;var O=()=>window.location.pathname+window.location.search;var oo=(o,e)=>new Proxy(o,{get(t,n,r){return n==="props"&&e(o.id),Reflect.get(t,n,r)}});var I={};var Po="@flows/react",Co="1.8.1-canary.1";var L=`${Po}@${Co}`;var w=async o=>{let{apiUrl:e,environment:t,organizationId:n,userId:r}=I;!e||!t||!n||!r||await V(e,L).sendEvent(S(d({},o),{environment:t,organizationId:n,userId:r}))},So=new Set,eo=async o=>{So.has(o)||(So.add(o),await w({name:"block-activated",blockId:o}))};var To=({blocks:o,removeBlock:e})=>{let[t,n]=(0,F.useState)([]);return(0,F.useEffect)(()=>{n(i=>{let p=o.filter(f=>f.type==="tour"),s=new Map(i.map(f=>[f.blockId,f]));return p.map(f=>{var a,v;let c=s.get(f.id),l=(v=(a=c==null?void 0:c.currentBlockIndex)!=null?a:f.currentTourIndex)!=null?v:0;return{blockId:f.id,currentBlockIndex:l}})})},[o]),(0,F.useMemo)(()=>{let i=(s,m)=>{n(f=>f.map(c=>c.blockId===s?m(c):c))},p=(s,m)=>{i(s,f=>S(d({},f),{currentBlockIndex:m}))};return t.map(({blockId:s,currentBlockIndex:m})=>{var u,g,h;let f=o.find(x=>x.id===s);if(!f)return;let c=(u=f.tourBlocks)==null?void 0:u[m],l=m===((h=(g=f.tourBlocks)==null?void 0:g.length)!=null?h:0)-1,a=x=>{w({name:"tour-update",blockId:s,properties:{currentTourIndex:x}})};return{block:f,currentBlockIndex:m,activeStep:c,continue:()=>{if(l)e(s),w({name:"transition",propertyKey:"complete",blockId:s});else{let x=m+1;p(s,x),a(x)}},previous:()=>{var _;let x=m===0?m:m-1;for(;x>0&&f.tourBlocks&&!((_=f.tourBlocks.at(x))!=null&&_.componentType);)x-=1;p(s,x),a(x)},cancel:()=>{e(s),w({name:"transition",blockId:s,propertyKey:"cancel"})}}}).filter(s=>!!s)},[o,e,t])};var k=require("react");var y=require("react"),Io=({url:o,onMessage:e,onOpen:t})=>{let[n,r]=(0,y.useState)(),i=(0,y.useRef)(void 0),[p,s]=(0,y.useState)(0),m=(0,y.useRef)(t);(0,y.useEffect)(()=>{m.current=t},[t]);let f=(0,y.useRef)(e);(0,y.useEffect)(()=>{f.current=e},[e]);let c=(0,y.useCallback)(a=>{f.current(a)},[]),l=(0,y.useCallback)(()=>{if(i.current&&(i.current(),i.current=void 0),!o)return;let a=new WebSocket(o);r(a);let v=()=>{var u;(u=m.current)==null||u.call(m),s(0)},B=()=>{r(void 0),s(u=>u+1)};a.addEventListener("open",v),a.addEventListener("close",B),a.addEventListener("message",c);let C=()=>{a.removeEventListener("open",v),a.removeEventListener("close",B),a.removeEventListener("message",c),a.readyState===WebSocket.CONNECTING?a.addEventListener("open",()=>{a.close()}):a.close(),r(void 0)};return i.current=C,C},[c,o]);(0,y.useEffect)(()=>{let a=l();return()=>{a==null||a()}},[l]),(0,y.useEffect)(()=>{if(n)return;let a=setTimeout(()=>{l()},Math.min(1e3*2**p,1e4));return()=>{clearTimeout(a)}},[p,n,l]),(0,y.useEffect)(()=>()=>{i.current&&i.current()},[])};var Ao=({apiUrl:o,environment:e,organizationId:t,userId:n,userProperties:r})=>{let[i,p]=(0,k.useState)([]),[s,m]=(0,k.useState)(!1),f=(0,k.useMemo)(()=>({environment:e,organizationId:t,userId:n}),[e,t,n]),c=(0,k.useRef)(r);(0,k.useEffect)(()=>{c.current=r},[r]);let l=(0,k.useCallback)(()=>{V(o,L).getBlocks(S(d({},f),{userProperties:c.current})).then(u=>{var g;p(u.blocks),(g=u.meta)!=null&&g.usage_limited&&m(!0)}).catch(u=>{T.error("Failed to load blocks",u)})},[o,f]),a=(0,k.useMemo)(()=>s?void 0:`${o.replace("https://","wss://").replace("http://","ws://")}/ws/sdk/block-updates?${new URLSearchParams(f).toString()}`,[o,f,s]),v=(0,k.useCallback)(u=>{let g=JSON.parse(u.data),h=new Set([...g.exitedBlockIds,...g.updatedBlocks.map(x=>x.id)]);p(x=>[...x.filter(_=>!h.has(_.id)),...g.updatedBlocks])},[]);Io({url:a,onMessage:v,onOpen:l}),(0,k.useEffect)(()=>{i.forEach(u=>{var g;Ro(u),(g=u.tourBlocks)==null||g.forEach(h=>{Ro(h)})})},[i]);let B=(0,k.useCallback)(u=>{p(g=>g.filter(h=>h.id!==u))},[]),C=(0,k.useCallback)((u,g)=>{p(h=>h.map(x=>x.id===u?g(x):x))},[]);return{blocks:i,removeBlock:B,updateBlock:C}},Ro=o=>{o.slottable&&!o.slotId&&T.error(`Encountered workflow block "${o.componentType}" that is slottable but has no slotId`)};var P=require("react"),Mo=require("react/jsx-runtime"),se=200,ie=()=>{let[o,e]=(0,P.useState)(),t=(0,P.useRef)(o);return(0,P.useEffect)(()=>{t.current=o},[o]),(0,P.useEffect)(()=>{let n=window.setInterval(()=>{let r=O();t.current!==r&&e(r)},se);return()=>{clearInterval(n)}}),o},Eo=(0,P.createContext)(void 0),D=()=>{if((0,P.useContext)(Eo)!==void 0)return O()},Fo=({children:o})=>{let e=ie();return(0,Mo.jsx)(Eo.Provider,{value:e,children:o})};var R=require("react");var No=require("react");var Oo=()=>{let{runningTours:o}=b(),e=D(),[t]=(0,No.useState)(new Map),n=(0,R.useMemo)(()=>o.filter(r=>{var i;return!!((i=r.activeStep)!=null&&i.tourWait)}),[o]);return(0,R.useEffect)(()=>{n.forEach(r=>{var p,s,m;let i=(p=r.activeStep)==null?void 0:p.tourWait;(i==null?void 0:i.interaction)==="navigation"&&E({pathname:e,operator:(s=i.page)==null?void 0:s.operator,value:(m=i.page)==null?void 0:m.value})&&r.continue()})},[e,n]),(0,R.useEffect)(()=>{let r=i=>{let p=i.target;if(!p||!(p instanceof Element))return;let s=O();n.forEach(m=>{var c,l,a;let f=(c=m.activeStep)==null?void 0:c.tourWait;if((f==null?void 0:f.interaction)==="click"){let v=E({pathname:s,operator:(l=f.page)==null?void 0:l.operator,value:(a=f.page)==null?void 0:a.value});wo({eventTarget:p,value:f.element})&&v&&m.continue()}})};return addEventListener("click",r),()=>{removeEventListener("click",r)}},[e,n]),(0,R.useEffect)(()=>{o.forEach(r=>{let i=r.activeStep,p=t.get(r.block.id);p&&p.stepId!==(i==null?void 0:i.id)&&(clearTimeout(p.timeoutId),t.delete(r.block.id))})},[o,t]),(0,R.useEffect)(()=>{n.forEach(r=>{let i=r.activeStep,p=i==null?void 0:i.tourWait;if(i&&(p==null?void 0:p.interaction)==="delay"&&p.ms!==void 0&&!t.has(r.block.id)){let s=window.setTimeout(()=>{r.continue(),t.delete(r.block.id)},p.ms);t.set(r.block.id,{timeoutId:s,stepId:i.id})}})},[n,t]),null};var M=require("react");var to=({block:o,removeBlock:e,updateBlock:t})=>{if(!o.componentType)return[];let r=vo({block:o,removeBlock:e,exitNodeCb:p=>w({name:"transition",blockId:o.id,propertyKey:p}),setStateMemory:async(p,s)=>{t(o.id,m=>{var f;return S(d({},m),{propertyMeta:(f=m.propertyMeta)==null?void 0:f.map(c=>c.type==="state-memory"&&c.key===p?S(d({},c),{value:s}):c)})}),await w({name:"set-state-memory",blockId:o.id,propertyKey:p,properties:{value:s}})}}),i={id:o.id,type:"component",component:o.componentType,props:r};return oo(i,eo)},ro=o=>{let e=o.activeStep;if(!(e!=null&&e.componentType))return[];let t=o.currentBlockIndex===0,n={id:e.id,tourBlockId:o.block.id,type:"tour-component",component:e.componentType,props:S(d({__flows:{key:e.key,workflowId:e.workflowId}},e.data),{continue:o.continue,previous:t?void 0:o.previous,cancel:o.cancel})};return oo(n,eo)};var no=o=>o==null?void 0:o.slotId;var _o=()=>{let{blocks:o}=b(),e=D();return(0,M.useMemo)(()=>o.filter(t=>E({pathname:e,operator:t.page_targeting_operator,value:t.page_targeting_values})),[o,e])},Wo=()=>{let{runningTours:o}=b(),e=D();return(0,M.useMemo)(()=>o.filter(t=>{let n=t.activeStep;return n&&E({pathname:e,operator:n.page_targeting_operator,value:n.page_targeting_values})}),[e,o])},U=()=>{let o=_o(),e=Wo(),{removeBlock:t,updateBlock:n}=b(),r=(0,M.useMemo)(()=>o.filter(p=>!p.slottable).flatMap(p=>to({block:p,removeBlock:t,updateBlock:n})),[t,n,o]),i=(0,M.useMemo)(()=>e.filter(p=>{let s=p.activeStep;return s&&!s.slottable}).flatMap(ro),[e]);return[...r,...i]},$o=o=>"type"in o,Do=o=>{var e,t,n;return $o(o)?(e=o.slotIndex)!=null?e:0:(n=(t=o.activeStep)==null?void 0:t.slotIndex)!=null?n:0},j=o=>{let e=_o(),t=Wo(),{removeBlock:n,updateBlock:r}=b();return(0,M.useMemo)(()=>{let p=e.filter(m=>m.slottable&&no(m)===o),s=t.filter(m=>{var f;return((f=m.activeStep)==null?void 0:f.slottable)&&no(m.activeStep)===o});return[...p,...s].sort((m,f)=>Do(m)-Do(f)).flatMap(m=>$o(m)?to({block:m,removeBlock:n,updateBlock:r}):ro(m))},[n,o,r,e,t])};var Vo=require("react");var Lo=require("react/jsx-runtime"),q=({block:o})=>{let{components:e}=b(),t=e[o.component];return(0,Vo.useEffect)(()=>{t||T.error(`Component not found for workflow block "${o.component}"`)},[t,o.component]),t?(0,Lo.jsx)(t,d({},o.props)):null};var Uo=require("react");var jo=require("react/jsx-runtime"),z=({block:o})=>{let{tourComponents:e}=b(),t=e[o.component];return(0,Uo.useEffect)(()=>{t||T.error(`Tour Component not found for tour block "${o.component}"`)},[t,o.component]),t?(0,jo.jsx)(t,d({},o.props)):null};var N=require("react/jsx-runtime"),qo=()=>{let o=U();return(0,N.jsx)(N.Fragment,{children:o.map(e=>e.type==="component"?(0,N.jsx)(q,{block:e},e.id):e.type==="tour-component"?(0,N.jsx)(z,{block:e},e.tourBlockId):null)})};var A=require("react/jsx-runtime"),zo=o=>pe(o)?(0,A.jsx)(me,d({},o)):o.children,pe=o=>typeof o.userId=="string",me=({children:o,apiUrl:e="https://api.flows-cloud.com",environment:t,organizationId:n,userId:r,components:i,tourComponents:p,userProperties:s})=>{I.apiUrl=e,I.environment=t,I.organizationId=n,I.userId=r;let{blocks:m,removeBlock:f,updateBlock:c}=Ao({apiUrl:e,environment:t,organizationId:n,userId:r,userProperties:s}),l=To({blocks:m,removeBlock:f});return(0,A.jsx)(Fo,{children:(0,A.jsxs)(K.Provider,{value:{blocks:m,components:i,runningTours:l,tourComponents:p,removeBlock:f,updateBlock:c},children:[o,(0,A.jsx)(qo,{}),(0,A.jsx)(Oo,{})]})})};var so=require("react/jsx-runtime"),fe=({id:o,placeholder:e})=>{let t=j(o);return t.length?t.map(n=>n.type==="component"?(0,so.jsx)(q,{block:n},n.id):n.type==="tour-component"?(0,so.jsx)(z,{block:n},n.id):null):e!=null?e:null};var ce=()=>w({name:"reset-progress"}),ae=o=>w({name:"reset-progress",workflowId:o}),ue=o=>w({name:"workflow-start",blockKey:o});

package.json

 {
   "name": "@flows/react",
-  "version": "1.8.1-canary.0",
+  "version": "1.8.1-canary.1",
   "description": "Flows React SDK – Build native product growth experiences, your way",
@@ -37,3 +37,3 @@ "keywords": [
     "tsup": "^8.4.0",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "@flows/shared": "1.0.0"
@@ -40,0 +40,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

41980

0.7%

Lines of code

269

0.75%

No dependency changes