@joystick.js/cli-canary 0.0.0-canary.66 → 0.0.0-canary.660

package/src/lib/build/plugins/bootstrap_component.js

@@ -0,0 +1,191 @@
+import chalk from 'chalk';
+import fs from 'fs';
+import get_platform_safe_path from '../../get_platform_safe_path.js';
+import constants from '../../constants.js';
+import set_component_id from './set_component_id.js';
+import path_exists from '../../path_exists.js';
+
+const { readFile, writeFile } = fs.promises;
+
+const restore_examples_without_mounting_code = (code = '', examples_before_replacement = []) => {
+	for (let i = 0; i < examples_before_replacement?.length; i += 1) {
+    const example_to_restore = examples_before_replacement[i];
+    code = code.replace(`%example:${i}%`, example_to_restore);
+  }
+};
+
+const add_page_mounting_code = (code = '', default_export = '', component_name = '') => {
+	return code.replace(
+    `${default_export};`,
+    `if (
+      typeof window !== 'undefined' &&
+      window.__joystick_should_auto_mount__ === true &&
+      !window.__joystick_layout_url__ &&
+      window.__joystick_page_url__ &&
+      !window.__joystick_hmr_update__ &&
+      joystick &&
+      joystick.mount
+    ) {
+      joystick.mount(${component_name}, window.__joystick_ssr_props__ || {}, document.getElementById('app'));
+    }
+
+    export default ${component_name};
+    `
+  );
+};
+
+const add_layout_mounting_code = (code = '', default_export = '', component_name = '') => {
+	return code.replace(
+	  `${default_export};`,
+	  `if (
+	    typeof window !== 'undefined' &&
+	    window.__joystick_should_auto_mount__ === true &&
+	    window.__joystick_layout_url__ &&
+      window.__joystick_page_url__ &&
+      !window.__joystick_hmr_update__ &&
+	    joystick &&
+	    joystick.mount
+	  ) {
+	    (async () => {
+	      const layout_component_file = await import(window.__joystick_layout_url__);
+	      const page_component_file = await import(window.window.__joystick_page_url__);
+	      const layout = layout_component_file.default;
+	      const page = page_component_file.default;
+	      joystick.mount(layout, Object.assign({ ...window.__joystick_ssr_props__ }, { page }), document.getElementById('app'));
+	    })();
+	  }
+
+	export default ${component_name};
+	  `
+	);
+};
+
+const replace_commented_code = (code = '') => {
+	return code.replace(constants.JOYSTICK_COMMENT_REGEX, "");
+};
+
+const set_placeholders_for_examples = (code = '') => {
+	// NOTE: Replace any <example> bracketed code with a placeholder. This ensures
+	// that we don't accidentally include any mounting code (or inject a _componentId)
+	// in Joystick example code included as content on the page.
+	//
+	// example_index is tracked to account for potential for multiple examples in a
+	// single file. example_index acts as a placeholder for the code to swap back
+  // in after the _componentId is set in restore_examples_without_mounting_code().
+  let example_index = 0;
+
+  return code.replace(
+    constants.EXAMPLE_CODE_REGEX,
+    () => {
+      return `%example:${example_index++}%`;
+    }
+  );
+};
+
+const get_examples_before_replacement = (code = '') => {
+	return code.match(constants.EXAMPLE_CODE_REGEX) || [];
+};
+
+const get_component_name = (default_export = null) => {
+  const default_export_parts = (default_export && default_export.split(" ")) || [];
+  return default_export_parts?.pop();
+};
+
+const check_if_valid_component_file = (has_joystick_ui = false, default_export = null) => {
+	return has_joystick_ui && !!default_export;
+};
+
+const get_default_export = (code = '') => {
+	const export_default_matches = code.match(constants.EXPORT_DEFAULT_REGEX) || [];
+	return export_default_matches && export_default_matches[0];
+};
+
+const check_if_has_joystick_ui = (code = '') => {
+  const joystick_ui_matches = code.match(constants.JOYSTICK_UI_REGEX) || [];
+	return !!joystick_ui_matches && !!joystick_ui_matches[0];
+};
+
+const check_if_is_component_type = (type ='', build_args = {}) => {
+  return [get_platform_safe_path(type)].some(
+    (bootstrap_target) => {
+      return build_args.path.includes(bootstrap_target);
+    }
+  );
+};
+
+const check_if_should_set_component_id = (entry_point = '') => {
+	return [
+    get_platform_safe_path("ui/"),
+    get_platform_safe_path("email/"),
+  ].some((bootstrap_target) => {
+    return entry_point.includes(bootstrap_target);
+  });
+};
+
+const bootstrap_component = (build = {}) => {
+  build.onLoad({ filter: /\.js$/ }, async (build_args = {}) => {
+    const is_layout_component = check_if_is_component_type('ui/layouts', build_args);
+    const is_page_component = check_if_is_component_type('ui/pages', build_args);      
+    const is_email_component = check_if_is_component_type('email/', build_args);
+    const is_component = is_layout_component || is_page_component || is_email_component;
+
+    if (is_component) {
+      let file_contents = await readFile(get_platform_safe_path(build_args.path), "utf-8");
+      
+      const has_joystick_ui = check_if_has_joystick_ui(file_contents);
+      const default_export = get_default_export(file_contents);
+      const is_valid_component_file = check_if_valid_component_file(has_joystick_ui, default_export);
+      const examples_before_replacement = get_examples_before_replacement(file_contents);
+      const component_name = get_component_name(default_export);
+
+      file_contents = set_placeholders_for_examples(file_contents);
+      file_contents = replace_commented_code(file_contents);
+      file_contents = component_name && is_layout_component ?
+        add_layout_mounting_code(file_contents, default_export, component_name) :
+        file_contents;
+      file_contents = component_name && is_page_component ?
+        add_page_mounting_code(file_contents, default_export, component_name) :
+        file_contents;
+
+      restore_examples_without_mounting_code(file_contents, examples_before_replacement);
+
+      return {
+        contents: file_contents,
+        loader: "js",
+      };
+    }
+  });
+
+  build.onEnd(() => {
+    return new Promise(async (resolve) => {
+      for (let i = 0; i < build?.initialOptions?.entryPoints?.length; i += 1) {
+        const entry_point = build?.initialOptions?.entryPoints[i];
+        const should_set_component_id = check_if_should_set_component_id(entry_point);
+        const build_exists = await path_exists(`${build?.initialOptions?.outdir}/${entry_point}`);
+
+        if (should_set_component_id && build_exists) {
+          let file_contents = await readFile(`${build?.initialOptions?.outdir}/${entry_point}`, "utf-8");
+          const has_joystick_ui = check_if_has_joystick_ui(file_contents);
+					const examples_before_replacement = get_examples_before_replacement(file_contents);
+          
+          file_contents = set_placeholders_for_examples(file_contents);
+
+          if (has_joystick_ui) {
+            file_contents = await set_component_id(file_contents);
+
+            for (let i = 0; i < examples_before_replacement?.length; i += 1) {
+              const example_to_restore = examples_before_replacement[i];
+              file_contents = file_contents.replace(`%example:${i}%`, example_to_restore);
+            }
+            
+            await writeFile(`${build?.initialOptions?.outdir}/${entry_point}`, file_contents);
+          }
+        }
+      }
+
+      resolve();
+    });
+  });
+};
+
+export default bootstrap_component;

