react-rx 1.0.0-beta.6 → 2.0.0

package/website/src/components/repl/Prelude.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import styled from 'styled-components'
-import {CodeMirrorMode} from './CodeMirrorMode'
-
-const Details = styled.details`
-  text-align: right;
-  white-space: pre;
-  background-color: #1f222a;
-  line-height: 1.4em;
-  border: 0;
-  box-sizing: border-box;
-`
-
-const Summary = styled.summary`
-  background-color: #242831;
-  display: inline-block;
-  color: #65737e;
-  font-size: 0.8em;
-  border-radius: 2px 2px 0 0;
-  margin: 1px 0 0 0;
-  text-transform: uppercase;
-  padding: 0.4em 0.9em;
-  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
-  -webkit-font-smoothing: antialiased;
-  outline: none;
-`
-
-const StyledCodeMirrorMode = styled(CodeMirrorMode)`
-  opacity: 0.7;
-  text-align: left;
-`
-
-interface Props {
-  mode: any
-  value: string
-}
-
-export const Prelude = (props: Props) => {
-  const [isOpen, setOpen] = React.useState(false)
-  return (
-    <Details>
-      <Summary onClick={() => setOpen(current => !current)}>
-        {isOpen ? 'hide prelude' : 'show prelude'}
-      </Summary>
-      <StyledCodeMirrorMode mode={props.mode}>
-        {props.value}
-      </StyledCodeMirrorMode>
-    </Details>
-  )
-}

package/website/src/components/repl/ShowError.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import styled from 'styled-components'
-
-interface Props {
-  title: string
-  children: React.ReactNode
-  className?: string
-}
-
-const Pre = styled.pre`
-  color: rgb(255, 100, 100);
-`
-
-const Heading = styled.h2`
-  padding: 3px:
-  color: #fff
-  padding: 8px;
-`
-
-export function ShowError(props: Props) {
-  return (
-    <div className={props.className}>
-      <Heading>{props.title}</Heading>
-      <Pre>{props.children}</Pre>
-    </div>
-  )
-}

package/website/src/components/repl/codemirror-lib.ts

@@ -1,8 +0,0 @@
-import * as codemirror from 'codemirror'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/jsx/jsx'
-import 'codemirror/addon/selection/active-line'
-import 'codemirror/addon/edit/matchbrackets'
-import 'codemirror/addon/edit/matchtags'
-
-export default codemirror

package/website/src/components/repl/codemirror-theme.css

