Add Electric-sql

[mattriese]

I've added the electric-sql project with a preliminary implementation of the LogicInterface using the electric-sql client.

The tests are not passing for electric-sql. It fails at the first attempt to interact with the DOM, saying it can't find the #own-name-submit button. When I run npm run start:electric-sql I do see the #own-name-submit button and can submit my name, so I'm not sure why the test can't find it.

When I try to run the app I can enter my name, but then it gets stuck on the loading spinner and won't load the example data (every other project besides Firebase also does this. Firebase loads the users but not messges). When I run the project in dev mode and go to http://localhost:3000/?replication=false&add-example-data=true it does seem to try to load the example data, but then the wa-sqlite library throws an error in the web assembly code: Error: cannot rollback - no transaction is active when this.logic.addMessage() is called. I'm not sure how to debug that. I've asked about it in the Electric-sql discord channel.

I've added all the scripts that I believe are necessary to build, serve, and test the electric-sql project. Electric-sql normally expects a backend with which to sync to be a part of the build process (to create the typescript client), but it also has a local-first-only mode that does not require an actual backend, but does require docker to be running during the build process so it can stand up an ephemeral postgres instance to generate the client and then tear it down. I used that strategy to keep things simple, and the docker requirement is mentioned in the README.

[mattriese]

I found the source of the error that was thrown from the wa-sqlite library when running the dev server. The project was loading the messages before the users, but the messages reference the users, so it did not want to add messages when the foreign keys referred no non-existent entitites. Reversing the order of the addMessage() and addUser() loops solved that.

At this point I can see from some logs that the example data users and messages are being added, but the UI is still stuck on the loading spinner after I enter my name, just like all the other projects (besides firebase).

[mattriese]

I've narrowed down the current problem in the tests. There is a JS error being thrown when the app is first trying to render. It comes from the wa-sqlite library. In the electric-sql example React Vite app, the wasm files are bundled in a way that the app can read them without any special treatment, but when I installed that library as normal in this app, it threw an error saying that it failed to fetch the wasm code:

So I added a postinstall script that moves the wasm files to the /assets folder. This seems to work when I run the dev server. The browser can fetch the code and the app renders. But testCafe doesn't seem to like it and it throws this error:

I'm not sure why this particular error would get thrown or how that relates to how the wasm files are bundled/served.
I'm still looking into potential solutions for this issue. I've never used Angular or testCafe before, so if you have any prior experience that might help in solving this, please let me know :)