react-rx 1.0.0-beta.3 → 1.0.0

package/website/src/examples/form-data/FormDataExample.jsx

@@ -0,0 +1,119 @@
+import {
+  concat,
+  concatMap,
+  map,
+  merge,
+  React,
+  ReactDOM,
+  rxComponent,
+  scan,
+  startWith,
+  tap,
+  timer,
+  handler
+} from 'examples/_utils/globalScope'
+
+import storage from './storage'
+import styled from 'styled-components'
+//@endimport
+
+const {withLatestFrom} = operators
+
+const STORAGE_KEY = '__form-submit-example__'
+
+const save = formData =>
+  timer(100 + Math.round(Math.random() * 1000)).pipe(
+    concatMap(() => storage.set(STORAGE_KEY, formData))
+  )
+
+const INITIAL_PROPS = {
+  submitState: {status: 'unsaved', result: null},
+  formData: {}
+}
+
+const INITIAL_SUBMIT_STATE = {status: 'saving', result: null}
+
+const FormDataExample = rxComponent(() => {
+  const [onChange$, onChange] = handler()
+  const [onSubmit$, onSubmit] = handler()
+
+  const formData$ = concat(
+    storage.get(STORAGE_KEY, {title: '', description: ''}),
+    onChange$.pipe(
+      map(event => event.target),
+      map(target => ({
+        [target.name]: target.value
+      }))
+    )
+  ).pipe(scan((formData, update) => ({...formData, ...update}), {}))
+
+  const submitState$ = onSubmit$.pipe(
+    tap(event => event.preventDefault()),
+    withLatestFrom(formData$),
+    map(([event, formData]) => formData),
+    concatMap(formData =>
+      save(formData).pipe(
+        map(res => ({status: 'saved', result: res})),
+        startWith(INITIAL_SUBMIT_STATE)
+      )
+    )
+  )
+
+  return merge(
+    formData$.pipe(map(formData => ({formData}))),
+    submitState$.pipe(map(submitState => ({submitState})))
+  ).pipe(
+    scan((prev, curr) => ({...prev, ...curr}), INITIAL_PROPS),
+    map(props => (
+      <Form onSubmit={onSubmit}>
+        <div>
+          <label>
+            <strong>Title: </strong>
+            <input
+              type="text"
+              name="title"
+              value={props.formData.title}
+              onChange={onChange}
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            <strong>Description: </strong>
+            <textarea
+              name="description"
+              value={props.formData.description}
+              onChange={onChange}
+            />
+          </label>
+        </div>
+        <div>
+          <button disabled={props.submitState.status === 'saving'}>
+            {props.submitState.status === 'saving'
+              ? 'Saving…'
+              : props.submitState.status === 'saved'
+              ? 'Saved!'
+              : 'Save'}
+          </button>
+        </div>
+      </Form>
+    ))
+  )
+})
+
+ReactDOM.render(
+  <FormDataExample />,
+  document.getElementById('formdata-example')
+)
+
+const Form = styled.form`
+  label {
+    display: block;
+    margin-top: 10px;
+  }
+  input,
+  textarea {
+    width: 100%;
+    padding: 5px;
+  }
+`

package/website/src/examples/form-data/index.tsx

@@ -0,0 +1,12 @@
+import {Example} from '../../pages/Examples/Examples'
+import storage from './storage'
+import styled from 'styled-components'
+
+const fs = require('fs')
+
+export const FormDataExample: Example = {
+  id: 'form-data',
+  title: 'Form data',
+  scope: {storage, styled},
+  source: fs.readFileSync(`${__dirname}/FormDataExample.jsx`, 'utf-8')
+}

package/website/src/examples/form-data/storage.ts

@@ -0,0 +1,27 @@
+import {Observable, of} from 'rxjs'
+
+const tryParse = <T>(val: any, defaultValue: T): T => {
+  try {
+    return JSON.parse(val)
+  } catch (err) {
+    return defaultValue
+  }
+}
+
+const get = <T>(key: string, defValue: T): Observable<T> => {
+  const val = localStorage.getItem(key)
+  return of(val === null ? defValue : tryParse<T>(val, defValue))
+}
+
+const set = <T>(key: string, nextValue: T): Observable<T> => {
+  // Can't stringify undefined, and nulls are what
+  // `getItem` returns when key does not exist
+  if (typeof nextValue === 'undefined' || nextValue === null) {
+    localStorage.removeItem(key)
+  } else {
+    localStorage.setItem(key, JSON.stringify(nextValue))
+  }
+  return of(nextValue)
+}
+
+export default {get, set}

