show refactoring of components without changing props/actor refs

README.md

@@ -3,3 +3,5 @@
 An ongoing experiment in creating a centralized actor registry and event bus for XState.
 
 To run, just clone the repo and then `yarn install && yarn dev`.
+
+NOTE: The service worker implementation requires use of Chrome during development [see Vite's docs on web workers](https://vitejs.dev/guide/features.html#web-workers) for details.

src/App.vue

@@ -8,7 +8,7 @@
       <BrowserStatus />
     </div>
     <div class="h-full w-full flex justify-center items-center">
-      <Display />
+      <Foo />
     </div>
     <Notifications />
   </div>
@@ -26,13 +26,13 @@ import {
 } from './machines/choreographer.machine'
 import BrowserStatus from './components/browserStatus.vue'
 import Notifications from './components/notifications.vue'
-import Display from './components/display.vue'
+import Foo from './components/foo.vue'
 
 export default defineComponent({
   components: {
     BrowserStatus,
     Notifications,
-    Display,
+    Foo,
   },
   setup() {
     const app = useMachine(appMachine, {

src/components/bar.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <Baz />
+  </div>
+</template>
+
+<script>
+import Baz from './baz.vue'
+
+export default {
+  components: {
+    Baz,
+  },
+}
+</script>

src/components/baz.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <Display />
+  </div>
+</template>
+
+<script>
+import Display from './display.vue'
+
+export default {
+  components: {
+    Display,
+  },
+}
+</script>

src/components/foo.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <Bar />
+  </div>
+</template>
+
+<script>
+import Bar from './bar.vue'
+
+export default {
+  components: {
+    Bar,
+  },
+}
+</script>