Clicking GO multiple times and wait for 2 secs - doesn't advance

Fixes #6

lib/MachineHelpers.tsx

@@ -4,8 +4,15 @@ import { Interpreter } from 'xstate';
 
 export const MachineHelpersContext = React.createContext<{
   service: Interpreter<any, any, any>;
+  metadata?: MDXMetadata;
 }>({} as any);
 
+export interface MDXMetadata {
+  eventPayloads?: {
+    [eventType: string]: any;
+  };
+}
+
 export const State = (props: { children: string }) => {
   const context = useContext(MachineHelpersContext);
   const [state] = useService(context.service);
@@ -36,11 +43,14 @@ export const Event = (props: { children: string }) => {
 
   const { children, ...event } = props;
 
+  const defaultEvent = context.metadata?.eventPayloads?.[props.children] || {};
+
   return (
     <button
       className="text-left"
       onClick={() => {
         send({
+          ...defaultEvent,
           ...event,
           type: props.children,
         });

lib/machines/debounce.mdx

@@ -1,3 +1,13 @@
+export const metadata = {
+  eventPayloads: {
+    GO: {
+      action: () => {
+        alert('Action fired!');
+      },
+    },
+  },
+};
+
 # Debounce
 
 Debouncing is a handy tool for lightening the load on heavy tasks. If you have a search box that you want to use for filtering on the server, debouncing will help you deduplicate multiple calls.
@@ -6,8 +16,8 @@ Debouncing can be troublesome to implement in vanilla Javascript, but state mach
 
 ## Pressing Go
 
-We start off in the <State>idle</State> state. Pressing <Event action={() => alert('Action fired!')}>GO</Event> will send us into <State>debouncing</State>.
+We start off in the <State>idle</State> state. Pressing <Event>GO</Event> will send us into <State>debouncing</State>.
 
 From there, we have a countdown of two seconds before the action we passed into the event is fired. Which in this case, is `alert('Action fired!')`.
 
-But if we press <Event action={() => alert('Action fired!')}>GO</Event> multiple times, we stay in <State>debouncing</State> longer than two seconds, and only the _last_ action we passed in gets fired.
+But if we press <Event>GO</Event> multiple times, we stay in <State>debouncing</State> longer than two seconds, and only the _last_ action we passed in gets fired.

pages/machines/[id].tsx

@@ -13,6 +13,7 @@ import {
   Context,
   Event,
   MachineHelpersContext,
+  MDXMetadata,
   Service,
   State,
   WholeContext,
@@ -24,6 +25,7 @@ const useGetImports = (slug: string, deps: any[]) => {
   const [imports, setImports] = useState<{
     machine: StateMachine<any, any, any>;
     mdxDoc: any;
+    mdxMetadata?: MDXMetadata;
   }>();
 
   const getMachine = async () => {
@@ -37,6 +39,7 @@ const useGetImports = (slug: string, deps: any[]) => {
     setImports({
       machine: machineImport.default,
       mdxDoc: mdxDoc.default,
+      mdxMetadata: mdxDoc.metadata,
     });
   };
 
@@ -106,6 +109,7 @@ const MachinePage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
                 mdxDoc={imports.mdxDoc}
                 fileText={props.fileText}
                 meta={props.meta}
+                mdxMetadata={imports.mdxMetadata}
               ></ShowMachinePage>
             )}
           </>
@@ -162,6 +166,7 @@ const ShowMachinePage = (props: {
   fileText: string;
   slug: string;
   meta: MetadataItem;
+  mdxMetadata?: MDXMetadata;
 }) => {
   const service = useInterpret(props.machine, {
     devTools: true,
@@ -183,7 +188,9 @@ const ShowMachinePage = (props: {
   }, [fileTextRef, props.fileText]);
 
   return (
-    <MachineHelpersContext.Provider value={{ service }}>
+    <MachineHelpersContext.Provider
+      value={{ service, metadata: props.mdxMetadata }}
+    >
       <div className="flex justify-center">
         <div className="">
           {!hasDismissed && (