package/website/src/examples/forward-ref/ForwardRefExample.tsx

@@ -0,0 +1,55 @@
+import {
+  forwardRef,
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  state
+} from '../_utils/globalScope'
+//@endimport
+
+const CustomInput = forwardRef((props$, ref) => {
+  return props$.pipe(
+    map((props) => (
+      <input
+        ref={ref}
+        type="text"
+        value={props.value}
+        onChange={props.onChange}
+      />
+    ))
+  )
+})
+
+const ForwardRefExample = rxComponent(() => {
+  const [value$, setValue] = state('hello world')
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  return value$.pipe(
+    map((value) => (
+      <>
+        <button
+          onClick={() => {
+            inputRef.current?.select()
+          }}
+        >
+          Select text in input
+        </button>
+        <div>
+          <CustomInput
+            ref={inputRef}
+            value={value}
+            onChange={() => {
+              setValue(inputRef.current?.value || '')
+            }}
+          />
+        </div>
+      </>
+    ))
+  )
+})
+
+ReactDOM.render(
+  <ForwardRefExample />,
+  document.getElementById('forward-ref-example')
+)

package/website/src/examples/forward-ref/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const ForwardRefExample: Example = {
+  id: 'forward-ref',
+  title: 'Forward Ref',
+  source: fs.readFileSync(`${__dirname}/ForwardRefExample.tsx`, 'utf-8')
+}

package/website/src/examples/hello-world/HelloWorld.example.jsx

@@ -0,0 +1,6 @@
+import {of, React, ReactDOM, rxComponent} from '../_utils/globalScope'
+//@endimport
+
+const HelloWorld = rxComponent(of(<div>Hello World!</div>))
+
+ReactDOM.render(<HelloWorld />, document.getElementById('hello-world-example'))

package/website/src/examples/hello-world/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const HelloWorldExample: Example = {
+  id: 'hello-world',
+  title: 'A simple component',
+  source: fs.readFileSync(`${__dirname}/HelloWorld.example.jsx`, 'utf-8')
+}

package/website/src/examples/hooks-interop/HooksInterop.example.tsx

@@ -0,0 +1,42 @@
+import {
+  forwardRef,
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  useAsObservable
+} from '../_utils/globalScope'
+import {combineLatest, timer} from 'rxjs'
+//@endimport
+
+const ticks$ = timer(0, 1000)
+
+function useClickCounter(): [number, () => void] {
+  const [clickCount, setClickCount] = React.useState(0)
+  const inc = React.useCallback(() => setClickCount((c) => c + 1), [])
+
+  return [clickCount, inc]
+}
+
+const HooksInteropExample = rxComponent(() => {
+  const [clickCount, inc] = useClickCounter()
+
+  // This is required in order to turn clickCount into an observable value
+  const click$ = useAsObservable(clickCount)
+
+  return combineLatest([click$, ticks$]).pipe(
+    map(([clickCount, tickNumber]) => (
+      <>
+        Tick: {tickNumber}
+        <button onClick={inc}>
+          This button has been clicked {clickCount} times
+        </button>
+      </>
+    ))
+  )
+})
+
+ReactDOM.render(
+  <HooksInteropExample />,
+  document.getElementById('forward-ref-example')
+)

package/website/src/examples/hooks-interop/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const HooksInteropExample: Example = {
+  id: 'hooks-interop',
+  title: 'React hooks interop',
+  source: fs.readFileSync(`${__dirname}/HooksInterop.example.tsx`, 'utf-8')
+}

package/website/src/examples/passthrough-props/PassThroughPropsExample.jsx

