react-rx 1.0.0-beta.3 → 1.0.0

package/website/src/datastores/pageTransition.ts

@@ -0,0 +1,97 @@
+import {
+  map,
+  publishReplay,
+  refCount,
+  scan,
+  skip,
+  switchMap,
+  tap
+} from 'rxjs/operators'
+import {concat, from, Observable, of} from 'rxjs'
+import * as React from 'react'
+import {page$} from './page'
+import {Page} from '../pages/pages'
+
+interface PageTransition {
+  title: string
+  isTransitioning: boolean
+  component: null | React.ComponentType<any>
+}
+
+interface TransitionStart {
+  type: 'transitionStart'
+  page: Page
+  component: null
+}
+
+interface TransitionEnd {
+  type: 'transitionEnd'
+  page: Page
+  component: React.ComponentType<any>
+}
+
+type TransitionEvent = TransitionStart | TransitionEnd
+
+interface TransitionState {
+  isTransitioning: boolean
+  prev: null | Page
+  current: null | Page
+  next: null | Page
+  component: null | React.ComponentType
+}
+
+const transitionStart = (page: Page): TransitionStart => ({
+  type: 'transitionStart',
+  page,
+  component: null
+})
+
+const transitionEnd = (page: Page) => (
+  component: React.ComponentType<any>
+): TransitionEnd => ({
+  type: 'transitionEnd',
+  page,
+  component
+})
+
+const INITIAL_TRANSITION_STATE: TransitionState = {
+  isTransitioning: true,
+  component: null,
+  next: null,
+  current: null,
+  prev: null
+}
+
+export const pageTransition$: Observable<TransitionState> = page$.pipe(
+  switchMap(page =>
+    concat(
+      of(transitionStart(page)),
+      from(page.load()).pipe(map(transitionEnd(page)))
+    )
+  ),
+  scan(
+    (
+      acc: TransitionState,
+      event: TransitionStart | TransitionEnd
+    ): TransitionState => {
+      return event.type === 'transitionStart'
+        ? {
+            isTransitioning: true,
+            component: acc.component,
+            prev: acc.next || acc.current,
+            current: acc.current || null,
+            next: event.page
+          }
+        : {
+            isTransitioning: false,
+            component: event.component,
+            current: acc.next,
+            next: null,
+            prev: acc.current
+          }
+    },
+    INITIAL_TRANSITION_STATE
+  ),
+  publishReplay(1),
+  refCount()
+)

package/website/src/entries/main.css

@@ -0,0 +1,2 @@
+@import '~codemirror/lib/codemirror.css';
+@import '../components/repl/codemirror-theme.css';

package/website/src/entries/main.tsx

@@ -0,0 +1,6 @@
+import './main.css'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import {App} from '../App'
+
+ReactDOM.render(<App />, document.getElementById('app'))

package/website/src/examples/FizzBuzz/FizzBuzzExample.tsx

@@ -0,0 +1,39 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  take,
+  timer
+} from '../_utils/globalScope'
+//@endimport
+
+const FizzBuzzExample = rxComponent(
+  timer(0, 500).pipe(
+    map(n => n + 1),
+    map(n => {
+      const divBy3 = n % 3 === 0
+      const divBy5 = n % 5 === 0
+      const divBy3And5 = divBy3 && divBy5
+      return divBy3And5
+        ? 'Fizz Buzz'
+        : divBy3
+        ? 'Fizz'
+        : divBy5
+        ? 'Buzz'
+        : String(n)
+    }),
+    // map((seq: string[], curr) => seq.concat(curr), []),
+    map((n, i) => (
+      <div key={n + i}>
+        {i + 1}: {n}
+      </div>
+    )),
+    take(100)
+  )
+)
+
+ReactDOM.render(
+  <FizzBuzzExample />,
+  document.getElementById('fizz-buzz-example')
+)

package/website/src/examples/FizzBuzz/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const FizzBuzzExample: Example = {
+  id: 'fizz-buzz',
+  title: 'Fizz Buzz',
+  source: fs.readFileSync(`${__dirname}/FizzBuzzExample.tsx`, 'utf-8')
+}

