I haven’t added an example of how you implement migrations with Kitten’s¹ built-in JSDB database² yet but here’s one that I just used when renaming a field (property) in a table (JavaScript object) from “account” to “data” that illustrates the general granular approach you should take within persisted instances of JavaScript classes.
This is, of course, an advanced use case of the built-in JavaScript database that all Kitten apps have.
Kitten is simple for simple use cases. So check out the Persistence tutorial, for example, to see how easy it is to get started with JSDB in Kitten:
https://kitten.small-web.org/tutorials/persistence/
And see the Database App Modules tutorial for a more advanced usage where you persist instances of JavaScript classes and have full type safety:
https://kitten.small-web.org/tutorials/database-app-modules/
¹ https://kitten.small-web.org
² https://codeberg.org/small-tech/jsdb
#Kitten #SmallWeb#SmallTech #web #dev #persistence#JavaScript #database #JavaScriptDatabase #authoring #migrations
Screenshot of code for app_modules/database/Model.js.
The following code is highlighted with a pink border:
/**
Optional hook: override this to perform initialisation
at constructor time. (Do not override the constructor
or the automatic property assignment will fail.)
*/
initialise () {}
Full code listing:
/**
Base model class.
(To use, extend this with your own model classes.)
When adding properties in subclasses, make sure you
only set values after checking if the value already
exists:
e.g.,
class MyModelObject extends Model {
mySpecialProperty = this.mySpecialProperty || ''
}
(This way, you will get type safety while authoring
without accidentally overwriting any values populated by
the superclass when model objects are recreated when a
JSDB table is read into memory.)
*/
export default class Model {
id = crypto.randomUUID()
constructor (parameters = {}) {
Object.assign(this, parameters)
this.initialise()
}
/**
Optional hook: override this to perform initialisation
at constructor time. (Do not override the constructor
or the automatic property assignment will fail.)
*/
initialise () {}
}
Screenshot of code (detail) in Helix Editor on macOS, showing the source for app_modules/database/database.js. The following code is highlighted with a pink border:
initialise () {
// Migration.
if (this.account !== undefined) {
this.data = this.account
delete this.account
}
}
Full listing
texport class VerifiedAccount extends Model {
url = this.url || ''
/**
This is the object returned from the accounts/lookup
method of the Mastodon API.
See: https://docs.joinmastodon.org/methods/accounts/#lookup
@type {{
id: string,
username: string,
acct: string,
display_name: string,
locked: boolean,
bot: boolean,
discoverable: boolean,
indexable:boolean,
group:boolean,
created_at: string,
note:string,
url: string,
uri: string
avatar:string
avatar_static: string,
header: string,
header_static: string,
followers_count: number,
following_count: number,
statuses_count: number,
last_status_at: string,
hide_collections: boolean,
noindex: boolean,
emojis: Array,
roles: Array,
fields: Array
}}
*/
data = this.data || ''
initialise () {
// Migration.
if (this.account !== undefined) {
this.data = this.account
delete this.account
}
}
/**
The account is the bit of the URL from the @ onwards.
*/
![Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components.
Contents of windows:
index.page.md:
---
title: An interactive markdown page
script: |
import Reaction from './Reaction.fragment.js'
// Initialise database if necessary.
kitten.db.reactions ??= {}
kitten.db.reactions.Heart ??= 0
kitten.db.reactions.Confetti ??= 0
kitten.db.reactions.Smiley ??= 0
let page
export function onConnect (data) {
page = data.page
}
export function onReaction (data) {
kitten.db.reactions[data.type]++
page.send(kitten.html`<${Reaction} />`)
}
---
<page css>
# Hello!
While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block.
## Reactions{id=your-reactions}
<${Reaction} />
Browser (output):
Hello!
While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block.
Reactions
Heart button: 5
Confetti button: 4
Smiley button: 3](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/115/049/184/562/940/121/original/3683dc4fa5099f6b.png)
💕