react-rx 1.0.0-beta.6 → 2.0.0

package/src/useObservable.ts

@@ -1,46 +1,51 @@
-import {Observable, Subscription} from 'rxjs'
-import {DependencyList, useMemo, useRef, useState} from 'react'
-import {useIsomorphicEffect} from './useIsomorphicEffect'
+import {defer, merge, Observable, of, pipe} from 'rxjs'
+import {DependencyList, useMemo} from 'react'
+import {useAsObservable} from './useAsObservable'
+import {distinctUntilChanged, switchMap} from 'rxjs/operators'
+import {useSyncExternalStore} from 'use-sync-external-store/shim'
 
 function getValue<T>(value: T): T extends () => infer U ? U : T {
   return typeof value === 'function' ? value() : value
 }
 
+function useObservableSubscription<T>(observable: Observable<T>): T {
+  const store = useMemo(() => {
+    let currentValue: T
+    return {
+      // Note: this works because the given observable always emits a value synchronously by concat-ing the given initialValue
+      getCurrentValue: () => currentValue,
+      subscribe: (callback: (value: T) => void) => {
+        const subscription = observable.subscribe(value => {
+          currentValue = value
+          callback(value)
+        })
+        return () => {
+          subscription.unsubscribe()
+        }
+      },
+    }
+  }, [observable])
+  return useSyncExternalStore(store.subscribe, store.getCurrentValue)
+}
+
 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 => {
-      if (isSync) {
-        syncVal = nextVal
-      } else {
-        setState(nextVal)
-      }
-    })
-    isSync = false
-    return syncVal
-  })
-
-  useIsomorphicEffect(() => {
-    // when the observable changes after initial (possibly sync render)
-    if (!isInitial.current) {
-      subscription.current = observable.subscribe(nextVal => setState(nextVal))
-    }
-    isInitial.current = false
-    return () => {
-      if (subscription.current) {
-        subscription.current.unsubscribe()
-        subscription.current = undefined
-      }
-    }
-  }, [observable])
-
-  return value
+  return useObservableSubscription(
+    useAsObservable(
+      observable,
+      pipe(
+        distinctUntilChanged(),
+        switchMap(observable =>
+          merge(
+            defer(() => of(getValue(initialValue))),
+            observable,
+          ),
+        ),
+      ),
+    ),
+  )
 }
 
 export function useMemoObservable<T>(

package/.idea/workspace.xml

@@ -1,228 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="9f1530e5-3e67-4ff9-b8bc-a40f03478761" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/../react-repl/src/Editor.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/Editor.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../react-repl/src/ShowError.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/ShowError.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../react-repl/src/transformers/babel.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../react-repl/src/transformers/babel.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../react-rx.dev/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../react-rx.dev/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../react-rx.dev/src/pages/Index/ReactRxReadme.md" beforeDir="false" afterPath="$PROJECT_DIR$/../react-rx.dev/src/pages/Index/ReactRxReadme.md" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/useObservable.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/useObservable.ts" afterDir="false" />
-    </list>
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="ChangesViewManager">
-    <option name="groupingKeys">
-      <option value="directory" />
-    </option>
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-    <option name="ROOT_SYNC" value="DONT_SYNC" />
-  </component>
-  <component name="GitSEFilterConfiguration">
-    <file-type-list>
-      <filtered-out-file-type name="LOCAL_BRANCH" />
-      <filtered-out-file-type name="REMOTE_BRANCH" />
-      <filtered-out-file-type name="TAG" />
-      <filtered-out-file-type name="COMMIT_BY_MESSAGE" />
-    </file-type-list>
-  </component>
-  <component name="MacroExpansionManager">
-    <option name="directoryName" value="iy052u10" />
-  </component>
-  <component name="ProjectId" id="1PI8FtTkoa1tFBP8398nQ82nYf0" />
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
-  <component name="ProjectViewState">
-    <option name="autoscrollToSource" value="true" />
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent">
-    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
-    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
-    <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
-    <property name="com.intellij.ide.scratch.LRUPopupBuilder$1/New Scratch File" value="JavaScript" />
-    <property name="full.screen.before.presentation.mode" value="true" />
-    <property name="last.edited.regexp" value="jsx{1,2}" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src" />
-    <property name="node.js.detected.package.eslint" value="true" />
-    <property name="node.js.detected.package.standard" value="true" />
-    <property name="node.js.detected.package.tslint" value="true" />
-    <property name="node.js.path.for.package.eslint" value="project" />
-    <property name="node.js.path.for.package.standard" value="project" />
-    <property name="node.js.path.for.package.tslint" value="project" />
-    <property name="node.js.selected.package.eslint" value="(autodetect)" />
-    <property name="node.js.selected.package.standard" value="" />
-    <property name="node.js.selected.package.tslint" value="$PROJECT_DIR$/node_modules/tslint" />
-    <property name="nodejs.jest.jest_package" value="$PROJECT_DIR$/node_modules/jest" />
-    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
-    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
-    <property name="nodejs_package_manager_path" value="npm" />
-    <property name="prettierjs.PrettierConfiguration.Package" value="$PROJECT_DIR$/node_modules/prettier" />
-    <property name="settings.editor.selected.configurable" value="project.propVCSSupport.Mappings" />
-    <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
-    <property name="vue.rearranger.settings.migration" value="true" />
-  </component>
-  <component name="RecentsManager">
-    <key name="CopyFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/src" />
-      <recent name="$PROJECT_DIR$/test-concurrent-mode" />
-      <recent name="$PROJECT_DIR$/website/src/examples" />
-      <recent name="$PROJECT_DIR$/src/__tests__" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev" />
-    </key>
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/website/src/examples" />
-      <recent name="$PROJECT_DIR$/src" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/src" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/webpack" />
-      <recent name="$PROJECT_DIR$/../react-rx.dev/webpack-configs" />
-    </key>
-  </component>
-  <component name="RunManager" selected="Jest.useObservable.test.tsx">
-    <configuration name="All Tests" type="JavaScriptTestRunnerJest" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="ALL" />
-      <method v="2" />
-    </configuration>
-    <configuration name="asObservable.test.tsx" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST_FILE" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
-      <method v="2" />
-    </configuration>
-    <configuration name="the returned observable should *not* receive a new value when component is rendered with an unchanged value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
-      <test-names>
-        <test-name value="the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
-      </test-names>
-      <method v="2" />
-    </configuration>
-    <configuration name="the returned observable should receive a new value when component is rendered with a new value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
-      <test-names>
-        <test-name value="the returned observable should receive a new value when component is rendered with a new value" />
-      </test-names>
-      <method v="2" />
-    </configuration>
-    <configuration name="the returned observable should receive a new value when component is rendered with an unchanged value" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/asObservable.test.tsx" />
-      <test-names>
-        <test-name value="the returned observable should receive a new value when component is rendered with an unchanged value" />
-      </test-names>
-      <method v="2" />
-    </configuration>
-    <configuration name="useAsObservable.test.tsx" type="JavaScriptTestRunnerJest" temporary="true" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST_FILE" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/useAsObservable.test.tsx" />
-      <method v="2" />
-    </configuration>
-    <configuration name="useObservable.test.tsx" type="JavaScriptTestRunnerJest" nameIsGenerated="true">
-      <node-interpreter value="project" />
-      <node-options value="" />
-      <jest-package value="$PROJECT_DIR$/node_modules/jest" />
-      <working-dir value="$PROJECT_DIR$" />
-      <envs />
-      <scope-kind value="TEST_FILE" />
-      <test-file value="$PROJECT_DIR$/src/__tests__/useObservable.test.tsx" />
-      <method v="2" />
-    </configuration>
-    <list>
-      <item itemvalue="Jest.All Tests" />
-      <item itemvalue="Jest.asObservable.test.tsx" />
-      <item itemvalue="Jest.the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
-      <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with a new value" />
-      <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with an unchanged value" />
-      <item itemvalue="Jest.useAsObservable.test.tsx" />
-      <item itemvalue="Jest.useObservable.test.tsx" />
-    </list>
-    <recent_temporary>
-      <list>
-        <item itemvalue="Jest.useAsObservable.test.tsx" />
-        <item itemvalue="Jest.asObservable.test.tsx" />
-        <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with a new value" />
-        <item itemvalue="Jest.the returned observable should *not* receive a new value when component is rendered with an unchanged value" />
-        <item itemvalue="Jest.the returned observable should receive a new value when component is rendered with an unchanged value" />
-      </list>
-    </recent_temporary>
-  </component>
-  <component name="RustProjectSettings">
-    <option name="toolchainHomeDirectory" value="$USER_HOME$/.cargo/bin" />
-    <option name="version" value="2" />
-  </component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="9f1530e5-3e67-4ff9-b8bc-a40f03478761" name="Default Changelist" comment="" />
-      <created>1610996869139</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1610996869139</updated>
-    </task>
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
-  </component>
-  <component name="Vcs.Log.Tabs.Properties">
-    <option name="TAB_STATES">
-      <map>
-        <entry key="MAIN">
-          <value>
-            <State />
-          </value>
-        </entry>
-      </map>
-    </option>
-    <option name="oldMeFiltersMigrated" value="true" />
-  </component>
-  <component name="VcsManagerConfiguration">
-    <ignored-roots>
-      <path value="$PROJECT_DIR$/../../_/parcel-plugin-mdx" />
-      <path value="$PROJECT_DIR$/test-concurrent-mode" />
-      <path value="$PROJECT_DIR$/test-concurrent-mode2" />
-      <path value="$PROJECT_DIR$/website" />
-    </ignored-roots>
-  </component>
-  <component name="com.intellij.coverage.CoverageDataManagerImpl">
-    <SUITE FILE_PATH="coverage/react_rx$All_Tests.info" NAME="All Tests Coverage Results" MODIFIED="1585859619310" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="JestJavaScriptTestRunnerCoverage" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" />
-    <SUITE FILE_PATH="coverage/react_rx$toObservable_test_tsx.info" NAME="toObservable.test.tsx Coverage Results" MODIFIED="1585859575939" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="JestJavaScriptTestRunnerCoverage" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" />
-  </component>
-</project>

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.4",
-    "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>
-    ))
-  )
-)