react-rx 1.0.0-beta.4 → 1.0.1

package/src/reactiveComponent.ts

@@ -1,33 +1,39 @@
-import * as React from 'react'
 import {Observable} from 'rxjs'
 import {wrapDisplayName} from './displayName'
 import {useAsObservable} from './useAsObservable'
 import {useObservable} from './useObservable'
+import {
+  createElement,
+  Fragment,
+  FunctionComponent,
+  ReactNode,
+  Ref,
+  useRef,
+  forwardRef as reactForwardRef,
+} from 'react'
 
-type Component<Props> = (input$: Observable<Props>) => Observable<React.ReactNode>
+type Component<Props> = (input$: Observable<Props>) => Observable<ReactNode>
 
-function fromComponent<Props>(component: Component<Props>): React.FunctionComponent<Props> {
+function fromComponent<Props>(component: Component<Props>): FunctionComponent<Props> {
   const wrappedComponent = (props: Props) => {
-    return React.createElement(
-      React.Fragment,
+    return createElement(
+      Fragment,
       null,
-      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props))).current),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props))).current),
     )
   }
   wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')
   return wrappedComponent
 }
 
-function fromObservable<Props>(input$: Observable<Props>): React.FunctionComponent<{}> {
+function fromObservable<Props>(input$: Observable<Props>): FunctionComponent<{}> {
   return function ReactiveComponent() {
-    return React.createElement(React.Fragment, null, useObservable<React.ReactNode>(input$))
+    return createElement(Fragment, null, useObservable<ReactNode>(input$))
   }
 }
 
-export function reactiveComponent<Props>(observable: Observable<Props>): React.FunctionComponent<{}>
-export function reactiveComponent<Props>(
-  component: Component<Props>,
-): React.FunctionComponent<Props>
+export function reactiveComponent<Props>(observable: Observable<Props>): FunctionComponent<{}>
+export function reactiveComponent<Props>(component: Component<Props>): FunctionComponent<Props>
 export function reactiveComponent<Props>(
   observableOrComponent: Observable<Props> | Component<Props>,
 ) {
@@ -38,15 +44,15 @@ export function reactiveComponent<Props>(
 
 type ForwardRefComponent<RefType, Props> = (
   input$: Observable<Props>,
-  ref: React.Ref<RefType>,
-) => Observable<React.ReactNode>
+  ref: Ref<RefType>,
+) => Observable<ReactNode>
 
 export function forwardRef<RefType, Props = {}>(component: ForwardRefComponent<RefType, Props>) {
-  const wrappedComponent = React.forwardRef((props: Props, ref: React.Ref<RefType>) => {
-    return React.createElement(
-      React.Fragment,
+  const wrappedComponent = reactForwardRef((props: Props, ref: Ref<RefType>) => {
+    return createElement(
+      Fragment,
       null,
-      useObservable<React.ReactNode>(React.useRef(component(useAsObservable(props), ref)).current),
+      useObservable<ReactNode>(useRef(component(useAsObservable(props), ref)).current),
     )
   })
   wrappedComponent.displayName = wrapDisplayName(component, 'reactiveComponent')

package/src/useAsObservable.ts

@@ -1,5 +1,6 @@
 import {BehaviorSubject, Observable, Subject} from 'rxjs'
-import * as React from 'react'
+import {useRef} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**
  * React hook to convert any props or state value into an observable
@@ -7,15 +8,24 @@ import * as React from 'react'
  * Note: the returned observable is the same instance throughout the component lifecycle
  * @param value
  */
-export function useAsObservable<T>(value: T): Observable<T> {
-  const isInitial = React.useRef(true)
-  const subjectRef = React.useRef<Subject<T>>(new BehaviorSubject(value))
-  const observableRef = React.useRef<Observable<T>>()
+export function useAsObservable<T>(value: T): Observable<T>
+export function useAsObservable<T, K>(
+  value: T,
+  operator: (input: Observable<T>) => Observable<K>,
+): Observable<K>
+export function useAsObservable<T, K = T>(
+  value: T,
+  operator?: (input: Observable<T>) => Observable<K>,
+): Observable<T | K> {
+  const isInitial = useRef(true)
+  const subjectRef = useRef<Subject<T>>(new BehaviorSubject(value))
+  const observableRef = useRef<Observable<T | K>>()
   if (!observableRef.current) {
-    observableRef.current = subjectRef.current.asObservable()
+    const observable = subjectRef.current.asObservable()
+    observableRef.current = operator ? observable.pipe(operator) : observable
   }
 
-  React.useEffect(() => {
+  useIsomorphicEffect(() => {
     if (isInitial.current) {
       isInitial.current = false
     } else {
@@ -23,7 +33,7 @@ export function useAsObservable<T>(value: T): Observable<T> {
       subjectRef.current.next(value)
     }
   }, [value])
-  React.useEffect(() => {
+  useIsomorphicEffect(() => {
     return () => {
       return subjectRef.current.complete()
     }

package/src/useIsomorphicEffect.ts

@@ -0,0 +1,3 @@
+import {useEffect, useLayoutEffect} from 'react'
+
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/useObservable.ts

@@ -1,20 +1,18 @@
-import * as React from 'react'
 import {Observable, Subscription} from 'rxjs'
+import {DependencyList, useMemo, useRef, useState} from 'react'
+import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
-export function useObservable<T>(observable$: Observable<T>): T | undefined
-export function useObservable<T>(observable$: Observable<T>, initialValue: T): T
-export function useObservable<T>(observable$: Observable<T>, initialValue: () => T): T
-export function useObservable<T>(
-  observable: Observable<T>,
-  initialValue?: T | (() => T),
-) {
-  const subscription = React.useRef<Subscription>()
-  const isInitial = React.useRef(true)
-  const [value, setState] = React.useState(() => {
+export function useObservable<T>(observable: Observable<T>): T | undefined
+export function useObservable<T>(observable: Observable<T>, initialValue: T): T
+export function useObservable<T>(observable: Observable<T>, initialValue: () => T): T
+export function useObservable<T>(observable: Observable<T>, initialValue?: T | (() => T)) {
+  const subscription = useRef<Subscription>()
+  const isInitial = useRef(true)
+  const [value, setState] = useState(() => {
     let isSync = true
     let syncVal = getValue(initialValue)
     subscription.current = observable.subscribe(nextVal => {
@@ -28,8 +26,8 @@ export function useObservable<T>(
     return syncVal
   })
 
-  React.useEffect(() => {
-    // when the observable$ changes after initial (possibly sync render)
+  useIsomorphicEffect(() => {
+    // when the observable changes after initial (possibly sync render)
     if (!isInitial.current) {
       subscription.current = observable.subscribe(nextVal => setState(nextVal))
     }
@@ -47,20 +45,20 @@ export function useObservable<T>(
 
 export function useMemoObservable<T>(
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
-): Observable<T | undefined>
+  deps: DependencyList,
+): T | undefined
 export function useMemoObservable<T>(
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
+  deps: DependencyList,
   initialValue: T | (() => T),
-): Observable<T>
+): T
 export function useMemoObservable<T>(
   observableOrFactory: Observable<T> | (() => Observable<T>),
-  deps: React.DependencyList,
+  deps: DependencyList,
   initialValue?: T | (() => T),
 ) {
   return useObservable(
-    React.useMemo(() => getValue(observableOrFactory), deps),
+    useMemo(() => getValue(observableOrFactory), deps),
     initialValue,
   )
 }

package/src/useObservableCallback.ts

@@ -0,0 +1,30 @@
+import {DependencyList, useCallback, useEffect, useRef} from 'react'
+import {observableCallback} from 'observable-callback'
+import {Observable} from 'rxjs'
+
+const EMPTY_DEPS: DependencyList = []
+
+export function useObservableCallback<T, U>(
+  fn: (arg: Observable<T>) => Observable<U>,
+  dependencies: DependencyList = EMPTY_DEPS,
+): (arg: T) => void {
+  const callbackRef = useRef<[Observable<T>, (val: T) => void]>()
+
+  if (!callbackRef.current) {
+    callbackRef.current = observableCallback<T>()
+  }
+
+  const [calls$, call] = callbackRef.current
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const callback = useCallback(fn, dependencies)
+
+  useEffect(() => {
+    const subscription = calls$.pipe(callback).subscribe()
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [calls$, call, callback])
+
+  return call
+}

package/src/useWithObservable.ts

@@ -0,0 +1,23 @@
+import {Observable} from 'rxjs'
+import {useObservable} from './useObservable'
+import {useAsObservable} from './useAsObservable'
+
+/**
+ * React hook to convert any props or state value into an observable
+ * Returns an observable representing updates to any React value (props, state or any other calculated value)
+ * Note: the returned observable is the same instance throughout the component lifecycle
+ * @param value
+ */
+export function useWithObservable<T>(value: T): T | undefined
+export function useWithObservable<T, K>(
+  value: T,
+  operator: (input: Observable<T>) => Observable<K>,
+): K | undefined
+export function useWithObservable<T, K = T>(
+  value: T,
+  operator?: (input: Observable<T>) => Observable<K>,
+): T | K | undefined {
+  return operator
+    ? useObservable(useAsObservable(value, operator))
+    : useObservable(useAsObservable(value))
+}

package/src/utils.ts

@@ -1,18 +1,18 @@
 import {Observable, OperatorFunction} from 'rxjs'
-import * as React from 'react'
 import {useAsObservable} from './useAsObservable'
 import {observableCallback} from 'observable-callback'
 import {startWith} from 'rxjs/operators'
+import {Dispatch, SetStateAction, useContext, useRef, useState, Context} from 'react'
 
 const createState = <T>(initialState: T) => observableCallback(startWith<T, T>(initialState))
 
 export function observeState<T>(
   initial: T | (() => T),
-): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
+): [Observable<T>, Dispatch<SetStateAction<T>>]
 export function observeState<T>(
   initial?: T | (() => T),
-): [Observable<T | undefined>, React.Dispatch<React.SetStateAction<T | undefined>>] {
-  const [value, update] = React.useState<T | undefined>(initial)
+): [Observable<T | undefined>, Dispatch<SetStateAction<T | undefined>>] {
+  const [value, update] = useState<T | undefined>(initial)
   return [useAsObservable(value), update]
 }
 
@@ -23,19 +23,19 @@ export function observeCallback<T, K>(
 export function observeCallback<T, K>(
   operator?: OperatorFunction<T, K>,
 ): [Observable<T | K>, (arg: T) => void] {
-  const ref = React.useRef<[Observable<T | K>, (arg: T) => void]>()
+  const ref = useRef<[Observable<T | K>, (arg: T) => void]>()
   if (!ref.current) {
     ref.current = operator ? observableCallback<T, K>(operator) : observableCallback<T>()
   }
   return ref.current
 }
 
-export function observeContext<T>(context: React.Context<T>): Observable<T> {
-  return useAsObservable(React.useContext<T>(context))
+export function observeContext<T>(context: Context<T>): Observable<T> {
+  return useAsObservable(useContext<T>(context))
 }
 
 export function observeElement<T>(): [Observable<T | null>, (el: T | null) => void] {
-  const ref = React.useRef<[Observable<T | null>, (value: T | null) => void]>()
+  const ref = useRef<[Observable<T | null>, (value: T | null) => void]>()
   if (!ref.current) {
     ref.current = createState<T | null>(null)
   }

package/jest.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  rootDir: "src"
-}

package/website/.babelrc

@@ -1,21 +0,0 @@
-{
-  "presets": [
-    "@babel/react",
-    "@babel/typescript",
-    [
-      "@babel/env",
-      {
-        "targets": {
-          "esmodules": true
-        },
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-class-properties",
-    "babel-plugin-static-fs",
-    "babel-plugin-styled-components"
-  ]
-}

package/website/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "semi": false,
-  "printWidth": 80,
-  "bracketSpacing": false,
-  "singleQuote": true,
-  "trailingComma": "none"
-}

package/website/README.mdx

@@ -1 +0,0 @@
-WRONG README

package/website/package.json

@@ -1,84 +0,0 @@
-{
-  "name": "react-rx-website",
-  "private": true,
-  "version": "1.0.0",
-  "description": "React rx website",
-  "scripts": {
-    "build": "NODE_ENV=production webpack --mode=production --config webpack/config.js",
-    "watch": "webpack -w --config webpack/config.js",
-    "start": "webpack-dev-server --config webpack/config.js",
-    "dev": "npm start",
-    "postinstall": "cp ../README.md src/pages/Index/ReactRxReadme.md"
-  },
-  "keywords": [],
-  "dependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.3",
-    "@babel/plugin-transform-typescript": "^7.10.3",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.1",
-    "@mdx-js/react": "^1.6.6",
-    "@types/babel__core": "^7.1.9",
-    "@types/codemirror": "^0.0.96",
-    "@types/history": "^4.7.6",
-    "@types/mdx-js__react": "^1.5.2",
-    "@types/react": "^16.9.41",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.0",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
-    "bezier-easing": "^2.1.0",
-    "codemirror": "^5.55.0",
-    "date-fns": "^2.14.0",
-    "eslint": "^7.3.1",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.0",
-    "history": "^5.0.0",
-    "jest": "^26.1.0",
-    "lodash": "^4.17.15",
-    "observable-callback": "^1.0.1",
-    "prettier": "2.0.5",
-    "react": "^17.0.1",
-    "react-codemirror2": "^7.2.1",
-    "react-css-burger": "^0.2.0",
-    "react-dom": "^17.0.1",
-    "react-rx": "1.0.0-beta.3",
-    "remark-emoji": "^2.1.0",
-    "rimraf": "^3.0.2",
-    "rxjs": "^6.5.5",
-    "styled-components": "^5.1.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/preset-env": "^7.10.3",
-    "@babel/standalone": "^7.10.3",
-    "@mdx-js/loader": "^1.6.6",
-    "@mdx-js/mdx": "^1.6.6",
-    "@types/lodash": "^4.14.157",
-    "@types/node": "^14.0.14",
-    "@webhotelier/webpack-fast-refresh": "5.0.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-static-fs": "^3.0.0",
-    "babel-plugin-styled-components": "^1.10.7",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
-    "css-loader": "^3.6.0",
-    "github-slugger": "^1.3.0",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^4.3.0",
-    "markdown-toc": "^1.2.0",
-    "react-refresh": "0.8.3",
-    "remark-slug": "^6.0.0",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^7.0.5",
-    "ts-node": "^8.10.2",
-    "tsconfig-paths": "^3.9.0",
-    "typescript": "^3.9.5",
-    "webpack-dev-server": "^3.11.0"
-  }
-}

package/website/src/@types/babel.d.ts

@@ -1,4 +0,0 @@
-declare module '@babel/plugin-proposal-optional-chaining'
-declare module '@babel/plugin-transform-typescript'
-declare module '@babel/plugin-transform-react-jsx'
-declare module '@babel/standalone'

package/website/src/@types/mdx.d.ts

@@ -1,11 +0,0 @@
-declare module '*.md' {
-  const MDXComponent: (props: any) => JSX.Element
-  export default MDXComponent
-  export {MDXComponent as Toc}
-}
-
-declare module '*.mdx' {
-  const MDXComponent: (props: any) => JSX.Element
-  export default MDXComponent
-  export {MDXComponent as Toc}
-}

package/website/src/@types/react-css-burger.d.ts

@@ -1,4 +0,0 @@
-declare module 'react-css-burger' {
-  const Default: React.ComponentType<any>
-  export default Default
-}

package/website/src/App.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react'
-import {createGlobalStyle} from 'styled-components'
-import {rxComponent} from 'react-rx'
-import {map} from 'rxjs/operators'
-import {COLORS, media} from './theme'
-import {pageTransition$} from './datastores/pageTransition'
-
-const GlobalStyle = createGlobalStyle`
-  body {
-    ${media.between('xsmall', 'small')} {
-      font-size: 12px;
-    }
-    ${media.between('small', 'medium')} {
-      font-size: 14px;
-    }
-    ${media.greaterThan('medium')} {
-      font-size: 16px;
-    }
-    ${media.greaterThan('large')} {
-      font-size: 18px;
-    }
-    padding: 0;
-    margin: 0;
-    background: ${COLORS.background};
-    color: ${COLORS.text};
-    font-family: Inter, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Droid Sans', 'Helvetica Neue', 'Fira Sans', system-ui, sans-serif;
-    font-size: 1.125rem;
-    overflow-y: scroll;
-  }
-
-  h1::before, h2::before, h3::before, h4::before {
-    display: block;
-    content: " ";
-    visibility: hidden;
-    pointer-events: none;
-  }
-  h2::before, h3::before, h4::before {
-    margin-top:  -6em;
-    height: 6em;
-  }
-  h1::before {
-    margin-top:  -6em;
-    height: 6em;
-  }
-  a:link,
-  a:visited {
-    color: ${COLORS.link};
-    text-decoration: none;
-  }
-`
-
-export const App = rxComponent(
-  pageTransition$.pipe(
-    map((transition) => {
-      return (
-        <>
-          <GlobalStyle />
-          {transition.component ? (
-            <transition.component />
-          ) : (
-            <div>Loading…</div>
-          )}
-        </>
-      )
-    })
-  )
-)

package/website/src/components/Header.tsx

@@ -1,118 +0,0 @@
-import {Link} from './Link'
-import * as React from 'react'
-import styled from 'styled-components'
-import {rxComponent} from 'react-rx'
-import {pages} from '../pages/pages'
-
-import {map} from 'rxjs/operators'
-import {GithubLogo} from './logos/Github'
-import {COLORS} from '../theme'
-import {ReactRxLogo} from './logos/ReactRxLogo'
-import {pageTransition$} from '../datastores/pageTransition'
-import {omit} from 'lodash'
-
-const StyledHeader = styled.header`
-  z-index: 2000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding-bottom: 0;
-  background: ${COLORS.header.background};
-  a,
-  a:link,
-  a:visited {
-    color: ${COLORS.header.text};
-  }
-`
-
-const HeaderInner = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  height: 5em;
-  padding: 0.5em 1em 0.5em 1em;
-  background-color: ${COLORS.header.background};
-`
-
-const LinkWrapper = styled.div`
-  color: #efefef;
-  padding: 0.5em 1.2em 0.5em 0;
-`
-
-const omitProps = <T extends React.ComponentType>(
-  Component: T,
-  omitProps: string[]
-) => (props: React.ComponentProps<T>) => {
-  const omitted: any = omit(props, omitProps)
-  return <Component {...omitted} />
-}
-
-const PageLink = styled(omitProps(Link, ['isActive', 'isTransitioningTo']))<{
-  isActive: boolean
-  isTransitioningTo: boolean
-}>`
-  display: block;
-  color: ${COLORS.text};
-  font-size: 1em;
-  &:link,
-  &:visited {
-    color: ${COLORS.text};
-    text-decoration: ${(props) =>
-      (props.isActive || props.isTransitioningTo) && `underline`};
-    text-decoration-style: ${(props) => props.isTransitioningTo && `wavy`};
-  }
-`
-
-const LogoWrapper = styled.div`
-  font-family: Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica,
-    Arial, 'Lucida Grande', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  font-weight: bold;
-  font-size: 1.3em;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-`
-const Logo = () => (
-  <LogoWrapper>
-    <Link href="/">
-      <ReactRxLogo size="2em" style={{paddingRight: '0.4em'}} />
-      ReactRx
-    </Link>
-  </LogoWrapper>
-)
-
-export const Header = rxComponent((page$) =>
-  pageTransition$.pipe(
-    map((transitionState) => (
-      <StyledHeader>
-        <HeaderInner>
-          <Logo />
-          {pages
-            .filter((page) => page.id !== 'home')
-            .map((page) => {
-              return (
-                <LinkWrapper key={page.id}>
-                  <PageLink
-                    href={page.route}
-                    isTransitioningTo={
-                      transitionState.isTransitioning &&
-                      transitionState.next === page
-                    }
-                    isActive={transitionState.current === page}
-                  >
-                    {page.title}
-                  </PageLink>
-                </LinkWrapper>
-              )
-            })}
-          <a href="https://github.com/sanity-io/react-rx">
-            <GithubLogo style={{color: '#fff'}} height="25" width="25" />
-          </a>
-        </HeaderInner>
-      </StyledHeader>
-    ))
-  )
-)

package/website/src/components/Link.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react'
-import {navigate} from '../datastores/location'
-
-export function Link(props: React.ComponentProps<'a'>) {
-  const onClick = React.useCallback(
-    event => {
-      if (props.onClick) {
-        props.onClick(event)
-      }
-      event.preventDefault()
-      if (props.href) {
-        navigate(props.href)
-      }
-    },
-    [props.href, props.onClick]
-  )
-  return <a {...props} onClick={onClick} />
-}