diff --git a/.changeset/custom-data-store.md b/.changeset/custom-data-store.md new file mode 100644 index 00000000..2e54caa1 --- /dev/null +++ b/.changeset/custom-data-store.md @@ -0,0 +1,15 @@ +--- +"@hyperbook/markdown": minor +"hyperbook": minor +"hyperbook-studio": minor +--- + +Add custom data table to Dexie store for user-managed state persistence + +This adds a new `custom` table to the Hyperbook Dexie store, enabling users to persist arbitrary JSON data in the browser's IndexedDB. + +Features: +- New `custom` table with schema `id, payload` for storing user-defined data +- Comprehensive documentation in the advanced section showing how to use the API +- Automatic inclusion in existing export/import functionality +- Full support for storing and retrieving JSON data using `store.custom.put()` and `store.custom.get()` diff --git a/packages/hyperbook/CHANGELOG.md b/packages/hyperbook/CHANGELOG.md index 7b7e5309..d3c65929 100644 --- a/packages/hyperbook/CHANGELOG.md +++ b/packages/hyperbook/CHANGELOG.md @@ -1,5 +1,25 @@ # hyperbook +## 0.66.0 + +### Minor Changes + +- Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add custom data table to Dexie store for user-managed state persistence + + This adds a new `custom` table to the Hyperbook Dexie store, enabling users to persist arbitrary JSON data in the browser's IndexedDB. + + Features: + + - New `custom` table with schema `id, payload` for storing user-defined data + - Comprehensive documentation in the advanced section showing how to use the API + - Automatic inclusion in existing export/import functionality + - Full support for storing and retrieving JSON data using `store.custom.put()` and `store.custom.get()` + +### Patch Changes + +- Updated dependencies: + - @hyperbook/markdown@0.40.0 + ## 0.65.0 ### Minor Changes diff --git a/packages/hyperbook/package.json b/packages/hyperbook/package.json index a7ac26fb..dd176f4c 100644 --- a/packages/hyperbook/package.json +++ b/packages/hyperbook/package.json @@ -1,6 +1,6 @@ { "name": "hyperbook", - "version": "0.65.0", + "version": "0.66.0", "author": "Mike Barkmin", "homepage": "https://github.com/openpatch/hyperbook#readme", "license": "MIT", diff --git a/packages/markdown/CHANGELOG.md b/packages/markdown/CHANGELOG.md index 7d7f4307..90c73373 100644 --- a/packages/markdown/CHANGELOG.md +++ b/packages/markdown/CHANGELOG.md @@ -1,5 +1,20 @@ # @hyperbook/markdown +## 0.40.0 + +### Minor Changes + +- Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add custom data table to Dexie store for user-managed state persistence + + This adds a new `custom` table to the Hyperbook Dexie store, enabling users to persist arbitrary JSON data in the browser's IndexedDB. + + Features: + + - New `custom` table with schema `id, payload` for storing user-defined data + - Comprehensive documentation in the advanced section showing how to use the API + - Automatic inclusion in existing export/import functionality + - Full support for storing and retrieving JSON data using `store.custom.put()` and `store.custom.get()` + ## 0.39.0 ### Minor Changes diff --git a/packages/markdown/assets/store.js b/packages/markdown/assets/store.js index afa06e35..dabd86ff 100644 --- a/packages/markdown/assets/store.js +++ b/packages/markdown/assets/store.js @@ -28,6 +28,7 @@ store.version(1).stores({ geogebra: `id,state`, learningmap: `id,nodes,x,y,zoom`, textinput: `id,text`, + custom: `id,payload`, }); var sqlIdeDB = new Dexie("SQL-IDE"); sqlIdeDB.version(0.1).stores({ diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 1ed7ce82..767b1de5 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -1,6 +1,6 @@ { "name": "@hyperbook/markdown", - "version": "0.39.0", + "version": "0.40.0", "author": "Mike Barkmin", "homepage": "https://github.com/openpatch/hyperbook#readme", "license": "MIT", diff --git a/platforms/vscode/CHANGELOG.md b/platforms/vscode/CHANGELOG.md index f615e80e..be77ee7f 100644 --- a/platforms/vscode/CHANGELOG.md +++ b/platforms/vscode/CHANGELOG.md @@ -1,5 +1,25 @@ # @hyperbook/vscode-extension +## 0.42.0 + +### Minor Changes + +- Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add custom data table to Dexie store for user-managed state persistence + + This adds a new `custom` table to the Hyperbook Dexie store, enabling users to persist arbitrary JSON data in the browser's IndexedDB. + + Features: + + - New `custom` table with schema `id, payload` for storing user-defined data + - Comprehensive documentation in the advanced section showing how to use the API + - Automatic inclusion in existing export/import functionality + - Full support for storing and retrieving JSON data using `store.custom.put()` and `store.custom.get()` + +### Patch Changes + +- Updated dependencies: + - @hyperbook/markdown@0.40.0 + ## 0.41.0 ### Minor Changes diff --git a/platforms/vscode/package.json b/platforms/vscode/package.json index 64f43f43..003939d6 100644 --- a/platforms/vscode/package.json +++ b/platforms/vscode/package.json @@ -11,7 +11,7 @@ }, "homepage": "https://hyperbook.openpatch.org", "main": "./out/extension.js", - "version": "0.41.0", + "version": "0.42.0", "engines": { "vscode": "^1.71.0" }, diff --git a/website/de/book/advanced/custom-scripts.md b/website/de/book/advanced/custom-scripts.md index cee822ed..a1ca16b3 100644 --- a/website/de/book/advanced/custom-scripts.md +++ b/website/de/book/advanced/custom-scripts.md @@ -28,3 +28,107 @@ for (let el of els) { ```
Am I a Chameleon?
+ +## Verwendung der Hyperbook Store API + +Hyperbook stellt eine integrierte Dexie-Datenbank zur Verfügung, mit der du benutzerdefinierte Daten in der IndexedDB des Browsers speichern und abrufen kannst. Dies ist nützlich zum Speichern von Benutzereinstellungen, Fortschrittsverfolgung oder anderen benutzerdefinierten Daten, die nach dem Neuladen der Seite erhalten bleiben sollen. + +### Custom Data Tabelle + +Der Hyperbook-Store enthält eine `custom`-Tabelle, die speziell für deine benutzerdefinierten Datenanforderungen entwickelt wurde. Das Tabellenschema ist: + +- `id` - Eine eindeutige Kennung für deinen Dateneintrag (String) +- `payload` - Deine benutzerdefinierten Daten, typischerweise als JSON gespeichert + +### Daten speichern + +Du kannst benutzerdefinierte JSON-Daten mit der Methode `store.custom.put()` speichern: + +```js +// Benutzereinstellungen speichern +await store.custom.put({ + id: "user-preferences", + payload: JSON.stringify({ + theme: "dark", + fontSize: 16, + language: "de" + }) +}); + +// Benutzerfortschritt speichern +await store.custom.put({ + id: "chapter-progress", + payload: JSON.stringify({ + currentChapter: 5, + completedExercises: [1, 2, 3], + lastVisited: new Date().toISOString() + }) +}); +``` + +### Daten abrufen + +Du kannst deine Daten mit der Methode `store.custom.get()` abrufen: + +```js +// Benutzereinstellungen abrufen +const prefs = await store.custom.get("user-preferences"); +if (prefs) { + const preferences = JSON.parse(prefs.payload); + console.log(preferences.theme); // "dark" +} + +// Benutzerfortschritt abrufen +const progress = await store.custom.get("chapter-progress"); +if (progress) { + const data = JSON.parse(progress.payload); + console.log(data.currentChapter); // 5 +} +``` + +### Vollständiges Beispiel + +Hier ist ein vollständiges Beispiel, das das Speichern und Laden benutzerdefinierter Daten demonstriert: + +```js title="user-preferences.js" +// Einstellungen initialisieren oder laden +async function initPreferences() { + const stored = await store.custom.get("my-app-settings"); + + let settings; + if (stored) { + settings = JSON.parse(stored.payload); + } else { + // Standardeinstellungen + settings = { + notifications: true, + autoSave: true, + lastLogin: new Date().toISOString() + }; + await savePreferences(settings); + } + + return settings; +} + +// Einstellungen speichern +async function savePreferences(settings) { + await store.custom.put({ + id: "my-app-settings", + payload: JSON.stringify(settings) + }); +} + +// Beispielverwendung +initPreferences().then(settings => { + console.log("Aktuelle Einstellungen:", settings); + + // Eine Einstellung aktualisieren + settings.notifications = false; + savePreferences(settings); +}); +``` + +### Datenexport und -import + +Deine benutzerdefinierten Daten werden automatisch eingeschlossen, wenn Benutzer ihre Hyperbook-Daten mit der Funktion `hyperbookExport()` exportieren. Ebenso werden sie wiederhergestellt, wenn sie `hyperbookImport()` verwenden. Dadurch wird sichergestellt, dass deine benutzerdefinierten Daten über Browser-Sitzungen hinweg erhalten bleiben und zwischen Geräten übertragen werden können. diff --git a/website/en/book/advanced/custom-scripts.md b/website/en/book/advanced/custom-scripts.md index e1712a1a..4b2e5f42 100644 --- a/website/en/book/advanced/custom-scripts.md +++ b/website/en/book/advanced/custom-scripts.md @@ -27,3 +27,107 @@ for (let el of els) { ```
Am I a Chameleon?
+ +## Using the Hyperbook Store API + +Hyperbook provides a built-in Dexie database that allows you to store and retrieve custom data in the browser's IndexedDB. This is useful for persisting user preferences, progress tracking, or any other custom data that should survive page reloads. + +### Custom Data Table + +The hyperbook store includes a `custom` table specifically designed for your custom data needs. The table schema is: + +- `id` - A unique identifier for your data entry (string) +- `payload` - Your custom data, typically stored as JSON + +### Saving Data + +You can save custom JSON data using the `store.custom.put()` method: + +```js +// Save user preferences +await store.custom.put({ + id: "user-preferences", + payload: JSON.stringify({ + theme: "dark", + fontSize: 16, + language: "en" + }) +}); + +// Save user progress +await store.custom.put({ + id: "chapter-progress", + payload: JSON.stringify({ + currentChapter: 5, + completedExercises: [1, 2, 3], + lastVisited: new Date().toISOString() + }) +}); +``` + +### Retrieving Data + +You can retrieve your data using the `store.custom.get()` method: + +```js +// Get user preferences +const prefs = await store.custom.get("user-preferences"); +if (prefs) { + const preferences = JSON.parse(prefs.payload); + console.log(preferences.theme); // "dark" +} + +// Get user progress +const progress = await store.custom.get("chapter-progress"); +if (progress) { + const data = JSON.parse(progress.payload); + console.log(data.currentChapter); // 5 +} +``` + +### Complete Example + +Here's a complete example that demonstrates saving and loading custom data: + +```js title="user-preferences.js" +// Initialize or load preferences +async function initPreferences() { + const stored = await store.custom.get("my-app-settings"); + + let settings; + if (stored) { + settings = JSON.parse(stored.payload); + } else { + // Default settings + settings = { + notifications: true, + autoSave: true, + lastLogin: new Date().toISOString() + }; + await savePreferences(settings); + } + + return settings; +} + +// Save preferences +async function savePreferences(settings) { + await store.custom.put({ + id: "my-app-settings", + payload: JSON.stringify(settings) + }); +} + +// Example usage +initPreferences().then(settings => { + console.log("Current settings:", settings); + + // Update a setting + settings.notifications = false; + savePreferences(settings); +}); +``` + +### Data Export and Import + +Your custom data is automatically included when users export their hyperbook data using the `hyperbookExport()` function. Similarly, it will be restored when they use `hyperbookImport()`. This ensures your custom data is preserved across browser sessions and can be transferred between devices. diff --git a/website/en/book/changelog.md b/website/en/book/changelog.md index 5465c2f3..fff00f8c 100644 --- a/website/en/book/changelog.md +++ b/website/en/book/changelog.md @@ -38,6 +38,18 @@ If you need a new feature, open an [issue](https://github.com/openpatch/hyperboo :::: --> +## v0.66.0 + +::::tabs + +:::tab{title="New :rocket:" id="new"} + +- Add new `custom` table to the Hyperbook Dexie store for user-managed state persistence. Users can now store and retrieve arbitrary JSON data in the browser's IndexedDB using `store.custom.put()` and `store.custom.get()`. Custom data is automatically included in export/import functionality. [Learn more](/advanced/custom-scripts#using-the-hyperbook-store-api) + +::: + +:::: + ## v0.63.0 ::::tabs