Web developer and autodidact with an interest in creative coding.
function timer({value = 0, invalidation: invalidated = invalidation} = {}) {
const { html, createRoot, createSignal, createEffect, onCleanup } = S;
return createRoot(dispose => {
invalidated.then(dispose);
const [count, setCount] = createSignal(value);
createEffect(() => {
count(), root.dispatchEvent(new Event('input', {bubbles: true}));
});
const timer = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(timer));
const root = html`<div>Seconds passed: ${count}</div>`;
return Object.defineProperty(root, 'value', {get: count});
});
}
viewof time = timer({invalidation})
time
function number({
value = 0,
min = -Infinity,
max = Infinity,
invalidation: invalidated = invalidation
} = {}) {
const {html, createRoot, createEffect, createSignal} = S;
return createRoot(dispose => {
invalidated.then(dispose);
const [count, setCount] = createSignal(value);
createEffect(() => {
count(), root.dispatchEvent(new Event('input', {bubbles: true}));
});
const root = html`<div>
<button onClick=${() => setCount(Math.max(min, count() - 1))}>-</button>
<output style="font: 13px var(--sans-serif); padding: 0 .5em">${count}</output>
<button onClick=${() => setCount(Math.min(max, count() + 1))}>+</button>`;
return Object.defineProperty(root, 'value', {get: count});
});
}
viewof count = number({min: 0, max: 10, invalidation})
count
function list({value: initialValue = [], invalidation: invalidated = invalidation} = {}) {
const {html, createRoot, createEffect, createSignal, Index, For} = S;
return createRoot(dispose => {
invalidated.then(dispose);
const Item = (props) => html`<li style="margin-bottom:.5em">
<input type="text" value="${props.value}" />
<button title="Remove" onClick=${() => setItems(items().filter(d => d !== props))} style="margin-left:.5em">x</button>
`;
const [items, setItems] = createSignal(initialValue.map(d => ({value: d})));
let value;
createEffect(() => {
value = items().slice();
});
const addItem = () => {
console.log('add item', items());
setItems(items => [...items, {value: `item`}]);
}
const root = html`<ul>
<${For} each=${items}>
${(props, i) => html`<${console.log('item', i()), Item} value=${props.value}>`}
</>
<hr style="margin: 0">
<button onClick=${() => {
addItem();
root.dispatchEvent(new Event('input', {bubbles: true}));
}}>Add item</button>
</ul>`;
return Object.defineProperty(root, 'value', {get: () => items()});
});
}
viewof myList = list({value: ["foo", "bar"], invalidation})
myList
S = Object.freeze({
...solid_core,
...solid_web,
html: solid_html
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