@@ -1,131 +0,0 @@
-.cm-s-custom.CodeMirror {
-  background: rgb(32, 35, 42);
-  color: #f8f8f2;
-}
-
-.cm-s-custom div.CodeMirror-selected {
-  background: rgba(101, 115, 126, 0.33);
-}
-
-.cm-s-custom .CodeMirror-line::selection,
-.cm-s-custom .CodeMirror-line > span::selection,
-.cm-s-custom .CodeMirror-line > span > span::selection {
-  background: rgba(101, 115, 126, 0.33);
-}
-
-.cm-s-custom .CodeMirror-line::-moz-selection,
-.cm-s-custom .CodeMirror-line > span::-moz-selection,
-.cm-s-custom .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(101, 115, 126, 0.33);
-}
-
-.cm-s-custom .CodeMirror-gutters {
-  background: #304148;
-  border-right: 10px;
-}
-
-.cm-s-custom .CodeMirror-guttermarker {
-  color: white;
-}
-
-.cm-s-custom .CodeMirror-guttermarker-subtle {
-  color: #d0d0d0;
-}
-
-.cm-s-custom .CodeMirror-linenumber {
-  color: #d0d0d0;
-}
-
-.cm-s-custom .CodeMirror-cursor {
-  border-left: 1px solid #f8f8f0;
-}
-
-.cm-s-custom span.cm-comment {
-  color: #65737e;
-}
-
-.cm-s-custom span.cm-atom {
-  color: #c594c5;
-}
-
-.cm-s-custom span.cm-number {
-  color: #f99157;
-}
-
-.cm-s-custom span.cm-type {
-  color: #48aab5;
-}
-
-.cm-s-custom span.cm-property {
-  color: rgb(121, 182, 242);
-}
-
-.cm-s-custom span.cm-attribute,
-.cm-s-custom span.cm-keyword {
-  color: rgb(197, 165, 197);
-}
-
-.cm-s-custom span.cm-builtin {
-  color: #66d9ef;
-}
-
-.cm-s-custom span.cm-string {
-  color: #8dc891;
-}
-
-.cm-s-custom span.cm-variable {
-  color: #d8d8d8;
-}
-
-.cm-s-custom span.cm-variable-2,
-.cm-s-custom span.cm-variable-3 {
-  color: #f8f8f2;
-}
-
-.cm-s-custom span.cm-def {
-  color: #fac863;
-}
-
-.cm-s-custom span.cm-bracket {
-  color: #5fb3b3;
-}
-
-.cm-s-custom span.cm-tag {
-  color: rgb(252, 146, 158);
-}
-
-.cm-s-custom span.cm-tag.cm-bracket {
-  color: rgb(88, 200, 252);
-}
-
-.cm-s-custom span.cm-header {
-  color: #c594c5;
-}
-
-.cm-s-custom span.cm-link {
-  color: #c594c5;
-}
-
-.cm-s-custom span.cm-error {
-  background: #c594c5;
-  color: #f8f8f0;
-}
-
-.cm-s-custom .CodeMirror-activeline-background {
-  background: rgba(101, 115, 126, 0.1);
-}
-
-.cm-s-custom .CodeMirror-nonmatchingbracket {
-  color: #fa87b5 !important;
-}
-
-.cm-s-custom .CodeMirror-matchingbracket {
-  color: #fa87b5 !important;
-  background-color: rgba(255, 255, 255, 0.22) !important;
-  border-radius: 2px;
-}
-
-.cm-s-custom .CodeMirror-matchingtag {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  border-radius: 2px;
-}

package/website/src/components/repl/compile/babel.ts

@@ -1,21 +0,0 @@
-import * as babel from '@babel/standalone'
-import transformTs from '@babel/plugin-transform-typescript'
-import transformJsx from '@babel/plugin-transform-react-jsx'
-import optionalChaining from '@babel/plugin-proposal-optional-chaining'
-
-interface Options {
-  filename?: string
-  plugins?: any[]
-}
-
-export function compile(code: string, options: Options = {}) {
-  return babel.transform(code, {
-    filename: options.filename || 'Unknown.tsx',
-    plugins: [
-      ...(options.plugins || []),
-      optionalChaining,
-      [transformTs, {allExtensions: true, isTSX: true}],
-      transformJsx
-    ]
-  })
-}

package/website/src/components/repl/eval/evalCallback.ts

@@ -1,27 +0,0 @@
-import {evalCode} from './evalCode'
-
-export const evalCallback = (
-  code: string,
-  callbackName = 'callback',
-  scope = {}
-): any => {
-  let renderCount = 0
-  let renderRes = null
-
-  const callback = (arg: any) => {
-    renderCount++
-    renderRes = arg
-  }
-
-  evalCode(code, {...scope, [callbackName]: callback})
-
-  if (renderCount === 0) {
-    throw new Error(`${callbackName}() was not called`)
-  }
-
-  if (renderCount > 1) {
-    throw new Error(`${callbackName}() was called more than once`)
-  }
-
-  return renderRes
-}

package/website/src/components/repl/eval/evalCode.ts

@@ -1,7 +0,0 @@
-export const evalCode = (code: string, scope: {[v: string]: any}) => {
-  const scopeKeys = Object.keys(scope)
-  const scopeValues = scopeKeys.map(key => scope[key])
-  // eslint-disable-next-line no-new-func
-  const res = new Function(...scopeKeys, code)
-  return res(...scopeValues)
-}

package/website/src/components/repl/eval/evalExpression.ts

@@ -1,4 +0,0 @@
-import {evalCode} from './evalCode'
-
-export const evalExpression = (code: string, scope = {}) =>
-  evalCode(`return ${code}`, scope)

package/website/src/components/repl/eval/evalReactDomRender.ts

