Возможно вставлять php код в шабланизатор handlebars??

Question

[LoveCodeandCoffe]

Собираюсь с завтрашнего дня начинать делать сайт для человека. Для системы управления нужно использовать webasyst ( shop-script). Сам я больше с фронтом дружу, но в пxп +- секу. И вот мне такая странная идея пришла после праздников. Почитал немного доку. Входной файл по сути является index.html к которому подключаются через пхп другие страницы. Возможно все это развернуть как spa приложение? (хотя бы только фронт без админки) вот таким образом:
Подключить webpack
Настроить входной файл index.htm( получается входной файл разрабатываемой темы)
Настроить входной файл index.js(ну как обычно в него будут подключаться модули и билдится он будет в bundle js)
p.s и в него же думаю js c дефолтной темой подключить
Все дополнительные страницы будут переписаны с использованием шаблонизатора handlebars
И вот тут , чтобы не потерять стуктуру cms . Я бы хотел сделать так( если это возможно):
Имеем шаблон header.hbs

<div id="header">
    <?php echo '<h1>Привет, мир!</h1>'; ?>
  </div>

и затем в 2 js фала ( vanilla js)
header.js

import  headerTemplate from {тут путь до header.hbs}
const Header = () => document.getElementById('app').innerHTML = headerTemplate()

и home.js

import  Header from  {тут путь до header.js}
//render header
Header()

Вообще вроде как hbs, только для вывода данных предназначен( вроде как только в строковом формате) но может можно как-то изловчиться?

Comments

[LoveCodeandCoffe]

Hellayas, ну ктати хороший вопрос) Поскольку это сms там еще кучу фалов контроллеров помимо папки с темой, и кучу разных php фалов. а файлы с html ,что то типо вьюхи. Сервер умеет определять php код в файлах .html и работает все хорошо. т. я хочу изменить только внешний вид сайта(только его вью) переписать это все таким образом, чтобы у меня не было кучу html файлов а только 1 и а все остальные заменить на hbs. Ну или даже (если это возможно) отдельные html страницы сделать компонентами html. Цель получить из многостраничного сайта - одностраничный, при этом не нарушив работы php

[LoveCodeandCoffe]

Hellayas, а или вы имели ввиду, немого другое входной файл вебпака должен иметь расширение .php? а разве сервер не поймет если там конструкция php будит. Я честно не знаю как это все при билде выглядеть будет.
Получается будет выходной index в котором bundle.js ( и в этом js ( получается будет вызываться php код)

[LoveCodeandCoffe]

Hellayas, ДА ладно) я знаю ,что такое spa. А причем к нему сервер) Мне нужно просто php подружить по сути с spa. можно поставить аксиос к примеру, и гнать все через json . Но это не , то смысл cms на php тогда теряется. А я хочу просто фронт заточенный под сms поменять на одностраничный, с сохранением php в щаблонах

[LoveCodeandCoffe]

Hellayas Спасибо, я вас понял. Т.е 2 приложения . Один клиентская часть . Другой серверная. И связь через api. Но вот с классическими cms которые традиционно написанные на php и html которых генерируется на сервере. Можно переписать , чтобы страницы рендерились на стороне клиента, используя js ?

Answer 1

[Дмитрий Беляев]

Handlebars шаблон обрабатывается в compile-time
В run-time будет просто js функция, которая принимает на вход объект контекста и возвращает строку.
Следовательно никакой php в шаблоне не выполнится

Comments

[LoveCodeandCoffe]

Вы хорошо разбираетесь. Тогда может подскажите. Я еще не совсем в теме с вебпаком. Но вот вроде бы есть лодеры php.
И возможно тогда подключить php в js?

[Дмитрий Беляев]

LoveCodeandCoffe, не слышал о лоадерах для php и слабо представляю, что такой лоадер должен делать
php как правило выполняется на сервере в контексте http запросов
js выполняется много где, но webpack'ом его собирают в основном для браузера
суть лоадеров webpack - трансформировать не js код в js, например в style-loader css код трансформируется в js строку + скрипт для внедрения этой строки в тег style

в общем, самый распространенный вариант выглядит так: php должен работать на сервере и реализовывать апи, которое например будет на http запрос отдавать некий json, а js в браузере должен общаться с этим апи посредством браузерной функции fetch и на основе полученного json что-то делать