Fix approach for arithmetics and refactors factorial/fibo implementation

Author: phenax

src/App.css

@@ -1,80 +1,81 @@
-import { FC, useContext, useEffect, useRef, useState } from "react";
-import { CallElement, CallFunction, Return, IfElse } from "./program/compute";
-import { Add, Multiply, One, Two, multiplyNodes, nodeToNumber, numberToNode } from "./program/natural-numbers";
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { CallElement, CallFunction, IfElse, EvaluateAll } from './program/compute';
+import { Add, Multiply, N, One, numberToNode } from './program/natural-numbers';
 
-const Factorial: FC<any> = ({ n }) => {
-  const onReturn = useContext(Return);
-  const [count, setCount] = useState(n); // TODO: Subtraction
+const Factorial: FC<any> = React.memo(({ n }) => {
+  const [count, setCount] = useState(n);
   const [result, setResult] = useState(<One />);
 
   useEffect(() => {
-    setCount(count - 1);
-    setResult((result) => <>{multiplyNodes(numberToNode(count), result)}</>);
+    if ((window as any).PLEASE_STOP) return;
+    // TODO: Subtraction in react
+    // TODO: Fix timeout
+    setTimeout(() => setCount(count - 1), 50)
   }, [count]);
 
   return (
     <>
       Calculating factorial of {n}...
       <IfElse condition={count <= 1}>
-        <CallElement fn={<Add>{result}</Add>}>
-          {result => <CallFunction fn={() => onReturn(result)} />}
+        <Add>{result}</Add>
+        <CallElement key={count} fn={<Multiply a={result} b={numberToNode(count)} />}>
+          {product => <CallFunction fn={() => setResult(numberToNode(product))} />}
         </CallElement>
-        <></>
       </IfElse>
     </>
   );
-};
+});
 
-const Fibonacci: FC<any> = ({ n }) => {
-  const onReturn = useContext(Return);
+const Fibonacci: FC<any> = React.memo(({ n }) => {
   const [count, setCount] = useState(n);
   const prevResult = useRef(<></>);
   const [result, setResult] = useState(<One />);
 
   useEffect(() => {
-    setCount(count - 1);
-    const prev = prevResult.current;
-    prevResult.current = result;
-    setResult((result) => <>{result}{prev}</>);
+    if ((window as any).PLEASE_STOP) return;
+    setTimeout(() => setCount(count - 1), 50);
   }, [count, result]);
 
   return (
     <>
       Calculating fibonacci number {n}...
-      <IfElse condition={count <= 1}>
-        <CallElement fn={<Add>{result}</Add>}>
-          {result => <CallFunction fn={() => onReturn(result)} />}
+      <IfElse condition={count < 1}>
+        <Add>{result}</Add>
+        <CallElement key={count} fn={<Add>{prevResult.current}{result}</Add>}>
+          {sum => <CallFunction fn={() => {
+            prevResult.current = result;
+            setResult(numberToNode(sum));
+          }} />}
         </CallElement>
-        <></>
       </IfElse>
     </>
   );
-};
+});
 
 const App: FC = () => {
   return (
-    <>
+    <div>
       <div>
-        <CallElement fn={<Multiply a={<><Two /><One /></>} b={<Two />} />}>
-          {(result) => <>3 * 2 = {result}</>}
+        <CallElement fn={<Add> <N._5 /> <N._3 /> <N._4 /> </Add>}>
+          {(result) => <>5 + 3 + 4 = {result}</>}
         </CallElement>
       </div>
       <div>
-        <CallElement fn={<Add> <One /> <Two /> <Two /> </Add>}>
-          {(result) => <>1 + 2 + 2 = {result}</>}
+        <CallElement fn={<Multiply a={<><N._3 /><N._5 /></>} b={<N._3 />} />}>
+          {(result) => <>8 * 3 = {result}</>}
         </CallElement>
       </div>
       <div>
-        <CallElement fn={<Factorial n={10} />}>
-          {(result) => <>Facto: {result}</>}
+        <CallElement fn={<Factorial n={5} />}>
+          {(result) => <>Factorial(5): {result}</>}
         </CallElement>
       </div>
       <div>
-        <CallElement fn={<Fibonacci n={8} />}>
-          {(result) => <>Fibo: {result}</>}
+        <CallElement fn={<EvaluateAll fns={Array.from({ length: 10 }, (_, i) => <Fibonacci n={i} key={i} />)} />}>
+          {(result) => <>Fibo: {result.join(', ')}</>}
         </CallElement>
       </div>
-    </>
+    </div>
   );
 };
 

