Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Fahad Ibnay Heylaal
    @fahad19
    Hello World!
    David Konsumer
    @konsumer
    hi! I dunno if anyone monitors this chat, but I am having a heck of a time getting proppy global state and preact-router working.
    routes are working, and it mostly seems like state is working, but the state doesn't seem to be refreshed, even on things outside the router
    I made a global component Header that has modals and links, and uses a global user state to display differnt things
    you can see in console that when I click "login" it fires the global modal handler, but the view doesn;t update
    David Konsumer
    @konsumer
    I feel like I am probly using proppy wrong. I am coming from react and redux, then recompose.
    using hot reload in sandbox, I can force it to update (liek click on login, then modify code) so I am pretty sure state is working right, and my system for modal is ok
    Screen Shot 2018-10-08 at 3.14.47 PM.png
    David Konsumer
    @konsumer

    If I do something like this, at the top-level, it will update sometimes (login modal shows) but not always (cancel doesn't trigger hide modal.)

    // when global state chnages, render app
    if (typeof window !== 'undefined') {
      providers.subscribe(props => {
        console.log('PROVIDERS', props)
        render(<App />, document.body)
      })
    }

    This seems like a terrible hack to start with, and as I said, is only working on half of the state changes.

    David Konsumer
    @konsumer
    I will put an issue in the queue asking for help :smile:
    David Konsumer
    @konsumer
    David Konsumer
    @konsumer
    also, I added a PR for the ProppyContext's issue here: fahad19/proppy#38 Wasn't totally sure how to test it, but that should be closer to intended use for preact-context.
    David Konsumer
    @konsumer
    Tested preact-playground with a "proppy-preact": "file://../../packages/proppy-preact/", in package.json, and it works, without the warning, so I think it's working right. I wonder if these 2 things might be related, as providers is passed down in context.
    Fahad Ibnay Heylaal
    @fahad19
    @konsumer: Hi David! thanks for your PR! I will take a look and merge and release soon :)
    If you could add some tests for accessing providers in preact components too using proppy, then it would come full circle :)
    David Konsumer
    @konsumer
    I'm still not sure it works correctly, at all, though. Can you tell what I am doing wrong, above?
    David Konsumer
    @konsumer

    also, currently the only test for preact stuff is

      test('is an object', () => {
        expect(typeof lib).toEqual('object');
      });

    as I said, I'm not really a preact guy, so I'm unsure what the equiv of enzyme is for it, but it doesn't seem to be setup. It looks doable, I'm just not familiar: https://preactjs.com/guide/unit-testing-with-enzyme

    David Konsumer
    @konsumer
    I could try to replicate what is in proppy-react/attach.spec.tsx, when I have more time.
    David Konsumer
    @konsumer
    I actually got it all testing like react and realized that I still get Consumer used without a Provider. I think context doesn't work the way the code is setup.
    David Konsumer
    @konsumer
    I ended up making a general preact lib that works sort of similar with context: https://github.com/konsumer/preact-global
    I think it might work better with proppy than preact-context, as it doesn't care if you setup a provider first
    it adds a setGlobal to context, though
    David Konsumer
    @konsumer
    I think something like this would do the same thing:

    ProppyProvider:

    import { GlobalProvider } from 'preact-global'
    
    export const ProppyProvider = GlobalProvider

    attach:

    import { h } from 'preact';
    import { ProppyFactory } from 'proppy';
    import import { withGlobal } from 'preact-global'
    
    import { ProppySubscription } from './ProppySubscription';
    
    export function attach(P: ProppyFactory) {
      return withGlobal((props, { providers }) => (
        <ProppySubscription parentProps={props} providers={providers}>
          {proppyProps => <Component {...proppyProps} />}
        </ProppySubscription>
      ))
    }
    David Konsumer
    @konsumer
    this would mean I could force a refresh of the app anywhere by using withGlobal (to get setGlobal) and I could update providers, and it would cascade downward. I still get the feeling I'm not understanding how it's all supposed to fit together, though.
    David Konsumer
    @konsumer
    I made another demo that uses proppy the way I think it should work for global-state that updates all children that use it. This also doesn't work: https://codesandbox.io/s/6xyvr3rv2n
    basically I want to build my proppy providers with proppy, and have them update when the provider-props update. If I know I am doing this part right, I can verify that my PR is the right way to solve the warning. If I'm not doing this right, then some guidance would be greatly appreciated.