@joist/di 4.0.0-next.41 → 4.0.0-next.44

package/README.md

@@ -338,34 +338,38 @@ customElements.define('my-element', MyElement);
 
 ### Context Elements:
 
-Context elements are where Hierarchical Injectors can really shine as they allow you to defined React/Preact esq "context" elements. Since custom elements are treated the same as any other class they can define providers for their local scope.
+Context elements are where Hierarchical Injectors can really shine as they allow you to defined React/Preact esq "context" elements. 
+Since custom elements are treated the same as any other class they can define providers for their local scope. The `provideSelfAs` property will provide the current class for the tokens given.
+This also makes it easy to attributes to define values for the service.
 
 ```TS
 const app = new DOMInjector();
 
 app.attach(document.body);
 
-class Colors {
-  primary = 'red';
-  secodnary = 'green';
+interface ColorCtx {
+  primary: string;
+  secondary: string;
 }
 
+const COLOR_CTX = new StaticToken<ColorCtx>('COLOR_CTX')
+
 @injectable({
-  providers: [
-    {
-      provide: Colors,
-      use: class implements Colors {
-        primary = 'orange';
-        secondary = 'purple';
-      }
-    }
-  ]
+  provideSelfAs: [COLOR_CTX]
 })
-class ColorCtx extends HTMLElement {}
+class ColorCtx extends HTMLElement implements ColorCtx {
+  get primary() {
+    return this.getAttribute("primary") ?? "red"
+  }
+
+  get secondary() {
+    return this.getAttribute("secondary") ?? "green"
+  }
+}
 
 @injectable()
 class MyElement extends HTMLElement {
-  #colors = inject(Colors);
+  #colors = inject(COLOR_CTX);
 
   connectedCallback() {
     const { primary } = this.#colors();
@@ -374,17 +378,17 @@ class MyElement extends HTMLElement {
   }
 }
 
-// Note: To use parent providers, the parent elements need to be defined first in correct order!
+// Note: To use parent providers, the parent elements need to be defined first!
 customElements.define('color-ctx', ColorCtx);
 customElements.define('my-element', MyElement);
 ```
 
 ```HTML
-<!-- Default Colors -->
+<!-- Error: No colors provided -->
 <my-element></my-element>
 
-<!-- Special color ctx -->
-<color-ctx>
+<!-- colors come from ctx -->
+<color-ctx primary="orange" secondard="blue">
   <my-element></my-element>
 </color-ctx>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/di",
-  "version": "4.0.0-next.41",
+  "version": "4.0.0-next.44",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/context/injector.ts

@@ -1,4 +1,5 @@
-import { Injector } from '../injector.js';
-import { Context, createContext } from './protocol.js';
+import type { Injector } from "../injector.js";
+import { type Context, createContext } from "./protocol.js";
 
-export const INJECTOR_CTX: Context<'injector', Injector> = createContext('injector');
+export const INJECTOR_CTX: Context<"injector", Injector> =
+  createContext("injector");

package/src/lib/context/protocol.ts

@@ -15,7 +15,12 @@ export type UnknownContext = Context<unknown, unknown>;
 /**
  * A helper type which can extract a Context value type from a Context type
  */
-export type ContextType<T extends UnknownContext> = T extends Context<infer _, infer V> ? V : never;
+export type ContextType<T extends UnknownContext> = T extends Context<
+  infer _,
+  infer V
+>
+  ? V
+  : never;
 
 /**
  * A function which creates a Context value object
@@ -29,7 +34,10 @@ export function createContext<KeyType, ValueType>(key: KeyType) {
  * A callback which is provided by a context requester and is called with the value satisfying the request.
  * This callback can be called multiple times by context providers as the requested value is changed.
  */
-export type ContextCallback<ValueType> = (value: ValueType, unsubscribe?: () => void) => void;
+export type ContextCallback<ValueType> = (
+  value: ValueType,
+  unsubscribe?: () => void,
+) => void;
 
 /**
  * An event fired by a context requester to signal it desires a named context.
@@ -46,8 +54,12 @@ export class ContextRequestEvent<T extends UnknownContext> extends Event {
   callback: ContextCallback<ContextType<T>>;
   subscribe?: boolean;
 
-  public constructor(context: T, callback: ContextCallback<ContextType<T>>, subscribe?: boolean) {
-    super('context-request', { bubbles: true, composed: true });
+  public constructor(
+    context: T,
+    callback: ContextCallback<ContextType<T>>,
+    subscribe?: boolean,
+  ) {
+    super("context-request", { bubbles: true, composed: true });
 
     this.context = context;
     this.callback = callback;
@@ -61,6 +73,6 @@ declare global {
      * A 'context-request' event can be emitted by any element which desires
      * a context value to be injected by an external provider.
      */
-    'context-request': ContextRequestEvent<Context<unknown, unknown>>;
+    "context-request": ContextRequestEvent<Context<unknown, unknown>>;
   }
 }

package/src/lib/dom-injector.test.ts

@@ -1,15 +1,19 @@
-import { assert } from 'chai';
-import { DOMInjector } from './dom-injector.js';
-import { INJECTOR_CTX } from './context/injector.js';
-import { Injector } from './injector.js';
-import { ContextRequestEvent } from './context/protocol.js';
-
-describe('DOMInjector', () => {
-  it('should respond to elements looking for an injector', () => {
+import { assert } from "chai";
+
+import { INJECTOR_CTX } from "./context/injector.js";
+import {
+  ContextRequestEvent,
+  type UnknownContext,
+} from "./context/protocol.js";
+import { DOMInjector } from "./dom-injector.js";
+import { Injector } from "./injector.js";
+
+describe("DOMInjector", () => {
+  it("should respond to elements looking for an injector", () => {
     const injector = new DOMInjector();
     injector.attach(document.body);
 
-    const host = document.createElement('div');
+    const host = document.createElement("div");
     document.body.append(host);
 
     let parent: Injector | null = null;
@@ -17,7 +21,7 @@ describe('DOMInjector', () => {
     host.dispatchEvent(
       new ContextRequestEvent(INJECTOR_CTX, (i) => {
         parent = i;
-      })
+      }),
     );
 
     assert.equal(parent, injector);
@@ -26,23 +30,35 @@ describe('DOMInjector', () => {
     host.remove();
   });
 
-  it('should send request looking for other injector contexts', () => {
+  it("should send request looking for other injector contexts", () => {
     const parent = new Injector();
     const injector = new DOMInjector();
 
-    const cb = (e: any) => {
+    const cb = (e: ContextRequestEvent<UnknownContext>) => {
       if (e.context === INJECTOR_CTX) {
         e.callback(parent);
       }
     };
 
-    document.body.addEventListener('context-request', cb);
+    document.body.addEventListener("context-request", cb);
 
     injector.attach(document.body);
 
     assert.equal(injector.parent, parent);
 
     injector.detach();
-    document.body.removeEventListener('context-request', cb);
+    document.body.removeEventListener("context-request", cb);
+  });
+
+  it("should throw an error if attempting to attach an already attached DOMInjector", () => {
+    const injector = new DOMInjector();
+
+    const el = document.createElement("div");
+
+    injector.attach(el);
+
+    assert.throw(() => {
+      injector.attach(el);
+    });
   });
 });

package/src/lib/dom-injector.ts

@@ -1,35 +1,54 @@
-import { ContextRequestEvent } from './context/protocol.js';
-import { INJECTOR_CTX } from './context/injector.js';
-import { Injector } from './injector.js';
+import { INJECTOR_CTX } from "./context/injector.js";
+import {
+  ContextRequestEvent,
+  type UnknownContext,
+} from "./context/protocol.js";
+import { Injector } from "./injector.js";
 
 export class DOMInjector extends Injector {
-  #contextCallback = (e: ContextRequestEvent<{ __context__: unknown }>) => {
-    if (e.context === INJECTOR_CTX) {
-      if (e.target !== this.#element) {
-        e.stopPropagation();
-
-        e.callback(this);
-      }
-    }
-  };
-
   #element: HTMLElement | null = null;
+  #controller: AbortController | null = null;
+
+  get isAttached(): boolean {
+    return this.#element !== null && this.#controller !== null;
+  }
 
   attach(element: HTMLElement): void {
+    if (this.isAttached) {
+      throw new Error(
+        `This DOMInjector is already attached to ${this.#element}. Detach first before attaching again`,
+      );
+    }
+
     this.#element = element;
