Vite

Medusa\Helpers\Frontend\Vite отвечает за подключение ассетов и подготовку mount/state для frontend-приложений через fluent-API helper-класса.

Выбор frontend-сущности

Для работы с Vite используется конструктор new Medusa\Helpers\Frontend\Vite($entity), где $entity — имя каталога внутри одного из зарегистрированных source-каталогов frontend:

use Medusa\Helpers\Frontend;

$vite = new Frontend\Vite('themes');

Изменение имени entry-файла

По умолчанию helper использует файл entry.js. Имя entry-файла можно изменить методом $vite->setEntryFilename($filename) до первого получения секций:

$vite->setEntryFilename('entry.custom.js');

Метод возвращает текущий объект, поэтому его можно использовать в цепочке вызовов.

Регистрация entry-блока

Регистрация entry-блока выполняется методом $vite->include($name, $data = []), где $name — имя каталога внутри зарегистрированного source-каталога frontend, например, внутри www/frontend/{entity}/, а $data — состояние, передаваемое во frontend:

$vite->include('default', [
    'title' => 'Добро пожаловать!',
    'subTitle' => 'Это страница приветствия!',
]);

Метод include() возвращает текущий объект, поэтому может вызываться цепочкой несколько раз.

Получение preload-тегов

Получение тегов выполняется методом $vite->preload($toString = false):

$preload = $vite->preload(true);

Метод preload() по умолчанию возвращает массив тегов. Если передать аргумент $toString со значением true, метод вернёт готовую HTML-строку.

Получение CSS-тегов

Получение тегов выполняется методом $vite->css($toString = false):

$css = $vite->css(true);

Метод css() по умолчанию возвращает массив тегов. Если передать аргумент $toString со значением true, метод вернёт готовую HTML-строку.

Получение JavaScript-тегов

Получение тегов выполняется методом $vite->js($toString = false):

$js = $vite->js(true);

Метод js() по умолчанию возвращает массив тегов. Если передать аргумент $toString со значением true, метод вернёт готовую HTML-строку.

Получение JSON-данных состояния

Получение данных выполняется методом $vite->json($toString = false):

$json = $vite->json(true);

Метод json() по умолчанию возвращает массив тегов. Если передать аргумент $toString со значением true, метод вернёт готовую HTML-строку.

Получение mount-контейнера

Получение контейнера выполняется методом $vite->html($toString = false):

$html = $vite->html(true);

Метод html() по умолчанию возвращает массив тегов. Если передать аргумент $toString со значением true, метод вернёт готовую HTML-строку.

Пример содержимого файла www/frontend/themes/default/entry.js:

import {mount} from '@shared/js/mount';
import {state} from '@shared/js/state';

import {createApp} from 'vue';
import DefaultTheme from './DefaultTheme.vue';
import './style.css';

mount('default')
   .state(state)
   .each((node, props) => {
       createApp(DefaultTheme, props).mount(node);
   });

Пример содержимого файла www/frontend/themes/default/DefaultTheme.vue:

<script setup>
import {defaultThemeProps} from './props.js';

defineProps(defaultThemeProps);
</script>

<template>
 <h1>{{ title }}</h1>
 <p>{{ subTitle }}</p>
</template>

Пример содержимого файла www/frontend/themes/default/props.js:

export const defaultThemeProps = {
  title: {
    type: String,
    required: true,
  },
  subTitle: {
    type: String,
    required: true,
  },
};

Пример содержимого файла www/frontend/themes/default/style.css:

h1 {
   color: blue;
}

p {
   color: green;
}