Need for context properties

I like the turn project took, and I suppose Redux is going to be mainstream in this area. And there is one thing that might improve the way LitElement works with Redux.

This idea is not unique, React also has it.

Now, in order pass a property down the hierarchy, each component needs to define it and pass over to its children

Better approach might be to have context properties that will be available for all affected scope/branch it will be applied.

I am not sure about implementation, but maybe scoped custom element registry and WeakMap might come in handy?

And it will be possible to have this sort of code

my-component-container.js

   import MyComponent from './my-component.js';

   const mapStateToProps = state => ({ someState: state.someState });
   const mapDispatchToProps = dispatch =>
            ({ doSomething: (value) => dispatch({ type: 'DO_SOMETHING', payload: value }) });

   export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

my-component.js

   ...
   export default class MyComponent extends LitElement {
        static get properties() {
            return {
               someState: String,
               doSomething: Function,
            };
        }
        _render({ someState, doSomething }) {
           return html`<input value=${someState} on-change=${doSomething}/>`;
       }
   };

connect.js

   export const connect = (mapStateToProps, mapDispatchToProps) => baseElement => {
       return class extends baseElement {
           connectedCallback() {
                const { store } = this.context;
                if (!store) {
                   throw new Error('no store passed over');
                }
                this.__storeUnsubscribe = store.subscribe(() => this._stateChanged(store.getState()));
                ....
           }

           disconnectedCallback() {
              if (this.__storeUnsubscribe) {
                  this.__storeUnsubscribe();
              }
               ...
           }
       }
   }

index.html

   <store-provider>
      <my-component></my-component>
   </store-provider>
   <script>
      import { createContext } from  '@polymer/lit-element';
      createContext('store-provider', { store: createStore() }));
   </script>

[blikblum]

I created wc-context library that supports lit-element and skatejs as well vanilla web components

The API is still in flux

[Lodin]

I’ve been thinking a lot about implementing React-like context to Web Components and finally found an answer: why it should be React-like? Especially when React team itself decided to kill old-style context and create a new one.

In my opinion, React relies on components too much. They even replaced class inheritance with HOCs, trying to make classes looking like a function. It still doesn’t work, because component have their own lifecycle, and it breaks the very idea of component = function (I think React is great project changed everything in web development though).

Web Components are different. While React has its own compiler starting with React.render(), Web Components don’t have any external system to inject context as React does. But they don’t have to do it, because we have a great platform-close tool to achieve any necessary context we need.

Just create a factory that consumes your store and produces connect function, and it will work without any special context:

// createConnect.js
export const createConnector = store => (mapStateToProps, mapDispatchToProps) => baseElement => {
       return class extends baseElement {
           connectedCallback() {
                this.__storeUnsubscribe = store.subscribe(() => this._stateChanged(store.getState()));
                ....
           }

           disconnectedCallback() {
              if (this.__storeUnsubscribe) {
                  this.__storeUnsubscribe();
              }
               ...
           }
       }
   }

// connect.js
export default const connect = createConnect(createStore());

That’s it. You don’t need extra code to support complex system of context as it was in React.

Also I think it is very similar approach the new React context has. They use a function to create Provider and Consumer components that are exchanging value property between each other. But we don’t even need components to do it, everything is built-in.