src/App.tsx

@@ -1,68 +1,14 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+html, body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  font: unset;
+  background-color: #f0f0f0;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+body {
+  font-size: 1.6em;
+  padding: 1rem;
+  margin: 2rem auto;
+  max-width: 800px;
+  letter-spacing: 0.1rem;
 }

src/index.css

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, Suspense, use, useMemo, useRef, ReactNode, Children, useReducer, useCallback } from 'react'
+import React, { FC, useEffect, Suspense, use, useMemo, useRef, ReactNode, Children, useReducer, useCallback, useContext } from 'react'
 
 declare module 'react' {
   export function use<T>(x: Promise<T>): T | undefined;
@@ -45,3 +45,28 @@ export const CallElement: FC<{
     </Suspense>
   )
 }
+
+export const EvaluateAll: FC<{ fns: ReactNode[] }> = ({ fns }) => {
+  const onReturn = useContext(Return);
+  const resultList = useRef<any[]>([]);
+  const resultCount = useRef(0);
+
+  const resolve = useCallback((result: any, i: number) => {
+    resultList.current[i] = result;
+    resultCount.current += 1;
+    if (resultCount.current === fns.length) {
+      onReturn(resultList.current);
+    }
+  }, [fns.length, onReturn])
+
+  return (
+    <>
+      {fns.map((fn, i) => (
+        <CallElement key={i} fn={fn}>
+          {result => <CallFunction fn={() => resolve(result, i)} />}
+        </CallElement>
+      ))}
+    </>
+  )
+}
+

src/program/compute.tsx

@@ -1,35 +1,38 @@
-import React, { FC, ReactNode, useContext, useEffect } from "react";
-import { Return } from "./compute";
-import TestRenderer from 'react-test-renderer'
-
-export const One: FC = () => <div data-type="nat" />;
-export const Two: FC = () => <><One /><One /></>;
-
-export const nodeToNumber = (node: ReactNode) => {
-  const renderer = TestRenderer.create(<>{node}</>);
-  const ones = renderer.root?.findAllByType(One);
-  return ones.length ?? 0;
+import { FC, Fragment, ReactNode, useContext, useEffect, useRef } from 'react';
+import { CallElement, Return } from './compute';
+
+export const One = () => <div data-type="nat" />;
+
+export const N = {
+  _0: () => <></>,
+  _1: () => <One />,
+  _2: () => <><One /><One /></>,
+  _3: () => <><One /><One /><One /></>,
+  _4: () => <><One /><One /><One /><One /></>,
+  _5: () => <><One /><One /><One /><One /><One /></>,
 }
 
 export const numberToNode = (n: number) => {
   const ones = Array.from({ length: n }, (_, i) => <One key={i} />);
   return <>{ones}</>;
 }
 
-export const multiplyNodes = (a: ReactNode, b: ReactNode) => {
-  const renderer = TestRenderer.create(<>{b}</>);
-  return renderer.root?.findAllByType(One).map(_ => React.cloneElement(a as any));
-}
-
 export const Add: FC<{ children?: ReactNode }> = ({ children }) => {
   const onReturn = useContext(Return);
+  const ref = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
-    onReturn(nodeToNumber(children));
+    const count = Array.from(ref.current?.querySelectorAll('[data-type="nat"]') ?? []).length;
+    onReturn(count);
   }, [children, onReturn]);
 
-  return null;
+  return <div ref={ref as any}>{children}</div>;
 }
 
-export const Multiply: FC<{ a: ReactNode, b: ReactNode }> = ({ a, b }) =>
-  <Add>{multiplyNodes(a, b)}</Add>;
+export const Multiply: FC<{ a: ReactNode, b: ReactNode }> = ({ a, b }) => {
+  return <CallElement fn={<Add>{a}</Add>}>
+    {aNum => <Add>{Array.from({ length: aNum }, (_, i) => (
+      <Fragment key={i}>{b}</Fragment>
+    ))}</Add>}
+  </CallElement>
+};