@@ -0,0 +1,57 @@
+import {
+  combineLatest,
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  take,
+  timer
+} from '../_utils/globalScope'
+import {formatDistance} from 'date-fns'
+//@endimport
+
+const {share} = operators
+
+const UPDATE_INTERVAL = 1000
+const currentTime$ = timer(0, UPDATE_INTERVAL).pipe(
+  take(10),
+  map(() => new Date()),
+  share()
+)
+
+const TimeDistance = rxComponent(props$ =>
+  combineLatest([currentTime$, props$]).pipe(
+    map(([currentTime, ownerProps]) =>
+      formatDistance(ownerProps.time, currentTime, {
+        includeSeconds: ownerProps.includeSeconds
+      })
+    )
+  )
+)
+
+const NOW = new Date()
+const PassThroughPropsExample = () => (
+  <>
+    <h2>
+      With <code>includeSeconds</code> true
+    </h2>
+    With synchronized updates
+    <p>
+      Page loaded <TimeDistance time={NOW} includeSeconds /> ago
+    </p>
+    <p>
+      Page loaded <TimeDistance time={NOW} includeSeconds /> ago
+    </p>
+    <h2>
+      Without <code>includeSeconds</code>
+    </h2>
+    <p>
+      Page loaded <TimeDistance time={NOW} /> ago
+    </p>
+  </>
+)
+
+ReactDOM.render(
+  <PassThroughPropsExample />,
+  document.getElementById('pass-through-props-example')
+)

package/website/src/examples/passthrough-props/index.tsx

@@ -0,0 +1,11 @@
+import {Example} from '../../pages/Examples/Examples'
+import {formatDistance} from 'date-fns'
+
+const fs = require('fs')
+
+export const PassThroughPropsExample: Example = {
+  id: 'pass-through-props',
+  title: 'Pass through props',
+  scope: {formatDistance},
+  source: fs.readFileSync(`${__dirname}/PassThroughPropsExample.jsx`, 'utf-8')
+}

package/website/src/examples/reactive-state/ReactiveState.example.jsx

@@ -0,0 +1,43 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  startWith,
+  switchMap,
+  timer,
+  state
+} from '../_utils/globalScope'
+//@endimport
+
+const ReactiveStateExample = rxComponent(() => {
+  const [delay$, setDelay] = state(100)
+
+  return delay$.pipe(
+    switchMap(delay =>
+      timer(500, delay).pipe(
+        map(n => `Count: ${n}`),
+        startWith('Starting counter…'),
+        map(label => (
+          <>
+            Counter interval (ms):{' '}
+            <input
+              type="range"
+              min={0}
+              max={1000}
+              step={100}
+              onChange={e => setDelay(Number(e.currentTarget.value))}
+            />
+            {delay}
+            <div>{label}</div>
+          </>
+        ))
+      )
+    )
+  )
+})
+
+ReactDOM.render(
+  <ReactiveStateExample />,
+  document.getElementById('use-state-example')
+)

package/website/src/examples/reactive-state/index.ts

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

package/website/src/examples/readme-examples/index.ts

@@ -0,0 +1,11 @@
+import ReadmeExamples from './README.mdx'
+
+const fs = require('fs')
+
+export default {
+  name: 'readme-examples',
+  component: ReadmeExamples,
+  title: 'Readme examples',
+  type: 'mixed',
+  source: fs.readFileSync(`${__dirname}/ReadmeExamples.tsx`, 'utf-8')
+}

package/website/src/examples/shared-state/SharedState.example.tsx

