@joystick.js/cli-canary 0.0.0-canary.8 → 0.0.0-canary.81

package/src/functions/start/onWarn.js

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { OBJECT_REGEX } from "../../lib/regexes.js";
 import rainbowRoad from '../../lib/rainbowRoad.js';
-import getCodeFrame from "../../lib/getCodeFrame.js";
+import getCodeFrame from "../../lib/build/getCodeFrame.js";
 
 const removeLocationDataFromStackTrace = (stackTrace = "") => {
   return stackTrace.replace(OBJECT_REGEX, "");

package/src/lib/build/buildFiles.js

@@ -8,6 +8,43 @@ import browserPathExclusions from "./browserPathExclusions.js";
 import nodePaths from "./nodePaths.js";
 import nodePathExclusions from "./nodePathExclusions.js";
 import buildPlugins from "./buildPlugins.js";
+import getCodeFrame from "./getCodeFrame.js";
+import onWarn from "./onWarn.js";
+
+const handleBuildException = (exception = {}, file = '') => {
+  try {
+    const error = exception?.errors && exception?.errors[0];
+    const snippet = fs.existsSync(file)
+      ? getCodeFrame(file, {
+        line: error?.location?.line,
+        column: error?.location?.column,
+      })
+      : null;
+
+    onWarn({
+      file,
+      stack: exception?.stack,
+      line: error?.location?.line,
+      column: error?.location?.column,
+      snippet,
+      lineWithError: error?.location?.lineText?.trim(),
+      message: error?.text,
+    });
+
+    return snippet;
+  } catch (exception) {
+    throw new Error(`[actionName.handleBuildException] ${exception.message}`);
+  }
+};
+
+const handleParseFilePathFromException = (exception = {}) => {
+  try {
+    const rawErrorMessage = exception?.message?.split(':');
+    return rawErrorMessage[1] && rawErrorMessage[1]?.replace('\n', '') || '';
+  } catch (exception) {
+    throw new Error(`[actionName.handleParseFilePathFromException] ${exception.message}`);
+  }
+};
 
 const handleBuildForNode = (nodePaths = [], options = {}) => {
   try {
@@ -63,8 +100,10 @@ const handleCopyFiles = (files = [], outputPath = '') => {
     for (let i = 0; i < files?.length; i += 1) {
       const file = files[i];
       const fileContents = fs.readFileSync(file.path);
-      // TODO: I was using fs-extra here but I don't think I need it? Was using fs.outputFileSync()...
-      fs.writeFileSync(
+      
+      // NOTE: Using fs.outputFileSync() from fs-extra to ensure parent path is created
+      // if it doesn't exist (avoids need for separate fs.mkdirSync()).
+      fs.outputFileSync(
         `${outputPath || "./.joystick/build"}/${file.path}`,
         fileContents
       );
@@ -76,7 +115,7 @@ const handleCopyFiles = (files = [], outputPath = '') => {
 
 const isNodePath = (path = '') => {
   try {
-    return nodePaths.some((nodePath) => {
+    return !isNotJavaScript(path) && nodePaths.some((nodePath) => {
       return path.includes(nodePath);
     }) &&
     !nodePathExclusions.some((nodeExclusionPath) => {
@@ -89,7 +128,7 @@ const isNodePath = (path = '') => {
 
 const isBrowserPath = (path = '') => {
   try {
-    return browserPaths.some((browserPath) => {
+    return !isNotJavaScript(path) && browserPaths.some((browserPath) => {
       return path.includes(browserPath);
     }) &&
     !browserPathExclusions.some((browserExclusionPath) => {
@@ -181,9 +220,36 @@ const buildFiles = async (options, { resolve, reject }) => {
     
     handleCopyFiles(copyFiles, options?.outputPath);
     
-    await Promise.all([
-      handleBuildForBrowser(browserFiles, options),
-      handleBuildForNode(nodeFiles, options),
+    const fileResults = await Promise.all([
+      handleBuildForBrowser(browserFiles, options).then(() => {
+        return { success: true };
+      }).catch((exception) => {
+        const file = handleParseFilePathFromException(exception);
+        console.log(file, exception);
+        const snippet = handleBuildException(exception, file);
+        
+        return {
+          success: false,
+          path: file,
+          error: {
+            stack: exception?.stack,
+            snippet,
+          },
+        };
+      }),
+      handleBuildForNode(nodeFiles, options).catch((exception) => {
+        const file = handleParseFilePathFromException(exception);
+        const snippet = handleBuildException(exception, file);
+        
+        return {
+          success: false,
+          path: file,
+          error: {
+            stack: exception?.stack,
+            snippet,
+          },
+        };
+      }),
     ]);
     
     if (options?.environment !== 'development') {
@@ -192,7 +258,7 @@ const buildFiles = async (options, { resolve, reject }) => {
       })); 
     }
     
-    resolve();
+    resolve(fileResults);
   } catch (exception) {
     reject(`[buildFiles] ${exception.message}`);
   }

package/src/lib/build/buildPlugins.js

@@ -25,22 +25,25 @@ export default {
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
-            );
+          );
+          
           const isLayoutComponent = [getPlatformSafePath("ui/layouts")].some(
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
-            );
+          );
+          
           const isPageComponent = [getPlatformSafePath("ui/pages")].some(
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
-            );
+          );
+          
           const isEmailComponent = [getPlatformSafePath("email/")].some(
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
-            );
+          );
 
           if (
             shouldSetSSRId ||
@@ -51,7 +54,7 @@ export default {
             const code = fs.readFileSync(
               getPlatformSafePath(args.path),
               "utf-8"
-              );
+            );
 
             // NOTE: Check to see if we have a valid component file.
             const joystickUIMatches = code.match(JOYSTICK_UI_REGEX) || [];
@@ -65,8 +68,8 @@ export default {
               console.warn(
                 chalk.yellowBright(
                   `All Joystick components in the ui directory must have an export default statement (e.g., export default MyComponent, export default MyLayout, or export default MyPage). Please check the file at ${args.path}.`
-                  )
-                  );
+                )
+              );
               console.log(" ");
               return;
             }
@@ -110,7 +113,7 @@ export default {
 
               export default ${componentName};
                 `
-                );
+              );
             }
 
             if (componentName && isPageComponent) {
@@ -128,7 +131,7 @@ export default {
 
                 export default ${componentName};
                 `
-                );
+              );
             }
 
             return {
@@ -143,25 +146,29 @@ export default {
 
       build.onEnd(() => {
         return new Promise((resolve) => {
-          const shouldSetComponentId = [
-            getPlatformSafePath("ui/"),
-            getPlatformSafePath("email/"),
+          for (let i = 0; i < build?.initialOptions?.entryPoints?.length; i += 1) {
+            const entryPoint = build?.initialOptions?.entryPoints[i];
+            const shouldSetComponentId = [
+              getPlatformSafePath("ui/"),
+              getPlatformSafePath("email/"),
             ].some((bootstrapTarget) => {
-              return build.initialOptions.outfile.includes(bootstrapTarget);
+              return entryPoint.includes(bootstrapTarget);
             });
 
-          if (shouldSetComponentId) {
-            const file = fs.readFileSync(build.initialOptions.outfile, "utf-8");
-            const joystickUIMatches =
+            if (shouldSetComponentId) {
+              const file = fs.readFileSync(`${build?.initialOptions?.outdir}/${entryPoint}`, "utf-8");
+              const joystickUIMatches =
               file?.match(JOYSTICK_COMPONENT_REGEX) || [];
 
-            if (joystickUIMatches?.length > 0) {
-              let contents = setComponentId(file)?.replace(
-                /\.component\(\/\*\*\//g,
-                ".component("
+              if (joystickUIMatches?.length > 0) {
+                let contents = setComponentId(file)?.replace(
+                  /\.component\(\/\*\*\//g,
+                  ".component("
                 );
-              fs.writeFileSync(build.initialOptions.outfile, contents);
-            }
+                
+                fs.writeFileSync(`${build?.initialOptions?.outdir}/${entryPoint}`, contents);
+              }
+            } 
           }
 
           resolve();

package/src/lib/build/getCodeFrame.js

@@ -1,8 +1,7 @@
 import fs from 'fs';
 import { codeFrameColumns } from "@babel/code-frame";
 
-export default (id = "", location = {}) => {
-  const file = fs.readFileSync(id, "utf-8");
-  const frame = codeFrameColumns(file, { start: location });
-  return frame;
+export default (path = "", location = {}) => {
+  const file = fs.readFileSync(path, "utf-8");
+  return codeFrameColumns(file, { start: location });
 };

package/src/lib/build/onWarn.js

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import { OBJECT_REGEX } from "../regexes.js";
 import rainbowRoad from '../rainbowRoad.js';
-import getCodeFrame from "../getCodeFrame.js";
+import getCodeFrame from "./getCodeFrame.js";
 
 const removeLocationDataFromStackTrace = (stackTrace = "") => {
   return stackTrace.replace(OBJECT_REGEX, "");

package/src/lib/build/removeDeletedDependenciesFromMap.js

@@ -1,5 +1,5 @@
 import fs from 'fs';
-import readFileDependencyMap from "./readFileDependencyMap.js";
+import readFileDependencyMap from "../dev/readFileDependencyMap.js";
 
 export default (deletedDependencies = []) => {
   const fileDependencyMap = readFileDependencyMap();

package/src/lib/dev/cleanup.js

@@ -1,34 +1,26 @@
-/* eslint-disable consistent-return */
+// NOTE: This module is intended to be run as a child_process as part of
+// a SIGINT or SIGTERM event.
 
-const actionMethod = () => {
-  try {
-    // Perform a single step in your action here.
-  } catch (exception) {
-    throw new Error(`[cleanup.actionMethod] ${exception.message}`);
-  }
-};
+import ps from "ps-node";
 
-const validateOptions = (options) => {
-  try {
-    if (!options) throw new Error('options object is required.');
-    if (!options.someOption) throw new Error('options.someOption is required.');
-  } catch (exception) {
-    throw new Error(`[cleanup.validateOptions] ${exception.message}`);
-  }
-};
+process.title = "joystick_cleanup";
 
-const cleanup = (options, { resolve, reject }) => {
-  try {
-    validateOptions(options);
-    // Call action methods in sequence here.
-    resolve();
-  } catch (exception) {
-    reject(`[cleanup] ${exception.message}`);
-  }
+const killProcess = (pid = 0) => {
+  return new Promise((resolve) => {
+    ps.kill(pid, () => {
+      resolve();
+    });
+  });
 };
 
-export default (options) =>
-  new Promise((resolve, reject) => {
-    cleanup(options, { resolve, reject });
-  });
+process.on('message', async (message) => {
+  const parsedMessage = JSON.parse(message);
+  const processIds = parsedMessage?.processIds;
+
+  for (let i = 0; i < processIds?.length; i += 1) {
+    const processId = processIds[i];
+    await killProcess(processId);
+  }
 
+  process.exit();
+});

package/src/lib/dev/databases/mongodb/index.js

@@ -4,7 +4,7 @@ import child_process from "child_process";
 import { kill as killPortProcess } from 'cross-port-killer';
 import isWindows from "../../isWindows.js";
 import CLILog from "../../../../lib/CLILog.js";
-import getProcessIdFromPort from "../../getProcessIdFromPort.js";
+import getProcessIdFromPort from "../../../getProcessIdFromPort.js";
 
 const getMongoProcessId = async (port = 2601) => {
   const pids = await getProcessIdFromPort(port);

package/src/lib/dev/databases/postgresql/index.js

@@ -4,8 +4,8 @@ import util from "util";
 import commandExists from "command-exists";
 import child_process from "child_process";
 import { kill as killPortProcess } from 'cross-port-killer';
-import getProcessIdFromPort from "../../getProcessIdFromPort.js";
-import CLILog from "../../../../lib/CLILog.js";
+import getProcessIdFromPort from "../../../getProcessIdFromPort.js";
+import CLILog from "../../../CLILog.js";
 
 const exec = util.promisify(child_process.exec);
 

package/src/lib/dev/databases/providerMap.js

@@ -1,4 +1,4 @@
-import connectMongoDB from './mongodb/connect.js.js';
+import connectMongoDB from './mongodb/connect.js';
 import connectPostgreSQL from './postgresql/connect.js';
 
 export default {

package/src/lib/dev/index.js

@@ -10,7 +10,6 @@ import loadSettings from "./loadSettings.js";
 import Loader from "../loader.js";
 import startDatabases from "./startDatabases.js";
 import runTests from "./runTests.js";
-import cleanup from "./cleanup.js";
 import startHMR from "./startHMR.js";
 import startApp from "./startApp.js";
 import requiredFiles from "./requiredFiles.js";
@@ -21,14 +20,7 @@ import filesToCopy from "../filesToCopy.js";
 import { SETTINGS_FILE_NAME_REGEX } from "../regexes.js";
 import getCodependenciesForFile from "./getCodependenciesForFile.js";
 import removeDeletedDependenciesFromMap from "../build/removeDeletedDependenciesFromMap.js";
-
-const nodeMajorVersion = parseInt(
-  process?.version?.split(".")[0]?.replace("v", ""),
-  10
-);
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+import chalk from "chalk";
 
 const getDatabaseProcessIds = () => {
   try {
@@ -61,7 +53,7 @@ const getDatabaseProcessIds = () => {
   }
 };
 
-const handleSignalEvents = (processIds = []) => {
+const handleSignalEvents = (processIds = [], nodeMajorVersion = 0, __dirname = '') => {
   try {
     const execArgv = ["--no-warnings"];
 
@@ -83,6 +75,8 @@ const handleSignalEvents = (processIds = []) => {
       }
     );
 
+    console.log(cleanupProcess);
+    
     process.on("SIGINT", async () => {
       const databaseProcessIds = getDatabaseProcessIds();
       cleanupProcess.send(JSON.stringify(({ processIds: [...processIds, ...databaseProcessIds] })));
@@ -99,6 +93,53 @@ const handleSignalEvents = (processIds = []) => {
   }
 };
 
+const handleServerProcessMessages = () => {
+  try {
+    process.serverProcess.on("message", (message) => {
+      const processMessages = ["SERVER_CLOSED"];
+
+      if (!processMessages.includes(message)) {
+        process.loader.stable(message);
+      }
+    });
+  } catch (exception) {
+    throw new Error(`[dev.handleServerProcessMessages] ${exception.message}`);
+  }
+};
+
+const handleServerProcessSTDIO = () => {
+  try {
+    if (process.serverProcess) {
+      process.serverProcess.on("error", (error) => {
+        console.log(error);
+      });
+
+      process.serverProcess.stdout.on("data", (data) => {
+        const message = data.toString();
+
+        if (message && message.includes("App running at:")) {
+          process.loader.stable(message);
+        } else {
+          if (message && !message.includes("BUILD_ERROR")) {
+            console.log(message);
+          }
+        }
+      });
+
+      process.serverProcess.stderr.on("data", (data) => {
+        process.loader.stop();
+
+        CLILog(data.toString(), {
+          level: "danger",
+          docs: "https://cheatcode.co/docs/joystick",
+        });
+      });
+    }
+  } catch (exception) {
+    throw new Error(`[dev.handleServerProcessSTDIO] ${exception.message}`);
+  }
+};
+
 const handleAddOrChangeFile = async (context = {}, path = '') => {
   try {
     if (context.isAddingOrChangingFile) {
@@ -228,7 +269,8 @@ const getWatchChangeContext = (event = '', path = '') => {
   try {
     const isHTMLUpdate = path === "index.html";
     const isUIPath = path?.includes("ui/") || path === 'index.css' || isHTMLUpdate;
-    const isUIUpdate = (process.hmrProcess.hasConnections && isUIPath) || false;
+    // TODO: Flimsy. May want to wait until HMR and server are up to do the builds/watching.
+    const isUIUpdate = (process.hmrProcess && process.hmrProcess.hasConnections && isUIPath) || false;
     const isSettingsUpdate = path?.match(SETTINGS_FILE_NAME_REGEX)?.length > 0;
     const isDirectory = fs.statSync(path).isDirectory();
     const isFile = fs.statSync(path).isFile();
@@ -292,21 +334,26 @@ const startFileWatcher = (options = {}) => {
 
 const runInitialBuild = async (buildSettings = {}) => {
   try {
+    process.loader.text('Building app...');
+
     const filesToBuild = getFilesToBuild(buildSettings?.excludedPaths, "start");
-    const fileResults = await buildFiles(
-      filesToBuild,
-      null,
-      process.env.NODE_ENV
-    );
+    const fileResults = await buildFiles({
+      files: filesToBuild,
+      environment: process.env.NODE_ENV
+    });
 
     const hasErrors = [...fileResults]
       .filter((result) => !!result)
       .map(({ success }) => success)
       .includes(false);
 
-    // TODO: Prevent startup if this build fails (hasError > 0)
-
+    // NOTE: If the initial build fails, exit the startup process.
+    if (hasErrors) {
+      console.log(chalk.redBright('Failed to start app. Correct the errors above and run joystick start again.\n'));
+      process.exit(1);
+    }
   } catch (exception) {
+    console.warn(exception);
     throw new Error(`[dev.runInitialBuild] ${exception.message}`);
   }
 };
@@ -352,18 +399,22 @@ const checkForRequiredFiles = () => {
 
       let error = `The following paths are missing and required in a Joystick project:\n\n`;
 
-      error += `Files:\n\n`;
+      if (files?.length > 0) {
+        error += `  > Required Files:\n\n`;
 
-      for (let i = 0; i < files?.length; i += 1) {
-        const file = files[i];
-        error += `${file.path}\n\n`;
+        for (let i = 0; i < files?.length; i += 1) {
+          const file = files[i];
+          error += `  /${file.path}\n`;
+        }
       }
 
-      error += `Directories:\n\n`;
+      if (directories?.length > 0) {
+        error += `  > Required Directories:\n\n`;
 
-      for (let i = 0; i < directories?.length; i += 1) {
-        const file = directories[i];
-        error += `${file.path}`;
+        for (let i = 0; i < directories?.length; i += 1) {
+          const file = directories[i];
+          error += `  /${file.path}\n`;
+        }
       }
 
       CLILog(error, {
@@ -395,7 +446,7 @@ const warnInvalidJoystickEnvironment = () => {
       process.exit(0);
     }
 
-    if (process.env.NODE_ENV !== 'test' && (!hasJoystickFolder || !hasTestsFolder)) {
+    if (process.env.NODE_ENV !== 'test' && !hasJoystickFolder) {
       CLILog(
         "joystick start must be run in a directory with a .joystick folder.",
         {
@@ -425,28 +476,60 @@ const dev = async (options, { resolve, reject }) => {
     validateOptions(options);
     initProcess(options);
     
+    const nodeMajorVersion = parseInt(
+      process?.version?.split(".")[0]?.replace("v", ""),
+      10
+    );
+
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+
     warnInvalidJoystickEnvironment();
     checkForRequiredFiles();
 
     const settings = await loadSettings({
       environment: options.environment,
-      process: options.process,
     });
 
-    await startDatabases(settings.parsed);
+    await startDatabases({
+      environment: options.environment,
+      port: options.port,
+      settings: settings.parsed
+    });
 
     await runInitialBuild(settings?.parsed?.config?.build);
     await startFileWatcher(options);
 
-    handleSignalEvents();
+    const serverProcess = await startApp({
+      nodeMajorVersion,
+      port: options?.port,
+    });
+
+    if (serverProcess) {
+      process.serverProcess = serverProcess;
+      handleServerProcessSTDIO();
+      handleServerProcessMessages();
+    }
+
+    // NOTE: Scope this out here so we can reference the processId below.
+    let hmrProcess;
+
+    if (options?.environment !== 'test') {
+      hmrProcess = await startHMR({
+        nodeMajorVersion,
+        __dirname,
+      });
+    }
+
+    handleSignalEvents(
+      [serverProcess.pid, hmrProcess.pid],
+      nodeMajorVersion,
+      __dirname
+    );
 
-//    if (options?.environment !== 'test') {
-//      await startHMR();
-//    }
 //
 //    if (options?.environment === 'test') {
 //      await runTests(options);
-//      await cleanup();
 //    }
 
     /*
@@ -456,7 +539,9 @@ const dev = async (options, { resolve, reject }) => {
       - [x] If environment === 'test', check that both a .joystick fo lder exists AND a /tests folder
             exists. If no /tests, log out docs on how to scaffold your tests.
       - [x] Load settings.<environment>.json.
-      - [ ] Start databases relative to options.environment (development|test) from settings.<environment>.json.
+      - [x] Start databases relative to options.environment (development|test) from settings.<environment>.json.
+      - [x] Run the initial build
+      - [x] Start the file watcher
       - [ ] Start the app as normal from the build directory.
       - [ ] If environment === 'test', run the tests.
       - [ ] If environment === 'test', after tests, run process.exit(0).
@@ -464,6 +549,7 @@ const dev = async (options, { resolve, reject }) => {
     
     resolve();
   } catch (exception) {
+    console.warn(exception);
     reject(`[dev] ${exception.message}`);
   }
 };

package/src/lib/dev/isWindows.js

@@ -0,0 +1,3 @@
+import os from "os";
+
+export default os.platform() === "win32";

package/src/lib/dev/loadSettings.js

@@ -73,9 +73,7 @@ const loadSettings = (options, { resolve, reject }) => {
     const settings = getSettings(settingsPath);
     warnIfInvalidJSONInSettings(settings);
 
-    if (options?.process) {
-      options.process.env.JOYSTICK_SETTINGS = settings;
-    }
+    process.env.JOYSTICK_SETTINGS = settings;
 
     resolve({
       parsed: JSON.parse(settings),