+    this.#controller = new AbortController();
 
-    this.#element.addEventListener('context-request', this.#contextCallback);
+    this.#element.addEventListener(
+      "context-request",
+      (e: ContextRequestEvent<UnknownContext>) => {
+        if (e.context === INJECTOR_CTX) {
+          if (e.target !== element) {
+            e.stopPropagation();
+
+            e.callback(this);
+          }
+        }
+      },
+      { signal: this.#controller.signal },
+    );
 
     this.#element.dispatchEvent(
       new ContextRequestEvent(INJECTOR_CTX, (parent) => {
-        this.setParent(parent);
-      })
+        this.parent = parent;
+      }),
     );
   }
 
   detach(): void {
-    if (this.#element) {
-      this.#element.removeEventListener('context-request', this.#contextCallback);
+    if (this.#controller) {
+      this.#controller.abort();
     }
+
+    this.#element = null;
   }
 }

package/src/lib/inject.test.ts

@@ -1,14 +1,14 @@
-import { assert } from 'chai';
+import { assert } from "chai";
 
-import { inject } from './inject.js';
-import { injectable } from './injectable.js';
-import { Injector } from './injector.js';
-import { StaticToken } from './provider.js';
+import { inject } from "./inject.js";
+import { injectable } from "./injectable.js";
+import { Injector } from "./injector.js";
+import { StaticToken } from "./provider.js";
 
