earthstar-project / react-earthstar Goto Github PK
View Code? Open in Web Editor NEWA UI toolkit for making collaborative, offline-first applets for small groups.
License: GNU Affero General Public License v3.0
A UI toolkit for making collaborative, offline-first applets for small groups.
License: GNU Affero General Public License v3.0
For the first release, it'd be great for the README to do more than just state the available functions and their signatures: in the same way that earthstar's README lays out how it would like to change peoples' relationship with their own data, I'd like to make the same case for react-earthstar and app-authorship, that an app can be a home cooked meal.
react-earthstar may also be the first point of entry for someone with earthstar, so it should be able to field explaining what earthstar is and its benefits. In addition to pointing to the current earthstar docs, it'd be nice to use something like @cinnamon-bun's slides to act as a quick primer.
There also needs to be a breakdown of the different grains of API available in this package: earthbar, components, and hooks, presented in that order, as I suspect that's the order that someone will need to learn about each as they use this package.
I see that EarthstarPeer
calls storage.close()
on every single storage whenever setStorages
is called (causing storages
to change).
react-earthstar/src/components/EarthstarPeer.tsx
Lines 45 to 49 in b2de258
I think that means that all the storages will become permanently closed in situations where we only wanted to get rid of one of them, or none of them.
setStorages
is called from:
useAddWorkspace
useRemoveWorkspace
useStorages
- maybe some apps use this to call setStorages, I'm not sure if any doInstead, we need to detect when a storage is actually going away and only close
it then.
If you're building an Earthstar app with foreknowledge that some of the people using it may have no idea what Earthstar is, it'd be great to have a dismissable onboarding tab that could explain it to them in the absence of a person guiding them through it.
It'd need to explain the concept of workspaces and an author keypair, and possibly more.
I'd love to add a new document that allows a user to enter their pronouns.
I'm not sure why yet, but if you switch away from an Earthstar app and switch back, FocusSyncer triggers several simultaneous syncs. This can be seen in the console as well as the network requests.
Buntimer is a nice simple app to try this out with, since it doesn't have any built-in timed document updating like Status does to confuse things. https://buntimer-earthstar.netlify.app/
As seen in earthstar-project/twodays-crossing#5 !
What would be needed for an upgrade to React 18?
To reproduce:
earthstar-peer-status-current-workspace
Deleting a document doesn't always trigger useDocuments to re-render the component.
I think it's because...
It subscribes to storage events here...
Lines 415 to 422 in b2de258
It uses path queries to detect when things have changed.
But some kinds of queries are not supported on path queries... like contentLength
. Those are just ignored when doing the path query.
In my code I'm doing a query to get all documents except deleted documents (which have content length zero):
let query: Query = {
pathStartsWith: '/buntimer-v1/timers/common/',
pathEndsWith: '.json',
contentLengthGt: 0, // <--------
}
When I delete a document, the hook does not re-render.
If I remove contentLengthGt
from the query and manually filter out the deleted documents later on, it does re-render.
For efficiency, path queries can only look at the path itself, they can't look at document content or timestamps or anything else.
In the Query type, we've separated out the safe kinds of queries that only apply to paths...
https://github.com/earthstar-project/earthstar/blob/main/src/storage/query.ts#L39-L56
export interface Query {
//=== filters that affect all documents equally within the same path <------
path?: string,
pathStartsWith?: string,
pathEndsWith?: string,
...And these are the other filters that can't be used in path queries.
//=== filters that differently affect documents within the same path <-----
timestamp?: number,
timestampGt?: number,
timestampLt?: number,
author?: AuthorAddress,
contentLength?: number,
contentLengthGt?: number,
contentLengthLt?: number,
I guess we need to not use paths()
queries inside useDocuments
to tell if things have changed.
In the meantime, I worked around the problem by limiting my query to just the path-related filters and doing further filtering myself in javascript.
With 1 workspace, when you reload the page the content appears immediately.
With 2+ workspaces, the Earthbar loads immediately but it sometimes takes a second or two for the content to load from localStorage.
I suspect there's a race condition or something and we're saving-and-loading to localStorage over and over for each document during the boot process? I think I've seen something like this happen also when receiving sync'd changes when there's more than one workspace set up.
Some console.logs around the localStorage code would probably help clear this up
This PR to Twodays Crossing fixes some CSS issues with Earthbar.
Some of those could be fixed here in react-earthstar instead. Of course some are also a consequence of the styling that Twodays is trying to do.
Just collecting these all in one place to keep track of them:
<div data-react-earthstar-input>
instead of having the data-react-earthstar-input
property on the <input>
itselfdata-react-earthstar-button
property<fieldset>
borders are kind of overwhelming, maybe would be nice to turn them off. (Or use a grid layout like in some of the other widgets?)A. autocomplete input box doesn't get styled, its parent gets styled instead. Compare to the invite input which is working as expected
B. popup z-index
C. some buttons not being styled
D. autocomplete input is not full-width
E. <fieldset>
borders are a bit much
Earthstar recently got streaming sync, and this should definitely be preferred over manual syncing IMO. There need to be hooks and UI made for this, the work has started here but we're waiting on an improved API before continuing with that PR.
Somehow the data for each workspace is being recursively duplicated inside itself over and over, in localStorage. It seems to go one level deeper every 20 seconds or so? That's about how often the status.txt document is saved, maybe it has something to do with the change handler that notices document changes and saves to localStorage.
I think that handler is saving the whole storage object instead of just storage._docs
. E.g. "onWrite" shouldn't be in localStorage.
Tested in Firefox and Chrome
This is a tricky one.
If you have 4 workspaces and each has 3 pubs, that's 12 simultaneous streams running.
It could be better to start and stop sync as you switch workspaces, but that makes switching into more of an expensive operation.
Really, I think sync needs to happen pub-by-pub and not for every combination of workspace-and-pub, e.g. only have one connection to each pub no matter how many workspaces there are. This will come in a future version of earthstar
.
when you are creating a new workspace, you can click "Add" as if adding an initial pub even when the field is blank, and a pub will be added with no text to the list of pubs. you can add multiple blank pubs, but clicking remove on one will remove all of them.
As of earthstar v5.7.3 there is a way to delete workspaces from disk. This should be used when workspaces are removed.
Use the format and conventions described in earthstar-project/earthstar#36 to make a component for redeeming invitations, as well as one for creating invitation codes.
I've lifted much of the strategy of Reach UI's approach to styling their reusable component, and like them we should have a styling guide which explains which attributes are available on what.
It would be great for people using react-earthstar to have a few themes they can import right out of the box with a few different flavours.
I am a fan of the idea of using these themes as a kind of 'warding' (as I understand it, a way to discourage nasty people from using your stuff by providing only bubbly, fun styling)
The "remove workspace" button works until you get to the last workspace. Then it switches away from viewing it, but doesn't actually remove it from localStorage. Reloading the page brings it back.
On Twodays Crossing, if you create an invite code it uses undefined
as the workspace instead of the current workspace.
earthstar:///?workspace=undefined&pub=https://earthstar-demo-pub-v5-a.glitch.me&v=1
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.