react-rx 1.0.0-beta.6 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/.idea/compiler.xml +1 -1
  2. package/.idea/inspectionProfiles/Project_Default.xml +1 -0
  3. package/.idea/markdown.xml +9 -0
  4. package/.idea/misc.xml +0 -6
  5. package/dist/cjs/WithObservable.js +3 -3
  6. package/dist/cjs/displayName.js +1 -1
  7. package/dist/cjs/reactiveComponent.js +6 -6
  8. package/dist/cjs/useAsObservable.js +10 -18
  9. package/dist/cjs/useObservable.js +26 -31
  10. package/dist/cjs/useObservableCallback.js +4 -4
  11. package/dist/cjs/useWithObservable.js +2 -2
  12. package/dist/cjs/utils.js +7 -7
  13. package/dist/cjs/withPropsStream.js +8 -4
  14. package/dist/es2015/useAsObservable.js +10 -18
  15. package/dist/es2015/useObservable.js +24 -31
  16. package/dist/esm/displayName.js +1 -1
  17. package/dist/esm/useAsObservable.js +10 -18
  18. package/dist/esm/useObservable.js +26 -31
  19. package/package.json +5 -3
  20. package/src/useAsObservable.ts +13 -18
  21. package/src/useObservable.ts +39 -34
  22. package/.idea/workspace.xml +0 -228
  23. package/jest.config.js +0 -5
  24. package/website/.babelrc +0 -21
  25. package/website/.prettierrc +0 -7
  26. package/website/README.mdx +0 -1
  27. package/website/package.json +0 -84
  28. package/website/src/@types/babel.d.ts +0 -4
  29. package/website/src/@types/mdx.d.ts +0 -11
  30. package/website/src/@types/react-css-burger.d.ts +0 -4
  31. package/website/src/App.tsx +0 -68
  32. package/website/src/components/Header.tsx +0 -118
  33. package/website/src/components/Link.tsx +0 -18
  34. package/website/src/components/LoadPage.tsx +0 -60
  35. package/website/src/components/Sidebar.tsx +0 -88
  36. package/website/src/components/logos/Github.tsx +0 -10
  37. package/website/src/components/logos/React.tsx +0 -27
  38. package/website/src/components/logos/ReactRxLogo.tsx +0 -39
  39. package/website/src/components/logos/RxJs.tsx +0 -69
  40. package/website/src/components/repl/Checkerboard.tsx +0 -25
  41. package/website/src/components/repl/CodeBlock.tsx +0 -147
  42. package/website/src/components/repl/CodeMirror.tsx +0 -37
  43. package/website/src/components/repl/CodeMirrorMode.tsx +0 -67
  44. package/website/src/components/repl/EvalCode.tsx +0 -55
  45. package/website/src/components/repl/Prelude.tsx +0 -50
  46. package/website/src/components/repl/ShowError.tsx +0 -27
  47. package/website/src/components/repl/codemirror-lib.ts +0 -8
  48. package/website/src/components/repl/codemirror-theme.css +0 -131
  49. package/website/src/components/repl/compile/babel.ts +0 -21
  50. package/website/src/components/repl/eval/evalCallback.ts +0 -27
  51. package/website/src/components/repl/eval/evalCode.ts +0 -7
  52. package/website/src/components/repl/eval/evalExpression.ts +0 -4
  53. package/website/src/components/repl/eval/evalReactDomRender.ts +0 -23
  54. package/website/src/components/repl/index.ts +0 -1
  55. package/website/src/components/repl/runMode.ts +0 -42
  56. package/website/src/datastores/location.ts +0 -14
  57. package/website/src/datastores/page.ts +0 -11
  58. package/website/src/datastores/pageTransition.ts +0 -97
  59. package/website/src/entries/main.css +0 -2
  60. package/website/src/entries/main.tsx +0 -6
  61. package/website/src/examples/FizzBuzz/FizzBuzzExample.tsx +0 -39
  62. package/website/src/examples/FizzBuzz/index.tsx +0 -9
  63. package/website/src/examples/_utils/globalScope.ts +0 -45
  64. package/website/src/examples/animation/AnimationExample.tsx +0 -152
  65. package/website/src/examples/animation/easings.ts +0 -0
  66. package/website/src/examples/animation/index.tsx +0 -15
  67. package/website/src/examples/context/Context.example.jsx +0 -67
  68. package/website/src/examples/context/index.tsx +0 -9
  69. package/website/src/examples/errors/Errors.example.jsx +0 -69
  70. package/website/src/examples/errors/index.tsx +0 -9
  71. package/website/src/examples/event-handlers/EventHandlersExample.tsx +0 -48
  72. package/website/src/examples/event-handlers/index.tsx +0 -9
  73. package/website/src/examples/fetch/FetchExample.jsx +0 -43
  74. package/website/src/examples/fetch/a.txt +0 -1
  75. package/website/src/examples/fetch/b.txt +0 -1
  76. package/website/src/examples/fetch/index.tsx +0 -9
  77. package/website/src/examples/form-data/FormDataExample.jsx +0 -119
  78. package/website/src/examples/form-data/index.tsx +0 -12
  79. package/website/src/examples/form-data/storage.ts +0 -27
  80. package/website/src/examples/forward-ref/ForwardRefExample.tsx +0 -55
  81. package/website/src/examples/forward-ref/index.tsx +0 -9
  82. package/website/src/examples/hello-world/HelloWorld.example.jsx +0 -6
  83. package/website/src/examples/hello-world/index.tsx +0 -9
  84. package/website/src/examples/hooks-interop/HooksInterop.example.tsx +0 -42
  85. package/website/src/examples/hooks-interop/index.tsx +0 -9
  86. package/website/src/examples/passthrough-props/PassThroughPropsExample.jsx +0 -57
  87. package/website/src/examples/passthrough-props/index.tsx +0 -11
  88. package/website/src/examples/reactive-state/ReactiveState.example.jsx +0 -43
  89. package/website/src/examples/reactive-state/index.ts +0 -9
  90. package/website/src/examples/readme-examples/README.mdx +0 -0
  91. package/website/src/examples/readme-examples/index.ts +0 -11
  92. package/website/src/examples/shared-state/SharedState.example.tsx +0 -59
  93. package/website/src/examples/shared-state/index.tsx +0 -9
  94. package/website/src/examples/simple/Counter.example.tsx +0 -14
  95. package/website/src/examples/simple/index.tsx +0 -9
  96. package/website/src/examples/sync/Sync.example.tsx +0 -9
  97. package/website/src/examples/sync/index.tsx +0 -9
  98. package/website/src/examples/tick/TickExample.jsx +0 -51
  99. package/website/src/examples/tick/index.ts +0 -9
  100. package/website/src/examples/todo-app/TodoApp.example.tsx +0 -88
  101. package/website/src/examples/todo-app/index.tsx +0 -12
  102. package/website/src/examples/todo-app/storage.ts +0 -27
  103. package/website/src/examples/use-element/UseElementExample.tsx +0 -70
  104. package/website/src/examples/use-element/index.tsx +0 -9
  105. package/website/src/examples/use-observable/search/SearchExample.tsx +0 -82
  106. package/website/src/examples/use-observable/search/index.tsx +0 -8
  107. package/website/src/examples/use-observable/use-observable/UseObservableExample.tsx +0 -70
  108. package/website/src/examples/use-observable/use-observable/index.tsx +0 -9
  109. package/website/src/index.html +0 -10
  110. package/website/src/mdx-components.tsx +0 -74
  111. package/website/src/pages/Api/Api.mdx +0 -134
  112. package/website/src/pages/Api/ApiPage.tsx +0 -25
  113. package/website/src/pages/Examples/Examples.tsx +0 -105
  114. package/website/src/pages/Examples/ExamplesPage.tsx +0 -13
  115. package/website/src/pages/Guide/Guide.mdx +0 -275
  116. package/website/src/pages/Guide/GuidePage.tsx +0 -25
  117. package/website/src/pages/Index/IndexPage.tsx +0 -50
  118. package/website/src/pages/Index/ReactRxReadme.md +0 -20
  119. package/website/src/pages/NotFound.tsx +0 -3
  120. package/website/src/pages/pages.ts +0 -46
  121. package/website/src/pages/styles.tsx +0 -24
  122. package/website/src/theme.ts +0 -61
  123. package/website/src/utils/parseCodeFenceHeader.ts +0 -32
  124. package/website/tsconfig.json +0 -30
  125. package/website/vercel.json +0 -4
  126. package/website/webpack/config.js +0 -5
  127. package/website/webpack/createConfig.js +0 -95
  128. package/website/webpack/mdx-toc-loader.js +0 -38