package/src/lib/build/plugins/generate_file_dependency_map.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import get_platform_safe_path from '../../get_platform_safe_path.js';
+import update_file_map from './update_file_map.js';
+
+const { readFile } = fs.promises;
+
+const generate_file_dependency_map = (build = {}) => {
+  build.onLoad({ filter: /\.js$/ }, async (args) => {
+    const can_add_to_map = !["node_modules", ".joystick", "?", "commonjsHelpers.js"].some((excluded_path) => {
+      return get_platform_safe_path(args.path).includes(excluded_path);
+    });
+
+    if (can_add_to_map) {
+      const code = await readFile(get_platform_safe_path(args.path), "utf-8");
+      await update_file_map(get_platform_safe_path(args.path), code);
+    }
+  });
+};
+
+export default generate_file_dependency_map;

package/src/lib/build/plugins/index.js

@@ -0,0 +1,26 @@
+import bootstrap_component from './bootstrap_component.js';
+import generate_file_dependency_map from './generate_file_dependency_map.js';
+import warn_node_environment from "./warn_node_environment.js";
+
+const plugins = {
+  bootstrap_component: {
+    name: "bootstrap_component",
+    setup(build) {
+    	bootstrap_component(build);
+    },
+  },
+  generate_file_dependency_map: {
+    name: "generate_file_dependency_map",
+    setup(build) {
+    	generate_file_dependency_map(build);
+    },
+  },
+  warn_node_environment: {
+    name: "warn_node_environment",
+    setup(build) {
+      warn_node_environment(build);
+    },
+  },
+};
+
+export default plugins;

