3.2.1 • Published 13 hours ago

@joist/di v3.2.1

Weekly downloads
12
License
MIT
Repository
github
Last release
13 hours ago

Di

Dependency Injection in ~800 bytes.

Allows you to inject services into other class instances (including custom elements and node).

Installation:

npm i @joist/di

Example:

Classes that are decoratored with @injectable can use the inject() function to inject a class instance.

Different implementations can be provided for services.

import { Injector, injectable, inject } from '@joist/di';

class Engine {
  type: 'gas' | 'electric' = 'gas';

  accelerate() {
    return 'vroom';
  }
}

class Tires {
  size = 16;
}

@injectable
class Car {
  engine = inject(Engine);
  tires = inject(Tires);

  accelerate() {
    // the inject function returns a function
    // this means that services are not initalized until they are called
    return this.engine().accelerate();
  }
}

const factory1 = new Injector();
const car1 = factory1.get(Car);

// vroom, 16
console.log(car1.accelerate(), car1.tires().size);

const factory2 = new Injector([
  {
    provide: Engine,
    use: class extends Engine {
      type = 'electric';

      accelerate() {
        return 'hmmmmmmmm';
      }
    }
  },
  {
    provide: Tires,
    use: class extends Tires {
      size = 20;
    }
  }
]);

const car2 = factory2.get(Car);

//hmmmmmmmm, 20
console.log(car2.accelerate(), car2.tires().size);

Factories

In addition to defining providers with classes you can also use factory functions.

abstract class Logger {
  abstract log(...args: any[]): void;
}

const app = new Injector([
  {
    provide: Logger,
    factory() {
      return console;
    }
  }
]);

Custom Elements:

Joist is built to work with custom elements. Since the document is a tree we can search up that tree for providers.

import { injectable, inject } from '@joist/di';

class Colors {
  primary = 'red';
  secodnary = 'green';
}

@injectable
class ColorCtx extends HTMLElement {
  // services can be scoped to a particular injectable
  static providers = [
    {
      provide: Colors,
      use: class implements Colors {
        primary = 'orange';
        secondary = 'purple';
      },
    },
  ]
}

@injectable
class MyElement extends HTMLElement {
  #colors = inject(Colors);

  connectedCallback() {
    const { primary } = this.#colors();

    this.style.background = primary;
  }
}

// Note: To use parent providers, the parent elements need to be defined first in correct order!
customElements.define('color-ctx', ColorCtx);
customElements.define('my-element', MyElement);
<!-- Default Colors -->
<my-element></my-element>

<!-- Special color ctx -->
<color-ctx>
  <my-element></my-element>
</color-ctx>

Environment

When using @joist/di with custom elements a default root injector is created dubbed 'environment'. This is the injector that all other injectors will eventually stop at. If you need to define something in this environment you can do so with the defineEnvironment method.

import { defineEnvironment } from '@joist/di';

defineEnvironment([{ provide: MyService, use: SomeOtherService }]);

No decorators no problem:

While this library is built with decorators in mind it is designed so that it can be used without them.

import { Injector, injectable, inject } from '@joist/di';

class Engine {
  type: 'gas' | 'electric' = 'gas';
}

class Tires {
  size = 16;
}

const Car = injectable(
  class {
    engine = inject(Engine);
    tires = inject(Tires);
  }
);

const app = new Injector();
const car = app.get(Car);

// gas, 16
console.log(car.engine(), car.tires());
3.2.1

13 hours ago

3.2.0

13 hours ago

3.1.3

13 hours ago

3.1.2

2 months ago

3.1.1

2 months ago

3.1.0

2 months ago

3.0.8-next.0

3 months ago

3.0.8-next.1

3 months ago

3.0.0-next.19

11 months ago

3.0.0-next.18

11 months ago

3.0.0-next.17

11 months ago

3.0.4

6 months ago

3.0.3

8 months ago

3.0.1

8 months ago

3.0.7

6 months ago

3.0.6

8 months ago

3.0.5

8 months ago

3.0.0

8 months ago

3.0.0-next.20

11 months ago

3.0.0-rc.2

11 months ago

3.0.0-rc.1

11 months ago

3.0.0-rc.0

11 months ago

3.0.0-next.11

12 months ago

3.0.0-next.10

12 months ago

3.0.0-next.13

12 months ago

