@joist/di 4.0.0-next.42 → 4.0.0-next.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/di",
-  "version": "4.0.0-next.42",
+  "version": "4.0.0-next.45",
   "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,33 +1,46 @@
-import { ContextRequestEvent, UnknownContext } 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 {
   #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',
+      "context-request",
       (e: ContextRequestEvent<UnknownContext>) => {
         if (e.context === INJECTOR_CTX) {
-          if (e.target !== this.#element) {
+          if (e.target !== element) {
             e.stopPropagation();
 
             e.callback(this);
           }
         }
       },
-      { signal: this.#controller.signal }
+      { signal: this.#controller.signal },
     );
 
     this.#element.dispatchEvent(
       new ContextRequestEvent(INJECTOR_CTX, (parent) => {
-        this.setParent(parent);
-      })
+        this.parent = parent;
+      }),
     );
   }
 
@@ -35,5 +48,7 @@ export class DOMInjector extends Injector {
     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);
         }
       }
@@ -39,8 +39,8 @@ export function injectableEl<T extends ConstructableToken<HTMLElement>>(
         if (injector) {
           this.dispatchEvent(
             new ContextRequestEvent(INJECTOR_CTX, (ctx) => {
-              injector.setParent(ctx);
-            })
+              injector.parent = ctx;
+            }),
           );
 
           callLifecycle(this, injector, metadata?.onInjected);
@@ -52,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];

package/src/lib/injectable.test.ts

@@ -1,17 +1,17 @@
-import { assert } from 'chai';
+import { assert } from "chai";
 
-import { injectable } from './injectable.js';
-import { inject } from './inject.js';
-import { injectables, Injector } from './injector.js';
-import { StaticToken } from './provider.js';
+import { inject } from "./inject.js";
+import { injectable } from "./injectable.js";
+import { Injector, injectables } from "./injector.js";
+import { StaticToken } from "./provider.js";
 
-it('should locally override a provider', () => {
+it("should locally override a provider", () => {
   class Foo {}
 
   class Bar extends Foo {}
 
   @injectable({
-    providers: [[Foo, { use: Bar }]]
+    providers: [[Foo, { use: Bar }]],
   })
   class MyService {
     foo = inject(Foo);
@@ -22,19 +22,19 @@ it('should locally override a provider', () => {
   assert.instanceOf(el.foo(), Bar);
 });
 
-it('should define an injector for a service instance', () => {
+it("should define an injector for a service instance", () => {
   @injectable()
   class MyService {
-    constructor(public arg = 'a') {}
+    constructor(public arg = "a") {}
   }
 
-  const instance = new MyService('b');
+  const instance = new MyService("b");
 
   assert.ok(injectables.has(instance));
-  assert.ok(instance.arg === 'b');
+  assert.ok(instance.arg === "b");
 });
 
-it('should inject the current service injectable instance', () => {
+it("should inject the current service injectable instance", () => {
   @injectable()
   class MyService {
     injector = inject(Injector);
@@ -46,18 +46,18 @@ it('should inject the current service injectable instance', () => {
   assert.equal(service.injector(), injectables.get(service));
 });
 
-it('should not override the name of the original class', () => {
+it("should not override the name of the original class", () => {
   @injectable()
   class MyService {}
 
-  assert.equal(MyService.name, 'MyService');
+  assert.equal(MyService.name, "MyService");
 });
 
-it('should provide itself for spefified tokens', () => {
-  const TOKEN = new StaticToken('MY_TOKEN');
+it("should provide itself for spefified tokens", () => {
+  const TOKEN = new StaticToken("MY_TOKEN");
 
   @injectable({
-    provideSelfAs: [TOKEN]
+    provideSelfAs: [TOKEN],
   })
   class MyService {
     value = inject(TOKEN);

package/src/lib/injectable.ts

@@ -1,8 +1,12 @@
-(Symbol as any).metadata ??= Symbol('Symbol.metadata');
+(Symbol as any).metadata ??= Symbol("Symbol.metadata");
 
-import { ConstructableToken, InjectionToken, Provider } from './provider.js';
-import { injectables, Injector } from './injector.js';
-import { injectableEl } from './injectable-el.js';
+import { injectableEl } from "./injectable-el.js";
+import { Injector, injectables } from "./injector.js";
+import type {
+  ConstructableToken,
+  InjectionToken,
+  Provider,
+} from "./provider.js";
 
 export interface InjectableOpts {
   name?: string;
@@ -13,7 +17,7 @@ export interface InjectableOpts {
 export function injectable(opts?: InjectableOpts) {
   return function injectableDecorator<T extends ConstructableToken<any>>(
     Base: T,
-    ctx: ClassDecoratorContext
+    ctx: ClassDecoratorContext,
   ): T {
     const def = {
       [Base.name]: class extends Base {
@@ -23,25 +27,30 @@ export function injectable(opts?: InjectableOpts) {
           const injector = new Injector(opts);
 
           injector.providers.set(Injector, {
-            factory: () => injector
+            factory: () => injector,
           });
 
           if (opts?.provideSelfAs) {
             for (const token of opts.provideSelfAs) {
               injector.providers.set(token, {
-                factory: () => this
+                factory: () => this,
               });
             }
           }
 
           injectables.set(this, injector);
         }
-      }
+      },
     };
 
     // Only apply custom element bootstrap logic if the decorated class is an HTMLElement
-    if ('HTMLElement' in globalThis) {
-      if (HTMLElement.prototype.isPrototypeOf(Base.prototype)) {
+    if ("HTMLElement" in globalThis) {
+      if (
+        Object.prototype.isPrototypeOf.call(
+          HTMLElement.prototype,
+          Base.prototype,
+        )
+      ) {
         return injectableEl(def[Base.name], ctx);
       }
     }