cheatcode / joystick Goto Github PK

This is more of a DX detail than actual functionality. Realizing now that there will be HTTP requests that trigger some functionality on the server but do not have an intent of "getting" or "setting" something. Technically those are HTTP POST requests, but the word set() can be confusing. Aliasing set() as action() would improve context with zero cost at the framework level.

This would also require considering the addition of an actions property on the API schema, something like:

export default {
  getters: {},
  setters: {},
  actions: {},
}

Right now we just say "Creating app..." while the folders and packages are installed but it'd be good to do this:

Creating app...
Installing @joystick.js/node and @joystick.js/ui...

And then jump to the "Project created!" page.

When building with esbuild right now, any file that is not a .js file gets picked up by esbuild and throws an error because it's not a recognized file type. Need to add a check to the files being built to say "just skip to copy if this isn't a .js file."

May want to consider a joystick.url() function which relies on this, too.

Any solutions to this error? Node version is 14.5.0.

➜  joystick create smth
file:///usr/local/lib/node_modules/@joystick.js/cli/dist/functions/start/databases/mongodb/checkConnection.js:1
import { MongoClient } from "mongodb";
         ^^^^^^^^^^^
SyntaxError: The requested module 'mongodb' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'mongodb';
const { MongoClient } = pkg;
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:98:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:137:5)
    at async Loader.import (internal/modules/esm/loader.js:162:24)

Maybe it's related https://jira.mongodb.org/browse/NODE-2655

Add support to accounts object for common OAuth providers:

import ui, { accounts } from '@joystick.js/ui';

accounts.github();
accounts.google();
accounts.facebook();
accounts.twitter();

Would also be good to have a hook for defining your own OAuth accounts provider.

Something like...

accounts.addRole();
accounts.removeRole();
accounts.hasRole();

Will take some work, but could have a way to do a static site eject that's just plain HTML, CSS, and JavaScript files organized into folders similar to routes.

Finding a lot of common functions that are being copy-pasted across the projects. Would be good to consolidate in a separate package and make that a dependency in @joystick.js/node, @joystick.js/ui, and @joystick.js/cli.

See existing notes on uploader pattern.

Came across this on another project in relation to middleware. Certain middleware config will need access to JavaScript in order to work (e.g., defining custom rules for a cors config). Would be good if a new config option can be passed to node.app() which mimics the behavior of the config block in the settings.env.json file.

Need to think a bit on this to avoid confusion. Do we want to allow all configuration to be passed this way or just specific configuration? Can we get away with introducing a .js version of settings files to avoid this altogether (and build them like any other file)? Need to be mindful of backwards compatibility with .json files.

This should just be a filter on the rules arrays.

Added support for this the other day but forgot to update the docs. Need to explain how it works and add examples.

Noticing that some paths are not being picked up as codependencies on file changes. Need to modify getPathVariations in getCodependenciesForFile:

const getPathVariations = (path = "") => {
  const pathParts = path.split("/");
  const variations = [];

  pathParts.forEach((pathPart, pathPartIndex) => {
    let base = `${pathPart}`;

    variations.push(`/${pathPart}`);

    pathParts.slice(pathPartIndex + 1, pathParts.length).forEach((part) => {
      base = base += `/${part}`;
      variations.push(base);
      if (part.includes(".")) {
        variations.push(base.split(".")[0]);
      }
    });
  });

  variations.push(`./${pathParts[0]}`);
  variations.push(`./${pathParts[0]}/index`);
  variations.push(`./${pathParts[0]}/index.js`);
  variations.push(`/index`);
  variations.push(`/index.js`);

  return variations;
};

getPathVariations("ui/components/button/index.js");

Consider adding a config option to enable websockets or customize the connection. Want to have something like ws.connect() or ws.send() built into @joystick.js/ui. Need to think carefully about how the endpoints will be shaped so you can expand it to be multi-purpose.

I think the catch-all regex for the routes is tripping it up as the pattern for that route technically matches the regex for the isActive check.

There will be a lot of errors/warnings that need to be printed to the console. It would be helpful to have a generic function that could be called from any of the packages to handle reporting so everything is consistent.

This was wired up for Rollup but isn't working with esbuild. Need to refactor.

Fudged it on this to get the beta complete. There are definitely leftovers lurking around but need to go through file by file and check for deprecated stuff.

Just realized these were all orphaned off in that repo.

