react-rx 1.0.0-beta.4 → 1.0.1

package/website/src/components/LoadPage.tsx

@@ -1,60 +0,0 @@
-import {rxComponent} from 'react-rx'
-import {map, scan, switchMap} from 'rxjs/operators'
-import {Page} from '../pages/pages'
-import {concat, from, of} from 'rxjs'
-import * as React from 'react'
-import {Header} from './Header'
-import {Container, Content} from '../pages/styles'
-
-interface Props {
-  page: Page
-}
-
-interface PageWrapperProps {
-  title: string
-  isLoading: boolean
-  component: React.ComponentType<any>
-}
-
-const PageWrapper = (props: PageWrapperProps) => {
-  return (
-    <>
-      <div style={{position: 'fixed', top: 0, zIndex: 10000}}>
-        {props.isLoading ? `Loading ` : 'Loaded '}
-        {props.title}
-      </div>
-      {props.component && <props.component />}
-    </>
-  )
-}
-
-const INITIAL_COMPONENT = () => (
-  <>
-    <Header />
-    <Container>
-      <Content>Loading</Content>
-    </Container>
-  </>
-)
-
-export const LoadPage = rxComponent<Props>(props$ => {
-  return props$.pipe(
-    map(props => props.page),
-    switchMap(page =>
-      concat(
-        of({title: page.title, isLoading: true, component: INITIAL_COMPONENT}),
-        from(page.load()).pipe(
-          map(component => ({
-            isLoading: false,
-            title: page.title,
-            component
-          }))
-        )
-      )
-    ),
-    scan((prev, next) => ({...prev, ...next})),
-    map(({isLoading, title, component}) => (
-      <PageWrapper title={title} component={component} isLoading={isLoading} />
-    ))
-  )
-})

package/website/src/components/Sidebar.tsx

@@ -1,88 +0,0 @@
-import styled from 'styled-components'
-import {COLORS, media} from '../theme'
-import * as React from 'react'
-import Burger from 'react-css-burger'
-
-const SidebarContentInner = styled.div`
-  ${media.greaterThan('large')} {
-    position: fixed;
-  }
-  > ul {
-    overflow-y: auto;
-    bottom: 2em;
-    height: calc(100vh - 18em);
-  }
-  ul {
-    padding: 0 0 0 0.5em;
-    li {
-      padding: 0.3em 0;
-      list-style: none;
-      a,
-      a:link,
-      a:visited {
-        color: ${COLORS.link};
-      }
-      a.selected {
-        border-bottom: 3px solid ${COLORS.secondary};
-      }
-    }
-  }
-`
-
-const SidebarWrapper = styled.div<{isOpen: boolean}>`
-  ${media.lessThan('large')} {
-    position: fixed;
-    left: 0;
-    padding: 0;
-    z-index: 2000;
-    top: 4.8em;
-  }
-  ${media.greaterThan('large')} {
-    button {
-      display: none;
-    }
-  }
-  ${media.lessThan('large')} {
-    border-radius: 0 0.5em 0.5em 0;
-    box-shadow: ${props =>
-      props.isOpen ? `0 4px 10px 0 ${COLORS.shadow}` : '0'};
-    background-color: ${props =>
-      props.isOpen ? '#eff0f3' : COLORS.header.background};
-  }
-`
-const SidebarContent = styled.div<{isOpen: boolean}>`
-  padding: 2em 0 0 1em;
-  width: 250px;
-  max-height: calc(100vh - 12em);
-
-  ${media.lessThan('large')} {
-    display: ${(props: any) => (props.isOpen ? '' : 'none')};
-  }
-  ${media.greaterThan('large')} {
-    width: 230px;
-  }
-`
-
-export const Sidebar = (props: {
-  heading: string
-  children: React.ReactNode
-}) => {
-  const [isOpen, setOpen] = React.useState(false)
-  return (
-    <SidebarWrapper isOpen={isOpen}>
-      <Burger
-        scale={0.6}
-        active={isOpen}
-        marginLeft="0"
-        marginTop="0"
-        onClick={() => setOpen(isOpen => !isOpen)}
-      />
-      <SidebarContent onClick={e => setOpen(false)} isOpen={isOpen}>
-        <SidebarContentInner>
-          <h4>{props.heading}</h4>
-          {props.children}
-        </SidebarContentInner>
-      </SidebarContent>
-    </SidebarWrapper>
-  )
-}