3.0.0-next.12

12 months ago

3.0.0-next.2

12 months ago

3.0.0-next.1

12 months ago

3.0.0-next.4

12 months ago

3.0.0-next.3

12 months ago

3.0.0-next.15

12 months ago

3.0.0-next.14

12 months ago

3.0.0-next.16

12 months ago

3.0.0-next.9

12 months ago

3.0.0-next.6

12 months ago

3.0.0-next.5

12 months ago

3.0.0-next.8

12 months ago

3.0.0-next.7

12 months ago

3.0.0-1

12 months ago

3.0.0-0

12 months ago

3.0.0-2

12 months ago

2.0.1

2 years ago

2.0.0

2 years ago

2.0.0-alpha.20

2 years ago

2.0.0-beta.11

2 years ago

2.0.0-beta.13

2 years ago

2.0.0-beta.12

2 years ago

2.0.0-y.0

2 years ago

2.0.0-alpha.11

2 years ago

2.0.0-alpha.19

2 years ago

2.0.0-alpha.18

2 years ago

2.0.0-alpha.17

2 years ago

2.0.0-alpha.16

2 years ago

2.0.0-alpha.15

2 years ago

2.0.0-alpha.14

2 years ago

2.0.0-alpha.13

2 years ago

2.0.0-alpha.12

2 years ago

2.0.0-beta.4

2 years ago

2.0.0-beta.2

2 years ago

2.0.0-beta.1

2 years ago

2.0.0-beta.3

2 years ago

2.0.0-alpha.3

2 years ago

2.0.0-alpha.4

2 years ago

2.0.0-alpha.5

2 years ago

2.0.0-alpha.0

2 years ago

2.0.0-alpha.1

2 years ago

2.0.0-alpha.2

2 years ago

2.0.0-canary.0

2 years ago

2.0.0-next.8

2 years ago

2.0.0-next.9

2 years ago

2.0.0-next.6

2 years ago

2.0.0-next.7

2 years ago

2.0.0-next.4

2 years ago

2.0.0-next.5

2 years ago

2.0.0-next.10

2 years ago

2.0.0-next.2

2 years ago

2.0.0-next.3

2 years ago

2.0.0-next.1

2 years ago

1.8.9

2 years ago

1.8.10

2 years ago

2.0.0-beta.0

2 years ago

1.8.8

3 years ago

1.8.7

3 years ago

1.8.2

3 years ago

1.8.1

3 years ago

1.8.0

3 years ago

1.8.6

3 years ago

1.8.5

3 years ago

1.8.4

3 years ago

1.8.3

3 years ago

1.7.0

3 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.2-canary.0

4 years ago

1.2.1

4 years ago

1.1.4-alpha.0

4 years ago

1.1.4-next.0

4 years ago

1.1.1

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.3

4 years ago

1.0.0

4 years ago

1.0.0-beta.3

4 years ago

1.0.0-beta.2

4 years ago

1.0.0-alpha.30

4 years ago

1.0.0-beta.0

4 years ago

1.0.0-beta.1

4 years ago

1.0.0-alpha.29

4 years ago

1.0.0-alpha.27

4 years ago

1.0.0-alpha.28

4 years ago

1.0.0-alpha.25

4 years ago

1.0.0-alpha.24

4 years ago

1.0.0-alpha.23

4 years ago

1.0.0-alpha.21

4 years ago

1.0.0-alpha.22

4 years ago

1.0.0-alpha.20

4 years ago

1.0.0-alpha.19

4 years ago

1.0.0-alpha.17

4 years ago

1.0.0-alpha.16

4 years ago

1.0.0-alpha.15

4 years ago

1.0.0-alpha.10

4 years ago

1.0.0-alpha.12

4 years ago

1.0.0-alpha.11

4 years ago

1.0.0-alpha.14

4 years ago

1.0.0-alpha.13

4 years ago

1.0.0-alpha.9

4 years ago

1.0.0-alpha.7

4 years ago

1.0.0-alpha.8

4 years ago

1.0.0-alpha.6

4 years ago

1.0.0-alpha.5

4 years ago

1.0.0-alpha.4

4 years ago

1.0.0-alpha.3

4 years ago

1.0.0-alpha.2

4 years ago

1.0.0-alpha.1

4 years ago

1.0.0-alpha.0

4 years ago