feat: new hook useProvideContext

.changeset/few-dryers-wait.md

@@ -0,0 +1,5 @@
+---
+"haunted": minor
+---
+
+New hook: useProvideContext

docs/docs/hooks/index.md

@@ -10,6 +10,7 @@ Currently Haunted supports the following hooks:
 - [useEffect](./useEffect/)
 - [useLayoutEffect](./useLayoutEffect/)
 - [useMemo](./useMemo/)
+- [useProvideContext](./useProvideContext/)
 - [useReducer](./useReducer/)
 - [useRef](./useRef/)
 - [useState](./useState/)

docs/docs/hooks/useProvideContext.md

@@ -0,0 +1,63 @@
+---
+layout: layout-api
+package: haunted
+module: lib/use-provide-context.js
+---
+
+# Hooks >> useProvideContext
+
+Makes your component become a Context provider. It updates every nested consumer with the current value. You can optionally use a deps array (useful when the context value is mutated instead of being replaced).
+
+```js playground use-provide-context use-provide-context.js
+import {
+  html,
+  component,
+  useState,
+  useContext,
+  createContext,
+  useProvideContext,
+} from "haunted";
+
+const ThemeContext = createContext("dark");
+
+customElements.define("theme-consumer", ThemeContext.Consumer);
+
+function Consumer() {
+  const context = useContext(ThemeContext);
+  return context;
+}
+
+customElements.define("my-consumer", component(Consumer));
+
+function App() {
+  const [theme, setTheme] = useState("light");
+  useProvideContext(ThemeContext, theme);
+
+  return html`
+    <select value=${theme} @change=${(event) => setTheme(event.target.value)}>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
+
+    <my-consumer></my-consumer>
+
+    <theme-provider .value=${theme === "dark" ? "light" : "dark"}>
+      <theme-consumer
+        .render=${(value) =>
+          html`
+            <h1>${value}</h1>
+          `}
+      ></theme-consumer>
+    </theme-provider>
+  `;
+}
+
+customElements.define("use-provide-context", component(App));
+```
+
+```html playground-file use-provide-context index.html
+<script type="module" src="use-provide-context.js"></script>
+<use-provide-context></use-provide-context>
+```
+
+## API

docs/docs/index.md

@@ -19,6 +19,7 @@
 - [useEffect](./hooks/useEffect/)
 - [useLayoutEffect](./hooks/useLayoutEffect/)
 - [useMemo](./hooks/useMemo/)
+- [useProvideContext](./hooks/useProvideContext/)
 - [useReducer](./hooks/useReducer/)
 - [useRef](./hooks/useRef/)
 - [useState](./hooks/useState/)

readme.md

