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

package/{dist/functions/create/templates → src/commands/create/template}/ui/components/button/index.js

@@ -1,23 +1,29 @@
-import ui from "@joystick.js/ui";
+import joystick from "@joystick.js/ui";
 
-const Button = ui.component({
+const Button = joystick.component({
   css: `
     .button {
       display: inline-block;
       background: #eee;
-      padding: 15px 20px;
+      padding: 12px 20px;
+      font-size: 15px;
+      font-weight: 400;
       border-radius: 3px;
       text-decoration: none;
       color: #333;
+      white-space: nowrap;
     }
 
     .button.brand {
       background: var(--brand);
+      border: 2px solid var(--brand);
       color: #333;
+      font-size: 15px;
+      font-weight: 500;
     }
 
     .button.github {
-      background: #333;
+      background: #111;
       color: #fff;
       padding: 0px 20px 0px 0px;
     }
@@ -25,10 +31,12 @@ const Button = ui.component({
     .button.github span {
       display: inline-block;
       margin-right: 20px;
-      font-weight: 500;
+      font-weight: 600;
       background: #000;
-      padding: 15px 20px;
+      padding: 12px 18px;
       border-radius: 3px 0px 0px 3px;
+      color: #fff;
+      border: 2px solid #111;
     }
   `,
   render: ({ props, when }) => {

package/{dist/functions/create/templates → src/commands/create/template}/ui/layouts/app/index.js

@@ -1,6 +1,6 @@
-import ui from "@joystick.js/ui";
+import joystick from "@joystick.js/ui";
 
-const App = ui.component({
+const App = joystick.component({
   render: ({ props, component }) => {
     return `
       <div>

package/src/commands/create/template/ui/pages/error/index.js

@@ -0,0 +1,50 @@
+import joystick from "@joystick.js/ui";
+
+const Error = joystick.component({
+  css: `
+    .error {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    .error > header {
+      text-align: center;
+      margin: 50px 0;
+    }
+
+    h1 {
+      color: #444;
+      font-size: 64px;
+      font-weight: 400;
+      letter-spacing: 0.03em;
+    }
+
+    h4 {
+      color: #fff;
+      font-size: 20px;
+      font-weight: bold;
+      margin-top: 40px;
+    }
+
+    p {
+      font-size: 16px;
+      color: #888;
+      margin-top: 10px;
+    }
+  `,
+  render: ({ i18n, props }) => {
+    return `
+      <div class="error">
+        <header>
+          <h1>${props.status_code}</h1>
+          <h4>${i18n('page_not_found')}</h4>
+          <p>${i18n('double_check_url')}</p>
+        </header>
+      </div>
+    `;
+  },
+});
+
+export default Error;

package/src/commands/create/template/ui/pages/index/index.js

@@ -0,0 +1,121 @@
+import joystick from "@joystick.js/ui";
+import Button from "../../components/button/index.js";
+
+const Index = joystick.component({
+  data: async (api = {}) => {
+    return {
+      stars: await api.fetch(
+        `https://api.github.com/repos/cheatcode/joystick`
+      ).then(async (response) => {
+        const repo = await response.json();
+        return repo?.stargazers_count;
+      }),
+    };
+  },
+  css: {
+    min: {
+      width: {
+        0: `
+          .splash {
+            position: fixed;
+            inset: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .splash header {
+            text-align: center;
+            padding: 0px 30px;
+          }
+
+          .splash header img {
+            width: 100%;
+            max-width: 250px;
+          }
+
+          .splash header p {
+            color: #aaa;
+            font-size: 18px;
+            line-height: 26px;
+            margin-top: 30px;
+          }
+
+          .splash header ul {
+            margin-top: 40px;
+            list-style: none;
+          } 
+          
+          .splash header ul li {
+            width: 100%;
+          }
+          
+          .splash header ul li:first-child {
+            margin-bottom: 20px;
+          }
+
+          .splash footer {
+            position: fixed;
+            bottom: 20px;
+            color: #444;
+          }
+
+          .splash footer a {
+            color: #444;
+            text-decoration: underline;
+            text-decoration-color: #222;
+            text-underline-offset: 2px;
+          }
+
+          .splash footer a:hover {
+            color: #fff;
+            text-decoration-color: var(--brand);
+          }
+        `,
+        768: `
+          .splash header ul {
+            display: inline-flex;
+          }
+
+          .splash header ul li:first-child {
+            margin-bottom: 0px;
+            margin-right: 0px;
+          }
+        `,
+      }
+    }
+  },
+  render: ({ data, component, i18n }) => {
+    return `
+      <div class="splash">
+        <header>
+          <img src="/joystick_logo.webp" alt="Joystick" />
+          <p>A full-stack JavaScript framework for building web apps and websites.</p>
+          <ul>
+            <li>
+              ${component(Button, {
+                theme: "brand",
+                target: "_blank",
+                href: "https://github.com/cheatcode/joystick#tutorials",
+                label: i18n("buttons.get_started"),
+              })}
+            </li>
+            <li>
+              ${component(Button, {
+                theme: "github",
+                target: "_blank",
+                href: "https://github.com/cheatcode/joystick",
+                label: i18n("buttons.view_on_github", { stars: data.stars > 1000 ? `${data.stars / 1000}K` : data.stars }),
+              })}
+            </li>
+          </ul>
+        </header>
+        <footer>
+          <p>&copy; <a href="https://cheatcode.co">CheatCode</a> — Nullius in verba.</p>
+        </footer>
+      </div>
+    `;
+  },
+});
+
+export default Index;

package/src/commands/help/definition.js

@@ -0,0 +1,12 @@
+import help from './index.js';
+
+const [_node, _bin, ...raw_args] = process.argv;
+
+const definition = {
+  description: 'Output this help information',
+  args: {},
+  options: {},
+  command: help,
+};
+
+export default definition;

package/src/commands/help/index.js

@@ -0,0 +1,48 @@
+
+import chalk from 'chalk';
+import { createRequire } from 'module';
+import functions from '../index.js';
+import rainbow_road from '../../lib/rainbow_road.js';
+
+const require = createRequire(import.meta.url);
+const package_json = require('../../../package.json');
+
+const create_spacer = (target = 5, start = '') => {
+  const number_of_spaces = target - start.length;
+  const spaces = [...(number_of_spaces > 0 ? Array(target - start.length) : '')].map(() => ' ');
+  return spaces.join('');
+};
+
+const get_args_for_function = (function_args = {}) => {
+  return Object.keys(function_args).map((function_arg) => `<${function_arg}>`).join(' ');
+};
+
+const build_options_for_function = (function_options = {}) => {
+  return Object.entries(function_options).map(([option_name, option_settings]) => {
+    return `  ${option_settings.flags && Object.keys(option_settings.flags).map((flag) => chalk.magenta(flag))?.reverse().join(', ')}  ${chalk.gray(option_settings.description)}`;
+ }).join('\n');
+};
+
+const help = () => {
+console.log(`
+  ${rainbow_road()}
+  
+  ${chalk.yellowBright('@joystick.js/cli')} ${chalk.magenta(`(v${package_json.version})`)}
+  
+  ${chalk.blue('Manage your Joystick app.')}
+  
+  ${chalk.gray('https://docs.cheatcode.co/joystick/cli')}
+  
+  ${rainbow_road()}
+
+  ${Object.entries(functions).map(([function_name, function_settings]) => {
+    return `
+  ${chalk.green(function_name)}  ${chalk.gray(function_settings.description)}\n
+  joystick ${function_name} ${chalk.yellow(get_args_for_function(function_settings.args))}
+${function_settings.options && Object.keys(function_settings.options).length > 0 ? `
+${build_options_for_function(function_settings.options)}
+`: ''}`;
+}).join('')}`);
+};
+
+export default help;

package/src/commands/index.js

@@ -0,0 +1,23 @@
+import build from './build/definition.js';
+import create from './create/definition.js';
+import help from './help/definition.js';
+import logout from './logout/definition.js';
+import push from './push/definition.js';
+import start from './start/definition.js';
+import test from "./test/definition.js";
+import update from './update/definition.js';
+import use from "./use/definition.js";
+
+const commands = {
+  build,
+  create,
+  help,
+  logout,
+  push,
+  start,
+  test,
+  update,
+  use,
+};
+
+export default commands;

package/src/commands/logout/definition.js

@@ -0,0 +1,10 @@
+import logout from './index.js';
+
+const definition = {
+  description: 'Log out of your CheatCode Push account.',
+  args: {},
+  options: {},
+  command: logout,
+};
+
+export default definition;

package/src/commands/logout/index.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import os from 'os';
+import color_log from '../../lib/color_log.js';
+import path_exists from '../../lib/path_exists.js';
+
+const { unlink } = fs.promises;
+
+const logout = async (args = {}, options = {}) => {
+  const session_token_path = `${os.homedir()}/.push/session_token`;
+  const session_token_exists = await path_exists(session_token_path);
+
+  if (session_token_exists) {
+    await unlink(session_token_path, 'utf-8');
+    color_log('\n✔ Logged out\n', 'greenBright');
+  }
+
+  return true;
+};
+
+export default logout;

package/src/commands/push/cdn_mirrors.js

@@ -0,0 +1,7 @@
+const cdn_mirrors = [
+  'https://push-versions-1.cheatcode.co',
+  'https://push-versions-2.cheatcode.co',
+  'https://push-versions-3.cheatcode.co',
+];
+
+export default cdn_mirrors;

package/src/commands/push/check_if_settings_valid.js

@@ -0,0 +1,10 @@
+const check_if_settings_valid = (settings = '') => {
+  try {
+    JSON.parse(settings);
+    return true;
+  } catch (exception) {
+    return false;
+  }
+};
+
+export default check_if_settings_valid;

package/src/commands/push/create_version.js

@@ -0,0 +1,20 @@
+import fetch from 'node-fetch';
+
+const create_version = (options = {}) => {
+	return fetch(`${options?.push_provision_domain}/api/versions/${options?.domain}`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'x-push-session-token': options?.session_token,
+		},
+		body: JSON.stringify(options?.body),
+	})?.then(async (response) => {
+		// NOTE: We only care about the response body here so parse it out and return it.
+		const data = await response.json();
+		return data?.data;
+	}).catch((error) => {
+		console.warn(error);
+	});
+};
+
+export default create_version;

package/src/commands/push/definition.js

@@ -0,0 +1,43 @@
+import push from './index.js';
+
+const [_node, _bin, ...raw_args] = process.argv;
+
+const definition = {
+  description: 'Deploy your Joystick app using Push.',
+  args: {},
+  options: {
+    environment: {
+     flags: {
+       '-e': {
+         set: !!raw_args.includes('-e'),
+         value: !!raw_args.includes('-e') && raw_args[raw_args.indexOf('-e') + 1],
+         parent: 'push',
+       },
+       '--environment': {
+         set: !!raw_args.includes('--environment'),
+         value: !!raw_args.includes('--environment') && raw_args[raw_args.indexOf('--environment') + 1],
+         parent: 'push',
+       },
+     },
+     description: 'The value you want to use for NODE_ENV in the deployed app (e.g., staging or production). Default is production.',
+    },
+    provision_server: {
+     flags: {
+       '-s': {
+         set: !!raw_args.includes('-s'),
+         value: !!raw_args.includes('-s') && raw_args[raw_args.indexOf('-s') + 1],
+         parent: 'push',
+       },
+       '--server': {
+         set: !!raw_args.includes('--server'),
+         value: !!raw_args.includes('--server') && raw_args[raw_args.indexOf('--server') + 1],
+         parent: 'push',
+       },
+     },
+     description: 'The Push provision server to target (development or production).',
+    },
+  },
+  command: push,
+};
+
+export default definition;

package/src/commands/push/get_app_domain.js

@@ -0,0 +1,11 @@
+const get_app_domain = (provision_server = 'production') => {
+	// NOTE: Rely on provision_server CLI option flag here because that will need
+	// to be paired with the appropriate app server.
+	return {
+		development: 'http://localhost:2600',
+		staging: 'https://staging.push.cheatcode.co',
+		production: 'https://push.cheatcode.co',
+	}[provision_server];
+};
+
+export default get_app_domain;

package/src/commands/push/get_deployment.js

@@ -0,0 +1,19 @@
+import fetch from 'node-fetch';
+
+const get_deployment = (options = {}) => {
+	return fetch(`${options?.push_provision_domain}/api/deployments/${options?.domain}`, {
+		method: 'GET',
+		headers: {
+			'x-push-session-token': options?.session_token,
+			Accept: 'application/json',
+		},
+	})?.then(async (response) => {
+		// NOTE: We only care about the data in the response here so just return it.
+		const data = await response.json();
+		return data?.data;
+	}).catch((error) => {
+		console.warn(error);
+	});
+};
+
+export default get_deployment;

package/src/commands/push/get_provision_domain.js

@@ -0,0 +1,9 @@
+const get_provision_domain = (provision_server = 'production') => {
+	return {
+		development: 'http://localhost:2603',
+		staging: 'https://staging.provision.cheatcode.co',
+		production: 'https://provision.cheatcode.co',
+	}[provision_server];
+};
+
+export default get_provision_domain;

package/src/commands/push/get_session_token.js

@@ -0,0 +1,31 @@
+import os from 'os';
+import fs from 'fs';
+import inquirer from 'inquirer';
+import path_exists from '../../lib/path_exists.js';
+import session_token_prompt from './prompts/session_token.js';
+
+const { readFile, mkdir, writeFile } = fs.promises;
+
+const get_session_token = async () => {
+  const home_directory = os.homedir();
+  const session_token_path = `${home_directory}/.push/session_token`;
+  const session_token_exists = await path_exists(session_token_path);
+
+  if (session_token_exists) {
+    return readFile(session_token_path, 'utf-8');
+  }
+ 
+  const { session_token } = await inquirer.prompt(session_token_prompt());
+
+  if (session_token) {
+	  if (!(await path_exists(`${home_directory}/.push`))) {
+	    await mkdir(`${home_directory}/.push`);
+	  }
+
+	  await writeFile(`${home_directory}/.push/session_token`, session_token);
+
+	  return session_token;
+  }
+};
+
+export default get_session_token;

package/src/commands/push/get_settings_file.js

@@ -0,0 +1,47 @@
+import fs from 'fs';
+import cli_log from '../../lib/cli_log.js';
+import is_valid_json_string from '../../lib/is_valid_json_string.js';
+import path_exists from '../../lib/path_exists.js';
+
+const { readFile } = fs.promises;
+
+const read_settings_file = async (environment = '') => {
+  const settings_file_name = `settings.${environment}.json`;
+  const settings_file_exists = await path_exists(settings_file_name);
+
+  if (!settings_file_exists) {
+    cli_log(
+      `Could not find a ${settings_file_name} in your project. Double-check this exists and try again.`,
+      {
+        level: "danger",
+        docs: "https://cheatcode.co/docs/push/config"
+      }
+    );
+
+    return process.exit(0);
+  }
+
+  return readFile(settings_file_name);
+};
+
+const get_settings_file = async (options) => {
+  const settings_file_name = `settings.${options?.environment}.json`;
+  const raw_settings_file = await read_settings_file(options?.environment);
+  const settings_file_is_valid_json = is_valid_json_string(raw_settings_file);
+
+  if (!settings_file_is_valid_json) {
+    cli_log(
+      `${settings_file_name} contains invalid JSON. Double-check the syntax and try again.`,
+      {
+        level: "danger",
+        docs: "https://cheatcode.co/docs/push/config"
+      }
+    );
+
+    return process.exit(0);
+  }
+
+  return JSON.parse(raw_settings_file);
+};
+
+export default get_settings_file;

package/src/commands/push/handle_initial_deployment.js

@@ -0,0 +1,24 @@
+import fetch from "node-fetch";
+
+const handle_initial_deployment = async (options = {}) => {
+  return fetch(`${options?.push_provision_domain}/api/deployments/${options?.deployment?.domain}`, {
+   method: "POST",
+   headers: {
+     "x-push-session-token": options?.session_token,
+     'Content-Type': 'application/json',
+   },
+   body: JSON.stringify({
+     environment: options?.environment,
+     build_timestamp: options?.build_timestamp,
+     domain: options?.deployment?.domain,
+     deployment_id: options?.deployment?._id,
+   }),
+  }).then(async (response) => {
+   const data = await response.json();
+   return data?.data;
+  }).catch((error) => {
+    console.warn(error);
+  });
+};
+
+export default handle_initial_deployment;

package/src/commands/push/handle_version_deployment.js

@@ -0,0 +1,23 @@
+import fetch from "node-fetch";
+
+const handle_version_deployment = async (options = {}) => {
+  return fetch(`${options?.push_provision_domain}/api/deployments/${options?.deployment?.domain}`, {
+   method: "PUT",
+   headers: {
+     "x-push-session-token": options?.session_token,
+     'Content-Type': 'application/json',
+   },
+   body: JSON.stringify({
+     build_timestamp: options?.build_timestamp,
+     domain: options?.deployment?.domain,
+     deployment_id: options?.deployment?._id,
+   }),
+  }).then(async (response) => {
+   const data = await response.json();
+   return data?.data;
+  }).catch((error) => {
+    console.warn(error);
+  });
+};
+
+export default handle_version_deployment;