Getting this when using a media query in a component's CSS:

TypeError: Cannot read properties of undefined (reading 'map')
    at file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:12:39
    at Array.map (<anonymous>)
    at buildPrefixedAST (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:9:37)
    at handlePrefixCSS (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:23:23)
    at getCSSFromTree (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:30:25)
    at file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:35:7
    at Array.forEach (<anonymous>)
    at getCSSFromTree (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/getCSSFromTree.js:34:19)
    at ssr_default (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/ssr/index.js:21:27)
    at ServerResponse.res.render (file:///Users/rglover/projects/cheatcode/site/node_modules/@joystick.js/node/dist/app/middleware/render.js:62:18)

Just bumped into a spot where this would be handy. Something like component.dom.querySelector('form').reset().

This will require a server trip because the auth cookie is HTTP only. Should be able to get away with an /api/_accounts/authenticated endpoint that just returns true or false.

Speculative. Have a way to define webhook handlers/middleware for common services.

Not on the watchlist?

Came across a use case for this on another project. Need to be able to disable the built-in middleware in favor of configuring a custom version in the middleware option passed to node.app(). This will allow handling domain-specific setups without having to kludge together something using the config in settings.

In order to aid in the process of authorizing access to the API, add an authorized property that allows for validating a request is authorized before passing the input to the get() or set() function:

export default {
  posts: {
    input: { ... },
    authorized: (input, context) => {
      // Return true/false here based on some test.
    },
    get: () => { ... },
  }
}

Simple enough so that you could write a multi-purpose function, import it, and assign it to authorized.

Getting this when I rename a folder. Likely due with the move to Chokidar.

node:fs:585
  handleErrorFromBinding(ctx);
  ^

Error: ENOENT: no such file or directory, open 'ui/pages/index/index.js'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at getCodeFrame_default (file:///Users/rglover/.nvm/versions/node/v16.13.0/lib/node_modules/@joystick.js/cli/dist/lib/getCodeFrame.js:4:19)
    at file:///Users/rglover/.nvm/versions/node/v16.13.0/lib/node_modules/@joystick.js/cli/dist/functions/start/buildFile.js:44:25
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: 'ui/pages/index/index.js'
}

Could be another config option. Some way to set content-policy headers. Would be good if this is an "on if defined, off if not" sort of feature.

Nothing too much in here but need a LICENSE.md file.

On the client this is done via @joystick.js/ui's get() and set() methods but technically you can import these methods via @joystick.js/node, too. The problem is that right now they perform an unnecessary HTTP request from the server back to itself.

While you could do something like this...

import node from '@joystick.js/node';
import api from './api';

node.app({
  routes: {
    '/do-something': (req, res) => {
      api.getters.posts.get();
      res.send('Done');
    },
  },
});

Calling api.getters.posts.get() directly skips over the input validation. Since all we're doing to register a getter is creating an express route, it'd be worth extracting the work being done in those routes into a separate function. Then, instead of making an HTTP request in the Node version of get() and set(), just make them a wrapper around that function. So, same API as the client but under the hood it skips the HTTP trip.

Need to think carefully about how to do this but need to force existence of certain things. May even make it so that folder structure/everything are locked.

Not sure if it'd be wise to alias their own auth functions (e.g., make authentication.signup() point to supabase.auth.signup()) or just have the supabase client exported raw. Likely the latter (same for #23).

Will also need to figure out auth hooks for .isLoggedIn() and related APIs.

Goal is to avoid being too tightly coupled so the only real upgrades necessary in Joystick are drivers or client libraries (want to avoid unnecessary abstractions on other people's code).

The .joystick/build path that's hardcoded conflicts with the value of process.cwd(), creating a duplicate path that can be resolved on SSR.

Want to get a testing workflow in place and solid before starting to comb through stuff.

Accidentally assigned the component instance to this first argument instead of the DOM event.

https://github.com/cheatcode/joystick/blob/master/cli/src/functions/create/templates/ui/pages/index/index.js#L11

Could piggyback on the databases idea for users and have a queues: true flag.

Just a passing thought. I don't think I'm doing this right now.

Mostly a copy/paste job with some tweaks.

Not sure what the implementation looks like but we could have a live property passed to the options of object of get() that allows you to establish a real-time query via websockets...

get('posts', {
  live: true,
  input: { ... },
  output: { ... },
});