react-rx 1.0.0-beta.6 → 2.0.0

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')
-}

package/website/src/examples/todo-app/TodoApp.example.tsx

@@ -1,88 +0,0 @@
-import {ChangeEvent, FormEvent} from 'react'
-import {
-  combineLatest,
-  filter,
-  map,
-  mapTo,
-  merge,
-  operators,
-  React,
-  ReactDOM,
-  rxComponent,
-  scan,
-  startWith,
-  tap,
-  handler
-} from '../_utils/globalScope'
-import styled from 'styled-components'
-//@endimport
-
-const {withLatestFrom} = operators
-
-interface TodoItem {
-  id: number
-  text: string
-}
-
-const TodoApp = rxComponent(() => {
-  const [onInput$, handleInput] = handler<ChangeEvent<HTMLInputElement>>()
-  const [onSubmit$, handleSubmit] = handler<FormEvent<HTMLFormElement>>()
-
-  const text$ = onInput$.pipe(
-    map(e => e.currentTarget.value),
-    startWith('')
-  )
-
-  const items$ = onSubmit$.pipe(
-    tap(e => e.preventDefault()),
-    withLatestFrom(text$),
-    map(([_, text]) => text),
-    filter(text => text.length > 0),
-    map(text => ({text, id: Date.now()})),
-    scan((items: TodoItem[], item) => items.concat(item), []),
-    startWith([])
-  )
-
-  const inputValue$ = merge(text$, onSubmit$.pipe(mapTo('')))
-
-  return combineLatest([inputValue$, items$]).pipe(
-    map(([text, items]) => (
-      <Wrapper>
-        <h3>TODO</h3>
-        <TodoList items={items} />
-        <form onSubmit={handleSubmit}>
-          <label htmlFor="new-todo">What needs to be done?</label>
-          <input id="new-todo" onChange={handleInput} value={text} />
-          <button>Add #{items.length + 1}</button>
-        </form>
-      </Wrapper>
-    ))
-  )
-})
-
-interface ListProps {
-  items: TodoItem[]
-}
-
-function TodoList(props: ListProps) {
-  return (
-    <ul>
-      {props.items.map(item => (
-        <li key={item.id}>{item.text}</li>
-      ))}
-    </ul>
-  )
-}
-
-ReactDOM.render(<TodoApp />, document.getElementById('todo-app-example'))
-
-const Wrapper = styled.div`
-  label {
-    display: block;
-    margin-top: 10px;
-  }
-  input {
-    width: 100%;
-    padding: 5px;
-  }
-`

package/website/src/examples/todo-app/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 TodoAppExample: Example = {
-  id: 'todo-app',
-  title: 'An Application',
-  scope: {storage, styled},
-  source: fs.readFileSync(`${__dirname}/TodoApp.example.tsx`, 'utf-8')
-}

package/website/src/examples/todo-app/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/use-element/UseElementExample.tsx

@@ -1,70 +0,0 @@
-import {
-  map,
-  elementRef,
-  operators,
-  React,
-  ReactDOM,
-  rxComponent,
-  timer
-} from '../_utils/globalScope'
-
-//@endimport
-
-const {withLatestFrom} = operators
-
-const STYLE: React.CSSProperties = {
-  textAlign: 'center',
-  border: '1px dashed'
-}
-
-const SPEED = 2
-const unpx = (v: string) => Number(v.replace(/px$/, ''))
-
-const UseElementExample = rxComponent(() => {
-  const [element$, ref] = elementRef<HTMLElement>()
-
-  const count$ = timer(0, 16).pipe(
-    map((n) => n % 400),
-    map((n) => (n > 200 ? -1 : 1))
-  )
-
-  return count$.pipe(
-    withLatestFrom(element$),
-    map(([direction, element]) => {
-      const Tag = direction === 1 ? 'section' : 'article'
-      return (
-        <div style={{height: '20em', display: 'flex', alignItems: 'center'}}>
-          <Tag
-            // this connects the element$ observable to the actual element
-            ref={ref}
-            style={{
-              ...STYLE,
-              backgroundColor: Tag == 'article' ? '#335186' : '#90441a',
-              borderRadius:
-                unpx(element?.style.borderRadius || '20px') +
-                direction * SPEED * -0.1,
-              height: (element?.clientHeight || 0) + direction * SPEED,
-              width: (element?.clientWidth || 0) + direction * SPEED
-            }}
-          >
-            <div
-              style={{
-                ...(element && {fontSize: element.clientHeight / 5}),
-                width: '100%',
-                height: '100%',
-                lineHeight: '500%'
-              }}
-            >
-              {`<${Tag}>`}
-            </div>
-          </Tag>
-        </div>
-      )
-    })
-  )
-})
-
-ReactDOM.render(
-  <UseElementExample />,
-  document.getElementById('use-element-example')
-)

package/website/src/examples/use-element/index.tsx

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

package/website/src/examples/use-observable/search/SearchExample.tsx

@@ -1,82 +0,0 @@
-import {
-  map,
-  React,
-  ReactDOM,
-  timer,
-  useMemoObservable,
-  of,
-  operators,
-  filter,
-  switchMap
-} from '../../_utils/globalScope'
-import {Observable} from 'rxjs'
-//@endimport
-
-const {distinctUntilChanged, debounceTime} = operators
-
-interface SearchResult {
-  keyword: string
-  hits: Hit[]
-}
-
-interface Hit {
-  title: string
-}
-
-const range = (len: number) => {
-  const res = []
-  for (let i = 0; i <= len; i++) {
-    res.push(null)
-  }
-  return res
-}
-
-// A search function that takes longer time to complete for shorter keywords
-// e.g. a keyword of one character takes 9 seconds while a keyword of 9 characters takes 1 second
-const search = (keyword: string): Observable<SearchResult> => {
-  const delay = Math.max(1, Math.round(10 - keyword.length))
-  return timer(delay * 200).pipe(
-    map(() => range(delay).map((_, i) => ({title: `Hit #${i}`}))),
-    map((hits) => ({keyword, hits}))
-  )
-}
-
-function SearchExample() {
-  const [keyword, setKeyword] = React.useState('')
-  return (
-    <>
-      <input
-        type="search"
-        style={{width: '100%'}}
-        value={keyword}
-        placeholder="Type a keyword to search"
-        onChange={(event) => setKeyword(event.target.value)}
-      />
-      <div>
-        The more characters you type, the faster the results will appear
-      </div>
-      {useMemoObservable(() =>
-        of(keyword).pipe(
-          debounceTime(200),
-          distinctUntilChanged(),
-          filter((v) => v !== ''),
-          switchMap((kw: string) => search(kw)),
-          map((result: SearchResult) => (
-            <>
-              <h1>Searched for {result.keyword}</h1>
-              <div>Got {result.hits.length} hits</div>
-              <ul>
-                {result.hits.map((hit, i) => (
-                  <li key={i}>{hit.title}</li>
-                ))}
-              </ul>
-            </>
-          ))
-        ),
-        [keyword]
-      )}
-    </>
-  )
-}
-
-ReactDOM.render(<SearchExample />, document.getElementById('search-example'))

package/website/src/examples/use-observable/search/index.tsx

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