cheatcode / joystick Goto Github PK
View Code? Open in Web Editor NEWA full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.
Home Page: https://cheatcode.co/joystick
License: Other
A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.
Home Page: https://cheatcode.co/joystick
License: Other
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.
Not on the watchlist?
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.
Added support for this the other day but forgot to update the docs. Need to explain how it works and add examples.
Just a passing thought. I don't think I'm doing this right now.
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
.
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.
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."
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.
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.
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");
This should just be a filter on the rules arrays.
Just realized these were all orphaned off in that repo.
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.
Accidentally assigned the component instance to this first argument instead of the DOM event.
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.
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)
Could piggyback on the databases idea for users and have a queues: true
flag.
Speculative. Have a way to define webhook handlers/middleware for common services.
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: { ... },
});
Just bumped into a spot where this would be handy. Something like component.dom.querySelector('form').reset()
.
Something like...
accounts.addRole();
accounts.removeRole();
accounts.hasRole();
Nothing too much in here but need a LICENSE.md file.
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.
This was wired up for Rollup but isn't working with esbuild. Need to refactor.
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).
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: {},
}
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
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.
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.
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.
May want to consider a joystick.url()
function which relies on this, too.
See existing notes on uploader pattern.
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.
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.
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
.
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'
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.