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
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.