react-rx 1.0.0-beta.4 → 1.0.1

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>
-  </>
-)

package/website/src/pages/Examples/Examples.tsx

@@ -1,105 +0,0 @@
-import * as React from 'react'
-import {ContextExample} from '../../examples/context'
-import {ErrorsExample} from '../../examples/errors'
-import {EventHandlersExample} from '../../examples/event-handlers'
-import {FetchExample} from '../../examples/fetch'
-import {FormDataExample} from '../../examples/form-data'
-import {ForwardRefExample} from '../../examples/forward-ref'
-import {PassThroughPropsExample} from '../../examples/passthrough-props'
-import {TickExample} from '../../examples/tick'
-import {ReactiveStateExample} from '../../examples/reactive-state'
-// // import ReadmeExamples from './readme-examples'
-import {CodeBlock} from '../../components/repl'
-import {FizzBuzzExample} from '../../examples/FizzBuzz'
-import {TodoAppExample} from '../../examples/todo-app'
-import {HelloWorldExample} from '../../examples/hello-world'
-import {SimpleExample} from '../../examples/simple'
-import {SharedStateExample} from '../../examples/shared-state'
-import {UseElementExample} from '../../examples/use-element'
-import {AnimationExample} from '../../examples/animation'
-import {SyncExample} from '../../examples/sync'
-import {Link} from '../../components/Link'
-import {Header} from '../../components/Header'
-import {Container, Content} from '../styles'
-import {Sidebar} from '../../components/Sidebar'
-import {HooksInteropExample} from '../../examples/hooks-interop'
-import {UseObservableExample} from '../../examples/use-observable/use-observable'
-import {SearchExample} from '../../examples/use-observable/search'
-
-export interface Example {
-  id: string
-  title: string
-  source: string
-  description?: string
-  scope?: {[variableName: string]: any}
-  prelude?: string
-}
-
-const rxComponentExamples: Example[] = [
-  HelloWorldExample,
-  SimpleExample,
-  ReactiveStateExample,
-  TodoAppExample,
-  HooksInteropExample,
-  AnimationExample,
-  UseElementExample,
-  SharedStateExample,
-  ContextExample,
-  ErrorsExample,
-  EventHandlersExample,
-  FetchExample,
-  SyncExample,
-  FormDataExample,
-  ForwardRefExample,
-  PassThroughPropsExample,
-  TickExample,
-  FizzBuzzExample
-]
-
-const useObservableExamples: Example[] = [UseObservableExample, SearchExample]
-
-const allExamples = rxComponentExamples.concat(useObservableExamples)
-
-export function Examples(props: {selectedExampleName: string}) {
-  const {selectedExampleName} = props
-  const selectedExample =
-    allExamples.find((ex) => ex.id === selectedExampleName) || allExamples[0]
-
-  return (
-    <>
-      <Header />
-      <Container>
-        <Sidebar heading="Examples">
-          <ul>
-            {allExamples.map((ex) => (
-              <li key={ex.id}>
-                <Link
-                  className={selectedExampleName === ex.id ? 'selected' : ''}
-                  href={`#${ex.id}`}
-                >
-                  {ex.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </Sidebar>
-        <Content>
-          {allExamples
-            .filter((ex) => ex === selectedExample)
-            .map((ex) => (
-              <div key={ex.id}>
-                <h1>{ex.title}</h1>
-                {ex.description && <p>{ex.description}</p>}
-                <CodeBlock
-                  source={ex.source}
-                  scope={ex.scope}
-                  prelude={ex.prelude}
-                  filename={`${ex.id}.tsx`}
-                />
-              </div>
-            ))}
-        </Content>
-      </Container>
-    </>
-  )
-}

package/website/src/pages/Examples/ExamplesPage.tsx

@@ -1,13 +0,0 @@
-import {rxComponent} from 'react-rx'
-import {location$} from '../../datastores/location'
-import {map} from 'rxjs/operators'
-import {Examples} from './Examples'
-import * as React from 'react'
-
-export const ExamplesPage = rxComponent(
-  location$.pipe(
-    map(location => (
-      <Examples selectedExampleName={location.hash?.substring(1)} />
-    ))
-  )
-)

package/website/src/pages/Guide/Guide.mdx

@@ -1,275 +0,0 @@
-# Reactive components
-
-## Intro
-
-A _reactive component_ is a React component that turns an observable of props into an observable of [values React can render](https://reactjs.org/docs/react-component.html#render) (e.g. element, strings, fragments)
-
-A _reactive component_ enables you to create components that composes different RxJS streams into a single render function, making your view purely a function of state and providing an explicit dataflow that's easier to reason about.
-
-The `rxComponent()` utility wraps a function component that is very similar to a regular React function component, with two notable differences:
-
-1. Instead of being called with a _props object_, it is called with an _Observable of props_
-2. Instead of returning _renderable values_, it returns an _Observable of renderable values_
-
-Here's an example component that fetches some text from the url passed as the `url` prop:
-
-```jsx
-import * as ReactRx from 'react-rx'
-
-const Fetch = ReactRx.component((props$) =>
-  props$.pipe(
-    switchMap((props) => fetch(props.url).then((response) => response.text())),
-    map((responseText) => <>Response is {responseText}</>)
-  )
-)
-
-// Usage
-ReactDOM.render(<Fetch url="/some/url" />, container)
-```
-
-Instead of a _function_, `rxComponent` can also take an `Observable` as argument as long as it's an observable of [something React can render](https://reactjs.org/docs/react-component.html#render). This is neat when you have component that doesn't take any props, but still depends on values coming from an `Observable`:
-
-```jsx
-import * as ReactRx from 'react-rx'
-
-const Counter = ReactRx.component(
-  timer(0, 100).pipe(map((counter) => <>The number is {counter}</>))
-)
-
-ReactDOM.render(<Counter />, container)
-```
-
-## Local component state
-
-Instead of calling `React.useState()` directly, you can also use the `useState` function exported from this package. Instead of the actual state value it will return an observable representing the state changes, along with a function to update it. Here's the example above rewritten to use `useState` from this package instead.
-
-```jsx{4}
-import {rxComponent, useState} from 'react-rx'
-
-const Counter = rxComponent(() => {
-  const [count$, setCount] = useState(0)
-
-  return count$.pipe(
-    map((currentCount) => (
-      <>
-        <div>Click count: {currentCount}</div>
-        <button onClick={() => setCount(currentCount + 1)}>Click!</button>
-      </>
-    ))
-  )
-})
-```
-
-## Responding to events
-
-Sometimes your state comes as a function of an event triggered by the user. Let's say you want to display the mouse cursors x,y position as the user moves the mouse inside a component. This can be done by using the `useEvent()` utility:
-
-```js{4}
-import {useEvent, rxComponent} from 'react-rx'
-
-const MouseTracker = rxComponent(() => {
-  const [mouseMove$, onMouseMove] = event()
-
-  return mouseMove$.pipe(
-    map((event) => (
-      <>
-        <div onMouseMove={handleMouseMove}>Hover me!</div>
-        <pre>
-          x={event.screenX},y={event.screenY}
-        </pre>
-      </>
-    ))
-  )
-})
-```
-
-### Gotcha: Initial render
-
-The above example will not produce any DOM before a mousemove event has been triggered, and the mouse event can't be triggered before the DOM has been rendered, which puts us in a catch-22 situation. To cope with it, we can make the observable start by emitting an initial value for the event.
-
-We can do this by using the `startWith` operator that comes with RxJS:
-
-```js{8}
-import {rxComponent, useEvent} from 'react-rx'
-import {map, startWith} from 'rxjs/operators'
-
-const MouseTracker = rxComponent(() => {
-  const [mouseMove$, handleMouseMove] = useEvent()
-
-  return mouseMove$.pipe(
-    startWith(null),
-    map((event) => (
-      <>
-        <div onMouseMove={handleMouseMove}>Hover me!</div>
-        {event && (
-          <pre>
-            x={event.screenX},y={event.screenY}
-          </pre>
-        )}
-      </>
-    ))
-  )
-})
-```
-
-This means the `event` argument now can also be `null` so we also need to guard about that in our render function.
-
-## Consuming React hooks
-
-Reactive components will not automatically re-render when a `useState()` value updates. In order to respond to state updates from React hooks, the value needs to be converted to an observable. This is done by wrapping it using the `toObservable()` utility before combining it with the returned observable. Here's an example:
-
-```jsx{4}
-import {rxComponent} from 'react-rx
-
-const Counter = rxComponent(props$ => {
-  const [count, setCount] = React.useState(0)
-
-  return toObservable(count).pipe(
-    map(currentCount => (
-      <>
-        <div>Click count: {currentCount}</div>
-        <button onClick={() => setCount(currentCount + 1)}>Click!</button>
-      </>
-    )))
-})
-```
-
-The `toObservable` function makes it possible to consume community provided React hooks inside a reactive component. However, this package also export some utility functions that wraps regular hooks so you can use them with less boilerplate, for example, the `ReactRx.useState` function described above.
-
-### React ecosystem interop
-
-Using `reactiveComponent` in a project with regular react components or components installed from the React ecosystem just works. Although it's advisable to not consume React hooks inside a `reactiveComponent`, but it's still possible by turning a value into an observable with `useAsObservable`. Here's an example:
-
-```tsx
-import {useAsObservable, rxComponent} from 'react-rx
-
-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 click$.pipe(
-    map((clickCount) => (
-      <button onClick={inc}>
-        This button has been clicked {clickCount} times
-      </button>
-    ))
-  )
-})
-```
-
-# Observable Hooks
-
-## useObservable()
-
-Use observables in React components with the `useObservable` hook.
-
-If you need to subscribe to an observable in your component, this hook will give you the current value from it
-
-Example:
-
-```jsx
-import {useObservable} from 'react-rx'
-import {interval} from 'rxjs'
-
-function MyComponent(props) {
-  const number = useObservable(interval(100), 0)
-
-  return <>The number is {number}</>
-}
-```
-
-The `initialValue` argument is optional. If its omitted, the value returned from `useObservable` may be `null` initially. If the observable emits a value _synchronously_ at subscription time, that value will be used as the initial value, and any `initialValue` passed as argument to `useObservable` will be ignored:
-
-```jsx
-import {of} from 'rxjs'
-import {useObservable} from 'react-rx'
-
-// This component will never render "Hello mars!" since the observable emits "world" synchronously.
-function MyComponent(props) {
-  const planet = useObservable(of('world'), 'mars')
-
-  return <>Hello {planet}!</>
-}
-```
-
-## useObservableState()
-
-If you need to represent some piece of state as an observable and also want the ability to change this state during the lifetime of the component, `useObservableState` is for you. It acts like `React.useState()`, only that it returns an observable representing changes to the value instead of the value itself. The callback/setter returned acts like a the regular callback you would otherwise get from `React.useState`. This is useful when you want to compose the state change together with other observables.
-
-Note: this is exact same hook as the `useState()` function described in the section about Reactive Component above, it's only been exported under a different and more explicit name to distinguish better from `React.useState()`.
-
-Here's an example of a component that count numbers at a certain speed, allowing the user to adjust the counting speed by adjusting a slider:
-
-```jsx
-import {useObservableState} from 'react-rx'
-
-function MyComponent(props) {
-  const [speed$, setSpeed] = useObservableState(1)
-
-  const count$ = speed$.pipe(
-    switchMap((speed) => timer(0, 1000 / speed)),
-    scan((count) => count + 1, 0)
-  )
-
-  const currentSpeed = useObservable(speed$)
-  const currentCount = useObservable(count$)
-
-  return (
-    <div>
-      <div>Counter value: {currentCount}</div>
-      <div>Counting speed: {Math.round((1 / currentSpeed) * 100) / 100}s</div>
-      <input
-        type="range"
-        value={currentSpeed}
-        min={1}
-        max={10}
-        onChange={(event) => setSpeed(Number(event.currentTarget.value))}
-      />
-    </div>
-  )
-}
-```
-
-## useObservableEvent()
-
-This creates an event handler and an observable that represents calls to that handler.
-
-Here's an example of a component thad displays the current value from a range input:
-
-```jsx
-import {useObservableEvent} from 'react-rx'
-
-const ShowSliderValue = () => {
-  const [onSliderChange$, onSliderChange] = useObservableEvent()
-
-  const sliderValue = useObservable(
-    onSliderChange$.pipe(
-      map((event) => event.currentTarget.value),
-      map((value) => Number(value)),
-      startWith(1)
-    )
-  )
-
-  return (
-    <>
-      <input
-        type="range"
-        value={sliderValue}
-        min={1}
-        max={10}
-        onChange={onSliderChange}
-      />
-      <div>Value is: {sliderValue}</div>
-    </>
-  )
-}
-```

package/website/src/pages/Guide/GuidePage.tsx

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