sc0ttj
commented
2 years ago Ideal code examples:
useURL would be something like:
const data = useURL(
// give the URL to parse
'https://site.com/foo/bar.html?var=true#/profile/1'),
// optionally give an array of "routes", to shape the resulting data how you want it
[ '/profile/:userId', '/page/:pageId']
);
console.log(data);
// {
// protocol: 'https',
// domain: 'site.com',
// port: '',
// path: '/foo/',
// page: 'bar.html',
// var: true,
// profile: {
// userId: 1,
// },
// }
the useAPI add-on would be something like:
const opts = { ... };
const products = await useAPI('https://some.com/api/products', opts);
products.map(product => console.log(product)); // output JSON of each product
// ..or
useAPI('https://some.com/api/products', opts)
.then(products => {
products.map(product => console.log(product)); // output JSON of each product
});a database backend would be something like:
const db = useDatabase({
persistent: true, // refresh the page and the data persists
collaborative: true, // all users on page can read/write to the backend
realtime: true, // update (and re-render) page whenever the db changes
// the data source (choose one of these)
source: 'ipfs://oijwr9i8joisdnjfownf0nf', // use IPFS as storage
source: 'magnet://aefs46ad465we4e323es', // bitTorrent protocol as a backend, see dmotz/tystero
source: 'https://some.com/mydb.json', // read/write to JSON file on a [local or remote] web server
source: 'pouchdb://some.com/mydb', // in-memory first, syncs to remote
source: 'couchdb://some.com/mydb', // always uses remote
source: 'supabase://some.com/mydb', // a remote supabase db
source: 'localStorage', // in-memory only
backup: 'couchbdb://some.com/mydb2', // auto backup your database some where else
});
const name = 'Ted';
const details = db.get(`SELECT * FROM users WHERE name = ${name}`);
// ...and usage something like this
db.add( ... ).then(res => { ... })
db.update( ... ).then(res => { ... })
db.delete( ... ).then(res => { ... })
db.get( ... ).then(data => { ... })
db.query( ... ).then(data => { ... })
db.getJoin( ..., ... ).then(data => { ... })
Add-ons for managing data and APIs
Componentneeds an easy way of importing, querying, saving, and syncing external data.The benefits of easily managing external data:
External data could be:
Add-ons related to external data handling could be:
useURLadd-on, for URL (query string and hash path) data, based on sc0ttj/routeruseAPIoruseQueryadd-on for accessing third party APIs/endpoints, based onfetchuseDatabaseadd-on for saving/retreiving component data to/from a persistent database backendThe add-ons should enable the following, with simple, concise code:
Other Libraries
Data from page URL (inc query strings and hash path):
Fetching from third-party APIs:
Persistent data stores, with P2P data syncing:
Persistent data stores:
Non-persistent data stores, with P2P data syncing:
Others:
"In-memory" only databases (no backend, no collab):
Reading
Promise.allto resolve multiple requests