package/src/lib/build/plugins/set_component_id.js

@@ -0,0 +1,89 @@
+import fs from "fs";
+import generate_id from "../../generate_id.js";
+import path_exists from "../../path_exists.js";
+
+const { readFile, writeFile } = fs.promises;
+
+const update_component_id_cache = async (component_id_targets = [], component_id_cache = {}, component_id_cache_path = '') => {
+  for (let i = 0; i < component_id_targets.length; i += 1) {
+    const component = component_id_targets[i];
+    component_id_cache[component.path] = component.component_id;
+    await writeFile(component_id_cache_path, JSON.stringify(component_id_cache));
+  }
+};
+
+const inject_component_id = (component_id_targets = [], file = '') => {
+  let updated_file = file;
+
+  for (let i = 0; i < component_id_targets.length; i += 1) {
+    const component = component_id_targets[i];
+
+    const tainted = component.source.replace(
+      /\.component\(\{+(?!\n + _componentId)/g,
+      () => {
+        return `.component({\n  _componentId: '${component.component_id}',`;
+      }
+    );
+
+    updated_file = updated_file.replace(component.source, tainted);
+  }
+
+  return updated_file;
+};
+
+const get_component_id_targets = (file = '', component_paths_from_esbuild_output = [], component_id_cache = {}) => {
+  return component_paths_from_esbuild_output?.map((component_path, component_path_index) => {
+    const next_component_path = component_paths_from_esbuild_output[component_path_index + 1];
+    const path_without_comment = component_path.path.replace("// ", "");
+
+    return {
+      path: path_without_comment,
+      component_id: component_id_cache[path_without_comment] || generate_id(16),
+      index: component_path.index,
+      source: file.substring(
+        component_path.index,
+        next_component_path ? next_component_path.index : file.length
+      ),
+    };
+  });
+};
+
+const get_component_paths_from_esbuild_output = (file = '') => {
+  return [...file?.matchAll(/\/\/ ui+.*/gi), ...file?.matchAll(/\/\/ email+.*/gi)]?.map((match) => {
+    return {
+      path: match[0],
+      index: match.index,
+    };
+  });
+};
+
+const get_existing_component_id_cache = async (component_id_cache_path = '') => {
+  const has_component_id_cache = await path_exists(component_id_cache_path);
+
+  if (has_component_id_cache) {
+    const component_id_cache = await readFile(component_id_cache_path, 'utf-8');
+    return JSON.parse(component_id_cache);
+  }
+
+  return {};
+};
+
+const get_component_id_cache_path = () => {
+  return ['development', 'test'].includes(process.env.NODE_ENV)
+    ? `./.joystick/build/component_id_cache.json`
+    : `./.build/component_id_cache.json`;
+};
+
+const set_component_id = async (file = "") => {
+  const component_id_cache_path = get_component_id_cache_path();
+  const component_id_cache = await get_existing_component_id_cache(component_id_cache_path);
+  const component_paths_from_esbuild_output = get_component_paths_from_esbuild_output(file);
+  const component_id_targets = get_component_id_targets(file, component_paths_from_esbuild_output, component_id_cache);
+
+  const file_with_component_id = inject_component_id(component_id_targets, file);
+  await update_component_id_cache(component_id_targets, component_id_cache, component_id_cache_path);
+
+  return file_with_component_id;
+};
+
+export default set_component_id;

package/src/lib/build/plugins/update_file_map.js

@@ -0,0 +1,98 @@
+import fs from "fs";
+import path, { dirname } from 'path';
+import * as acorn from "acorn";
+import path_exists from '../../path_exists.js';
+
+const { readFile, writeFile } = fs.promises;
+
+const get_requires = (from_path = '', map = {}) => {
+  const requires = map?.body?.filter((statement) => {
+    const type = statement && statement.type;
+    const declarations = (statement && statement.declarations) || [];
+
+    const is_variable_declaration = type === "VariableDeclaration";
+
+    const has_require_statement = declarations.some((declaration) => {
+      const is_variable_declarator = declaration.type === "VariableDeclarator";
+      const callee_name = declaration?.init?.callee?.name;
+      return is_variable_declarator && callee_name === "require";
+    });
+
+    return is_variable_declaration && has_require_statement;
+  });
+
+  return requires.map((require_declaration) => {
+    const declarations = require_declaration.declarations;
+    const declaration = declarations && declarations[0];
+    const declaration_value = declaration?.init?.arguments[0] && declaration.init.arguments[0]?.value;
+
+    return {
+      absolute_path: declaration_value ? path.resolve(dirname(from_path), declaration_value) : null,
+    };
+  });
+};
+
+const get_imports = (from_path = '', map = {}) => {
+  const imports = map?.body?.filter(({ type }) => {
+    return type === "ImportDeclaration";
+  }) || [];
+
+  return imports.map((import_declaration) => {
+    return {
+      path: import_declaration?.source?.value,
+      absolute_path: path.resolve(dirname(from_path), import_declaration?.source?.value),
+    };
+  });
+};
+
+const get_imports_and_requires = (from_path = '', map = {}) => {
+  const imports = get_imports(from_path, map);
+  const requires = get_requires(from_path, map);
+
+  return {
+    imports,
+    requires,
+  };
+};
+
+const parse_file_to_ast = (file = "") => {
+  return acorn.parse(file, {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  });
+};
+
+const read_file_dependency_map = async () => {
+  const file_dependency_map_path = `.joystick/build/file_map.json`;
+
+  if (await path_exists(file_dependency_map_path)) {
+    const file_dependency_map_as_json = fs.readFileSync(
+      file_dependency_map_path,
+      "utf-8"
+    );
+
+    return file_dependency_map_as_json ? JSON.parse(file_dependency_map_as_json) : {};
+  }
+
+  return {};
+};
+
+const update_file_map = async (from_path = "", source = "") => {
+  try {
+    const file_dependency_map = await read_file_dependency_map();
+    const file_ast = parse_file_to_ast(source);
+    const imports = file_ast ? get_imports_and_requires(from_path, file_ast) : [];
+
+    file_dependency_map[from_path] = imports;
+
+    fs.writeFileSync(
+      `.joystick/build/file_map.json`,
+      JSON.stringify(file_dependency_map, null, 2)
+    );
+  } catch {
+    // Do nothing. This exists to handle acorn parsing errors that are also picked
+    // up by the esbuild parser (we want to defer to esbuild).
+  }
+};
+
+export default update_file_map;

package/src/lib/build/plugins/warn_node_environment.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import chalk from 'chalk';
+
+const { readFile } = fs.promises;
+
+const warn_node_environment = (build = {}) => {
+	build.onLoad({ filter: /\.js$/ }, async (args = {}) => {
+    const code = await readFile(args.path, "utf-8");
+
+    if (code?.match(/process.env.NODE_ENV\s+=\s/gi)?.length) {
+      console.warn(
+        chalk.yellowBright(
+          "\n[WARNING] process.env.NODE_ENV should only be set via a CLI flag in development or via external environment variables in production.\n"
+        )
+      );
+    }
+  });
+};
+
+export default warn_node_environment;

package/src/lib/{CLILog.js → cli_log.js}

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
-import rainbowRoad from './rainbowRoad.js';
+import log_bars from './log_bars.js';
 
-export default (message = '', options = {}) => {
+const cli_log = (message = '', options = {}) => {
   const colors = {
     info: 'blue',
     success: 'green',
@@ -18,23 +18,27 @@ export default (message = '', options = {}) => {
   
   const color = options.level ? colors[options.level] : 'gray';
   const title = options.level ? titles[options.level] : 'Log';
-  const docs = options.docs || 'https://github.com/cheatcode/joystick';
+  const docs = options.docs || 'https://docs.cheatcode.co/joystick';
 
-  console.log(`\n${(options.padding || '')}${rainbowRoad()}\n`);
+  console.log(`\n${(options.padding || '')}${log_bars()}\n`);
   console.log(`${(options.padding || '')}${chalk[color](`${title}:`)}\n`)
   console.log(`${(options.padding || '')}${chalk.white(message)}\n`);
   console.log(`${(options.padding || '')}${chalk.grey('---')}\n`);
   console.log(`${(options.padding || '')}${chalk.white('Relevant Documentation:')}\n`)
   console.log(`${(options.padding || '')}${chalk.blue(docs)}\n`);
   console.log(`${(options.padding || '')}${chalk.white('Stuck? Ask a Question:')}\n`)
-  console.log(`${(options.padding || '')}${chalk.blue('https://github.com/cheatcode/joystick/discussions')}\n`);
+  console.log(`${(options.padding || '')}${chalk.blue('http://discord.cheatcode.co')}\n`);
   
   if (options.tools && Array.isArray(options.tools)) {
     console.log(`${(options.padding || '')}${chalk.white('Helpful Tools:')}\n`);
-    options.tools.forEach((tool) => {
+    
+    for (let i = 0; i < options?.tools?.length; i += 1) {
+      const tool = options?.tools[i];
       console.log(`${(options.padding || '')}${chalk.blue(`${tool.title} — ${tool.url}`)}\n`);
-    });
+    }
   }
 
-  console.log(`${(options.padding || '')}${rainbowRoad()}\n`);
+  console.log(`${(options.padding || '')}${log_bars()}\n`);
 };
+
+export default cli_log;

package/src/lib/color_log.js

@@ -0,0 +1,7 @@
+import chalk from "chalk";
+
+const color_log = (message = '', color = 'blueBright') => {
+  return console.log(chalk[color](message));
+};
+
+export default color_log;

package/src/lib/command_exists.js

@@ -0,0 +1,16 @@
+import child_process from 'child_process';
+import util from 'util';
+
+const exec = util.promisify(child_process.exec);
+
+const command_exists = (command = '') => {
+	const where_command = process.platform === 'win32' ? 'where' : 'whereis';
+	return exec(`${where_command} ${command}`).then(() => {
+		return true;
+	}).catch((error) => {
+		console.warn(error);
+		return false;
+	});
+};
+
+export default command_exists;

package/src/lib/constants.js

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

package/src/lib/debounce.js

@@ -0,0 +1,9 @@
+const debounce = (() => {
+  let timer = 0;
+  return (callback, ms) => {
+    clearTimeout(timer);
+    timer = setTimeout(callback, ms);
+  };
+})();
+
+export default debounce;

package/src/lib/decrypt_buffer.js

@@ -0,0 +1,12 @@
+import crypto from 'crypto';
+
+const decrypt_buffer = (buffer, key) => {
+	// NOTE: First 16 bytes of buffer are the initialization_vector.
+	const initialization_vector = buffer.slice(0, 16);
+	const rest_of_buffer = buffer.slice(16);
+	const hashed_encryption_key = crypto.createHash('sha256').update(key).digest('hex').substring(0, 32);
+	const decipher = crypto.createDecipheriv('aes256', hashed_encryption_key, initialization_vector);
+	return Buffer.concat([decipher.update(rest_of_buffer), decipher.final()]);
+};
+
+export default decrypt_buffer;

package/src/lib/development_server/ava_config.js

@@ -0,0 +1,14 @@
+const ava_config = {
+  files: [
+    `tests/**/*.test.js`,
+  ],
+  ignoredByWatcher: ['.joystick', './uploads'],
+  // NOTE: Intentionally limit to 1 test at a time to avoid concurrency creating
+  // race conditions in tests that have users or other global data that needs
+  // to be cleaned up. The extra time needed is worth it to guarantee that tests
+  // don't step on each other's toes and our code is properly verified.
+  concurrency: 1,
+  cache: false,
+};
+
+export default ava_config;

package/src/lib/development_server/check_if_port_occupied.js

@@ -0,0 +1,31 @@
+import net from 'net';
+
+const reset_client = (client = {}) => {
+  client.end();
+  client.destroy();
+  client.unref();  
+};
+
+const check_if_port_occupied = (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', () => {
+      reset_client(client);
+      resolve(true);
+    });
+
+    client.once('error', () => {
+      reset_client(client);
+      resolve(false);
+    });
+
+    client.connect({
+      port,
+      host: '127.0.0.1',
+    }, function() {});
+  });
+};
+
+export default check_if_port_occupied;

package/src/lib/development_server/cleanup.js

@@ -0,0 +1,15 @@
+// NOTE: This module is intended to be run as a child_process as part of
+// a SIGINT or SIGTERM event.
+
+import kill_process_ids from "./kill_process_ids.js";
+
+process.title = "joystick_cleanup";
+
+process.on('message', async (message) => {
+  const parsed_message = JSON.parse(message);
+  const process_ids = parsed_message?.process_ids;
+
+  kill_process_ids(process_ids);
+
+  process.exit();
+});

package/src/lib/{dev/databases/mongodb/availableQueryParameters.js → development_server/databases/mongodb/available_query_parameters.js}

@@ -1,4 +1,4 @@
-export default [
+const available_query_parameters = [
   "replicaSet",
   "tls",
   "ssl",
@@ -37,3 +37,5 @@ export default [
   "retryWrites",
   "uuidRepresentation"
 ];
+
+export default available_query_parameters;

package/src/lib/development_server/databases/mongodb/build_connection_string.js

@@ -0,0 +1,31 @@
+import build_query_parameters from "./build_query_parameters.js";
+import serialize_query_parameters from "../../../serialize_query_parameters.js";
+import types from "../../../types.js";
+
+const build_connection_string = (connection = {}) => {
+  let connection_string = "mongodb://";
+
+  if (connection && (connection.username || connection.password)) {
+    connection_string = `${connection_string}${connection.username || connection.password ? `${connection.username || ""}${!!connection.username && !!connection.password ? ':' : ''}${connection.password || ""}@` : ''}`;
+  }
+
+  if (connection && connection.hosts && types.is_array(connection.hosts)) {
+    connection_string = `${connection_string}${connection.hosts
+      .map((host) => `${host.hostname}:${host.port}`)
+      .join(",")}`;
+  }
+
+  if (connection && connection.database) {
+    connection_string = `${connection_string}/${connection.database}`;
+  }
+
+  const query_parameters = build_query_parameters(connection);
+
+  if (Object.keys(query_parameters)?.length > 0 ) {
+    connection_string = `${connection_string}?${serialize_query_parameters(query_parameters)}`;
+  }
+
+  return connection_string;
+};
+
+export default build_connection_string;