Update output data property in final state of (#249)

currencyMachine

Author: davidkpiano

docs/final-states.mdx

@@ -139,7 +139,7 @@ const coffeeMachine = createMachine({
 
 ## Output
 
-When a machine reaches its top-level final state, it can produce output data. You can specify this output data in the `.output` property of the top-level final state:
+When a machine reaches its top-level final state, it can produce output data. You can specify this output data in the `.output` property of the machine:
 
 ```ts
 import { createMachine, createActor } from 'xstate';
@@ -152,14 +152,14 @@ const currencyMachine = createMachine({
     },
     converted: {
       type: 'final',
-      // highlight-start
-      output: ({ context }) => ({
-        amount: context.amount,
-        currency: context.currency,
-      }),
-      // highlight-end
     },
   },
+  // highlight-start
+  output: ({ context }) => ({
+    amount: context.amount,
+    currency: context.currency,
+  }),
+  // highlight-end
 });
 
 const currencyActor = createActor(currencyMachine, {
@@ -170,13 +170,26 @@ const currencyActor = createActor(currencyMachine, {
   },
 });
 
-currencyActor.onDone(() => {
-  console.log(currencyActor.getSnapshot().output);
-  // logs e.g. { amount: 12, currency: 'EUR' }
+currencyActor.subscribe({
+  complete() {
+    console.log(currencyActor.getSnapshot().output);
+    // logs e.g. { amount: 12, currency: 'EUR' }
+  },
 });
 ```
 
-- `.output` can also be a static value
+The `.output` property can also be a static value:
+
+```ts
+import { createMachine, createActor } from 'xstate';
+
+const processMachine = createMachine({
+  // ...
+  output: {
+    message: 'Process completed.',
+  },
+});
+```
 
 ## TypeScript