├── expo ├── .electric │ ├── @app │ ├── @config │ └── items-example │ │ └── local │ │ └── index.js ├── assets │ ├── icon.png │ ├── favicon.png │ ├── splash.png │ └── adaptive-icon.png ├── babel.config.js ├── .expo-shared │ └── assets.json ├── .gitignore ├── yalc.lock ├── migrations │ ├── 20230123_193833_152_init │ │ └── migration.sql │ ├── 20230123_194259_915_create_items │ │ └── migration.sql │ └── manifest.json ├── electric.json ├── metro.config.js ├── tsconfig.json ├── app.json ├── src │ ├── Styles.tsx │ └── Example.tsx ├── package.json ├── App.tsx └── README.md ├── react-native ├── .watchmanconfig ├── _node-version ├── .ruby-version ├── .electric │ ├── @app │ ├── @config │ └── items-example │ │ └── local │ │ └── index.js ├── .bundle │ └── config ├── babel.config.js ├── app.json ├── android │ ├── app │ │ ├── debug.keystore │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── drawable │ │ │ │ │ │ └── rn_edit_text_material.xml │ │ │ │ ├── jni │ │ │ │ │ ├── CMakeLists.txt │ │ │ │ │ ├── MainApplicationModuleProvider.h │ │ │ │ │ ├── OnLoad.cpp │ │ │ │ │ ├── MainComponentsRegistry.h │ │ │ │ │ ├── MainApplicationModuleProvider.cpp │ │ │ │ │ ├── MainApplicationTurboModuleManagerDelegate.h │ │ │ │ │ ├── MainApplicationTurboModuleManagerDelegate.cpp │ │ │ │ │ └── MainComponentsRegistry.cpp │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── electricsqlexample │ │ │ │ │ ├── newarchitecture │ │ │ │ │ ├── components │ │ │ │ │ │ └── MainComponentsRegistry.java │ │ │ │ │ ├── modules │ │ │ │ │ │ └── MainApplicationTurboModuleManagerDelegate.java │ │ │ │ │ └── MainApplicationReactNativeHost.java │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── electricsqlexample │ │ │ │ └── ReactNativeFlipper.java │ │ ├── proguard-rules.pro │ │ ├── build_defs.bzl │ │ └── _BUCK │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ └── gradlew.bat ├── ios │ ├── ElectricSQLExample │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Info.plist │ │ ├── LaunchScreen.storyboard │ │ └── AppDelegate.mm │ ├── ElectricSQLExample.xcworkspace │ │ └── contents.xcworkspacedata │ ├── .xcode.env │ ├── ElectricSQLExampleTests │ │ ├── Info.plist │ │ └── ElectricSQLExampleTests.m │ ├── Podfile │ └── ElectricSQLExample.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ └── ElectricSQLExample.xcscheme ├── .buckconfig ├── .prettierrc.js ├── Gemfile ├── index.js ├── migrations │ ├── 20230123_193833_152_init │ │ └── migration.sql │ ├── 20230123_194259_915_create_items │ │ └── migration.sql │ └── manifest.json ├── __tests__ │ └── App-test.tsx ├── tsconfig.json ├── .eslintrc.js ├── electric.json ├── src │ ├── Styles.tsx │ └── Example.tsx ├── metro.config.js ├── .gitignore ├── package.json ├── App.tsx └── README.md ├── web ├── .electric │ ├── @app │ ├── @config │ └── items-example │ │ └── local │ │ └── index.js ├── .npmrc ├── .gitignore ├── public │ ├── favicon.ico │ ├── robots.txt │ ├── wa-sqlite-async.wasm │ ├── index.css │ ├── index.html │ └── index.css.map ├── src │ ├── declarations.d.ts │ ├── index.tsx │ ├── style.css │ ├── App.tsx │ ├── App.css │ ├── Example.css │ ├── Example.tsx │ └── logo.svg ├── migrations │ ├── 20230123_193833_152_init │ │ └── migration.sql │ ├── 20230123_194259_915_create_items │ │ └── migration.sql │ └── manifest.json ├── electric.json ├── tsconfig.json ├── package.json ├── builder.js └── README.md ├── todoMVC ├── .electric │ ├── @app │ ├── @config │ └── todomvc-example │ │ └── local │ │ └── index.js ├── .gitignore ├── .prettierrc.json ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo-icon.png │ ├── sql-wasm.wasm │ ├── index.css │ ├── manifest.json │ ├── index.html │ └── base.css ├── bs-config.js ├── .prettierignore ├── src │ ├── worker.js │ ├── index.tsx │ ├── style.css │ ├── model │ │ ├── todolist │ │ │ ├── model.ts │ │ │ └── repository.ts │ │ └── todo │ │ │ ├── model.ts │ │ │ └── repository.ts │ └── logo.svg ├── migrations │ ├── 20230124_160941_413_init │ │ └── migration.sql │ ├── 20230124_160958_566_create_todomvc_schema │ │ └── migration.sql │ └── manifest.json ├── tsconfig.json ├── electric.json ├── .eslintrc.cjs ├── package.json ├── README.md └── builder.js ├── .gitignore ├── quickstart ├── .npmrc ├── src │ ├── declarations.d.ts │ ├── worker.js │ ├── index.tsx │ ├── style.css │ ├── App.css │ ├── App.tsx │ ├── Example.css │ ├── logo.svg │ ├── Example.original.tsx │ ├── Example.electrified.tsx │ └── Example.tsx ├── .gitignore ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── sql-wasm.wasm │ ├── index.css │ ├── index.html │ └── index.css.map ├── tsconfig.json ├── package.json ├── README.md ├── builder.js └── yarn.lock └── README.md /expo/.electric/@app: -------------------------------------------------------------------------------- 1 | items-example -------------------------------------------------------------------------------- /react-native/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /react-native/_node-version: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /web/.electric/@app: -------------------------------------------------------------------------------- 1 | items-example -------------------------------------------------------------------------------- /web/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /react-native/.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.5 2 | -------------------------------------------------------------------------------- /todoMVC/.electric/@app: -------------------------------------------------------------------------------- 1 | todomvc-example -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/.idea 2 | **/.DS_Store 3 | -------------------------------------------------------------------------------- /expo/.electric/@config: -------------------------------------------------------------------------------- 1 | items-example/local -------------------------------------------------------------------------------- /quickstart/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /react-native/.electric/@app: -------------------------------------------------------------------------------- 1 | items-example -------------------------------------------------------------------------------- /web/.electric/@config: -------------------------------------------------------------------------------- 1 | items-example/local -------------------------------------------------------------------------------- /web/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | -------------------------------------------------------------------------------- /todoMVC/.electric/@config: -------------------------------------------------------------------------------- 1 | todomvc-example/local -------------------------------------------------------------------------------- /todoMVC/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | -------------------------------------------------------------------------------- /react-native/.electric/@config: -------------------------------------------------------------------------------- 1 | items-example/local -------------------------------------------------------------------------------- /quickstart/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@aphro/sql.js'; 2 | -------------------------------------------------------------------------------- /quickstart/.gitignore: -------------------------------------------------------------------------------- 1 | .electricrc 2 | dist 3 | migrations 4 | node_modules 5 | -------------------------------------------------------------------------------- /todoMVC/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /expo/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/expo/assets/icon.png -------------------------------------------------------------------------------- /react-native/.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /expo/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/expo/assets/favicon.png -------------------------------------------------------------------------------- /expo/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/expo/assets/splash.png -------------------------------------------------------------------------------- /web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/web/public/favicon.ico -------------------------------------------------------------------------------- /web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /web/src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@aphro/sql.js'; 2 | declare module '@aphro/absurd-sql'; 3 | -------------------------------------------------------------------------------- /quickstart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /todoMVC/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /todoMVC/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/todoMVC/public/favicon.ico -------------------------------------------------------------------------------- /todoMVC/public/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/todoMVC/public/logo-icon.png -------------------------------------------------------------------------------- /todoMVC/public/sql-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/todoMVC/public/sql-wasm.wasm -------------------------------------------------------------------------------- /expo/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/expo/assets/adaptive-icon.png -------------------------------------------------------------------------------- /quickstart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/quickstart/public/favicon.ico -------------------------------------------------------------------------------- /react-native/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | } 4 | -------------------------------------------------------------------------------- /quickstart/public/sql-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/quickstart/public/sql-wasm.wasm -------------------------------------------------------------------------------- /react-native/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ElectricSQLExample", 3 | "displayName": "ElectricSQL React Native Example" 4 | } -------------------------------------------------------------------------------- /todoMVC/bs-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ghostMode: { 3 | clicks: false, 4 | forms: false, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /web/public/wa-sqlite-async.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/web/public/wa-sqlite-async.wasm -------------------------------------------------------------------------------- /quickstart/src/worker.js: -------------------------------------------------------------------------------- 1 | // import { ElectricWorker } from 'electric-sql/browser' 2 | 3 | // ElectricWorker.start(self); 4 | -------------------------------------------------------------------------------- /todoMVC/.prettierignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | dist/ 4 | node_modules/ 5 | .github/ 6 | *.css 7 | *.html 8 | builder.js 9 | -------------------------------------------------------------------------------- /react-native/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/debug.keystore -------------------------------------------------------------------------------- /expo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true) 3 | return { 4 | presets: ['babel-preset-expo'], 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ElectricSQLExample 3 | 4 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react-native/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /todoMVC/src/worker.js: -------------------------------------------------------------------------------- 1 | import { ElectricWorker } from 'electric-sql/browser' 2 | 3 | // eslint-disable-next-line no-undef 4 | ElectricWorker.start(self, {}) 5 | -------------------------------------------------------------------------------- /react-native/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /todoMVC/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | ReactDOM.render(, document.getElementById('root')) 6 | -------------------------------------------------------------------------------- /web/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | ReactDOM.render(, document.getElementById('root')) 6 | -------------------------------------------------------------------------------- /quickstart/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import App from './App' 4 | 5 | ReactDOM.render(, document.getElementById('root')) 6 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /react-native/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /expo/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /expo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | dist/ 4 | npm-debug.* 5 | *.jks 6 | *.p8 7 | *.p12 8 | *.key 9 | *.mobileprovision 10 | *.orig.* 11 | web-build/ 12 | 13 | # macOS 14 | .DS_Store 15 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/electric-sql/examples/HEAD/react-native/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /react-native/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby '2.7.5' 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.2' 7 | -------------------------------------------------------------------------------- /expo/yalc.lock: -------------------------------------------------------------------------------- 1 | { 2 | "version": "v1", 3 | "packages": { 4 | "electric-sql": { 5 | "signature": "595feeea351ac3f85bafb0384dfce113", 6 | "file": true, 7 | "replaced": "^0.1.3" 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /react-native/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native' 6 | import App from './App' 7 | import {name as appName} from './app.json' 8 | 9 | AppRegistry.registerComponent(appName, () => App) 10 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /react-native/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /web/migrations/20230123_193833_152_init/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_193833_152_init 4 | title: init 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | -------------------------------------------------------------------------------- /expo/migrations/20230123_193833_152_init/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_193833_152_init 4 | title: init 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | -------------------------------------------------------------------------------- /todoMVC/migrations/20230124_160941_413_init/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230124_160941_413_init 4 | title: init 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/CMakeLists.txt: -------------------------------------------------------------------------------- 1 | cmake_minimum_required(VERSION 3.13) 2 | 3 | # Define the library name here. 4 | project(electricsqlexample_appmodules) 5 | 6 | # This file includes all the necessary to let you build your application with the New Architecture. 7 | include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake) 8 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /react-native/migrations/20230123_193833_152_init/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_193833_152_init 4 | title: init 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | -------------------------------------------------------------------------------- /react-native/__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /web/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Helvetica Neue', Helvetica, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | background: #1c1e20; 7 | min-width: 360px; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /quickstart/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Helvetica Neue', Helvetica, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | background: #1c1e20; 7 | min-width: 360px; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 12 | } 13 | -------------------------------------------------------------------------------- /web/public/index.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} 2 | /*# sourceMappingURL=index.css.map */ 3 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /todoMVC/public/index.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} 2 | /*# sourceMappingURL=index.css.map */ 3 | -------------------------------------------------------------------------------- /quickstart/public/index.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace} 2 | /*# sourceMappingURL=index.css.map */ 3 | -------------------------------------------------------------------------------- /react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | // prettier-ignore 2 | { 3 | "extends": "@tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */ 4 | "compilerOptions": { 5 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 6 | 7 | /* Completeness */ 8 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /todoMVC/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 4 | 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } -------------------------------------------------------------------------------- /react-native/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | overrides: [ 7 | { 8 | files: ['*.ts', '*.tsx'], 9 | rules: { 10 | '@typescript-eslint/no-shadow': ['error'], 11 | 'no-shadow': 'off', 12 | 'no-undef': 'off', 13 | }, 14 | }, 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /web/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import logo from './logo.svg' 3 | import './App.css' 4 | import './style.css' 5 | 6 | import { Example } from './Example' 7 | 8 | export default function App() { 9 | return ( 10 |
11 |
12 | logo 13 | 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainApplicationModuleProvider.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | std::shared_ptr MainApplicationModuleProvider( 12 | const std::string &moduleName, 13 | const JavaTurboModule::InitParams ¶ms); 14 | 15 | } // namespace react 16 | } // namespace facebook 17 | -------------------------------------------------------------------------------- /web/migrations/20230123_194259_915_create_items/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_194259_915_create_items 4 | title: create items 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | CREATE TABLE IF NOT EXISTS items ( 12 | value TEXT PRIMARY KEY NOT NULL 13 | ) WITHOUT ROWID; 14 | -------------------------------------------------------------------------------- /expo/migrations/20230123_194259_915_create_items/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_194259_915_create_items 4 | title: create items 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | CREATE TABLE IF NOT EXISTS items ( 12 | value TEXT PRIMARY KEY NOT NULL 13 | ) WITHOUT ROWID; 14 | -------------------------------------------------------------------------------- /web/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web Example - ElectricSQL 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /quickstart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quickstart - ElectricSQL 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/OnLoad.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include "MainApplicationTurboModuleManagerDelegate.h" 3 | #include "MainComponentsRegistry.h" 4 | 5 | JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) { 6 | return facebook::jni::initialize(vm, [] { 7 | facebook::react::MainApplicationTurboModuleManagerDelegate:: 8 | registerNatives(); 9 | facebook::react::MainComponentsRegistry::registerNatives(); 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /react-native/migrations/20230123_194259_915_create_items/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230123_194259_915_create_items 4 | title: create items 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | CREATE TABLE IF NOT EXISTS items ( 12 | value TEXT PRIMARY KEY NOT NULL 13 | ) WITHOUT ROWID; 14 | -------------------------------------------------------------------------------- /todoMVC/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "todos", 3 | "name": "Todos", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo-icon.png", 12 | "sizes": "192x192", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "./#/active", 17 | "display": "standalone", 18 | "theme_color": "#AF2F2F", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /react-native/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /web/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: min(160px, 30vmin); 7 | pointer-events: none; 8 | margin-top: min(30px, 5vmin); 9 | margin-bottom: min(30px, 5vmin); 10 | } 11 | 12 | .App-header { 13 | background-color: #1c1e20; 14 | min-height: 100vh; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: top; 18 | justify-content: top; 19 | font-size: calc(10px + 2vmin); 20 | color: white; 21 | } 22 | 23 | .App-link { 24 | color: #61dafb; 25 | } 26 | -------------------------------------------------------------------------------- /quickstart/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: min(160px, 30vmin); 7 | pointer-events: none; 8 | margin-top: min(30px, 5vmin); 9 | margin-bottom: min(30px, 5vmin); 10 | } 11 | 12 | .App-header { 13 | background-color: #1c1e20; 14 | min-height: 100vh; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: top; 18 | justify-content: top; 19 | font-size: calc(10px + 2vmin); 20 | color: white; 21 | } 22 | 23 | .App-link { 24 | color: #61dafb; 25 | } 26 | -------------------------------------------------------------------------------- /react-native/ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /quickstart/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import logo from './logo.svg' 3 | import './App.css' 4 | import './style.css' 5 | 6 | import { Example } from './Example' 7 | // import { Example } from './Example.electrified' 8 | // import { Example } from './Example.original' 9 | 10 | export default function App() { 11 | return ( 12 |
13 |
14 | logo 15 | 16 |
17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /web/public/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": ["../src/style.css"], 4 | "sourcesContent": ["body {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\r\n 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\r\n}\r\n"], 5 | "mappings": "AAAA,cAEE,oJAEA,mCACA,kCAGF,KACE", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /quickstart/public/index.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": ["../src/style.css"], 4 | "sourcesContent": ["body {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',\r\n 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\r\n}\r\n"], 5 | "mappings": "AAAA,cAEE,oJAEA,mCACA,kCAGF,KACE", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /expo/electric.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "debug": false, 4 | "defaultEnv": "local", 5 | "directories": { 6 | "migrations": "migrations", 7 | "output": ".electric" 8 | }, 9 | "environments": { 10 | "default": { 11 | "console": null, 12 | "slug": "default" 13 | }, 14 | "local": { 15 | "console": { 16 | "host": "127.0.0.1", 17 | "port": 4000, 18 | "ssl": false 19 | }, 20 | "replication": { 21 | "host": "127.0.0.1", 22 | "port": 5133, 23 | "ssl": false 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /todoMVC/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /web/electric.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "debug": false, 4 | "defaultEnv": "local", 5 | "directories": { 6 | "migrations": "migrations", 7 | "output": ".electric" 8 | }, 9 | "environments": { 10 | "default": { 11 | "console": null, 12 | "slug": "default" 13 | }, 14 | "local": { 15 | "console": { 16 | "host": "127.0.0.1", 17 | "port": 4000, 18 | "ssl": false 19 | }, 20 | "replication": { 21 | "host": "127.0.0.1", 22 | "port": 5133, 23 | "ssl": false 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /quickstart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /todoMVC/electric.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "todomvc-example", 3 | "debug": false, 4 | "defaultEnv": "local", 5 | "directories": { 6 | "migrations": "migrations", 7 | "output": ".electric" 8 | }, 9 | "environments": { 10 | "default": { 11 | "console": null, 12 | "slug": "default" 13 | }, 14 | "local": { 15 | "console": { 16 | "host": "127.0.0.1", 17 | "port": 4000, 18 | "ssl": false 19 | }, 20 | "replication": { 21 | "host": "127.0.0.1", 22 | "port": 5133, 23 | "ssl": false 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /react-native/electric.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "debug": false, 4 | "defaultEnv": "local", 5 | "directories": { 6 | "migrations": "migrations", 7 | "output": ".electric" 8 | }, 9 | "environments": { 10 | "default": { 11 | "console": null, 12 | "slug": "default" 13 | }, 14 | "local": { 15 | "console": { 16 | "host": "127.0.0.1", 17 | "port": 4000, 18 | "ssl": false 19 | }, 20 | "replication": { 21 | "host": "127.0.0.1", 22 | "port": 5133, 23 | "ssl": false 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /react-native/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /todoMVC/src/model/todolist/model.ts: -------------------------------------------------------------------------------- 1 | import { Row } from 'electric-sql/dist/util/types' 2 | 3 | export type FilterValues = 'all' | 'active' | 'completed' 4 | 5 | export type TodoList = { 6 | id: string 7 | filter?: FilterValues 8 | editing?: string 9 | } 10 | 11 | // setting editing with a value because protocol does not allow nulls 12 | export const createTodoList = ( 13 | id: string, 14 | filter: FilterValues, 15 | editing = '' 16 | ): TodoList => { 17 | return { id, filter, editing } 18 | } 19 | 20 | export const resultsToTodoList = (r: Row) => 21 | createTodoList( 22 | r.id as string, 23 | (r.filter ?? 'all') as FilterValues, 24 | r.editing as string 25 | ) 26 | -------------------------------------------------------------------------------- /react-native/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ElectricSQLExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | 6 | if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") { 7 | include(":ReactAndroid") 8 | project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid') 9 | include(":ReactAndroid:hermes-engine") 10 | project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine') 11 | } 12 | -------------------------------------------------------------------------------- /react-native/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /todoMVC/migrations/20230124_160958_566_create_todomvc_schema/migration.sql: -------------------------------------------------------------------------------- 1 | /* 2 | ElectricSQL Migration 3 | name: 20230124_160958_566_create_todomvc_schema 4 | title: create todoMVC schema 5 | 6 | When you build or sync these migrations we will add some triggers and metadata 7 | so that ElectricSQL's Satellite component can sync your data. 8 | 9 | Write your SQLite migration below. 10 | */ 11 | CREATE TABLE "todolist" ( 12 | "id" TEXT NOT NULL, 13 | "filter" TEXT, 14 | "editing" TEXT, 15 | PRIMARY KEY ("id") 16 | ) WITHOUT ROWID; 17 | 18 | CREATE TABLE "todo" ( 19 | "id" TEXT NOT NULL, 20 | "listid" TEXT, 21 | "text" TEXT, 22 | "completed" INTEGER DEFAULT 0 NOT NULL, 23 | PRIMARY KEY ("id") 24 | ) WITHOUT ROWID; 25 | -------------------------------------------------------------------------------- /expo/metro.config.js: -------------------------------------------------------------------------------- 1 | const { getDefaultConfig } = require("expo/metro-config") 2 | 3 | const config = getDefaultConfig(__dirname) 4 | 5 | config.resolver.resolveRequest = (context, moduleName, platform) => { 6 | if (moduleName.startsWith("electric-sql/expo")) { 7 | return { 8 | filePath: `${__dirname}/node_modules/electric-sql/dist/drivers/expo-sqlite/index.js`, 9 | type: "sourceFile", 10 | } 11 | } 12 | 13 | if (moduleName.startsWith("electric-sql/react")) { 14 | return { 15 | filePath: `${__dirname}/node_modules/electric-sql/dist/frameworks/react/index.js`, 16 | type: "sourceFile", 17 | } 18 | } 19 | 20 | // Optionally, chain to the standard Metro resolver. 21 | return context.resolveRequest(context, moduleName, platform) 22 | } 23 | 24 | module.exports = config 25 | -------------------------------------------------------------------------------- /todoMVC/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'eslint:recommended', 4 | 'plugin:@typescript-eslint/recommended', 5 | 'plugin:react/recommended', 6 | ], 7 | parser: '@typescript-eslint/parser', 8 | plugins: ['@typescript-eslint'], 9 | root: true, 10 | rules: { 11 | '@typescript-eslint/no-unused-vars': [ 12 | 'warn', // or "error" 13 | { 14 | argsIgnorePattern: '^_', 15 | varsIgnorePattern: '^_', 16 | caughtErrorsIgnorePattern: '^_', 17 | }, 18 | ], 19 | '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }], 20 | 'no-constant-condition': ['error', { checkLoops: false }], 21 | }, 22 | ignorePatterns: ['**/*/mock.ts'], 23 | settings: { 24 | react: { 25 | version: 'detect', 26 | }, 27 | }, 28 | } 29 | -------------------------------------------------------------------------------- /quickstart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electric-sql-quickstart", 3 | "version": "0.1.0", 4 | "main": "builder.js", 5 | "author": "Valter Balegas", 6 | "license": "Apache-2.0", 7 | "scripts": { 8 | "build": "node builder.js", 9 | "build-prod": "NODE_ENV=production node builder.js", 10 | "start": "SERVE=true node builder.js" 11 | }, 12 | "engines": { 13 | "node": ">=16.11.0" 14 | }, 15 | "dependencies": { 16 | "@aphro/sql.js": "^1.7.0", 17 | "fs-extra": "^10.0.0", 18 | "react": "^17.0.2", 19 | "react-dom": "^17.0.2" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "^16.9.1", 23 | "@types/react": "^17.0.20", 24 | "@types/react-dom": "^17.0.9", 25 | "esbuild": "^0.12.26", 26 | "esbuild-plugin-inline-image": "^0.0.8", 27 | "typescript": "^4.4.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /expo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Native", 4 | "_version": "2.0.0", 5 | "compilerOptions": { 6 | "target": "esnext", 7 | "module": "commonjs", 8 | "types": [ 9 | "react-native" 10 | ], 11 | "lib": [ 12 | "es2019" 13 | ], 14 | "allowJs": true, 15 | "jsx": "react-native", 16 | "noEmit": true, 17 | "isolatedModules": true, 18 | "strict": true, 19 | "moduleResolution": "node", 20 | "resolveJsonModule": true, 21 | "allowSyntheticDefaultImports": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "esModuleInterop": true, 24 | "skipLibCheck": true 25 | }, 26 | "exclude": [ 27 | "node_modules", 28 | "babel.config.js", 29 | "metro.config.js", 30 | "jest.config.js" 31 | ], 32 | "extends": "expo/tsconfig.base" 33 | } 34 | -------------------------------------------------------------------------------- /web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electric-sql-web-example", 3 | "version": "0.1.0", 4 | "main": "builder.js", 5 | "author": "Valter Balegas", 6 | "license": "Apache-2.0", 7 | "scripts": { 8 | "build": "node builder.js", 9 | "build-prod": "NODE_ENV=production node builder.js", 10 | "start": "SERVE=true node builder.js" 11 | }, 12 | "engines": { 13 | "node": ">=16.11.0" 14 | }, 15 | "dependencies": { 16 | "wa-sqlite": "rhashimoto/wa-sqlite#buildless", 17 | "electric-sql": "^0.4.3", 18 | "fs-extra": "^10.0.0", 19 | "react": "^17.0.2", 20 | "react-dom": "^17.0.2" 21 | }, 22 | "devDependencies": { 23 | "@types/node": "^16.9.1", 24 | "@types/react": "^17.0.20", 25 | "@types/react-dom": "^17.0.9", 26 | "esbuild": "^0.12.26", 27 | "esbuild-plugin-inline-image": "^0.0.8", 28 | "typescript": "^4.4.3" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /expo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "owner": "electric-sql", 4 | "name": "electric-sql-expo-example", 5 | "slug": "electric-sql-expo-example", 6 | "version": "1.0.0", 7 | "orientation": "portrait", 8 | "icon": "./assets/icon.png", 9 | "userInterfaceStyle": "light", 10 | "splash": { 11 | "image": "./assets/splash.png", 12 | "resizeMode": "contain", 13 | "backgroundColor": "#ffffff" 14 | }, 15 | "updates": { 16 | "fallbackToCacheTimeout": 0 17 | }, 18 | "assetBundlePatterns": [ 19 | "**/*" 20 | ], 21 | "ios": { 22 | "supportsTablet": true 23 | }, 24 | "android": { 25 | "adaptiveIcon": { 26 | "foregroundImage": "./assets/adaptive-icon.png", 27 | "backgroundColor": "#FFFFFF" 28 | } 29 | }, 30 | "web": { 31 | "favicon": "./assets/favicon.png" 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /expo/src/Styles.tsx: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native' 2 | 3 | export const styles = StyleSheet.create({ 4 | button: { 5 | alignItems: 'center', 6 | justifyContent: 'center', 7 | paddingVertical: 12, 8 | paddingHorizontal: 32, 9 | margin: 18, 10 | marginBottom: 8, 11 | borderRadius: 4, 12 | elevation: 3, 13 | backgroundColor: '#404040', 14 | }, 15 | item: { 16 | fontSize: 16, 17 | lineHeight: 21, 18 | letterSpacing: 0.25, 19 | margin: 18, 20 | marginBottom: 4, 21 | marginTop: 12, 22 | paddingVertical: 10, 23 | paddingHorizontal: 24, 24 | color: 'black', 25 | borderColor: 'black', 26 | borderRadius: 5, 27 | borderWidth: 1, 28 | backgroundColor: '#efefef', 29 | }, 30 | text: { 31 | fontSize: 16, 32 | lineHeight: 21, 33 | fontWeight: 'bold', 34 | letterSpacing: 0.25, 35 | color: 'white', 36 | }, 37 | }) 38 | -------------------------------------------------------------------------------- /react-native/src/Styles.tsx: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native' 2 | 3 | export const styles = StyleSheet.create({ 4 | button: { 5 | alignItems: 'center', 6 | justifyContent: 'center', 7 | paddingVertical: 12, 8 | paddingHorizontal: 32, 9 | margin: 18, 10 | marginBottom: 8, 11 | borderRadius: 4, 12 | elevation: 3, 13 | backgroundColor: '#404040', 14 | }, 15 | item: { 16 | fontSize: 16, 17 | lineHeight: 21, 18 | letterSpacing: 0.25, 19 | margin: 18, 20 | marginBottom: 4, 21 | marginTop: 12, 22 | paddingVertical: 10, 23 | paddingHorizontal: 24, 24 | color: 'black', 25 | borderColor: 'black', 26 | borderRadius: 5, 27 | borderWidth: 1, 28 | backgroundColor: '#efefef', 29 | }, 30 | text: { 31 | fontSize: 16, 32 | lineHeight: 21, 33 | fontWeight: 'bold', 34 | letterSpacing: 0.25, 35 | color: 'white', 36 | }, 37 | }) 38 | -------------------------------------------------------------------------------- /expo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electric-sql-expo-example", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@tsconfig/react-native": "^2.0.2", 13 | "@types/react-native": "~0.69.1", 14 | "electric-sql": "^0.4.3", 15 | "expo": "~46.0.16", 16 | "expo-sqlite": "^10.3.0", 17 | "expo-status-bar": "~1.4.0", 18 | "react": "18.0.0", 19 | "react-native": "0.69.9", 20 | "react-native-get-random-values": "^1.8.0", 21 | "typescript": "^4.8.4", 22 | "uuid": "^9.0.0" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.12.9", 26 | "@types/uuid": "^9.0.0" 27 | }, 28 | "peerDependenciesMeta": { 29 | "ws": { 30 | "optional": true 31 | } 32 | }, 33 | "private": true 34 | } 35 | -------------------------------------------------------------------------------- /todoMVC/src/model/todo/model.ts: -------------------------------------------------------------------------------- 1 | import { Row } from 'electric-sql/dist/util/types' 2 | 3 | export type Todo = { 4 | id: string 5 | listid: string 6 | text: string 7 | completed: boolean 8 | } 9 | 10 | export const createTodo = ( 11 | id: string, 12 | listid: string, 13 | text: string, 14 | completed = false 15 | ): Todo => { 16 | return { id, listid, text, completed } 17 | } 18 | 19 | export const resultsToTodos = (todos: Row[]) => { 20 | const { 21 | all, 22 | active, 23 | completed, 24 | }: { all: Todo[]; active: Todo[]; completed: Todo[] } = { 25 | all: [], 26 | active: [], 27 | completed: [], 28 | } 29 | 30 | todos.map((t: Row) => { 31 | const todo = createTodo( 32 | t.id as string, 33 | t.listid as string, 34 | t.text as string, 35 | Boolean(t.completed) 36 | ) 37 | all.push(todo) 38 | if (t.completed) { 39 | completed.push(todo) 40 | } else { 41 | active.push(todo) 42 | } 43 | }) 44 | 45 | return { all, active, completed } 46 | } 47 | -------------------------------------------------------------------------------- /web/src/Example.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | margin-bottom: 1.5rem; 3 | } 4 | 5 | .button { 6 | display: inline-block; 7 | line-height: 1.3; 8 | text-align: center; 9 | text-decoration: none; 10 | vertical-align: middle; 11 | cursor: pointer; 12 | user-select: none; 13 | width: calc(15vw + 100px); 14 | margin-right: .5rem!important; 15 | margin-left: .5rem!important; 16 | border-radius: 32px; 17 | text-shadow: 2px 6px 20px rgba(0,0,0,0.4); 18 | box-shadow: rgba(0,0,0,0.5) 1px 2px 8px 0px; 19 | background: #1e2123; 20 | border: 2px solid #229089; 21 | color: #f9fdff; 22 | font-size: 16px; 23 | font-weight: 500; 24 | padding: 10px 18px; 25 | } 26 | 27 | .item { 28 | display: block; 29 | line-height: 1.3; 30 | text-align: center; 31 | vertical-align: middle; 32 | width: calc(30vw - 1.5rem + 200px); 33 | margin-right: auto; 34 | margin-left: auto; 35 | border-radius: 32px; 36 | border: 1.5px solid #bbb; 37 | box-shadow: rgba(0,0,0,0.3) 1px 2px 8px 0px; 38 | color: #f9fdff; 39 | font-size: 13px; 40 | padding: 10px 18px; 41 | } 42 | -------------------------------------------------------------------------------- /quickstart/src/Example.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | margin-bottom: 1.5rem; 3 | } 4 | 5 | .button { 6 | display: inline-block; 7 | line-height: 1.3; 8 | text-align: center; 9 | text-decoration: none; 10 | vertical-align: middle; 11 | cursor: pointer; 12 | user-select: none; 13 | width: calc(15vw + 100px); 14 | margin-right: .5rem!important; 15 | margin-left: .5rem!important; 16 | border-radius: 32px; 17 | text-shadow: 2px 6px 20px rgba(0,0,0,0.4); 18 | box-shadow: rgba(0,0,0,0.5) 1px 2px 8px 0px; 19 | background: #1e2123; 20 | border: 2px solid #229089; 21 | color: #f9fdff; 22 | font-size: 16px; 23 | font-weight: 500; 24 | padding: 10px 18px; 25 | } 26 | 27 | .item { 28 | display: block; 29 | line-height: 1.3; 30 | text-align: center; 31 | vertical-align: middle; 32 | width: calc(30vw - 1.5rem + 200px); 33 | margin-right: auto; 34 | margin-left: auto; 35 | border-radius: 32px; 36 | border: 1.5px solid #bbb; 37 | box-shadow: rgba(0,0,0,0.3) 1px 2px 8px 0px; 38 | color: #f9fdff; 39 | font-size: 13px; 40 | padding: 10px 18px; 41 | } 42 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainComponentsRegistry.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | 8 | namespace facebook { 9 | namespace react { 10 | 11 | class MainComponentsRegistry 12 | : public facebook::jni::HybridClass { 13 | public: 14 | // Adapt it to the package you used for your Java class. 15 | constexpr static auto kJavaDescriptor = 16 | "Lcom/electricsqlexample/newarchitecture/components/MainComponentsRegistry;"; 17 | 18 | static void registerNatives(); 19 | 20 | MainComponentsRegistry(ComponentFactory *delegate); 21 | 22 | private: 23 | static std::shared_ptr 24 | sharedProviderRegistry(); 25 | 26 | static jni::local_ref initHybrid( 27 | jni::alias_ref, 28 | ComponentFactory *delegate); 29 | }; 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /react-native/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | resolver: { 18 | resolveRequest: (context, moduleName, platform) => { 19 | if (moduleName.startsWith('electric-sql/react-native')) { 20 | return { 21 | filePath: `${__dirname}/node_modules/electric-sql/dist/drivers/react-native-sqlite-storage/index.js`, 22 | type: 'sourceFile', 23 | } 24 | } 25 | 26 | if (moduleName.startsWith('electric-sql/react')) { 27 | return { 28 | filePath: `${__dirname}/node_modules/electric-sql/dist/frameworks/react/index.js`, 29 | type: 'sourceFile', 30 | } 31 | } 32 | 33 | // Optionally, chain to the standard Metro resolver. 34 | return context.resolveRequest(context, moduleName, platform) 35 | }, 36 | }, 37 | } 38 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainApplicationModuleProvider.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationModuleProvider.h" 2 | 3 | #include 4 | #include 5 | 6 | namespace facebook { 7 | namespace react { 8 | 9 | std::shared_ptr MainApplicationModuleProvider( 10 | const std::string &moduleName, 11 | const JavaTurboModule::InitParams ¶ms) { 12 | // Here you can provide your own module provider for TurboModules coming from 13 | // either your application or from external libraries. The approach to follow 14 | // is similar to the following (for a library called `samplelibrary`: 15 | // 16 | // auto module = samplelibrary_ModuleProvider(moduleName, params); 17 | // if (module != nullptr) { 18 | // return module; 19 | // } 20 | // return rncore_ModuleProvider(moduleName, params); 21 | 22 | // Module providers autolinked by RN CLI 23 | auto rncli_module = rncli_ModuleProvider(moduleName, params); 24 | if (rncli_module != nullptr) { 25 | return rncli_module; 26 | } 27 | 28 | return rncore_ModuleProvider(moduleName, params); 29 | } 30 | 31 | } // namespace react 32 | } // namespace facebook 33 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /todoMVC/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "main": "builder.js", 5 | "author": "ElectricSQL", 6 | "license": "MIT", 7 | "scripts": { 8 | "lint": "eslint src --fix", 9 | "check-styleguide": "prettier --check --loglevel warn . && eslint src --quiet", 10 | "build": "node builder.js", 11 | "build-prod": "NODE_ENV=production node builder.js", 12 | "start": "SERVE=true node builder.js" 13 | }, 14 | "dependencies": { 15 | "@aphro/absurd-sql": "^0.0.53", 16 | "@aphro/sql.js": "^1.7.0", 17 | "base-64": "^1.0.0", 18 | "electric-sql": "^0.4.3", 19 | "fs-extra": "^10.0.0", 20 | "react": "^17.0.2", 21 | "react-dom": "^17.0.2", 22 | "uuid": "^9.0.0" 23 | }, 24 | "devDependencies": { 25 | "@types/node": "^16.9.1", 26 | "@types/react": "^17.0.20", 27 | "@types/react-dom": "^17.0.9", 28 | "@types/uuid": "^8.3.4", 29 | "@typescript-eslint/eslint-plugin": "^5.48.2", 30 | "@typescript-eslint/parser": "^5.48.2", 31 | "esbuild": "^0.12.26", 32 | "esbuild-plugin-inline-image": "^0.0.8", 33 | "eslint": "^8.32.0", 34 | "eslint-plugin-react": "^7.32.1", 35 | "prettier": "^2.8.3", 36 | "typescript": "^4.4.3" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-native/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | ios/.xcode.env.local 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | *.hprof 33 | .cxx/ 34 | 35 | # node.js 36 | # 37 | node_modules/ 38 | npm-debug.log 39 | yarn-error.log 40 | 41 | # BUCK 42 | buck-out/ 43 | \.buckd/ 44 | *.keystore 45 | !debug.keystore 46 | 47 | # fastlane 48 | # 49 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 50 | # screenshots whenever they are needed. 51 | # For more information about the recommended setup visit: 52 | # https://docs.fastlane.tools/best-practices/source-control/ 53 | 54 | **/fastlane/report.xml 55 | **/fastlane/Preview.html 56 | **/fastlane/screenshots 57 | **/fastlane/test_output 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # Ruby / CocoaPods 63 | /ios/Pods/ 64 | /vendor/bundle/ 65 | 66 | # Yalc 67 | .yalc/ 68 | yalc.lock 69 | -------------------------------------------------------------------------------- /quickstart/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL - Quickstart 16 | 17 | This is an example web application using ElectricSQL in the browser with React and [SQL.js](https://sql.js.org). It's designed to accompany the [Quickstart guide](https://electric-sql.com/docs/usage/quickstart) in the ElectricSQL documentation. 18 | 19 | ## Usage 20 | 21 | Follow the instructions on the default path of the [Quickstart guide](https://electric-sql.com/docs/usage/quickstart) and see the comments in (and alternative versions of) [src/Example.tsx](src/Example.tsx). 22 | 23 | ## More information 24 | 25 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 26 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #include 5 | #include 6 | 7 | namespace facebook { 8 | namespace react { 9 | 10 | class MainApplicationTurboModuleManagerDelegate 11 | : public jni::HybridClass< 12 | MainApplicationTurboModuleManagerDelegate, 13 | TurboModuleManagerDelegate> { 14 | public: 15 | // Adapt it to the package you used for your Java class. 16 | static constexpr auto kJavaDescriptor = 17 | "Lcom/electricsqlexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate;"; 18 | 19 | static jni::local_ref initHybrid(jni::alias_ref); 20 | 21 | static void registerNatives(); 22 | 23 | std::shared_ptr getTurboModule( 24 | const std::string &name, 25 | const std::shared_ptr &jsInvoker) override; 26 | std::shared_ptr getTurboModule( 27 | const std::string &name, 28 | const JavaTurboModule::InitParams ¶ms) override; 29 | 30 | /** 31 | * Test-only method. Allows user to verify whether a TurboModule can be 32 | * created by instances of this class. 33 | */ 34 | bool canCreateTurboModule(const std::string &name); 35 | }; 36 | 37 | } // namespace react 38 | } // namespace facebook 39 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/java/com/electricsqlexample/newarchitecture/components/MainComponentsRegistry.java: -------------------------------------------------------------------------------- 1 | package com.electricsqlexample.newarchitecture.components; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.proguard.annotations.DoNotStrip; 5 | import com.facebook.react.fabric.ComponentFactory; 6 | import com.facebook.soloader.SoLoader; 7 | 8 | /** 9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a 10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 11 | * folder for you). 12 | * 13 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 14 | * `newArchEnabled` property). Is ignored otherwise. 15 | */ 16 | @DoNotStrip 17 | public class MainComponentsRegistry { 18 | static { 19 | SoLoader.loadLibrary("fabricjni"); 20 | } 21 | 22 | @DoNotStrip private final HybridData mHybridData; 23 | 24 | @DoNotStrip 25 | private native HybridData initHybrid(ComponentFactory componentFactory); 26 | 27 | @DoNotStrip 28 | private MainComponentsRegistry(ComponentFactory componentFactory) { 29 | mHybridData = initHybrid(componentFactory); 30 | } 31 | 32 | @DoNotStrip 33 | public static MainComponentsRegistry register(ComponentFactory componentFactory) { 34 | return new MainComponentsRegistry(componentFactory); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /todoMVC/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Todos 20 | 21 | 22 | 23 | 24 | 25 |

26 |
27 | 28 |
29 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /react-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ElectricSQLExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 11 | }, 12 | "dependencies": { 13 | "electric-sql": "^0.4.3", 14 | "react": "18.1.0", 15 | "react-native": "0.70.1", 16 | "react-native-get-random-values": "^1.8.0", 17 | "react-native-sqlite-storage": "^6.0.1", 18 | "uuid": "^9.0.0" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.12.9", 22 | "@babel/runtime": "^7.12.5", 23 | "@react-native-community/eslint-config": "^2.0.0", 24 | "@tsconfig/react-native": "^2.0.2", 25 | "@types/jest": "^26.0.23", 26 | "@types/react-native": "^0.70.0", 27 | "@types/react-native-sqlite-storage": "^5.0.2", 28 | "@types/react-test-renderer": "^18.0.0", 29 | "@types/uuid": "^9.0.0", 30 | "@typescript-eslint/eslint-plugin": "^5.37.0", 31 | "@typescript-eslint/parser": "^5.37.0", 32 | "babel-jest": "^26.6.3", 33 | "eslint": "^7.32.0", 34 | "jest": "^26.6.3", 35 | "metro-react-native-babel-preset": "^0.72.1", 36 | "react-test-renderer": "18.1.0", 37 | "typescript": "^4.8.3" 38 | }, 39 | "jest": { 40 | "preset": "react-native", 41 | "moduleFileExtensions": [ 42 | "ts", 43 | "tsx", 44 | "js", 45 | "jsx", 46 | "json", 47 | "node" 48 | ] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /react-native/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.electricsqlexample", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.electricsqlexample", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /react-native/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '12.4' 5 | install! 'cocoapods', :deterministic_uuids => false 6 | 7 | target 'ElectricSQLExample' do 8 | config = use_native_modules! 9 | 10 | # Flags change depending on the env values. 11 | flags = get_default_flags() 12 | 13 | use_react_native!( 14 | :path => config[:reactNativePath], 15 | # Hermes is now enabled by default. Disable by setting this flag to false. 16 | # Upcoming versions of React Native may rely on get_default_flags(), but 17 | # we make it explicit here to aid in the React Native upgrade process. 18 | :hermes_enabled => true, 19 | :fabric_enabled => flags[:fabric_enabled], 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | :flipper_configuration => FlipperConfiguration.enabled, 25 | # An absolute path to your application root. 26 | :app_path => "#{Pod::Config.instance.installation_root}/.." 27 | ) 28 | 29 | target 'ElectricSQLExampleTests' do 30 | inherit! :complete 31 | # Pods for testing 32 | end 33 | 34 | post_install do |installer| 35 | react_native_post_install( 36 | installer, 37 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 38 | # necessary for Mac Catalyst builds 39 | :mac_catalyst_enabled => false 40 | ) 41 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp: -------------------------------------------------------------------------------- 1 | #include "MainApplicationTurboModuleManagerDelegate.h" 2 | #include "MainApplicationModuleProvider.h" 3 | 4 | namespace facebook { 5 | namespace react { 6 | 7 | jni::local_ref 8 | MainApplicationTurboModuleManagerDelegate::initHybrid( 9 | jni::alias_ref) { 10 | return makeCxxInstance(); 11 | } 12 | 13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() { 14 | registerHybrid({ 15 | makeNativeMethod( 16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid), 17 | makeNativeMethod( 18 | "canCreateTurboModule", 19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule), 20 | }); 21 | } 22 | 23 | std::shared_ptr 24 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 25 | const std::string &name, 26 | const std::shared_ptr &jsInvoker) { 27 | // Not implemented yet: provide pure-C++ NativeModules here. 28 | return nullptr; 29 | } 30 | 31 | std::shared_ptr 32 | MainApplicationTurboModuleManagerDelegate::getTurboModule( 33 | const std::string &name, 34 | const JavaTurboModule::InitParams ¶ms) { 35 | return MainApplicationModuleProvider(name, params); 36 | } 37 | 38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule( 39 | const std::string &name) { 40 | return getTurboModule(name, nullptr) != nullptr || 41 | getTurboModule(name, {.moduleName = name}) != nullptr; 42 | } 43 | 44 | } // namespace react 45 | } // namespace facebook 46 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ElectricSQLExample 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL Examples 16 | 17 | This repo contains example applications illustrating how to use [ElectricSQL](https://electric-sql.com) with various drivers and frameworks. 18 | 19 | See the sub folders for the actual applications. These include: 20 | 21 | - [expo](./expo) — example mobile app using [Expo](https://expo.dev) with the [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) driver 22 | - [react-native](./react-native) — example mobile app using [React Native](https://reactnative.dev) with the [react-native-sqlite-storage](https://www.npmjs.com/package/react-native-sqlite-storage) driver 23 | - [web](./web) — a simple web application using ElectricSQL in the browser with [wa-sqlite](https://github.com/rhashimoto/wa-sqlite) 24 | 25 | ## Running the examples 26 | 27 | Each example has usage instructions in the `README.md`. 28 | 29 | See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally). 30 | 31 | ## More information 32 | 33 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 34 | -------------------------------------------------------------------------------- /todoMVC/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL - TodoMVC 16 | 17 | This is an example TodoMVC web application using ElectricSQL in the browser with [SQL.js](https://sql.js.org) and [absurd-sql](https://github.com/jlongster/absurd-sql). 18 | 19 | ## Install 20 | 21 | Clone this repo and change directory into this folder: 22 | 23 | ```sh 24 | git clone https://github.com/electric-sql/examples 25 | cd examples/todoMVC 26 | ``` 27 | 28 | Install the dependencies: 29 | 30 | 31 | ```sh 32 | yarn 33 | ``` 34 | 35 | ## Run 36 | 37 | Build and run: 38 | 39 | 40 | ```sh 41 | yarn start 42 | 43 | ``` 44 | 45 | ## Sync 46 | 47 | The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally). 48 | 49 | Open [localhost:3001](http://localhost:3001) in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications. 50 | 51 | ## More information 52 | 53 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 54 | -------------------------------------------------------------------------------- /react-native/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "31.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 31 8 | targetSdkVersion = 31 9 | 10 | if (System.properties['os.arch'] == "aarch64") { 11 | // For M1 Users we need to use the NDK 24 which added support for aarch64 12 | ndkVersion = "24.0.8215888" 13 | } else { 14 | // Otherwise we default to the side-by-side NDK version from AGP. 15 | ndkVersion = "21.4.7075529" 16 | } 17 | } 18 | repositories { 19 | google() 20 | mavenCentral() 21 | } 22 | dependencies { 23 | classpath("com.android.tools.build:gradle:7.2.1") 24 | classpath("com.facebook.react:react-native-gradle-plugin") 25 | classpath("de.undercouch:gradle-download-task:5.0.1") 26 | // NOTE: Do not place your application dependencies here; they belong 27 | // in the individual module build.gradle files 28 | } 29 | } 30 | 31 | allprojects { 32 | repositories { 33 | maven { 34 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 35 | url("$rootDir/../node_modules/react-native/android") 36 | } 37 | maven { 38 | // Android JSC is installed from npm 39 | url("$rootDir/../node_modules/jsc-android/dist") 40 | } 41 | mavenCentral { 42 | // We don't want to fetch react-native from Maven Central as there are 43 | // older versions over there. 44 | content { 45 | excludeGroup "com.facebook.react" 46 | } 47 | } 48 | google() 49 | maven { url 'https://www.jitpack.io' } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/java/com/electricsqlexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.electricsqlexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.ReactRootView; 6 | 7 | public class MainActivity extends ReactActivity { 8 | 9 | /** 10 | * Returns the name of the main component registered from JavaScript. This is used to schedule 11 | * rendering of the component. 12 | */ 13 | @Override 14 | protected String getMainComponentName() { 15 | return "ElectricSQLExample"; 16 | } 17 | 18 | /** 19 | * Returns the instance of the {@link ReactActivityDelegate}. There the RootView is created and 20 | * you can specify the renderer you wish to use - the new renderer (Fabric) or the old renderer 21 | * (Paper). 22 | */ 23 | @Override 24 | protected ReactActivityDelegate createReactActivityDelegate() { 25 | return new MainActivityDelegate(this, getMainComponentName()); 26 | } 27 | 28 | public static class MainActivityDelegate extends ReactActivityDelegate { 29 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) { 30 | super(activity, mainComponentName); 31 | } 32 | 33 | @Override 34 | protected ReactRootView createRootView() { 35 | ReactRootView reactRootView = new ReactRootView(getContext()); 36 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 37 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED); 38 | return reactRootView; 39 | } 40 | 41 | @Override 42 | protected boolean isConcurrentRootEnabled() { 43 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18). 44 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html 45 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /react-native/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | -------------------------------------------------------------------------------- /todoMVC/src/model/todolist/repository.ts: -------------------------------------------------------------------------------- 1 | import { Database } from 'electric-sql/browser' 2 | import { FilterValues, TodoList } from './model' 3 | 4 | export class TodoListRepository { 5 | private db: Database 6 | 7 | constructor(db: Database) { 8 | this.db = db 9 | } 10 | 11 | async getById(listid: string): Promise { 12 | const sql = 'SELECT id, editing, filter FROM todolist WHERE id = ?' 13 | const args = [listid] 14 | 15 | const res = await this.db.exec(sql, args) 16 | 17 | if (res.length == 0) { 18 | return null 19 | } 20 | 21 | const { columns, values } = res[0] 22 | return { 23 | id: values[0][columns.indexOf('id')] as string, 24 | editing: values[0][columns.indexOf('editing')] as string, 25 | filter: values[0][columns.indexOf('filter')] as FilterValues, 26 | } 27 | } 28 | 29 | async save(todoList: TodoList): Promise { 30 | const sql = 31 | 'INSERT INTO todolist(id, filter, editing) values (?, ?, ?) ON CONFLICT DO UPDATE SET filter = ?, editing = ?' 32 | const args = [ 33 | todoList.id, 34 | todoList.filter ? todoList.filter : 'all', 35 | todoList.editing ? todoList.editing : '', 36 | todoList.filter ? todoList.filter : 'all', 37 | todoList.editing ? todoList.editing : '', 38 | ] 39 | 40 | return this.db.run(sql, args) 41 | } 42 | 43 | async update(todoList: TodoList): Promise { 44 | const set: string[] = [] 45 | const args = [] 46 | 47 | if (todoList.editing !== undefined) { 48 | set.push('editing = ?') 49 | args.push(todoList.editing) 50 | } 51 | 52 | if (todoList.filter !== undefined) { 53 | set.push('filter = ?') 54 | args.push(todoList.filter) 55 | } 56 | 57 | if (set.length == 0) { 58 | throw new Error('filter or editing must be set') 59 | } 60 | 61 | args.push(todoList.id) 62 | 63 | const sql = `UPDATE todolist SET ${set.join(' , ')} WHERE id = ?` 64 | 65 | return this.db.run(sql, args) 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/java/com/electricsqlexample/newarchitecture/modules/MainApplicationTurboModuleManagerDelegate.java: -------------------------------------------------------------------------------- 1 | package com.electricsqlexample.newarchitecture.modules; 2 | 3 | import com.facebook.jni.HybridData; 4 | import com.facebook.react.ReactPackage; 5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.soloader.SoLoader; 8 | import java.util.List; 9 | 10 | /** 11 | * Class responsible to load the TurboModules. This class has native methods and needs a 12 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/ 13 | * folder for you). 14 | * 15 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 16 | * `newArchEnabled` property). Is ignored otherwise. 17 | */ 18 | public class MainApplicationTurboModuleManagerDelegate 19 | extends ReactPackageTurboModuleManagerDelegate { 20 | 21 | private static volatile boolean sIsSoLibraryLoaded; 22 | 23 | protected MainApplicationTurboModuleManagerDelegate( 24 | ReactApplicationContext reactApplicationContext, List packages) { 25 | super(reactApplicationContext, packages); 26 | } 27 | 28 | protected native HybridData initHybrid(); 29 | 30 | native boolean canCreateTurboModule(String moduleName); 31 | 32 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder { 33 | protected MainApplicationTurboModuleManagerDelegate build( 34 | ReactApplicationContext context, List packages) { 35 | return new MainApplicationTurboModuleManagerDelegate(context, packages); 36 | } 37 | } 38 | 39 | @Override 40 | protected synchronized void maybeLoadOtherSoLibraries() { 41 | if (!sIsSoLibraryLoaded) { 42 | // If you change the name of your application .so file in the Android.mk file, 43 | // make sure you update the name here as well. 44 | SoLoader.loadLibrary("electricsqlexample_appmodules"); 45 | sIsSoLibraryLoaded = true; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /web/src/Example.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import './Example.css' 3 | 4 | import { start, ElectricDatabase } from 'electric-sql/wa-sqlite' 5 | import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react' 6 | 7 | import config from '../.electric/@config' 8 | import { ElectricNamespace } from "electric-sql" 9 | 10 | export const Example = () => { 11 | const [ db, setDb ] = useState() 12 | 13 | useEffect(() => { 14 | const init = async () => { 15 | const { db, electric } = await start('electric.db', '', config) 16 | db.electric = electric // because the hook for live queries expects `electric` to be present on the `db` 17 | setDb(db) 18 | } 19 | 20 | init() 21 | }, []) 22 | 23 | if (db === undefined) { 24 | return null 25 | } 26 | 27 | return ( 28 | 29 | 30 | 31 | ) 32 | } 33 | 34 | const ExampleComponent = () => { 35 | const db = useElectric() as ElectricDatabase & { electric: ElectricNamespace } 36 | const electric = db.electric 37 | const { results } = useElectricQuery('SELECT value FROM items', []) 38 | 39 | const addItem = async () => { 40 | await electric.adapter.run({ 41 | sql: 'INSERT INTO items VALUES(?)', 42 | args: [crypto.randomUUID()] 43 | } 44 | ) 45 | electric.notifier.potentiallyChanged() // need to be called manually because the wa-sqlite driver is not proxied 46 | } 47 | 48 | const clearItems = async () => { 49 | await electric.adapter.run({ 50 | sql : 'DELETE FROM items where true' 51 | }) 52 | electric.notifier.potentiallyChanged() // need to be called manually because the wa-sqlite driver is not proxied 53 | } 54 | 55 | return ( 56 |

57 |
58 | 61 | 64 |
65 | {results && results.map((item: any, index: any) => ( 66 |

67 | { item.value } 68 |

69 | ))} 70 |
71 | ) 72 | } 73 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExampleTests/ElectricSQLExampleTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface ElectricSQLExampleTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ElectricSQLExampleTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /web/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | ElectricSQL Icon (Alt) 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /quickstart/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | ElectricSQL Icon (Alt) 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /expo/App.tsx: -------------------------------------------------------------------------------- 1 | import React, {type PropsWithChildren} from 'react' 2 | import { 3 | SafeAreaView, 4 | ScrollView, 5 | StatusBar, 6 | StyleSheet, 7 | Text, 8 | useColorScheme, 9 | View, 10 | } from 'react-native' 11 | 12 | import {Colors, Header} from 'react-native/Libraries/NewAppScreen' 13 | 14 | import {ElectrifiedExample} from './src/Example' 15 | 16 | const Section: React.FC< 17 | PropsWithChildren<{ 18 | title: string 19 | }> 20 | > = ({children, title}) => { 21 | const isDarkMode = useColorScheme() === 'dark' 22 | return ( 23 | 24 | 31 | {title} 32 | 33 | 40 | {children} 41 | 42 | 43 | ) 44 | } 45 | 46 | const App = () => { 47 | const isDarkMode = useColorScheme() === 'dark' 48 | 49 | const backgroundStyle = { 50 | backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, 51 | } 52 | 53 | return ( 54 | 55 | 59 | 62 |
63 | 67 |
68 | 69 |
70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | const styles = StyleSheet.create({ 77 | sectionContainer: { 78 | marginTop: 32, 79 | paddingHorizontal: 24, 80 | }, 81 | sectionTitle: { 82 | fontSize: 24, 83 | fontWeight: '600', 84 | }, 85 | sectionDescription: { 86 | marginTop: 8, 87 | fontSize: 18, 88 | fontWeight: '400', 89 | }, 90 | highlight: { 91 | fontWeight: '700', 92 | }, 93 | }) 94 | 95 | export default App 96 | -------------------------------------------------------------------------------- /react-native/App.tsx: -------------------------------------------------------------------------------- 1 | import React, {type PropsWithChildren} from 'react' 2 | import { 3 | SafeAreaView, 4 | ScrollView, 5 | StatusBar, 6 | StyleSheet, 7 | Text, 8 | useColorScheme, 9 | View, 10 | } from 'react-native' 11 | 12 | import {Colors, Header} from 'react-native/Libraries/NewAppScreen' 13 | 14 | import {ElectrifiedExample} from './src/Example' 15 | 16 | const Section: React.FC< 17 | PropsWithChildren<{ 18 | title: string 19 | }> 20 | > = ({children, title}) => { 21 | const isDarkMode = useColorScheme() === 'dark' 22 | return ( 23 | 24 | 31 | {title} 32 | 33 | 40 | {children} 41 | 42 | 43 | ) 44 | } 45 | 46 | const App = () => { 47 | const isDarkMode = useColorScheme() === 'dark' 48 | 49 | const backgroundStyle = { 50 | backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, 51 | } 52 | 53 | return ( 54 | 55 | 59 | 62 |
63 | 67 |
68 | 69 |
70 | 71 | 72 | 73 | ) 74 | } 75 | 76 | const styles = StyleSheet.create({ 77 | sectionContainer: { 78 | marginTop: 32, 79 | paddingHorizontal: 24, 80 | }, 81 | sectionTitle: { 82 | fontSize: 24, 83 | fontWeight: '600', 84 | }, 85 | sectionDescription: { 86 | marginTop: 8, 87 | fontSize: 18, 88 | fontWeight: '400', 89 | }, 90 | highlight: { 91 | fontWeight: '700', 92 | }, 93 | }) 94 | 95 | export default App 96 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/jni/MainComponentsRegistry.cpp: -------------------------------------------------------------------------------- 1 | #include "MainComponentsRegistry.h" 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | 9 | namespace facebook { 10 | namespace react { 11 | 12 | MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {} 13 | 14 | std::shared_ptr 15 | MainComponentsRegistry::sharedProviderRegistry() { 16 | auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry(); 17 | 18 | // Autolinked providers registered by RN CLI 19 | rncli_registerProviders(providerRegistry); 20 | 21 | // Custom Fabric Components go here. You can register custom 22 | // components coming from your App or from 3rd party libraries here. 23 | // 24 | // providerRegistry->add(concreteComponentDescriptorProvider< 25 | // AocViewerComponentDescriptor>()); 26 | return providerRegistry; 27 | } 28 | 29 | jni::local_ref 30 | MainComponentsRegistry::initHybrid( 31 | jni::alias_ref, 32 | ComponentFactory *delegate) { 33 | auto instance = makeCxxInstance(delegate); 34 | 35 | auto buildRegistryFunction = 36 | [](EventDispatcher::Weak const &eventDispatcher, 37 | ContextContainer::Shared const &contextContainer) 38 | -> ComponentDescriptorRegistry::Shared { 39 | auto registry = MainComponentsRegistry::sharedProviderRegistry() 40 | ->createComponentDescriptorRegistry( 41 | {eventDispatcher, contextContainer}); 42 | 43 | auto mutableRegistry = 44 | std::const_pointer_cast(registry); 45 | 46 | mutableRegistry->setFallbackComponentDescriptor( 47 | std::make_shared( 48 | ComponentDescriptorParameters{ 49 | eventDispatcher, contextContainer, nullptr})); 50 | 51 | return registry; 52 | }; 53 | 54 | delegate->buildRegistryFunction = buildRegistryFunction; 55 | return instance; 56 | } 57 | 58 | void MainComponentsRegistry::registerNatives() { 59 | registerHybrid({ 60 | makeNativeMethod("initHybrid", MainComponentsRegistry::initHybrid), 61 | }); 62 | } 63 | 64 | } // namespace react 65 | } // namespace facebook 66 | -------------------------------------------------------------------------------- /todoMVC/src/model/todo/repository.ts: -------------------------------------------------------------------------------- 1 | import { Database } from 'electric-sql/browser' 2 | import { Todo } from './model' 3 | 4 | type Filter = { 5 | listid: string 6 | completed?: boolean 7 | } 8 | 9 | export class TodoRepository { 10 | private db: Database 11 | 12 | constructor(db: Database) { 13 | this.db = db 14 | } 15 | 16 | async save(todo: Todo): Promise { 17 | const sql = 'INSERT INTO todo(id, listid, text) VALUES (?, ?, ?)' 18 | const args = [todo.id, todo.listid, todo.text] 19 | 20 | return this.db.run(sql, args) 21 | } 22 | 23 | async update(todo: Todo): Promise { 24 | const sql = 'UPDATE todo SET text = ?, completed = ? WHERE id = ?' 25 | const args = [todo.text, todo.completed ? 1 : 0, todo.id] 26 | 27 | return this.db.run(sql, args) 28 | } 29 | 30 | async updateAll(filter: Filter): Promise { 31 | const sql = 'UPDATE todo SET completed = ? WHERE listid = ?' 32 | const args = [filter.completed ? 1 : 0, filter.listid] 33 | 34 | return this.db.run(sql, args) 35 | } 36 | 37 | async delete(todo: Todo): Promise { 38 | const sql = 'DELETE FROM todo WHERE id = ?' 39 | const args = [todo.id] 40 | 41 | return this.db.run(sql, args) 42 | } 43 | 44 | async deleteAll(filter: Filter): Promise { 45 | const sql = 'DELETE FROM todo WHERE completed = ?' 46 | const args = [filter.completed ? 1 : 0] 47 | 48 | return this.db.run(sql, args) 49 | } 50 | 51 | async list(filter: Filter): Promise { 52 | let sql = 'SELECT id, listid, text, completed FROM todo' 53 | const where = [] 54 | const args = [] 55 | if (filter.listid) { 56 | where.push('listid = ?') 57 | args.push(filter.listid) 58 | } 59 | if (filter.completed != undefined) { 60 | where.push('completed = ?') 61 | args.push(filter.completed ? 1 : 0) 62 | } 63 | 64 | if (where.length > 0) { 65 | sql = sql + ' WHERE ' + where.join(' AND ') 66 | } 67 | 68 | const res = await this.db.exec(sql, args) 69 | 70 | if (res.length == 0) { 71 | return [] 72 | } 73 | 74 | const { columns, values } = res[0] 75 | return values.map((value) => ({ 76 | id: value[columns.indexOf('id')] as string, 77 | listid: value[columns.indexOf('listid')] as string, 78 | text: value[columns.indexOf('text')] as string, 79 | completed: Boolean(value[columns.indexOf('completed')]), 80 | })) 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /todoMVC/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /expo/src/Example.tsx: -------------------------------------------------------------------------------- 1 | import 'react-native-get-random-values' 2 | import { v4 as uuidv4 } from 'uuid' 3 | 4 | import React, {useEffect, useState} from 'react' 5 | import {Pressable, Text, View} from 'react-native' 6 | 7 | import * as SQLite from "expo-sqlite" 8 | 9 | // Metro does not support package.json exports. Use resolver. 10 | // https://github.com/facebook/metro/issues/670 11 | import {Database, ElectrifiedDatabase, electrify} from 'electric-sql/expo' 12 | import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/react' 13 | 14 | import {styles} from './Styles' 15 | 16 | // Vanilla metro doesn't support symlinks, so we import the config 17 | // bundle by explicit path rather than `../.electric/@config`. 18 | import config from "../.electric/items-example/local" 19 | 20 | export const ElectrifiedExample = () => { 21 | const [db, setDb] = useState() 22 | 23 | useEffect(() => { 24 | const init = async () => { 25 | const original = SQLite.openDatabase('expo-example.db') as unknown as Database 26 | 27 | const electrified = await electrify(original, config) 28 | setDb(electrified) 29 | } 30 | 31 | init() 32 | }, []) 33 | 34 | if (db === undefined) { 35 | return null 36 | } 37 | 38 | return ( 39 | 40 | 41 | 42 | ) 43 | } 44 | 45 | const ExampleComponent = () => { 46 | const {results, error} = useElectricQuery('SELECT value FROM items', []) 47 | const db = useElectric() as ElectrifiedDatabase 48 | 49 | if (error !== undefined) { 50 | return ( 51 | 52 | Error: {`${error}`} 53 | 54 | ) 55 | } 56 | 57 | if (results === undefined) { 58 | return null 59 | } 60 | 61 | const addItem = () => { 62 | db.transaction(tx => { 63 | tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]) 64 | }) 65 | } 66 | 67 | const clearItems = async () => { 68 | db.transaction(tx => { 69 | tx.executeSql('DELETE FROM items where true', undefined) 70 | }) 71 | } 72 | 73 | return ( 74 | 75 | {results && results.map((item: any, index: any) => ( 76 | 77 | Item: {item.value} 78 | 79 | ))} 80 | 81 | Add 82 | 83 | 84 | Clear 85 | 86 | 87 | ) 88 | } 89 | -------------------------------------------------------------------------------- /todoMVC/public/base.css: -------------------------------------------------------------------------------- 1 | hr { 2 | margin: 20px 0; 3 | border: 0; 4 | border-top: 1px dashed #c5c5c5; 5 | border-bottom: 1px dashed #f7f7f7; 6 | } 7 | 8 | .learn a { 9 | font-weight: normal; 10 | text-decoration: none; 11 | color: #b83f45; 12 | } 13 | 14 | .learn a:hover { 15 | text-decoration: underline; 16 | color: #787e7e; 17 | } 18 | 19 | .learn h3, 20 | .learn h4, 21 | .learn h5 { 22 | margin: 10px 0; 23 | font-weight: 500; 24 | line-height: 1.2; 25 | color: #000; 26 | } 27 | 28 | .learn h3 { 29 | font-size: 24px; 30 | } 31 | 32 | .learn h4 { 33 | font-size: 18px; 34 | } 35 | 36 | .learn h5 { 37 | margin-bottom: 0; 38 | font-size: 14px; 39 | } 40 | 41 | .learn ul { 42 | padding: 0; 43 | margin: 0 0 30px 25px; 44 | } 45 | 46 | .learn li { 47 | line-height: 20px; 48 | } 49 | 50 | .learn p { 51 | font-size: 15px; 52 | font-weight: 300; 53 | line-height: 1.3; 54 | margin-top: 0; 55 | margin-bottom: 0; 56 | } 57 | 58 | #issue-count { 59 | display: none; 60 | } 61 | 62 | .quote { 63 | border: none; 64 | margin: 20px 0 60px 0; 65 | } 66 | 67 | .quote p { 68 | font-style: italic; 69 | } 70 | 71 | .quote p:before { 72 | content: '“'; 73 | font-size: 50px; 74 | opacity: 0.15; 75 | position: absolute; 76 | top: -20px; 77 | left: 3px; 78 | } 79 | 80 | .quote p:after { 81 | content: '”'; 82 | font-size: 50px; 83 | opacity: 0.15; 84 | position: absolute; 85 | bottom: -42px; 86 | right: 3px; 87 | } 88 | 89 | .quote footer { 90 | position: absolute; 91 | bottom: -40px; 92 | right: 0; 93 | } 94 | 95 | .quote footer img { 96 | border-radius: 3px; 97 | } 98 | 99 | .quote footer a { 100 | margin-left: 5px; 101 | vertical-align: middle; 102 | } 103 | 104 | .speech-bubble { 105 | position: relative; 106 | padding: 10px; 107 | background: rgba(0, 0, 0, 0.04); 108 | border-radius: 5px; 109 | } 110 | 111 | .speech-bubble:after { 112 | content: ''; 113 | position: absolute; 114 | top: 100%; 115 | right: 30px; 116 | border: 13px solid transparent; 117 | border-top-color: rgba(0, 0, 0, 0.04); 118 | } 119 | 120 | .learn-bar > .learn { 121 | position: absolute; 122 | width: 272px; 123 | top: 8px; 124 | left: -300px; 125 | padding: 10px; 126 | border-radius: 5px; 127 | background-color: rgba(255, 255, 255, 0.6); 128 | transition-property: left; 129 | transition-duration: 500ms; 130 | } 131 | 132 | @media (min-width: 899px) { 133 | .learn-bar { 134 | width: auto; 135 | padding-left: 300px; 136 | } 137 | 138 | .learn-bar > .learn { 139 | left: 8px; 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /react-native/src/Example.tsx: -------------------------------------------------------------------------------- 1 | import 'react-native-get-random-values' 2 | import { v4 as uuidv4 } from 'uuid' 3 | 4 | import React, {useEffect, useState} from 'react' 5 | import {Pressable, Text, View} from 'react-native' 6 | 7 | import SQLite, {SQLiteDatabase} from 'react-native-sqlite-storage' 8 | 9 | // Metro does not support package.json exports. Use resolver. 10 | // https://github.com/facebook/metro/issues/670 11 | import {Database, ElectrifiedDatabase, electrify} from 'electric-sql/react-native' 12 | import {ElectricProvider, useElectric, useElectricQuery} from 'electric-sql/react' 13 | 14 | import {styles} from './Styles' 15 | // Vanilla metro doesn't support symlinks, so we import the config 16 | // bundle by explicit path rather than `../.electric/@config`. 17 | import config from '../.electric/items-example/local' 18 | 19 | const promisesEnabled = true 20 | SQLite.enablePromise(promisesEnabled) 21 | 22 | export const ElectrifiedExample = () => { 23 | const [db, setDb] = useState() 24 | 25 | useEffect(() => { 26 | const init = async () => { 27 | const original = await SQLite.openDatabase({name: 'rn-example.db'}) as unknown as Database 28 | 29 | const electrified = await electrify(original, promisesEnabled, config) 30 | setDb(electrified) 31 | } 32 | 33 | init() 34 | }, []) 35 | 36 | if (db === undefined) { 37 | return null 38 | } 39 | 40 | return ( 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | const ExampleComponent = () => { 48 | const {results, error} = useElectricQuery('SELECT value FROM items', []) 49 | const db = useElectric() as ElectrifiedDatabase 50 | 51 | if (error !== undefined) { 52 | return ( 53 | 54 | Error: {`${error}`} 55 | 56 | ) 57 | } 58 | 59 | if (results === undefined) { 60 | return null 61 | } 62 | 63 | const addItem = () => { 64 | db.transaction(tx => { 65 | tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]) 66 | }) 67 | } 68 | 69 | const clearItems = async () => { 70 | db.transaction(tx => { 71 | tx.executeSql('DELETE FROM items where true', undefined) 72 | }) 73 | } 74 | 75 | return ( 76 | 77 | {results && results.map((item: any, index: any) => ( 78 | 79 | Item: {item.value} 80 | 81 | ))} 82 | 83 | Add 84 | 85 | 86 | Clear 87 | 88 | 89 | ) 90 | } 91 | -------------------------------------------------------------------------------- /expo/migrations/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "migrations": [ 4 | { 5 | "encoding": "escaped", 6 | "name": "20230123_193833_152_init", 7 | "postgres_body": null, 8 | "satellite_body": [], 9 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 10 | "title": "init" 11 | }, 12 | { 13 | "encoding": "escaped", 14 | "name": "20230123_194259_915_create_items", 15 | "postgres_body": null, 16 | "satellite_body": [ 17 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 18 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 19 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 20 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 21 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 22 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 23 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 24 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 25 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 26 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 27 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 28 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 29 | ], 30 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 31 | "title": "create items" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /web/migrations/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "migrations": [ 4 | { 5 | "encoding": "escaped", 6 | "name": "20230123_193833_152_init", 7 | "postgres_body": null, 8 | "satellite_body": [], 9 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 10 | "title": "init" 11 | }, 12 | { 13 | "encoding": "escaped", 14 | "name": "20230123_194259_915_create_items", 15 | "postgres_body": null, 16 | "satellite_body": [ 17 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 18 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 19 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 20 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 21 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 22 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 23 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 24 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 25 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 26 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 27 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 28 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 29 | ], 30 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 31 | "title": "create items" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /react-native/migrations/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "items-example", 3 | "migrations": [ 4 | { 5 | "encoding": "escaped", 6 | "name": "20230123_193833_152_init", 7 | "postgres_body": null, 8 | "satellite_body": [], 9 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 10 | "title": "init" 11 | }, 12 | { 13 | "encoding": "escaped", 14 | "name": "20230123_194259_915_create_items", 15 | "postgres_body": null, 16 | "satellite_body": [ 17 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 18 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 19 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 20 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 21 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 22 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 23 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 24 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 25 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 26 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 27 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 28 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 29 | ], 30 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 31 | "title": "create items" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /web/builder.js: -------------------------------------------------------------------------------- 1 | const { build, serve } = require('esbuild') 2 | 3 | const { createServer, request } = require('http') 4 | const { spawn } = require('child_process') 5 | 6 | const fs = require('fs-extra') 7 | const inlineImage = require('esbuild-plugin-inline-image') 8 | 9 | const shouldMinify = process.env.NODE_ENV === 'production' 10 | const shouldServe = process.env.SERVE === 'true' 11 | 12 | // https://github.com/evanw/esbuild/issues/802#issuecomment-819578182 13 | const liveServer = (buildOpts) => { 14 | const clients = [] 15 | 16 | build( 17 | { 18 | ...buildOpts, 19 | banner: { js: ' (() => new EventSource("/esbuild").onmessage = () => location.reload())();' }, 20 | watch: { 21 | onRebuild(error, result) { 22 | clients.forEach((res) => res.write('data: update\n\n')) 23 | clients.length = 0 24 | console.log(error ? error : '...') 25 | }, 26 | } 27 | } 28 | ).catch(() => process.exit(1)) 29 | 30 | serve({servedir: 'dist' }, {}) 31 | .then(() => { 32 | createServer((req, res) => { 33 | const { url, method, headers } = req 34 | 35 | if (url === '/esbuild') 36 | return clients.push( 37 | res.writeHead(200, { 38 | 'Content-Type': 'text/event-stream', 39 | 'Cache-Control': 'no-cache', 40 | Connection: 'keep-alive', 41 | }) 42 | ) 43 | 44 | const path = ~url.split('/').pop().indexOf('.') ? url : `/index.html` //for PWA with router 45 | req.pipe( 46 | request({ hostname: '0.0.0.0', port: 8000, path, method, headers }, (prxRes) => { 47 | res.writeHead(prxRes.statusCode, prxRes.headers) 48 | prxRes.pipe(res, { end: true }) 49 | }), 50 | { end: true } 51 | ) 52 | }).listen(3001) 53 | 54 | setTimeout(() => { 55 | const op = { darwin: ['open'], linux: ['xdg-open'], win32: ['cmd', '/c', 'start'] } 56 | const ptf = process.platform 57 | if (clients.length === 0) spawn(op[ptf][0], [...[op[ptf].slice(1)], `http://localhost:3001`]) 58 | }, 500) // open the default browser only if it is not opened yet 59 | }) 60 | } 61 | 62 | /** 63 | * ESBuild Params 64 | * @link https://esbuild.github.io/api/#build-api 65 | */ 66 | let buildParams = { 67 | color: true, 68 | entryPoints: ["src/index.tsx"], 69 | loader: { ".ts": "tsx" }, 70 | outdir: "dist", 71 | minify: shouldMinify, 72 | format: "cjs", 73 | bundle: true, 74 | sourcemap: true, 75 | logLevel: "error", 76 | incremental: true, 77 | external: ["fs", "path"], 78 | plugins: [inlineImage()], 79 | }; 80 | 81 | (async () => { 82 | fs.removeSync("dist"); 83 | fs.copySync("public", "dist"); 84 | 85 | if (shouldServe) { 86 | liveServer(buildParams) 87 | } 88 | else { 89 | await build(buildParams) 90 | 91 | process.exit(0) 92 | } 93 | })(); 94 | -------------------------------------------------------------------------------- /quickstart/builder.js: -------------------------------------------------------------------------------- 1 | const { build, serve } = require('esbuild') 2 | 3 | const { createServer, request } = require('http') 4 | const { spawn } = require('child_process') 5 | 6 | const fs = require('fs-extra') 7 | const inlineImage = require('esbuild-plugin-inline-image') 8 | 9 | const shouldMinify = process.env.NODE_ENV === 'production' 10 | const shouldServe = process.env.SERVE === 'true' 11 | 12 | // https://github.com/evanw/esbuild/issues/802#issuecomment-819578182 13 | const liveServer = (buildOpts) => { 14 | const clients = [] 15 | 16 | build( 17 | { 18 | ...buildOpts, 19 | banner: { js: ' (() => new EventSource("/esbuild").onmessage = () => location.reload())();' }, 20 | watch: { 21 | onRebuild(error, result) { 22 | clients.forEach((res) => res.write('data: update\n\n')) 23 | clients.length = 0 24 | console.log(error ? error : '...') 25 | }, 26 | } 27 | } 28 | ).catch(() => process.exit(1)) 29 | 30 | serve({servedir: 'dist' }, {}) 31 | .then(() => { 32 | createServer((req, res) => { 33 | const { url, method, headers } = req 34 | 35 | if (url === '/esbuild') 36 | return clients.push( 37 | res.writeHead(200, { 38 | 'Content-Type': 'text/event-stream', 39 | 'Cache-Control': 'no-cache', 40 | Connection: 'keep-alive', 41 | }) 42 | ) 43 | 44 | const path = ~url.split('/').pop().indexOf('.') ? url : `/index.html` //for PWA with router 45 | req.pipe( 46 | request({ hostname: '0.0.0.0', port: 8000, path, method, headers }, (prxRes) => { 47 | res.writeHead(prxRes.statusCode, prxRes.headers) 48 | prxRes.pipe(res, { end: true }) 49 | }), 50 | { end: true } 51 | ) 52 | }).listen(3001) 53 | 54 | setTimeout(() => { 55 | const op = { darwin: ['open'], linux: ['xdg-open'], win32: ['cmd', '/c', 'start'] } 56 | const ptf = process.platform 57 | if (clients.length === 0) spawn(op[ptf][0], [...[op[ptf].slice(1)], `http://localhost:3001`]) 58 | }, 500) // open the default browser only if it is not opened yet 59 | }) 60 | } 61 | 62 | /** 63 | * ESBuild Params 64 | * @link https://esbuild.github.io/api/#build-api 65 | */ 66 | let buildParams = { 67 | color: true, 68 | entryPoints: ["src/index.tsx", "src/worker.js"], 69 | loader: { ".ts": "tsx" }, 70 | outdir: "dist", 71 | minify: shouldMinify, 72 | format: "cjs", 73 | bundle: true, 74 | sourcemap: true, 75 | logLevel: "error", 76 | incremental: true, 77 | external: ["fs", "path"], 78 | plugins: [inlineImage()], 79 | }; 80 | 81 | (async () => { 82 | fs.removeSync("dist"); 83 | fs.copySync("public", "dist"); 84 | 85 | if (shouldServe) { 86 | liveServer(buildParams) 87 | } 88 | else { 89 | await build(buildParams) 90 | 91 | process.exit(0) 92 | } 93 | })(); 94 | -------------------------------------------------------------------------------- /todoMVC/builder.js: -------------------------------------------------------------------------------- 1 | const { build, serve } = require('esbuild') 2 | 3 | const { createServer, request } = require('http') 4 | const { spawn } = require('child_process') 5 | 6 | const fs = require('fs-extra') 7 | const inlineImage = require('esbuild-plugin-inline-image') 8 | 9 | const shouldMinify = process.env.NODE_ENV === 'production' 10 | const shouldServe = process.env.SERVE === 'true' 11 | 12 | // https://github.com/evanw/esbuild/issues/802#issuecomment-819578182 13 | const liveServer = (buildOpts) => { 14 | const clients = [] 15 | 16 | build( 17 | { 18 | ...buildOpts, 19 | banner: { js: ' (() => new EventSource("/esbuild").onmessage = () => location.reload())();' }, 20 | watch: { 21 | onRebuild(error, result) { 22 | clients.forEach((res) => res.write('data: update\n\n')) 23 | clients.length = 0 24 | console.log(error ? error : '...') 25 | }, 26 | } 27 | } 28 | ).catch(() => process.exit(1)) 29 | 30 | serve({servedir: 'dist' }, {}) 31 | .then(() => { 32 | createServer((req, res) => { 33 | const { url, method, headers } = req 34 | 35 | if (url === '/esbuild') 36 | return clients.push( 37 | res.writeHead(200, { 38 | 'Content-Type': 'text/event-stream', 39 | 'Cache-Control': 'no-cache', 40 | Connection: 'keep-alive', 41 | }) 42 | ) 43 | 44 | const path = ~url.split('/').pop().indexOf('.') ? url : `/index.html` //for PWA with router 45 | req.pipe( 46 | request({ hostname: '0.0.0.0', port: 8000, path, method, headers }, (prxRes) => { 47 | res.writeHead(prxRes.statusCode, prxRes.headers) 48 | prxRes.pipe(res, { end: true }) 49 | }), 50 | { end: true } 51 | ) 52 | }).listen(3001) 53 | 54 | setTimeout(() => { 55 | const op = { darwin: ['open'], linux: ['xdg-open'], win32: ['cmd', '/c', 'start'] } 56 | const ptf = process.platform 57 | if (clients.length === 0) spawn(op[ptf][0], [...[op[ptf].slice(1)], `http://localhost:3001`]) 58 | }, 500) // open the default browser only if it is not opened yet 59 | }) 60 | } 61 | 62 | /** 63 | * ESBuild Params 64 | * @link https://esbuild.github.io/api/#build-api 65 | */ 66 | let buildParams = { 67 | color: true, 68 | entryPoints: ["src/index.tsx", "src/worker.js"], 69 | loader: { ".ts": "tsx" }, 70 | outdir: "dist", 71 | minify: shouldMinify, 72 | format: "cjs", 73 | bundle: true, 74 | sourcemap: true, 75 | logLevel: "error", 76 | incremental: true, 77 | external: ["fs", "path"], 78 | plugins: [inlineImage()], 79 | }; 80 | 81 | (async () => { 82 | fs.removeSync("dist"); 83 | fs.copySync("public", "dist"); 84 | 85 | if (shouldServe) { 86 | liveServer(buildParams) 87 | } 88 | else { 89 | await build(buildParams) 90 | 91 | process.exit(0) 92 | } 93 | })(); 94 | -------------------------------------------------------------------------------- /quickstart/src/Example.original.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | This is the original, static, local-only code that's the 4 | starting point for the Quickstart guide. 5 | 6 | It's equivalent to the starting state of `Example.tsx` with 7 | the comments removed. If you want to use this file instead 8 | of `Example.tsx` you can change the import in `App.tsx`. 9 | 10 | 11 | */ 12 | import React, { useContext, useEffect, useState } from 'react' 13 | import './Example.css' 14 | 15 | import initSqlJs from '@aphro/sql.js' 16 | 17 | const DbContext = React.createContext(undefined) 18 | 19 | const locateOpts = { 20 | locateFile: (file: string) => `/${file}` 21 | } 22 | 23 | export const Example = () => { 24 | const [ db, setDb ] = useState() 25 | 26 | useEffect(() => { 27 | const init = async () => { 28 | const SQL = await initSqlJs(locateOpts) 29 | const original = new SQL.Database() 30 | 31 | const ddl = ` 32 | CREATE TABLE items ( 33 | value TEXT PRIMARY KEY NOT NULL 34 | ) 35 | ` 36 | original.run(ddl) 37 | 38 | setDb(original) 39 | } 40 | 41 | init() 42 | }, []) 43 | 44 | if (db === undefined) { 45 | return null 46 | } 47 | 48 | return ( 49 | 50 | 51 | 52 | ) 53 | } 54 | 55 | const ExampleComponent = () => { 56 | const db = useContext(DbContext) as any 57 | 58 | const [ results, setResults ] = useState([]) 59 | const [ counter, setCounter ] = useState(0) 60 | const triggerQuery = () => setCounter(val => val + 1) 61 | 62 | useEffect(() => { 63 | const queryItems = () => { 64 | const results = db.exec('SELECT value FROM items') 65 | const resultValues = results && results[0] && results[0].values 66 | ? results[0].values 67 | : [] 68 | 69 | const values = resultValues.map((x: string[]) => { 70 | return { 71 | value: x[0] 72 | } 73 | }) 74 | 75 | setResults(values) 76 | } 77 | 78 | queryItems() 79 | }, [counter]) 80 | 81 | const addItem = () => { 82 | db.run('INSERT INTO items VALUES(?)', [crypto.randomUUID()]) 83 | 84 | triggerQuery() 85 | } 86 | 87 | const clearItems = () => { 88 | db.run('DELETE FROM items where true') 89 | 90 | triggerQuery() 91 | } 92 | 93 | return ( 94 |
95 |
96 | 99 | 102 |
103 | {results && results.map((item: any, index: any) => ( 104 |

105 | { item.value } 106 |

107 | ))} 108 |
109 | ) 110 | } 111 | -------------------------------------------------------------------------------- /quickstart/src/Example.electrified.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | This is the end point of the example code that you should 4 | get to at the end of the Quickstart guide. 5 | 6 | You should get the same code by following the instructions 7 | in the Quickstart guide and/or by following the comments 8 | in `Example.tsx`. If you want to use this file instead 9 | of `Example.tsx` you can change the import in `App.tsx`. 10 | 11 | However, YOU MUST EDIT `` in the `config` 12 | on line 35 in order for this file to work. 13 | 14 | This version of the example has the same basic functionality 15 | as the original but also provides built in cloud sync and 16 | active-active replication between devices, users and cloud 17 | Postgres. Data is also persisted between page loads. 18 | 19 | The `ExampleComponent` is much simpler because the live 20 | query abstracts away the need to manually bind state, 21 | format query results and re-query when data changes. 22 | 23 | 24 | */ 25 | import React, { useEffect, useState } from 'react' 26 | import './Example.css' 27 | 28 | import { ElectrifiedDatabase, initElectricSqlJs } from 'electric-sql/browser' 29 | import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react' 30 | 31 | import config from '../.electric/@config' 32 | 33 | const locateOpts = { 34 | locateFile: (file: string) => `/${file}` 35 | } 36 | 37 | // N.b.: don't forget to also uncomment the source of the `./worker.js` file. 38 | const worker = new Worker("./worker.js", { type: "module" }); 39 | 40 | export const Example = () => { 41 | const [ db, setDb ] = useState() 42 | 43 | useEffect(() => { 44 | const init = async () => { 45 | const SQL = await initElectricSqlJs(worker, locateOpts) 46 | const electrified = await SQL.openDatabase('example.db', config) 47 | 48 | setDb(electrified) 49 | } 50 | 51 | init() 52 | }, []) 53 | 54 | if (db === undefined) { 55 | return null 56 | } 57 | 58 | return ( 59 | 60 | 61 | 62 | ) 63 | } 64 | 65 | const ExampleComponent = () => { 66 | const db = useElectric() as ElectrifiedDatabase 67 | const { results } = useElectricQuery('SELECT value FROM items', []) 68 | 69 | const addItem = () => { 70 | db.run('INSERT INTO items VALUES(?)', [crypto.randomUUID()]) 71 | } 72 | 73 | const clearItems = () => { 74 | db.run('DELETE FROM items where true') 75 | } 76 | 77 | return ( 78 |
79 |
80 | 83 | 86 |
87 | {results && results.map((item: any, index: any) => ( 88 |

89 | { item.value } 90 |

91 | ))} 92 |
93 | ) 94 | } 95 | -------------------------------------------------------------------------------- /react-native/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /react-native/.electric/items-example/local/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Autogenerated ElectricSQL config file. Don't edit this 3 | file directly. Instead, use the `electric` CLI tool 4 | to manage your config and migrations. 5 | 6 | See https://electric-sql.com/docs for more information. 7 | */ 8 | 9 | export default { 10 | "app": "items-example", 11 | "build": "local", 12 | "console": { 13 | "host": "127.0.0.1", 14 | "port": 4000, 15 | "ssl": false 16 | }, 17 | "debug": false, 18 | "env": "local", 19 | "migrations": [ 20 | { 21 | "encoding": "escaped", 22 | "name": "20230123_193833_152_init", 23 | "postgres_body": null, 24 | "satellite_body": [], 25 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 26 | "title": "init" 27 | }, 28 | { 29 | "encoding": "escaped", 30 | "name": "20230123_194259_915_create_items", 31 | "postgres_body": null, 32 | "satellite_body": [ 33 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 34 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 35 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 36 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 37 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 38 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 39 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 40 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 41 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 42 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 43 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 44 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 45 | ], 46 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 47 | "title": "create items" 48 | } 49 | ], 50 | "replication": { 51 | "host": "127.0.0.1", 52 | "port": 5133, 53 | "ssl": false 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /expo/.electric/items-example/local/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Autogenerated ElectricSQL config file. Don't edit this 3 | file directly. Instead, use the `electric` CLI tool 4 | to manage your config and migrations. 5 | 6 | See https://electric-sql.com/docs for more information. 7 | */ 8 | 9 | export default { 10 | "app": "items-example", 11 | "build": "server", 12 | "console": { 13 | "host": "127.0.0.1", 14 | "port": 4000, 15 | "ssl": false 16 | }, 17 | "debug": false, 18 | "env": "local", 19 | "migrations": [ 20 | { 21 | "encoding": null, 22 | "name": "20230123_193833_152_init", 23 | "postgres_body": "-- No SQL here", 24 | "satellite_body": [], 25 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 26 | "title": "init" 27 | }, 28 | { 29 | "encoding": null, 30 | "name": "20230123_194259_915_create_items", 31 | "postgres_body": "\nCREATE TABLE public.items (\n value text PRIMARY KEY);\nALTER TABLE public.items REPLICA IDENTITY FULL;\n", 32 | "satellite_body": [ 33 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 34 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 35 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 36 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 37 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 38 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 39 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 40 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 41 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 42 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 43 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 44 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 45 | ], 46 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 47 | "title": "create items" 48 | } 49 | ], 50 | "replication": { 51 | "host": "127.0.0.1", 52 | "port": 5133, 53 | "ssl": false 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /web/.electric/items-example/local/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Autogenerated ElectricSQL config file. Don't edit this 3 | file directly. Instead, use the `electric` CLI tool 4 | to manage your config and migrations. 5 | 6 | See https://electric-sql.com/docs for more information. 7 | */ 8 | 9 | export default { 10 | "app": "items-example", 11 | "build": "server", 12 | "console": { 13 | "host": "127.0.0.1", 14 | "port": 4000, 15 | "ssl": false 16 | }, 17 | "debug": false, 18 | "env": "local", 19 | "migrations": [ 20 | { 21 | "encoding": null, 22 | "name": "20230123_193833_152_init", 23 | "postgres_body": "-- No SQL here", 24 | "satellite_body": [], 25 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 26 | "title": "init" 27 | }, 28 | { 29 | "encoding": null, 30 | "name": "20230123_194259_915_create_items", 31 | "postgres_body": "\nCREATE TABLE public.items (\n value text PRIMARY KEY);\nALTER TABLE public.items REPLICA IDENTITY FULL;\n", 32 | "satellite_body": [ 33 | "CREATE TABLE IF NOT EXISTS items (\n value TEXT PRIMARY KEY NOT NULL\n) WITHOUT ROWID;", 34 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 35 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 36 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.items', 1);", 37 | "DROP TRIGGER IF EXISTS update_ensure_main_items_primarykey;", 38 | "CREATE TRIGGER update_ensure_main_items_primarykey\n BEFORE UPDATE ON main.items\nBEGIN\n SELECT\n CASE\n WHEN old.value != new.value THEN\n RAISE (ABORT,'cannot change the value of column value as it belongs to the primary key')\n END;\nEND;", 39 | "DROP TRIGGER IF EXISTS insert_main_items_into_oplog;", 40 | "CREATE TRIGGER insert_main_items_into_oplog\n AFTER INSERT ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'INSERT', json_object('value', new.value), json_object('value', new.value), NULL, NULL);\nEND;", 41 | "DROP TRIGGER IF EXISTS update_main_items_into_oplog;", 42 | "CREATE TRIGGER update_main_items_into_oplog\n AFTER UPDATE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'UPDATE', json_object('value', new.value), json_object('value', new.value), json_object('value', old.value), NULL);\nEND;", 43 | "DROP TRIGGER IF EXISTS delete_main_items_into_oplog;", 44 | "CREATE TRIGGER delete_main_items_into_oplog\n AFTER DELETE ON main.items\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.items')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'items', 'DELETE', json_object('value', old.value), NULL, json_object('value', old.value), NULL);\nEND;" 45 | ], 46 | "sha256": "e4ad678b013b634a667ada6b4094be250bbdd90300457c1f70f3cde78022abc0", 47 | "title": "create items" 48 | } 49 | ], 50 | "replication": { 51 | "host": "127.0.0.1", 52 | "port": 5133, 53 | "ssl": false 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/java/com/electricsqlexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.electricsqlexample; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.config.ReactFeatureFlags; 11 | import com.facebook.soloader.SoLoader; 12 | import com.electricsqlexample.newarchitecture.MainApplicationReactNativeHost; 13 | import java.lang.reflect.InvocationTargetException; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = 19 | new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | private final ReactNativeHost mNewArchitectureNativeHost = 41 | new MainApplicationReactNativeHost(this); 42 | 43 | @Override 44 | public ReactNativeHost getReactNativeHost() { 45 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 46 | return mNewArchitectureNativeHost; 47 | } else { 48 | return mReactNativeHost; 49 | } 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | // If you opted-in for the New Architecture, we enable the TurboModule system 56 | ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 57 | SoLoader.init(this, /* native exopackage */ false); 58 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 59 | } 60 | 61 | /** 62 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 63 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 64 | * 65 | * @param context 66 | * @param reactInstanceManager 67 | */ 68 | private static void initializeFlipper( 69 | Context context, ReactInstanceManager reactInstanceManager) { 70 | if (BuildConfig.DEBUG) { 71 | try { 72 | /* 73 | We use reflection here to pick up the class that initializes Flipper, 74 | since Flipper library is not available in release mode 75 | */ 76 | Class aClass = Class.forName("com.electricsqlexample.ReactNativeFlipper"); 77 | aClass 78 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 79 | .invoke(null, context, reactInstanceManager); 80 | } catch (ClassNotFoundException e) { 81 | e.printStackTrace(); 82 | } catch (NoSuchMethodException e) { 83 | e.printStackTrace(); 84 | } catch (IllegalAccessException e) { 85 | e.printStackTrace(); 86 | } catch (InvocationTargetException e) { 87 | e.printStackTrace(); 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /react-native/android/app/src/debug/java/com/electricsqlexample/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.electricsqlexample; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceEventListener; 23 | import com.facebook.react.ReactInstanceManager; 24 | import com.facebook.react.bridge.ReactContext; 25 | import com.facebook.react.modules.network.NetworkingModule; 26 | import okhttp3.OkHttpClient; 27 | 28 | public class ReactNativeFlipper { 29 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 30 | if (FlipperUtils.shouldEnableFlipper(context)) { 31 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 32 | 33 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 34 | client.addPlugin(new ReactFlipperPlugin()); 35 | client.addPlugin(new DatabasesFlipperPlugin(context)); 36 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 37 | client.addPlugin(CrashReporterPlugin.getInstance()); 38 | 39 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 40 | NetworkingModule.setCustomClientBuilder( 41 | new NetworkingModule.CustomClientBuilder() { 42 | @Override 43 | public void apply(OkHttpClient.Builder builder) { 44 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 45 | } 46 | }); 47 | client.addPlugin(networkFlipperPlugin); 48 | client.start(); 49 | 50 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 51 | // Hence we run if after all native modules have been initialized 52 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 53 | if (reactContext == null) { 54 | reactInstanceManager.addReactInstanceEventListener( 55 | new ReactInstanceEventListener() { 56 | @Override 57 | public void onReactContextInitialized(ReactContext reactContext) { 58 | reactInstanceManager.removeReactInstanceEventListener(this); 59 | reactContext.runOnNativeModulesQueueThread( 60 | new Runnable() { 61 | @Override 62 | public void run() { 63 | client.addPlugin(new FrescoFlipperPlugin()); 64 | } 65 | }); 66 | } 67 | }); 68 | } else { 69 | client.addPlugin(new FrescoFlipperPlugin()); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample.xcodeproj/xcshareddata/xcschemes/ElectricSQLExample.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /expo/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL - Expo example 16 | 17 | This is an example mobile app using [Expo](https://expo.dev) with the [expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) driver. 18 | 19 | ## Pre-reqs 20 | 21 | See the [Expo installation docs](https://docs.expo.dev/get-started/installation/). 22 | 23 | ## Install 24 | 25 | Clone this repo and change directory into this folder: 26 | 27 | ```sh 28 | git clone https://github.com/electric-sql/examples 29 | cd examples/expo 30 | ``` 31 | 32 | Install the dependencies: 33 | 34 | ```sh 35 | yarn 36 | ``` 37 | 38 | ## Run 39 | 40 | Run in the Android simulator: 41 | 42 | ```sh 43 | yarn android 44 | ``` 45 | 46 | Run in the iOS simulator: 47 | 48 | ```sh 49 | yarn ios 50 | ``` 51 | 52 | ## Sync 53 | 54 | The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally). 55 | 56 | ## Notes on the code 57 | 58 | The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx). 59 | 60 | ```tsx 61 | export const ElectrifiedExample = () => { 62 | const [db, setDb] = useState(); 63 | 64 | useEffect(() => { 65 | const init = async () => { 66 | const original = SQLite.openDatabase('example.db'); 67 | const db = await electrify(original, config) 68 | 69 | setDb(db) 70 | } 71 | 72 | init(); 73 | }, []); 74 | 75 | if (db === null) { 76 | return null 77 | } 78 | 79 | return ( 80 | 81 | 82 | 83 | ); 84 | }; 85 | ``` 86 | 87 | This opens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state. 88 | 89 | ```tsx 90 | const ExampleComponent = () => { 91 | const {results, error} = useElectricQuery('SELECT value FROM items', []); 92 | const db = useElectric() as ElectrifiedDatabase; 93 | 94 | if (error !== undefined) { 95 | return ( 96 | 97 | Error: {`${error}`} 98 | 99 | ); 100 | } 101 | 102 | if (results === undefined) { 103 | return null; 104 | } 105 | 106 | const addItem = () => { 107 | db.transaction(tx => { 108 | tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]); 109 | }); 110 | }; 111 | 112 | const clearItems = async () => { 113 | db.transaction(tx => { 114 | tx.executeSql('DELETE FROM items where true', undefined); 115 | }); 116 | }; 117 | 118 | return ( 119 | 120 | {results.map((item, index) => ( 121 | 122 | Item: {item.value} 123 | 124 | ))} 125 | 126 | 127 | Add 128 | 129 | 130 | Clear 131 | 132 | 133 | ); 134 | }; 135 | ``` 136 | 137 | ## More information 138 | 139 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 140 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /quickstart/src/Example.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react' 2 | import './Example.css' 3 | 4 | // XXX Uncomment these imports. 5 | // import { ElectrifiedDatabase, initElectricSqlJs } from 'electric-sql/browser' 6 | // import { ElectricProvider, useElectric, useElectricQuery } from 'electric-sql/react' 7 | 8 | // XXX Delete this in favour of `initElectricSqlJs`. 9 | import initSqlJs from '@aphro/sql.js' 10 | 11 | // XXX Delete this in favour of `ElectricProvider`. 12 | const DbContext = React.createContext(undefined) 13 | 14 | const locateOpts = { 15 | locateFile: (file: string) => `/${file}` 16 | } 17 | 18 | // XXX Import your application config and bundled migrations. 19 | // import config from '../.electric/@config' 20 | 21 | // XXX Enable the ElectricSQL worker. 22 | // XXX N.b.: don't forget to also uncomment the source of the `./worker.js` file. 23 | // const worker = new Worker("./worker.js", { type: "module" }); 24 | 25 | export const Example = () => { 26 | // XXX Swap `useState()` for `useState()`. 27 | const [ db, setDb ] = useState() 28 | 29 | useEffect(() => { 30 | const init = async () => { 31 | // XXX Replace this static database connection instantiation. 32 | const SQL = await initSqlJs(locateOpts) 33 | const original = new SQL.Database() 34 | // XXX With this electrified version. 35 | // const SQL = await initElectricSqlJs(worker, locateOpts) 36 | // const electrified = await SQL.openDatabase('example.db', config) 37 | 38 | // XXX Delete this -- no need to manually run DDL. 39 | const ddl = ` 40 | CREATE TABLE items ( 41 | value TEXT PRIMARY KEY NOT NULL 42 | ) 43 | ` 44 | original.run(ddl) 45 | 46 | // XXX Swap `original` for `electrified`. 47 | setDb(original) 48 | // setDb(electrified) 49 | } 50 | 51 | init() 52 | }, []) 53 | 54 | if (db === undefined) { 55 | return null 56 | } 57 | 58 | return ( 59 | // XXX Swap out `DbContext.Provider value=` for `ElectricProvider db=`. 60 | 61 | 62 | 63 | // 64 | // 65 | // 66 | ) 67 | } 68 | 69 | const ExampleComponent = () => { 70 | // XXX Swap out `useContext(DbContext)` to `useElectric`. 71 | const db = useContext(DbContext) as any 72 | // const db = useElectric() as ElectrifiedDatabase 73 | 74 | // XXX Replace the manual state bindings, `triggerQuery` hack 75 | // XXX and the full `useEffect` function call below ... 76 | const [ results, setResults ] = useState([]) 77 | const [ counter, setCounter ] = useState(0) 78 | const triggerQuery = () => setCounter(val => val + 1) 79 | 80 | useEffect(() => { 81 | const queryItems = () => { 82 | const results = db.exec('SELECT value FROM items') 83 | const resultValues = results && results[0] && results[0].values 84 | ? results[0].values 85 | : [] 86 | 87 | const values = resultValues.map((x: string[]) => { 88 | return { 89 | value: x[0] 90 | } 91 | }) 92 | 93 | setResults(values) 94 | } 95 | 96 | queryItems() 97 | }, [counter]) 98 | 99 | // XXX ... with a live `useElectricQuery` binding. 100 | // const { results } = useElectricQuery('SELECT value FROM items', []) 101 | 102 | const addItem = () => { 103 | db.run('INSERT INTO items VALUES(?)', [crypto.randomUUID()]) 104 | 105 | // XXX You no longer need this. 106 | triggerQuery() 107 | } 108 | 109 | const clearItems = () => { 110 | db.run('DELETE FROM items where true') 111 | 112 | // XXX You no longer need this. 113 | triggerQuery() 114 | } 115 | 116 | // All the markup is unchanged. 117 | return ( 118 |

119 |
120 | 123 | 126 |
127 | {results && results.map((item: any, index: any) => ( 128 |

129 | { item.value } 130 |

131 | ))} 132 |
133 | ) 134 | } 135 | -------------------------------------------------------------------------------- /web/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL - Web example 16 | 17 | This is an example web application using ElectricSQL in the browser with [wa-sqlite](https://github.com/rhashimoto/wa-sqlite). 18 | 19 | ## Install 20 | 21 | Clone this repo and change directory into this folder: 22 | 23 | ```sh 24 | git clone https://github.com/electric-sql/examples 25 | cd examples/web 26 | ``` 27 | 28 | Install the dependencies: 29 | 30 | ```sh 31 | yarn 32 | ``` 33 | 34 | ## Run 35 | 36 | Build and run: 37 | 38 | ```sh 39 | yarn start 40 | ``` 41 | 42 | ## Sync 43 | 44 | The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally). 45 | 46 | Open [localhost:3001](http://localhost:3001) in two different browsers (so they're backed by different databases) and try it out. You'll see data being replicated between the client applications. 47 | 48 | ## Notes on the code 49 | 50 | In this example, Electric uses wa-sqlite in the browser with IndexedDB for persistence. 51 | 52 | The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx): 53 | 54 | ```tsx 55 | export const Example = () => { 56 | const [ db, setDb ] = useState() 57 | 58 | useEffect(() => { 59 | const init = async () => { 60 | const { db, electric } = await start('electric.db', '', config) 61 | db.electric = electric // because the hook for live queries expects `electric` to be present on the `db` 62 | setDb(db) 63 | } 64 | 65 | init() 66 | }, []) 67 | 68 | if (db === undefined) { 69 | return null 70 | } 71 | 72 | return ( 73 | 74 | 75 | 76 | ) 77 | } 78 | ``` 79 | 80 | This opens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state. 81 | This example explicitly calls `potentiallyChanged` on the notifier because unlike the other drivers, the wa-sqlite driver is not proxied. 82 | 83 | ```tsx 84 | const ExampleComponent = () => { 85 | const db = useElectric() as ElectricDatabase & { electric: ElectricNamespace } 86 | const electric = db.electric 87 | const { results } = useElectricQuery('SELECT value FROM items', []) 88 | 89 | const addItem = async () => { 90 | await electric.adapter.run({ 91 | sql: 'INSERT INTO items VALUES(?)', 92 | args: [crypto.randomUUID()] 93 | } 94 | ) 95 | electric.notifier.potentiallyChanged() 96 | } 97 | 98 | const clearItems = async () => { 99 | await electric.adapter.run({ 100 | sql : 'DELETE FROM items where true' 101 | }) 102 | electric.notifier.potentiallyChanged() 103 | } 104 | 105 | return ( 106 |
107 |
108 | 111 | 114 |
115 | {results && results.map((item: any, index: any) => ( 116 |

117 | { item.value } 118 |

119 | ))} 120 |
121 | ) 122 | } 123 | ``` 124 | 125 | ## More information 126 | 127 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 128 | -------------------------------------------------------------------------------- /react-native/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | ElectricSQL logo 12 | 13 | 14 | 15 | # ElectricSQL - React Native example 16 | 17 | This is an example mobile app using [React Native](https://reactnative.dev) with the [react-native-sqlite-storage](https://www.npmjs.com/package/react-native-sqlite-storage) driver. 18 | 19 | ## Pre-reqs 20 | 21 | See the React Native CLI Quickstart section at [reactnative.dev/docs/environment-setup](https://reactnative.dev/docs/environment-setup). 22 | 23 | ## Install 24 | 25 | Clone this repo and change directory into this folder: 26 | 27 | ```sh 28 | git clone https://github.com/electric-sql/examples 29 | cd examples/react-native 30 | ``` 31 | 32 | Install the dependencies: 33 | 34 | ```sh 35 | yarn 36 | ``` 37 | 38 | Install the [pods](https://cocoapods.org): 39 | 40 | ```sh 41 | cd ios && pod install && cd .. 42 | ``` 43 | 44 | You may want to also check the [install section of the react-native-sqlite-storage driver README](https://github.com/andpor/react-native-sqlite-storage#installation). 45 | 46 | ## Run 47 | 48 | Run in the Android simulator: 49 | 50 | ```sh 51 | yarn android 52 | ``` 53 | 54 | Run in the iOS simulator: 55 | 56 | ```sh 57 | yarn ios 58 | ``` 59 | 60 | Or open in Xcode: 61 | 62 | ```sh 63 | open ios/ElectricSQLExample.xcworkspace 64 | ``` 65 | 66 | ## Sync 67 | 68 | The application is setup to sync via a local instance of the Electric sync service. See the docs for more information on [how to run the backend locally](https://electric-sql.com/docs/overview/examples#option-3--run-the-backend-locally). 69 | 70 | ## Notes on the code 71 | 72 | The main code to look at is in [`./src/Example.tsx`](./src/Example.tsx). 73 | 74 | ```tsx 75 | export const ElectrifiedExample = () => { 76 | const [db, setDb] = useState(); 77 | 78 | useEffect(() => { 79 | SQLite.openDatabase('example.db') 80 | .then((db: Database) => electrify(db, promisesEnabled, config)) 81 | .then((db: ElectrifiedDatabase) => setDb(db)) 82 | }, []); 83 | 84 | if (db === undefined) { 85 | return null 86 | } 87 | 88 | return ( 89 | 90 | 91 | 92 | ); 93 | }; 94 | ``` 95 | 96 | This pens an electrified database client and passes it to the application using the React Context API. Components can then use the [`useElectric`](https://electric-sql.com/docs/usage/frameworks#useelectric-hook) and [`useElectricQuery`](https://electric-sql.com/docs/usage/frameworks#useelectricquery-hook) to access the database client and bind reactive queries to the component state. 97 | 98 | ```tsx 99 | const ExampleComponent = () => { 100 | const {results, error} = useElectricQuery('SELECT value FROM items', []); 101 | const db = useElectric() as ElectrifiedDatabase; 102 | 103 | if (error !== undefined) { 104 | return ( 105 | 106 | Error: {`${error}`} 107 | 108 | ); 109 | } 110 | 111 | if (results === undefined) { 112 | return null; 113 | } 114 | 115 | const addItem = () => { 116 | db.transaction(tx => { 117 | tx.executeSql('INSERT INTO items VALUES(?)', [uuidv4()]); 118 | }); 119 | }; 120 | 121 | const clearItems = async () => { 122 | db.transaction(tx => { 123 | tx.executeSql('DELETE FROM items where true', undefined); 124 | }); 125 | }; 126 | 127 | return ( 128 | 129 | {results.map((item, index) => ( 130 | 131 | Item: {item.value} 132 | 133 | ))} 134 | 135 | 136 | Add 137 | 138 | 139 | Clear 140 | 141 | 142 | ); 143 | }; 144 | ``` 145 | 146 | ## More information 147 | 148 | See the [documentation](https://electric-sql.com/docs) and [community guidelines](https://github.com/electric-sql/meta). If you need help [let us know on Discord](https://discord.gg/B7kHGwDcbj). 149 | -------------------------------------------------------------------------------- /react-native/ios/ElectricSQLExample/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #import 8 | 9 | #if RCT_NEW_ARCH_ENABLED 10 | #import 11 | #import 12 | #import 13 | #import 14 | #import 15 | #import 16 | 17 | #import 18 | 19 | static NSString *const kRNConcurrentRoot = @"concurrentRoot"; 20 | 21 | @interface AppDelegate () { 22 | RCTTurboModuleManager *_turboModuleManager; 23 | RCTSurfacePresenterBridgeAdapter *_bridgeAdapter; 24 | std::shared_ptr _reactNativeConfig; 25 | facebook::react::ContextContainer::Shared _contextContainer; 26 | } 27 | @end 28 | #endif 29 | 30 | @implementation AppDelegate 31 | 32 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 33 | { 34 | RCTAppSetupPrepareApp(application); 35 | 36 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 37 | 38 | #if RCT_NEW_ARCH_ENABLED 39 | _contextContainer = std::make_shared(); 40 | _reactNativeConfig = std::make_shared(); 41 | _contextContainer->insert("ReactNativeConfig", _reactNativeConfig); 42 | _bridgeAdapter = [[RCTSurfacePresenterBridgeAdapter alloc] initWithBridge:bridge contextContainer:_contextContainer]; 43 | bridge.surfacePresenter = _bridgeAdapter.surfacePresenter; 44 | #endif 45 | 46 | NSDictionary *initProps = [self prepareInitialProps]; 47 | UIView *rootView = RCTAppSetupDefaultRootView(bridge, @"ElectricSQLExample", initProps); 48 | 49 | if (@available(iOS 13.0, *)) { 50 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 51 | } else { 52 | rootView.backgroundColor = [UIColor whiteColor]; 53 | } 54 | 55 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 56 | UIViewController *rootViewController = [UIViewController new]; 57 | rootViewController.view = rootView; 58 | self.window.rootViewController = rootViewController; 59 | [self.window makeKeyAndVisible]; 60 | return YES; 61 | } 62 | 63 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 64 | /// 65 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 66 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 67 | /// @return: `true` if the `concurrentRoot` feture is enabled. Otherwise, it returns `false`. 68 | - (BOOL)concurrentRootEnabled 69 | { 70 | // Switch this bool to turn on and off the concurrent root 71 | return true; 72 | } 73 | 74 | - (NSDictionary *)prepareInitialProps 75 | { 76 | NSMutableDictionary *initProps = [NSMutableDictionary new]; 77 | 78 | #ifdef RCT_NEW_ARCH_ENABLED 79 | initProps[kRNConcurrentRoot] = @([self concurrentRootEnabled]); 80 | #endif 81 | 82 | return initProps; 83 | } 84 | 85 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 86 | { 87 | #if DEBUG 88 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 89 | #else 90 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 91 | #endif 92 | } 93 | 94 | #if RCT_NEW_ARCH_ENABLED 95 | 96 | #pragma mark - RCTCxxBridgeDelegate 97 | 98 | - (std::unique_ptr)jsExecutorFactoryForBridge:(RCTBridge *)bridge 99 | { 100 | _turboModuleManager = [[RCTTurboModuleManager alloc] initWithBridge:bridge 101 | delegate:self 102 | jsInvoker:bridge.jsCallInvoker]; 103 | return RCTAppSetupDefaultJsExecutorFactory(bridge, _turboModuleManager); 104 | } 105 | 106 | #pragma mark RCTTurboModuleManagerDelegate 107 | 108 | - (Class)getModuleClassFromName:(const char *)name 109 | { 110 | return RCTCoreModulesClassProvider(name); 111 | } 112 | 113 | - (std::shared_ptr)getTurboModule:(const std::string &)name 114 | jsInvoker:(std::shared_ptr)jsInvoker 115 | { 116 | return nullptr; 117 | } 118 | 119 | - (std::shared_ptr)getTurboModule:(const std::string &)name 120 | initParams: 121 | (const facebook::react::ObjCTurboModule::InitParams &)params 122 | { 123 | return nullptr; 124 | } 125 | 126 | - (id)getModuleInstanceFromClass:(Class)moduleClass 127 | { 128 | return RCTAppSetupDefaultModuleFromClass(moduleClass); 129 | } 130 | 131 | #endif 132 | 133 | @end 134 | -------------------------------------------------------------------------------- /react-native/android/app/src/main/java/com/electricsqlexample/newarchitecture/MainApplicationReactNativeHost.java: -------------------------------------------------------------------------------- 1 | package com.electricsqlexample.newarchitecture; 2 | 3 | import android.app.Application; 4 | import androidx.annotation.NonNull; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactInstanceManager; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate; 10 | import com.facebook.react.bridge.JSIModulePackage; 11 | import com.facebook.react.bridge.JSIModuleProvider; 12 | import com.facebook.react.bridge.JSIModuleSpec; 13 | import com.facebook.react.bridge.JSIModuleType; 14 | import com.facebook.react.bridge.JavaScriptContextHolder; 15 | import com.facebook.react.bridge.ReactApplicationContext; 16 | import com.facebook.react.bridge.UIManager; 17 | import com.facebook.react.fabric.ComponentFactory; 18 | import com.facebook.react.fabric.CoreComponentsRegistry; 19 | import com.facebook.react.fabric.FabricJSIModuleProvider; 20 | import com.facebook.react.fabric.ReactNativeConfig; 21 | import com.facebook.react.uimanager.ViewManagerRegistry; 22 | import com.electricsqlexample.BuildConfig; 23 | import com.electricsqlexample.newarchitecture.components.MainComponentsRegistry; 24 | import com.electricsqlexample.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate; 25 | import java.util.ArrayList; 26 | import java.util.List; 27 | 28 | /** 29 | * A {@link ReactNativeHost} that helps you load everything needed for the New Architecture, both 30 | * TurboModule delegates and the Fabric Renderer. 31 | * 32 | *

Please note that this class is used ONLY if you opt-in for the New Architecture (see the 33 | * `newArchEnabled` property). Is ignored otherwise. 34 | */ 35 | public class MainApplicationReactNativeHost extends ReactNativeHost { 36 | public MainApplicationReactNativeHost(Application application) { 37 | super(application); 38 | } 39 | 40 | @Override 41 | public boolean getUseDeveloperSupport() { 42 | return BuildConfig.DEBUG; 43 | } 44 | 45 | @Override 46 | protected List getPackages() { 47 | List packages = new PackageList(this).getPackages(); 48 | // Packages that cannot be autolinked yet can be added manually here, for example: 49 | // packages.add(new MyReactNativePackage()); 50 | // TurboModules must also be loaded here providing a valid TurboReactPackage implementation: 51 | // packages.add(new TurboReactPackage() { ... }); 52 | // If you have custom Fabric Components, their ViewManagers should also be loaded here 53 | // inside a ReactPackage. 54 | return packages; 55 | } 56 | 57 | @Override 58 | protected String getJSMainModuleName() { 59 | return "index"; 60 | } 61 | 62 | @NonNull 63 | @Override 64 | protected ReactPackageTurboModuleManagerDelegate.Builder 65 | getReactPackageTurboModuleManagerDelegateBuilder() { 66 | // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary 67 | // for the new architecture and to use TurboModules correctly. 68 | return new MainApplicationTurboModuleManagerDelegate.Builder(); 69 | } 70 | 71 | @Override 72 | protected JSIModulePackage getJSIModulePackage() { 73 | return new JSIModulePackage() { 74 | @Override 75 | public List getJSIModules( 76 | final ReactApplicationContext reactApplicationContext, 77 | final JavaScriptContextHolder jsContext) { 78 | final List specs = new ArrayList<>(); 79 | 80 | // Here we provide a new JSIModuleSpec that will be responsible of providing the 81 | // custom Fabric Components. 82 | specs.add( 83 | new JSIModuleSpec() { 84 | @Override 85 | public JSIModuleType getJSIModuleType() { 86 | return JSIModuleType.UIManager; 87 | } 88 | 89 | @Override 90 | public JSIModuleProvider getJSIModuleProvider() { 91 | final ComponentFactory componentFactory = new ComponentFactory(); 92 | CoreComponentsRegistry.register(componentFactory); 93 | 94 | // Here we register a Components Registry. 95 | // The one that is generated with the template contains no components 96 | // and just provides you the one from React Native core. 97 | MainComponentsRegistry.register(componentFactory); 98 | 99 | final ReactInstanceManager reactInstanceManager = getReactInstanceManager(); 100 | 101 | ViewManagerRegistry viewManagerRegistry = 102 | new ViewManagerRegistry( 103 | reactInstanceManager.getOrCreateViewManagers(reactApplicationContext)); 104 | 105 | return new FabricJSIModuleProvider( 106 | reactApplicationContext, 107 | componentFactory, 108 | ReactNativeConfig.DEFAULT_CONFIG, 109 | viewManagerRegistry); 110 | } 111 | }); 112 | return specs; 113 | } 114 | }; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /todoMVC/migrations/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "app": "todomvc-example", 3 | "migrations": [ 4 | { 5 | "encoding": "escaped", 6 | "name": "20230124_160941_413_init", 7 | "postgres_body": null, 8 | "satellite_body": [], 9 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 10 | "title": "init" 11 | }, 12 | { 13 | "encoding": "escaped", 14 | "name": "20230124_160958_566_create_todomvc_schema", 15 | "postgres_body": null, 16 | "satellite_body": [ 17 | "CREATE TABLE \"todolist\" (\n \"id\" TEXT NOT NULL,\n \"filter\" TEXT,\n \"editing\" TEXT,\n PRIMARY KEY (\"id\")\n) WITHOUT ROWID;", 18 | "CREATE TABLE \"todo\" (\n \"id\" TEXT NOT NULL,\n \"listid\" TEXT,\n \"text\" TEXT,\n \"completed\" INTEGER DEFAULT 0 NOT NULL,\n PRIMARY KEY (\"id\")\n ) WITHOUT ROWID;", 19 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 20 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 21 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.todo', 1);", 22 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.todolist', 1);", 23 | "DROP TRIGGER IF EXISTS update_ensure_main_todo_primarykey;", 24 | "CREATE TRIGGER update_ensure_main_todo_primarykey\n BEFORE UPDATE ON main.todo\nBEGIN\n SELECT\n CASE\n WHEN old.id != new.id THEN\n RAISE (ABORT,'cannot change the value of column id as it belongs to the primary key')\n END;\nEND;", 25 | "DROP TRIGGER IF EXISTS insert_main_todo_into_oplog;", 26 | "CREATE TRIGGER insert_main_todo_into_oplog\n AFTER INSERT ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'INSERT', json_object('id', new.id), json_object('id', new.id, 'listid', new.listid, 'text', new.text, 'completed', new.completed), NULL, NULL);\nEND;", 27 | "DROP TRIGGER IF EXISTS update_main_todo_into_oplog;", 28 | "CREATE TRIGGER update_main_todo_into_oplog\n AFTER UPDATE ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'UPDATE', json_object('id', new.id), json_object('id', new.id, 'listid', new.listid, 'text', new.text, 'completed', new.completed), json_object('id', old.id, 'listid', old.listid, 'text', old.text, 'completed', old.completed), NULL);\nEND;", 29 | "DROP TRIGGER IF EXISTS delete_main_todo_into_oplog;", 30 | "CREATE TRIGGER delete_main_todo_into_oplog\n AFTER DELETE ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'DELETE', json_object('id', old.id), NULL, json_object('id', old.id, 'listid', old.listid, 'text', old.text, 'completed', old.completed), NULL);\nEND;", 31 | "DROP TRIGGER IF EXISTS update_ensure_main_todolist_primarykey;", 32 | "CREATE TRIGGER update_ensure_main_todolist_primarykey\n BEFORE UPDATE ON main.todolist\nBEGIN\n SELECT\n CASE\n WHEN old.id != new.id THEN\n RAISE (ABORT,'cannot change the value of column id as it belongs to the primary key')\n END;\nEND;", 33 | "DROP TRIGGER IF EXISTS insert_main_todolist_into_oplog;", 34 | "CREATE TRIGGER insert_main_todolist_into_oplog\n AFTER INSERT ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'INSERT', json_object('id', new.id), json_object('id', new.id, 'filter', new.filter, 'editing', new.editing), NULL, NULL);\nEND;", 35 | "DROP TRIGGER IF EXISTS update_main_todolist_into_oplog;", 36 | "CREATE TRIGGER update_main_todolist_into_oplog\n AFTER UPDATE ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'UPDATE', json_object('id', new.id), json_object('id', new.id, 'filter', new.filter, 'editing', new.editing), json_object('id', old.id, 'filter', old.filter, 'editing', old.editing), NULL);\nEND;", 37 | "DROP TRIGGER IF EXISTS delete_main_todolist_into_oplog;", 38 | "CREATE TRIGGER delete_main_todolist_into_oplog\n AFTER DELETE ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'DELETE', json_object('id', old.id), NULL, json_object('id', old.id, 'filter', old.filter, 'editing', old.editing), NULL);\nEND;" 39 | ], 40 | "sha256": "93193dbaae0539a71847187e38a1240e3888512c1bf833381d0252eb68702f9d", 41 | "title": "create todoMVC schema" 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /quickstart/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@aphro/sql.js@^1.7.0": 6 | version "1.7.0" 7 | resolved "https://registry.npmjs.org/@aphro/sql.js/-/sql.js-1.7.0.tgz" 8 | integrity sha512-SDh63YPAKXKIXE1RW+YYvlQ13tHTc36QT3o17xxlAgvMN6KfQDmNCa/iSLt3XH9Rsa7JFRxSWRiKNXrI2uYOmw== 9 | 10 | "@types/node@^16.9.1": 11 | version "16.18.6" 12 | resolved "https://registry.npmjs.org/@types/node/-/node-16.18.6.tgz" 13 | integrity sha512-vmYJF0REqDyyU0gviezF/KHq/fYaUbFhkcNbQCuPGFQj6VTbXuHZoxs/Y7mutWe73C8AC6l9fFu8mSYiBAqkGA== 14 | 15 | "@types/prop-types@*": 16 | version "15.7.5" 17 | resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" 18 | integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== 19 | 20 | "@types/react-dom@^17.0.9": 21 | version "17.0.18" 22 | resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.18.tgz" 23 | integrity sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw== 24 | dependencies: 25 | "@types/react" "^17" 26 | 27 | "@types/react@^17", "@types/react@^17.0.20": 28 | version "17.0.52" 29 | resolved "https://registry.npmjs.org/@types/react/-/react-17.0.52.tgz" 30 | integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A== 31 | dependencies: 32 | "@types/prop-types" "*" 33 | "@types/scheduler" "*" 34 | csstype "^3.0.2" 35 | 36 | "@types/scheduler@*": 37 | version "0.16.2" 38 | resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" 39 | integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== 40 | 41 | csstype@^3.0.2: 42 | version "3.1.1" 43 | resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz" 44 | integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== 45 | 46 | esbuild-plugin-inline-image@^0.0.8: 47 | version "0.0.8" 48 | resolved "https://registry.npmjs.org/esbuild-plugin-inline-image/-/esbuild-plugin-inline-image-0.0.8.tgz" 49 | integrity sha512-L2Wwq7z9HALpq2hfxYHfQrrIyl/ivfRgiAULohVC/WKrGydPzfANGCrt5wSlxxWW4fuiPOc3BIA9Yp00h2QPVQ== 50 | 51 | esbuild-server@^0.1.2: 52 | version "0.1.2" 53 | resolved "https://registry.yarnpkg.com/esbuild-server/-/esbuild-server-0.1.2.tgz#f464ff49d9e044b11ee8123d90ab2f91abd1bf18" 54 | integrity sha512-WxAcUxHHWqYnSfG9+TqML44ZgLL0aUJBoMtjJoez4YyLvanoRDILQLgnYkGwztjL1UtkLVQq/wiFsqF8FbVIyg== 55 | 56 | esbuild@^0.12.26: 57 | version "0.12.29" 58 | resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.29.tgz" 59 | integrity sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g== 60 | 61 | fs-extra@^10.0.0: 62 | version "10.1.0" 63 | resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz" 64 | integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ== 65 | dependencies: 66 | graceful-fs "^4.2.0" 67 | jsonfile "^6.0.1" 68 | universalify "^2.0.0" 69 | 70 | graceful-fs@^4.1.6, graceful-fs@^4.2.0: 71 | version "4.2.10" 72 | resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz" 73 | integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== 74 | 75 | "js-tokens@^3.0.0 || ^4.0.0": 76 | version "4.0.0" 77 | resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" 78 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 79 | 80 | jsonfile@^6.0.1: 81 | version "6.1.0" 82 | resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz" 83 | integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ== 84 | dependencies: 85 | universalify "^2.0.0" 86 | optionalDependencies: 87 | graceful-fs "^4.1.6" 88 | 89 | loose-envify@^1.1.0: 90 | version "1.4.0" 91 | resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" 92 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 93 | dependencies: 94 | js-tokens "^3.0.0 || ^4.0.0" 95 | 96 | object-assign@^4.1.1: 97 | version "4.1.1" 98 | resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz" 99 | integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg== 100 | 101 | react-dom@^17.0.2: 102 | version "17.0.2" 103 | resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" 104 | integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== 105 | dependencies: 106 | loose-envify "^1.1.0" 107 | object-assign "^4.1.1" 108 | scheduler "^0.20.2" 109 | 110 | react@^17.0.2: 111 | version "17.0.2" 112 | resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz" 113 | integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== 114 | dependencies: 115 | loose-envify "^1.1.0" 116 | object-assign "^4.1.1" 117 | 118 | scheduler@^0.20.2: 119 | version "0.20.2" 120 | resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz" 121 | integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== 122 | dependencies: 123 | loose-envify "^1.1.0" 124 | object-assign "^4.1.1" 125 | 126 | typescript@^4.4.3: 127 | version "4.9.3" 128 | resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz" 129 | integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA== 130 | 131 | universalify@^2.0.0: 132 | version "2.0.0" 133 | resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz" 134 | integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ== 135 | -------------------------------------------------------------------------------- /todoMVC/.electric/todomvc-example/local/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Autogenerated ElectricSQL config file. Don't edit this 3 | file directly. Instead, use the `electric` CLI tool 4 | to manage your config and migrations. 5 | 6 | See https://electric-sql.com/docs for more information. 7 | */ 8 | 9 | export default { 10 | "app": "todomvc-example", 11 | "build": "server", 12 | "console": { 13 | "host": "127.0.0.1", 14 | "port": 4000, 15 | "ssl": false 16 | }, 17 | "debug": false, 18 | "env": "local", 19 | "migrations": [ 20 | { 21 | "encoding": null, 22 | "name": "20230124_160941_413_init", 23 | "postgres_body": "-- No SQL here", 24 | "satellite_body": [], 25 | "sha256": "01ba4719c80b6fe911b091a7c05124b64eeece964e09c058ef8f9805daca546b", 26 | "title": "init" 27 | }, 28 | { 29 | "encoding": null, 30 | "name": "20230124_160958_566_create_todomvc_schema", 31 | "postgres_body": "\nCREATE TABLE public.todolist (\n id text PRIMARY KEY,\n filter text,\n editing text);\nALTER TABLE public.todolist REPLICA IDENTITY FULL;\n\nCREATE TABLE public.todo (\n id text PRIMARY KEY,\n listid text,\n text text,\n completed bigint NOT NULL DEFAULT 0);\nALTER TABLE public.todo REPLICA IDENTITY FULL;\n", 32 | "satellite_body": [ 33 | "CREATE TABLE \"todolist\" (\n \"id\" TEXT NOT NULL,\n \"filter\" TEXT,\n \"editing\" TEXT,\n PRIMARY KEY (\"id\")\n) WITHOUT ROWID;", 34 | "CREATE TABLE \"todo\" (\n \"id\" TEXT NOT NULL,\n \"listid\" TEXT,\n \"text\" TEXT,\n \"completed\" INTEGER DEFAULT 0 NOT NULL,\n PRIMARY KEY (\"id\")\n ) WITHOUT ROWID;", 35 | "DROP TABLE IF EXISTS _electric_trigger_settings;", 36 | "CREATE TABLE _electric_trigger_settings(tablename STRING PRIMARY KEY, flag INTEGER);", 37 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.todo', 1);", 38 | "INSERT INTO _electric_trigger_settings(tablename,flag) VALUES ('main.todolist', 1);", 39 | "DROP TRIGGER IF EXISTS update_ensure_main_todo_primarykey;", 40 | "CREATE TRIGGER update_ensure_main_todo_primarykey\n BEFORE UPDATE ON main.todo\nBEGIN\n SELECT\n CASE\n WHEN old.id != new.id THEN\n RAISE (ABORT,'cannot change the value of column id as it belongs to the primary key')\n END;\nEND;", 41 | "DROP TRIGGER IF EXISTS insert_main_todo_into_oplog;", 42 | "CREATE TRIGGER insert_main_todo_into_oplog\n AFTER INSERT ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'INSERT', json_object('id', new.id), json_object('id', new.id, 'listid', new.listid, 'text', new.text, 'completed', new.completed), NULL, NULL);\nEND;", 43 | "DROP TRIGGER IF EXISTS update_main_todo_into_oplog;", 44 | "CREATE TRIGGER update_main_todo_into_oplog\n AFTER UPDATE ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'UPDATE', json_object('id', new.id), json_object('id', new.id, 'listid', new.listid, 'text', new.text, 'completed', new.completed), json_object('id', old.id, 'listid', old.listid, 'text', old.text, 'completed', old.completed), NULL);\nEND;", 45 | "DROP TRIGGER IF EXISTS delete_main_todo_into_oplog;", 46 | "CREATE TRIGGER delete_main_todo_into_oplog\n AFTER DELETE ON main.todo\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todo')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todo', 'DELETE', json_object('id', old.id), NULL, json_object('id', old.id, 'listid', old.listid, 'text', old.text, 'completed', old.completed), NULL);\nEND;", 47 | "DROP TRIGGER IF EXISTS update_ensure_main_todolist_primarykey;", 48 | "CREATE TRIGGER update_ensure_main_todolist_primarykey\n BEFORE UPDATE ON main.todolist\nBEGIN\n SELECT\n CASE\n WHEN old.id != new.id THEN\n RAISE (ABORT,'cannot change the value of column id as it belongs to the primary key')\n END;\nEND;", 49 | "DROP TRIGGER IF EXISTS insert_main_todolist_into_oplog;", 50 | "CREATE TRIGGER insert_main_todolist_into_oplog\n AFTER INSERT ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'INSERT', json_object('id', new.id), json_object('id', new.id, 'filter', new.filter, 'editing', new.editing), NULL, NULL);\nEND;", 51 | "DROP TRIGGER IF EXISTS update_main_todolist_into_oplog;", 52 | "CREATE TRIGGER update_main_todolist_into_oplog\n AFTER UPDATE ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'UPDATE', json_object('id', new.id), json_object('id', new.id, 'filter', new.filter, 'editing', new.editing), json_object('id', old.id, 'filter', old.filter, 'editing', old.editing), NULL);\nEND;", 53 | "DROP TRIGGER IF EXISTS delete_main_todolist_into_oplog;", 54 | "CREATE TRIGGER delete_main_todolist_into_oplog\n AFTER DELETE ON main.todolist\n WHEN 1 == (SELECT flag from _electric_trigger_settings WHERE tablename == 'main.todolist')\nBEGIN\n INSERT INTO _electric_oplog (namespace, tablename, optype, primaryKey, newRow, oldRow, timestamp)\n VALUES ('main', 'todolist', 'DELETE', json_object('id', old.id), NULL, json_object('id', old.id, 'filter', old.filter, 'editing', old.editing), NULL);\nEND;" 55 | ], 56 | "sha256": "93193dbaae0539a71847187e38a1240e3888512c1bf833381d0252eb68702f9d", 57 | "title": "create todoMVC schema" 58 | } 59 | ], 60 | "replication": { 61 | "host": "127.0.0.1", 62 | "port": 5133, 63 | "ssl": false 64 | } 65 | } 66 | --------------------------------------------------------------------------------