package/website/src/components/logos/Github.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react'
-
-export const GithubLogo = (props: React.ComponentProps<'svg'>) => (
-  <svg {...props} viewBox="0 0 496 512" fill="currentColor">
-    <path
-      fill="currentColor"
-      d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
-    />
-  </svg>
-)

package/website/src/components/logos/React.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-export const ReactLogo = (props: React.ComponentProps<'svg'>) => (
-  <svg
-    {...props}
-    viewBox="0 0 256 230"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="xMinYMin meet"
-  >
-    <path
-      d="M.754 114.75c0 19.215 18.763 37.152 48.343 47.263-5.907 29.737-1.058 53.706 15.136 63.045 16.645 9.6 41.443 2.955 64.98-17.62 22.943 19.744 46.13 27.514 62.31 18.148 16.63-9.627 21.687-35.221 15.617-65.887 30.81-10.186 48.044-25.481 48.044-44.949 0-18.769-18.797-35.006-47.979-45.052 6.535-31.933.998-55.32-15.867-65.045-16.259-9.376-39.716-1.204-62.996 19.056C104.122 2.205 80.897-4.36 64.05 5.392 47.806 14.795 43.171 39.2 49.097 69.487 20.515 79.452.754 96.057.754 114.75z"
-      fill="#FFF"
-    />
-    <path
-      d="M201.025 79.674a151.364 151.364 0 0 0-7.274-2.292 137.5 137.5 0 0 0 1.124-4.961c5.506-26.728 1.906-48.26-10.388-55.348-11.787-6.798-31.065.29-50.535 17.233a151.136 151.136 0 0 0-5.626 5.163 137.573 137.573 0 0 0-3.744-3.458c-20.405-18.118-40.858-25.752-53.139-18.643-11.776 6.817-15.264 27.06-10.307 52.39a150.91 150.91 0 0 0 1.67 7.484c-2.894.822-5.689 1.698-8.363 2.63-23.922 8.34-39.2 21.412-39.2 34.97 0 14.004 16.4 28.05 41.318 36.566a128.44 128.44 0 0 0 6.11 1.91 147.813 147.813 0 0 0-1.775 8.067c-4.726 24.89-1.035 44.653 10.71 51.428 12.131 6.995 32.491-.195 52.317-17.525 1.567-1.37 3.14-2.823 4.715-4.346a148.34 148.34 0 0 0 6.108 5.573c19.204 16.525 38.17 23.198 49.905 16.405 12.12-7.016 16.058-28.247 10.944-54.078-.39-1.973-.845-3.988-1.355-6.04 1.43-.422 2.833-.858 4.202-1.312 25.904-8.582 42.757-22.457 42.757-36.648 0-13.607-15.77-26.767-40.174-35.168z"
-      fill="#53C1DE"
-    />
-    <path
-      d="M195.406 142.328c-1.235.409-2.503.804-3.795 1.187-2.86-9.053-6.72-18.68-11.442-28.625 4.507-9.71 8.217-19.213 10.997-28.208 2.311.67 4.555 1.375 6.717 2.12 20.91 7.197 33.664 17.84 33.664 26.04 0 8.735-13.775 20.075-36.14 27.486zm-9.28 18.389c2.261 11.422 2.584 21.749 1.086 29.822-1.346 7.254-4.052 12.09-7.398 14.027-7.121 4.122-22.35-1.236-38.772-15.368-1.883-1.62-3.78-3.35-5.682-5.18 6.367-6.964 12.73-15.06 18.94-24.05 10.924-.969 21.244-2.554 30.603-4.717.46 1.86.87 3.683 1.223 5.466zm-93.85 43.137c-6.957 2.457-12.498 2.527-15.847.596-7.128-4.11-10.09-19.98-6.049-41.265a138.507 138.507 0 0 1 1.65-7.502c9.255 2.047 19.5 3.52 30.45 4.408 6.251 8.797 12.798 16.883 19.396 23.964a118.863 118.863 0 0 1-4.305 3.964c-8.767 7.664-17.552 13.1-25.294 15.835zm-32.593-61.58c-11.018-3.766-20.117-8.66-26.354-14-5.604-4.8-8.434-9.565-8.434-13.432 0-8.227 12.267-18.722 32.726-25.855a139.276 139.276 0 0 1 7.777-2.447c2.828 9.197 6.537 18.813 11.013 28.537-4.534 9.869-8.296 19.638-11.15 28.943a118.908 118.908 0 0 1-5.578-1.746zm10.926-74.37c-4.247-21.703-1.427-38.074 5.67-42.182 7.56-4.376 24.275 1.864 41.893 17.507 1.126 1 2.257 2.047 3.39 3.13-6.564 7.049-13.051 15.074-19.248 23.82-10.627.985-20.8 2.567-30.152 4.686a141.525 141.525 0 0 1-1.553-6.962zm97.467 24.067a306.982 306.982 0 0 0-6.871-11.3c7.21.91 14.117 2.12 20.603 3.601-1.947 6.241-4.374 12.767-7.232 19.457a336.42 336.42 0 0 0-6.5-11.758zm-39.747-38.714c4.452 4.823 8.911 10.209 13.297 16.052a284.245 284.245 0 0 0-26.706-.006c4.39-5.789 8.887-11.167 13.409-16.046zm-40.002 38.78a285.24 285.24 0 0 0-6.378 11.685c-2.811-6.667-5.216-13.222-7.18-19.552 6.447-1.443 13.322-2.622 20.485-3.517a283.79 283.79 0 0 0-6.927 11.384zm7.133 57.683c-7.4-.826-14.379-1.945-20.824-3.348 1.995-6.442 4.453-13.138 7.324-19.948a283.494 283.494 0 0 0 6.406 11.692 285.27 285.27 0 0 0 7.094 11.604zm33.136 27.389c-4.575-4.937-9.138-10.397-13.595-16.27 4.326.17 8.737.256 13.22.256 4.606 0 9.159-.103 13.64-.303-4.4 5.98-8.843 11.448-13.265 16.317zm46.072-51.032c3.02 6.884 5.566 13.544 7.588 19.877-6.552 1.495-13.625 2.699-21.078 3.593a337.537 337.537 0 0 0 6.937-11.498 306.632 306.632 0 0 0 6.553-11.972zm-14.915 7.15a316.478 316.478 0 0 1-10.84 17.49c-6.704.479-13.632.726-20.692.726-7.031 0-13.871-.219-20.458-.646A273.798 273.798 0 0 1 96.72 133.28a271.334 271.334 0 0 1-9.64-18.206 273.864 273.864 0 0 1 9.611-18.216v.002a271.252 271.252 0 0 1 10.956-17.442c6.72-.508 13.61-.774 20.575-.774 6.996 0 13.895.268 20.613.78a290.704 290.704 0 0 1 10.887 17.383 316.418 316.418 0 0 1 9.741 18.13 290.806 290.806 0 0 1-9.709 18.29zm19.913-107.792c7.566 4.364 10.509 21.961 5.755 45.038a127.525 127.525 0 0 1-1.016 4.492c-9.374-2.163-19.554-3.773-30.212-4.773-6.209-8.841-12.642-16.88-19.1-23.838a141.92 141.92 0 0 1 5.196-4.766c16.682-14.518 32.273-20.25 39.377-16.153z"
-      fill="#FFF"
-    />
-    <path
-      d="M128.221 94.665c11.144 0 20.177 9.034 20.177 20.177 0 11.144-9.033 20.178-20.177 20.178-11.143 0-20.177-9.034-20.177-20.178 0-11.143 9.034-20.177 20.177-20.177"
-      fill="#53C1DE"
-    />
-  </svg>
-)

