Public
Edited
May 14, 2023
render(jsx`<${MyComponent} />`)
myMessage = signals.signal("Hello world!")
function MyComponent() {
const msg = useSignals(() => myMessage.value);
const updateMessage = (ev) => {
myMessage.value = ev.target.value;
};
return jsx`<div>
<div><em>${msg}</em></div>
<input onChange=${updateMessage} value=${msg} />
</div>`;
}
observeSignals(myMessage)
observeSignals(() => (myMessage.value || "").toUpperCase())
inputSignals(Inputs.text({ label: "Change signal with Inputs:" }), myMessage)
function useSignals(compute = () => {}) {
const f = typeof compute === "function" ? compute : () => compute.value;
const [value, setValue] = React.useState(f);
React.useEffect(() => signals.effect(() => setValue(f())), []);
return value;
}
async function* observeSignals(signal) {
const f = typeof signal === "function" ? signal : () => signal.value;
yield* Generators.observe((notify) => signals.effect(() => notify(f())));
}
function inputSignals(input, signal) {
const update = () => (input.value = signal.value);
const cleanup = signals.effect(update);
const listener = () => signal.value = input.value;
input.addEventListener("input", listener);
Inputs.disposal(input).then(() => {
input.removeEventListener("input", listener);
cleanup();
});
update();
return input;
}
function render(component) {
const elem = document.createElement("div");
const root = ReactDOM.createRoot(elem);
if (typeof component === "function") {
component = React.createElement(component);
}
root.render(component);
Inputs.disposal(elem).then(() => root.unmount());
return elem;
}
signals = import("@preact/signals-core")
jsx = htm.bind(React.createElement)
htm = (await import("htm")).default
React = require("react@latest/umd/react.development.js")
ReactDOM = await require.alias({
react: React
})("react-dom@latest/umd/react-dom.development.js")
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.
