PowerSyncDatabase
. An example of this is available here.
To do this, copy the contents of node_modules/@powersync/web/dist
to the root of your project (typically in the public
directory). To make it easier to manage these files in the public
directory, it is recommended to place the contents in a nested directory like @powersync
.
The @powersync/web
package includes a CLI utility which can copy the required assets to the public
directory (configurable with the --output
option).
PowerSyncDatabase
. You can either specify a path to the worker (they are available in the worker
directory of the dist
contents), or provide a factory function to create the worker.
PowerSyncDatabaseWeb
database will be used alongside the native PowerSyncDatabase
to support platform-specific implementations. See the Instantiating PowerSync section below for more details.
config.resolver.resolveRequest
allows Metro to behave differently based on the platform.
react-native
and web
packages are implemented with only their specific platform in mind, as such there may be times where you will need to evaluate the platform and provide alternative implementations.
Instantiating PowerSync
The following snippet constructs the correct PowerSyncDatabase
depending on the platform that the code is executing on.
@powersync/web
(available at @powersync/web/umd
). To fully support this target version, configure the following in your project:
config.resolver.unstable_enablePackageExports = true;
to your metro.config.js
file.
tsconfig.json
file specify the moduleResolution
to be Bundler
.