Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/powersync-ja/powersync-js

SDK that enables local-first and real-time reactive apps with embedded SQLite for JavaScript clients, including React Native and Web
https://github.com/powersync-ja/powersync-js

local-first local-storage offline offline-first powersync sql sqlite state-management sync

Last synced: about 3 hours ago
JSON representation

SDK that enables local-first and real-time reactive apps with embedded SQLite for JavaScript clients, including React Native and Web

Host: GitHub
URL: https://github.com/powersync-ja/powersync-js
Owner: powersync-ja
License: apache-2.0
Created: 2023-10-03T15:17:51.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-10-29T11:41:13.000Z (18 days ago)
Last Synced: 2024-10-29T11:48:36.384Z (18 days ago)
Topics: local-first, local-storage, offline, offline-first, powersync, sql, sqlite, state-management, sync
Language: TypeScript
Homepage: https://www.powersync.com
Size: 20.9 MB
Stars: 293
Watchers: 10
Forks: 21
Open Issues: 16
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  



*[PowerSync](https://www.powersync.com) is a sync engine for building local-first apps with instantly-responsive UI/UX and simplified state transfer. Syncs between SQLite on the client-side and Postgres, MongoDB or MySQL on the server-side.*

# PowerSync JavaScript SDKs

`powersync-js` is the monorepo for PowerSync JavaScript SDKs.

## Monorepo Structure: Packages

- [packages/react-native](./packages/react-native/README.md)

  - React Native SDK implementation (extension of `packages/common`)

- [packages/web](./packages/web/README.md)

  - JS Web SDK implementation (extension of `packages/common`)

- [packages/react](./packages/react/README.md)

  - React integration for PowerSync.

- [packages/vue](./packages/vue/README.md)

  - Vue composables for PowerSync.

- [packages/tanstack-query](./packages/tanstack-query/README.md)

  - Tanstack Query integration for React.

- [packages/attachments](./packages/attachments/README.md)

  - Attachments helper package for React Native and JavaScript/TypeScript projects.

- [packages/kysely-driver](./packages/kysely-driver/README.md)

  - Kysely integration (ORM) for React Native and JavaScript/TypeScript projects.

- [packages/drizzle-driver](./packages/drizzle-driver/README.md)

  - Drizzle integration (ORM) for React Native and JavaScript/TypeScript projects.

- [packages/powersync-op-sqlite](./packages/powersync-op-sqlite/README.md)

  - OP-SQLite integration for React Native projects.

- [packages/common](./packages/common/README.md)

  - Shared package: TypeScript implementation of a PowerSync database connector and streaming sync bucket implementation.

## Demo Apps / Example Projects

Demo applications are located in the [`demos/`](./demos/) directory. Also see our [Demo Apps / Example Projects](https://docs.powersync.com/resources/demo-apps-example-projects) gallery which lists all projects by the backend and client-side framework they use.

### React Native

- [demos/react-native-supabase-todolist](./demos/react-native-supabase-todolist/README.md): A React Native to-do list example app using a Supabase backend.

- [demos/react-native-supabase-group-chat](./demos/react-native-supabase-group-chat/README.md): A React Native group chat example app using a Supabase backend.

- [demos/react-native-web-supabase-todolist](./demos/react-native-web-supabase-todolist/README.md) A React Native to-do list example app using a Supabase backend that's compatible with React Native for Web.

- [demos/django-react-native-todolist](./demos/django-react-native-todolist/README.md) A React Native to-do list example app using a Django backend.

### Web

- [demos/react-supabase-todolist](./demos/react-supabase-todolist/README.md): A React to-do list example app using the PowerSync Web SDK and a Supabase backend.

- [demos/react-multi-client](./demos/react-multi-client/README.md): A React widget that illustrates how data flows from one PowerSync client to another.

- [demos/yjs-react-supabase-text-collab](./demos/yjs-react-supabase-text-collab/README.md): A React real-time text editing collaboration example app powered by [Yjs](https://github.com/yjs/yjs) CRDTs and [Tiptap](https://tiptap.dev/), using the PowerSync Web SDK and a Supabase backend.

- [demos/vue-supabase-todolist](./demos/vue-supabase-todolist/README.md): A Vue to-do list example app using the PowerSync Web SDK and a Supabase backend.

- [demos/angular-supabase-todolist](./demos/angular-supabase-todolist/README.md) An Angular to-do list example app using the PowerSync Web SDK and a Supabase backend.

- [demos/example-webpack](./demos/example-webpack/README.md): A minimal example demonstrating bundling with Webpack.

- [demos/example-vite](./demos/example-vite/README.md): A minimal example demonstrating bundling with Vite.

- [demos/example-nextjs](./demos/example-nextjs/README.md): An example demonstrating setup with Next.js.

### Electron

- [demos/example-electron](./demos/example-electron/README.md) An Electron example web rendered app using the PowerSync Web SDK.

### Capacitor

- [demos/example-capacitor](./demos/example-capacitor/README.md) A Capacitor example app using the PowerSync Web SDK.

## Tools

- [tools/diagnostics-app](./tools/diagnostics-app): A standalone web app that presents stats about a user's local database (incl. tables and sync buckets).

# Development

This monorepo uses pnpm.

Install workspace dependencies

```bash

pnpm install

```

Build packages

```bash

pnpm build:packages

```

## Versioning

### Development Packages

Development packages can be published by manually triggering the `dev-packages` workflow. Development packages are versioned as `0.0.0-{tag}-DATETIMESTAMP`.

### Production Packages

Pull requests should contain Changesets for changed packages.

Add changesets with

```Bash

pnpm changeset add

```

Merging a PR with Changesets will automatically create a PR with version bumps. That PR will be merged when releasing.

## React Native Quick SQLite Development

The PowerSync React Native SDK uses [a fork of react-native-quick-sqlite](https://github.com/powersync-ja/react-native-quick-sqlite)

Testing live development changes to `@journeyapps/react-native-quick-sqlite` will not work with standard `yarn link` commands. Metro does not work well with symlinks .

The process of releasing development packages for `@journeyapps/react-native-quick-sqlite` for each change can be tedious and slow. A faster (and hackier) method is to use [mtsl](https://www.npmjs.com/package/mtsl) which will watch and copy the package into this workspace's `node_modules`.

```bash

npm install -g mtsl

```

```bash

mtsl add -s "[source path to your react-native-quick-sqlite repo folder]" -d "[this workspaces root node_modules folder]"/@journeyapps/react-native-quick-sqlite

```

```bash

mtsl start "[the id returned from step above]"

```