kosich/react-rxjs-elements

React component for RxJS content

🔭 my projects:

• NoCode
  My WIP nocode startup

• RecksJS
  <div>{ ajax.getJSON(URL) }</div>
  JSX + RxJS Framework

• <$> elements for React
  <$div>{ ajax.getJSON(URL) }</$div>
  React elements with RxJS content / params

• ThinkRx.io
  ---o--o-oo-o----
  Instant time-accurate RxJS marble diagrams

• Framd.cc
  🙂 😁 😆
  Funny Emoji animations

📖 my articles:

• "Rx+JSX experiment: Recks framework" 🐶
  Serie of posts reviewing Recks features — Observables inside JSX
  <div>{ timer(0, 100) }</div>

• "Fetching Data in React with RxJS and <$> fragment"
  React with RxJS.fromFetch and <$> JSX helper

• "Text to GIF animation — React Pet Project Devlog"
  React, RxJS, Canvas & Text-to-Speech

• "RegExp syntax for Observables: Never Been Easier!"
  Use regexp-like syntax to query observables. EXPERIMENT

• "Error handling in RxJS"
  Learn how to deal with errors and retry failed requests

• "Pausable Observables in RxJS"
  Create a push back force in your streams

• "RxJS debounce vs throttle vs audit vs sample"
  Difference You Should Know

react-rxjs-elements's Issues

Better TypeScript support

Ensure that prebuilt $elements and createElement$ fn generate well typed components

// $img = (props: { src: Observable<string> | string }) : JSX
<$img src={stream$} />

React Suspense support

Enable Suspense for SSR

Something like

const App = () => {
  // $Suspense is a reactive element
  <$Suspense fallback={ <span>loading...</span> }>
    { stream$ }
  </$Suspense>
}

--

TODO: Consider approach suggested by @joshribakoff in #4 (comment) with BehaviorSubject

React Concurrent support — how to test it?

the v0.0.4 uses useMemo that seem to be incompatible with react concurrent mode

v0.0.5 switches back to useEffects.

Question: how to test concurrent mode compatibility in specs?

Effects and memoization

Ideally subscription should happen in commit phase not render phase, subscribing to an observable is like creating a promise in the sense it’s a side effect, it shouldn’t happen in render phase, where react may render numerous times before committing