feat(examples): New Pixels app example

[samwillis]

This is currently in examples/draw. If we want to use it as the default app for the starter that should probably be another PR.

The main code is in examples/draw/src/ElectricDraw.tsx, with a little layout stuff in App.tsx. Most of the dir should match a standard starter.

There are no additional dependancies for this example.

---

Testing this PR requires running the app against a locally built Electric, ts-client, and generator. You can test it with the following steps:

• build Electric (cd components/electric && make docker-build)
• build and pack the ts-client (cd clients/typescript && pnpm install && pnpm build && npm pack)
• build and pack the generator (cd generator && pnpm install && pnpm build && npm pack)
• modify linearlite to use the local Electric image (because it has not yet been published to Docker hub) i.e. in pixels/backend/compose/.envrc change the ELECTRIC_IMAGE env var to be electric:local-build.
• modify linearlite to use our packed ts-client:
  • change the electric-sql dependency in pixels/package.json to be "electric-sql": "file:<path to electric mono repo>/clients/typescript/electric-sql-0.6.4-2.tgz",
• modify your app to use our packed generator:
  • change the @electric-sql/prisma-generator dependency in pixels/package.json to be "@electric-sql/prisma-generator": "file:<path to electric mono repo>/generator/electric-sql-prisma-generator-1.0.2-regex.tgz",
• install dept
  • npm install
• now run the app:
  • npm run backend:up
  • db:migrate
  • client:generate
  • npm run start

[thruflo]

Just a thought on the name: this is obviously and intentionally very basic for a drawing app. I just wonder whether “draw” as a name raises expectations of the drawing capability. Perhaps “pixels” as an alternative app name?

[KyleAMathews]

You could use tldraw perhaps https://www.npmjs.com/package/@tldraw/tldraw?activeTab=explore

[samwillis]

You could use tldraw perhaps https://www.npmjs.com/package/@tldraw/tldraw?activeTab=explore

@KyleAMathews a demo with tldraw is on my to do list, a few things to get sorted on the backend first to make it easy :grinning:

[samwillis]

@thruflo I've pushed an update changing the name to "Pixels" and changing the styling to match our new branding.

[thruflo]

Nb: once we have the debug toolbar, maybe a nice example command will be to change the colour of all existing pixels?

@paulharter i wonder how to allow example apps to suggest comments to enter in the toolbar?

[samwillis]

After discussion with @balegas and @icehaunter we believe that it's possible to use the pixel coords as the PK with an upsert on drawing.

Electric should handle two concurrent INSERTs with the same PK under its LWW rules.

Last commit has made this change.

[samwillis]

I have updated this example to the new proxy and types.

It's split into three commits:

1. Initial state after running create-electric-app
2. The basic app implemented
3. Adding presence feature

@thruflo @balegas I think the conclusion was to exclude presence when this is used as the default app in the starter, but do we want the presence feature in the example?

We may also want to test it again during a morning standup (James you missed this last time)?

[balegas]

We definitely need to test it again, because we might still have converge issues (that happen only on more frequent operations).

• on the point of including presence, I no longer have a strong opinion, so I'm happy not to take part of that decision

[alco]

on the point of including presence, I no longer have a strong opinion, so I'm happy not to take part of that decision

My two cents is we should take it out of the example if we make it the default starter. Presence is ephemeral data for which latency is critical. It is out of scope for Electric and we definitely shouldn't give people ideas for polluting their DB with granular cursor movements that lose relevance as soon as the user closes their browser tab.

[alco]

It's a cool demo otherwise. I think presence should be part of the Pixels app if it remains a standalone example, because there it shows that Electric can be stressed (to an extent) by handling an realtime use case which is not exactly part of its core domain.

[KyleAMathews]

👋 we've been working the last month on a rebuild of the Electric server over at a temporary repo https://github.com/electric-sql/electric-next/

You can read more about why we made the decision at https://next.electric-sql.com/about

We're really excited about all the new possibilities the new server brings and we hope you'll check it out soon and give us your feedback.

We're now moving the temporary repo back here. As part of that migration we're closing all the old issues and PRs. We really appreciate you taking the time to investigate and create this improvement!