@joist/di 4.0.0-next.5 → 4.0.0-next.50

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 {}
 
@@ -48,9 +48,9 @@ it('should handle parent HTML Injectors', async () => {
 
   @injectable({
     providers: [
-      { provide: B, use: B },
-      { provide: A, use: AltA }
-    ]
+      [B, { use: B }],
+      [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: [{ provide: A, use: A }]
+    providers: [[A, { use: A }]],
   })
   class Ctx1 extends HTMLElement {}
 
   @injectable({
-    providers: [{ provide: 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,63 +1,69 @@
-import { injectables, Injector } from './injector.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
-) {
-  return class InjectablElementeNode extends Base {
-    constructor(..._: any[]) {
-      super();
-
-      /**
-       * Listen for the finddiroot event.
-       * This is event is triggered when the element is connected to the dom
-       * This event will bubble up until it finds a parent injector which is then attached
-       * This will also work through shadow roots (that are not "closed")
-       */
-      this.addEventListener('finddiroot', (e) => {
-        const parentInjector = findInjectorRoot(e);
-
-        if (parentInjector) {
-          injectables.get(this)?.setParent(parentInjector);
+  ctx: ClassDecoratorContext,
+): T {
+  const metadata: InjectableMetadata = ctx.metadata;
+
+  const def = {
+    [Base.name]: class extends Base {
+      constructor(..._: any[]) {
+        super();
+
+        const injector = injectables.get(this);
+
+        if (injector) {
+          this.addEventListener("context-request", (e) => {
+            if (e.target !== this && e.context === INJECTOR_CTX) {
+              e.stopPropagation();
+
+              e.callback(injector);
+            }
+          });
+
+          callLifecycle(this, injector, metadata?.onCreated);
         }
-      });
-    }
+      }
+
+      connectedCallback() {
+        const injector = injectables.get(this);
+
+        if (injector) {
+          this.dispatchEvent(
+            new ContextRequestEvent(INJECTOR_CTX, (ctx) => {
+              injector.parent = ctx;
+            }),
+          );
 
-    connectedCallback() {
-      if (this.isConnected) {
-        this.dispatchEvent(new Event('finddiroot', { bubbles: true }));
+          callLifecycle(this, injector, metadata?.onInjected);
+        }
 
         if (super.connectedCallback) {
           super.connectedCallback();
         }
       }
-    }
 
-    disconnectedCallback() {
-      injectables.get(this)?.setParent(undefined);
+      disconnectedCallback() {
+        const injector = injectables.get(this);
+
+        if (injector) {
+          injector.parent = undefined;
+        }
 
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback();
+        if (super.disconnectedCallback) {
+          super.disconnectedCallback();
+        }
       }
-    }
+    },
   };
-}
-
-function findInjectorRoot(e: Event): Injector | null {
-  const path = e.composedPath();
-
-  // find firt parent
-  // skips the first item which is the target
-  for (let i = 1; i < path.length; i++) {
-    const part = path[i];
-
-    const injector = injectables.get(part);
-
-    if (injector) {
-      return injector;
-    }
-  }
 
-  return null;
+  return def[Base.name];
 }

package/src/lib/injectable.test.ts

@@ -1,16 +1,17 @@
-import { assert } from 'chai';
+import { assert } from "chai";
 
-import { injectable } from './injectable.js';
-import { inject } from './inject.js';
-import { injectables } from './injector.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: [{ provide: Foo, use: Bar }]
+    providers: [[Foo, { use: Bar }]],
   })
   class MyService {
     foo = inject(Foo);
@@ -21,11 +22,48 @@ 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 {}
+  class MyService {
+    constructor(public arg = "a") {}
+  }
 
-  const instance = new MyService();
+  const instance = new MyService("b");
 
   assert.ok(injectables.has(instance));
+  assert.ok(instance.arg === "b");
+});
+
+it("should inject the current service injectable instance", () => {
+  @injectable()
+  class MyService {
+    injector = inject(Injector);
+  }
+
+  const app = new Injector();
+  const service = app.inject(MyService);
+
+  assert.equal(service.injector(), injectables.get(service));
+});
+
+it("should not override the name of the original class", () => {
+  @injectable()
+  class MyService {}
+
+  assert.equal(MyService.name, "MyService");
+});
+
+it("should provide itself for spefified tokens", () => {
+  const TOKEN = new StaticToken("MY_TOKEN");
+
+  @injectable({
+    provideSelfAs: [TOKEN],
+  })
+  class MyService {
+    value = inject(TOKEN);
+  }
+
+  const service = new MyService();
+
+  assert.equal(service.value(), service);
 });

package/src/lib/injectable.ts

@@ -1,31 +1,60 @@
-import { ConstructableToken, Provider } from './provider.js';
-import { injectables, Injector } from './injector.js';
-import { injectableEl } from './injectable-el.js';
+(Symbol as any).metadata ??= Symbol("Symbol.metadata");
+
+import { injectableEl } from "./injectable-el.js";
+import { Injector, injectables } from "./injector.js";
+import type {
+  ConstructableToken,
+  InjectionToken,
+  Provider,
+} from "./provider.js";
 
 export interface InjectableOpts {
-  providers?: Provider<unknown>[];
+  name?: string;
+  providers?: Iterable<Provider<any>>;
+  provideSelfAs?: InjectionToken<any>[];
 }
 
 export function injectable(opts?: InjectableOpts) {
   return function injectableDecorator<T extends ConstructableToken<any>>(
     Base: T,
-    ctx: ClassDecoratorContext
-  ) {
-    class InjectableNode extends Base {
-      constructor(..._: any[]) {
-        super();
+    ctx: ClassDecoratorContext,
+  ): T {
+    const def = {
+      [Base.name]: class extends Base {
+        constructor(...args: any[]) {
+          super(...args);
 
-        injectables.set(this, new Injector(opts?.providers));
-      }
-    }
+          const injector = new Injector(opts);
+
+          injector.providers.set(Injector, {
+            factory: () => injector,
+          });
+
+          if (opts?.provideSelfAs) {
+            for (const token of opts.provideSelfAs) {
+              injector.providers.set(token, {
+                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)) {
-        return injectableEl(InjectableNode, ctx);
+    if ("HTMLElement" in globalThis) {
+      if (
+        Object.prototype.isPrototypeOf.call(
+          HTMLElement.prototype,
+          Base.prototype,
+        )
+      ) {
+        return injectableEl(def[Base.name], ctx);
       }
     }
 
-    return InjectableNode;
+    return def[Base.name];
   };
 }

package/src/lib/injector.test.ts

@@ -1,11 +1,11 @@
-import { assert } from 'chai';
+import { assert } from "chai";
 
-import { Injector } from './injector.js';
-import { inject } from './inject.js';
-import { injectable } from './injectable.js';
-import { Provider, 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 create a new instance of a single provider', () => {
+it("should create a new instance of a single provider", () => {
   class A {}
 
   const app = new Injector();
@@ -15,7 +15,7 @@ it('should create a new instance of a single provider', () => {
   assert.equal(app.inject(A), app.inject(A));
 });
 
-it('should inject providers in the correct order', () => {
+it("should inject providers in the correct order", () => {
   class A {}
   class B {}
 
@@ -32,7 +32,7 @@ it('should inject providers in the correct order', () => {
   assert(instance.b() instanceof B);
 });
 
-it('should create a new instance of a provider that has a full dep tree', () => {
+it("should create a new instance of a provider that has a full dep tree", () => {
   class A {}
 
   @injectable()
@@ -61,7 +61,7 @@ it('should create a new instance of a provider that has a full dep tree', () =>
   assert(instance.d().c().b().a() instanceof A);
 });
 
-it('should override a provider if explicitly instructed', () => {
+it("should override a provider if explicitly instructed", () => {
   class A {}
 
   @injectable()
@@ -70,117 +70,131 @@ it('should override a provider if explicitly instructed', () => {
   }
 
   class AltA extends A {}
-  const app = new Injector([{ provide: A, use: AltA }]);
+  const app = new Injector({
+    providers: [[A, { use: AltA }]],
+  });
 
   assert(app.inject(B).a() instanceof AltA);
 });
 
-it('should return an existing instance from a parent injector', () => {
+it("should return an existing instance from a parent injector", () => {
   class A {}
 
   const parent = new Injector();
 
-  const app = new Injector([], parent);
+  const app = new Injector({
+    parent,
+  });
 
   assert.equal(parent.inject(A), app.inject(A));
 });
 
-it('should use a factory if provided', () => {
+it("should use a factory if provided", () => {
   class Service {
     hello() {
-      return 'world';
+      return "world";
     }
   }
 
-  const injector = new Injector([
-    {
-      provide: Service,
-      factory() {
-        return {
-          hello() {
-            return 'world';
-          }
-        };
-      }
-    }
-  ]);
-
-  assert.equal(injector.inject(Service).hello(), 'world');
+  const injector = new Injector({
+    providers: [
+      [
+        Service,
+        {
+          factory() {
+            return {
+              hello() {
+                return "world";
+              },
+            };
+          },
+        },
+      ],
+    ],
+  });
+
+  assert.equal(injector.inject(Service).hello(), "world");
 });
 
-it('should throw an error if provider is missing both factory and use', () => {
+it("should throw an error if provider is missing both factory and use", () => {
   class Service {
     hello() {
-      return 'world';
+      return "world";
     }
   }
 
-  const injector = new Injector([
-    {
-      provide: Service
-    }
-  ]);
+  const injector = new Injector({
+    providers: [[Service, {} as any]],
+  });
 
   assert.throws(
     () => injector.inject(Service),
-    "Provider for Service found but is missing either 'use' or 'factory'"
+    "Provider for Service found but is missing either 'use' or 'factory'",
   );
 });
 
-it('should pass factories and instance of the injector', async () => {
+it("should pass factories and instance of the injector", async () => {
   class Service {
     hello() {
-      return 'world';
+      return "world";
     }
   }
 
   let factoryInjector: Injector | null = null;
 
-  const injector = new Injector([
-    {
-      provide: Service,
-      factory(i) {
-        factoryInjector = i;
-      }
-    }
-  ]);
+  const injector = new Injector({
+    providers: [
+      [
+        Service,
+        {
+          factory(i) {
+            factoryInjector = i;
+          },
+        },
+      ],
+    ],
+  });
 
   injector.inject(Service);
 
   assert.equal(factoryInjector, injector);
 });
 
-it('should create an instance from a StaticToken factory', () => {
-  const TOKEN = new StaticToken('test', () => 'Hello World');
+it("should create an instance from a StaticToken factory", () => {
+  const TOKEN = new StaticToken("test", () => "Hello World");
   const injector = new Injector();
 
   const res = injector.inject(TOKEN);
 
-  assert.equal(res, 'Hello World');
+  assert.equal(res, "Hello World");
 });
 
-it('should create an instance from an async StaticToken factory', async () => {
-  const TOKEN = new StaticToken('test', () => Promise.resolve('Hello World'));
+it("should create an instance from an async StaticToken factory", async () => {
+  const TOKEN = new StaticToken("test", async () => "Hello World");
   const injector = new Injector();
 
   const res = await injector.inject(TOKEN);
 
-  assert.equal(res, 'Hello World');
+  assert.equal(res, "Hello World");
 });
 
-it('should allow static token to be overridden', () => {
-  const TOKEN = new StaticToken<string>('test');
-
-  const provider: Provider<string> = {
-    provide: TOKEN,
-    factory() {
-      return 'Hello World';
-    }
-  };
-
-  const injector = new Injector([provider]);
+it("should allow static token to be overridden", () => {
+  const TOKEN = new StaticToken<string>("test");
+
+  const injector = new Injector({
+    providers: [
+      [
+        TOKEN,
+        {
+          factory() {
+            return "Hello World";
+          },
+        },
+      ],
+    ],
+  });
 
   const res = injector.inject(TOKEN);
 
-  assert.equal(res, 'Hello World');
+  assert.equal(res, "Hello World");
 });