Migrate Yjs demo to vite.

Author: rkistner

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

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

demos/react-supabase-todolist/src/library/powersync/SupabaseConnector.ts

@@ -6,7 +6,7 @@ import {
   UpdateType
 } from '@journeyapps/powersync-sdk-web';
 
-import { SupabaseClient, createClient, Session, PostgrestError } from '@supabase/supabase-js';
+import { Session, SupabaseClient, createClient } from '@supabase/supabase-js';
 
 export type SupabaseConfig = {
   supabaseUrl: string;
@@ -32,49 +32,35 @@ export type SupabaseConnectorListener = {
 };
 
 export class SupabaseConnector extends BaseObserver<SupabaseConnectorListener> implements PowerSyncBackendConnector {
-  private _client: SupabaseClient | null;
-  private _config: SupabaseConfig | null;
+  readonly client: SupabaseClient;
+  readonly config: SupabaseConfig;
 
   ready: boolean;
 
   currentSession: Session | null;
 
   constructor() {
     super();
-    this._client = null;
-    this._config = {
+    this.config = {
       supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
       powersyncUrl: import.meta.env.VITE_POWERSYNC_URL,
       supabaseAnonKey: import.meta.env.VITE_SUPABASE_ANON_KEY
     };
+
+    this.client = createClient(this.config.supabaseUrl, this.config.supabaseAnonKey, {
+      auth: {
+        persistSession: true
+      }
+    });
     this.currentSession = null;
     this.ready = false;
   }
 
-  get client(): SupabaseClient {
-    if (!this._client) {
-      throw new Error('Supabase client has not been initialized yet');
-    }
-    return this._client;
-  }
-
-  get config(): SupabaseConfig {
-    if (!this._config) {
-      throw new Error('Supabase client has not been initialized yet');
-    }
-    return this._config;
-  }
-
   async init() {
     if (this.ready) {
       return;
     }
 
-    this._client = createClient(this.config.supabaseUrl, this.config.supabaseAnonKey, {
-      auth: {
-        persistSession: true
-      }
-    });
     const sessionResponse = await this.client.auth.getSession();
     this.updateSession(sessionResponse.data.session);
 

demos/react-supabase-todolist/tsconfig.json

@@ -30,7 +30,6 @@ yarn-debug.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
 
 # ide 
 .idea

demos/yjs-nextjs-supabase-text-collab/.eslintrc.json

@@ -3,24 +3,23 @@
   "version": "0.0.5",
   "private": true,
   "scripts": {
-    "build": "next build",
-    "clean": "rm -rf .next",
-    "watch": "next dev",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "start": "pnpm build && pnpm preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.8",
+    "@fontsource/roboto": "^5.0.12",
     "@journeyapps/powersync-react": "workspace:*",
     "@journeyapps/powersync-sdk-web": "workspace:*",
     "@journeyapps/wa-sqlite": "~0.1.1",
-    "@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",
+    "@lexical/react": "^0.11.3",
+    "@mui/icons-material": "^5.15.11",
+    "@mui/material": "^5.15.11",
+    "@mui/x-data-grid": "^6.19.6",
+    "@supabase/supabase-js": "^2.39.7",
     "@tiptap/extension-collaboration": "2.2.2",
     "@tiptap/extension-collaboration-cursor": "2.2.2",
     "@tiptap/extension-highlight": "2.2.2",
@@ -35,37 +34,33 @@
     "js-logger": "^1.6.1",
     "lato-font": "^3.0.0",
     "lexical": "^0.11.3",
-    "lib0": "^0.2.88",
+    "lib0": "^0.2.91",
     "lodash": "^4.17.21",
     "lowlight": "^2.9.0",
-    "next": "14.1.0",
-    "next-images": "1.8.5",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2",
     "remixicon": "^2.5.0",
-    "shiki": "^0.10.0",
+    "shiki": "^0.10.1",
     "simplify-js": "^1.2.4",
     "uuid": "9.0.1",
     "y-prosemirror": "1.0.20",
     "y-protocols": "1.0.6",
-    "yjs": "^13.6.11"
+    "yjs": "^13.6.14"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.202",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.55",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.63",
     "@types/react-dom": "^18.2.19",
     "@types/uuid": "9.0.8",
-    "autoprefixer": "^10.4.17",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^6.10.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.0",
+    "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
-    "sass": "^1.49.7",
-    "sass-loader": "^13.3.3",
     "style-loader": "^3.3.4",
     "supabase": "1.142.2",
-    "tailwindcss": "^3.4.1"
+    "vite": "^5.1.5",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0"
   }
 }