@@ -45,6 +45,7 @@ Currently Haunted supports the following hooks:
 - [useEffect](https://hauntedhooks.netlify.app/docs/hooks/useEffect/)
 - [useLayoutEffect](https://hauntedhooks.netlify.app/docs/hooks/useLayoutEffect/)
 - [useMemo](https://hauntedhooks.netlify.app/docs/hooks/useMemo/)
+- [useProvideContext](https://hauntedhooks.netlify.app/docs/hooks/useProvideContext/)
 - [useReducer](https://hauntedhooks.netlify.app/docs/hooks/useReducer/)
 - [useRef](https://hauntedhooks.netlify.app/docs/hooks/useRef/)
 - [useState](https://hauntedhooks.netlify.app/docs/hooks/useState/)

src/core.ts

@@ -33,6 +33,7 @@ export { useState } from './use-state';
 export { useReducer } from './use-reducer';
 export { useMemo } from './use-memo';
 export { useContext } from './use-context';
+export { useProvideContext } from './use-provide-context';
 export { useRef } from './use-ref';
 export { hook, Hook } from './hook';
 export { BaseScheduler } from './scheduler';

src/use-provide-context.ts

@@ -0,0 +1,75 @@
+import { Context, ContextDetail } from "./create-context";
+import { Hook, hook } from "./hook";
+import { State } from "./state";
+import { contextEvent } from "./symbols";
+
+/**
+ * @function
+ * @template T
+ * @param  {Context} Context Context to provide a value for
+ * @param  {T} value the current value
+ * @param  {unknown[]} values dependencies to the value update
+ * @return void
+ */
+export const useProvideContext = hook(
+  class<T> extends Hook<[Context<T>, T, unknown[]], void, Element> {
+    listeners: Set<(value: T) => void>;
+
+    constructor(
+      id: number,
+      state: State<Element>,
+      private context: Context<T>,
+      private value: T,
+      private values?: unknown[]
+    ) {
+      super(id, state);
+      this.context = context;
+      this.value = value;
+      this.values = values;
+
+      this.listeners = new Set();
+      this.state.host.addEventListener(contextEvent, this);
+    }
+
+    disconnectedCallback() {
+      this.state.host.removeEventListener(contextEvent, this);
+    }
+
+    handleEvent(event: CustomEvent<ContextDetail<T>>): void {
+      const { detail } = event;
+
+      if (detail.Context === this.context) {
+        detail.value = this.value;
+        detail.unsubscribe = this.unsubscribe.bind(this, detail.callback);
+
+        this.listeners.add(detail.callback);
+
+        event.stopPropagation();
+      }
+    }
+
+    unsubscribe(callback: (value: T) => void): void {
+      this.listeners.delete(callback);
+    }
+
+    update(context: Context<T>, value: T, values?: unknown[]): void {
+      if (this.hasChanged(values)) {
+        this.values = values;
+        this.value = value;
+        for (const callback of this.listeners) {
+          callback(value);
+        }
+      }
+    }
+
+    hasChanged(values?: unknown[]) {
+      const lastValues = this.values;
+
+      if (lastValues == null || values == null) {
+        return true;
+      }
+
+      return values.some((value, i) => lastValues[i] !== value);
+    }
+  }
+);

test/context.test.ts

@@ -1,4 +1,4 @@
-import { component, html, createContext, useContext, useState } from '../src/haunted.js';
+import { component, html, createContext, useContext, useState, useProvideContext } from '../src/haunted.js';
 import { fixture, expect, nextFrame } from '@open-wc/testing';
 
 describe('context', function() {
@@ -37,16 +37,25 @@ describe('context', function() {
     component(ProviderWithSlots)
   );
 
+  function CustomProvider(host) {
+    const {value} = host;
+    useProvideContext(Context, value, [value]);
+  }
+
+  customElements.define('custom-provider', component(CustomProvider));
+
   let withProviderValue, withProviderUpdate;
   let rootProviderValue, rootProviderUpdate;
   let nestedProviderValue, nestedProviderUpdate;
   let genericConsumerValue, genericConsumerUpdate;
+  let customProviderValue, customProviderUpdate;
 
   function Tests() {
     [withProviderValue, withProviderUpdate] = useState();
     [rootProviderValue, rootProviderUpdate] = useState('root');
     [nestedProviderValue, nestedProviderUpdate] = useState('nested');
     [genericConsumerValue, genericConsumerUpdate] = useState('generic');
+    [customProviderValue, customProviderUpdate] = useState('custom');
 
     return html`
       <div id="without-provider">
@@ -81,6 +90,12 @@ describe('context', function() {
           </slotted-context-provider>
         </context-provider>
       </div>
+
+      <div id="custom-provider">
+        <custom-provider .value=${customProviderValue}>
+          <context-consumer></context-consumer>
+        </custom-provider>
+      </div>
     `;
   }
 
@@ -122,6 +137,10 @@ describe('context', function() {
     expect(getResults('#with-slotted-provider slotted-context-provider context-consumer')[0]).to.equal('slotted');
   });
 
+  it('uses custom value when custom provider is found', async () => {
+    expect(getResults('#custom-provider context-consumer')[0]).to.equal('custom');
+  });
+
   describe('with generic consumer component', function () {
     it('should render template with context value', async () => {
       expect(getContentResults('#generic-consumer generic-consumer')).to.deep.equal(['generic-value']);