Something went wrong. Try again.
Experiment to rebuild Diffuse using web applets.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119import { computed, effect, type Signal, signal } from "spellcaster";import { type Props, repeat, tags, text } from "spellcaster/hyperscript.js";
import type { Bucket } from "./types";import { bucketId, loadBuckets, saveBuckets } from "./common";
////////////////////////////////////////////// UI////////////////////////////////////////////export const [buckets, setBuckets] = signal<Record<string, Bucket>>(await loadBuckets());export const [form, setForm] = signal<{ access_key?: string; bucket_name?: string; host?: string; path?: string; region?: string; secret_key?: string;}>({});
export const bucketsMap = computed(() => { return new Map(Object.entries(buckets()));});
effect(() => { saveBuckets(buckets());});
////////////////////////////////////////////// UI ~ BUCKETS////////////////////////////////////////////const Bucket = (bucket: Signal<Bucket>) => { const onclick = () => { const b = bucket(); const id = bucketId(b);
const col = { ...buckets() }; delete col[id];
setBuckets(col); };
return tags.li({ onclick, style: "cursor: pointer" }, text(bucket().host));};
const BucketList = computed(() => { if (bucketsMap().size === 0) { return tags.p({ id: "buckets" }, [tags.small({}, text("Nothing added so far."))]); }
return tags.ul({ id: "buckets" }, repeat(bucketsMap, Bucket));});
effect(() => { document.querySelector("#buckets")?.replaceWith(BucketList());});
////////////////////////////////////////////// UI ~ FORM////////////////////////////////////////////function addBucket(event: Event) { event.preventDefault();
const f = form();
const bucket: Bucket = { accessKey: f.access_key || "", bucketName: f.bucket_name || "", host: f.host || "s3.amazonaws.com", path: f.path || "/", region: f.region || "us-east-1", secretKey: f.secret_key || "", };
setBuckets({ ...buckets(), [bucketId(bucket)]: bucket, });}
function Form() { return tags.form({ onsubmit: addBucket }, [ tags.fieldset({ className: "grid" }, [ Input("access_key", "Access key", "r31w7m9c", { required: true }), Input("secret_key", "Secret key", "v02g2l29", { required: true }), ]), tags.fieldset({ className: "grid" }, [ Input("bucket_name", "Bucket name", "bucket", { required: true }), Input("region", "Region", "us-east-1", { required: true }), ]), tags.fieldset({ className: "grid" }, [ Input("host", "Host", "s3.amazonaws.com", { required: true }), Input("path", "Path", "/"), ]), tags.fieldset({ className: "grid" }, [tags.input({ type: "submit", value: "Connect" }, [])]), ]);}
function Input(name: string, label: string, placeholder: string, opts: Props = {}) { return tags.label({}, [ tags.span({}, [ tags.span({}, text(label)), tags.small({}, text("required" in opts ? "" : " (optional)")), ]), tags.input({ ...opts, name, placeholder, oninput: (event: InputEvent) => formInput(name, (event.target as HTMLInputElement).value), }), ]);}
function formInput(name: string, value: string) { setForm({ ...form(), [name]: value });}
// 🚀document.querySelector("#form")?.replaceWith(Form());