mirror of https://github.com/AMT-Cheif/drift.git
Document the web feature
This commit is contained in:
Simon Binder
parent
7d885f9298
commit
bebf6884c4
|
|
@ -3,12 +3,13 @@
|
||||||
[](https://codecov.io/gh/simolus3/moor)
|
[](https://codecov.io/gh/simolus3/moor)
|
||||||
|
|
||||||
|
|
||||||
| Core API | Flutter | Generator |
|
| Core | Flutter | Generator |
|
||||||
|:-------------:|:-------------:|:-----:|
|
|:-------------:|:-------------:|:-----:|
|
||||||
| [](https://pub.dev/packages/moor) | [](https://pub.dev/packages/moor_flutter) | [](https://pub.dev/packages/moor_generator) |
|
| [](https://pub.dev/packages/moor) | [](https://pub.dev/packages/moor_flutter) | [](https://pub.dev/packages/moor_generator) |
|
||||||
|
|
||||||
Moor is an easy to use, reactive persistence library for Flutter apps. Define your database tables in pure Dart and
|
Moor is an easy to use, reactive persistence library for Flutter and Dart web apps.
|
||||||
enjoy a fluent query API, auto-updating streams and more!
|
Define your database tables in pure Dart and enjoy a fluent query API, auto-updating
|
||||||
|
streams and more!
|
||||||
|
|
||||||
For more information, check out the [docs](https://moor.simonbinder.eu/).
|
For more information, check out the [docs](https://moor.simonbinder.eu/).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
moor.simonbinder.eu
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
---
|
||||||
|
layout: feature
|
||||||
|
title: Web support
|
||||||
|
nav_order: 7
|
||||||
|
since: 1.6
|
||||||
|
permalink: /web
|
||||||
|
---
|
||||||
|
|
||||||
|
# Web support
|
||||||
|
Starting from moor `1.6`, you can experimentally use moor in Dart webapps. Moor web supports
|
||||||
|
Flutter Web, AngularDart, plain `dart:html` or any other web framework.
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
Instead of depending on `moor_flutter`, you need to depend on on `moor` directly. Apart from that, you can
|
||||||
|
follow the [getting started guide]({{ site.common_links.getting_started | absolute_url }}).
|
||||||
|
Also, instead of using a `FlutterQueryExecutor` in your database classes, you can use a `WebDatabase` executor:
|
||||||
|
```dart
|
||||||
|
import 'package:moor/moor_web.dart';
|
||||||
|
|
||||||
|
@UseMoor(tables: [Todos, Categories])
|
||||||
|
class MyDatabase extends _$MyDatabase {
|
||||||
|
// here, "app" is the name of the database - you can choose any name you want
|
||||||
|
MyDatabase() : super(WebDatabase('app'));
|
||||||
|
```
|
||||||
|
|
||||||
|
Moor web is built on top of the [sql.js](https://github.com/kripken/sql.js/) library, which you need to include:
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<script defer src="sql-wasm.js"></script>
|
||||||
|
<script defer src="main.dart.js" type="application/javascript"></script>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
You can grab the latest version of `sql-wasm.js` and `sql-wasm.wasm` [here](https://github.com/kripken/sql.js/tree/master/dist)
|
||||||
|
and copy them into your `web` folder.
|
||||||
|
|
||||||
|
## Sharing code between native apps and web
|
||||||
|
If you want to share your database code between native applications and webapps, just import the
|
||||||
|
basic `moor` library and make the `QueryExecutor` configurable:
|
||||||
|
```dart
|
||||||
|
// don't import moor_web.dart or moor_flutter/moor_flutter.dart in shared code
|
||||||
|
import 'package:moor/moor.dart';
|
||||||
|
|
||||||
|
@UseMoor(/* ... */)
|
||||||
|
class SharedDatabase extends _$MyDatabase {
|
||||||
|
SharedDatabase(QueryExecutor e): super(e);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
With native Flutter, you can create an instance of your database with
|
||||||
|
```dart
|
||||||
|
import 'package:moor_flutter/moor_flutter.dart';
|
||||||
|
SharedDatabase constructDb() {
|
||||||
|
return SharedDatabase(FlutterQueryExecutor.inDatabaseFolder(path: 'db.sqlite'));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
On the web, you can use
|
||||||
|
```dart
|
||||||
|
import 'package:moor/moor_web.dart';
|
||||||
|
SharedDatabase constructDb() {
|
||||||
|
return SharedDatabase(WebDatabse('db'));
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Debugging
|
||||||
|
You can see all queries sent from moor to the underlying database engine by enabling the `logStatements`
|
||||||
|
parameter on the `WebDatabase` - they will appear in the console.
|
||||||
|
When you have assertions enabled (e.g. in debug mode), moor will expose the underlying
|
||||||
|
[database](http://kripken.github.io/sql.js/documentation/#http://kripken.github.io/sql.js/documentation/class/Database.html)
|
||||||
|
object via `window.db`. If you need to quickly run a query to check the state of the database, you can use
|
||||||
|
`db.exec(sql)`.
|
||||||
|
If you need to delete your databases, there stored using local storage. You can clear all your data with `localStorage.clear()`.
|
||||||
|
|
||||||
|
Web support is experimental at the moment, so please [report all issues](https://github.com/simolus3/moor/issues/new) you find.
|
||||||
|
|
@ -4,9 +4,15 @@ Moor is an easy to use, reactive persistence library for Flutter apps.
|
||||||
Define your database tables in pure Dart and enjoy a fluent query API,
|
Define your database tables in pure Dart and enjoy a fluent query API,
|
||||||
auto-updating streams and more!
|
auto-updating streams and more!
|
||||||
|
|
||||||
This library defines the APIs for the moor persistence library. When using the library,
|
## With Flutter
|
||||||
|
This library defines the APIs for the moor persistence library. To use it on Flutter apps,
|
||||||
you'll probably want to use the moor_flutter implementation directly.
|
you'll probably want to use the moor_flutter implementation directly.
|
||||||
|
|
||||||
|
## For the web
|
||||||
|
For information to use this library on the web (including Flutter web), follow the
|
||||||
|
instructions [here](https://moor.simonbinder.eu/web). Keep in mind that web support is
|
||||||
|
still experimental.
|
||||||
|
|
||||||
Please see the homepage of [moor](https://moor.simonbinder.eu/) or
|
Please see the homepage of [moor](https://moor.simonbinder.eu/) or
|
||||||
the [moor_flutter package](https://pub.dartlang.org/packages/moor_flutter) for details
|
the [moor_flutter package](https://pub.dartlang.org/packages/moor_flutter) for details
|
||||||
on how to use this package.
|
on how to use this package.
|
||||||
Loading…
Reference in New Issue