Switch from NextJS -> Vite / plain React for demos

README.md

@@ -39,12 +39,13 @@ _Bad connectivity is everywhere, and we're tired of it. PowerSync is on a missio
 
 Demo applications are located in the [`demos/`](./demos/) directory. Also see our [Demo Apps / Example Projects](https://docs.powersync.com/resources/demo-apps-example-projects) gallery which lists all projects by the backend and client-side framework they use.
 
-- [demos/nextjs-supabase-todolist](./demos/nextjs-supabase-todolist/): A Next.js to-do list example app using the PowerSync Web SDK and a Supabase backend.
-- [demos/yjs-nextjs-supabase-text-collab](./demos/yjs-nextjs-supabase-text-collab/README.md): A Next.js real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
+- [demos/react-supabase-todolist](./demos/react-supabase-todolist/): A React to-do list example app using the PowerSync Web SDK and a Supabase backend.
+- [demos/yjs-react-supabase-text-collab](./demos/yjs-react-supabase-text-collab/README.md): A React real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.
 - [demos/react-native-supabase-todolist](./demos/react-native-supabase-todolist): A React Native to-do list example app using a Supabase backend.
 - [demos/angular-supabase-todolist](./demos/angular-supabase-todolist/README.md) An Angular to-do list example app using the PowerSync Web SDK and a Supabase backend.
 - [demos/example-webpack](./demos/example-webpack/README.md): A minimal example demonstrating bundling with Webpack.
 - [demos/example-vite](./demos/example-vite/README.md): A minimal example demonstrating bundling with Vite.
+- [demos/example-nextjs](./demos/example-nextjs/README.md): An example demonstrating setup with Next.js.
 
 # Development
 

demos/example-nextjs/.env.local.template

@@ -0,0 +1 @@
+NEXT_PUBLIC_POWERSYNC_URL=

demos/example-nextjs/README.md

@@ -0,0 +1,9 @@
+# PowerSync Next.js example
+
+This example is built using [Next.js](https://nextjs.org/) and the [PowerSync JS web SDK](https://docs.powersync.com/client-sdk-references/js-web).
+
+To see it in action:
+
+1. Make sure to run `pnpm build:packages` in the root directory of this Git repo.
+2. `pnpm start`
+3. Open the localhost URL in the browser displayed in the terminal output.

demos/yjs-nextjs-supabase-text-collab/package.json → demos/example-nextjs/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@journeyapps/powersync-yjs-text-collab-demo",
-  "version": "0.0.5",
+  "name": "@journeyapps/powersync-example-nextjs",
+  "version": "0.0.1",
   "private": true,
   "scripts": {
     "build": "next build",
@@ -19,23 +19,12 @@
     "@lexical/react": "^0.11.1",
     "@mui/icons-material": "^5.15.8",
     "@mui/material": "^5.15.7",
-    "@mui/x-data-grid": "^6.19.3",
-    "@supabase/supabase-js": "^2.39.3",
-    "@tiptap/extension-collaboration": "2.2.2",
-    "@tiptap/extension-collaboration-cursor": "2.2.2",
-    "@tiptap/extension-highlight": "2.2.2",
-    "@tiptap/extension-task-item": "2.2.2",
-    "@tiptap/extension-task-list": "2.2.2",
-    "@tiptap/react": "2.2.2",
-    "@tiptap/starter-kit": "2.2.2",
-    "d3": "^7.8.5",
     "fast-glob": "^3.3.2",
     "formik": "^2.4.5",
     "highlight.js": "^11.9.0",
     "js-logger": "^1.6.1",
     "lato-font": "^3.0.0",
     "lexical": "^0.11.3",
-    "lib0": "^0.2.88",
     "lodash": "^4.17.21",
     "lowlight": "^2.9.0",
     "next": "14.1.0",
@@ -45,10 +34,7 @@
     "remixicon": "^2.5.0",
     "shiki": "^0.10.0",
     "simplify-js": "^1.2.4",
-    "uuid": "9.0.1",
-    "y-prosemirror": "1.0.20",
-    "y-protocols": "1.0.6",
-    "yjs": "^13.6.11"
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",
@@ -65,7 +51,6 @@
     "sass": "^1.49.7",
     "sass-loader": "^13.3.3",
     "style-loader": "^3.3.4",
-    "supabase": "1.142.2",
     "tailwindcss": "^3.4.1"
   }
 }

demos/yjs-nextjs-supabase-text-collab/src/app/layout.tsx → demos/example-nextjs/src/app/layout.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import { CssBaseline } from '@mui/material';
 
-import { ThemeProviderContainer } from '@/components/providers/ThemeProviderContainer';
 import { DynamicSystemProvider } from '@/components/providers/DynamicSystemProvider';
 
 import './globals.scss';
@@ -13,13 +12,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <head>
-        <title>PowerSync Yjs CRDT Text Collaboration Demo</title>
+        <title>PowerSync Next.js Example</title>
       </head>
       <body>
         <CssBaseline />
-        <ThemeProviderContainer>
-          <DynamicSystemProvider>{children}</DynamicSystemProvider>
-        </ThemeProviderContainer>
+        <DynamicSystemProvider>{children}</DynamicSystemProvider>
       </body>
     </html>
   );

