Как я могу сделать разделение кода вручную с помощью preact? - PullRequest
Новая
       24

Как я могу сделать разделение кода вручную с помощью preact?

2 голосов
/ 25 мая 2019

Я хочу сделать разделение кода вручную, используя preact.Preact уже разбивает код на маршруты, но я хочу сделать это сам.

Мой пример использования - создание инструмента, в котором пользователь может добавлять виджеты на панель инструментов.На главной странице я хочу включить только код для виджетов, которые настроил пользователь, а не те, которые пользователь не использовал.

Поэтому я не хочу, чтобы код для всех виджетов, связанных в комплекте,bundle.js, но запрашивайте его лениво при необходимости при рендеринге списка виджетов.

Я попытался использовать синтаксис async!, который я видел в некоторых старых коммитах для базовой платформы, но это было сделаноне работает.

Упрощенный пример моего кода

Данные конфигурации 

[{ "type": "notes", "title": "Widget 1}, { "type": "todo", "title": "Widget 2"}]

Функция рендеринга списка 

const Grid = ({ widgets }) => (
    <ul>
        {widgets.map((widget) => <li key={widget.title}><Widget widget={widget} /></li>)}
    </ul>
);

Компонент виджета

Здесь у меня есть отображение от типа к компоненту: 

import notes from widgets/notes;
import todo from widgets/todo;

class Widget extends Component {
    widgetMap(widget) {
      if (widget.type === 'notes') {
         return notes;
      }
      if (widget.type === 'todo') {
          return todo;
      }
    }

    render ({ widget }) {
        const widgetComponent = this.widgetMap(map);
        return (
            <div>
                <h1>{widget.title}</h1>
                <widgetComponent />
            </div>
        );
    } 
}
...