@storion/storion 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
- [Features](#features)
|
|
13
13
|
- [Install](#install)
|
|
14
14
|
- [Quick start](#quick-start)
|
|
15
|
+
- [Common examples](#common-examples)
|
|
15
16
|
- [Documentation](#documentation)
|
|
16
17
|
- [Database from config](#database-from-config)
|
|
17
18
|
- [Query language](#query-language)
|
|
@@ -92,8 +93,57 @@ await db.delete('users', 2);
|
|
|
92
93
|
|
|
93
94
|
---
|
|
94
95
|
|
|
96
|
+
## Common examples
|
|
97
|
+
|
|
98
|
+
### Example: simple todo list (localStorage)
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
import { createDatabase } from '@storion/storion';
|
|
102
|
+
|
|
103
|
+
const db = await createDatabase({
|
|
104
|
+
name: 'todo-app',
|
|
105
|
+
storage: 'localStorage'
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
await db.createTable('todos', [
|
|
109
|
+
{ name: 'id', type: 'int' },
|
|
110
|
+
{ name: 'title', type: 'string' },
|
|
111
|
+
{ name: 'done', type: 'boolean' }
|
|
112
|
+
]);
|
|
113
|
+
|
|
114
|
+
// Add a todo
|
|
115
|
+
await db.insert('todos', { title: 'Ship Storion docs', done: false });
|
|
116
|
+
|
|
117
|
+
// Get all open todos
|
|
118
|
+
const openTodos = await db.fetch('todos', {
|
|
119
|
+
filter: { done: false },
|
|
120
|
+
sortBy: 'id'
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Example: admin-style querying
|
|
125
|
+
|
|
126
|
+
```js
|
|
127
|
+
// Fetch the 20 latest active users whose name contains "smith"
|
|
128
|
+
const { rows, totalCount } = await db.query('users', {
|
|
129
|
+
where: {
|
|
130
|
+
and: [
|
|
131
|
+
{ field: 'active', op: 'eq', value: true },
|
|
132
|
+
{ field: 'name', op: 'contains', value: 'smith' }
|
|
133
|
+
]
|
|
134
|
+
},
|
|
135
|
+
orderBy: [{ field: 'created_at', direction: 'desc' }],
|
|
136
|
+
limit: 20,
|
|
137
|
+
offset: 0
|
|
138
|
+
});
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
95
143
|
## Documentation
|
|
96
144
|
|
|
145
|
+
**Documentation:** https://storionjs.github.io/storion-docs/
|
|
146
|
+
|
|
97
147
|
| Document | Description |
|
|
98
148
|
|----------|-------------|
|
|
99
149
|
| [**API reference**](docs/API.md) | Full API for `createDatabase`, `Database` methods, and helpers. |
|
|
@@ -264,6 +314,42 @@ const stop = createChangeListener(transport, (event) => {
|
|
|
264
314
|
// Later: stop();
|
|
265
315
|
```
|
|
266
316
|
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
## Storion Studio (Chrome extension)
|
|
320
|
+
|
|
321
|
+
**Storion Studio** is a Chrome extension that turns your browser's `localStorage` into a structured database with a visual UI—think of it as an admin console for Storion. It uses the same data layout as the `@storion/storion` npm package, so you can manage data in the extension while your web app uses the library.
|
|
322
|
+
|
|
323
|
+
- **GitHub (extension):** `https://github.com/storionjs/storion-studio`
|
|
324
|
+
- **Docs page:** `https://storionjs.github.io/storion-docs/storion-studio.html`
|
|
325
|
+
|
|
326
|
+
### What you can do with Studio
|
|
327
|
+
|
|
328
|
+
- Create, delete, and organize multiple databases.
|
|
329
|
+
- Create tables with custom columns and manage schema visually.
|
|
330
|
+
- Insert, read, update, and delete rows in a table grid.
|
|
331
|
+
- Use a Query panel that speaks the same JSON query language as `db.query()`.
|
|
332
|
+
- Export/import databases as JSON.
|
|
333
|
+
- Optionally stream change events to a page that uses Storion (via `postMessage`, Chrome messaging, or other transports).
|
|
334
|
+
|
|
335
|
+
### Using Studio with your app
|
|
336
|
+
|
|
337
|
+
Because both Studio and the library share the same storage layout (by default under the `__LS_DB__` key in `localStorage`):
|
|
338
|
+
|
|
339
|
+
- You can prototype or inspect data in Storion Studio.
|
|
340
|
+
- Then point your app at the same database with:
|
|
341
|
+
|
|
342
|
+
```js
|
|
343
|
+
import { createDatabase } from '@storion/storion';
|
|
344
|
+
|
|
345
|
+
const db = await createDatabase({
|
|
346
|
+
name: 'myapp',
|
|
347
|
+
storage: 'localStorage'
|
|
348
|
+
});
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
If you want live updates from Studio into your app, wire up `setChangeBroadcaster` in the context where Studio is making changes and `createChangeListener` in your app, as shown in the [Cross-context sync](#cross-context-sync-eg-extensions) section.
|
|
352
|
+
|
|
267
353
|
See [API — createChangeListener](docs/API.md) and [API — setChangeBroadcaster](docs/API.md) for details.
|
|
268
354
|
|
|
269
355
|
---
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storion/storion",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Framework-agnostic client-side database with localStorage, sessionStorage, and IndexedDB. Create databases, tables, save/fetch records, and run JSON queries.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|