@@ -1,23 +0,0 @@
-import {evalCode} from './evalCode'
-
-export const evalReactDomRender = (code: string, scope = {}): any => {
-  let renderCount = 0
-  let renderRes = null
-
-  const callback = (arg: any) => {
-    renderCount++
-    renderRes = arg
-  }
-
-  evalCode(code, {...scope, ReactDOM: {render: callback}})
-
-  if (renderCount === 0) {
-    throw new Error(`ReactDOM.render() was never called`)
-  }
-
-  if (renderCount > 1) {
-    throw new Error(`ReactDOM.render() was called more than once`)
-  }
-
-  return renderRes
-}

package/website/src/components/repl/index.ts

@@ -1 +0,0 @@
-export {CodeBlock} from './CodeBlock'

package/website/src/components/repl/runMode.ts

@@ -1,42 +0,0 @@
-import {Mode} from 'codemirror'
-import CodeMirror from './codemirror-lib'
-import {Observable} from 'rxjs'
-
-interface Token {
-  style: string | null
-  token: string
-}
-
-export interface ModeSpec {
-  name: string
-
-  [key: string]: any
-}
-
-export function runMode(
-  source: string,
-  modespec: ModeSpec | null,
-  options?: {state?: any; tabSize: number}
-): Observable<Token[]> {
-  return new Observable(subscriber => {
-    const mode: Mode<any> = CodeMirror.getMode(CodeMirror.defaults, modespec)
-    const lines = CodeMirror.splitLines(source)
-    const state = (options && options.state) || CodeMirror.startState(mode)
-
-    for (let i = 0, e = lines.length; i < e; ++i) {
-      const tokens = []
-      const stream = new CodeMirror.StringStream(lines[i])
-      if (!stream.string && mode.blankLine) mode.blankLine(state)
-      while (!stream.eol()) {
-        const style = mode.token!(stream, state)
-        tokens.push({token: stream.current(), style})
-        stream.start = stream.pos
-      }
-      if (i !== lines.length - 1) {
-        tokens.push({token: '\n', style: null})
-      }
-      subscriber.next(tokens)
-    }
-    subscriber.complete()
-  })
-}

package/website/src/datastores/location.ts

@@ -1,14 +0,0 @@
-import {createBrowserHistory, Location} from 'history'
-import {Observable} from 'rxjs'
-import {publishReplay, refCount} from 'rxjs/operators'
-
-const history = createBrowserHistory()
-
-export const location$ = new Observable<Location>((subscriber) => {
-  subscriber.next(history.location)
-  return history.listen((update) => subscriber.next(update.location))
-}).pipe(publishReplay(1), refCount())
-
-export const navigate = (url: string) => {
-  history.push(url)
-}

package/website/src/datastores/page.ts

@@ -1,11 +0,0 @@
-import {map} from 'rxjs/operators'
-import {location$} from './location'
-import {NOT_FOUND, Page, pages} from '../pages/pages'
-import {Observable} from 'rxjs'
-
-export const page$: Observable<Page> = location$.pipe(
-  map(
-    location =>
-      pages.find(page => page.route === location.pathname) || NOT_FOUND
-  )
-)

package/website/src/datastores/pageTransition.ts

@@ -1,97 +0,0 @@
-import {
-  map,
-  publishReplay,
-  refCount,
-  scan,
-  skip,
-  switchMap,
-  tap
-} from 'rxjs/operators'
-import {concat, from, Observable, of} from 'rxjs'
-import * as React from 'react'
-import {page$} from './page'
-import {Page} from '../pages/pages'
-
-interface PageTransition {
-  title: string
-  isTransitioning: boolean
-  component: null | React.ComponentType<any>
-}
-
-interface TransitionStart {
-  type: 'transitionStart'
-  page: Page
-  component: null
-}
-
-interface TransitionEnd {
-  type: 'transitionEnd'
-  page: Page
-  component: React.ComponentType<any>
-}
-
-type TransitionEvent = TransitionStart | TransitionEnd
-
-interface TransitionState {
-  isTransitioning: boolean
-  prev: null | Page
-  current: null | Page
-  next: null | Page
-  component: null | React.ComponentType
-}
-
-const transitionStart = (page: Page): TransitionStart => ({
-  type: 'transitionStart',
-  page,
-  component: null
-})
-
-const transitionEnd = (page: Page) => (
-  component: React.ComponentType<any>
-): TransitionEnd => ({
-  type: 'transitionEnd',
-  page,
-  component
-})
-
-const INITIAL_TRANSITION_STATE: TransitionState = {
-  isTransitioning: true,
-  component: null,
-  next: null,
-  current: null,
-  prev: null
-}
-
-export const pageTransition$: Observable<TransitionState> = page$.pipe(
-  switchMap(page =>
-    concat(
-      of(transitionStart(page)),
-      from(page.load()).pipe(map(transitionEnd(page)))
-    )
-  ),
-  scan(
-    (
-      acc: TransitionState,
-      event: TransitionStart | TransitionEnd
-    ): TransitionState => {
-      return event.type === 'transitionStart'
-        ? {
-            isTransitioning: true,
-            component: acc.component,
-            prev: acc.next || acc.current,
-            current: acc.current || null,
-            next: event.page
-          }
-        : {
-            isTransitioning: false,
-            component: event.component,
-            current: acc.next,
-            next: null,
-            prev: acc.current
-          }
-    },
-    INITIAL_TRANSITION_STATE
-  ),
-  publishReplay(1),
-  refCount()
-)

