JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaystack.net/pro/IndexedDbProProvider.min.js"></script>
<script src="http://include.jaystack.net/pro/SqLiteProProvider.min.js"></script>
<script src="http://include.jaystack.net/pro/SchemaEvolutions.min.js"></script>

JavaScript

$data.defineDatabase('TodoDb', function (container) {
    
    $data.Entity.extend('Todo', {
        Id: { type: 'int', key: true, computed: true },
        Value: { type: 'string' },
        CreatedAt: { type: 'datetime' },
        ModifiedAt: { type: 'datetime' },
        Done: { type: 'bool' },
        CategoryId: { type: 'int' }
    });

    $data.Entity.extend('Category', {
        Id: { type: 'int', key: true, computed: true },
        Value: { type: 'string' }
    });

    return $data.EntityContext.extend('TodoContext', {
        Todos: { type: $data.EntitySet, elementType: Todo, indices: [{ name: 'idx_Value', unique: true, keys: ['Value'] }] },
        Categories: { type: $data.EntitySet, elementType: Category }
    });
    
})
.on("databaseCreated", function (newDB, options) {
    console.log("databaseCreated");
})
.on("schemaChanged", function (oldDb, newDB, options) {
    console.log("schemaChanged");
});

$data.openDatabase('TodoDb')
.then(function (db) {
    var c = new db.Categories.elementType();
    c.save()
    .then(function() {
        console.log(c.Id);
    });
    
    var d = new db['Categories'].elementType();
    d.save()
    .then(function() {
        console.log(d.Id);
    });    
})
.fail(function (e) {
    alert("fail");
});