Реализация DI c Inversify JS на Vanilla JS

Question

Реализация DI c Inversify JS на Vanilla JS

Рейтинг: 0Ответов: 1Опубликовано: 13.08.2023

Пытаюсь реализовать свойства зависимостей на Vanilla JS но как то не очень получается. При инициализации класса сервис который я пытаюсь получить приходит как undefined

Класс который регистрирует службы

import { Header } from "../Header/header";
import { HeaderService } from "../Services/header-app-service";
import { Container, decorate, injectable, inject } from "inversify";
import "reflect-metadata";

export class RegisterService {
    get getContainer() {
        const container = new Container();
        container.bind(HeaderService).to(HeaderService).inSingletonScope();
        container.bind(Header).to(Header);
        container.resolve(Header);
    }
}

Класс который принимает службу и тут я получаю в конструкторе undefined

export class Header extends HTMLElement {
    constructor(service) {
        super();
        if (service) {
            const headerService2 = service.getData();
        }
        this.attachShadow({ mode: "open" });
        fetch("../CORE/Header/header.html").
            then(response => response.text()).then(content => {
                this.shadowRoot.innerHTML = content;
                this.createMenu(this.shadowRoot);
            });
    }
}

И вот сама служба

export class HeaderService {
    getData() {
        return "Hello Wolrd";
    }
}

Любое решение буду рад, заранее спасибо!

javascript html dom inversion-of-control es5

Источник: Stack Overflow на русском

Answer 1

▲ 0

Решил с помощью библиотеки Awilix кто работает с Shadow DOM там немного нужно правильно выстроить архитектуру регистрации служб но тема рабочая с Inversify JS так и не получилось не понимаю в чём там у них проблема но наверно на сегодняшний день она работает только с TypeScript.

А вот рабочий вариант с Awilix

export class Header extends HTMLElement {
  constructor({ headerService }) {
    super();
    this.headerService = null; 
  }
 
   connectedCallback() {
    if (!this.headerService) {
        this.headerService = this.dependencies.headerService;
        this.initialize();
    }
   }

initialize() {
    const headerService2 = this.headerService.getData();
}

Класс в котором регистрируем все службы

    import { Header } from "../Header/header";
    import { HeaderService } from "../Services/header-app-service";
    import { createContainer, asClass } from "awilix";
    import "reflect-metadata"
    import { Content } from "../Content/content.js";
    import { Footer } from "../Footer/footer.js";

    export class RegisterService {
        get getContainer() {
           const container = createContainer();
           container.register({
               headerService: asClass(HeaderService).singleton()
           });
           const headerService = container.resolve("headerService");
           Header.prototype.dependencies = { headerService };
        }
    }

customElements.define("custom-header", Header);
customElements.define("custom-content", Content);
customElements.define("custom-footer", Footer);

Реализация DI c Inversify JS на Vanilla JS

Ответы