package/website/src/examples/_utils/globalScope.ts

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import * as RxJS from 'rxjs'
+import * as operators from 'rxjs/operators'
+
+const {of, from, concat, merge} = RxJS
+const {timer, interval, throwError, combineLatest, Observable} = RxJS
+
+const {map, filter, reduce, scan, tap} = operators
+const {concatMap, mergeMap, switchMap, mapTo} = operators
+const {startWith, catchError, take} = operators
+//@endimport
+
+export {of, from, timer, interval, concat, merge, throwError, combineLatest, Observable}
+export {
+  map,
+  filter,
+  reduce,
+  scan,
+  concatMap,
+  tap,
+  mapTo,
+  mergeMap,
+  startWith,
+  take,
+  switchMap,
+  catchError
+}
+
+export {React, ReactDOM}
+export {RxJS, operators}
+
+export {
+  useObservable,
+  useMemoObservable,
+  rxComponent,
+  context,
+  handler,
+  state,
+  elementRef,
+  forwardRef,
+  useAsObservable
+} from 'react-rx'
+
+export {observableCallback} from 'observable-callback'

package/website/src/examples/animation/AnimationExample.tsx

@@ -0,0 +1,152 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  switchMap,
+  timer,
+  state
+} from '../_utils/globalScope'
+import styled from 'styled-components'
+import bezier from 'bezier-easing'
+//@endimport
+
+const BALL_SIZE = 30
+const BOX_SIZE = 300
+
+const MAX_TOP = BOX_SIZE - BALL_SIZE
+
+function easeCustom(n: number) {
+  // implement your own easing function here by returning a number in the range of [0, 1]
+  return n
+}
+
+type EasingName = keyof typeof EASINGS
+
+const AnimationExample = rxComponent(() => {
+  const [easing$, setEasing] = state<EasingName>('easeCustom')
+  return easing$.pipe(
+    switchMap((easing: EasingName) =>
+      timer(0, 16).pipe(
+        map((n) => (n % MAX_TOP) * 2),
+        map((n) => (n > MAX_TOP ? MAX_TOP * 2 - n : n)),
+        map((linearTop): [number, EasingName] => [
+          EASINGS[easing](linearTop / MAX_TOP) * MAX_TOP,
+          easing
+        ])
+      )
+    ),
+    map(([top, currentEasing]) => (
+      <>
+        <BoxWrapper>
+          <Box>
+            <Ball style={{top}} />
+          </Box>
+        </BoxWrapper>
+        <SelectWrapperLabel>Easing function:</SelectWrapperLabel>
+        <SelectWrapper>
+          {Object.keys(EASINGS).map((easingName) => (
+            <label key={easingName} className={easingName === currentEasing ? 'selected' : ''}>
+              <input
+                tabIndex={0}
+                type="checkbox"
+                checked={easingName === currentEasing}
+                key={easingName}
+                onChange={() => setEasing(easingName as EasingName)}
+              />
+              {easingName.substring(4)}
+            </label>
+          ))}
+        </SelectWrapper>
+      </>
+    ))
+  )
+})
+
+ReactDOM.render(
+  <AnimationExample />,
+  document.getElementById('animation-example')
+)
+
+// --- easing definitions and stylings
+const EASINGS = {
+  easeCustom: easeCustom,
+  easeInSine: bezier(0.47, 0, 0.745, 0.715),
+  easeOutSine: bezier(0.39, 0.575, 0.565, 1),
+  easeInOutSine: bezier(0.445, 0.05, 0.55, 0.95),
+  easeInQuad: bezier(0.55, 0.085, 0.68, 0.53),
+  easeOutQuad: bezier(0.25, 0.46, 0.45, 0.94),
+  easeInOutQuad: bezier(0.455, 0.03, 0.515, 0.955),
+  easeInCubic: bezier(0.55, 0.055, 0.675, 0.19),
+  easeOutCubic: bezier(0.215, 0.61, 0.355, 1),
+  easeInOutCubic: bezier(0.645, 0.045, 0.355, 1),
+  easeInQuart: bezier(0.895, 0.03, 0.685, 0.22),
+  easeOutQuart: bezier(0.165, 0.84, 0.44, 1),
+  easeInOutQuart: bezier(0.77, 0, 0.175, 1),
+  easeInQuint: bezier(0.755, 0.05, 0.855, 0.06),
+  easeOutQuint: bezier(0.23, 1, 0.32, 1),
+  easeInOutQuint: bezier(0.86, 0, 0.07, 1),
+  easeInExpo: bezier(0.95, 0.05, 0.795, 0.035),
+  easeOutExpo: bezier(0.19, 1, 0.22, 1),
+  easeInOutExpo: bezier(1, 0, 0, 1),
+  easeInCirc: bezier(0.6, 0.04, 0.98, 0.335),
+  easeOutCirc: bezier(0.075, 0.82, 0.165, 1),
+  easeInOutCirc: bezier(0.785, 0.135, 0.15, 0.86),
+  easeInBack: bezier(0.6, -0.28, 0.735, 0.045),
+  easeOutBack: bezier(0.175, 0.885, 0.32, 1.275),
+  easeInOutBack: bezier(0.68, -0.55, 0.265, 1.55),
+  easeLinear: (n: number) => n
+}
+
+const BoxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+const Box = styled.div`
+  position: relative;
+  border: 1px solid #555;
+  height: ${BOX_SIZE}px;
+  width: ${BOX_SIZE}px;
+`
+
+const Ball = styled.div`
+  position: absolute;
+  border-radius: 100%;
+  background-color: #901a3b;
+  width: ${BALL_SIZE}px;
+  height: ${BALL_SIZE}px;
+  left: ${BOX_SIZE / 2 - BALL_SIZE / 2}px;
+`
+
+const SelectWrapperLabel = styled.h2`
+  margin-top: 2em;
+  font-size: 0.8em;
+`
+
+const SelectWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  input[type='checkbox'] {
+    opacity: 0;
+    position: absolute;
+    height: 1px;
+    width: 1px;
+  }
+  font-size: 90%;
+  label {
+    border-radius: 3px;
+    padding: 0 2px;
+    margin: 0 2px;
+  }
+  label:focus-within {
+    color: #333;
+    background-color: #ccc;
+  }
+  label.selected {
+    background-color: #5588ee;
+    color: #333;
+  }
+`

package/website/src/examples/animation/index.tsx

@@ -0,0 +1,15 @@
+import {Example} from '../../pages/Examples/Examples'
+import styled from 'styled-components'
+import bezier from 'bezier-easing'
+
+const fs = require('fs')
+
+export const AnimationExample: Example = {
+  id: 'animation',
+  title: 'Animation',
+  prelude: `import styled from 'styled-components'
+import bezier from 'bezier-easing'
+`,
+  scope: {bezier, styled},
+  source: fs.readFileSync(`${__dirname}/AnimationExample.tsx`, 'utf-8')
+}

package/website/src/examples/context/Context.example.jsx

@@ -0,0 +1,67 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  context,
+  state
+} from '../_utils/globalScope'
+import { tap } from "rxjs/operators";
+//@endimport
+
+const ModeContext = React.createContext({
+  current: 'light',
+  set: (nextMode) => {}
+})
+
+const observeMode = () => context(ModeContext).pipe(map(({current}) => current))
+
+const LIGHT = {backgroundColor: '#eee', color: '#333'}
+const DARK = {backgroundColor: '#222', color: '#eee'}
+
+const MODE = {light: LIGHT, dark: DARK}
+
+const ModeSwitch = rxComponent(() => {
+  const modeCtx$ = context(ModeContext)
+
+  return modeCtx$.pipe(
+    map(({current, set}) => {
+      const next = current === 'light' ? 'dark' : 'light'
+      return (
+        <button onClick={() => set(next)} style={MODE[current]}>
+          Change to {next}
+        </button>
+      )
+    })
+  )
+})
+
+const App = rxComponent(() => {
+  const mode$ = observeMode()
+
+  return mode$.pipe(
+    tap(console.log),
+    map((mode) => (
+      <div style={{...MODE[mode], padding: '1em'}}>
+        <h2>Using {mode} mode</h2>
+        <ModeSwitch />
+      </div>
+    ))
+  )
+})
+
+const ContextExample = rxComponent(() => {
+  const [mode$, setMode] = state('light')
+
+  return mode$.pipe(
+    map((mode) => (
+      <>
+        <ModeContext.Provider value={{current: mode, set: setMode}}>
+          <App />
+        </ModeContext.Provider>
+      </>
+    ))
+  )
+})
+
+ReactDOM.render(<ContextExample />, document.getElementById('context-example'))

package/website/src/examples/context/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const ContextExample: Example = {
+  id: 'react-context',
+  title: 'React context',
+  source: fs.readFileSync(`${__dirname}/Context.example.jsx`, 'utf-8')
+}

package/website/src/examples/errors/Errors.example.jsx

@@ -0,0 +1,69 @@
+import {
+  catchError,
+  concat,
+  map,
+  merge,
+  of,
+  operators,
+  React,
+  ReactDOM,
+  rxComponent,
+  take,
+  throwError,
+  timer,
+  handler
+} from '../_utils/globalScope'
+//@endimport
+
+const {mergeMapTo, switchMapTo} = operators
+
+const timer$ = timer(0, 1000)
+
+const ErrorsExample = rxComponent(() => {
+  const [onRetry$, onRetry] = handler()
+  const [onError$, onError] = handler()
+
+  const errors$ = onError$.pipe(
+    mergeMapTo(throwError(new Error("You clicked the button, didn't you!?")))
+  )
+
+  return merge(timer$, errors$).pipe(
+    map(n => ({number: n})),
+    catchError((error, caught$) => {
+      return merge(
+        of({error}),
+        onRetry$.pipe(
+          take(1),
+          switchMapTo(concat(of({error, retrying: true}), caught$))
+        )
+      )
+    }),
+    map(props => (
+      <div>
+        {props.error ? (
+          props.retrying ? (
+            <>Trying again…</>
+          ) : (
+            <>
+              <div style={{color: 'crimson'}}>
+                Oh no! An error occurred:
+                <br />
+                {props.error.message}
+              </div>
+              <button onClick={onRetry}>Try again</button>
+            </>
+          )
+        ) : (
+          <>
+            <div>You did not click the button for: {props.number}s</div>
+            <button type="button" onClick={onError}>
+              DO NOT CLICK THE BUTTON
+            </button>
+          </>
+        )}
+      </div>
+    ))
+  )
+})
+
+ReactDOM.render(<ErrorsExample />, document.getElementById('errors-example'))

package/website/src/examples/errors/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const ErrorsExample: Example = {
+  id: 'errors',
+  title: 'Errors',
+  source: fs.readFileSync(`${__dirname}/Errors.example.jsx`, 'utf-8')
+}

package/website/src/examples/event-handlers/EventHandlersExample.tsx

@@ -0,0 +1,48 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  startWith,
+  handler
+} from '../_utils/globalScope'
+//@endimport
+
+const STYLE: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  textAlign: 'center',
+  height: 150,
+  width: 150,
+  border: '1px dashed',
+  padding: '1em'
+}
+
+const EventHandlersExample = rxComponent(() => {
+  const [mouseMoves$, onMouseMove] = handler<React.MouseEvent>()
+
+  const mousePosition$ = mouseMoves$.pipe(
+    map(event => ({x: event.clientX, y: event.clientY})),
+    startWith(null)
+  )
+  return mousePosition$.pipe(
+    map(position => (
+      <div style={STYLE} onMouseMove={onMouseMove}>
+        <div style={{width: '100%'}}>
+          {position ? (
+            <>
+              Cursor position: X:{position.x}, Y: {position.y}
+            </>
+          ) : (
+            <>Move mouse here</>
+          )}
+        </div>
+      </div>
+    ))
+  )
+})
+
+ReactDOM.render(
+  <EventHandlersExample />,
+  document.getElementById('event-handlers-example')
+)

package/website/src/examples/event-handlers/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const EventHandlersExample: Example = {
+  id: 'event-handlers',
+  title: 'Event handlers',
+  source: fs.readFileSync(`${__dirname}/EventHandlersExample.tsx`, 'utf-8')
+}

package/website/src/examples/fetch/FetchExample.jsx

@@ -0,0 +1,43 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  switchMap
+} from '../_utils/globalScope'
+//@endimport
+
+const {distinctUntilChanged} = operators
+
+const FetchComponent = rxComponent(props$ =>
+  props$.pipe(
+    map(props => props.url),
+    distinctUntilChanged(),
+    switchMap(url => fetch(url).then(response => response.text())),
+    map(responseText => <div>The result was: {responseText}</div>)
+  )
+)
+
+const URLS = ['/fetch/a.txt', '/fetch/b.txt']
+
+function FetchExample() {
+  const [currentUrl, setCurrentUrl] = React.useState('')
+  return (
+    <div>
+      <p>
+        {URLS.map(url => (
+          <button key={url} onClick={() => setCurrentUrl(url)}>
+            {url}
+          </button>
+        ))}
+      </p>
+      {currentUrl ? (
+        <FetchComponent url={currentUrl} />
+      ) : (
+        <>Click on url to fetch</>
+      )}
+    </div>
+  )
+}
+
+ReactDOM.render(<FetchExample />, document.getElementById('fetch-example'))

package/website/src/examples/fetch/a.txt

@@ -0,0 +1 @@
+Hello this is A

package/website/src/examples/fetch/b.txt

@@ -0,0 +1 @@
+Hello this is B

package/website/src/examples/fetch/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const FetchExample: Example = {
+  id: 'fetch',
+  title: 'Fetch',
+  source: fs.readFileSync(`${__dirname}/FetchExample.jsx`, 'utf-8')
+}