react-rx 1.0.0-beta.6 → 2.0.0

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

package/website/src/pages/Index/IndexPage.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import {Header} from '../../components/Header'
-import {MDXProvider} from '@mdx-js/react'
-import ReactRxReadme from './ReactRxReadme.md'
-import {components} from '../../mdx-components'
-import {ReactRxLogo} from '../../components/logos/ReactRxLogo'
-import styled from 'styled-components'
-import {COLORS} from '../../theme'
-
-const Content = styled.div`
-  margin-top: 5em;
-`
-const ContentInner = styled.div`
-  padding: 1em 1em;
-`
-const Cover = styled.div`
-  background: ${COLORS.shadow};
-  color: ${COLORS.background};
-  padding-top: 2em;
-  font-size: 2em;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  h1 {
-    padding: 0 0 0 0.1em;
-  }
-`
-
-const Subsection = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-export const IndexPage = () => (
-  <>
-    <Header />
-    <Content>
-      <Cover>
-        <ReactRxLogo size="4em" />
-        <h1>ReactRx</h1>
-      </Cover>
-      <ContentInner>
-        <Subsection>
-          <MDXProvider components={components}>
-            <ReactRxReadme />
-          </MDXProvider>
-        </Subsection>
-      </ContentInner>
-    </Content>
-  </>
-)

package/website/src/pages/Index/ReactRxReadme.md

