How to use haunted - 10 common examples

import { useContext, component, createContext } from "haunted";

// https://github.com/matthewp/haunted/issues/75
const createConsumer = Context =>
  component(
    function({ render }) {
      const context = useContext(Context);

      return render(context);
    },
    HTMLElement,
    { useShadowDOM: false }
  );

const ShopContext = createContext({
  products: [],
  cart: [],
  addProductToCart: () => {},
  removeProductFromCart: () => {}
});

ShopContext.Consumer = createConsumer(ShopContext);

customElements.define("shop-provider", ShopContext.Provider);
customElements.define("shop-consumer", ShopContext.Consumer);

<h3>Log in or register an account!</h3>
                    
                    

                     update({customerid: '45645645'})}&gt;Log in
                    Register
                            
                `
            :html`<h2>(You are already logged in, go to the <a href="/pizzamenu">pizza menu</a> and order some pizzas :)</h2>`

        }
        
    `;
}
customElements.define('x-login', component(LoginFE, { useShadowDOM: false }));

const createConsumer = Context =>
  component(
    function({ render }) {
      const context = useContext(Context);

      return render(context);
    },
    HTMLElement,
    { useShadowDOM: false }
  );

`;
};

export default GlobalState;

customElements.define("global-state", component(GlobalState));

Products
          
          <li>
            Cart (${cartItemNumber})
          </li>
        
      
    
  `;
};

export default MainNavigation;

customElements.define(
  "main-navigation",
  component(MainNavigation, HTMLElement, { useShadowDOM: false })
);

.on(route.path, params => {
          if (!customElements.get(route.tag)) {
            customElements.define(
              route.tag,
              component(route.page, HTMLElement, { useShadowDOM: false })
            );
          }
          Router.inject(route.tag);
        })
        .resolve();

${logo}
    <h1>${title}</h1>
    <p>Edit <code>src/MyApp.js</code> and save to reload.</p>
    <a rel="noopener noreferrer" href="https://open-wc.org/developing/#examples" class="app-link">
      Code examples
    </a>
  `;
}

export const PageMain = component(PageMainElement);

color: var(--color-active, black);
      }
    
    <a class="${active ?" href="${element.to}">
      
    </a>
  `;
};

RouterLink.observedAttributes = ["to"];

customElements.define("router-link", component(RouterLink));

function({ render }) {
      const context = useContext(Context);

      return render(context);
    },
    HTMLElement,

function LoginFE() {
    const [customerid, setUserid] = useState(null);
    useEffect(() => {
        import('./kernel').then((Module) => {
            Module.onKernelKey('change:customerid', _customerid => {
                setUserid(_customerid);
            });
            setUserid(Module.getSharedKernel('customerid'));
        })
      }, []);    

    const update = (newState) => {
        import('./kernel').then((Module) => {
            Module.updateSharedKernel(newState);
        })
    }    
    return html`
    <section class="wc-module">
        </section>