Skip to content

Commit 02f0ce7

Browse files
Chriztiaandylanvorsterbenitav
authored
React native web support via webpack (#280)
Co-authored-by: Dylan Vorster <[email protected]> Co-authored-by: benitav <[email protected]>
1 parent 86d6614 commit 02f0ce7

File tree

130 files changed

+24792
-23375
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

130 files changed

+24792
-23375
lines changed

.changeset/light-dots-unite.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@powersync/attachments': patch
3+
'@powersync/common': patch
4+
'@powersync/kysely-driver': patch
5+
'@powersync/react': patch
6+
'@powersync/react-native': patch
7+
---
8+
9+
Updated dependencies.

.changeset/two-bats-return.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@powersync/web': minor
3+
---
4+
5+
DB and sync workers instantiation can now be overriden with a path or a factory method. Added UMD distribution to introduce `react-native-web` support (available under `@powersync/web/umd`).

README.md

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ Demo applications are located in the [`demos/`](./demos/) directory. Also see ou
4545

4646
- [demos/react-native-supabase-todolist](./demos/react-native-supabase-todolist/README.md): A React Native to-do list example app using a Supabase backend.
4747
- [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.
48+
- [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.
4849
- [demos/django-react-native-todolist](./demos/django-react-native-todolist/README.md) A React Native to-do list example app using a Django backend.
4950

5051
### Web

demos/react-native-supabase-todolist/ios/Podfile.lock

+25-6
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ PODS:
7474
- hermes-engine (0.74.5):
7575
- hermes-engine/Pre-built (= 0.74.5)
7676
- hermes-engine/Pre-built (0.74.5)
77-
- powersync-sqlite-core (0.1.6)
77+
- powersync-sqlite-core (0.2.1)
7878
- RCT-Folly (2024.01.01.00):
7979
- boost
8080
- DoubleConversion
@@ -1005,11 +1005,30 @@ PODS:
10051005
- React-debug
10061006
- react-native-encrypted-storage (4.0.3):
10071007
- React-Core
1008-
- react-native-quick-sqlite (1.1.8):
1009-
- powersync-sqlite-core (~> 0.1.6)
1008+
- react-native-quick-sqlite (1.3.1):
1009+
- DoubleConversion
1010+
- glog
1011+
- hermes-engine
1012+
- powersync-sqlite-core (~> 0.2.1)
1013+
- RCT-Folly (= 2024.01.01.00)
1014+
- RCTRequired
1015+
- RCTTypeSafety
10101016
- React
10111017
- React-callinvoker
1018+
- React-Codegen
10121019
- React-Core
1020+
- React-debug
1021+
- React-Fabric
1022+
- React-featureflags
1023+
- React-graphics
1024+
- React-ImageManager
1025+
- React-NativeModulesApple
1026+
- React-RCTFabric
1027+
- React-rendererdebug
1028+
- React-utils
1029+
- ReactCommon/turbomodule/bridging
1030+
- ReactCommon/turbomodule/core
1031+
- Yoga
10131032
- react-native-safe-area-context (4.10.5):
10141033
- React-Core
10151034
- React-nativeconfig (0.74.5)
@@ -1590,7 +1609,7 @@ SPEC CHECKSUMS:
15901609
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
15911610
glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
15921611
hermes-engine: 8c1577f3fdb849cbe7729c2e7b5abc4b845e88f8
1593-
powersync-sqlite-core: 4c38c8f470f6dca61346789fd5436a6826d1e3dd
1612+
powersync-sqlite-core: 38ead13d8b21920cfbc79e9b3415b833574a506d
15941613
RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
15951614
RCTDeprecation: 3afceddffa65aee666dafd6f0116f1d975db1584
15961615
RCTRequired: ec1239bc9d8bf63e10fb92bd8b26171a9258e0c1
@@ -1616,7 +1635,7 @@ SPEC CHECKSUMS:
16161635
React-logger: 257858bd55f3a4e1bc0cf07ddc8fb9faba6f8c7c
16171636
React-Mapbuffer: 6c1cacdbf40b531f549eba249e531a7d0bfd8e7f
16181637
react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
1619-
react-native-quick-sqlite: 7ad498d81c8506803da2e1c2b64c8cb7758e04cb
1638+
react-native-quick-sqlite: a6c078a8260d0df2b2c53ca9e33f96b93ca5c414
16201639
react-native-safe-area-context: a240ad4b683349e48b1d51fed1611138d1bdad97
16211640
React-nativeconfig: ba9a2e54e2f0882cf7882698825052793ed4c851
16221641
React-NativeModulesApple: 8d11ff8955181540585c944cf48e9e7236952697
@@ -1647,7 +1666,7 @@ SPEC CHECKSUMS:
16471666
RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
16481667
RNVectorIcons: 2a2f79274248390b80684ea3c4400bd374a15c90
16491668
SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
1650-
Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
1669+
Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09
16511670
ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
16521671

16531672
PODFILE CHECKSUM: bc0290fe498e12305d84bb656e108a3ff9f829ea
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Replace the credentials below with your Supabase, PowerSync and Expo project details.
2+
EXPO_PUBLIC_SUPABASE_URL=https://foo.supabase.co
3+
EXPO_PUBLIC_SUPABASE_ANON_KEY=foo
4+
EXPO_PUBLIC_SUPABASE_BUCKET= # Optional. Only required when syncing attachments and using Supabase Storage. See packages/powersync-attachments.
5+
EXPO_PUBLIC_POWERSYNC_URL=https://foo.powersync.journeyapps.com
6+
EXPO_PUBLIC_EAS_PROJECT_ID=foo # Optional. Only required when using EAS.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
11+
# Native
12+
*.orig.*
13+
*.jks
14+
*.p8
15+
*.p12
16+
*.key
17+
*.mobileprovision
18+
19+
# Metrom
20+
.metro-health-check*
21+
22+
# debug
23+
npm-debug.*
24+
25+
# macOS
26+
.DS_Store
27+
*.pem
28+
29+
# local env files
30+
.env*.local*
31+
32+
# typescript
33+
*.tsbuildinfo
34+
35+
# IDE
36+
.vscode
37+
.fleet
38+
.idea
39+
40+
public/@powersync
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# react-native-web-supabase-todolist
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
Creative Commons Legal Code
2+
3+
CC0 1.0 Universal
4+
5+
CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
6+
LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
7+
ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
8+
INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
9+
REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
10+
PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
11+
THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
12+
HEREUNDER.
13+
14+
Statement of Purpose
15+
16+
The laws of most jurisdictions throughout the world automatically confer
17+
exclusive Copyright and Related Rights (defined below) upon the creator
18+
and subsequent owner(s) (each and all, an "owner") of an original work of
19+
authorship and/or a database (each, a "Work").
20+
21+
Certain owners wish to permanently relinquish those rights to a Work for
22+
the purpose of contributing to a commons of creative, cultural and
23+
scientific works ("Commons") that the public can reliably and without fear
24+
of later claims of infringement build upon, modify, incorporate in other
25+
works, reuse and redistribute as freely as possible in any form whatsoever
26+
and for any purposes, including without limitation commercial purposes.
27+
These owners may contribute to the Commons to promote the ideal of a free
28+
culture and the further production of creative, cultural and scientific
29+
works, or to gain reputation or greater distribution for their Work in
30+
part through the use and efforts of others.
31+
32+
For these and/or other purposes and motivations, and without any
33+
expectation of additional consideration or compensation, the person
34+
associating CC0 with a Work (the "Affirmer"), to the extent that he or she
35+
is an owner of Copyright and Related Rights in the Work, voluntarily
36+
elects to apply CC0 to the Work and publicly distribute the Work under its
37+
terms, with knowledge of his or her Copyright and Related Rights in the
38+
Work and the meaning and intended legal effect of CC0 on those rights.
39+
40+
1. Copyright and Related Rights. A Work made available under CC0 may be
41+
protected by copyright and related or neighboring rights ("Copyright and
42+
Related Rights"). Copyright and Related Rights include, but are not
43+
limited to, the following:
44+
45+
i. the right to reproduce, adapt, distribute, perform, display,
46+
communicate, and translate a Work;
47+
ii. moral rights retained by the original author(s) and/or performer(s);
48+
iii. publicity and privacy rights pertaining to a person's image or
49+
likeness depicted in a Work;
50+
iv. rights protecting against unfair competition in regards to a Work,
51+
subject to the limitations in paragraph 4(a), below;
52+
v. rights protecting the extraction, dissemination, use and reuse of data
53+
in a Work;
54+
vi. database rights (such as those arising under Directive 96/9/EC of the
55+
European Parliament and of the Council of 11 March 1996 on the legal
56+
protection of databases, and under any national implementation
57+
thereof, including any amended or successor version of such
58+
directive); and
59+
vii. other similar, equivalent or corresponding rights throughout the
60+
world based on applicable law or treaty, and any national
61+
implementations thereof.
62+
63+
2. Waiver. To the greatest extent permitted by, but not in contravention
64+
of, applicable law, Affirmer hereby overtly, fully, permanently,
65+
irrevocably and unconditionally waives, abandons, and surrenders all of
66+
Affirmer's Copyright and Related Rights and associated claims and causes
67+
of action, whether now known or unknown (including existing as well as
68+
future claims and causes of action), in the Work (i) in all territories
69+
worldwide, (ii) for the maximum duration provided by applicable law or
70+
treaty (including future time extensions), (iii) in any current or future
71+
medium and for any number of copies, and (iv) for any purpose whatsoever,
72+
including without limitation commercial, advertising or promotional
73+
purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
74+
member of the public at large and to the detriment of Affirmer's heirs and
75+
successors, fully intending that such Waiver shall not be subject to
76+
revocation, rescission, cancellation, termination, or any other legal or
77+
equitable action to disrupt the quiet enjoyment of the Work by the public
78+
as contemplated by Affirmer's express Statement of Purpose.
79+
80+
3. Public License Fallback. Should any part of the Waiver for any reason
81+
be judged legally invalid or ineffective under applicable law, then the
82+
Waiver shall be preserved to the maximum extent permitted taking into
83+
account Affirmer's express Statement of Purpose. In addition, to the
84+
extent the Waiver is so judged Affirmer hereby grants to each affected
85+
person a royalty-free, non transferable, non sublicensable, non exclusive,
86+
irrevocable and unconditional license to exercise Affirmer's Copyright and
87+
Related Rights in the Work (i) in all territories worldwide, (ii) for the
88+
maximum duration provided by applicable law or treaty (including future
89+
time extensions), (iii) in any current or future medium and for any number
90+
of copies, and (iv) for any purpose whatsoever, including without
91+
limitation commercial, advertising or promotional purposes (the
92+
"License"). The License shall be deemed effective as of the date CC0 was
93+
applied by Affirmer to the Work. Should any part of the License for any
94+
reason be judged legally invalid or ineffective under applicable law, such
95+
partial invalidity or ineffectiveness shall not invalidate the remainder
96+
of the License, and in such case Affirmer hereby affirms that he or she
97+
will not (i) exercise any of his or her remaining Copyright and Related
98+
Rights in the Work or (ii) assert any associated claims and causes of
99+
action with respect to the Work, in either case contrary to Affirmer's
100+
express Statement of Purpose.
101+
102+
4. Limitations and Disclaimers.
103+
104+
a. No trademark or patent rights held by Affirmer are waived, abandoned,
105+
surrendered, licensed or otherwise affected by this document.
106+
b. Affirmer offers the Work as-is and makes no representations or
107+
warranties of any kind concerning the Work, express, implied,
108+
statutory or otherwise, including without limitation warranties of
109+
title, merchantability, fitness for a particular purpose, non
110+
infringement, or the absence of latent or other defects, accuracy, or
111+
the present or absence of errors, whether or not discoverable, all to
112+
the greatest extent permissible under applicable law.
113+
c. Affirmer disclaims responsibility for clearing rights of other persons
114+
that may apply to the Work or any use thereof, including without
115+
limitation any person's Copyright and Related Rights in the Work.
116+
Further, Affirmer disclaims responsibility for obtaining any necessary
117+
consents, permissions or other rights required for any use of the
118+
Work.
119+
d. Affirmer understands and acknowledges that Creative Commons is not a
120+
party to this document and has no duty or obligation with respect to
121+
this CC0 or use of the Work.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# PowerSync + Supabase Todo List App: React Native for Web Demo
2+
3+
## Overview
4+
5+
This demo app is an extension of the [Supabase Todo List App](../react-native-supabase-todolist/) and demonstrates the use of the PowerSync SDKs for [React Native](https://www.npmjs.com/package/@powersync/react-native) and [Web](https://www.npmjs.com/package/@powersync/web) in a [React Native Web](https://necolas.github.io/react-native-web/) project. This configuration allows developers to use one React Native codebase to target mobile and well as web platforms.
6+
7+
To use PowerSync in your own React Native for Web project, additional config is required. This is detailed in our docs [here](https://docs.powersync.com/client-sdk-references/react-native-and-expo/react-native-web-support).
8+
9+
To run this demo, follow these instructions:
10+
11+
## Running this demo
12+
13+
### Install dependencies
14+
15+
In the repo root, use [pnpm](https://pnpm.io/installation) to install dependencies:
16+
17+
```bash
18+
pnpm install
19+
pnpm build:packages
20+
```
21+
22+
### Set up Supabase Project
23+
24+
Detailed instructions for integrating PowerSync with Supabase can be found in the [integration guide](https://docs.powersync.com/integration-guides/supabase). Below are the main steps required to get this demo running.
25+
26+
Create a new Supabase project, and paste and run the contents of [database.sql](./database.sql) in the Supabase SQL editor.
27+
28+
It does the following:
29+
30+
1. Create `lists` and `todos` tables.
31+
2. Create a publication called `powersync` for `lists` and `todos`.
32+
3. Enable row level security and storage policies, allowing users to only view and edit their own data.
33+
4. Create a trigger to populate some sample data when a user registers.
34+
35+
### Set up PowerSync Instance
36+
37+
Create a new PowerSync instance, connecting to the database of the Supabase project. See instructions [here](https://docs.powersync.com/integration-guides/supabase-+-powersync#connect-powersync-to-your-supabase).
38+
39+
Then deploy the following sync rules:
40+
41+
```yaml
42+
bucket_definitions:
43+
user_lists:
44+
# Separate bucket per todo list
45+
parameters: select id as list_id from lists where owner_id = request.user_id()
46+
data:
47+
- select * from lists where id = bucket.list_id
48+
- select * from todos where list_id = bucket.list_id
49+
```
50+
51+
### Configure the app
52+
53+
#### 1. Set up environment variables:
54+
55+
Copy the `.env.local.template` file:
56+
57+
```bash
58+
cp .env.local.template .env.local
59+
```
60+
61+
Then edit `.env.local` to insert your Supabase and PowerSync project credentials.
62+
63+
#### 2. Configure web workers
64+
65+
This is required for the React Native Web implementation. Learn more in [our docs](https://docs.powersync.com/client-sdk-references/react-native-and-expo/react-native-web-support).
66+
67+
```bash
68+
mkdir -p public/@powersync && cp -r node_modules/@powersync/web/dist/* public/@powersync/
69+
```
70+
71+
### Run the app
72+
73+
Run on Web:
74+
75+
```sh
76+
pnpm web
77+
```
78+
79+
Web bundling can take a few seconds.
80+
81+
Run on iOS:
82+
83+
```sh
84+
pnpm ios
85+
```
86+
87+
Run on Android:
88+
89+
```sh
90+
pnpm android
91+
```
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Android/IntelliJ
6+
#
7+
build/
8+
.idea
9+
.gradle
10+
local.properties
11+
*.iml
12+
*.hprof
13+
.cxx/
14+
15+
# Bundle artifacts
16+
*.jsbundle

0 commit comments

Comments
 (0)