@yawnxyz/sheetlog
Advanced tools
Comparing version 0.1.5 to 0.1.6
328
demo/main.js
@@ -1,94 +0,36 @@ | ||
import { Hono } from "hono"; | ||
import "jsr:@std/dotenv/load"; | ||
import { Hono } from "npm:hono"; | ||
const app = new Hono(); | ||
const getAlpineModule = () => ` | ||
import sheet, { Sheet } from 'https://esm.town/v/janzheng/sheetlog'; | ||
// Add API endpoints to handle sheet operations | ||
app.post("/api/sheet", async (c) => { | ||
try { | ||
const body = await c.req.json(); | ||
const { sheetUrl, payload } = body; | ||
// Default sheet to Sheet1 if not provided | ||
if (payload.sheet === undefined) { | ||
payload.sheet = "Sheet1"; | ||
} | ||
document.addEventListener('alpine:init', () => { | ||
Alpine.data('sheetlogDemo', () => ({ | ||
sheetUrl: '', | ||
customSheet: null, | ||
output: '', | ||
examples: [ | ||
{ | ||
title: 'Basic Logging', | ||
description: 'Simple message logging to sheet', | ||
code: \`// logs to default sheet | ||
sheet.log({ message: "Hello World!" }); | ||
const response = await fetch(sheetUrl, { | ||
method: "POST", | ||
headers: { "Content-Type": "application/json" }, | ||
body: JSON.stringify(payload) | ||
}); | ||
const text = await response.text(); | ||
let data; | ||
try { | ||
data = JSON.parse(text); | ||
} catch (e) { | ||
throw new Error(text); | ||
} | ||
return c.json(data); | ||
// or use custom sheet | ||
this.customSheet.log({ message: "Hello World!" });\` | ||
}, | ||
{ | ||
title: 'Custom Sheet Setup', | ||
description: 'Configure a new sheet instance', | ||
code: \`const customSheet = new Sheet(); | ||
customSheet.setup({ | ||
sheetUrl: "your-sheet-url", | ||
logPayload: true, // log payload to console | ||
concurrency: 5, // async requests (max 5) | ||
useSqid: true // add timestamp-based ID | ||
});\` | ||
}, | ||
{ | ||
title: 'Range Update', | ||
description: 'Update multiple cells at once', | ||
code: \`await this.customSheet.request({ | ||
method: "RANGE_UPDATE", | ||
sheet: "Sheet1", | ||
startRow: 2, | ||
startCol: 3, | ||
data: [ | ||
["Hello", "B1", "C1"], | ||
["A2", "B2", "World"], | ||
["A3", "B3", "C3"] | ||
] | ||
});\` | ||
}, | ||
{ | ||
title: 'Get Columns', | ||
description: 'Fetch column data', | ||
code: \`const result = await this.customSheet.request({ | ||
method: "GET_COLUMNS", | ||
sheet: "Sheet1", | ||
startColumn: "A" | ||
});\` | ||
} | ||
], | ||
} catch (err) { | ||
console.error("Error in /api/sheet:", err); | ||
return c.json({ error: err.message }, 500); | ||
} | ||
}); | ||
init() { | ||
// Initialize a new Sheet instance | ||
this.customSheet = new Sheet(); | ||
}, | ||
updateSheetUrl() { | ||
if (!this.sheetUrl) return; | ||
// Update both default and custom sheet | ||
sheet.setup({ sheetUrl: this.sheetUrl }); | ||
this.customSheet.setup({ sheetUrl: this.sheetUrl }); | ||
}, | ||
async executeCode(code) { | ||
if (!this.sheetUrl) { | ||
alert('Please enter a Sheet URL first'); | ||
return; | ||
} | ||
try { | ||
// Evaluate the code in the context of this component | ||
const result = await eval(\`(async () => { \${code} })()\`); | ||
this.output = JSON.stringify(result, null, 2); | ||
console.log('Success:', result); | ||
} catch (err) { | ||
this.output = 'Error: ' + err.message; | ||
console.error('Error:', err); | ||
} | ||
} | ||
})); | ||
}); | ||
`; | ||
const html = ` | ||
@@ -101,3 +43,2 @@ <!DOCTYPE html> | ||
<title>Sheetlog Demo</title> | ||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script> | ||
<script src="https://cdn.tailwindcss.com"></script> | ||
@@ -117,2 +58,3 @@ </head> | ||
<li>Paste the URL below to start using the demo</li> | ||
<li>Google Sheet Demo Link: <a class="text-blue-500 hover:underline" href="https://docs.google.com/spreadsheets/d/15XoANPN-DAyBkQlN9-s7bCaWzDNibuWTXHFCQMISVK4/edit?usp=sharing" target="_blank">https://docs.google.com/spreadsheets/d/15XoANPN-DAyBkQlN9-s7bCaWzDNibuWTXHFCQMISVK4/edit?usp=sharing</a></li> | ||
</ol> | ||
@@ -129,6 +71,2 @@ | ||
<div class="bg-white p-6 rounded-lg shadow-md mb-8"> | ||
<h2 class="text-xl font-semibold mb-4">Output</h2> | ||
<pre class="bg-gray-100 p-4 rounded-md"><code x-text="output || 'Results will appear here...'"></code></pre> | ||
</div> | ||
@@ -142,11 +80,21 @@ <div class="space-y-8"> | ||
<div class="bg-gray-100 p-4 rounded-md mb-4"> | ||
<pre><code x-text="example.code"></code></pre> | ||
<textarea | ||
x-model="example.payloadStr" | ||
@input="updatePayload($event, example)" | ||
class="w-full font-mono bg-transparent border-none focus:outline-none" | ||
rows="6" | ||
></textarea> | ||
</div> | ||
<button | ||
@click="executeCode(example.code)" | ||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" | ||
@click="executeExample(example)" | ||
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mb-4" | ||
> | ||
Run Example | ||
</button> | ||
<div x-show="example.output" class="mt-4"> | ||
<h4 class="font-semibold mb-2">Output:</h4> | ||
<pre class="bg-gray-100 p-4 rounded-md"><code x-text="example.output"></code></pre> | ||
</div> | ||
</div> | ||
@@ -157,5 +105,191 @@ </template> | ||
<script type="module"> | ||
${getAlpineModule()} | ||
<script> | ||
document.addEventListener('alpine:init', () => { | ||
Alpine.data('sheetlogDemo', () => ({ | ||
sheetUrl: 'https://script.google.com/macros/s/AKfycby6LeTf0TB-0bQFnL4_6t7lRkgePmtIh2kMqGsvFDjVPXc-0l8wxNJi0dD52XRU0PvZ/exec', | ||
examples: [ | ||
{ | ||
title: 'Get Columns', | ||
description: 'Fetch column data from the sheet', | ||
payload: { | ||
method: "GET_COLUMNS", | ||
sheet: "testSheet", | ||
startColumn: "A", | ||
endColumn: "C" | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Get Rows', | ||
description: 'Fetch specific rows from the sheet', | ||
payload: { | ||
method: "GET_ROWS", | ||
sheet: "testSheet", | ||
startRow: 2, | ||
endRow: 5 | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Create New Row', | ||
description: 'Add a new row of data', | ||
payload: { | ||
method: "POST", | ||
sheet: "testSheet", | ||
payload: { | ||
name: "John Doe", | ||
email: "john@example.com" | ||
} | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Update or Create Row (Upsert)', | ||
description: 'Create or update a row based on ID', | ||
payload: { | ||
method: "UPSERT", | ||
sheet: "testSheet", | ||
idColumn: "email", | ||
id: "john@example.com", | ||
payload: { | ||
name: "John Doe Updated", | ||
status: "active" | ||
} | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Dynamic Post', | ||
description: 'Create row with automatic column creation', | ||
payload: { | ||
method: "DYNAMIC_POST", | ||
sheet: "testSheet", | ||
payload: { | ||
newField: "newValue", | ||
anotherField: "anotherValue" | ||
} | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Find Records', | ||
description: 'Search for specific records', | ||
payload: { | ||
method: "FIND", | ||
sheet: "testSheet", | ||
idColumn: "Name", | ||
id: "Banana", | ||
returnAllMatches: true | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Paginated Get', | ||
description: 'Get paginated results', | ||
payload: { | ||
method: "PAGINATED_GET", | ||
sheet: "testSheet", | ||
limit: 5, | ||
cursor: 2, | ||
sortBy: "Name", | ||
sortDir: "desc" | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Range Update', | ||
description: 'Update multiple cells efficiently', | ||
payload: { | ||
method: "RANGE_UPDATE", | ||
sheet: "testSheet", | ||
startRow: 22, | ||
startCol: 5, | ||
data: [ | ||
["A1", "B1", "C1"], | ||
["A2", "B2", "C2"] | ||
] | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Aggregate', | ||
description: 'Perform calculations on columns', | ||
payload: { | ||
method: "AGGREGATE", | ||
sheet: "testSheet", | ||
column: "amount", | ||
operation: "sum" | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
}, | ||
{ | ||
title: 'Add Column', | ||
description: 'Add a new column to the sheet', | ||
payload: { | ||
method: "ADD_COLUMN", | ||
sheet: "testSheet", | ||
columnName: "newColumn" | ||
}, | ||
payloadStr: '', | ||
output: '' | ||
} | ||
], | ||
init() { | ||
this.examples.forEach(ex => { | ||
ex.payloadStr = JSON.stringify(ex.payload, null, 2); | ||
}); | ||
}, | ||
updatePayload(event, example) { | ||
try { | ||
example.payload = JSON.parse(event.target.value); | ||
example.payloadStr = event.target.value; | ||
} catch (err) { | ||
example.payloadStr = event.target.value; | ||
} | ||
}, | ||
async executeExample(example) { | ||
if (!this.sheetUrl) { | ||
alert('Please enter a Sheet URL first'); | ||
return; | ||
} | ||
try { | ||
let payload; | ||
try { | ||
payload = JSON.parse(example.payloadStr); | ||
} catch (err) { | ||
throw new Error('Invalid JSON in payload'); | ||
} | ||
const response = await fetch('/api/sheet', { | ||
method: 'POST', | ||
headers: { 'Content-Type': 'application/json' }, | ||
body: JSON.stringify({ | ||
sheetUrl: this.sheetUrl, | ||
payload: payload | ||
}) | ||
}); | ||
const result = await response.json(); | ||
example.output = JSON.stringify(result, null, 2); | ||
} catch (err) { | ||
example.output = 'Error: ' + err.message; | ||
console.error('Error:', err); | ||
} | ||
} | ||
})); | ||
}); | ||
</script> | ||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script> | ||
</body> | ||
@@ -162,0 +296,0 @@ </html> |
{ | ||
"name": "@yawnxyz/sheetlog", | ||
"version": "0.1.5", | ||
"version": "0.1.6", | ||
"description": "a google sheets logging system", | ||
@@ -9,3 +9,3 @@ "main": "index.mjs", | ||
"pub": "npm publish --access public", | ||
"demo": "node ./demo.mjs" | ||
"demo": "node ./demo.mjs" | ||
}, | ||
@@ -12,0 +12,0 @@ "keywords": [ |
@@ -1033,2 +1033,9 @@ /* | ||
} | ||
error(status, code, details) { | ||
return { | ||
status: status, | ||
error: { code: code, details: details } | ||
}; | ||
} | ||
} | ||
@@ -1035,0 +1042,0 @@ |
201070
23
2658
2