Public
Edited
Dec 15, 2023
1 star
// From https://react.dev/reference/react/useSyncExternalStore
todosStore = {
let nextId = 0;
let todos = [{ id: nextId++, text: "Vanilla JS - (1)" }];
let listeners = [];
function emitChange() {
for (let listener of listeners) {
listener();
}
}
const store = {
addTodo(todo) {
todos = [
...todos,
{ id: nextId++, text: `${todo ?? "Todo"} (${nextId})` }
];
emitChange();
},
subscribe(listener) {
listeners = [...listeners, listener];
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
getSnapshot() {
return todos;
}
};
return store;
}
TodosApp = () => {
const [text, setText] = useState("");
const todos = useSyncExternalStore(
todosStore.subscribe,
todosStore.getSnapshot
);
const handleClick = () => {
todosStore.addTodo("React - " + text);
setText("");
};
return jsx`<div>
<input value=${text} onChange=${(e) => setText(e.target.value)}/>
<button onClick=${handleClick}>Add todo</button>
<ul>
${todos.map((todo) => jsx`<li key={todo.id}>${todo.text}</li>`)}
</ul>
</div>
`;
}
viewof useSyncExternalStore = __SECRET_DOC.hook("useSyncExternalStore")
viewof useImperativeHandle = __SECRET_DOC.hook("useImperativeHandle")
viewof forwardRef = __SECRET_DOC.hook("forwardRef")
Cropper = require("cropperjs@1.6.1/dist/cropper.js")
import {
React,
ReactDOM,
jsx,
__SECRET_DOC,
render,
component,
useCallback,
useState,
ExampleCounter,
exampleCount,
useRef,
useEffect
} from "@j-f1/react"
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.
