Support multiple input patterns

Author: Daniel K

.changeset/beige-seahorses-leave.md

@@ -0,0 +1,5 @@
+---
+'xstate-codegen': minor
+---
+
+CLI now supports multiple input patterns. There are some minor changes in output of logs, but nothing too serious. Also the check if some files are matching the given patterns was lost in the process.

packages/xstate-compiled/examples/withConfig.machine.ts renamed to packages/xstate-compiled/examples/withConfigMachine.ts

@@ -9,24 +9,24 @@
     "@babel/core": "^7.10.4",
     "@babel/helper-split-export-declaration": "^7.11.0",
     "@babel/parser": "^7.10.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@babel/plugin-transform-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.2.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "babel-plugin-macros": "^2.8.0",
+    "chokidar": "^3.4.3",
     "colors": "^1.4.0",
-    "gaze": "^1.1.3",
     "glob": "^7.1.6",
     "handlebars": "^4.7.6",
     "handlebars-helpers": "^0.10.0",
     "pkg-up": "^3.1.0",
+    "promise.allsettled": "^1.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.3",
     "xstate": "^4.12.0"
   },
   "devDependencies": {
-    "@types/rimraf": "^3.0.0",
     "@changesets/cli": "^2.9.2",
     "@types/babel-plugin-macros": "^2.8.2",
     "@types/babel__core": "^7.1.9",
@@ -35,9 +35,11 @@
     "@types/handlebars-helpers": "^0.5.2",
     "@types/minimist": "^1.2.0",
     "@types/node": "^14.0.14",
+    "@types/promise.allsettled": "^1.0.3",
+    "@types/rimraf": "^3.0.0",
     "@xstate/react": "^0.8.1",
-    "typescript": "^3.9.7",
-    "nodemon": "2.0.4"
+    "nodemon": "2.0.4",
+    "typescript": "^3.9.7"
   },
   "scripts": {
     "local-link": "yarn unlink && npm run build && npm run chmod:index && yarn link",

packages/xstate-compiled/package.json

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 
-import gaze from 'gaze';
+import chokidar from 'chokidar';
+import allSettled from 'promise.allsettled';
 import fs from 'fs';
 import path from 'path';
 import minimist from 'minimist';
@@ -9,125 +10,92 @@ import { extractMachines } from './extractMachines';
 import { printToFile, printJsFiles } from './printToFile';
 
 const { _: arrayArgs, ...objectArgs } = minimist(process.argv.slice(2));
+const onlyOnce = objectArgs.once;
 
-const [, , pattern] = process.argv;
+const [, , ...patterns] = process.argv;
 
-type RecordOfArrays = Record<string, string[]>;
-
-const flattenRecords = (
-  filesAsRecord: Record<string, RecordOfArrays | string[]> | string[],
-): string[] => {
-  if (Array.isArray(filesAsRecord)) {
-    return filesAsRecord;
-  }
-  return Object.values(filesAsRecord).reduce(
-    (array, paths) => array.concat(flattenRecords(paths)),
-    [] as any,
-  ) as string[];
-};
-
-if (!pattern) {
-  console.log('You must pass a glob, for instance "**/src/**.machine.ts"');
+if (patterns.length === 0) {
+  console.log(
+    'You must pass at least one glob, for instance "**/src/**.machine.ts"',
+  );
   process.exit(1);
 }
 
-const toRelative = (filePath: string) => path.relative(process.cwd(), filePath);
-
 const typedSuffix = /\.typed\.(js|ts|tsx|jsx)$/;
-
 const tsExtension = /\.(ts|tsx|js|jsx)$/;
+function isValidFile(filePath: string) {
+  return !typedSuffix.test(filePath) && tsExtension.test(filePath);
+}
 
-let fileCache: Record<
+const fileCache: Record<
   string,
   ReturnType<typeof introspectMachine> & { id: string }
 > = {};
 
-gaze(pattern, {}, async function(err, watcher) {
-  if (err) {
-    console.log(err);
-    process.exit(1);
-  }
+printJsFiles();
+console.clear();
 
-  const filesAsRecord: Record<string, string[]> = watcher.watched() as any;
+const watcher = chokidar.watch(patterns, {
+  persistent: !onlyOnce,
+});
 
-  const files = flattenRecords(filesAsRecord);
+watcher.on('error', (err) => {
+  console.error(err);
+  process.exit(1);
+});
 
-  const filteredFiles = files.filter((filePath) => {
-    return !typedSuffix.test(filePath) && tsExtension.test(filePath);
-  });
+const toRelative = (filePath: string) => path.relative(process.cwd(), filePath);
 
-  if (filteredFiles.length === 0) {
-    console.log('No files found from that glob');
-    process.exit(1);
+watcher.on('all', async (eventName, filePath) => {
+  if (!isValidFile(filePath)) {
+    return;
   }
-
-  printJsFiles();
-  console.clear();
-
-  const addToCache = async (filePath: string) => {
-    let code: string = '';
-    try {
-      code = fs.readFileSync(filePath, 'utf8');
-    } catch (e) {}
-    if (!code) {
-      console.log(`Could not read from path ${filePath}`);
-      return;
-    }
-    if (!code.includes('@xstate/compiled')) {
-      return;
-    }
-    const machines = await extractMachines(filePath);
-    if (machines.length === 0) {
-      return;
-    }
-    const { machine, id } = machines[0];
-    fileCache[filePath] = { ...introspectMachine(machine), id };
-  };
-
-  await filteredFiles.reduce(async (promise, filePath) => {
-    await promise;
-    try {
-      console.log(`Scanning File: `.cyan.bold + toRelative(filePath).gray);
-      await addToCache(filePath);
-    } catch (e) {
-      console.log(e);
-      if (objectArgs.once) {
-        console.log('Could not complete due to errors'.red.bold);
-        // @ts-ignore
-        this.close();
-        process.exit(1);
-      }
-    }
-  }, Promise.resolve());
-
-  printToFile(fileCache, objectArgs.outDir);
-
-  if (objectArgs.once) {
-    console.log('Completed!'.green.bold);
-    // @ts-ignore
-    this.close();
-    process.exit(0);
+  if (eventName === 'add') {
+    console.log(`Scanning File: `.cyan.bold + toRelative(filePath).gray);
+    await addToCache(filePath);
   }
-
-  // @ts-ignore
-  this.on('changed', async (filePath) => {
+  if (eventName === 'change') {
     console.log(`File Changed: `.cyan.bold + toRelative(filePath).gray);
     await addToCache(filePath);
-    printToFile(fileCache, objectArgs.outDir);
-  });
-  // @ts-ignore
-  this.on('added', async (filePath) => {
-    console.log(`File Added: `.green.bold + toRelative(filePath).gray);
-    await addToCache(filePath);
-    printToFile(fileCache, objectArgs.outDir);
-  });
-
-  // @ts-ignore
-  this.on('deleted', async (filePath) => {
+  }
+  if (eventName === 'unlink') {
     console.log(`File Deleted: `.red.bold + toRelative(filePath).gray);
-    delete fileCache[filePath];
-    printToFile(fileCache, objectArgs.outDir);
-  });
+    removeFromCache(filePath);
+  }
+  printToFile(fileCache, objectArgs.outDir);
+});
+
+process.on('exit', () => {
+  console.log('Completed!'.green.bold);
+});
 
-  console.log(`Watching for file changes in: `.cyan.bold + pattern.gray);
+watcher.on('ready', async () => {
+  if (!onlyOnce) {
+    patterns.forEach((pattern) => {
+      console.log(`Watching for file changes in: `.cyan.bold + pattern);
+    });
+  }
 });
+
+async function addToCache(filePath: string) {
+  let code: string = '';
+  try {
+    code = fs.readFileSync(filePath, 'utf8');
+  } catch (e) {}
+  if (!code) {
+    throw new Error(`Could not read from path ${filePath}`);
+  }
+  if (!code.includes('@xstate/compiled')) {
+    return;
+  }
+  const machines = await extractMachines(filePath);
+  if (machines.length === 0) {
+    return;
+  }
+  const { machine, id } = machines[0];
+  fileCache[filePath] = { ...introspectMachine(machine), id };
+}
+
+function removeFromCache(filePath: string) {
+  delete fileCache[filePath];
+}

packages/xstate-compiled/src/index.ts

@@ -9,7 +9,7 @@ execSync(
   `cd examples && ${
     // If in CI, use node. If in local development, use ts-node
     process.env.CI ? 'node ../bin/index.js' : 'ts-node -T ../src/index.ts'
-  } "*.machine.ts" --once`,
+  } "*.machine.ts" "*Machine.ts" --once`,
   {
     stdio: 'inherit',
   },