Hello,

I keep getting this error when I update material-ui from version 3.9.3 to 4.0.0.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.exports.subscribeTo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:74727)
    at Object.from (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:76131)
    at data (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73708)
    at createComponent (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73709)
    at configureHook (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73954)
    at modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73986
    at mountMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:58670)
    at Object.useMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:58879)
    at Object.useMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:2641)
    at useRefract (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73985)

Description

Could be a worthwhile addition: add the ability to observe any event passed to pushEvent by calling component.event() (similar to component.observe() without a propName). Came up when talking some stuff through with @mylesj.

Use case

Before

const aperture = () => component =>
	merge(
		component.event('event1').map(value => ['event1', value]),
		component.event('event2').map(value => ['event2', value]),
		component.event('event3').map(value => ['event3', value]),
	).map(toAnalytics)

After

const aperture = () => component =>
	component.event().map(toAnalytics)

Possible Extension

The example raises the question of what data structure should be returned so that both the eventName and the value are exposed. Maybe providing the ability to pass a mapping function would be a good solution?

const aperture = () => component =>
	component.event((event, value) => [event, value]).map(toAnalytics)

const aperture = () => component =>
	component.event((event, value) => ({ event, value })).map(toAnalytics)

The RxJS routing example fails with error "Cannot read property activeTab of null".

This error is due to no default tab being set on load of the root URL (/).

Hi! 👋

I've already discussed this with @jtmcgrath but I'd like to get everyone involved.

One thing that I really like to do when trying out a new library is to do the introduction (example: https://www.gatsbyjs.org/tutorial/). I'd like to add one for Refract.

The introduction

Since the power of Refract lies in the way it handles side effects it makes sense to include side effects in the tutorial which will be handled by Refract. I thought of having a simulated environment where you develop a dashboard that receives data and interact with iot devices (iot devices being JS modules). This dashboard acts as the smart hub of this environment.

Goals

As of now I have a couple of requirements in the back of my mind;

• Takes at max 1h.
• For some parts of the intro, first write how you'd handle the event in the non-refract way and then refactor it to use refract. To give users a feel of how it improves the code.
• Users should both be inspired and educated about Refract.

Please let me know your thoughts, I've already started a bit on the dashboard environment and I have several questions related to the PR, but first I'd like to hear here what you guys think of it 😄 .

Hey guys! I was very excited when I first read about this and the concept is very enticing. I just wanna know if this project is "dead" or has plans to be actively developed any more.

Supporting hooks

I think the Refract React packages could include hooks for users to be able to choose between HoC and Hooks:

• A useRefract hook which would be similar to withEffects but with minor differences and limitations (to explore).
  • Observing props: not known yet if possible, needs to be explored.
  • Observing mount should be possible (with useLayoutEffect triggered only the first time)
  • Observing unmount would be on internal useEffect hook being unsubscribed
  • Pushing events and from events shouldn't have any limitation
  • Built-in effects (toProps, asProps and JSX) can't be supported, instead a new built-in effect will be introduced for the useRefract hook to "return" values (like useState).
  • No passing of context, instead user will manually pass initialProps and can include context (using useContext before).
• A useDeclarativeEffect hook factory which would bring a functional alternative to the useEffect hook in React: bringing the global effect handler technique to hooks, but without reactive streams.

How it could look like

useRefract hook would possibly need to be user-land created

const useRefract = createRefractHook(handler, errorHandler)

function MyComponent() {
    const { searchValue, setSearchValue } = useRefract(component => {
        const [searchValue$, setSearchValue] = component.useEvent('search', '')

        return searchValue$.pipe(
            map(searchValue =>
                toComponent({
                    searchValue,
                    setSearchValue
                })
            )
        )
    })

    return <input value={searchValue} onChange={setSearchValue} />
}

Injecting dependencies and props

Users will be able to pass props and context (using useContext before useRefract). Two options:

• Having useRefract() take a second argument

  const dependencies = { prop1, prop2, context1 }
  const {} = useRefract(dependencies => component => {}, dependencies)

• Letting users having to create aperture factories and passing arguments, or use closures. In that case the hook API would be useRefract(component => {/*...*/})

toComponent effect creator

const toComponent = (data) => ({
    type: '@@refract/effect/TO_COMPONENT',
    payload: data
})

Initial implementation idea

useRefract would combine useState (used to return state and callbacks to the user component) and useEffect (used to pass component and to subscribe / unsubscribe to the returned stream).

const EmptyContext = React.createContext({})

const createRefractHook = (handler, errorHandler, DependencyContext = EmptyContext) => {
    const useRefract = (apertureFactory, initialProps) => {
        const [data, setData] = useState({})

        const dependencies = useContext(DependencyContext)

        const boundHandler = handler(initialProps, dependencies)
        const bundErrorHandler = errorHandler(initialProps, dependencies)
        const aperture = apertureFactory(initialProps, dependencies)

        useEffect(
            createEffectHook(boundHandler, bundErrorHandler, aperture, setData),
            []
        )

        return data
    }

    return useRefract
}

createEffectHook would be the equivalent of configureComponent.

React 16.8.6 PR: facebook/react/pull/15226

The contextType of the WithEffects component created by withEffects is undefined and thus invalid when either no config object is passed to withEffects or the passed object does not contain a Context property.

This causes React to log warnings in the console.

The contextType should only be set if the value in the config object is not undefined

A couple of times people have been thrown off by the lack of any informative error message when they try to create an aperture which doesn't return a stream. In that situation, they end up with the following error:

TypeError: sink is undefined

This comes from the sinkObservable being undefined here:

Which is used here:

We should probably throw an informative error if the sink is undefined! Will take a look at this later today unless someone else wants to pick it up first 😛

I created a simple codesandbox trying to reproduce the code example from the docs, but i couldn't get it to work.

Here's the example

The license text is currently not provided with the npm bundle.
In order to allow automation tools like license-webpack-plugin to pick it up, it should be included there.
Also the license states: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
This includes the npm registry.

Hi,

I've started experimenting with Refract, it looks like a great fit for some things we're trying to do. I noticed the following - using React v16.9.0, from create-react-app, I see the following warning in the browser console:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: WithEffects

I looked at the source for withEffects.ts, and verified it is using the old componentWillReceiveProps method.

Cannot install refract-rxjs the reguler way because package asserts the react page must be a version between 15.0.0 < 17.0.0

Stackblitz example

When passing a value as second argument to ObservableComponent::useEffect, undefined is passed down the pipeline. Instead, the second argument should be used.