https://excaliburjs.com/assets/js/4356b179.dbeebf31.js

1"use strict";(globalThis.webpackChunksite=globalThis.webpackChunksite||[]).push([[658],{56138(s,e,l){l.r(e),l.d(e,{assets:()=>t,contentTitle:()=>r,default:()=>h,frontMatter:()=>i,metadata:()=>n,toc:()=>a});const n=JSON.parse('{"id":"tutorials/How-to\'s/Actions Primer/action-events","title":"Events and Async Flow","description":"Events and Async Flow","source":"@site/docs/00-tutorials/How-to\'s/02-Actions Primer/05-action-events.mdx","sourceDirName":"00-tutorials/How-to\'s/02-Actions Primer","slug":"/events-and-async-flow","permalink":"/docs/events-and-async-flow","draft":false,"unlisted":false,"editUrl":"https://github.com/excaliburjs/Excalibur/tree/main/site/docs/00-tutorials/How-to\'s/02-Actions Primer/05-action-events.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"title":"Events and Async Flow","slug":"/events-and-async-flow","section":"Tutorials"},"sidebar":"learnSidebar","previous":{"title":"Sequences and Parallel Actions","permalink":"/docs/sequences-and-parallel"},"next":{"title":"Custom Actions!","permalink":"/docs/custom-actions"}}');var c=l(74848),o=l(28453);const i={title:"Events and Async Flow",slug:"/events-and-async-flow",section:"Tutorials"},r=void 0,t={},a=[{value:"Events and Async Flow",id:"events-and-async-flow",level:2},{value:"Actions and the Event System",id:"actions-and-the-event-system",level:3},{value:"Common Action Events",id:"common-action-events",level:3},{value:"The ActionEvent Object",id:"the-actionevent-object",level:3},{value:"Using Promises with Actions",id:"using-promises-with-actions",level:3},{value:"Demonstration",id:"demonstration",level:3}];function d(s){const e={a:"a",admonition:"admonition",code:"code",div:"div",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,o.R)(),...s.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h2,{id:"events-and-async-flow",children:"Events and Async Flow"}),"\n",(0,c.jsx)(e.p,{children:"So far, we\u2019ve focused on how actions are scheduled and composed.\nIn this section, we\u2019ll look at how actions communicate with the rest of the game."}),"\n",(0,c.jsx)(e.p,{children:"Actions don\u2019t run in isolation \u2014 they participate in Excalibur\u2019s event system and can also be used with Promises and async / await to create linear, readable game logic."}),"\n",(0,c.jsx)(e.h3,{id:"actions-and-the-event-system",children:"Actions and the Event System"}),"\n",(0,c.jsx)(e.p,{children:"As actions run, they emit events through the actor they are attached to."}),"\n",(0,c.jsx)(e.p,{children:"These events allow other parts of your game to:"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"Observe when actions start or complete"}),"\n",(0,c.jsx)(e.li,{children:"React to changes in behavior"}),"\n",(0,c.jsx)(e.li,{children:"Interrupt or replace running actions"}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:"This keeps actions decoupled from higher-level game logic."}),"\n",(0,c.jsx)(e.h3,{id:"common-action-events",children:"Common Action Events"}),"\n",(0,c.jsx)(e.p,{children:"Actions emit lifecycle events during execution."}),"\n",(0,c.jsx)(e.p,{children:"The two action events are:"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"Action Start \u2013 when an action begins running"}),"\n",(0,c.jsx)(e.li,{children:"Action Complete \u2013 when an action finishes successfully"}),"\n"]}),"\n",(0,c.jsx)(e.p,{children:"These events are dispatched on the actor running the action."}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"actor."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"on"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'actioncomplete'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", ("}