@@ -1,20 +0,0 @@
-> Hooks and utilities for combining React with RxJS Observables
-
-Features:
-
-- Works well with Observables emitting values synchronously. You don't pay the re-render-on-mount tax.
-- Lightweight. Implemented on top of a small React Hook based core.
-- Full TypeScript support.
-
-This package offers two slightly different utilities for working with RxJS and React:
-
-- A set of utilities for creating _Reactive components_
-- A set of React hooks for using with observables with React
-
-Although they share a lot of similarities, and reactiveComponent is built on top of `useObservable` are not intended to be used together inside the same component as they represent two different programming styles.
-
----
-
-- [Reactive components](https://react-rx.dev/guide#reactive-components)
-- [Observable hooks](https://react-rx.dev/guide#observable-hooks)
-- [Code examples](https://react-rx.dev/examples)

package/website/src/pages/NotFound.tsx

@@ -1,3 +0,0 @@
-import React from 'react'
-
-export const NotFoundPage = () => <h2>Not found!</h2>

package/website/src/pages/pages.ts

@@ -1,46 +0,0 @@
-import {NotFoundPage} from './NotFound'
-
-export interface Page {
-  id: string
-  title: string
-  route: string
-  load: () => Promise<React.ComponentType<any>>
-}
-
-function get<T extends {}, K extends keyof T>(key: K): (res: T) => T[K] {
-  return (res: T) => res[key]
-}
-
-export const pages: Page[] = [
-  {
-    id: 'home',
-    title: 'Home',
-    route: '/',
-    load: () => import('./Index/IndexPage').then(get('IndexPage'))
-  },
-  {
-    id: 'guide',
-    title: 'Guide',
-    route: '/guide',
-    load: () => import('./Guide/GuidePage').then(get('GuidePage'))
-  },
-  {
-    id: 'api',
-    title: 'API',
-    route: '/api',
-    load: () => import('./Api/ApiPage').then(get('ApiPage'))
-  },
-  {
-    id: 'examples',
-    title: 'Examples',
-    route: '/examples',
-    load: () => import('./Examples/ExamplesPage').then(get('ExamplesPage'))
-  }
-]
-
-export const NOT_FOUND: Page = {
-  id: 'not-found',
-  title: 'Not found',
-  route: '',
-  load: () => Promise.resolve(NotFoundPage)
-}

package/website/src/pages/styles.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components'
-import * as React from 'react'
-
-export const Container = styled.div`
-  margin-top: 7em;
-  display: flex;
-  flex-direction: row;
-`
-
-export const ContentWrapper = styled.div`
-  width: 100%;
-  margin: 0;
-`
-
-export const ContentInner = styled.div`
-  padding: 0 1em;
-`
-export const Content = (props: {children: React.ReactNode}) => {
-  return (
-    <ContentWrapper>
-      <ContentInner>{props.children}</ContentInner>
-    </ContentWrapper>
-  )
-}

package/website/src/theme.ts

@@ -1,61 +0,0 @@
-const SIZES = {
-  xsmall: {min: 0, max: 599},
-  small: {min: 600, max: 779},
-  medium: {min: 780, max: 979},
-  large: {min: 980, max: 1279},
-  xlarge: {min: 1280, max: 1339},
-  xxlarge: {min: 1340, max: Infinity}
-}
-
-export type Size = keyof typeof SIZES
-
-export const media = {
-  between(smallKey: Size, largeKey: Size, excludeLarge = false) {
-    if (excludeLarge) {
-      return `@media (min-width: ${
-        SIZES[smallKey].min
-      }px) and (max-width: ${SIZES[largeKey].min - 1}px)`
-    } else {
-      if (SIZES[largeKey].max === Infinity) {
-        return `@media (min-width: ${SIZES[smallKey].min}px)`
-      } else {
-        return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${SIZES[largeKey].max}px)`
-      }
-    }
-  },
-
-  greaterThan(key: Size) {
-    return `@media (min-width: ${SIZES[key].min}px)`
-  },
-
-  lessThan(key: Size) {
-    return `@media (max-width: ${SIZES[key].min - 1}px)`
-  },
-
-  size(key: Size) {
-    const size = SIZES[key]
-
-    if (size.min == null) {
-      return media.lessThan(key)
-    } else if (size.max == null) {
-      return media.greaterThan(key)
-    } else {
-      return media.between(key, key)
-    }
-  }
-}
-
-const PRIMARY = '#d9376e'
-const LIGHT = '#eff0f3'
-export const COLORS = {
-  header: {
-    background: PRIMARY,
-    text: LIGHT
-  },
-  background: LIGHT,
-  text: '#2a2a2a',
-  link: PRIMARY,
-  secondary: '#ff8e3c',
-  tertiary: '#ff8e3c',
-  shadow: '#444'
-}

package/website/src/utils/parseCodeFenceHeader.ts

@@ -1,32 +0,0 @@
-import {flatten, range, uniq} from 'lodash'
-
-const regex = /^([a-z0-9\s_-]+)({([0-9,-]+)})*/
-
-function isNum(v: any) {
-  return !isNaN(v)
-}
-
-export function parseCodeFenceHeader(header: string): [string, number[]?] {
-  const match = regex.exec(header)
-  if (!match) {
-    throw new Error(`Unparseable code fence header: ${header}`)
-  }
-  const [, lang, , range] = match
-
-  return range ? [lang, parseRange(range)] : [lang]
-}
-
-function parseRange(nums: string) {
-  return uniq(flatten(nums.split(',').map(expandRange))).filter(isNum)
-}
-
-function expandRange(rangeStr: string) {
-  if (rangeStr.includes('-')) {
-    const numRange = rangeStr
-      .split('-')
-      .map(n => Number(n))
-      .sort()
-    return range(numRange[numRange.length - 1], numRange[0])
-  }
-  return [Number(rangeStr)]
-}

package/website/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "//": "NOTE: TypeScript is only used for typechecking, not transpiling as that's handled by babel",
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules/**/*"
-  ],
-  "compilerOptions": {
-    "types": [
-      "./webpack/type-stubs.d.ts"
-    ],
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "lib": [
-      "dom",
-      "ES2015"
-    ],
-    "target": "es2015",
-    "moduleResolution": "node",
-    "module": "esnext",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "jsx": "preserve",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  }
-}

package/website/vercel.json

@@ -1,4 +0,0 @@
-{
-  "version": 2,
-  "routes": [{"handle": "filesystem"}, {"src": "/.*", "dest": "/index.html"}]
-}

package/website/webpack/config.js

@@ -1,5 +0,0 @@
-const createConfig = require('./createConfig')
-
-const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'
-
-module.exports = createConfig(env)

package/website/webpack/createConfig.js

@@ -1,95 +0,0 @@
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
-const {CleanWebpackPlugin} = require('clean-webpack-plugin')
-
-module.exports = function createConfig(env) {
-  return {
-    mode: env,
-    entry: './src/entries/main.tsx',
-    output: {
-      path: path.resolve(__dirname, '..', 'public'),
-      filename: '[name]-[hash].js'
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js']
-    },
-    plugins: [
-      new CleanWebpackPlugin(),
-      env === 'development' && new webpack.ProgressPlugin(),
-      new CopyPlugin({
-        patterns: ['a', 'b'].map((n) => ({
-          from: `src/examples/fetch/${n}.txt`,
-          to: `${n}.txt`
-        }))
-      }),
-      new HtmlWebpackPlugin({
-        template: 'src/index.html',
-        inject: true
-      })
-    ].filter(Boolean),
-    node: {
-      global: true,
-      fs: 'empty',
-      __filename: 'mock',
-      __dirname: 'mock'
-    },
-    module: {
-      rules: [
-        {
-          test: /\.([tj])sx?$/,
-          use: 'babel-loader',
-          exclude: /node_modules/
-        },
-        {
-          test: /\.mdx?$/,
-          use: ['babel-loader', path.resolve(__dirname, './mdx-toc-loader.js')]
-        },
-        {
-          test: /\.html$/,
-          use: 'html-loader'
-        },
-        {
-          test: /\.css$/i,
-          use: ['style-loader', 'css-loader']
-        }
-      ]
-    },
-    ...(env === 'development' && {
-      devServer: {
-        port: 3000,
-        host: '0.0.0.0',
-        historyApiFallback: true,
-        disableHostCheck: true
-      }
-    }),
-    devtool: env === 'development' ? 'source-map' : false,
-    ...(env === 'production' && {
-      optimization: {
-        usedExports: true,
-        minimize: true,
-        splitChunks: {
-          chunks: 'async',
-          minSize: 30000,
-          maxSize: 0,
-          minChunks: 1,
-          maxAsyncRequests: 6,
-          maxInitialRequests: 4,
-          automaticNameDelimiter: '~',
-          cacheGroups: {
-            defaultVendors: {
-              test: /[\\/]node_modules[\\/]/,
-              priority: -10
-            },
-            default: {
-              minChunks: 2,
-              priority: -20,
-              reuseExistingChunk: true
-            }
-          }
-        }
-      }
-    })
-  }
-}