README

composer create-project aleks-bar/wp-theme-vite-ts директория-темы

Настройка

Для корректной работы нужно выполнить команды в папке темы

Для установки зависимостей

npm install

Для инициализации файлов необходимых теме

num run dev или npm run build

Система чанков

В теме можно асинхронно подгружать js и css чанки по условию в основном js файле index.ts. Для создания чанка необходимо в директории chunks добавить файлы чанков, так же импортированные туда css файлы будут биться на чанки css. После этого необходимо в основном js файле использовать метод addLazyChunkForApp для асинхронной загрузки чанка. В этот метод необходимо передать объект приложения app и объект с именами чанков и функциями импорта нужных чанков.

Пример:

addLazyChunkForApp( app,
   {
     'chunk-1': () => import('путь/до/чанка-1'),
     'chunk-2': () => import('путь/до/чанка-2'),
   }
)

Warning

Внутрь impor() нельзя передать переменную, т.к. vite не увидит путь и не сбилдит чанк.

Но перед вызовом метода необходимоо проинициировать зависимости у объекта app.

app.initDependencies()

После этого для работы чанков необходимо в php файле страницы перед вызовом шапки установить имя чанка соответствующего его имени в объекте с чанками для метода addLazyChunkForApp.

Пример:

Theme::setChunkName('chunk-1');
get_header();

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

Принимает первым параметром функцию возвращающую import('путь/до/чанка'), а вторым имя чанка

Он возвращает объект в котором:
data - данные о загрузке чанка, нучжно передать в метод chunkInit
chunkInit - метод который нужно вызвать после загрузки чанка, принимает данные о загрузке чанка data и объект приложения app
chunkLoad - промис вызывающий загрузку чанка

Пример:

const { chunkLoad, data, chunkInit } = chunkLazy( () => import('путь/до/чанка'), chunk-1 );
chunkLoad().then( () => chunkInit(data, app) )