1),(0,c.jsx)(e.span,{style:{color:"#953800"},children:"evt"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  console."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'An action completed:'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", evt.action);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"actor."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"on"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'actioncomplete'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", ("}),(0,c.jsx)(e.span,{style:{color:"#FFA657"},children:"evt"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  console."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'An action completed:'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", evt.action);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsx)(e.admonition,{type:"note",children:(0,c.jsx)(e.p,{children:"Action events fire per-action, even when actions are part of a sequence or parallel group."})}),"\n",(0,c.jsx)(e.h3,{id:"the-actionevent-object",children:"The ActionEvent Object"}),"\n",(0,c.jsx)(e.p,{children:"When an action-related event fires, Excalibur passes an ActionEvent object to the event handler."}),"\n",(0,c.jsx)(e.p,{children:"This event object provides context about:"}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:"Which action triggered the event"}),"\n",(0,c.jsx)(e.li,{children:"Which entity was running it"}),"\n"]}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"actor."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"on"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'actioncomplete'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", ("}),(0,c.jsx)(e.span,{style:{color:"#953800"},children:"evt"}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:":"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#953800"},children:"ActionEvent"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  console."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(evt.action);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"});"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"actor."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"on"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'actioncomplete'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", ("}),(0,c.jsx)(e.span,{style:{color:"#FFA657"},children:"evt"}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:":"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,c.jsx)(e.span,{style:{color:"#FFA657"},children:"ActionEvent"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:") "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  console."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(evt.action);"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"});"})})]})})]})]}),"\n",(0,c.jsx)(e.p,{children:"The ActionEvent is your primary way to connect action execution back to gameplay logic."}),"\n",(0,c.jsx)(e.h3,{id:"using-promises-with-actions",children:"Using Promises with Actions"}),"\n",(0,c.jsxs)(e.p,{children:["There is a utility method on the actionContext and actionComponent, ",(0,c.jsx)(e.code,{children:"toPromise()"}),"."]}),"\n",(0,c.jsx)(e.p,{children:"This let's you manage a returned promise that resolves with either the action or the queue overall clears."}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// Run an action and convert its lifecycle into a Promise"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"await"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" actor.actions"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"moveTo"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"400"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"200"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:")"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"toPromise"}),(0,c.jsx)(e.span,{style:{color:"#24292F"}

1,children:"();"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// This line runs only after the move action completes"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"console."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'Move finished!'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:");"})]})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// Run an action and convert its lifecycle into a Promise"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"await"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" actor.actions"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"moveTo"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"400"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"200"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toPromise"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"();"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// This line runs only after the move action completes"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"console."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'Move finished!'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:");"})]})]})})]})]}),"\n",(0,c.jsx)(e.p,{children:"Or you can use this with the .then API."}),"\n",(0,c.jsxs)(e.div,{className:"shiki-twoslash-fragment",children:[(0,c.jsxs)(e.pre,{className:"shiki github-light",style:{backgroundColor:"#ffffff",color:"#24292f"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"actor.actions"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"moveTo"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#0550AE"},children:"50"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:")"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"toPromise"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"()"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#CF222E"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:" console."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#0A3069"},children:"'Done!'"}),(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"));"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#24292F"},children:"actor.actions."}),(0,c.jsx)(e.span,{style:{color:"#8250DF"},children:"clearActions"}),(0,c.jsx)(e.span,{style:{color:"#24292F"}

1,children:"();"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#6E7781"},children:"// The Promise still resolves"})})]})})]}),"\n",(0,c.jsxs)(e.pre,{className:"shiki github-dark",style:{backgroundColor:"#0d1117",color:"#c9d1d9"},children:[(0,c.jsx)(e.div,{className:"language-id",children:"ts"}),(0,c.jsx)(e.div,{className:"code-container",children:(0,c.jsxs)(e.code,{children:[(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"actor.actions"})}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"moveTo"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"100"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:", "}),(0,c.jsx)(e.span,{style:{color:"#79C0FF"},children:"50"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:")"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toPromise"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"()"})]}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"  ."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"then"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(() "}),(0,c.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:" console."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"log"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"("}),(0,c.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'Done!'"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"));"})]}),(0,c.jsx)(e.div,{className:"line"}),(0,c.jsxs)(e.div,{className:"line",children:[(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"actor.actions."}),(0,c.jsx)(e.span,{style:{color:"#D2A8FF"},children:"clearActions"}),(0,c.jsx)(e.span,{style:{color:"#C9D1D9"},children:"();"})]}),(0,c.jsx)(e.div,{className:"line",children:(0,c.jsx)(e.span,{style:{color:"#8B949E"},children:"// The Promise still resolves"})})]})})]})]}),"\n",(0,c.jsx)(e.h3,{id:"demonstration",children:"Demonstration"}),"\n",(0,c.jsxs)(e.p,{children:["In the ",(0,c.jsx)(e.a,{href:"/docs/custom-actions#real-example-of-custom-action",children:"Custom Actions"})," live example, we demonstrate how to use the action events"]})]})}function h(s={}){const{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,c.jsx)(e,{...s,children:(0,c.jsx)(d,{...s})}):d(s)}},28453(s,e,l){l.d(e,{R:()=>i,x:()=>r});var n=l(96540);const c={},o=n.createContext(c);function i(s){const e=n.useContext(o);return n.useMemo(function(){return"function"==typeof s?s(e):{...e,...s}},[e,s])}function r(s){let e;return e=s.disableParentContext?"function"==typeof s.components?s.components(c):s.components||c:i(s.components),n.createElement(o.Provider,{value:e},s.children)}}}]);