react-rx 1.0.0-beta.3 → 1.0.0

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

@@ -0,0 +1,147 @@
+import * as React from 'react'
+
+import * as globalScope from '../../examples/_utils/globalScope'
+import {Checkerboard} from './Checkerboard'
+import {ShowError} from './ShowError'
+import {CodeMirror} from './CodeMirror'
+import {compile} from './compile/babel'
+import {evalReactDomRender} from './eval/evalReactDomRender'
+import {Prelude} from './Prelude'
+import {EvalCode} from './EvalCode'
+import './codemirror-lib'
+import styled from 'styled-components'
+
+const fs = require('fs')
+
+interface Scope {
+  [variableName: string]: any
+}
+
+interface Props {
+  source: string
+  scope?: Scope
+  filename: string
+  prelude?: string
+}
+
+const tryCompile = (code: string, filename: string) => {
+  try {
+    return [null, compile(code, {filename})?.code || '']
+  } catch (error) {
+    return [error]
+  }
+}
+
+const evalRender = (code: string, scope: Scope = {}) => {
+  return evalReactDomRender(code, {
+    ...scope,
+    ...globalScope
+  })
+}
+
+const COMMON_PRELUDE = `import {rxComponent, observeEvent, observeContext, observeState, forwardRef} from 'react-rx'\n${
+  fs
+    .readFileSync(`${__dirname}/../../examples/_utils/globalScope.ts`, 'utf-8')
+    .split('//@endimport')[0]
+}`
+
+const stripImports = (str: string) => {
+  return str
+    .split('//@endimport')
+    .slice(-1)[0]
+    .trim()
+}
+
+const CODEMIRROR_MODE = {
+  name: 'jsx',
+  base: {name: 'javascript', typescript: true}
+}
+
+const CODEMIRROR_OPTIONS = {
+  theme: 'custom',
+  smartIndent: false,
+  tabSize: 2,
+  mode: CODEMIRROR_MODE
+}
+
+const StyledWrapper = styled.div`
+  @media (max-width: 979px) {
+    display: block;
+  }
+  @media (min-width: 1280px) {
+    display: flex;
+    align-items: stretch;
+    flex-direction: row;
+  }
+`
+const Header = styled.div`
+  color: #d8d8d8;
+  font-size: 0.9em;
+  text-transform: uppercase;
+  padding: 0.5em 1.5em;
+`
+const BORDER_RADIUS = 0.5
+const Column = styled.div<{type: 'editor' | 'result'}>`
+  @media (min-width: 1280px) {
+    border-radius: ${props =>
+      props.type === 'editor'
+        ? `${BORDER_RADIUS}em 0 0 ${BORDER_RADIUS}em`
+        : `0 ${BORDER_RADIUS}em ${BORDER_RADIUS}em 0`};
+    padding: ${props =>
+      props.type === 'editor' ? '0 1px 0.5em 0' : '0 0 0.5em 1px'};
+  }
+  @media (max-width: 1279px) {
+    border-radius: ${props =>
+      props.type === 'editor'
+        ? `${BORDER_RADIUS}em ${BORDER_RADIUS}em 0 0`
+        : `0 0 ${BORDER_RADIUS}em ${BORDER_RADIUS}em`};
+    padding: ${props => (props.type === 'editor' ? '0' : '0 0 0.5em 0')};
+  }
+  flex: 0 0 ${props => (props.type === 'editor' ? 60 : 40)}%;
+  background: #282c34;
+`
+
+export function CodeBlock(props: Props) {
+  const source = stripImports(props.source)
+  const [code, setCode] = React.useState(source.trim())
+
+  const [compileError, transformed] = tryCompile(code, props.filename)
+  return (
+    <StyledWrapper>
+      <Column type="editor">
+        <Header>Live editor</Header>
+        <Prelude
+          mode={CODEMIRROR_MODE}
+          value={`${COMMON_PRELUDE}${props.prelude ? props.prelude : ''}`}
+        />
+        <CodeMirror
+          value={code}
+          options={CODEMIRROR_OPTIONS}
+          onBeforeChange={(editor, data, value) => {
+            setCode(value)
+          }}
+        />
+      </Column>
+      <Column type="result">
+        <Header>Result</Header>
+        <Checkerboard>
+          <div style={{padding: '2em'}}>
+            {compileError ? (
+              <ShowError title="Compile error">
+                {compileError.message}
+              </ShowError>
+            ) : (
+              <EvalCode
+                code={transformed}
+                evalWith={src => evalRender(src, props.scope)}
+                renderError={error => (
+                  <ShowError title="Runtime error">{error.message}</ShowError>
+                )}
+              />
+            )}
+          </div>
+        </Checkerboard>
+      </Column>
+    </StyledWrapper>
+  )
+}

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components'
+import {Controlled} from 'react-codemirror2'
+
+const SCROLLBAR_BG_COLOR = '#1f222a'
+const SCROLLBAR_THUMB_COLOR = '#575757'
+
+export const CodeMirror = styled(Controlled)`
+  font-size: 0.8em;
+  background-color: #282c34;
+
+  & ::-webkit-scrollbar {
+    width: 11px;
+  }
+  & {
+    scrollbar-width: thin;
+    scrollbar-color: ${SCROLLBAR_THUMB_COLOR} ${SCROLLBAR_BG_COLOR};
+  }
+  
+  & ::-webkit-scrollbar-track {
+    background: ${SCROLLBAR_BG_COLOR};
+  }
+  & ::-webkit-scrollbar-thumb {
+    background-color: ${SCROLLBAR_THUMB_COLOR} ;
+    border-radius: 6px;
+    border: 3px solid ${SCROLLBAR_BG_COLOR};
+  }
+  .CodeMirror-scroll {
+    max-height: calc(100vh - 24em);
+  }
+  .CodeMirror {
+    padding: 0.6rem;
+    height: auto;
+    font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.4em;
+  }
+}`

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

