Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/synvox/todoable
https://github.com/synvox/todoable
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/synvox/todoable
- Owner: Synvox
- Created: 2024-02-09T01:23:06.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-03-25T15:44:15.000Z (9 months ago)
- Last Synced: 2024-10-16T01:12:27.779Z (2 months ago)
- Language: TypeScript
- Size: 123 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Todoable
```bash
bun --hot index.ts
```
## Entry
```
http://localhost:4050/index.ts
```
## Summary
This is a simple todo app that doesn't use any dependencies. There's no bundling and everything is streamed to the client.
## Notable Features
- No dependencies but Bun and some types.
- No bundling.
- Async generators for streaming.
- SQLite for persistence.
- Very little client-side JavaScript
- and the JavaScript that is there is written in TypeScript.
- Uses view transitions
## JavaScript features that may be unfamiliar
1. Generators
```js
function* generator() {
for (let i = 0; i < 10; i++) {
yield i;
}
}
console.log([...generator()]); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
```
2. Async Generators
```js
async function* stream() {
for (let i = 0; i < 10; i++) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i;
}
}
(async () => {
for await (const value of stream()) {
console.log(value);
}
})();
```
3. Tagged Template Literals
```js
function tag(strings, ...values) {
console.log(strings); // ['Hello ', ' world!']
console.log(values); // ['Bun']
return strings[0] + values[0] + strings[1];
}
console.log(tag`Hello ${"Bun"} world!`); // Hello Bun world!
```
4. Proxy
```js
const handler = {
get: function (target, prop) {
return prop;
},
};
const p = new Proxy({}, handler);
console.log(p.foo); // "foo"
```
5. WeakMap
```js
const wm = new WeakMap();
const element = document.querySelector(".element");
wm.set(element, "element");
console.log(wm.get(element)); // "element"
```
6. Forms
```html
Add
```