@joystick.js/cli-canary 0.0.0-canary.21 → 0.0.0-canary.2100

package/src/cli.js

@@ -1,88 +1,115 @@
 import chalk from 'chalk';
-import help from './lib/help.js';
-import functions from './functions/index.js';
-import getArgs from './lib/getArgs.js';
-import getOptions from './lib/getOptions.js';
+import commands from './commands/index.js';
+import parse_args from './lib/parse_args.js';
+import parse_options from './lib/parse_options.js';
 
-const functionNames = Object.keys(functions);
-const functionsCalled = process.argv.filter((arg) => functionNames.includes(arg));
+const command_names = Object.keys(commands);
+const commands_called = process.argv.filter((arg) => command_names.includes(arg));
 
-const showHelp = process.argv.some((arg) => ['-h', '--help'].includes(arg));
+const show_help = process.argv.some((arg) => ['-h', '--help'].includes(arg));
 
-if (showHelp || functionsCalled.length === 0) {
-  help();
+if (show_help || commands_called.length === 0) {
+  commands.help.command();
   process.exit(0);
 }
 
-if (functionsCalled.length > 1) {
-  console.log(chalk.red('Only one function can be called at a time.'));
+if (commands_called.length > 1) {
+  console.log(chalk.red('Only one command can be called at a time.'));
   process.exit(0); 
 }
 
-if (functionsCalled.includes('build')) {
-  const args = getArgs(functions.build.args);
-  const options = getOptions(functions.build.options);
+if (commands_called.includes('build')) {
+  const args = parse_args(commands.build.args);
+  const options = parse_options(commands.build.options);
 
-  if (functions.build.function && typeof functions.build.function === 'function') {
-    functions.build.function(args, options);
+  if (commands.build.command) {
+    commands.build.command(args, options);
   }
 }
 
-if (functionsCalled.includes('create')) {
-  const args = getArgs(functions.create.args);
-  const options = getOptions(functions.create.options);
+if (commands_called.includes('create')) {
+  const args = parse_args(commands.create.args);
+  const options = parse_options(commands.create.options);
     
   if (!args.name) {
     console.log(chalk.red('Must pass a <name> for your app to joystick create. Run joystick --help for examples.'));
     process.exit(0);
   }
 
-  if (functions.create.function && typeof functions.create.function === 'function') {
-    functions.create.function(args, options);
+  if (commands.create.command) {
+    commands.create.command(args, options);
   }
 }
 
-if (functionsCalled.includes('logout')) {
-  const args = getArgs(functions.logout.args);
-  const options = getOptions(functions.logout.options);
+if (commands_called.includes('help')) {
+  const args = parse_args(commands.help.args);
+  const options = parse_options(commands.help.options);
 
-  if (functions.logout.function && typeof functions.logout.function === 'function') {
-    functions.logout.function(args, options);
+  if (commands.help.command) {
+    commands.help.command(args, options);
   }
 }
 
-if (functionsCalled.includes('push')) {
-  const args = getArgs(functions.push.args);
-  const options = getOptions(functions.push.options);
+if (commands_called.includes('logout')) {
+  const args = parse_args(commands.logout.args);
+  const options = parse_options(commands.logout.options);
 
-  if (functions.push.function && typeof functions.push.function === 'function') {
-    functions.push.function(args, options);
+  if (commands.logout.command) {
+    commands.logout.command(args, options);
   }
 }
 
-if (functionsCalled.includes('start')) {
-  const args = getArgs(functions.start.args);
-  const options = getOptions(functions.start.options);
+if (commands_called.includes('push')) {
+  const args = parse_args(commands.push.args);
+  const options = parse_options(commands.push.options);
 
-  if (functions.start.function && typeof functions.start.function === 'function') {
-    functions.start.function(args, options);
+  if (commands.push.command) {
+    commands.push.command(args, options);
   }
 }
 
-if (functionsCalled.includes('update')) {
-  const args = getArgs(functions.update.args);
-  const options = getOptions(functions.update.options);
+// NOTE: Temporary. Eventually will replace block above.
+// if (commands_called.includes('push_v2')) {
+//   const args = parse_args(commands.push_v2.args);
+//   const options = parse_options(commands.push_v2.options);
 
-  if (functions.update.function && typeof functions.update.function === 'function') {
-    functions.update.function(args, options);
+//   if (commands.push_v2.command) {
+//     commands.push_v2.command(args, options);
+//   }
+// }
+
+if (commands_called.includes('start')) {
+  const args = parse_args(commands.start.args);
+  const options = parse_options(commands.start.options);
+
+  if (commands.start.command) {
+    commands.start.command(args, options);
+  }
+}
+
+if (commands_called.includes('test')) {
+  const args = parse_args(commands.test.args);
+  const options = parse_options(commands.test.options);
+
+  if (commands.test.command) {
+    commands.test.command(args, options);
+  }
+}
+
+if (commands_called.includes('update')) {
+  const args = parse_args(commands.update.args);
+  const options = parse_options(commands.update.options);
+
+  if (commands.update.command) {
+    commands.update.command(args, options);
   }
 }
 
-if (functionsCalled.includes('use')) {
-  const args = getArgs(functions.use.args);
-  const options = getOptions(functions.use.options);
+if (commands_called.includes('use')) {
+  const args = parse_args(commands.use.args);
+  const options = parse_options(commands.use.options);
 
-  if (functions.use.function && typeof functions.use.function === 'function') {
-    functions.use.function(args, options);
+  if (commands.use.command) {
+    commands.use.command(args, options);
   }
 }

package/src/commands/build/definition.js

@@ -0,0 +1,58 @@
+import build from './index.js';
+
+const [_node, _bin, ...raw_args] = process.argv;
+
+const definition = {
+  description: 'Build an existing Joystick app.',
+  args: {},
+  options: {
+    environment: {
+      flags: {
+        '-e': {
+          set: !!raw_args.includes('-e'),
+          value: !!raw_args.includes('-e') && raw_args[raw_args.indexOf('-e') + 1],
+          parent: 'build',
+        },
+        '--environment': {
+          set: !!raw_args.includes('--environment'),
+          value: !!raw_args.includes('--environment') && raw_args[raw_args.indexOf('--environment') + 1],
+          parent: 'build',
+        },
+      },
+      description: 'The NODE_ENV you want to use for your build (default: production).',
+    },
+    outputPath: {
+      flags: {
+        '-o': {
+          set: !!raw_args.includes('-o'),
+          value: !!raw_args.includes('-o') && raw_args[raw_args.indexOf('-o') + 1],
+          parent: 'build',
+        },
+        '--outputPath': {
+          set: !!raw_args.includes('--outputPath'),
+          value: !!raw_args.includes('--outputPath') && raw_args[raw_args.indexOf('--outputPath') + 1],
+          parent: 'build',
+        },
+      },
+      description: 'The path you want to build the output to.',
+    },
+    type: {
+      flags: {
+        '-t': {
+          set: !!raw_args.includes('-t'),
+          value: !!raw_args.includes('-t') && raw_args[raw_args.indexOf('-t') + 1],
+          parent: 'build',
+        },
+        '--type': {
+          set: !!raw_args.includes('--type'),
+          value: !!raw_args.includes('--type') && raw_args[raw_args.indexOf('--type') + 1],
+          parent: 'build',
+        },
+      },
+      description: 'The type of build you want to generate (tar or folder).',
+    },
+  },
+  command: build,
+};
+
+export default definition;

package/src/commands/build/index.js

@@ -0,0 +1,7 @@
+import build_app from '../../lib/build/index.js';
+
+const build = (_args = {}, options = {}) => {
+	build_app(options);
+};
+
+export default build;

package/src/commands/create/build_package_json.js

@@ -0,0 +1,20 @@
+const build_package_json = (project_name = "") => {
+  const package_json = {
+    type: "module",
+    name: project_name,
+    version: "0.0.1",
+    description: "",
+    main: "index.js",
+    scripts: {
+      start: "joystick start",
+      test: "joystick test",
+    },
+    keywords: [],
+    author: "",
+    license: "ISC",
+  };
+
+  return JSON.stringify(package_json, null, 2);
+};
+
+export default build_package_json;

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;