react-rx 1.0.0 → 1.0.1

package/website/src/components/repl/eval/evalReactDomRender.ts

@@ -1,23 +0,0 @@
-import {evalCode} from './evalCode'
-
-export const evalReactDomRender = (code: string, scope = {}): any => {
-  let renderCount = 0
-  let renderRes = null
-
-  const callback = (arg: any) => {
-    renderCount++
-    renderRes = arg
-  }
-
-  evalCode(code, {...scope, ReactDOM: {render: callback}})
-
-  if (renderCount === 0) {
-    throw new Error(`ReactDOM.render() was never called`)
-  }
-
-  if (renderCount > 1) {
-    throw new Error(`ReactDOM.render() was called more than once`)
-  }
-
-  return renderRes
-}

package/website/src/components/repl/index.ts

@@ -1 +0,0 @@
-export {CodeBlock} from './CodeBlock'

package/website/src/components/repl/runMode.ts

@@ -1,42 +0,0 @@
-import {Mode} from 'codemirror'
-import CodeMirror from './codemirror-lib'
-import {Observable} from 'rxjs'
-
-interface Token {
-  style: string | null
-  token: string
-}
-
-export interface ModeSpec {
-  name: string
-
-  [key: string]: any
-}
-
-export function runMode(
-  source: string,
-  modespec: ModeSpec | null,
-  options?: {state?: any; tabSize: number}
-): Observable<Token[]> {
-  return new Observable(subscriber => {
-    const mode: Mode<any> = CodeMirror.getMode(CodeMirror.defaults, modespec)
-    const lines = CodeMirror.splitLines(source)
-    const state = (options && options.state) || CodeMirror.startState(mode)
-
-    for (let i = 0, e = lines.length; i < e; ++i) {
-      const tokens = []
-      const stream = new CodeMirror.StringStream(lines[i])
-      if (!stream.string && mode.blankLine) mode.blankLine(state)
-      while (!stream.eol()) {
-        const style = mode.token!(stream, state)
-        tokens.push({token: stream.current(), style})
-        stream.start = stream.pos
-      }
-      if (i !== lines.length - 1) {
-        tokens.push({token: '\n', style: null})
-      }
-      subscriber.next(tokens)
-    }
-    subscriber.complete()
-  })
-}

package/website/src/datastores/location.ts

@@ -1,14 +0,0 @@
-import {createBrowserHistory, Location} from 'history'
-import {Observable} from 'rxjs'
-import {publishReplay, refCount} from 'rxjs/operators'
-
-const history = createBrowserHistory()
-
-export const location$ = new Observable<Location>((subscriber) => {
-  subscriber.next(history.location)
-  return history.listen((update) => subscriber.next(update.location))
-}).pipe(publishReplay(1), refCount())
-
-export const navigate = (url: string) => {
-  history.push(url)
-}

package/website/src/datastores/page.ts

@@ -1,11 +0,0 @@
-import {map} from 'rxjs/operators'
-import {location$} from './location'
-import {NOT_FOUND, Page, pages} from '../pages/pages'
-import {Observable} from 'rxjs'
-
-export const page$: Observable<Page> = location$.pipe(
-  map(
-    location =>
-      pages.find(page => page.route === location.pathname) || NOT_FOUND
-  )
-)

package/website/src/datastores/pageTransition.ts

@@ -1,97 +0,0 @@
-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

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

package/website/src/entries/main.tsx

@@ -1,6 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,152 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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')
-}