react-rx 1.0.0 → 2.0.1

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

package/website/src/examples/use-observable/use-observable/UseObservableExample.tsx

@@ -1,70 +0,0 @@
-import * as React from 'react'
-import {Observable, of, timer} from 'rxjs'
-import {ReactDOM, useMemoObservable} from '../../_utils/globalScope'
-import {observableCallback} from 'observable-callback'
-import {map, startWith, switchMap} from 'rxjs/operators'
-//@endimport
-
-const justNumbers$ = timer(0, 500)
-
-const numberReactElement$ = justNumbers$.pipe(
-  map((num) => <div>The number is {num}!</div>)
-)
-
-const [onSpeedChange$, onSpeedChange] = observableCallback<
-  React.SyntheticEvent<HTMLInputElement>
->()
-
-const speed$: Observable<number> = onSpeedChange$.pipe(
-  map((event) => Number(event.currentTarget.value)),
-  startWith(1000)
-)
-
-const UseObservableExample = () => (
-  <>
-    <h2>An observable of react elements</h2>
-    {useMemoObservable(of(<div>HELLO SYNC</div>), [])}
-    {useMemoObservable(numberReactElement$.pipe(startWith(2)), [])}
-    <h2>An observable with child as render func</h2>
-    {useMemoObservable(
-      timer(0, 100).pipe(
-        startWith(2),
-        map((num) => <>The number is {num}</>)
-      ),
-      []
-    )}
-
-    <h2>Nested</h2>
-    <p>You can adjust the update speed by changing update interval below</p>
-    {useMemoObservable(
-      () =>
-        speed$.pipe(
-          switchMap(
-            (speed: number): Observable<[number, number]> =>
-              timer(0, speed).pipe(
-                map((update): [number, number] => [speed, update])
-              )
-          ),
-          map(([speed, update]: [number, number]) => (
-            <>
-              Update interval:
-              <input
-                type="number"
-                value={speed}
-                onChange={onSpeedChange}
-                step={200}
-                min={0}
-              />
-              <div>Update {update}</div>
-            </>
-          ))
-        ),
-      []
-    )}
-  </>
-)
-
-ReactDOM.render(
-  <UseObservableExample />,
-  document.getElementById('use-observable-example')
-)

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

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

package/website/src/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>ReactRx</title>
-    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

package/website/src/mdx-components.tsx

@@ -1,74 +0,0 @@
-import {CodeMirrorMode} from './components/repl/CodeMirrorMode'
-
-import * as React from 'react'
-import styled from 'styled-components'
-import {rxComponent} from 'react-rx'
-import {map} from 'rxjs/operators'
-import {combineLatest} from 'rxjs'
-import {location$} from './datastores/location'
-import {parseCodeFenceHeader} from './utils/parseCodeFenceHeader'
-import {ModeSpec} from './components/repl/runMode'
-
-const ModeWrapper = styled.div`
-  color: #fff;
-`
-
-const InlineCode = styled.code`
-  font-size: 0.9em;
-  background-color: #e4e4e4;
-  padding: 1px 4px;
-  border-radius: 2px;
-`
-
-const CODEMIRROR_TSX_MODE: ModeSpec = {
-  name: 'jsx',
-  base: {name: 'javascript', typescript: true}
-}
-
-const TSX_MODE_TYPES = ['js', 'jsx', 'tsx', 'ts']
-
-interface InlineCodeProps {
-  children: string
-}
-
-interface CodeProps {
-  children: string
-  className: 'language-js' | 'language-jsx' | 'language-tsx'
-}
-
-export const components = {
-  inlineCode: InlineCode,
-  code: (props: CodeProps) => {
-    const [lang, range] = parseCodeFenceHeader(
-      props.className.replace(/^language-/, '')
-    )
-    const mode =
-      lang && TSX_MODE_TYPES.includes(lang) ? CODEMIRROR_TSX_MODE : null
-    return (
-      <ModeWrapper>
-        <CodeMirrorMode highlighted={range} mode={mode}>
-          {props.children}
-        </CodeMirrorMode>
-      </ModeWrapper>
-    )
-  }
-}
-
-const hash$ = location$.pipe(map(location => location.hash))
-
-const BookmarkedLink = rxComponent<{
-  href: string
-  children: React.ReactNode
-}>(props$ =>
-  combineLatest([props$, hash$]).pipe(
-    map(([props, hash]) => (
-      <a href={props.href} className={hash === props.href ? 'selected' : ''}>
-        {props.children}
-      </a>
-    ))
-  )
-)
-
-export const tocComponents = {
-  a: BookmarkedLink
-}