@onehat/data
Version:
JS data modeling package with adapters for many storage mediums.
431 lines (324 loc) • 15.3 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>@onehat/data Index</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.yeti.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">@onehat/data</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="module-Entity.html">Entity</a></li><li><a href="module-OneHatData.html">OneHatData</a></li><li><a href="module-Property.html">Property</a></li><li><a href="module-Reader.html">Reader</a></li><li><a href="module-Repository.html">Repository</a></li><li><a href="module-Schema.html">Schema</a></li><li><a href="module-Writer.html">Writer</a></li><li><a href="module-@onehat_data.html">@onehat/data</a></li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="module-Entity-Entity.html">Entity~Entity</a></li><li><a href="module-OneHatData.OneHatData.html">OneHatData.OneHatData</a></li><li><a href="module-Reader-JsonReader.html">Reader~JsonReader</a></li><li><a href="module-Reader-Reader.html">Reader~Reader</a></li><li><a href="module-Reader-XmlReader.html">Reader~XmlReader</a></li><li><a href="module-Repository-AjaxRepository.html">Repository~AjaxRepository</a></li><li><a href="module-Repository-CommandRepository.html">Repository~CommandRepository</a></li><li><a href="module-Repository-LocalFromRemoteRepository.html">Repository~LocalFromRemoteRepository</a></li><li><a href="module-Repository-MemoryRepository.html">Repository~MemoryRepository</a></li><li><a href="module-Repository-NullRepository.html">Repository~NullRepository</a></li><li><a href="module-Repository-OfflineRepository.html">Repository~OfflineRepository</a></li><li><a href="module-Repository-OneBuildRepository.html">Repository~OneBuildRepository</a></li><li><a href="module-Repository-RestRepository.html">Repository~RestRepository</a></li><li><a href="module-Writer-JsonWriter.html">Writer~JsonWriter</a></li><li><a href="module-Writer-Writer.html">Writer~Writer</a></li><li><a href="module-Writer-XmlWriter.html">Writer~XmlWriter</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<section class="readme-section">
<article><img src="onehat-data.svg" alt="@onehat/data" style="width: 400px;" />
<h1>Overview</h1>
<p><a href="https://www.npmjs.com/package/@onehat/data">@onehat/data</a>
A robust ORM for Javascript.
Can CRUD, search, sort, filter, paginate your data. Integrates with many front- and back-end storage mediums.</p>
<ul>
<li><strong>Repositories.</strong> A Repository stores many Entities in a storage medium. Corresponds to a database table.
Repositories can sort, search/filter, and add/edit/delete their constituent Entities.</li>
<li><strong>Storage Mediums.</strong> Repositories are specialized to store their data in a single type of storage medium.
Available types of Repositories include: <em>Memory, Ajax, Rest, LocalStorage (Browser), SessionStorage (Browser),
IndexedDB (Browser), AsyncStorage (React Native/Expo), SecureStore (React Native/Expo).</em>
One special type of Repository—<em>LocalFromRemote</em>—combines two different Repository types (one local and one remote) into a single Repository,
thereby allowing autosyncing between the local and remote repositories, enabling true offline-first capability.</li>
<li><strong>Entities.</strong> An Entity is a single record of data, organized into properties. Corresponds to a database row.
Entity data can be accessed directly (entity.username), via specific properties and their formatted values (entity.properties.username.displayValue),
or by obtaining a JS object of the whole Entity (entity.getDisplayValues(), or entity.getSubmitValues()).</li>
<li><strong>Properties.</strong> A Property is a single unit of data. Corresponds to a database field.
Properties are differentiated into different Property types (e.g. <em>Integer, String, Boolean,</em> etc),
and thereby allow for easy formatting of "display" or "submit" values.
For example, a date might be set to display as "Wed, Feb 5, 2020" but submit as "2020-02-05".</li>
<li><strong>Schemas.</strong> A Schema defines the configuration of a Repository. Corresponds roughly to the database table schema.
The Schema defines the name and type of Repository, the Properties that exist, and which are "id" and "display" Properties.</li>
</ul>
<h1>Install</h1>
<pre class="prettyprint source"><code>npm i @onehat/data
</code></pre>
<h1>Usage</h1>
<p>Comprehensive unit tests can be found in <em>./cypress/integration</em>. These are an excellent source of code examples.
Comprehensive API documentation can be found in <em>./docs</em>.</p>
<h2>1. Define a Schema</h2>
<p>For every type of Entity you will use (e.g. Users or Animals or Invoices), define a Schema.
A Schema determines the various Properties that each Entity will have, as well as the medium
where the Entities will be stored.</p>
<pre class="prettyprint source lang-javascript"><code>const Users = {
name: 'Users',
model: {
idProperty: 'id',
displayProperty: 'username',
properties: [
{ name: 'id', type: 'int', },
{ name: 'username', type: 'string', }, // explicitly set property type
{ name: 'password', }, // type: 'string' is assumed, if not explicitly set
{ name: 'first_name', },
{ name: 'last_name', },
{ name: 'email', allowNull: false, }, // make it a required field
{ name: 'last_login', type: 'datetime', defaultValue: 'now', }, // give it a default value.
],
sorters: [
{
name: 'last_name',
direction: 'ASC',
},
{
name: 'first_name',
direction: 'ASC',
},
],
},
repository: 'memory', // Repository type. Can be string name or config object
};
export default Users;
</code></pre>
<p>Every Property must have a unique name. All other attributes are optional.
Common Property attributes include:</p>
<ul>
<li><strong>name</strong> - The name of the Property</li>
<li><strong>type</strong> - The type of the Property (e.g. 'string', 'bool', 'int', etc)</li>
<li><strong>allowNull</strong> - Is this Property required to have a value?</li>
<li><strong>defaultValue</strong> - Default value for this Property if none is supplied</li>
<li><strong>isSortable</strong> - Whether this Property type is sortable</li>
</ul>
<p>Other Property attributes exist and can be found in the API.</p>
<h2>2. Create a Repository</h2>
<p>The easiest way to create one or more Repositories is to use the global <em>oneHatData</em> singleton object.
Each schema will have a bound repository of the same name (e.g. "Users", or "Groups").</p>
<pre class="prettyprint source lang-javascript"><code>import oneHatData from '@onehat/data';
import Groups from './Groups';
import Users from './Users';
oneHatData
.createSchemas([
Groups,
Users,
])
.createBoundRepositories()
.then(() => {
setIsReady(true);
const UsersRepository = oneHatData.getRepository('Users');
// Do something with your data
});
</code></pre>
<h2>3. Add / Edit / Delete an Entity</h2>
<p>Once you have a Repository initialized, you can start adding data to it.
Data is manipulated asynchronously, so you may optionally wait for it to complete.</p>
<pre class="prettyprint source lang-javascript"><code>const UsersRepository = oneHatData.getRepository('Users');
// 1. Add an Entity
const userEntity = await UsersRepository.add({
username: 'ajones',
password: '12345',
first_name: 'Alice',
last_name: 'Jones',
email: 'alice@example.com',
});
// 2. Edit an Entity
// Use assignment to change the value of a particular Property.
userEntity.password = 'mypass';
// Or you can be more verbose about it
userEntity.getProperty('password').setValue('mypass');
// 3. Delete an Entity
userEntity.delete();
// Or delete it from the Repository
await UsersRepository.delete(userEntity);
</code></pre>
<h2>4. Filter and Sort the Entities in a Repository</h2>
<p>There are lots of filtering and sorting methods available on Repositories.</p>
<pre class="prettyprint source lang-javascript"><code>// Add a single filter
UsersRepository.filter('first_name', 'Alice');
const foundEntities = UsersRepository.entities;
// Or search by an id or function
const myEntity = UsersRepository.getById(1);
const results = UsersRepository.getBy((entity) => {
return entity.id > 2;
});
// Sort the entities by a particular Property
UsersRepository.sort('last_name', 'DESC');
const sortedEntities = UsersRepository.entities;
</code></pre>
<h2>5. Listen for events and respond to them</h2>
<p>Repositories, Entities, and Properties emit many different kinds of events.</p>
<pre class="prettyprint source lang-javascript"><code>// The 'change' event, emitted from an Entity, is relayed through the Repository and becomes 'entity_change'
UsersRepository.on('entity_change', (entity) => {
console.log('changed entity');
});
userEntity.first_name = 'Joe';
// prints 'changed entity' to console
// The 'changeData' event is fired from the Repository after multiple Entities are loaded at once
UsersRepository.on('changeData', (entities) => {
console.log('entities changed');
});
UsersRepository.load([
{ email: 'alice@example.com' },
{ email: 'bob@example.com' },
{ email: 'charlie@example.com' },
]);
// prints 'entities changed' to console
</code></pre></article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<div style="text-align:center;"><p><a href="https://www.npmjs.com/package/@onehat/data">@onehat/data NPM Module</a></p><p><a href="https://github.com/OneHatRepo/data">@onehat/data Github Repo</a></p></div
<span class="copyright">
<div style="text-align:center;"><p>©2020 OneHat Technologies, LLC</p></div>
</span>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.5</a>
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre, pre.prettyprint.source" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : true,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
return $( heading ).attr( "id" ) || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<script>
$( function () {
$( '#main' ).localScroll( {
offset : { top : 60 } //offset by the height of your header (give or take a few px, see what works for you)
} );
$( "dt.name" ).each( function () {
var $this = $( this ).find("h4");
var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
var dt = $(this);
var children = dt.next( "dd" );
dt.prepend( icon ).css( {cursor : "pointer"} );
dt.addClass( "member-collapsed" ).addClass( "member" );
children.hide();
dt.children().on( "click", function () {
children = dt.next( "dd" );
children.slideToggle( "fast", function () {
if ( children.is( ":visible" ) ) {
icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
dt.addClass( "member-open" ).animate( "member-collapsed" );
} else {
icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
dt.addClass( "member-collapsed" ).removeClass( "member-open" );
}
} );
} );
} );
} );
</script>
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>