Make the xstate sky command compatible with more React and TypeScri…

…pt sources (#385)

* wip

* Use babelTs parser for recast

* Add changeset

* improved logging

.changeset/sweet-radios-hunt.md

@@ -0,0 +1,5 @@
+---
+'@xstate/cli': patch
+---
+
+Make the `xstate sky` command compatible with more React and TypeScript sources.

apps/cli/package.json

@@ -11,7 +11,7 @@
     "build": "esbuild src/bin.ts --outdir=bin --platform=node --format=cjs --bundle --loader:.node=file"
   },
   "devDependencies": {
-    "@statelyai/sky": "0.0.3",
+    "@statelyai/sky": "0.0.4",
     "@types/isomorphic-fetch": "^0.0.36",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.0.1",

apps/cli/src/bin.ts

@@ -61,13 +61,12 @@ program
     '-k, --api-key <key>',
     'API key to use for interacting with the Stately Studio',
   )
-  .option('-h, --host <host>', 'URL pointing to the Stately Studio host')
   .action(
     async (
       filesPattern: string,
       opts: { watch?: boolean; apiKey?: string; host?: string },
     ) => {
-      const envApiKey = process.env.STATELY_API_KEY;
+      const envApiKey = process.env.SKY_API_KEY;
       const apiKey = opts.apiKey ?? envApiKey;
 
       if (opts.watch) {

apps/cli/src/sky/writeConfigToFiles.ts

@@ -17,7 +17,7 @@ export const writeConfigToFiles = async (opts: {
 }) => {
   try {
     if (doesSkyConfigExist(opts.uri)) {
-      console.log('SkyConfig for machine already exists, skipping');
+      console.log(`${opts.uri} - skipping, sky config already exists`);
       return;
     }
     const fileContents = await fs.readFile(opts.uri, 'utf8');
@@ -58,6 +58,7 @@ export const writeConfigToFiles = async (opts: {
             });
 
             await modifySkyConfigSource({ filePath: opts.uri });
+            console.log(`${opts.uri} - updated with sky config`);
           } catch (error) {
             console.error(error);
           }

packages/machine-extractor/src/sky/skyConfigModifySource.ts

@@ -2,12 +2,14 @@ import * as fs from 'fs/promises';
 import * as path from 'path';
 import * as prettier from 'prettier';
 import * as recast from 'recast';
-import * as parser from 'recast/parsers/typescript';
+import * as babelTs from 'recast/parsers/babel-ts';
 import { ALLOWED_SKY_CONFIG_CALL_EXPRESSION_NAMES } from './skyConfigUtils';
 
 export const modifySkyConfigSource = async (opts: { filePath: string }) => {
   const fileContents = await fs.readFile(opts.filePath, 'utf8');
-  const ast = recast.parse(fileContents, { parser });
+  const ast = recast.parse(fileContents, {
+    parser: babelTs,
+  });
   const b = recast.types.builders;
   const importIdentifier = 'skyConfig';
   const name = path

packages/machine-extractor/src/sky/skyConfigUtils.ts

@@ -1,4 +1,5 @@
 export const ALLOWED_SKY_CONFIG_CALL_EXPRESSION_NAMES = [
-  'actorFromStately',
   'machineFromStately',
+  'actorFromStately',
+  'useStatelyActor',
 ];

packages/shared/package.json

@@ -4,7 +4,7 @@
   "main": "dist/xstate-tools-shared.cjs.js",
   "license": "MIT",
   "dependencies": {
-    "@statelyai/sky": "0.0.3",
+    "@statelyai/sky": "0.0.4",
     "@xstate/machine-extractor": "^0.12.0"
   },
   "scripts": {