Draft: Sky 1.0

.env.template

@@ -0,0 +1,3 @@
+VITE_SKY_API_KEY=""
+VITE_SKY_HOST='localhost:1999'
+VITE_SKY_API_URL='http://localhost:3000/registry/api/sky'

package.json

@@ -8,22 +8,22 @@
     "sky": "xstate sky \"./src/**/*.ts?(x)\""
   },
   "dependencies": {
-    "@statelyai/sky": "0.0.11",
-    "@statelyai/sky-react": "0.0.11",
-    "@xstate/react": "4.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "xstate": "5.2.1"
+    "@statelyai/sky": "0.0.14",
+    "@statelyai/sky-react": "0.0.14",
+    "@xstate/react": "4.1.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "xstate": "5.15.0"
   },
   "devDependencies": {
-    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@vitejs/plugin-react": "^4.1.1",
-    "@xstate/cli": "0.5.12",
-    "prettier": "^3.1.0",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "typescript": "5.2.2",
-    "vite": "^4.5.0"
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@xstate/cli": "0.5.17",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "typescript": "5.5.4",
+    "vite": "^5.3.4"
   }
 }

src/app.tsx

@@ -1,64 +1,43 @@
-import { useEffect, useState } from 'react';
-import Counter from './examples/counter';
-import TrafficLight from './examples/trafficLight/trafficLight';
-import Home from './home';
+import { createSkyClient } from '@statelyai/sky';
+import { useMachine } from '@xstate/react';
+import { useState } from 'react';
+import { __unsafe_getAllOwnEventDescriptors, InspectionEvent } from 'xstate';
+import { NextEvents } from './components/NextEvents';
+import { machine } from './machine';
 
-const pages = ['home', 'counter', 'trafficlight'] as const;
-type Page = (typeof pages)[number];
+const sky = createSkyClient({
+  apiKey: import.meta.env.VITE_SKY_API_KEY,
+  sessionId: 'onboarding',
+});
 
-function getComponent(page: Page) {
-  switch (page) {
-    case 'home':
-      return <Home />;
-    case 'counter':
-      return <Counter />;
-    case 'trafficlight':
-      return <TrafficLight />;
-  }
-}
+export default function App() {
+  const [receivedEvents, setReceivedEvents] = useState<InspectionEvent[]>([]);
+  const [state, send, actor] = useMachine(machine, {
+    inspect: sky.inspect,
+  });
 
-function getPage() {
-  if (typeof window !== 'undefined') {
-    const queryParams = new URLSearchParams(window.location.search);
-    const pageQueryParam = queryParams.get('page');
-    if (pageQueryParam && pages.includes(pageQueryParam as Page)) {
-      return pageQueryParam as Page;
-    }
-  }
-  return 'home';
-}
+  sky.inspectListener = (event) => {
+    console.log('event received from Sky', event);
+    setReceivedEvents((events) => [...events, event]);
+  };
 
-function setPageQueryParam(page: Page) {
-  if (typeof window !== 'undefined') {
-    window.history.replaceState(
-      null,
-      '',
-      `?page=${page}` + window.location.hash,
-    );
-  }
-}
-
-export default function App() {
-  const [page, setPage] = useState<Page>(getPage());
-  useEffect(() => setPageQueryParam(page), [page]);
+  const nextEvents = __unsafe_getAllOwnEventDescriptors(actor.getSnapshot());
 
   return (
     <div className="app">
       <div className="app-header">
-        <p className="sky-header">Stately Sky Starter ⛅</p>
-        <div className="app-pages">
-          {pages.map((p) => (
-            <button
-              key={p}
-              className={p === page ? 'app-active-page' : 'app-page'}
-              onClick={() => setPage(p)}
-            >
-              {p}
-            </button>
-          ))}
-        </div>
+        <p className="sky-header">Stately Sky 1.0 WIP ⛅</p>
+      </div>
+      <NextEvents nextEvents={nextEvents} send={send} />
+      <div>
+        <p>State of local actor</p>
+        <pre>actor.sessionId: {actor.sessionId}</pre>
+        <pre>{JSON.stringify(state)}</pre>
+        <p>{`Received ${receivedEvents.length} events from Sky`}</p>
+        {receivedEvents.map((event, index) => (
+          <pre key={`event-${index}`}>{JSON.stringify(event)}</pre>
+        ))}
       </div>
-      {getComponent(page)}
     </div>
   );
 }

src/components/NextEvents.tsx

@@ -9,7 +9,7 @@ export function NextEvents<T extends AnyEventObject>({
 }) {
   return (
     <div className="next-events">
-      <h2>{nextEvents.length > 1 ? 'Next possible events' : 'Next event'}</h2>
+      <p>Next possible event{nextEvents.length > 1 ? 's' : ''}</p>
       <div className="event-buttons">
         {nextEvents.map((event) => (
           <button key={event} onClick={() => send?.({ type: event } as T)}>