react-rx 1.0.0-beta.4 → 1.0.1

package/website/src/pages/Index/IndexPage.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react'
-import {Header} from '../../components/Header'
-import {MDXProvider} from '@mdx-js/react'
-import ReactRxReadme from './ReactRxReadme.md'
-import {components} from '../../mdx-components'
-import {ReactRxLogo} from '../../components/logos/ReactRxLogo'
-import styled from 'styled-components'
-import {COLORS} from '../../theme'
-
-const Content = styled.div`
-  margin-top: 5em;
-`
-const ContentInner = styled.div`
-  padding: 1em 1em;
-`
-const Cover = styled.div`
-  background: ${COLORS.shadow};
-  color: ${COLORS.background};
-  padding-top: 2em;
-  font-size: 2em;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  h1 {
-    padding: 0 0 0 0.1em;
-  }
-`
-
-const Subsection = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-export const IndexPage = () => (
-  <>
-    <Header />
-    <Content>
-      <Cover>
-        <ReactRxLogo size="4em" />
-        <h1>ReactRx</h1>
-      </Cover>
-      <ContentInner>
-        <Subsection>
-          <MDXProvider components={components}>
-            <ReactRxReadme />
-          </MDXProvider>
-        </Subsection>
-      </ContentInner>
-    </Content>
-  </>
-)

package/website/src/pages/Index/ReactRxReadme.md

