@joist/di 4.0.0-next.4 → 4.0.0-next.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/di",
-  "version": "4.0.0-next.4",
+  "version": "4.0.0-next.6",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -20,7 +20,7 @@
   "description": "Dependency Injection for Vanilla JS classes",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/deebloo/joist.git"
+    "url": "git+https://github.com/joist-framework/joist.git"
   },
   "keywords": [
     "TypeScript",
@@ -31,7 +31,7 @@
   "author": "deebloo",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/deebloo/joist/issues"
+    "url": "https://github.com/joist-framework/joist/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -57,17 +57,7 @@
     "test": {
       "command": "wtr --config wtr.config.mjs",
       "files": [
-        "target/**"
-      ],
-      "output": [],
-      "dependencies": [
-        "build",
-        "test:node"
-      ]
-    },
-    "test:node": {
-      "command": "node --test target/**/*.test-node.js",
-      "files": [
+        "wtr.config.mjs",
         "target/**"
       ],
       "output": [],

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

@@ -1,30 +1,28 @@
-import { expect } from '@open-wc/testing';
+import { assert } from 'chai';
 
 import { DOMInjector } from './dom-injector.js';
-import { Injectables } from './injector.js';
+import { injectables } from './injector.js';
 
-describe('DOMInjector', () => {
-  it('should attach an injector to a dom element', () => {
-    const root = document.createElement('div');
-    const app = new DOMInjector();
+it('should attach an injector to a dom element', () => {
+  const root = document.createElement('div');
+  const app = new DOMInjector();
 
-    app.attach(root);
+  app.attach(root);
 
-    const injector = Injectables.get(root);
+  const injector = injectables.get(root);
 
-    expect(injector).to.equal(app);
-  });
+  assert.strictEqual(injector, app);
+});
 
-  it('should remove an injector associated with a dom element', () => {
-    const root = document.createElement('div');
-    const app = new DOMInjector();
+it('should remove an injector associated with a dom element', () => {
+  const root = document.createElement('div');
+  const app = new DOMInjector();
 
-    app.attach(root);
+  app.attach(root);
 
-    expect(Injectables.get(root)).to.equal(app);
+  assert.strictEqual(injectables.get(root), app);
 
-    app.detach(root);
+  app.detach(root);
 
-    expect(Injectables.get(root)).to.equal(undefined);
-  });
+  assert.strictEqual(injectables.get(root), undefined);
 });

package/src/lib/dom-injector.ts

@@ -1,11 +1,11 @@
-import { Injectables, Injector } from './injector.js';
+import { injectables, Injector } from './injector.js';
 
 export class DOMInjector extends Injector {
   attach(root: HTMLElement) {
-    Injectables.set(root, this);
+    injectables.set(root, this);
   }
 
   detach(root: HTMLElement) {
-    Injectables.delete(root);
+    injectables.delete(root);
   }
 }

package/src/lib/inject.test.ts

@@ -1,25 +1,12 @@
-import { expect } from '@open-wc/testing';
+import { assert } from 'chai';
 
 import { inject } from './inject.js';
 import { injectable } from './injectable.js';
 import { Injector } from './injector.js';
 import { StaticToken } from './provider.js';
 
-describe('inject', () => {
-  it('should work', () => {
-    class HelloService {}
-
-    @injectable()
-    class HelloWorld extends HTMLElement {
-      hello = inject(HelloService);
-    }
-
-    customElements.define('inject-1', HelloWorld);
-
-    expect(new HelloWorld().hello()).to.be.instanceOf(HelloService);
-  });
-
-  it('should throw error if called in constructor', () => {
+it('should throw error if called in constructor', () => {
+  assert.throws(() => {
     class FooService {
       value = '1';
     }
@@ -35,49 +22,39 @@ describe('inject', () => {
 
     const parent = new Injector();
 
-    try {
-      parent.inject(BarService);
-
-      throw new Error('Should not succeed');
-    } catch (err) {
-      const error = err as Error;
-
-      expect(error.message).to.equal(
-        `BarService is either not injectable or a service is being called in the constructor. \n Either add the @injectable() to your class or use the [LifeCycle.onInject] callback method.`
-      );
-    }
-  });
-
-  it('should use the calling injector as parent', () => {
-    class FooService {
-      value = '1';
-    }
-
-    @injectable()
-    class BarService {
-      foo = inject(FooService);
-    }
+    parent.inject(BarService);
+  }, 'BarService is either not injectable or a service is being called in the constructor.');
+});
 
-    const parent = new Injector([
-      {
-        provide: FooService,
-        use: class extends FooService {
-          value = '100';
-        }
+it('should use the calling injector as parent', () => {
+  class FooService {
+    value = '1';
+  }
+
+  @injectable()
+  class BarService {
+    foo = inject(FooService);
+  }
+
+  const parent = new Injector([
+    {
+      provide: FooService,
+      use: class extends FooService {
+        value = '100';
       }
-    ]);
+    }
+  ]);
 
-    expect(parent.inject(BarService).foo().value).to.equal('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);
-    }
+  @injectable()
+  class HelloWorld {
+    hello = inject(TOKEN);
+  }
 
-    expect(new HelloWorld().hello()).to.equal('Hello World');
-  });
+  assert.strictEqual(new HelloWorld().hello(), 'Hello World');
 });

package/src/lib/inject.ts

@@ -1,12 +1,12 @@
 import { InjectionToken } from './provider.js';
 
-import { Injectables } from './injector.js';
+import { injectables } from './injector.js';
 
 export type Injected<T> = () => T;
 
 export function inject<This extends object, T>(token: InjectionToken<T>): Injected<T> {
   return function (this: This) {
-    const injector = Injectables.get(this);
+    const injector = injectables.get(this);
 
     if (injector === undefined) {
       const name = Object.getPrototypeOf(this.constructor).name;

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

@@ -0,0 +1,130 @@
+import { assert } from 'chai';
+
+import { inject } from './inject.js';
+import { injectable } from './injectable.js';
+
+it('should allow services to be injected into custom element', () => {
+  class Foo {}
+
+  @injectable()
+  class MyElement extends HTMLElement {
+    foo = inject(Foo);
+  }
+
+  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', () => {
+  class Foo {}
+
+  class MyBaseElement extends HTMLElement {}
+
+  @injectable()
+  class MyElement extends MyBaseElement {
+    foo = inject(Foo);
+  }
+
+  customElements.define('injectable-2', MyElement);
+
+  const el = new MyElement();
+
+  assert.instanceOf(el.foo(), Foo);
+});
+
+it('should handle parent HTML Injectors', async () => {
+  @injectable()
+  class A {}
+
+  @injectable()
+  class B {
+    a = inject(A);
+  }
+
+  class AltA implements A {}
+
+  @injectable({
+    providers: [
+      { provide: B, use: B },
+      { provide: A, use: AltA }
+    ]
+  })
+  class Parent extends HTMLElement {}
+
+  @injectable()
+  class Child extends HTMLElement {
+    b = inject(B);
+  }
+
+  customElements.define('injectable-parent-1', Parent);
+  customElements.define('injectable-child-1', Child);
+
+  const el = document.createElement('div');
+  el.innerHTML = /*html*/ `
+    <injectable-parent-1>
+      <injectable-child-1></injectable-child-1>
+    </injectable-parent-1>
+  `;
+
+  document.body.append(el);
+
+  const child = el.querySelector<Child>('injectable-child-1')!;
+
+  assert.instanceOf(child.b().a(), AltA);
+
+  el.remove();
+});
+
+it('should handle changing contexts', async () => {
+  class A {}
+  class AltA implements A {}
+
+  @injectable({
+    providers: [{ provide: A, use: A }]
+  })
+  class Ctx1 extends HTMLElement {}
+
+  @injectable({
+    providers: [{ provide: A, use: AltA }]
+  })
+  class Ctx2 extends HTMLElement {}
+
+  @injectable()
+  class Child extends HTMLElement {
+    a = inject(A);
+  }
+
+  customElements.define('ctx-1', Ctx1);
+  customElements.define('ctx-2', Ctx2);
+  customElements.define('ctx-child', Child);
+
+  const el = document.createElement('div');
+  el.innerHTML = /*html*/ `
+    <div>
+      <ctx-1>
+        <ctx-child></ctx-child>
+      </ctx-1>
+
+      <ctx-2></ctx-2>
+    </div>
+  `;
+
+  document.body.append(el);
+
+  const ctx2 = el.querySelector('ctx-2')!;
+
+  let child = el.querySelector<Child>('ctx-child')!;
+
+  assert.instanceOf(child.a(), A);
+
+  child.remove();
+
+  ctx2.append(child);
+
+  child = el.querySelector<Child>('ctx-child')!;
+
+  assert.instanceOf(child.a(), AltA);
+});

package/src/lib/injectable-el.ts

@@ -0,0 +1,63 @@
+import { injectables, Injector } from './injector.js';
+import { ConstructableToken } from './provider.js';
+
+export function injectableEl<T extends ConstructableToken<HTMLElement>>(
+  Base: T,
+  _ctx: ClassDecoratorContext
+) {
+  return class InjectablElement 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);
+        }
+      });
+    }
+
+    connectedCallback() {
+      if (this.isConnected) {
+        this.dispatchEvent(new Event('finddiroot', { bubbles: true }));
+
+        if (super.connectedCallback) {
+          super.connectedCallback();
+        }
+      }
+    }
+
+    disconnectedCallback() {
+      injectables.get(this)?.setParent(undefined);
+
+      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;
+}

package/src/lib/injectable.test.ts

@@ -1,126 +1,31 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { assert } from 'chai';
 
 import { injectable } from './injectable.js';
 import { inject } from './inject.js';
+import { injectables } from './injector.js';
 
-describe('@injectable()', () => {
-  it('should allow a custom element to be injected with deps', () => {
-    class Foo {}
-    class Bar {}
+it('should locally override a provider', () => {
+  class Foo {}
 
-    @injectable()
-    class MyElement extends HTMLElement {
-      foo = inject(Foo);
-      bar = inject(Bar);
-    }
+  class Bar extends Foo {}
 
-    customElements.define('injectable-1', MyElement);
+  @injectable({
+    providers: [{ provide: Foo, use: Bar }]
+  })
+  class MyService {
+    foo = inject(Foo);
+  }
 
-    const el = document.createElement('injectable-1') as MyElement;
+  const el = new MyService();
 
-    expect(el.foo()).to.be.instanceOf(Foo);
-  });
-
-  it('should locally override a provider', () => {
-    class Foo {}
-
-    class Bar extends Foo {}
-
-    @injectable({
-      providers: [{ provide: Foo, use: Bar }]
-    })
-    class MyElement {
-      foo = inject(Foo);
-    }
-
-    const el = new MyElement();
-
-    expect(el.foo()).to.be.instanceOf(Bar);
-  });
-
-  it('should handle parent HTML Injectors', async () => {
-    @injectable()
-    class A {}
-
-    @injectable()
-    class B {
-      a = inject(A);
-    }
-
-    class AltA implements A {}
-
-    @injectable({
-      providers: [
-        { provide: B, use: B },
-        { provide: A, use: AltA }
-      ]
-    })
-    class Parent extends HTMLElement {}
-
-    @injectable()
-    class Child extends HTMLElement {
-      b = inject(B);
-    }
-
-    customElements.define('injectable-parent-1', Parent);
-    customElements.define('injectable-child-1', Child);
-
-    const el = await fixture(html`
-      <injectable-parent-1>
-        <injectable-child-1></injectable-child-1>
-      </injectable-parent-1>
-    `);
-
-    const child = el.querySelector<Child>('injectable-child-1')!;
-
-    expect(child.b().a()).to.be.instanceOf(AltA);
-  });
-
-  it('should handle changing contexts', async () => {
-    class A {}
-    class AltA implements A {}
-
-    @injectable({
-      providers: [{ provide: A, use: A }]
-    })
-    class Ctx1 extends HTMLElement {}
-
-    @injectable({
-      providers: [{ provide: A, use: AltA }]
-    })
-    class Ctx2 extends HTMLElement {}
-
-    @injectable()
-    class Child extends HTMLElement {
-      a = inject(A);
-    }
-
-    customElements.define('ctx-1', Ctx1);
-    customElements.define('ctx-2', Ctx2);
-    customElements.define('ctx-child', Child);
-
-    const el = await fixture(html`
-      <div>
-        <ctx-1>
-          <ctx-child></ctx-child>
-        </ctx-1>
-
-        <ctx-2></ctx-2>
-      </div>
-    `);
-
-    const ctx2 = el.querySelector('ctx-2')!;
-
-    let child = el.querySelector<Child>('ctx-child')!;
-
-    expect(child.a()).to.be.instanceOf(A);
-
-    child.remove();
+  assert.instanceOf(el.foo(), Bar);
+});
 
-    ctx2.append(child);
+it('should define an injector for a service instance', () => {
+  @injectable()
+  class MyService {}
 
-    child = el.querySelector<Child>('ctx-child')!;
+  const instance = new MyService();
 
-    expect(child.a()).to.be.instanceOf(AltA);
-  });
+  assert.ok(injectables.has(instance));
 });

package/src/lib/injectable.ts

@@ -1,73 +1,31 @@
 import { ConstructableToken, Provider } from './provider.js';
-import { Injectables, Injector } from './injector.js';
+import { injectables, Injector } from './injector.js';
+import { injectableEl } from './injectable-el.js';
 
 export interface InjectableOpts {
-  providers: Provider<unknown>[];
+  providers?: Provider<unknown>[];
 }
 
 export function injectable(opts?: InjectableOpts) {
-  return function injectableDecorator<T extends ConstructableToken<any>>(Base: T, _?: unknown) {
-    return class InjectableNode extends Base {
+  return function injectableDecorator<T extends ConstructableToken<any>>(
+    Base: T,
+    ctx: ClassDecoratorContext
+  ) {
+    class Injectable extends Base {
       constructor(..._: any[]) {
         super();
 
-        // Define a new Injector and assiciate it with this instance of the service
-        const injector = new Injector(opts?.providers);
-
-        Injectables.set(this, injector);
-
-        // If the current injectable instance is a HTMLElement preform additional startup logic
-        // this will find and attach parent injectors
-        if ('HTMLElement' in globalThis && this instanceof HTMLElement) {
-          this.addEventListener('finddiroot', (e) => {
-            const parentInjector = findInjectorRoot(e);
-
-            if (parentInjector !== null) {
-              injector.setParent(parentInjector);
-            }
-          });
-        }
-      }
-
-      connectedCallback() {
-        if ('HTMLElement' in globalThis && this instanceof HTMLElement) {
-          this.dispatchEvent(new Event('finddiroot'));
-
-          if (super.connectedCallback) {
-            super.connectedCallback();
-          }
-        }
+        injectables.set(this, new Injector(opts?.providers));
       }
+    }
 
-      disconnectedCallback() {
-        const injector = Injectables.get(this);
-
-        if (injector) {
-          injector.setParent(undefined);
-        }
-
-        if (super.disconnectedCallback) {
-          super.disconnectedCallback();
-        }
+    // 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(Injectable, ctx);
       }
-    };
-  };
-}
-
-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 Injectable;
+  };
 }