Fix browser example configuration

README.md

@@ -32,11 +32,12 @@ As a local-first system, ElectricSQL defaults to working without a backend. So y
 
 ### Using the ElectricSQL service
 
-The simplest way to configure a backend is to [sign up to ElectricSQL](https://console.electric-sql.com/auth/signup) and create an application. This will give you a globally unique `app` slug. Paste this into your [application config](https://electric-sql.com/docs/usage/configure), which in these examples is typically defined in an `electric-config.js` file in the root of the example folder, e.g.:
+The simplest way to configure a backend is to [sign up to ElectricSQL](https://console.electric-sql.com/auth/signup) and create an application. This will give you a globally unique `app` slug and an environment name. Paste this into your [application config](https://electric-sql.com/docs/usage/configure), which in these examples is typically defined in an `electric-config.js` file in the root of the example folder, e.g.:
 
 ```js
 const config = {
   app: '<YOUR APP SLUG>',
+  env: '<YOUR ENV NAME>',
   // ... other configuration options ...
 };
 ```

expo/electric-config.js

@@ -1,9 +1,14 @@
+import {data} from './migrations';
+
 const config = {
   app: "example-app",
+  env: "test",
+  token: 'my-token',
   replication: {
     address: "localhost",
     port: 5133,
   },
+  migrations: data.migrations
 };
 
 export default config;

expo/migrations/1666288242_init/satellite.sql

@@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations (
 );
 
 -- Initialisation of the metadata table
-INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');
+INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');
 
 
 -- These are toggles for turning the triggers on and off

expo/migrations/index.js

@@ -5,7 +5,7 @@ export const data = {
         "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n  rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n  namespace String NOT NULL,\n  tablename String NOT NULL,\n  optype String NOT NULL,\n  primaryKey String NOT NULL,\n  newRow String,\n  oldRow String,\n  timestamp TEXT\n);",
         "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n  key TEXT,\n  value BLOB\n);",
         "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL UNIQUE,\n  sha256 TEXT NOT NULL,\n  applied_at TEXT NOT NULL\n);",
-        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');",
+        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');",
         "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;",
         "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);"
       ],

expo/src/Example.tsx

@@ -9,8 +9,6 @@ import {Database, ElectrifiedDatabase, electrify} from 'electric-sql/expo';
 import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/react';
 
 import {styles} from './Styles';
-
-import {data} from '../migrations';
 import config from '../electric-config';
 
 export const ElectrifiedExample = () => {
@@ -19,9 +17,8 @@ export const ElectrifiedExample = () => {
   useEffect(() => {
     const init = async () => {
       const original = SQLite.openDatabase('example.db') as unknown as Database;
-      const opts = {config, migrations: data.migrations}
 
-      const electrified = await electrify(original, opts)
+      const electrified = await electrify(original, config)
       setDb(electrified)
     }
 

react-native/electric-config.js

@@ -1,9 +1,14 @@
+import {data} from './migrations';
+
 const config = {
   app: 'example-app',
+  env: 'test',
+  token: 'my-token',
   replication: {
     address: 'localhost',
     port: 5133,
   },
+  migrations: data.migrations
 };
 
 export default config;

react-native/migrations/1666288242_init/satellite.sql

@@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations (
 );
 
 -- Initialisation of the metadata table
-INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');
+INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');
 
 
 -- These are toggles for turning the triggers on and off

react-native/migrations/index.js

@@ -5,7 +5,7 @@ export const data = {
         "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n  rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n  namespace String NOT NULL,\n  tablename String NOT NULL,\n  optype String NOT NULL,\n  primaryKey String NOT NULL,\n  newRow String,\n  oldRow String,\n  timestamp TEXT\n);",
         "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n  key TEXT,\n  value BLOB\n);",
         "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL UNIQUE,\n  sha256 TEXT NOT NULL,\n  applied_at TEXT NOT NULL\n);",
-        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');",
+        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');",
         "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;",
         "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);"
       ],

react-native/src/Example.tsx

@@ -10,7 +10,6 @@ import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/reac
 
 import {styles} from './Styles';
 import config from '../electric-config';
-import {data} from '../migrations';
 
 const promisesEnabled = true;
 SQLite.enablePromise(promisesEnabled);
@@ -21,9 +20,8 @@ export const ElectrifiedExample = () => {
   useEffect(() => {
     const init = async () => {
       const original = await SQLite.openDatabase({name: 'example.db'}) as unknown as Database;
-      const opts = {config, migrations: data.migrations}
 
-      const electrified = await electrify(original, promisesEnabled, opts)
+      const electrified = await electrify(original, promisesEnabled, config)
       setDb(electrified)
     }
 

web/electric-config.js

@@ -1,9 +1,14 @@
+import { data } from "./migrations";
+
 const config = {
   app: "example-app",
+  env: "test",
+  token: "my-token",
   replication: {
     address: "localhost",
     port: 5133,
   },
+  migrations: data.migrations
 };
 
 export default config;

web/migrations/1666288242_init/satellite.sql

@@ -34,7 +34,7 @@ CREATE TABLE IF NOT EXISTS _electric_migrations (
 );
 
 -- Initialisation of the metadata table
-INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');
+INSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');
 
 
 -- These are toggles for turning the triggers on and off

web/migrations/index.js

@@ -5,7 +5,7 @@ export const data = {
         "-- The ops log table\nCREATE TABLE IF NOT EXISTS _electric_oplog (\n  rowid INTEGER PRIMARY KEY AUTOINCREMENT,\n  namespace String NOT NULL,\n  tablename String NOT NULL,\n  optype String NOT NULL,\n  primaryKey String NOT NULL,\n  newRow String,\n  oldRow String,\n  timestamp TEXT\n);",
         "-- Somewhere to keep our metadata\nCREATE TABLE IF NOT EXISTS _electric_meta (\n  key TEXT,\n  value BLOB\n);",
         "-- Somewhere to track migrations\nCREATE TABLE IF NOT EXISTS _electric_migrations (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL UNIQUE,\n  sha256 TEXT NOT NULL,\n  applied_at TEXT NOT NULL\n);",
-        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA==');",
+        "-- Initialisation of the metadata table\nINSERT INTO _electric_meta (key, value) VALUES ('compensations', 0), ('lastAckdRowId','0'), ('lastSentRowId', '0'), ('lsn', 'MA=='), ('clientId', '');",
         "-- These are toggles for turning the triggers on and off\nDROP TABLE IF EXISTS _electric_trigger_settings;",
         "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);"
       ],

web/src/App.tsx

@@ -5,16 +5,18 @@ import './style.css'
 
 import { initElectricSqlJs, ElectrifiedDatabase} from "electric-sql/browser"
 import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react'
+import  config  from '../electric-config'
 
 const worker = new Worker("./worker.js", { type: "module" });
+const user_id = "shared-user-id"
 
 export const ElectrifiedExample = () => {
   const [ db, setDb ] = useState<ElectrifiedDatabase>()
 
   useEffect(() => {
     const init = async () => {
       const SQL = await initElectricSqlJs(worker, {locateFile: (file: string) => `/${file}`})
-      const electrified = await SQL.openDatabase('example.db')
+      const electrified = await SQL.openDatabase('example.db', {...config, token: user_id})
 
       setDb(electrified)
     }

web/src/worker.js

@@ -1,5 +1,3 @@
 import { ElectricWorker } from 'electric-sql/browser'
-import { data } from "../migrations";
-import config from "../electric-config";
 
-ElectricWorker.start(self, { config, migrations: data.migrations });
+ElectricWorker.start(self);