package/website/src/components/logos/ReactRxLogo.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react'
-import {CSSProperties} from 'react'
-import {RxJSLogo} from './RxJs'
-import styled from 'styled-components'
-import {ReactLogo} from './React'
-
-const StyledRxJSLogo = styled(RxJSLogo)`
-  width: ${props => props.width};
-  opacity: 0.7;
-  position: absolute;
-`
-const StyledReactLogo = styled(ReactLogo)`
-  width: ${props => props.width};
-  opacity: 0.7;
-  position: absolute;
-`
-
-export function ReactRxLogo(props: {
-  className?: string
-  style?: CSSProperties
-  size: string
-}) {
-  return (
-    <div
-      className={props.className}
-      style={{
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        position: 'relative',
-        width: props.size,
-        height: props.size,
-        ...props.style
-      }}
-    >
-      <StyledReactLogo width={props.size} height={props.size} />
-      <StyledRxJSLogo width={props.size} height={props.size} />
-    </div>
-  )
-}

package/website/src/components/logos/RxJs.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react'
-
-export const RxJSLogo = (props: React.ComponentProps<'svg'>) => (
-  <svg
-    {...props}
-    viewBox="12.1 8.4 262.8 272.2"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <linearGradient
-      id="a"
-      gradientUnits="userSpaceOnUse"
-      x1="53.496"
-      x2="177.932"
-      y1="247.701"
-      y2="115.323"
-    >
-      <stop offset="0" stopColor="#e01d84" />
-      <stop offset=".401" stopColor="#df1d85" />
-      <stop offset=".77" stopColor="#932c87" />
-      <stop offset="1" stopColor="#5d2f88" />
-    </linearGradient>
-    <radialGradient
-      id="b"
-      cx="190.456"
-      cy="80.2"
-      gradientTransform="matrix(1 .00239 -.002 .8362 .16 12.685)"
-      gradientUnits="userSpaceOnUse"
-      r="121.582"
-    >
-      <stop offset="0" stopColor="#e01d84" />
-      <stop offset=".139" stopColor="#de1e85" />
-      <stop offset=".285" stopColor="#d62085" />
-      <stop offset=".434" stopColor="#c92386" />
-      <stop offset=".586" stopColor="#b72786" />
-      <stop offset=".739" stopColor="#9d2b87" />
-      <stop offset=".891" stopColor="#7c2e88" />
-      <stop offset="1" stopColor="#5d2f88" />
-    </radialGradient>
-    <linearGradient
-      id="c"
-      gradientUnits="userSpaceOnUse"
-      x1="83.212"
-      x2="137.371"
-      y1="62.336"
-      y2="62.336"
-    >
-      <stop offset="0" stopColor="#e01d84" />
-      <stop offset=".238" stopColor="#da1e85" />
-      <stop offset=".658" stopColor="#c72085" />
-      <stop offset=".999" stopColor="#b52284" />
-    </linearGradient>
-    <path
-      d="M29.6 175.3c-5.2-16.2-6.7-33.3-3.7-50.9 1.3-7.3 3.3-14.3 5.5-21.4 0 0 13.8-45.3 60.5-66 0 0 16.1-8.5 40.3-9.1 0 0-3.3-3.2-5.4-4.6-11.4-7.6-28.4-10.1-38.7.6-3.1 3.2-5.7 6.7-8.6 9.9-3.3 3.6-7.3 6.6-11.9 8.3-4 1.5-8 1.2-12.1 1.9-4.2.7-8.5 2.2-11.9 4.9-3.7 3-5.2 7-5.6 11.6-.4 3.6-.3 7.3-.5 10.9C37 82 33.6 85 26 90.9c-3.2 2.4-5.9 5.6-7.9 9-6 10.6 3.6 21.6 4.1 32.3.1 2.2-.1 4.4-.9 6.5-.8 2.3-2.4 3.8-3.7 5.7-1.8 2.5-3 5.5-2.5 8.6s2.1 6 3.6 8.7c2.9 4.8 6.5 9.1 10.3 13.2.2 0 .4.2.6.4"
-      fill="#e32286"
-    />
-    <path
-      d="M220.4 213.7c23-10 32.8-27.3 32.8-27.3 21.5-29.3 14.2-60.2 14.2-60.2-13.7 29.8-26.2 38-26.2 38 33.7-51.3.2-82.3.2-82.3 13.7 29.2-4.5 64.8-4.5 64.8-15.3 32.2-37 43.7-37 43.7 24.2 4.5 42-11.8 42-11.8-34.7 37.5-72.3 35.7-72.3 35.7 15.8 17.7 39.5 16.2 39.5 16.2-31 7.3-60.1-3-84-22.9-4.5-3.7-8.8-7.7-12.8-12 0 0-3.6-3.8-4.3-4.8l-.1-.1c-.5 18.5 18.8 35.7 18.8 35.7-24.2-10-35.3-31.7-35.3-31.7s-16.3-27.8-4.5-59.5 47.5-38.5 47.5-38.5c29.5 14.3 54.5 18.8 54.5 18.8 52.7 8.8 49.7-17 49.7-17 .5-22.2-33-45.8-33-45.8C145.9 8.4 91.9 37 91.9 37c-46.7 20.7-60.5 66-60.5 66-2.2 7.1-4.2 14.1-5.5 21.4-5.1 29.7 2.6 57.8 19.3 82.8 26 38.8 68.2 52.2 68.2 52.2 62.5 21.2 105.2-10 105.2-10 39.3-27 47.2-58.2 47.2-58.2-31.7 24.8-45.4 22.5-45.4 22.5zM171.6 67.8c3 0 5.4 2.4 5.4 5.4s-2.4 5.4-5.4 5.4-5.4-2.4-5.4-5.4 2.4-5.4 5.4-5.4z"
-      fill="url(#a)"
-    />
-    <path
-      d="M238.5 98.4c.5-22.2-33-45.8-33-45.8C145.8 8.4 91.8 37 91.8 37c-46.7 20.7-60.5 66-60.5 66-2.7 7.7-5.1 19.5-5.1 19.5-2.9 14.8-1.6 28.5-1.6 28.5 1.2 13.1 4.1 21.9 4.1 21.9 3 9.4 4.4 12.3 4.4 12.3-.1-.3-.6-2.5-.6-2.5s-4.2-20.2-.3-39.6c0 0 3.4-20.2 17.2-35.8 0 0 22.4-31.9 64.1-19.4 0 0 9 3.2 12.1 4.8 3.1 1.5 8.5 3.8 8.5 3.8 29.5 14.3 54.5 18.8 54.5 18.8 52.9 8.9 49.9-16.9 49.9-16.9zm-66.9-19.7c-3 0-5.4-2.4-5.4-5.4s2.4-5.4 5.4-5.4 5.4 2.4 5.4 5.4-2.4 5.4-5.4 5.4z"
-      fill="url(#b)"
-    />
-    <path
-      d="M137.4 58.2l-34.1-10.6c-.2 0-1.2-.5-3 0 0 0-20.1 5.1-16.6 16.1 0 0 2.1 6.9 7.8 13.6l37.5-1.8z"
-      fill="url(#c)"
-    />
-  </svg>
-)

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

@@ -1,25 +0,0 @@
-import styled from 'styled-components'
-
-const CHECKER_SIZE = 60
-const CHECKER_FG = '#252525'
-const CHECKER_BG = '#222'
-
-export const Checkerboard = styled.div`
-  display: flex;
-  /*align-items: center;*/
-  justify-content: center;
-  color: #fff;
-  height: calc(100% - 1.95em);
-  width: 100%;
-  background-color: ${CHECKER_FG};
-  background-image: linear-gradient(45deg, ${CHECKER_BG} 25%, transparent 25%),
-    linear-gradient(-45deg, ${CHECKER_BG} 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, ${CHECKER_BG} 75%),
-    linear-gradient(-45deg, transparent 75%, ${CHECKER_BG} 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-
-  background-size: ${CHECKER_SIZE}px ${CHECKER_SIZE}px;
-  background-position: 0 0, 0 ${CHECKER_SIZE / 2}px,
-    ${CHECKER_SIZE / 2}px -${CHECKER_SIZE / 2}px, -${CHECKER_SIZE / 2}px 0;
-`

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

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

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

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

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

@@ -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>
-  )
-}