I have a PhD in geography and I am a spatial data enthusiast. I encourage map making and fractal analysis to explain the world.
render(() => jsx`<p>Hello, world!</p>`)
viewof exampleText = render(({ useSetter }) => {
const [value, setValue] = useState("");
useSetter(value);
return jsx`
<${ExampleCounter} number=${exampleCount} />
<input
type="text"
placeholder="Enter some text..."
value=${value}
onChange=${useCallback(event => setValue(event.target.value), [setValue])}
/>
`;
})
exampleText
ExampleCounter = component(
({ number }) => jsx`
<p>
<strong>${number}</strong>${' '}
second${number === 1 ? ' has' : 's have'} elapsed
<br />
</p>
`
)
render = (render, keyOrElement) =>
__SECRET_INTERNALS('elements', String(render), keyOrElement, {
init: state => ({
renderer: () => state.render(state.public),
id: __SECRET_CREATE_ID(),
element: DOM.element('div'),
public: {
useSetter: (setterOrValue, deps) =>
typeof setterOrValue === 'function'
? useEffect(
() =>
state.public.setValue(setterOrValue(state.public.getValue())),
deps
)
: useEffect(() => state.public.setValue(setterOrValue), [
setterOrValue
]),
getValue: () => state.element.value,
setValue: value => {
state.element.value = value;
state.element.dispatchEvent(new CustomEvent('input'));
}
}
}),
update: { render },
effect: state =>
ReactDOM.render(createElement(state.renderer), state.element),
return: state => state.element
})
component = (render, name, keyOrPrevious) =>
__SECRET_INTERNALS('components', String(render), keyOrPrevious, {
init: (state, funcFor) => ({
component: __SECRET_SET_DISPLAYNAME(funcFor('render'), name)
}),
update: { render },
return: state => state.component
})
jsx = {
const jsx = htm.bind(createElement);
return (...args) => {
try {
return jsx(...args);
} catch (e) {
// throw a clearer error
let stack = e.stack;
if (!stack.includes(e.message)) {
stack = `${e.constructor.name}: ${e.message}\n${stack}`;
}
throw new SyntaxError('JSX syntax error\n' + stack);
}
};
}
memo = (render, arePropsEqual, name, keyOrElement) =>
__SECRET_INTERNALS(
'memos',
JSON.stringify([String(render), String(arePropsEqual)]),
keyOrElement,
{
init: (state, funcFor) => ({
component: React.memo(
__SECRET_SET_DISPLAYNAME(funcFor('render'), name),
funcFor('arePropsEqual')
)
}),
update: { render, arePropsEqual },
return: state => state.component
}
)
forwardRef = (render, name, keyOrElement) =>
__SECRET_INTERNALS('forwardRefs', String(render), keyOrElement, {
init: (state, funcFor) => ({
component: React.forwardRef(
__SECRET_SET_DISPLAYNAME(funcFor('render'), name)
)
}),
update: { render },
return: state => state.component
})
htm = require('htm@2.2.1/dist/htm.umd.js')
exampleObject
viewof exampleObject = render(({ useSetter }) => {
const [message, setMessage] = useState('Hello, form!');
const [hue, setHue] = useState(180);
const [size, setSize] = useState(24);
useSetter({ message, hue, size });
return jsx`<form>
<div>
<label>
<input type=text value=${message} onChange=${e =>
setMessage(e.target.value)} />
${' '}<i>message</i>
</label>
</div>
<div>
<label>
<input type=range min=0 max=360 value=${hue} onChange=${e =>
setHue(e.target.valueAsNumber)} />
${' '}<i style=${{ color: `hsl(${hue}deg, 100%, 30%)` }}>hue</i>
</label>
</div>
<div>
<${ExampleRadio} label="small" value=${12} setValue=${setSize} current=${size} />${' '}
<${ExampleRadio} label="medium" value=${24} setValue=${setSize} current=${size} />${' '}
<${ExampleRadio} label="large" value=${48} setValue=${setSize} current=${size} />
</div>
</form>`;
})
ExampleRadio = component(
({ label, value, setValue, current }) => jsx`
<label>
<input
type="radio"
checked=${current === value}
onChange=${() => setValue(value)}
/>
${' '}<i>${label}</i>
</label>
`
)
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.
