lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-05-04 08:30:39 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Add kv.list() pagination playground example (#2760)

Browse Source 
* Add kv.list() pagination playground example

Create an interactive playground example for kv.list() that
demonstrates cursor-based pagination with sample data (6 items,
2 per page). Also wire the pagination docs example to the playground
by changing the code fence from plain html to html;kv-list.

Fixes #2755

* fix: address review feedback - restore code example, create new pagination playground

* minor refactor

---------

Co-authored-by: Reynaldi Chernando <reynaldichernando@gmail.com>
This commit is contained in:
Trevin Chow
2026-04-03 03:23:42 -07:00
committed by GitHub
parent 5e6aff63c4
commit e23df0b589
4 changed files with 87 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/docs/src/KV/list.md
+34 -7
View File
@@ -86,22 +86,49 @@ If the user has no keys, the array will be empty.
<strong class="example-title">Paginate results with a cursor</strong>
```html
```html;kv-list-pagination
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
(async () => {
const firstPage = await puter.kv.list({ limit: 2 });
puter.print(`First page: ${firstPage.items}<br>`);
if (firstPage.cursor) {
const secondPage = await puter.kv.list({ cursor: firstPage.cursor });
puter.print(`Second page: ${secondPage.items}<br>`);
// Create sample data
for (let i = 1; i <= 6; i++) {
await puter.kv.set(`item-${i}`, `value-${i}`);
}
puter.print('Created 6 key-value pairs<br><br>');
// Paginate with cursor (2 items per page)
let currentCursor = undefined;
let page = 1;
do {
const result = await puter.kv.list({
limit: 2,
returnValues: true,
cursor: currentCursor,
});
const items = result.items;
puter.print(`<b>Page ${page}:</b><br>`);
for (const item of items) {
puter.print(` ${item.key} => ${item.value}<br>`);
}
puter.print('<br>');
currentCursor = result.cursor;
page++;
} while (currentCursor);
puter.print('Done paginating.<br><br>');
// Cleanup
for (let i = 1; i <= 6; i++) {
await puter.kv.del(`item-${i}`);
}
puter.print('Cleaned up sample data.');
})();
</script>
</body>
</html>
```
<strong class="example-title">Sort keys lexicographically</strong>
src/docs/src/examples.js
+6
View File
@@ -407,6 +407,12 @@ const examples = [
slug: 'kv-list',
source: '/playground/examples/kv-list.html',
},
{
title: 'List (Pagination)',
description: 'Paginate key-value results with a cursor and limit using puter.kv.list(). Run and modify this example in the playground.',
slug: 'kv-list-pagination',
source: '/playground/examples/kv-list-pagination.html',
},
{
title: 'List (Sorted)',
description: 'See how keys are returned in lexicographic order with puter.kv.list(). Run and modify this example in the playground.',
src/docs/src/playground/examples/kv-list-pagination.html
+41
View File
@@ -0,0 +1,41 @@
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
(async () => {
// Create sample data
for (let i = 1; i <= 6; i++) {
await puter.kv.set(`item-${i}`, `value-${i}`);
}
puter.print('Created 6 key-value pairs<br><br>');
// Paginate with cursor (2 items per page)
let currentCursor = undefined;
let page = 1;
do {
const result = await puter.kv.list({
limit: 2,
returnValues: true,
cursor: currentCursor,
});
const items = result.items;
puter.print(`<b>Page ${page}:</b><br>`);
for (const item of items) {
puter.print(` ${item.key} => ${item.value}<br>`);
}
puter.print('<br>');
currentCursor = result.cursor;
page++;
} while (currentCursor);
puter.print('Done paginating.<br><br>');
// Cleanup
for (let i = 1; i <= 6; i++) {
await puter.kv.del(`item-${i}`);
}
puter.print('Cleaned up sample data.');
})();
</script>
</body>
</html>
src/docs/src/playground/examples/kv-list.html
+6 -5
View File
@@ -7,19 +7,19 @@
await puter.kv.set('name', 'Puter Smith');
await puter.kv.set('age', 21);
await puter.kv.set('isCool', true);
document.write("Key-value pairs created/updated<br><br>");
puter.print("Key-value pairs created/updated<br><br>");
// (2) Retrieve all keys
const keys = await puter.kv.list();
document.write(`Keys are: ${keys}<br><br>`);
puter.print(`Keys are: ${keys}<br><br>`);
// (3) Retrieve all keys and values
const key_vals = await puter.kv.list(true);
document.write(`Keys and values are: ${(key_vals).map((key_val) => key_val.key + ' => ' + key_val.value)}<br><br>`);
puter.print(`Keys and values are: ${(key_vals).map((key_val) => key_val.key + ' => ' + key_val.value)}<br><br>`);
// (4) Match keys with a pattern
const keys_matching_pattern = await puter.kv.list('is*');
document.write(`Keys matching pattern are: ${keys_matching_pattern}<br>`);
puter.print(`Keys matching pattern are: ${keys_matching_pattern}<br>`);
// (5) Delete all keys (cleanup)
await puter.kv.del('name');
@@ -27,4 +27,5 @@
await puter.kv.del('isCool');
})();
</script>
</body>
</body>
</html>