@@ -1,20 +0,0 @@
-> Hooks and utilities for combining React with RxJS Observables
-
-Features:
-
-- Works well with Observables emitting values synchronously. You don't pay the re-render-on-mount tax.
-- Lightweight. Implemented on top of a small React Hook based core.
-- Full TypeScript support.
-
-This package offers two slightly different utilities for working with RxJS and React:
-
-- A set of utilities for creating _Reactive components_
-- A set of React hooks for using with observables with React
-
-Although they share a lot of similarities, and reactiveComponent is built on top of `useObservable` are not intended to be used together inside the same component as they represent two different programming styles.
-
----
-
-- [Reactive components](https://react-rx.dev/guide#reactive-components)
-- [Observable hooks](https://react-rx.dev/guide#observable-hooks)
-- [Code examples](https://react-rx.dev/examples)

package/website/src/pages/NotFound.tsx

@@ -1,3 +0,0 @@
-import React from 'react'
-
-export const NotFoundPage = () => <h2>Not found!</h2>

package/website/src/pages/pages.ts

@@ -1,46 +0,0 @@
-import {NotFoundPage} from './NotFound'
-
-export interface Page {
-  id: string
-  title: string
-  route: string
-  load: () => Promise<React.ComponentType<any>>
-}
-
-function get<T extends {}, K extends keyof T>(key: K): (res: T) => T[K] {
-  return (res: T) => res[key]
-}
-
-export const pages: Page[] = [
-  {
-    id: 'home',
-    title: 'Home',
-    route: '/',
-    load: () => import('./Index/IndexPage').then(get('IndexPage'))
-  },
-  {
-    id: 'guide',
-    title: 'Guide',
-    route: '/guide',
-    load: () => import('./Guide/GuidePage').then(get('GuidePage'))
-  },
-  {
-    id: 'api',
-    title: 'API',
-    route: '/api',
-    load: () => import('./Api/ApiPage').then(get('ApiPage'))
-  },
-  {
-    id: 'examples',
-    title: 'Examples',
-    route: '/examples',
-    load: () => import('./Examples/ExamplesPage').then(get('ExamplesPage'))
-  }
-]
-
-export const NOT_FOUND: Page = {
-  id: 'not-found',
-  title: 'Not found',
-  route: '',
-  load: () => Promise.resolve(NotFoundPage)
-}

package/website/src/pages/styles.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components'
-import * as React from 'react'
-
-export const Container = styled.div`
-  margin-top: 7em;
-  display: flex;
-  flex-direction: row;
-`
-
-export const ContentWrapper = styled.div`
-  width: 100%;
-  margin: 0;
-`
-
-export const ContentInner = styled.div`
-  padding: 0 1em;
-`
-export const Content = (props: {children: React.ReactNode}) => {
-  return (
-    <ContentWrapper>
-      <ContentInner>{props.children}</ContentInner>
-    </ContentWrapper>
-  )
-}

package/website/src/theme.ts

@@ -1,61 +0,0 @@
-const SIZES = {
-  xsmall: {min: 0, max: 599},
-  small: {min: 600, max: 779},
-  medium: {min: 780, max: 979},
-  large: {min: 980, max: 1279},
-  xlarge: {min: 1280, max: 1339},
-  xxlarge: {min: 1340, max: Infinity}
-}
-
-export type Size = keyof typeof SIZES
-
-export const media = {
-  between(smallKey: Size, largeKey: Size, excludeLarge = false) {
-    if (excludeLarge) {
-      return `@media (min-width: ${
-        SIZES[smallKey].min
-      }px) and (max-width: ${SIZES[largeKey].min - 1}px)`
-    } else {
-      if (SIZES[largeKey].max === Infinity) {
-        return `@media (min-width: ${SIZES[smallKey].min}px)`
-      } else {
-        return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${SIZES[largeKey].max}px)`
-      }
-    }
-  },
-
-  greaterThan(key: Size) {
-    return `@media (min-width: ${SIZES[key].min}px)`
-  },
-
-  lessThan(key: Size) {
-    return `@media (max-width: ${SIZES[key].min - 1}px)`
-  },
-
-  size(key: Size) {
-    const size = SIZES[key]
-
-    if (size.min == null) {
-      return media.lessThan(key)
-    } else if (size.max == null) {
-      return media.greaterThan(key)
-    } else {
-      return media.between(key, key)
-    }
-  }
-}
-
-const PRIMARY = '#d9376e'
-const LIGHT = '#eff0f3'
-export const COLORS = {
-  header: {
-    background: PRIMARY,
-    text: LIGHT
-  },
-  background: LIGHT,
-  text: '#2a2a2a',
-  link: PRIMARY,
-  secondary: '#ff8e3c',
-  tertiary: '#ff8e3c',
-  shadow: '#444'
-}

package/website/src/utils/parseCodeFenceHeader.ts

@@ -1,32 +0,0 @@
-import {flatten, range, uniq} from 'lodash'
-
-const regex = /^([a-z0-9\s_-]+)({([0-9,-]+)})*/
-
-function isNum(v: any) {
-  return !isNaN(v)
-}
-
-export function parseCodeFenceHeader(header: string): [string, number[]?] {
-  const match = regex.exec(header)
-  if (!match) {
-    throw new Error(`Unparseable code fence header: ${header}`)
-  }
-  const [, lang, , range] = match
-
-  return range ? [lang, parseRange(range)] : [lang]
-}
-
-function parseRange(nums: string) {
-  return uniq(flatten(nums.split(',').map(expandRange))).filter(isNum)
-}
-
-function expandRange(rangeStr: string) {
-  if (rangeStr.includes('-')) {
-    const numRange = rangeStr
-      .split('-')
-      .map(n => Number(n))
-      .sort()
-    return range(numRange[numRange.length - 1], numRange[0])
-  }
-  return [Number(rangeStr)]
-}

package/website/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "//": "NOTE: TypeScript is only used for typechecking, not transpiling as that's handled by babel",
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules/**/*"
-  ],
-  "compilerOptions": {
-    "types": [
-      "./webpack/type-stubs.d.ts"
-    ],
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "lib": [
-      "dom",
-      "ES2015"
-    ],
-    "target": "es2015",
-    "moduleResolution": "node",
-    "module": "esnext",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "jsx": "preserve",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  }
-}

package/website/vercel.json

@@ -1,4 +0,0 @@
-{
-  "version": 2,
-  "routes": [{"handle": "filesystem"}, {"src": "/.*", "dest": "/index.html"}]
-}

package/website/webpack/config.js

@@ -1,5 +0,0 @@
-const createConfig = require('./createConfig')
-
-const env = process.env.NODE_ENV === 'production' ? 'production' : 'development'
-
-module.exports = createConfig(env)

package/website/webpack/createConfig.js

@@ -1,95 +0,0 @@
-const path = require('path')
-const CopyPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
-const {CleanWebpackPlugin} = require('clean-webpack-plugin')
-
-module.exports = function createConfig(env) {
-  return {
-    mode: env,
-    entry: './src/entries/main.tsx',
-    output: {
-      path: path.resolve(__dirname, '..', 'public'),
-      filename: '[name]-[hash].js'
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js']
-    },
-    plugins: [
-      new CleanWebpackPlugin(),
-      env === 'development' && new webpack.ProgressPlugin(),
-      new CopyPlugin({
-        patterns: ['a', 'b'].map((n) => ({
-          from: `src/examples/fetch/${n}.txt`,
-          to: `${n}.txt`
-        }))
-      }),
-      new HtmlWebpackPlugin({
-        template: 'src/index.html',
-        inject: true
-      })
-    ].filter(Boolean),
-    node: {
-      global: true,
-      fs: 'empty',
-      __filename: 'mock',
-      __dirname: 'mock'
-    },
-    module: {
-      rules: [
-        {
-          test: /\.([tj])sx?$/,
-          use: 'babel-loader',
-          exclude: /node_modules/
-        },
-        {
-          test: /\.mdx?$/,
-          use: ['babel-loader', path.resolve(__dirname, './mdx-toc-loader.js')]
-        },
-        {
-          test: /\.html$/,
-          use: 'html-loader'
-        },
-        {
-          test: /\.css$/i,
-          use: ['style-loader', 'css-loader']
-        }
-      ]
-    },
-    ...(env === 'development' && {
-      devServer: {
-        port: 3000,
-        host: '0.0.0.0',
-        historyApiFallback: true,
-        disableHostCheck: true
-      }
-    }),
-    devtool: env === 'development' ? 'source-map' : false,
-    ...(env === 'production' && {
-      optimization: {
-        usedExports: true,
-        minimize: true,
-        splitChunks: {
-          chunks: 'async',
-          minSize: 30000,
-          maxSize: 0,
-          minChunks: 1,
-          maxAsyncRequests: 6,
-          maxInitialRequests: 4,
-          automaticNameDelimiter: '~',
-          cacheGroups: {
-            defaultVendors: {
-              test: /[\\/]node_modules[\\/]/,
-              priority: -10
-            },
-            default: {
-              minChunks: 2,
-              priority: -20,
-              reuseExistingChunk: true
-            }
-          }
-        }
-      }
-    })
-  }
-}

package/website/webpack/mdx-toc-loader.js

@@ -1,38 +0,0 @@
-const mdx = require('@mdx-js/mdx')
-const toc = require('markdown-toc')
-const slug = require('remark-slug')
-const ghSlugger = require('github-slugger')
-const emoji = require('remark-emoji')
-
-const slugify = ghSlugger()
-
-module.exports = async function MdxTocLoader(src) {
-  const callback = this.async()
-
-  if (!callback) {
-    return
-  }
-
-  const mdxConfig = {
-    skipExport: true,
-    remarkPlugins: [emoji, slug]
-  }
-
-  const tocResult = toc(src, {slugify})
-
-  const compiled = mdx(src, mdxConfig)
-  const compiledToc = mdx(tocResult.content, mdxConfig)
-
-  const code = `/* @jsx mdx */
-import React from 'react';
-import { mdx } from '@mdx-js/react'
-export default ${iife(await compiled)};
-export const Toc = ${iife(await compiledToc)}
-`
-  return callback(null, code)
-}
-
-function iife(body) {
-  return `(function() {${body}
-return MDXContent})()`
-}