@joystick.js/cli-canary 0.0.0-canary.172 → 0.0.0-canary.1721

package/src/commands/create/definition.js

@@ -0,0 +1,35 @@
+import create from './index.js';
+
+const [_node, _bin, ...raw_args] = process.argv;
+
+const definition = {
+  description: 'Create a new Joystick app.',
+  args: {
+    name: {
+      set: !!raw_args.includes('create') && !!raw_args[raw_args.indexOf('create') + 1],
+      parent: 'create',
+      value: !!raw_args.includes('create') && raw_args[raw_args.indexOf('create') + 1],
+      description: 'The name of the app to create.',
+    },
+  },
+  options: {
+    release: {
+      flags: {
+        '-r': {
+          set: !!raw_args.includes('-r'),
+          value: !!raw_args.includes('-r') && raw_args[raw_args.indexOf('-r') + 1],
+          parent: 'create',
+        },
+        '--release': {
+          set: !!raw_args.includes('--release'),
+          value: !!raw_args.includes('--release') && raw_args[raw_args.indexOf('--release') + 1],
+          parent: 'create',
+        },
+      },
+      description: 'The release of Joystick to use (production or canary).',
+    },
+  },
+  command: create,
+};
+
+export default definition;

package/src/commands/create/index.js

@@ -0,0 +1,71 @@
+import fs from 'fs';
+import chalk from 'chalk';
+import child_process from 'child_process';
+import util from 'util';
+import build_package_json from "./build_package_json.js";
+import cli_log from '../../lib/cli_log.js';
+import Loader from "../../lib/loader.js";
+import node_path_polyfills from '../../lib/node_path_polyfills.js';
+import replace_in_files from '../../lib/replace_in_files.js';
+
+const { cp: copy_directory, writeFile, mkdir } = fs.promises;
+const exec = util.promisify(child_process.exec);
+
+const create_package_json = (project_name = "") => {
+  return writeFile(`./${project_name}/package.json`, build_package_json(project_name));
+};
+
+const create = async (args = {}, options = {}) => {
+  process.loader = new Loader();
+  process.loader.print("Creating app...");
+
+  if (options?.release && !['production', 'canary'].includes(options.release)) {
+    cli_log('Must pass either production or canary for --release.', {
+      level: 'danger',
+      docs: 'https://docs.cheatcode.co/joystick/cli/create',
+    });
+    process.exit(0);
+  }
+
+  await copy_directory(`${node_path_polyfills?.__package}/commands/create/template`, `./${args.name}`, { recursive: true });
+  await create_package_json(args.name);
+  
+  await mkdir(`./${args?.name}/.joystick`, { recursive: true });
+  await mkdir(`./${args?.name}/fixtures`, { recursive: true });
+  await mkdir(`./${args?.name}/indexes`, { recursive: true });
+  await mkdir(`./${args?.name}/lib`, { recursive: true });
+  await mkdir(`./${args?.name}/private`, { recursive: true });
+  await mkdir(`./${args?.name}/queues`, { recursive: true });
+  await mkdir(`./${args?.name}/routes`, { recursive: true });
+  await mkdir(`./${args?.name}/uploaders`, { recursive: true });
+  await mkdir(`./${args?.name}/tests`, { recursive: true });
+  await mkdir(`./${args?.name}/websockets`, { recursive: true });
+
+  if (options?.release === 'canary') {
+    await replace_in_files(`${process.cwd()}/${args?.name}`, {
+      match: [/\.js$/],
+      exclude: [/node_modules/],
+      replace_regex: /(@joystick.js\/node)(?!-)/g,
+      replace_with: '@joystick.js/node-canary',
+    });
+
+    await replace_in_files(`${process.cwd()}/${args?.name}`, {
+      match: [/\.js$/],
+      exclude: [/node_modules/],
+      replace_regex: /(@joystick.js\/ui)(?!-)/g,
+      replace_with: '@joystick.js/ui-canary',
+    });
+  }
+
+  // NOTE: Pure aesthetics. Above step completes so quickly that it almost looks like
+  // it's skipped. Add a buffer of 1s here to make for a better dev experience.
+  setTimeout(async () => {
+    process.loader.print("Installing dependencies...");
+    await exec(`cd ./${args?.name} && npm install --save @joystick.js/ui${options?.release === 'canary' ? '-canary' : ''}@latest @joystick.js/node${options?.release === 'canary' ? '-canary' : ''}@latest @joystick.js/test${options?.release === 'canary' ? '-canary' : ''}@latest`);
+    console.log(
+      `${chalk.green("Project created! To get started, run:")}\ncd ${args?.name} && joystick${options?.release === 'canary' ? '-canary' : ''} start`
+    );
+  }, 1000);
+};
+
+export default create;