-it('should throw error if called in constructor', () => {
+it("should throw error if called in constructor", () => {
   assert.throws(() => {
     class FooService {
-      value = '1';
+      value = "1";
     }
 
     @injectable()
@@ -23,12 +23,12 @@ it('should throw error if called in constructor', () => {
     const parent = new Injector();
 
     parent.inject(BarService);
-  }, 'BarService is either not injectable or a service is being called in the constructor.');
+  }, "BarService is either not injectable or a service is being called in the constructor.");
 });
 
-it('should throw error if static token is unavailable', () => {
+it("should throw error if static token is unavailable", () => {
   assert.throws(() => {
-    const TOKEN = new StaticToken('test');
+    const TOKEN = new StaticToken("test");
 
     const parent = new Injector();
 
@@ -36,9 +36,9 @@ it('should throw error if static token is unavailable', () => {
   }, 'Provider not found for "test"');
 });
 
-it('should use the calling injector as parent', () => {
+it("should use the calling injector as parent", () => {
   class FooService {
-    value = '1';
+    value = "1";
   }
 
   @injectable()
@@ -52,23 +52,23 @@ it('should use the calling injector as parent', () => {
         FooService,
         {
           use: class extends FooService {
-            value = '100';
-          }
-        }
-      ]
-    ]
+            value = "100";
+          },
+        },
+      ],
+    ],
   });
 
-  assert.strictEqual(parent.inject(BarService).foo().value, '100');
+  assert.strictEqual(parent.inject(BarService).foo().value, "100");
 });
 
-it('should inject a static token', () => {
-  const TOKEN = new StaticToken('test', () => 'Hello World');
+it("should inject a static token", () => {
+  const TOKEN = new StaticToken("test", () => "Hello World");
 
   @injectable()
   class HelloWorld {
     hello = inject(TOKEN);
   }
 
-  assert.strictEqual(new HelloWorld().hello(), 'Hello World');
+  assert.strictEqual(new HelloWorld().hello(), "Hello World");
 });

package/src/lib/inject.ts

@@ -1,17 +1,17 @@
-import { InjectionToken } from './provider.js';
-import { injectables } from './injector.js';
+import { injectables } from "./injector.js";
+import type { InjectionToken } from "./provider.js";
 
 export type Injected<T> = () => T;
 
-export function inject<This extends object, T>(token: InjectionToken<T>): Injected<T> {
+export function inject<This extends object, T>(
+  token: InjectionToken<T>,
+): Injected<T> {
   return function (this: This) {
     const injector = injectables.get(this);
 
     if (injector === undefined) {
-      const name = this.constructor.name;
-
       throw new Error(
-        `${name} is either not injectable or a service is being called in the constructor. \n Either add the @injectable() to your class or use the @injected callback method.`
+        `${this.constructor.name} is either not injectable or a service is being called in the constructor. \n Either add the @injectable() to your class or use the @injected callback method.`,
       );
     }
 

package/src/lib/injectable-el.test.ts

@@ -1,9 +1,9 @@
-import { assert } from 'chai';
+import { assert } from "chai";
 
-import { inject } from './inject.js';
-import { injectable } from './injectable.js';
+import { inject } from "./inject.js";
+import { injectable } from "./injectable.js";
 
-it('should allow services to be injected into custom element', () => {
+it("should allow services to be injected into custom element", () => {
   class Foo {}
 
   @injectable()
@@ -11,14 +11,14 @@ it('should allow services to be injected into custom element', () => {
     foo = inject(Foo);
   }
 
-  customElements.define('injectable-1', MyElement);
+  customElements.define("injectable-1", MyElement);
 
   const el = new MyElement();
 
   assert.instanceOf(el.foo(), Foo);
 });
 
-it('should allow services to be injected into custom elements that has been extended', () => {
+it("should allow services to be injected into custom elements that has been extended", () => {
   class Foo {}
 
   class MyBaseElement extends HTMLElement {}
@@ -28,14 +28,14 @@ it('should allow services to be injected into custom elements that has been exte
     foo = inject(Foo);
   }
 
-  customElements.define('injectable-2', MyElement);
+  customElements.define("injectable-2", MyElement);
 
   const el = new MyElement();
 
   assert.instanceOf(el.foo(), Foo);
 });
 
-it('should handle parent HTML Injectors', async () => {
+it("should handle parent HTML Injectors", async () => {
   @injectable()
   class A {}
 
@@ -49,8 +49,8 @@ it('should handle parent HTML Injectors', async () => {
   @injectable({
     providers: [
       [B, { use: B }],
-      [A, { use: AltA }]
-    ]
+      [A, { use: AltA }],
+    ],
   })
   class Parent extends HTMLElement {}
 
@@ -59,10 +59,10 @@ it('should handle parent HTML Injectors', async () => {
     b = inject(B);
   }
 
-  customElements.define('injectable-parent-1', Parent);
-  customElements.define('injectable-child-1', Child);
+  customElements.define("injectable-parent-1", Parent);
+  customElements.define("injectable-child-1", Child);
 
-  const el = document.createElement('div');
+  const el = document.createElement("div");
   el.innerHTML = /*html*/ `
     <injectable-parent-1>
       <injectable-child-1></injectable-child-1>
@@ -71,24 +71,24 @@ it('should handle parent HTML Injectors', async () => {
 
   document.body.append(el);
 
-  const child = el.querySelector<Child>('injectable-child-1')!;
+  const child = el.querySelector<Child>("injectable-child-1");
 
-  assert.instanceOf(child.b().a(), AltA);
+  assert.instanceOf(child?.b().a(), AltA);
 
   el.remove();
 });
 
-it('should handle changing contexts', async () => {
+it("should handle changing contexts", async () => {
   class A {}
   class AltA implements A {}
 
   @injectable({
-    providers: [[A, { use: A }]]
+    providers: [[A, { use: A }]],
   })
   class Ctx1 extends HTMLElement {}
 
   @injectable({
-    providers: [[A, { use: AltA }]]
+    providers: [[A, { use: AltA }]],
   })
   class Ctx2 extends HTMLElement {}
 
@@ -97,11 +97,11 @@ it('should handle changing contexts', async () => {
     a = inject(A);
   }
 
-  customElements.define('ctx-1', Ctx1);
-  customElements.define('ctx-2', Ctx2);
-  customElements.define('ctx-child', Child);
+  customElements.define("ctx-1", Ctx1);
+  customElements.define("ctx-2", Ctx2);
+  customElements.define("ctx-child", Child);
 
-  const el = document.createElement('div');
+  const el = document.createElement("div");
   el.innerHTML = /*html*/ `
     <div>
       <ctx-1>
@@ -114,17 +114,17 @@ it('should handle changing contexts', async () => {
 
   document.body.append(el);
 
-  const ctx2 = el.querySelector('ctx-2')!;
+  const ctx2 = el.querySelector("ctx-2");
 
-  let child = el.querySelector<Child>('ctx-child')!;
+  let child = el.querySelector<Child>("ctx-child");
 
-  assert.instanceOf(child.a(), A);
+  assert.instanceOf(child?.a(), A);
 
   child.remove();
 
-  ctx2.append(child);
+  ctx2?.append(child);
 
-  child = el.querySelector<Child>('ctx-child')!;
+  child = el.querySelector<Child>("ctx-child");
 
-  assert.instanceOf(child.a(), AltA);
+  assert.instanceOf(child?.a(), AltA);
 });

package/src/lib/injectable-el.ts

@@ -1,13 +1,15 @@
-import { ContextRequestEvent } from './context/protocol.js';
-import { INJECTOR_CTX } from './context/injector.js';
-import { injectables } from './injector.js';
-import { callLifecycle } from './lifecycle.js';
-import { InjectableMetadata } from './metadata.js';
-import { ConstructableToken } from './provider.js';
+(Symbol as any).metadata ??= Symbol("Symbol.metadata");
+
+import { INJECTOR_CTX } from "./context/injector.js";
+import { ContextRequestEvent } from "./context/protocol.js";
+import { injectables } from "./injector.js";
+import { callLifecycle } from "./lifecycle.js";
+import type { InjectableMetadata } from "./metadata.js";
+import type { ConstructableToken } from "./provider.js";
 
 export function injectableEl<T extends ConstructableToken<HTMLElement>>(
   Base: T,
-  ctx: ClassDecoratorContext
+  ctx: ClassDecoratorContext,
 ): T {
   const metadata: InjectableMetadata = ctx.metadata;
 
@@ -18,17 +20,15 @@ export function injectableEl<T extends ConstructableToken<HTMLElement>>(
 
         const injector = injectables.get(this);
 
-        this.addEventListener('context-request', (e) => {
-          if (e.target !== this && e.context === INJECTOR_CTX) {
-            e.stopPropagation();
+        if (injector) {
+          this.addEventListener("context-request", (e) => {
+            if (e.target !== this && e.context === INJECTOR_CTX) {
+              e.stopPropagation();
 
-            if (injector) {
               e.callback(injector);
             }
-          }
-        });
+          });
 
-        if (injector) {
           callLifecycle(this, injector, metadata?.onCreated);
         }
       }
@@ -36,15 +36,13 @@ export function injectableEl<T extends ConstructableToken<HTMLElement>>(
       connectedCallback() {
         const injector = injectables.get(this);
 
-        this.dispatchEvent(
-          new ContextRequestEvent(INJECTOR_CTX, (parent) => {
-            if (injector) {
-              injector.setParent(parent);
-            }
-          })
-        );
-
         if (injector) {
+          this.dispatchEvent(
+            new ContextRequestEvent(INJECTOR_CTX, (ctx) => {
+              injector.parent = ctx;
+            }),
+          );
+
           callLifecycle(this, injector, metadata?.onInjected);
         }
 
@@ -54,13 +52,17 @@ export function injectableEl<T extends ConstructableToken<HTMLElement>>(
       }
 
       disconnectedCallback() {
-        injectables.get(this)?.setParent(undefined);
+        const injector = injectables.get(this);
+
+        if (injector) {
+          injector.parent = undefined;
+        }
 
         if (super.disconnectedCallback) {
           super.disconnectedCallback();
         }
       }
-    }
+    },
   };
 
   return def[Base.name];