react-rx 1.0.0 → 1.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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