package/src/commands/create/template/api/index.js

@@ -0,0 +1,6 @@
+const api = {
+  getters: {},
+  setters: {},
+};
+
+export default api;

package/src/commands/create/template/email/base.css

@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 30px;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  background: #fff;
+  color: #222;
+  font-size: 15px;
+  line-height: 23px;
+}

package/src/commands/create/template/email/base.html

@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>${subject}</title>
+    ${css}
+  </head>
+  <body>
+    <span class="preheader">${preheader}</span>
+    <div id="email"></div>
+  </body>
+</html>

package/src/commands/create/template/email/reset_password.js

@@ -0,0 +1,20 @@
+import ui from '@joystick.js/ui';
+
+const ResetPassword = ui.component({
+  css: {
+    min: {
+      width: {
+        0: `
+        `,
+      },
+    },
+  },
+  render: ({ props }) => {
+    return `
+      <div>
+      </div>
+    `;
+  },
+});
+
+export default ResetPassword;

package/src/commands/create/template/i18n/en-US.js

@@ -0,0 +1,14 @@
+const en_US = {
+  'ui/pages/index/index.js': {
+    buttons: {
+      get_started: 'Get Started',
+      view_on_github: '<span>{{stars}}</span> View on Github',
+    }
+  },
+  'ui/pages/error/index.js': {
+    page_not_found: 'Page Not Found',
+    double_check_url: 'Double-check the URL and try again.'
+  },
+};
+
+export default en_US;

package/src/commands/create/template/index.client.js

@@ -0,0 +1 @@
+// Add analytics, metrics, etc. here.

package/src/commands/create/template/index.css

@@ -0,0 +1,34 @@
+:root {
+  --brand: #ffcc00;
+}
+
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-size: 16px;
+  line-height: 1.5em;
+  background: #000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+p {
+  text-wrap: pretty;
+}

package/src/{functions/create/templates → commands/create/template}/index.html

@@ -2,8 +2,8 @@
 <html class="no-js" lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Joystick</title>
-    <meta name="description" content="An awesome JavaScript app that's under development.">
+    <title>App</title>
+    <meta name="description" content="A new Joystick app.">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#FFCC00">
     <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
@@ -13,7 +13,6 @@
   </head>
   <body>
     <div id="app"></div>
-    ${scripts}
     <script>
       if ("serviceWorker" in navigator) {
         navigator.serviceWorker.register("/service-worker.js");

package/src/{functions/create/templates → commands/create/template}/index.server.js

@@ -1,19 +1,19 @@
-import node from "@joystick.js/node";
-import api from "./api";
+import joystick from "@joystick.js/node";
+import api from "./api/index.js";
 
-node.app({
+joystick.app({
   api,
   routes: {
-    "/": (req, res) => {
+    "/": (req = {}, res = {}) => {
       res.render("ui/pages/index/index.js", {
         layout: "ui/layouts/app/index.js",
       });
     },
-    "*": (req, res) => {
+    "*": (req = {}, res = {}) => {
       res.render("ui/pages/error/index.js", {
         layout: "ui/layouts/app/index.js",
         props: {
-          statusCode: 404,
+          status_code: 404,
         },
       });
     },

package/src/{functions/create/templates → commands/create/template}/public/manifest.json

@@ -3,12 +3,12 @@
   "short_name": "app",
   "start_url": ".",
   "display": "standalone",
-  "background_color": "#fff",
-  "theme_color": "#ffcc00",
-  "description": "An awesome JavaScript app that's under development.",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "description": "A new Joystick app.",
   "icons": [{
     "src": "favicon.ico",
-    "sizes": "64x64",
+    "sizes": "32x32",
     "type": "image/x-icon"
   }, {
     "purpose": "any",

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,25 @@
+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 push_v2 from './push_v2/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,
+  push_v2,
+  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;