react-rx 1.0.0 → 1.0.1

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

package/website/src/pages/Api/Api.mdx

@@ -1,134 +0,0 @@
-# Reactive Component
-
-## component()
-
-**Signature**
-
-```ts
-function component<Props>(
-  observable: Observable<Props>
-): React.FunctionComponent<{}>
-function component<Props>(
-  component: Component<Props>
-): React.FunctionComponent<Props>
-```
-
-**Usage**
-
-```ts
-import * as ReactRx from 'react-rx'
-
-export const MyComponent = ReactRx.component(props$ =>
-  props$.pipe(map(props => <div>...</div>))
-)
-```
-
-## forwardRef()
-
-The `React.forwardRef()` equivalent for a Reactive component.
-
-** Signature **
-
-```ts
-function forwardRef<Props, Ref>(
-  component: (
-    input$: Observable<Props>,
-    ref: React.RefObject<Ref>
-  ) => React.FunctionComponent<Props>
-)
-```
-
-**Usage**
-
-```js
-import * as ReactRx from 'react-rx'
-
-const MyInputWrapper = ReactRx.forwardRef((props$, ref) =>
-  props$.pipe(
-    map(props => (
-      <input
-        ref={ref}
-        type="text"
-        value={props.value}
-        onChange={props.onChange}
-      />
-    ))
-  )
-)
-```
-
-## useState()
-
-Equivalent to `React.useState()` with the only difference that instead of the stateful value, it returns an observable representing the state changes (e.g. instead of `[T, update(value: T)]`, it returns `[Observable<T>, update(value: T)]`.
-
-**Signature**
-
-```ts
-function useState<T = undefined>(): [
-  Observable<T | undefined>,
-  React.Dispatch<React.SetStateAction<T | undefined>>
-]
-function useState<T>(
-  initial: T | (() => T)
-): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
-```
-
-## useContext()
-
-Equivalent to `React.useContext()` with the only difference that instead of a stateful context value, it returns an observable representing the context value changes.
-
-** Signature **
-
-```ts
-function useContext<T>(context: React.Context<T>): Observable<T>
-```
-
-## useEvent()
-
-This has no React API equivalent, but creates a `[Observable<Event>, (Event) => void]` tuple, where the first value is an observable of the arguments the second function is called with.
-
-**Signature**
-
-```ts
-function useObservableEvent<Event>(): [
-  Observable<Event>,
-  (event: Event) => void
-]
-```
-
-## toObservable()
-
-Converts any value inside a Functional React component to an observable of changes to that value.
-
-```ts
-function toObservable<T>(value: T): Observable<T>
-```
-
-# React hooks
-
-## useObservable()
-
-A React hook that returns the current/latest value from an observable
-
-**Signature**
-
-```ts
-function useObservable<T>(observable$: Observable<T>): T | null
-function useObservable<T>(observable$: Observable<T>, initialValue: T): T
-```
-
-## useObservableState()
-
-Same as `useState()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
-
-## useObservableContext()
-
-Same as `useContext()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
-
-## useObservableEvent()
-
-Same as `useEvent()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
-
-## toObservable()
-
-Same as `toObservable()` described in the Reactive Component section above

package/website/src/pages/Api/ApiPage.tsx

@@ -1,25 +0,0 @@
-import {Header} from '../../components/Header'
-import {Container, Content} from '../styles'
-import MDXContent, {Toc} from './Api.mdx'
-import * as React from 'react'
-import {MDXProvider} from '@mdx-js/react'
-import {components, tocComponents} from '../../mdx-components'
-import {Sidebar} from '../../components/Sidebar'
-
-export const ApiPage = () => (
-  <>
-    <Header />
-    <Container>
-      <Sidebar heading="API Reference">
-        <MDXProvider components={tocComponents}>
-          <Toc />
-        </MDXProvider>
-      </Sidebar>
-      <Content>
-        <MDXProvider components={components}>
-          <MDXContent />
-        </MDXProvider>
-      </Content>
-    </Container>
-  </>
-)