Sync streams demo

demos/react-supabase-todolist-sync-streams/.env.local.template

@@ -0,0 +1,5 @@
+# Copy this template: `cp .env.local.template .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-sync-streams/.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-sync-streams/CHANGELOG.md

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

demos/react-supabase-todolist-sync-streams/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-sync-streams/README.md

@@ -0,0 +1,76 @@
+# Sync streams demo
+
+## Overview
+
+This app is a fork of our [React Supabase Todolist Demo](../react-supabase-todolist/) to add support for sync streams.
+
+Sync streams are not a stable PowerSync feature yet, and most users should probably use the stable demo instead.
+
+To use this demo, deploy the following sync streams:
+
+```yaml
+streams:
+  lists:
+    query: SELECT * FROM lists WHERE owner_id = auth.user_id()
+    auto_subscribe: true
+  todos:
+    query: SELECT * FROM todos WHERE list_id = subscription.parameter('list') AND list_id IN (SELECT id FROM lists WHERE owner_id = auth.user_id())
+
+config:
+  edition: 2
+```
+
+## Getting Started
+
+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-sync-streams
+```
+
+Set up the Environment variables: Copy the `.env.local.template` file:
+
+```bash
+cp .env.local.template .env.local
+```
+
+And then edit `.env.local` to insert your credentials for Supabase.
+
+Run the development server:
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## 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-sync-streams/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-supabase-todolist",
+  "version": "0.3.16",
+  "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": "^1.3.1",
+    "@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",
+    "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"
+  }
+}

demos/react-supabase-todolist-sync-streams/src/app/auth/login/page.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LoginDetailsWidget } from '@/components/widgets/LoginDetailsWidget';
+import { useSupabase } from '@/components/providers/SystemProvider';
+import { DEFAULT_ENTRY_ROUTE } from '@/app/router';
+
+export default function LoginPage() {
+  const supabase = useSupabase();
+  const navigate = useNavigate();
+
+  return (
+    <LoginDetailsWidget
+      title="Login"
+      submitTitle="Login"
+      onSubmit={async (values) => {
+        if (!supabase) {
+          throw new Error('Supabase has not been initialized yet');
+        }
+        await supabase.login(values.email, values.password);
+        navigate(DEFAULT_ENTRY_ROUTE);
+      }}
+      secondaryActions={[
+        {
+          title: 'Register',
+          onClick: () => {
+            navigate('/auth/register');
+          }
+        }
+      ]}
+    />
+  );
+}

demos/react-supabase-todolist-sync-streams/src/app/auth/register/page.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSupabase } from '@/components/providers/SystemProvider';
+import { LoginDetailsWidget } from '@/components/widgets/LoginDetailsWidget';
+import { DEFAULT_ENTRY_ROUTE, LOGIN_ROUTE } from '@/app/router';
+
+export default function RegisterPage() {
+  const supabase = useSupabase();
+  const navigate = useNavigate();
+
+  return (
+    <LoginDetailsWidget
+      title="Register"
+      submitTitle="Register"
+      onSubmit={async ({ email, password }) => {
+        if (!supabase) {
+          throw new Error('Supabase has not been initialized yet');
+        }
+        const {
+          data: { session },
+          error
+        } = await supabase.client.auth.signUp({ email, password });
+        if (error) {
+          throw new Error(error.message);
+        }
+
+        if (session) {
+          supabase.updateSession(session);
+          navigate(DEFAULT_ENTRY_ROUTE);
+          return;
+        }
+
+        // TODO better dialog
+        alert('Registration successful, please login');
+        navigate(LOGIN_ROUTE);
+      }}
+      secondaryActions={[{ title: 'Back', onClick: () => navigate(LOGIN_ROUTE) }]}
+    />
+  );
+}