/** * @jsx createElement */ import React from "react"; import ReactDOM from "react-dom"; import { createElement, map, combine } from "./view"; import { state, value, watch } from "./reactivity"; import { interval } from "./hooks"; import { mapx, take, filter, pipe, scan } from "./rx"; const TodoInput = ({ todos }) => { let text = value(""); let handleChange = ({ target }) => { text.value = target.value; }; let handleAdd = () => { if (!text.value) { return alert("please input some todo content"); } let value = text.value; text.value = ""; todos.push({ id: Date.now(), content: value, completed: false }); }; return (

); }; const Todos = ({ todos = [] }) => { let handleRemove = ({ currentTarget }) => { let id = Number(currentTarget.getAttribute("id")); let index = todos.findIndex(item => item.id === id); todos.splice(index, 1); }; return (

{map(todos, todo => { return ; })}

); }; const Todo = ({ todo, onRemove }) => { let handleChange = event => { let { target } = event; if (!target.value) return onRemove(event); todo.content = target.value; }; return (

); }; const Status = ({ todo }) => { let handleToggle = () => { todo.completed = !todo.completed; }; return ( ); }; const TodoApp = () => { let todos = state([]); return ( <>

Todo App

); }; const Counter = ({ title }) => { let tick = pipe( interval(100), filter(n => n % 2), take(10), scan((list, item) => [...list, item], []), mapx(ns => `tick ${ns}`) ); let count = value(0); let handleIncre = () => (count.value += 1); let handleDecre = () => (count.value -= 1); return (

{title}

{count} {tick}

); }; const App = () => { return ( <> ); }; const raf = f => { let qid; let callback = (...args) => { cancelAnimationFrame(qid); qid = requestAnimationFrame(() => f(...args)); }; return callback; }; watch( , raf(app => { console.log("app", app); ReactDOM.render(app, document.getElementById("root")); }) );

reactive-view