[Demo] Optional Sync Supabase Todo App (#309)

Author: Chriztiaan

demos/react-supabase-todolist-optional-sync/.env

@@ -0,0 +1,5 @@
+# Copy this template: `cp .env .env.local`
+# Edit .env.local and enter your Supabase and PowerSync project details.
+VITE_SUPABASE_URL=https://foo.supabase.co
+VITE_SUPABASE_ANON_KEY=foo
+VITE_POWERSYNC_URL=https://foo.powersync.journeyapps.com

demos/react-supabase-todolist-optional-sync/.gitignore

@@ -0,0 +1,47 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# ide 
+.idea
+.fleet
+.vscode
+
+# PWA
+**/public/workbox-*.js
+**/public/sw.js
+**/public/swe-worker-*
+**/public/worker-*.js
+**/public/fallback-*.js

demos/react-supabase-todolist-optional-sync/CHANGELOG.md

@@ -0,0 +1 @@
+# react-supabase-todolist-optional-sync

demos/react-supabase-todolist-optional-sync/LICENSE

@@ -0,0 +1,121 @@
+Creative Commons Legal Code
+
+CC0 1.0 Universal
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

demos/react-supabase-todolist-optional-sync/README.md

@@ -0,0 +1,153 @@
+# PowerSync + Supabase Web Demo: Todo List Optional Sync
+
+## Overview
+
+This demo app is an extension of the [React Supabase Todo List Demo](../react-supabase-todolist/README.md) and demonstrates using the [PowerSync SDK for Web](https://www.npmjs.com/package/@powersync/web) to persist data locally without syncing. This lets users use the app without having to register or sign in. It then demonstrates syncing this data to Supabase once the user registers at a later stage.
+
+The recommended flow through this demo is:
+
+1. Run the app in local-only mode and create data. Notice how data persists even when closing and reopening the app.
+2. Enable user registration and sign in to the app.
+3. Notice how previously created data now seamlessly syncs with Supabase.
+
+For an overview of the mechanics behind this, see [the explanation further below](#how-this-works).
+
+# Run the app in local-only mode
+
+In the repo directory, use [pnpm](https://pnpm.io/installation) to install dependencies:
+
+```bash
+pnpm install
+pnpm build:packages
+```
+
+Then switch into the demo's directory:
+
+```bash
+cd demos/react-supabase-todolist-optional-sync
+```
+
+Run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+Create some data and notice how the data persists after a refresh or reopening the app.
+
+It is expected that users cannot register or sign in at this stage.
+This is because Supabase and PowerSync credentials have not been been configured yet -- there is a hardcoded check in `SupabaseConnector.ts` for this. We'll get to this next.
+
+# Enable user registration and sign in
+
+Create Supabase and PowerSync projects, and add their credentials to `.env` to enable user registration and sign in.
+
+## Set up your Supabase project
+
+Detailed instructions for integrating PowerSync with Supabase can be found in [the integration guide](https://docs.powersync.com/integration-guides/supabase). Below are the main steps required to get this demo running.
+
+Create a new Supabase project, and paste an run the contents of [database.sql](./database.sql) in the Supabase SQL editor.
+
+It does the following:
+
+1. Create `lists` and `todos` tables.
+2. Create a publication called `powersync` for `lists` and `todos`.
+3. Enable row level security, allowing users to only view and edit their own data.
+4. Create a trigger to populate some sample data when an user registers.
+
+## Configure your PowerSync Instance
+
+Create a new PowerSync instance, connecting to the database of the Supabase project. See instructions [here](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
+
+Then deploy the following sync rules:
+
+```yaml
+bucket_definitions:
+  user_lists:
+    # Separate bucket per todo list
+    parameters: select id as list_id from lists where owner_id = request.user_id()
+    data:
+      - select * from lists where id = bucket.list_id
+      - select * from todos where list_id = bucket.list_id
+```
+
+## Configure the app
+
+Set up the Environment variables: Copy the `.env` file:
+
+```bash
+cp .env .env.local
+```
+
+Insert the credentials of your Supabase and PowerSync projects into `.env.local`.
+
+## Sign in to the app
+
+Restart the app and sign up or sign in. Once successfully signed in, existing and new data should seamlessly sync with Supabase.
+
+# How this works
+
+This app uses [local-only](https://powersync-ja.github.io/powersync-js/web-sdk/classes/Table#localonly) tables to persist data until the user has registered or signed in. Local-only tables do not log updates in the upload queue, avoiding any overhead or growth in database size.
+
+Once the user registers, the data is moved over to synced tables. The move operation also places the data in the upload queue.
+
+## Naive implementation
+
+A barebones way to achieve the above is to store and query data from local-only tables before user registration, copy this data to each corresponding synced table after registration and then store and query from the synced tables. This would look as follows:
+
+![diagram-0](./docs/local-only-readme-0.png)
+
+The downside to this approach is that app queries would need to continuously differentiate between the two tables based on whether the user signed in or not.
+
+## Recommended implementation
+
+To keep app queries consistent between the two states, we utilize the [viewName](https://powersync-ja.github.io/powersync-js/web-sdk/classes/Table#viewname) property (table definitions in the PowerSync client schema actually create views and this property lets us override the view name - see the [client architecture docs](https://docs.powersync.com/architecture/client-architecture)).
+
+This looks as follows in the local-only state:
+
+![diagram-1](./docs/local-only-readme-1.png)
+
+The local-only tables (`local_lists` and `local_todos`) have their view names overriden to `lists` and `todos`, and these names are used in queries (e.g. `PowerSync.getAll("SELECT * FROM lists");`). The `lists` and `todos` tables, which are the sync-enabled tables without the `localOnly` flag, are not used at this stage, as indicated by their `inactive_synced_` view names.
+
+When the user registers / signs in:
+
+![diagram-2](./docs/local-only-readme-2.png)
+
+The _synced_ tables (`lists` and `todos`) now have their view names set to `lists` and `todos`. Note that `updateSchema` must be run to update the view name. See the [schema](./src/library/powersync/AppSchema.ts) for details about this. The app query `PowerSync.getAll("SELECT * FROM lists")` now reads data from the `lists` table.
+
+Finally, copy data from the local-only tables to the synced tables, and delete data from the local-only tables to reduce database size:
+
+![diagram-3](./docs/local-only-readme-3.png)
+
+Note:
+If the user now signs out, all data is cleared, effectively resetting the app to the initial local-only state. To manage this, an additional local storage mechanism is used to track which schema is currently in use, as seen [here](./src/library/powersync/SyncMode.ts).
+
+# Limitations
+
+- `updateSchema` cannot be called inside a transaction, and it's recommended to perform the schema update when the database isn't connected.
+
+## Progressive Web App (PWA)
+
+This demo is PWA compatible, and works fully offline. PWA is not available in development (watch) mode. The manifest and service worker is built using [vite-plugin-pwa](https://vite-pwa-org.netlify.app/).
+
+Build the production codebase:
+
+```bash
+pnpm build
+```
+
+Run the production server:
+
+```bash
+pnpm preview
+```
+
+Open a browser on the served URL and install the PWA.
+
+## Learn More
+
+Check out [the PowerSync Web SDK on GitHub](https://github.com/powersync-ja/powersync-js/tree/main/packages/web) - your feedback and contributions are welcome!
+
+To learn more about PowerSync, see the [PowerSync docs](https://docs.powersync.com).

demos/react-supabase-todolist-optional-sync/docs/local-only-readme-0.png

@@ -0,0 +1,43 @@
+{
+  "name": "react-supabase-todolist-optional-sync",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "start": "pnpm build && pnpm preview"
+  },
+  "dependencies": {
+    "@powersync/react": "workspace:*",
+    "@powersync/web": "workspace:*",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
+    "@journeyapps/wa-sqlite": "^0.3.0",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/material": "^5.15.12",
+    "@mui/x-data-grid": "^6.19.6",
+    "@supabase/supabase-js": "^2.39.7",
+    "formik": "^2.4.6",
+    "js-logger": "^1.6.1",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@swc/core": "~1.6.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "babel-loader": "^9.1.3",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vite-plugin-pwa": "^0.19.2",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}