Трафарет. js: Как использовать функцию utils в индексе. html

Question

Я создаю всплывающий шаблон js.

Структура файла:

• popup-element
  • src
    • utils
      • popup-manager
    • компоненты
      • popup-element
        • popup-element.tsx
    • index. html
  • ...

Теперь я пытаюсь вставить компонент в DOM из функции: popup-manager.ts

export function createMiniNotification(notificationContent: string, mountTarget: HTMLElement = document.body): HTMLElement {
  const notify = document.createElement('popup-element');
  notify.setAttribute('content', notificationContent);
  mountTarget.appendChild(notify);
}

Как я могу использовать эту функцию в index. html (в режиме разработки)?

Answer 1

Не очень просто импортировать что-то из вашего кода после переноса и объединения (особенно в prod, когда происходит минификация).

Я бы посоветовал вам создать упаковочный компонент, например app-root и вызовите свою функцию оттуда, например, в componentDidLoad ловушке жизненного цикла:

import { Component, Host, h } from '@stencil/core';
import { createMiniNotification } from '../utils/popup-manager';

@Component({ tag: 'app-root' })
export class AppRoot {
  componentDidLoad() {
    createMiniNotification(/* ... */);
  }

  render() {
    return <Host />;
  }
}

Затем вы можете просто добавить этот компонент-обертку в ваш index.html:

<app-root></app-root>