package/website/src/entries/main.css

@@ -1,2 +0,0 @@
-@import '~codemirror/lib/codemirror.css';
-@import '../components/repl/codemirror-theme.css';

package/website/src/entries/main.tsx

@@ -1,6 +0,0 @@
-import './main.css'
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import {App} from '../App'
-
-ReactDOM.render(<App />, document.getElementById('app'))

package/website/src/examples/FizzBuzz/FizzBuzzExample.tsx

@@ -1,39 +0,0 @@
-import {
-  map,
-  React,
-  ReactDOM,
-  rxComponent,
-  take,
-  timer
-} from '../_utils/globalScope'
-//@endimport
-
-const FizzBuzzExample = rxComponent(
-  timer(0, 500).pipe(
-    map(n => n + 1),
-    map(n => {
-      const divBy3 = n % 3 === 0
-      const divBy5 = n % 5 === 0
-      const divBy3And5 = divBy3 && divBy5
-      return divBy3And5
-        ? 'Fizz Buzz'
-        : divBy3
-        ? 'Fizz'
-        : divBy5
-        ? 'Buzz'
-        : String(n)
-    }),
-    // map((seq: string[], curr) => seq.concat(curr), []),
-    map((n, i) => (
-      <div key={n + i}>
-        {i + 1}: {n}
-      </div>
-    )),
-    take(100)
-  )
-)
-
-ReactDOM.render(
-  <FizzBuzzExample />,
-  document.getElementById('fizz-buzz-example')
-)

package/website/src/examples/FizzBuzz/index.tsx

@@ -1,9 +0,0 @@
-import {Example} from '../../pages/Examples/Examples'
-
-const fs = require('fs')
-
-export const FizzBuzzExample: Example = {
-  id: 'fizz-buzz',
-  title: 'Fizz Buzz',
-  source: fs.readFileSync(`${__dirname}/FizzBuzzExample.tsx`, 'utf-8')
-}

package/website/src/examples/_utils/globalScope.ts

@@ -1,45 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import * as RxJS from 'rxjs'
-import * as operators from 'rxjs/operators'
-
-const {of, from, concat, merge} = RxJS
-const {timer, interval, throwError, combineLatest, Observable} = RxJS
-
-const {map, filter, reduce, scan, tap} = operators
-const {concatMap, mergeMap, switchMap, mapTo} = operators
-const {startWith, catchError, take} = operators
-//@endimport
-
-export {of, from, timer, interval, concat, merge, throwError, combineLatest, Observable}
-export {
-  map,
-  filter,
-  reduce,
-  scan,
-  concatMap,
-  tap,
-  mapTo,
-  mergeMap,
-  startWith,
-  take,
-  switchMap,
-  catchError
-}
-
-export {React, ReactDOM}
-export {RxJS, operators}
-
-export {
-  useObservable,
-  useMemoObservable,
-  rxComponent,
-  context,
-  handler,
-  state,
-  elementRef,
-  forwardRef,
-  useAsObservable
-} from 'react-rx'
-
-export {observableCallback} from 'observable-callback'