@@ -0,0 +1,59 @@
+import {
+  map,
+  of,
+  React,
+  ReactDOM,
+  rxComponent,
+  scan
+} from '../_utils/globalScope'
+
+import {observableCallback} from 'observable-callback'
+import {CSSProperties} from 'react'
+//@endimport
+
+const CONTAINER: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  position: 'relative',
+  height: 200,
+  width: 200,
+  textAlign: 'center'
+}
+
+const BADGE: CSSProperties = {
+  borderRadius: 26,
+  backgroundColor: 'red',
+  padding: 4,
+  height: 26,
+  width: 26
+}
+
+const [clicks$, click] = observableCallback()
+const clickCount$ = clicks$.pipe(scan((count) => count + 1, 0))
+
+const ClickCountBadge = rxComponent(
+  clickCount$.pipe(map((clicks) => <span style={BADGE}>{clicks}</span>))
+)
+
+const Clicker = rxComponent(of(<button onClick={click}>CLICK ME!</button>))
+
+const Example = (
+  <div style={CONTAINER}>
+    <div style={{position: 'absolute', top: 0, left: 0}}>
+      <ClickCountBadge />
+    </div>
+    <div style={{position: 'absolute', top: 0, right: 0}}>
+      <ClickCountBadge />
+    </div>
+    <div style={{width: '100%'}}>
+      <Clicker />
+    </div>
+    <div style={{position: 'absolute', bottom: 0, left: 0}}>
+      <ClickCountBadge />
+    </div>
+    <div style={{position: 'absolute', bottom: 0, right: 0}}>
+      <ClickCountBadge />
+    </div>
+  </div>
+)
+ReactDOM.render(Example, document.getElementById('shared-state-example'))

package/website/src/examples/shared-state/index.tsx

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const SharedStateExample: Example = {
+  id: 'shared-state',
+  title: 'Sharing state',
+  source: fs.readFileSync(`${__dirname}/SharedState.example.tsx`, 'utf-8')
+}

package/website/src/examples/simple/Counter.example.tsx

@@ -0,0 +1,14 @@
+import {
+  map,
+  React,
+  ReactDOM,
+  rxComponent,
+  timer
+} from '../_utils/globalScope'
+//@endimport
+
+const Counter = rxComponent(
+  timer(0, 1000).pipe(map(seconds => <>Seconds: {seconds}</>))
+)
+
+ReactDOM.render(<Counter />, document.getElementById('counter-example'))

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

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+const fs = require('fs')
+
+export const SimpleExample: Example = {
+  id: 'stateful-component',
+  title: 'A stateful component',
+  source: fs.readFileSync(`${__dirname}/Counter.example.tsx`, 'utf-8')
+}

package/website/src/examples/sync/Sync.example.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import {from, ReactDOM, rxComponent} from '../_utils/globalScope'
+//@endimport
+
+const Sync = rxComponent(
+  from(['This', 'will', 'only', 'render', 'once!'])
+)
+
+ReactDOM.render(<Sync />, document.getElementById('counter-example'))

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

@@ -0,0 +1,9 @@
+import {Example} from '../../pages/Examples/Examples'
+
+import {readFileSync} from 'fs'
+
+export const SyncExample: Example = {
+  id: 'sync-render',
+  title: 'Sync rendering',
+  source: readFileSync(`${__dirname}/Sync.example.tsx`, 'utf-8')
+}

package/website/src/examples/tick/TickExample.jsx

@@ -0,0 +1,51 @@
+import {
+  map,
+  mapTo,
+  React,
+  ReactDOM,
+  rxComponent,
+  startWith,
+  switchMap,
+  timer
+} from '../_utils/globalScope'
+//@endimport
+
+const {distinctUntilChanged, sampleTime} = operators
+
+const Ticker = rxComponent(props$ =>
+  props$.pipe(
+    map(props => props.tick),
+    distinctUntilChanged(),
+    switchMap(tick => timer(300).pipe(mapTo(tick))),
+    startWith(0),
+    map(tick => `Delayed tick: ${tick}`)
+  )
+)
+
+const TickerWithSubTick = rxComponent(props$ =>
+  props$.pipe(
+    map(props => props.tick),
+    distinctUntilChanged(),
+    switchMap(tick => timer(0, 10).pipe(map(subtick => ({tick, subtick})))),
+    sampleTime(20),
+    map(props => (
+      <div>
+        {props.tick}:{props.subtick}
+      </div>
+    ))
+  )
+)
+
+const TickExample = rxComponent(
+  timer(0, 1000).pipe(
+    map(tick => (
+      <>
+        <div>Tick: {tick}</div>
+        <Ticker tick={tick} />
+        <TickerWithSubTick tick={tick} />
+      </>
+    ))
+  )
+)
+
+ReactDOM.render(<TickExample />, document.getElementById('ticker-example'))

package/website/src/examples/tick/index.ts

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