@joystick.js/cli-canary 1.0.0-beta.74 → 1.0.0-beta.75

package/canary.json

@@ -1,6 +1,6 @@
 {
   "name": "@joystick.js/cli-canary",
-  "version": "0.0.0-canary.203",
+  "version": "0.0.0-canary.239",
   "type": "module",
   "description": "CLI for the Joystick JavaScript framework.",
   "main": "development.js",

package/dist/lib/build/buildFiles.js

@@ -12,6 +12,10 @@ import getCodeFrame from "./getCodeFrame.js";
 import onWarn from "./onWarn.js";
 const handleBuildException = (exception = {}, file = "") => {
   try {
+    console.warn({
+      exception,
+      file
+    });
     const error = exception?.errors && exception?.errors[0];
     const snippet = fs.existsSync(file) ? getCodeFrame(file, {
       line: error?.location?.line,
@@ -28,7 +32,7 @@ const handleBuildException = (exception = {}, file = "") => {
     });
     return snippet;
   } catch (exception2) {
-    throw new Error(`[actionName.handleBuildException] ${exception2.message}`);
+    throw new Error(`[buildFiles.handleBuildException] ${exception2.message}`);
   }
 };
 const handleParseFilePathFromException = (exception = {}) => {
@@ -36,18 +40,18 @@ const handleParseFilePathFromException = (exception = {}) => {
     const rawErrorMessage = exception?.message?.split(":");
     return rawErrorMessage[1] && rawErrorMessage[1]?.replace("\n", "") || "";
   } catch (exception2) {
-    throw new Error(`[actionName.handleParseFilePathFromException] ${exception2.message}`);
+    throw new Error(`[buildFiles.handleParseFilePathFromException] ${exception2.message}`);
   }
 };
 const handleBuildForNode = (nodePaths2 = [], options = {}) => {
   try {
     return esbuild.build({
+      allowOverwrite: true,
       platform: "node",
       format: "esm",
       bundle: false,
       entryPoints: nodePaths2?.map((file) => file.path),
       entryNames: "[dir]/[name]",
-      // TODO: Make sure we don't need outbase here so the paths map correctly.
       outdir: options?.outputPath || "./.joystick/build",
       outbase: "./",
       define: {
@@ -66,6 +70,7 @@ const handleBuildForNode = (nodePaths2 = [], options = {}) => {
 const handleBuildForBrowser = (browserPaths2 = [], options = {}) => {
   try {
     return esbuild.build({
+      allowOverwrite: true,
       target: "es2020",
       platform: "browser",
       format: "esm",

package/dist/lib/build/buildPlugins.js

@@ -5,11 +5,13 @@ import {
   JOYSTICK_UI_REGEX,
   EXPORT_DEFAULT_REGEX,
   JOYSTICK_COMPONENT_REGEX,
-  JOYSTICK_COMMENT_REGEX
+  JOYSTICK_COMMENT_REGEX,
+  EXAMPLE_CODE_REGEX
 } from "../regexes.js";
 import generateId from "../generateId.js";
 import getPlatformSafePath from "../getPlatformSafePath.js";
 import setComponentId from "./setComponentId.js";
+import replaceExamples from "./replaceExamples.js";
 var buildPlugins_default = {
   bootstrapComponent: {
     name: "bootstrapComponent",
@@ -17,7 +19,7 @@ var buildPlugins_default = {
       const ssrId = generateId();
       build.onLoad({ filter: /\.js$/ }, (args = {}) => {
         try {
-          const shouldSetSSRId = [getPlatformSafePath("ui/")].some(
+          const shouldSetComponentId = [getPlatformSafePath("ui/")].some(
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
@@ -37,7 +39,7 @@ var buildPlugins_default = {
               return args.path.includes(bootstrapTarget);
             }
           );
-          if (shouldSetSSRId || isLayoutComponent || isPageComponent || isEmailComponent) {
+          if (shouldSetComponentId || isLayoutComponent || isPageComponent || isEmailComponent) {
             const code = fs.readFileSync(
               getPlatformSafePath(args.path),
               "utf-8"
@@ -56,7 +58,9 @@ var buildPlugins_default = {
               console.log(" ");
               return;
             }
-            let contents = setComponentId(code)?.replace(
+            const examples = code.match(EXAMPLE_CODE_REGEX) || [];
+            let contents = replaceExamples(code);
+            contents = contents?.replace(
               /\.component\(\/\*\*\//g,
               ".component("
             );
@@ -103,6 +107,10 @@ var buildPlugins_default = {
                 `
               );
             }
+            for (let i = 0; i < examples?.length; i += 1) {
+              const exampleToRestore = examples[i];
+              contents = contents.replace(`%example:${i}%`, exampleToRestore);
+            }
             return {
               contents,
               loader: "js"
@@ -125,11 +133,17 @@ var buildPlugins_default = {
             if (shouldSetComponentId) {
               const file = fs.readFileSync(`${build?.initialOptions?.outdir}/${entryPoint}`, "utf-8");
               const joystickUIMatches = file?.match(JOYSTICK_COMPONENT_REGEX) || [];
+              const examples = file.match(EXAMPLE_CODE_REGEX) || [];
+              let contents = replaceExamples(file);
               if (joystickUIMatches?.length > 0) {
-                let contents = setComponentId(file)?.replace(
+                contents = setComponentId(contents)?.replace(
                   /\.component\(\/\*\*\//g,
                   ".component("
                 );
+                for (let i2 = 0; i2 < examples?.length; i2 += 1) {
+                  const exampleToRestore = examples[i2];
+                  contents = contents.replace(`%example:${i2}%`, exampleToRestore);
+                }
                 fs.writeFileSync(`${build?.initialOptions?.outdir}/${entryPoint}`, contents);
               }
             }

package/dist/lib/build/replaceExamples.js

@@ -0,0 +1,13 @@
+import { EXAMPLE_CODE_REGEX } from "../regexes.js";
+var replaceExamples_default = (code = "") => {
+  let exampleIndex = 0;
+  return code.replace(
+    EXAMPLE_CODE_REGEX,
+    () => {
+      return `%example:${exampleIndex++}%`;
+    }
+  );
+};
+export {
+  replaceExamples_default as default
+};

package/dist/lib/checkIfPortOccupied.js

@@ -0,0 +1,27 @@
+import net from "net";
+const resetClient = (client = {}) => {
+  client.end();
+  client.destroy();
+  client.unref();
+};
+var checkIfPortOccupied_default = (port = 2600) => {
+  return new Promise((resolve) => {
+    const client = new net.Socket();
+    client.once("connect", () => {
+      resetClient(client);
+      resolve(true);
+    });
+    client.once("error", () => {
+      resetClient(client);
+      resolve(false);
+    });
+    client.connect({
+      port,
+      host: "127.0.0.1"
+    }, function() {
+    });
+  });
+};
+export {
+  checkIfPortOccupied_default as default
+};

package/dist/lib/dev/getFilesToBuild.js

@@ -30,7 +30,7 @@ var getFilesToBuild_default = (excludedPaths = [], context = null) => {
       return path.includes(excludedPath);
     });
   }).filter((path) => {
-    return !fs.lstatSync(path).isDirectory();
+    return fs.existsSync(path) && !fs.lstatSync(path).isDirectory();
   });
 };
 export {

package/dist/lib/dev/index.js

@@ -19,6 +19,8 @@ import { SETTINGS_FILE_NAME_REGEX } from "../regexes.js";
 import getCodependenciesForFile from "./getCodependenciesForFile.js";
 import removeDeletedDependenciesFromMap from "../build/removeDeletedDependenciesFromMap.js";
 import chalk from "chalk";
+import checkIfPortOccupied from "../checkIfPortOccupied.js";
+import { killPortProcess } from "kill-port-process";
 const processIds = [];
 const getDatabaseProcessIds = () => {
   try {
@@ -173,6 +175,29 @@ const handleServerProcessSTDIO = (options = {}) => {
     throw new Error(`[dev.handleServerProcessSTDIO] ${exception.message}`);
   }
 };
+const handleDeletePath = (context = {}, path2 = "", options = {}) => {
+  try {
+    if (context?.isDeletingPath) {
+      if (context.isExistingPathInBuild) {
+        const pathToUnlink = `./.joystick/build/${path2}`;
+        const stats = fs.lstatSync(pathToUnlink);
+        if (stats.isDirectory()) {
+          fs.rmdirSync(pathToUnlink, { recursive: true });
+        }
+        if (stats.isFile()) {
+          fs.unlinkSync(pathToUnlink);
+        }
+      }
+      if (context.isUIUpdate) {
+        handleNotifyHMRClients(context.isHTMLUpdate);
+      } else {
+        handleRestartApplicationProcess(options);
+      }
+    }
+  } catch (exception) {
+    throw new Error(`[dev.handleDeletePath] ${exception.message}`);
+  }
+};
 const handleAddOrChangeFile = async (context = {}, path2 = "", options = {}) => {
   try {
     if (context.isAddingOrChangingFile) {
@@ -205,6 +230,7 @@ const handleAddOrChangeFile = async (context = {}, path2 = "", options = {}) =>
       }
     }
   } catch (exception) {
+    console.warn(exception);
     throw new Error(`[dev.handleAddOrChangeFile] ${exception.message}`);
   }
 };
@@ -238,7 +264,7 @@ const handleCopyFile = (context = {}, path2 = "", options = {}) => {
 };
 const handleCopyDirectory = (context = {}, path2 = "", options = {}) => {
   try {
-    if (context.isFileToCopy && context.isDirectory && !context.isExistingDirectoryInBuild) {
+    if (context.isFileToCopy && context.isDirectory && !context.isExistingPathInBuild) {
       fs.mkdirSync(`./.joystick/build/${path2}`);
       if (context.isUIUpdate) {
         handleNotifyHMRClients(context.isHTMLUpdate);
@@ -287,7 +313,11 @@ const handleStartAppServer = async (options = {}) => {
 const handleNotifyHMRClients = async (indexHTMLChanged = false) => {
   try {
     if (process.hmrProcess) {
-      const settings = await loadSettings({ environment: process.env.NODE_ENV });
+      const databaseProcessIds = getDatabaseProcessIds();
+      const settings = await loadSettings({
+        environment: process.env.NODE_ENV,
+        processIds: [...processIds, ...databaseProcessIds]
+      });
       process.hmrProcess.send(
         JSON.stringify({
           type: "RESTART_SERVER",
@@ -307,27 +337,31 @@ const getWatchChangeContext = (event = "", path2 = "") => {
     const isUIPath = path2?.includes("ui/") || path2 === "index.css" || isHTMLUpdate;
     const isUIUpdate = process.hmrProcess && process.hmrProcess.hasConnections && isUIPath || false;
     const isSettingsUpdate = path2?.match(SETTINGS_FILE_NAME_REGEX)?.length > 0;
-    const isDirectory = fs.statSync(path2).isDirectory();
-    const isFile = fs.statSync(path2).isFile();
-    const isExistingDirectoryInSource = isDirectory && fs.existsSync(path2);
-    const isExistingDirectoryInBuild = !!fs.existsSync(`./.joystick/build/${path2}`);
-    const isAddDirectory = event === "addDir" && isExistingDirectoryInSource && !isExistingDirectoryInBuild;
+    const pathExists = fs.existsSync(path2);
+    const isDirectory = pathExists && fs.statSync(path2).isDirectory();
+    const isFile = pathExists && fs.statSync(path2).isFile();
+    const isExistingPathInSource = isDirectory && pathExists;
+    const isExistingPathInBuild = !!fs.existsSync(`./.joystick/build/${path2}`);
+    const isAddDirectory = event === "addDir" && isExistingPathInSource && !isExistingPathInBuild;
     const isFileToCopy = !!filesToCopy.find((fileToCopy) => fileToCopy.path === path2);
-    const isExistingFileInSource = isFile && fs.existsSync(path2);
+    const isExistingFileInSource = isFile && pathExists;
     const isAddingOrChangingFile = ["add", "change"].includes(event) && isExistingFileInSource;
+    const isDeletingPath = ["unlink", "unlinkDir"].includes(event);
     return {
+      pathExists,
       isHTMLUpdate,
       isUIPath,
       isUIUpdate,
       isSettingsUpdate,
       isDirectory,
       isFile,
-      isExistingDirectoryInSource,
-      isExistingDirectoryInBuild,
+      isExistingPathInSource,
+      isExistingPathInBuild,
       isAddDirectory,
       isFileToCopy,
       isExistingFileInSource,
-      isAddingOrChangingFile
+      isAddingOrChangingFile,
+      isDeletingPath
     };
   } catch (exception) {
     throw new Error(`[dev.getWatchChangeContext] ${exception.message}`);
@@ -349,10 +383,12 @@ const startFileWatcher = (options = {}) => {
       handleCopyFile(watchChangeContext, path2, options);
       handleAddDirectory(watchChangeContext, path2, options);
       await handleAddOrChangeFile(watchChangeContext, path2, options);
+      await handleDeletePath(watchChangeContext, path2, options);
       if (watchChangeContext?.isSettingsUpdate) {
+        const databaseProcessIds = getDatabaseProcessIds();
         await loadSettings({
           environment: options.environment,
-          process: options.process
+          processIds: [...processIds, ...databaseProcessIds]
         });
       }
     });
@@ -470,6 +506,16 @@ const warnInvalidJoystickEnvironment = () => {
     throw new Error(`[dev.warnInvalidJoystickEnvironment] ${exception.message}`);
   }
 };
+const handleCleanup = () => {
+  try {
+    if (process.cleanupProcess) {
+      const databaseProcessIds = getDatabaseProcessIds();
+      process.cleanupProcess.send(JSON.stringify({ processIds: [...processIds, ...databaseProcessIds] }));
+    }
+  } catch (exception) {
+    throw new Error(`[actionName.handleCleanup] ${exception.message}`);
+  }
+};
 const validateOptions = (options) => {
   try {
     if (!options)
@@ -483,6 +529,18 @@ const validateOptions = (options) => {
 const dev = async (options, { resolve, reject }) => {
   try {
     validateOptions(options);
+    const port = parseInt(options?.port || 2600, 10);
+    const appPortOccupied = await checkIfPortOccupied(port);
+    const hmrPortOccupied = await checkIfPortOccupied(port + 1);
+    if (appPortOccupied) {
+      CLILog(`Port ${options?.port} is already occupied. To start Joystick on this port, clear it and try again.`, {
+        level: "danger"
+      });
+      process.exit(0);
+    }
+    if (hmrPortOccupied) {
+      await killPortProcess(port + 1);
+    }
     initProcess(options);
     const nodeMajorVersion = parseInt(
       process?.version?.split(".")[0]?.replace("v", ""),

package/dist/lib/dev/loadSettings.js

@@ -1,7 +1,7 @@
 import fs from "fs";
 import CLILog from "../CLILog.js";
 import isValidJSONString from "../isValidJSONString.js";
-const warnIfInvalidJSONInSettings = (settings = "") => {
+const warnIfInvalidJSONInSettings = (settings = "", processIds = []) => {
   try {
     const isValidJSON = isValidJSONString(settings);
     const context = process.env.NODE_ENV === "test" ? "test" : "start";
@@ -14,6 +14,9 @@ const warnIfInvalidJSONInSettings = (settings = "") => {
           tools: [{ title: "JSON Linter", url: "https://jsonlint.com/" }]
         }
       );
+      if (process.cleanupProcess) {
+        process.cleanupProcess.send(JSON.stringify({ processIds }));
+      }
       process.exit(0);
     }
   } catch (exception) {
@@ -27,7 +30,7 @@ const getSettings = (settingsPath = "") => {
     throw new Error(`[loadSettings.getSettings] ${exception.message}`);
   }
 };
-const warnIfSettingsNotFound = (settingsPath = "") => {
+const warnIfSettingsNotFound = (settingsPath = "", processIds = []) => {
   try {
     const hasSettingsFile = fs.existsSync(settingsPath);
     const context = process.env.NODE_ENV === "test" ? "test" : "start";
@@ -39,6 +42,9 @@ const warnIfSettingsNotFound = (settingsPath = "") => {
           docs: `https://cheatcode.co/docs/joystick/cli/${context}`
         }
       );
+      if (process.cleanupProcess) {
+        process.cleanupProcess.send(JSON.stringify({ processIds }));
+      }
       process.exit(0);
     }
   } catch (exception) {
@@ -59,9 +65,9 @@ const loadSettings = (options, { resolve, reject }) => {
   try {
     validateOptions(options);
     const settingsPath = `${process.cwd()}/settings.${options.environment}.json`;
-    warnIfSettingsNotFound(settingsPath);
+    warnIfSettingsNotFound(settingsPath, options.processIds);
     const settings = getSettings(settingsPath);
-    warnIfInvalidJSONInSettings(settings);
+    warnIfInvalidJSONInSettings(settings, options.processIds);
     process.env.JOYSTICK_SETTINGS = settings;
     resolve({
       parsed: JSON.parse(settings),

package/dist/lib/regexes.js

@@ -1,3 +1,4 @@
+const EXAMPLE_CODE_REGEX = new RegExp(/\<example\>[^%]+\<\/example\>/g);
 const EXPORT_DEFAULT_REGEX = new RegExp(/export default [a-zA-Z0-9]+/g);
 const JOYSTICK_COMMENT_REGEX = new RegExp(/\<\!\-\-(.|\n|\r)*?-->/g);
 const JOYSTICK_COMPONENT_REGEX = new RegExp(/\.component\(\{/g);
@@ -5,6 +6,7 @@ const JOYSTICK_UI_REGEX = new RegExp(/@joystick.js\/ui/g);
 const OBJECT_REGEX = new RegExp(/{([^;]*)}/g);
 const SETTINGS_FILE_NAME_REGEX = new RegExp(/settings.[a-zA-Z0-9]+.json/g);
 export {
+  EXAMPLE_CODE_REGEX,
   EXPORT_DEFAULT_REGEX,
   JOYSTICK_COMMENT_REGEX,
   JOYSTICK_COMPONENT_REGEX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joystick.js/cli-canary",
-  "version": "1.0.0-beta.74",
+  "version": "1.0.0-beta.75",
   "type": "module",
   "description": "CLI for the Joystick JavaScript framework.",
   "main": "development.js",

package/src/lib/build/buildFiles.js

@@ -13,6 +13,11 @@ import onWarn from "./onWarn.js";
 
 const handleBuildException = (exception = {}, file = '') => {
   try {
+    console.warn({
+      exception,
+      file,
+    });
+
     const error = exception?.errors && exception?.errors[0];
     const snippet = fs.existsSync(file)
       ? getCodeFrame(file, {
@@ -33,7 +38,7 @@ const handleBuildException = (exception = {}, file = '') => {
 
     return snippet;
   } catch (exception) {
-    throw new Error(`[actionName.handleBuildException] ${exception.message}`);
+    throw new Error(`[buildFiles.handleBuildException] ${exception.message}`);
   }
 };
 
@@ -42,19 +47,19 @@ const handleParseFilePathFromException = (exception = {}) => {
     const rawErrorMessage = exception?.message?.split(':');
     return rawErrorMessage[1] && rawErrorMessage[1]?.replace('\n', '') || '';
   } catch (exception) {
-    throw new Error(`[actionName.handleParseFilePathFromException] ${exception.message}`);
+    throw new Error(`[buildFiles.handleParseFilePathFromException] ${exception.message}`);
   }
 };
 
 const handleBuildForNode = (nodePaths = [], options = {}) => {
   try {
     return esbuild.build({
+      allowOverwrite: true,
       platform: "node",
       format: "esm",
       bundle: false,
       entryPoints: nodePaths?.map((file) => file.path),
       entryNames: '[dir]/[name]',
-      // TODO: Make sure we don't need outbase here so the paths map correctly.
       outdir: options?.outputPath || "./.joystick/build",
       outbase: './',
       define: {
@@ -74,6 +79,7 @@ const handleBuildForNode = (nodePaths = [], options = {}) => {
 const handleBuildForBrowser = (browserPaths = [], options = {}) => {
   try {
     return esbuild.build({
+      allowOverwrite: true,
       target: "es2020",
       platform: "browser",
       format: "esm",

package/src/lib/build/buildPlugins.js

@@ -5,11 +5,12 @@ import {
   JOYSTICK_UI_REGEX,
   EXPORT_DEFAULT_REGEX,
   JOYSTICK_COMPONENT_REGEX,
-  JOYSTICK_COMMENT_REGEX,
+  JOYSTICK_COMMENT_REGEX, EXAMPLE_CODE_REGEX,
 } from "../regexes.js";
 import generateId from "../generateId.js";
 import getPlatformSafePath from "../getPlatformSafePath.js";
 import setComponentId from "./setComponentId.js";
+import replaceExamples from "./replaceExamples.js";
 
 export default {
   bootstrapComponent: {
@@ -21,7 +22,7 @@ export default {
 
       build.onLoad({ filter: /\.js$/ }, (args = {}) => {
         try {
-          const shouldSetSSRId = [getPlatformSafePath("ui/")].some(
+          const shouldSetComponentId = [getPlatformSafePath("ui/")].some(
             (bootstrapTarget) => {
               return args.path.includes(bootstrapTarget);
             }
@@ -46,7 +47,7 @@ export default {
           );
 
           if (
-            shouldSetSSRId ||
+            shouldSetComponentId ||
             isLayoutComponent ||
             isPageComponent ||
             isEmailComponent
@@ -74,20 +75,20 @@ export default {
               return;
             }
 
-            let contents = setComponentId(code)?.replace(
+            // NOTE: Replace any <example> bracketed code with a placeholder. This ensures
+            // that we don't accidentally include any mounting code in example code included
+            // as content on the page.
+            const examples = code.match(EXAMPLE_CODE_REGEX) || [];
+            let contents = replaceExamples(code);
+
+            contents = contents?.replace(
               /\.component\(\/\*\*\//g,
               ".component("
-              );
-
-            // contents = contents.replace(
-            //   "ui.component({",
-            //   `ui.component({\n  _ssrId: '${ssrId}',`
-            // );
+            );
 
             // NOTE: Remove any commented code inside of render() so it doesn't get rendered during SSR
             // or in the browser.
             contents = contents.replace(JOYSTICK_COMMENT_REGEX, "");
-
             const exportDefaultMatchParts =
               (exportDefaultMatch && exportDefaultMatch.split(" ")) || [];
             const componentName = exportDefaultMatchParts.pop();
@@ -134,6 +135,11 @@ export default {
               );
             }
 
+            for (let i = 0; i < examples?.length; i += 1) {
+              const exampleToRestore = examples[i];
+              contents = contents.replace(`%example:${i}%`, exampleToRestore);
+            }
+
             return {
               contents,
               loader: "js",
@@ -160,21 +166,32 @@ export default {
               const joystickUIMatches =
               file?.match(JOYSTICK_COMPONENT_REGEX) || [];
 
+              // NOTE: Replace any <example> bracketed code with a placeholder. This ensures
+              // that we don't accidentally add a componentId to any example code included
+              // as content on the page.
+              const examples = file.match(EXAMPLE_CODE_REGEX) || [];
+              let contents = replaceExamples(file);
+
               if (joystickUIMatches?.length > 0) {
-                let contents = setComponentId(file)?.replace(
+                contents = setComponentId(contents)?.replace(
                   /\.component\(\/\*\*\//g,
                   ".component("
                 );
+
+                for (let i = 0; i < examples?.length; i += 1) {
+                  const exampleToRestore = examples[i];
+                  contents = contents.replace(`%example:${i}%`, exampleToRestore);
+                }
                 
                 fs.writeFileSync(`${build?.initialOptions?.outdir}/${entryPoint}`, contents);
               }
-            } 
+            }
           }
 
           resolve();
         });
       });
-      },
+    },
   },
   generateFileDependencyMap: {
     name: "generateFileDependencyMap",

package/src/lib/build/replaceExamples.js

@@ -0,0 +1,11 @@
+import {EXAMPLE_CODE_REGEX} from "../regexes.js";
+
+export default (code = '') => {
+  let exampleIndex = 0;
+  return code.replace(
+    EXAMPLE_CODE_REGEX,
+    () => {
+      return `%example:${exampleIndex++}%`;
+    }
+  );
+};

package/src/lib/build/setComponentId.js

@@ -27,7 +27,7 @@ export default (file = "") => {
       source: file.substring(
         part.index,
         nextPart ? nextPart.index : file.length
-        ),
+      ),
     };
   });
 
@@ -45,7 +45,7 @@ export default (file = "") => {
       () => {
         return `.component({\n  _componentId: '${componentId}',`;
       }
-      );
+    );
 
     file = file.replace(component.source, tainted);
   }

package/src/lib/checkIfPortOccupied.js

@@ -0,0 +1,29 @@
+import net from 'net';
+
+const resetClient = (client = {}) => {
+  client.end();
+  client.destroy();
+  client.unref();  
+};
+
+export default (port = 2600) => {
+  return new Promise((resolve) => {
+    const client = new net.Socket();
+
+    // NOTE: This is inverted. If we can connect, the port is occupied. If we can't, the port is free.
+    client.once('connect', () => {
+      resetClient(client);
+      resolve(true);
+    });
+
+    client.once('error', () => {
+      resetClient(client);
+      resolve(false);
+    });
+
+    client.connect({
+      port,
+      host: '127.0.0.1',
+    }, function() {});
+  });
+};

package/src/lib/dev/getFilesToBuild.js

@@ -42,6 +42,6 @@ export default (excludedPaths = [], context = null) => {
       });
     })
     .filter((path) => {
-      return !fs.lstatSync(path).isDirectory();
+      return fs.existsSync(path) && !fs.lstatSync(path).isDirectory();
     });
 };

package/src/lib/dev/index.js

@@ -21,6 +21,8 @@ import { SETTINGS_FILE_NAME_REGEX } from "../regexes.js";
 import getCodependenciesForFile from "./getCodependenciesForFile.js";
 import removeDeletedDependenciesFromMap from "../build/removeDeletedDependenciesFromMap.js";
 import chalk from "chalk";
+import checkIfPortOccupied from "../checkIfPortOccupied.js";
+import {killPortProcess} from "kill-port-process";
 
 const processIds = [];
 
@@ -208,6 +210,33 @@ const handleServerProcessSTDIO = (options = {}) => {
   }
 };
 
+const handleDeletePath = (context = {}, path = '', options = {}) => {
+  try {
+    if (context?.isDeletingPath) {
+      if (context.isExistingPathInBuild) {
+        const pathToUnlink = `./.joystick/build/${path}`;
+        const stats = fs.lstatSync(pathToUnlink);
+
+        if (stats.isDirectory()) {
+          fs.rmdirSync(pathToUnlink, { recursive: true });
+        }
+
+        if (stats.isFile()) {
+          fs.unlinkSync(pathToUnlink);
+        }
+      }
+
+      if (context.isUIUpdate) {
+        handleNotifyHMRClients(context.isHTMLUpdate);
+      } else {
+        handleRestartApplicationProcess(options);
+      }
+    }
+  } catch (exception) {
+    throw new Error(`[dev.handleDeletePath] ${exception.message}`);
+  }
+};
+
 const handleAddOrChangeFile = async (context = {}, path = '', options = {}) => {
   try {
     if (context.isAddingOrChangingFile) {
@@ -253,6 +282,7 @@ const handleAddOrChangeFile = async (context = {}, path = '', options = {}) => {
       }
     }
   } catch (exception) {
+    console.warn(exception);
     throw new Error(`[dev.handleAddOrChangeFile] ${exception.message}`);
   }
 };
@@ -291,7 +321,7 @@ const handleCopyFile = (context = {}, path = '', options = {}) => {
 
 const handleCopyDirectory = (context = {}, path = '', options = {}) => {
   try {
-    if (context.isFileToCopy && context.isDirectory && !context.isExistingDirectoryInBuild) {
+    if (context.isFileToCopy && context.isDirectory && !context.isExistingPathInBuild) {
       fs.mkdirSync(`./.joystick/build/${path}`);
 
       if (context.isUIUpdate) {
@@ -350,7 +380,12 @@ const handleStartAppServer = async (options = {}) => {
 const handleNotifyHMRClients = async (indexHTMLChanged = false) => {
   try {
     if (process.hmrProcess) {
-      const settings = await loadSettings({ environment: process.env.NODE_ENV });
+      const databaseProcessIds = getDatabaseProcessIds();
+      const settings = await loadSettings({
+        environment: process.env.NODE_ENV,
+        processIds: [...processIds, ...databaseProcessIds],
+      });
+
       process.hmrProcess.send(
         JSON.stringify({
           type: "RESTART_SERVER",
@@ -371,28 +406,32 @@ const getWatchChangeContext = (event = '', path = '') => {
     const isUIPath = path?.includes("ui/") || path === 'index.css' || isHTMLUpdate;
     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();
-    const isExistingDirectoryInSource = isDirectory && fs.existsSync(path);
-    const isExistingDirectoryInBuild = !!fs.existsSync(`./.joystick/build/${path}`);
-    const isAddDirectory = event === 'addDir' && isExistingDirectoryInSource && !isExistingDirectoryInBuild;
+    const pathExists = fs.existsSync(path);
+    const isDirectory = pathExists && fs.statSync(path).isDirectory();
+    const isFile = pathExists && fs.statSync(path).isFile();
+    const isExistingPathInSource = isDirectory && pathExists;
+    const isExistingPathInBuild = !!fs.existsSync(`./.joystick/build/${path}`);
+    const isAddDirectory = event === 'addDir' && isExistingPathInSource && !isExistingPathInBuild;
     const isFileToCopy = !!filesToCopy.find((fileToCopy) => fileToCopy.path === path);
-    const isExistingFileInSource = isFile && fs.existsSync(path);
+    const isExistingFileInSource = isFile && pathExists;
     const isAddingOrChangingFile = ["add", "change"].includes(event) && isExistingFileInSource;
+    const isDeletingPath = ["unlink", "unlinkDir"].includes(event);
 
     return {
+      pathExists,
       isHTMLUpdate,
       isUIPath,
       isUIUpdate,
       isSettingsUpdate,
       isDirectory,
       isFile,
-      isExistingDirectoryInSource,
-      isExistingDirectoryInBuild,
+      isExistingPathInSource,
+      isExistingPathInBuild,
       isAddDirectory,
       isFileToCopy,
       isExistingFileInSource,
       isAddingOrChangingFile,
+      isDeletingPath,
     };
   } catch (exception) {
     throw new Error(`[dev.getWatchChangeContext] ${exception.message}`);
@@ -415,20 +454,19 @@ const startFileWatcher = (options = {}) => {
       }
 
       const watchChangeContext = getWatchChangeContext(event, path);
-//
-//      console.log({
-//        watchChangeContext,
-//      });
-//
+
       handleCopyDirectory(watchChangeContext, path, options);
       handleCopyFile(watchChangeContext, path, options);
       handleAddDirectory(watchChangeContext, path, options);
+
       await handleAddOrChangeFile(watchChangeContext, path, options);
+      await handleDeletePath(watchChangeContext, path, options);
 
       if (watchChangeContext?.isSettingsUpdate) {
+        const databaseProcessIds = getDatabaseProcessIds();
         await loadSettings({
           environment: options.environment,
-          process: options.process,
+          processIds: [...processIds, ...databaseProcessIds],
         });
       }
     });
@@ -567,6 +605,17 @@ const warnInvalidJoystickEnvironment = () => {
   }
 };
 
+const handleCleanup = () => {
+  try {
+    if (process.cleanupProcess) {
+      const databaseProcessIds = getDatabaseProcessIds();
+      process.cleanupProcess.send(JSON.stringify(({ processIds: [...processIds, ...databaseProcessIds] })));
+    }
+  } catch (exception) {
+    throw new Error(`[actionName.handleCleanup] ${exception.message}`);
+  }
+};
+
 const validateOptions = (options) => {
   try {
     if (!options) throw new Error('options object is required.');
@@ -579,6 +628,23 @@ const validateOptions = (options) => {
 const dev = async (options, { resolve, reject }) => {
   try {
     validateOptions(options);
+
+    const port = parseInt(options?.port || 2600, 10);
+    const appPortOccupied = await checkIfPortOccupied(port);
+    const hmrPortOccupied = await checkIfPortOccupied(port + 1);
+
+    if (appPortOccupied) {
+      CLILog(`Port ${options?.port} is already occupied. To start Joystick on this port, clear it and try again.`, {
+        level: 'danger',
+      });
+
+      process.exit(0);
+    }
+
+    if (hmrPortOccupied) {
+      await killPortProcess(port + 1);
+    }
+
     initProcess(options);
     
     const nodeMajorVersion = parseInt(
@@ -655,21 +721,6 @@ const dev = async (options, { resolve, reject }) => {
         process.exit(0);
       }
     }
-
-    /*
-      TODO:
-    
-      - [x] Make sure we're in a Joystick project.
-      - [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.
-      - [x] Start databases relative to options.environment (development|test) from settings.<environment>.json.
-      - [x] Run the initial build
-      - [x] Start the file watcher
-      - [x] Start the app as normal from the build directory.
-      - [ ] If environment === 'test', run the tests.
-      - [ ] If environment === 'test', after tests, run process.exit(0).
-    */
     
     resolve();
   } catch (exception) {

package/src/lib/dev/loadSettings.js

@@ -4,7 +4,7 @@ import fs from 'fs';
 import CLILog from "../CLILog.js";
 import isValidJSONString from "../isValidJSONString.js";
 
-const warnIfInvalidJSONInSettings = (settings = '') => {
+const warnIfInvalidJSONInSettings = (settings = '', processIds = []) => {
   try {
     const isValidJSON = isValidJSONString(settings);
     const context = process.env.NODE_ENV === 'test' ? 'test' : 'start';
@@ -19,6 +19,10 @@ const warnIfInvalidJSONInSettings = (settings = '') => {
         }
       );
 
+      if (process.cleanupProcess) {
+        process.cleanupProcess.send(JSON.stringify(({ processIds })));
+      }
+
       process.exit(0);
     }
   } catch (exception) {
@@ -34,7 +38,7 @@ const getSettings = (settingsPath = '') => {
   }
 };
 
-const warnIfSettingsNotFound = (settingsPath = '') => {
+const warnIfSettingsNotFound = (settingsPath = '', processIds = []) => {
   try {
     const hasSettingsFile = fs.existsSync(settingsPath);
     const context = process.env.NODE_ENV === 'test' ? 'test' : 'start';
@@ -48,6 +52,10 @@ const warnIfSettingsNotFound = (settingsPath = '') => {
         }
       );
 
+      if (process.cleanupProcess) {
+        process.cleanupProcess.send(JSON.stringify(({ processIds })));
+      }
+
       process.exit(0);
     }
   } catch (exception) {
@@ -69,9 +77,9 @@ const loadSettings = (options, { resolve, reject }) => {
     validateOptions(options);
 
     const settingsPath = `${process.cwd()}/settings.${options.environment}.json`;
-    warnIfSettingsNotFound(settingsPath);
+    warnIfSettingsNotFound(settingsPath, options.processIds);
     const settings = getSettings(settingsPath);
-    warnIfInvalidJSONInSettings(settings);
+    warnIfInvalidJSONInSettings(settings, options.processIds);
 
     process.env.JOYSTICK_SETTINGS = settings;
 

package/src/lib/regexes.js

@@ -1,3 +1,4 @@
+export const EXAMPLE_CODE_REGEX = new RegExp(/\<example\>[^%]+\<\/example\>/g);
 export const EXPORT_DEFAULT_REGEX = new RegExp(/export default [a-zA-Z0-9]+/g);
 export const JOYSTICK_COMMENT_REGEX = new RegExp(/\<\!\-\-(.|\n|\r)*?-->/g);
 export const JOYSTICK_COMPONENT_REGEX = new RegExp(/\.component\(\{/g);