react-rx 1.0.0-beta.3 → 1.0.0

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

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

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

@@ -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/use-element/UseElementExample.tsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+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>
+  </>
+)