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

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

0 голосов
/ 17 марта 2020

Я создаю всплывающий шаблон 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 (в режиме разработки)?

1 Ответ

0 голосов
/ 18 марта 2020

Не очень просто импортировать что-то из вашего кода после переноса и объединения (особенно в 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>
...