@@ -0,0 +1,67 @@
+import {rxComponent} from 'react-rx'
+import {map, switchMap, toArray} from 'rxjs/operators'
+import * as React from 'react'
+import styled from 'styled-components'
+import {runMode} from './runMode'
+
+export interface CodeMirrorModeProps {
+  mode: null | {name: string; base?: any}
+  highlighted?: number[]
+  children: string
+  className?: string
+}
+
+export const CodeMirrorMode = rxComponent<CodeMirrorModeProps>(
+  (props$) => {
+    return props$.pipe(
+      switchMap((props) =>
+        runMode(props.children, props.mode).pipe(
+          toArray(),
+          map((lines, i) => (
+            <Code
+              key={`line-${i}`}
+              className={`cm-s-custom${
+                props.className ? ` ${props.className}` : ''
+              }`}
+            >
+              {lines.map((line, lineNo) => (
+                <div
+                  key={`line-${i}-${lineNo}`}
+                  className={`cm-line${
+                    (props.highlighted || []).includes(lineNo + 1)
+                      ? ' CodeMirror-selected'
+                      : ''
+                  }`}
+                >
+                  {line.map((token, i) =>
+                    token.style ? (
+                      <span key={i} className={`cm-${token.style}`}>
+                        {token.token}
+                      </span>
+                    ) : (
+                      token.token
+                    )
+                  )}
+                </div>
+              ))}
+            </Code>
+          ))
+        )
+      )
+    )
+  }
+)
+
+const Code = styled.div`
+  font-size: 0.8em;
+
+  background-color: rgb(40, 44, 52);
+  color: #fff;
+  margin: 0;
+  white-space: pre;
+  overflow: auto;
+  padding: 0.9rem;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.4em;
+`

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

@@ -0,0 +1,55 @@
+import * as React from 'react'
+
+interface EvalErrorBoundaryProps {
+  code: string
+  renderError: (error: Error) => React.ReactNode
+}
+
+interface EvalErrorBoundaryState {
+  error: Error | null
+}
+
+class EvalErrorBoundary extends React.Component<
+  EvalErrorBoundaryProps,
+  EvalErrorBoundaryState
+> {
+  state: EvalErrorBoundaryState = {error: null}
+
+  static getDerivedStateFromError(error: Error) {
+    return {error}
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<EvalErrorBoundaryProps>,
+    prevState: Readonly<EvalErrorBoundaryState>
+  ) {
+    if (prevProps.code !== this.props.code) {
+      this.setState({error: null})
+    }
+  }
+
+  render() {
+    const {error} = this.state
+    return error ? this.props.renderError(error) : this.props.children
+  }
+}
+
+type Runner = (code: string) => React.ReactNode
+
+const Eval = (props: {with: Runner; code: string}) => (
+  <>{props.with(props.code)}</>
+)
+
+interface Props {
+  code: string
+  renderError: (error: Error) => React.ReactNode
+  evalWith: Runner
+}
+
+export function EvalCode(props: Props) {
+  return (
+    <EvalErrorBoundary code={props.code} renderError={props.renderError}>
+      <Eval with={props.evalWith} code={props.code} />
+    </EvalErrorBoundary>
+  )
+}

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,131 @@
+.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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,7 @@
+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

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

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

@@ -0,0 +1,23 @@
+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

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

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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,11 @@
+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
+  )
+)