package/website/src/examples/use-observable/use-observable/UseObservableExample.tsx DELETED
@@ -1,70 +0,0 @@
1
- import * as React from 'react'
2
- import {Observable, of, timer} from 'rxjs'
3
- import {ReactDOM, useMemoObservable} from '../../_utils/globalScope'
4
- import {observableCallback} from 'observable-callback'
5
- import {map, startWith, switchMap} from 'rxjs/operators'
6
- //@endimport
7
-
8
- const justNumbers$ = timer(0, 500)
9
-
10
- const numberReactElement$ = justNumbers$.pipe(
11
- map((num) => <div>The number is {num}!</div>)
12
- )
13
-
14
- const [onSpeedChange$, onSpeedChange] = observableCallback<
15
- React.SyntheticEvent<HTMLInputElement>
16
- >()
17
-
18
- const speed$: Observable<number> = onSpeedChange$.pipe(
19
- map((event) => Number(event.currentTarget.value)),
20
- startWith(1000)
21
- )
22
-
23
- const UseObservableExample = () => (
24
- <>
25
- <h2>An observable of react elements</h2>
26
- {useMemoObservable(of(<div>HELLO SYNC</div>), [])}
27
- {useMemoObservable(numberReactElement$.pipe(startWith(2)), [])}
28
- <h2>An observable with child as render func</h2>
29
- {useMemoObservable(
30
- timer(0, 100).pipe(
31
- startWith(2),
32
- map((num) => <>The number is {num}</>)
33
- ),
34
- []
35
- )}
36
-
37
- <h2>Nested</h2>
38
- <p>You can adjust the update speed by changing update interval below</p>
39
- {useMemoObservable(
40
- () =>
41
- speed$.pipe(
42
- switchMap(
43
- (speed: number): Observable<[number, number]> =>
44
- timer(0, speed).pipe(
45
- map((update): [number, number] => [speed, update])
46
- )
47
- ),
48
- map(([speed, update]: [number, number]) => (
49
- <>
50
- Update interval:
51
- <input
52
- type="number"
53
- value={speed}
54
- onChange={onSpeedChange}
55
- step={200}
56
- min={0}
57
- />
58
- <div>Update {update}</div>
59
- </>
60
- ))
61
- ),
62
- []
63
- )}
64
- </>
65
- )
66
-
67
- ReactDOM.render(
68
- <UseObservableExample />,
69
- document.getElementById('use-observable-example')
70
- )
package/website/src/examples/use-observable/use-observable/index.tsx DELETED
@@ -1,9 +0,0 @@
1
- import {Example} from '../../../pages/Examples/Examples'
2
-
3
- const fs = require('fs')
4
-
5
- export const UseObservableExample: Example = {
6
- id: 'use-observable',
7
- title: 'Use observable',
8
- source: fs.readFileSync(`${__dirname}/UseObservableExample.tsx`, 'utf-8')
9
- }
package/website/src/index.html DELETED
@@ -1,10 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>ReactRx</title>
5
- <meta content="width=device-width, initial-scale=1.0" name="viewport" />
6
- </head>
7
- <body>
8
- <div id="app"></div>
9
- </body>
10
- </html>
package/website/src/mdx-components.tsx DELETED
@@ -1,74 +0,0 @@
1
- import {CodeMirrorMode} from './components/repl/CodeMirrorMode'
2
-
3
- import * as React from 'react'
4
- import styled from 'styled-components'
5
- import {rxComponent} from 'react-rx'
6
- import {map} from 'rxjs/operators'
7
- import {combineLatest} from 'rxjs'
8
- import {location$} from './datastores/location'
9
- import {parseCodeFenceHeader} from './utils/parseCodeFenceHeader'
10
- import {ModeSpec} from './components/repl/runMode'
11
-
12
- const ModeWrapper = styled.div`
13
- color: #fff;
14
- `
15
-
16
- const InlineCode = styled.code`
17
- font-size: 0.9em;
18
- background-color: #e4e4e4;
19
- padding: 1px 4px;
20
- border-radius: 2px;
21
- `
22
-
23
- const CODEMIRROR_TSX_MODE: ModeSpec = {
24
- name: 'jsx',
25
- base: {name: 'javascript', typescript: true}
26
- }
27
-
28
- const TSX_MODE_TYPES = ['js', 'jsx', 'tsx', 'ts']
29
-
30
- interface InlineCodeProps {
31
- children: string
32
- }
33
-
34
- interface CodeProps {
35
- children: string
36
- className: 'language-js' | 'language-jsx' | 'language-tsx'
37
- }
38
-
39
- export const components = {
40
- inlineCode: InlineCode,
41
- code: (props: CodeProps) => {
42
- const [lang, range] = parseCodeFenceHeader(
43
- props.className.replace(/^language-/, '')
44
- )
45
- const mode =
46
- lang && TSX_MODE_TYPES.includes(lang) ? CODEMIRROR_TSX_MODE : null
47
- return (
48
- <ModeWrapper>
49
- <CodeMirrorMode highlighted={range} mode={mode}>
50
- {props.children}
51
- </CodeMirrorMode>
52
- </ModeWrapper>
53
- )
54
- }
55
- }
56
-
57
- const hash$ = location$.pipe(map(location => location.hash))
58
-
59
- const BookmarkedLink = rxComponent<{
60
- href: string
61
- children: React.ReactNode
62
- }>(props$ =>
63
- combineLatest([props$, hash$]).pipe(
64
- map(([props, hash]) => (
65
- <a href={props.href} className={hash === props.href ? 'selected' : ''}>
66
- {props.children}
67
- </a>
68
- ))
69
- )
70
- )
71
-
72
- export const tocComponents = {
73
- a: BookmarkedLink
74
- }
package/website/src/pages/Api/Api.mdx DELETED
@@ -1,134 +0,0 @@
1
- # Reactive Component
2
-
3
- ## component()
4
-
5
- **Signature**
6
-
7
- ```ts
8
- function component<Props>(
9
- observable: Observable<Props>
10
- ): React.FunctionComponent<{}>
11
- function component<Props>(
12
- component: Component<Props>
13
- ): React.FunctionComponent<Props>
14
- ```
15
-
16
- **Usage**
17
-
18
- ```ts
19
- import * as ReactRx from 'react-rx'
20
-
21
- export const MyComponent = ReactRx.component(props$ =>
22
- props$.pipe(map(props => <div>...</div>))
23
- )
24
- ```
25
-
26
- ## forwardRef()
27
-
28
- The `React.forwardRef()` equivalent for a Reactive component.
29
-
30
- ** Signature **
31
-
32
- ```ts
33
- function forwardRef<Props, Ref>(
34
- component: (
35
- input$: Observable<Props>,
36
- ref: React.RefObject<Ref>
37
- ) => React.FunctionComponent<Props>
38
- )
39
- ```
40
-
41
- **Usage**
42
-
43
- ```js
44
- import * as ReactRx from 'react-rx'
45
-
46
- const MyInputWrapper = ReactRx.forwardRef((props$, ref) =>
47
- props$.pipe(
48
- map(props => (
49
- <input
50
- ref={ref}
51
- type="text"
52
- value={props.value}
53
- onChange={props.onChange}
54
- />
55
- ))
56
- )
57
- )
58
- ```
59
-
60
- ## useState()
61
-
62
- Equivalent to `React.useState()` with the only difference that instead of the stateful value, it returns an observable representing the state changes (e.g. instead of `[T, update(value: T)]`, it returns `[Observable<T>, update(value: T)]`.
63
-
64
- **Signature**
65
-
66
- ```ts
67
- function useState<T = undefined>(): [
68
- Observable<T | undefined>,
69
- React.Dispatch<React.SetStateAction<T | undefined>>
70
- ]
71
- function useState<T>(
72
- initial: T | (() => T)
73
- ): [Observable<T>, React.Dispatch<React.SetStateAction<T>>]
74
- ```
75
-
76
- ## useContext()
77
-
78
- Equivalent to `React.useContext()` with the only difference that instead of a stateful context value, it returns an observable representing the context value changes.
79
-
80
- ** Signature **
81
-
82
- ```ts
83
- function useContext<T>(context: React.Context<T>): Observable<T>
84
- ```
85
-
86
- ## useEvent()
87
-
88
- This has no React API equivalent, but creates a `[Observable<Event>, (Event) => void]` tuple, where the first value is an observable of the arguments the second function is called with.
89
-
90
- **Signature**
91
-
92
- ```ts
93
- function useObservableEvent<Event>(): [
94
- Observable<Event>,
95
- (event: Event) => void
96
- ]
97
- ```
98
-
99
- ## toObservable()
100
-
101
- Converts any value inside a Functional React component to an observable of changes to that value.
102
-
103
- ```ts
104
- function toObservable<T>(value: T): Observable<T>
105
- ```
106
-
107
- # React hooks
108
-
109
- ## useObservable()
110
-
111
- A React hook that returns the current/latest value from an observable
112
-
113
- **Signature**
114
-
115
- ```ts
116
- function useObservable<T>(observable$: Observable<T>): T | null
117
- function useObservable<T>(observable$: Observable<T>, initialValue: T): T
118
- ```
119
-
120
- ## useObservableState()
121
-
122
- Same as `useState()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
123
-
124
- ## useObservableContext()
125
-
126
- Same as `useContext()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
127
-
128
- ## useObservableEvent()
129
-
130
- Same as `useEvent()` described in the Reactive Component section above, exported under a different name for clarity when using in regular React components
131
-
132
- ## toObservable()
133
-
134
- Same as `toObservable()` described in the Reactive Component section above
package/website/src/pages/Api/ApiPage.tsx DELETED
@@ -1,25 +0,0 @@
1
- import {Header} from '../../components/Header'
2
- import {Container, Content} from '../styles'
3
- import MDXContent, {Toc} from './Api.mdx'
4
- import * as React from 'react'
5
- import {MDXProvider} from '@mdx-js/react'
6
- import {components, tocComponents} from '../../mdx-components'
7
- import {Sidebar} from '../../components/Sidebar'
8
-
9
- export const ApiPage = () => (
10
- <>
11
- <Header />
12
- <Container>
13
- <Sidebar heading="API Reference">
14
- <MDXProvider components={tocComponents}>
15
- <Toc />
16
- </MDXProvider>
17
- </Sidebar>
18
- <Content>
19
- <MDXProvider components={components}>
20
- <MDXContent />
21
- </MDXProvider>
22
- </Content>
23
- </Container>
24
- </>
25
- )
package/website/src/pages/Examples/Examples.tsx DELETED
@@ -1,105 +0,0 @@
1
- import * as React from 'react'
2
- import {ContextExample} from '../../examples/context'
3
- import {ErrorsExample} from '../../examples/errors'
4
- import {EventHandlersExample} from '../../examples/event-handlers'
5
- import {FetchExample} from '../../examples/fetch'
6
- import {FormDataExample} from '../../examples/form-data'
7
- import {ForwardRefExample} from '../../examples/forward-ref'
8
- import {PassThroughPropsExample} from '../../examples/passthrough-props'
9
- import {TickExample} from '../../examples/tick'
10
- import {ReactiveStateExample} from '../../examples/reactive-state'
11
- // // import ReadmeExamples from './readme-examples'
12
- import {CodeBlock} from '../../components/repl'
13
- import {FizzBuzzExample} from '../../examples/FizzBuzz'
14
- import {TodoAppExample} from '../../examples/todo-app'
15
- import {HelloWorldExample} from '../../examples/hello-world'
16
- import {SimpleExample} from '../../examples/simple'
17
- import {SharedStateExample} from '../../examples/shared-state'
18
- import {UseElementExample} from '../../examples/use-element'
19
- import {AnimationExample} from '../../examples/animation'
20
- import {SyncExample} from '../../examples/sync'
21
- import {Link} from '../../components/Link'
22
- import {Header} from '../../components/Header'
23
- import {Container, Content} from '../styles'
24
- import {Sidebar} from '../../components/Sidebar'
25
- import {HooksInteropExample} from '../../examples/hooks-interop'
26
- import {UseObservableExample} from '../../examples/use-observable/use-observable'
27
- import {SearchExample} from '../../examples/use-observable/search'
28
-
29
- export interface Example {
30
- id: string
31
- title: string
32
- source: string
33
- description?: string
34
- scope?: {[variableName: string]: any}
35
- prelude?: string
36
- }
37
-
38
- const rxComponentExamples: Example[] = [
39
- HelloWorldExample,
40
- SimpleExample,
41
- ReactiveStateExample,
42
- TodoAppExample,
43
- HooksInteropExample,
44
- AnimationExample,
45
- UseElementExample,
46
- SharedStateExample,
47
- ContextExample,
48
- ErrorsExample,
49
- EventHandlersExample,
50
- FetchExample,
51
- SyncExample,
52
- FormDataExample,
53
- ForwardRefExample,
54
- PassThroughPropsExample,
55
- TickExample,
56
- FizzBuzzExample
57
- ]
58
-
59
- const useObservableExamples: Example[] = [UseObservableExample, SearchExample]
60
-
61
- const allExamples = rxComponentExamples.concat(useObservableExamples)
62
-
63
- export function Examples(props: {selectedExampleName: string}) {
64
- const {selectedExampleName} = props
65
- const selectedExample =
66
- allExamples.find((ex) => ex.id === selectedExampleName) || allExamples[0]
67
-
68
- return (
69
- <>
70
- <Header />
71
- <Container>
72
- <Sidebar heading="Examples">
73
- <ul>
74
- {allExamples.map((ex) => (
75
- <li key={ex.id}>
76
- <Link
77
- className={selectedExampleName === ex.id ? 'selected' : ''}
78
- href={`#${ex.id}`}
79
- >
80
- {ex.title}
81
- </Link>
82
- </li>
83
- ))}
84
- </ul>
85
- </Sidebar>
86
- <Content>
87
- {allExamples
88
- .filter((ex) => ex === selectedExample)
89
- .map((ex) => (
90
- <div key={ex.id}>
91
- <h1>{ex.title}</h1>
92
- {ex.description && <p>{ex.description}</p>}
93
- <CodeBlock
94
- source={ex.source}
95
- scope={ex.scope}
96
- prelude={ex.prelude}
97
- filename={`${ex.id}.tsx`}
98
- />
99
- </div>
100
- ))}
101
- </Content>
102
- </Container>
103
- </>
104
- )
105
- }
package/website/src/pages/Examples/ExamplesPage.tsx DELETED
@@ -1,13 +0,0 @@
1
- import {rxComponent} from 'react-rx'
2
- import {location$} from '../../datastores/location'
3
- import {map} from 'rxjs/operators'
4
- import {Examples} from './Examples'
5
- import * as React from 'react'
6
-
7
- export const ExamplesPage = rxComponent(
8
- location$.pipe(
9
- map(location => (
10
- <Examples selectedExampleName={location.hash?.substring(1)} />
11
- ))
12
- )
13
- )