demos/example-nextjs/src/app/page.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
+import { useRouter } from 'next/navigation';
+import { usePowerSync, usePowerSyncWatchedQuery } from '@journeyapps/powersync-react';
+
+export default function EntryPage() {
+  const router = useRouter();
+  const db = usePowerSync();
+  const customers = usePowerSyncWatchedQuery('SELECT id, name FROM customers');
+
+  useEffect(() => {
+    // Insert some test data
+    const names = ['Fred', 'Willard', 'Tina', 'Jake', 'Corey'];
+    const name = names[Math.floor(Math.random() * names.length)];
+    db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
+    return () => { };
+  }, []);
+
+  return (
+    <S.MainGrid container>
+      <S.CenteredGrid item xs={12} md={6} lg={5}>
+        <div>
+          <h1>Customers</h1>
+          {
+            customers.map(c =>
+              <ListItem key={c.id}>{c.name}</ListItem>
+            )
+          }
+          {customers.length == 0 ? <CircularProgress /> : []}
+
+        </div>
+      </S.CenteredGrid>
+    </S.MainGrid>
+  );
+}
+
+namespace S {
+  export const CenteredGrid = styled(Grid)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
+
+  export const MainGrid = styled(CenteredGrid)`
+    min-height: 100vh;
+  `;
+}

demos/example-nextjs/src/components/providers/SystemProvider.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { AppSchema } from '@/library/powersync/AppSchema';
+import { BackendConnector } from '@/library/powersync/BackendConnector';
+import { PowerSyncContext } from '@journeyapps/powersync-react';
+import { WASQLitePowerSyncDatabaseOpenFactory } from '@journeyapps/powersync-sdk-web';
+import { CircularProgress } from '@mui/material';
+import Logger from 'js-logger';
+import React, { Suspense } from 'react';
+
+Logger.useDefaults();
+Logger.setLevel(Logger.DEBUG);
+
+const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
+  dbFilename: 'powersync2.db',
+  schema: AppSchema,
+  flags: {
+    disableSSRWarning: true
+  }
+}).getInstance()
+const connector = new BackendConnector();
+
+powerSync.connect(connector);
+
+export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Suspense fallback={<CircularProgress />}>
+      <PowerSyncContext.Provider value={powerSync}>
+        {children}
+      </PowerSyncContext.Provider>
+    </Suspense>
+  );
+};
+
+export default SystemProvider;

demos/example-nextjs/src/library/powersync/AppSchema.ts

@@ -0,0 +1,13 @@
+import { column, Schema, TableV2 } from '@journeyapps/powersync-sdk-web';
+
+const customers = new TableV2({
+  name: column.text,
+  created_at: column.text
+});
+
+export const AppSchema = new Schema({
+  customers
+});
+
+export type Database = (typeof AppSchema)['types'];
+export type Customer = Database['customers'];

demos/example-nextjs/src/library/powersync/BackendConnector.ts

@@ -0,0 +1,62 @@
+import { AbstractPowerSyncDatabase, BaseObserver, PowerSyncBackendConnector } from '@journeyapps/powersync-sdk-web';
+
+export type BackendConfig = {
+  powersyncUrl: string;
+};
+
+export type BackendConnectorListener = {
+  initialized: () => void;
+};
+
+export class BackendConnector extends BaseObserver<BackendConnectorListener> implements PowerSyncBackendConnector {
+  private _config: BackendConfig;
+
+  constructor() {
+    super();
+    this._config = {
+      powersyncUrl: process.env.NEXT_PUBLIC_POWERSYNC_URL!
+    };
+  }
+
+  async fetchCredentials() {
+    return {
+      endpoint: this._config.powersyncUrl,
+      token: '' // TODO: Implement
+    };
+  }
+
+  async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
+    const transaction = await database.getNextCrudTransaction();
+
+    if (!transaction) {
+      return;
+    }
+
+    try {
+      // TODO: Upload here
+
+      await transaction.complete();
+    } catch (error: any) {
+      if (shouldDiscardDataOnError(error)) {
+        /**
+         * Instead of blocking the queue with these errors, discard the (rest of the) transaction.
+         *
+         * Note that these errors typically indicate a bug in the application.
+         * If protecting against data loss is important, save the failing records
+         * elsewhere instead of discarding, and/or notify the user.
+         */
+        console.error(`Data upload error - discarding`, error);
+        await transaction.complete();
+      } else {
+        // Error may be retryable - e.g. network error or temporary server error.
+        // Throwing an error here causes this call to be retried after a delay.
+        throw error;
+      }
+    }
+  }
+}
+
+function shouldDiscardDataOnError(error: any) {
+  // TODO: Ignore non-retryable errors here
+  return false;
+}

demos/nextjs-supabase-todolist/tsconfig.json → demos/example-nextjs/tsconfig.json

@@ -23,10 +23,5 @@
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
-  "references": [
-    {
-      "path": "../../packages/powersync-sdk-web"
-    }
-  ]
+  "exclude": ["node_modules"]
 }

demos/example-vite/vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
       input: 'src/index.html'
     }
   },
+  envDir: '..', // Use this dir for env vars, not 'src'.
   optimizeDeps: {
     // Don't optimize these packages as they contain web workers and WASM files.
     // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673

demos/example-webpack/src/index.js

@@ -15,11 +15,7 @@ let PowerSync;
 const openDatabase = async () => {
   PowerSync = new WASQLitePowerSyncDatabaseOpenFactory({
     schema: AppSchema,
-    dbFilename: 'test.sqlite',
-    flags: {
-      // This is disabled once CSR+SSR functionality is verified to be working correctly
-      disableSSRWarning: true
-    }
+    dbFilename: 'test.sqlite'
   }).getInstance();
 
   await PowerSync.init();