Started with context implementation

Author: xdev1

src/main/js-element-hooks.ts

@@ -1,4 +1,4 @@
-import { intercept, Ctrl } from 'js-element'
+import { intercept, Context, Ctrl } from 'js-element'
 
 // === data ==========================================================
 
@@ -33,6 +33,16 @@ type SelectorsOf<S extends State, U extends Selectors<S>> = {
   [K in keyof U]: U[K] extends (state: S) => infer R ? R : never
 }
 
+type CtxConfig = Record<string, Context<any> | (() => any)>
+
+type ResultOfCtxConfig<C extends CtxConfig> = {
+  [K in keyof C]: C[K] extends Context<infer R>
+    ? R
+    : C[K] extends () => infer R
+    ? R
+    : never
+}
+
 // === hook ====================================================
 
 export function hook<A extends any[], R, F extends { (...args: A): R }>(
@@ -510,3 +520,73 @@ function isEqualArray(arr1: any[], arr2: any[]) {
 
   return ret
 }
+
+// === context =======================================================
+
+type ContextDetail<T> = {
+  context: Context<T>
+  callback: (newValue: T) => void
+  cancelled: Promise<null>
+}
+
+export const useCtx = hook('useCtx', useCtxFn)
+
+function useCtxFn<C extends CtxConfig>(config: C): ResultOfCtxConfig<C>
+
+function useCtxFn<T>(ctx: Context<T>): () => T
+
+function useCtxFn(arg: any): any {
+  if (arg && arg.kind === 'context') {
+    return withConsumer(arg)
+  }
+
+  const ret: any = {}
+
+  Object.entries(arg).forEach(([k, v]) => {
+    Object.defineProperty(ret, k, {
+      get:
+        (v as any).kind === 'context'
+          ? withConsumer(v as any)
+          : (arg[k] as () => any)
+    })
+  })
+
+  return ret
+}
+
+function withConsumer<T>(ctx: Context<T>): () => T {
+  const c = currentCtrl!
+  const host = c.getHost()
+  let cancel: null | (() => void) = null
+
+  const cancelled = new Promise<null>((resolve) => {
+    cancel = () => resolve(null)
+  })
+
+  let value = ctx.defaultValue
+
+  c.beforeMount(() => {
+    const detail: ContextDetail<T> = {
+      context: ctx,
+
+      callback: (newValue: T) => {
+        value = newValue
+        c.refresh()
+      },
+
+      cancelled
+    }
+
+    host.dispatchEvent(
+      new CustomEvent('$$context$$', {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  })
+
+  c.beforeUnmount(() => cancel!())
+
+  return () => value! // TODO
+}

src/main/js-element.ts

@@ -1,10 +1,19 @@
 // === exports =======================================================
 
 // functions and singletons
-export { component, elem, intercept, prop, setMethods, Attrs }
+export {
+  component,
+  createCtx,
+  defineProvider,
+  elem,
+  intercept,
+  prop,
+  setMethods,
+  Attrs
+}
 
 // types
-export { Ctrl, MethodsOf }
+export { Context, Ctrl, MethodsOf }
 
 // === data ==========================================================
 
@@ -67,6 +76,11 @@ type Ctrl = {
 
 type InterceptFn = (ctrl: Ctrl, next: () => void) => void
 
+type Context<T> = {
+  kind: 'context'
+  defaultValue: T
+}
+
 // === decorators (all public) =======================================
 
 function elem<E extends Component, C>(params: {
@@ -486,3 +500,74 @@ function registerElement(
     customElements.define(tagName, elementClass)
   }
 }
+
+// === context =======================================================
+
+function createCtx<T>(defaultValue?: T): Context<T> {
+  return Object.freeze({
+    kind: 'context',
+    defaultValue: defaultValue!
+  })
+}
+
+function defineProvider<T>(
+  tagName: string,
+  ctx: Context<T>
+): { new (): HTMLElement & { value: T | undefined } } {
+  const eventName = `$$context$$`
+
+  class CtxProviderElement extends HTMLElement {
+    private __value?: T = undefined
+    private __subscribers: ((value: T) => void)[] = []
+    private __cleanup: (() => void) | null = null
+
+    constructor() {
+      super()
+      this.attachShadow({ mode: 'open' })
+    }
+
+    get value(): T | undefined {
+      return this.__value
+    }
+
+    set value(val: T | undefined) {
+      if (val !== this.__value) {
+        this.__value = val
+        this.__subscribers.forEach((subscriber) => subscriber(val!))
+      }
+    }
+
+    connectedCallback() {
+      this.shadowRoot!.innerHTML = '<slot></slot>'
+
+      const eventListener = (ev: any) => {
+        if (ev.detail.context !== ctx) {
+          return
+        }
+
+        ev.stopPropagation()
+        this.__subscribers.push(ev.detail.callback)
+
+        ev.detail.cancelled.then(() => {
+          this.__subscribers.splice(
+            this.__subscribers.indexOf(ev.detail.callback),
+            1
+          )
+        })
+      }
+
+      this.addEventListener(eventName, eventListener)
+      this.__cleanup = () => this.removeEventListener(eventName, eventListener)
+    }
+
+    disconnectCallback() {
+      this.__subscribers.length === 0
+      this.__cleanup!()
+      this.__cleanup = null
+    }
+  }
+
+  registerElement(tagName, CtxProviderElement)
+
+  return CtxProviderElement
+}

src/stories/demos/context-demo.ts

@@ -0,0 +1,44 @@
+import { component, createCtx, defineProvider, elem, prop } from 'js-element'
+import { useCtx, useInterval, useState } from 'js-element/hooks'
+import { html, withLit } from 'js-element/lit'
+
+const ThemeCtx = createCtx('light')
+const ThemeProvider = defineProvider('theme-provider', ThemeCtx)
+
+@elem({
+  tag: 'contxt-demo',
+  impl: withLit(implContextDemo)
+})
+class ContextDemo extends component() {}
+
+function implContextDemo(self: ContextDemo) {
+  const [state, setState] = useState({ theme: 'light' })
+
+  useInterval(() => {
+    setState('theme', (it) => (it === 'light' ? 'dark' : 'light'))
+  }, 1000)
+
+  return () => html`
+    <div>
+      <b>Value for theme will change every second:</b>
+      <br />
+      <theme-provider .value=${state.theme}>
+        <theme-info />
+      </theme-provider>
+    </div>
+  `
+}
+
+@elem({
+  tag: 'theme-info',
+  impl: withLit(implThemeInfo)
+})
+class ThemeInfo extends component() {}
+
+function implThemeInfo() {
+  const ctx = useCtx({ theme: ThemeCtx })
+
+  return () => html`<div>Current theme: ${ctx.theme}</div>`
+}
+
+export default ContextDemo

src/stories/index.stories.ts

@@ -1,4 +1,5 @@
 import CounterDemo from './demos/counter-demo'
+import ContextDemo from './demos/context-demo'
 
 export default {
   title: 'Demos'
@@ -10,4 +11,5 @@ function demo(demoClass: any) {
     `<div><${tagName}></${tagName}></div><br><div id="message"></div>`
 }
 
-export const Test = demo(CounterDemo)
+export const counter = demo(CounterDemo)
+export const context = demo(ContextDemo)