@joystick.js/cli-canary 0.0.0-canary.7 → 0.0.0-canary.71

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
       );
@@ -129,6 +168,13 @@ const getFilePlatform = (path = '') => {
     const isBrowser = isBrowserPath(path);
     const isNode = isNodePath(path);
     
+    console.log({
+      path,
+      isCopy,
+      isBrowser,
+      isNode,
+    });
+    
     if (isCopy) {
       platform = "copy";
     }
@@ -181,9 +227,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 +265,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/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

@@ -21,14 +21,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 +54,7 @@ const getDatabaseProcessIds = () => {
   }
 };
 
-const handleSignalEvents = (processIds = []) => {
+const handleSignalEvents = (processIds = [], nodeMajorVersion = 0, __dirname = '') => {
   try {
     const execArgv = ["--no-warnings"];
 
@@ -99,6 +92,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 +268,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 +333,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 +398,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 +445,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,24 +475,56 @@ 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 (options?.environment !== 'test') {
-//      await startHMR();
-//    }
+    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 runTests(options);
@@ -456,7 +538,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 +548,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),

package/src/lib/dev/startApp.js

@@ -1,16 +1,59 @@
-/* eslint-disable consistent-return */
+import child_process from "child_process";
+import path from "path";
 
-const actionMethod = () => {
+const handleStartServerProcess = (execArgv = {}, sessionsBeforeHMRUpdate = {}) => {
   try {
-    // Perform a single step in your action here.
+    process.loader.text('Starting app...');
+
+    return child_process.fork(
+      path.resolve(".joystick/build/index.server.js"),
+      [],
+      {
+        execArgv,
+        // NOTE: Pipe stdin, stdout, and stderr. IPC establishes a message channel so we
+        // communicate with the child_process.
+        silent: true,
+        env: {
+          FORCE_COLOR: "1",
+          LOGS_PATH: process.env.LOGS_PATH,
+          NODE_ENV: process.env.NODE_ENV,
+          ROOT_URL: process.env.ROOT_URL,
+          PORT: process.env.PORT,
+          JOYSTICK_SETTINGS: process.env.JOYSTICK_SETTINGS,
+          HMR_SESSIONS: JSON.stringify(sessionsBeforeHMRUpdate),
+        },
+      }
+    );
   } catch (exception) {
-    throw new Error(`[startApp.actionMethod] ${exception.message}`);
+    throw new Error(`[startApp.handleStartServerProcess] ${exception.message}`);
+  }
+};
+
+const getExecArgs = (nodeMajorVersion = 0) => {
+  try {
+    const execArgv = ["--no-warnings"];
+
+    if (nodeMajorVersion < 19) {
+      execArgv.push("--experimental-specifier-resolution=node");
+    }
+
+    if (
+      process.env.NODE_ENV === "development" &&
+        process.env.IS_DEBUG_MODE === "true"
+      ) {
+      execArgv.push("--inspect");
+    }
+
+    return execArgv;
+  } catch (exception) {
+    throw new Error(`[startApp.getExecArgs] ${exception.message}`);
   }
 };
 
 const validateOptions = (options) => {
   try {
     if (!options) throw new Error('options object is required.');
+    if (!options.nodeMajorVersion) throw new Error('options.nodeMajorVersion is required.');
     if (!options.port) throw new Error('options.port is required.');
   } catch (exception) {
     throw new Error(`[startApp.validateOptions] ${exception.message}`);
@@ -20,8 +63,11 @@ const validateOptions = (options) => {
 const startApp = (options, { resolve, reject }) => {
   try {
     validateOptions(options);
-    // Call action methods in sequence here.
-    resolve();
+
+    const execArgv = getExecArgs(options?.nodeMajorVersion);
+    const serverProcess = handleStartServerProcess(execArgv);
+
+    return resolve(serverProcess);
   } catch (exception) {
     reject(`[startApp] ${exception.message}`);
   }