📦 🐛 ✏️ updates & types & docs

examples/components/3rd-party.js

@@ -0,0 +1,44 @@
+import { style, el, O } from '../exports.js';
+const className= style.host(thirdParty).css`
+	:host {
+		color: green;
+	}
+`;
+
+const store_adapter= {
+	read(){ return (new URL(location)).searchParams; },
+	write(data){ console.log(data); history.replaceState("", "", "?"+(new URLSearchParams(data)).toString()); }
+};
+export function thirdParty(){
+	const store= O({
+		value: O("initial")
+	}, {
+		set(key, value){
+			const p=  this.value[key] || O();
+			p(value);
+			this.value[key]= p;
+		}
+	});
+	// Array.from((new URL(location)).searchParams.entries())
+	// 	.forEach(([ key, value ])=> O.action(store, "set", key, value));
+	// O.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
+	useAdapter(store, store_adapter, {
+		onread(data){
+			Array.from(data.entries())
+				.forEach(([ key, value ])=> O.action(store, "set", key, value));
+		}
+	});
+	return el("input", {
+		className,
+		value: store().value(),
+		type: "text",
+		onchange: ev=> O.action(store, "set", "value", ev.target.value)
+	});
+}
+
+function useAdapter(observable, adapter, { onread, onbeforewrite }= {}){
+	if(!onread) onread= observable;
+	if(!onbeforewrite) onbeforewrite= data=> JSON.parse(JSON.stringify(data));
+	onread(adapter.read()); //TODO OK as synchronous
+	O.on(observable, data=> adapter.write(onbeforewrite(data)));
+}