Open PavelZubkov opened 4 years ago
https://ru.bem.info/technologies/classic/bem-xjst/8/templates-syntax/ бемовский шаблонизатор. Предикат - это селектор, если проводить аналогию с css. Тело - инструкции по переопределению
в яндексе пробывали запилить react-bem-xjst http://webcache.googleusercontent.com/search?newwindow=1&safe=active&sxsrf=ALeKk00q_CdvAI_a8d6hHVA9JiWwqHpMXA%3A1595588684469&ei=TMAaX5KYHKOGwPAPhMqy4Ao&q=cache%3Ahttps%3A%2F%2Fru.bem.info%2Fforum%2F1212%2F&oq=cache%3Ahttps%3A%2F%2Fru.bem.info%2Fforum%2F1212%2F&gs_lcp=CgZwc3ktYWIQAzIECAAQQzIFCAAQywEyBQgAEMsBMgUIABDLATIFCAAQywEyBQgAEMsBMgUIABDLATIFCAAQywEyBQgAEMsBMgUIABDLAToECAAQRzoECCMQJzoFCAAQkQI6AggAOgIILjoICC4QxwEQowJQkGJYxXRgqXZoAXABeACAAZoBiAHFB5IBAzAuN5gBAKABAaABAqoBB2d3cy13aXrAAQE&sclient=psy-ab&ved=0ahUKEwiS7vqF3-XqAhUjAxAIHQSlDKwQ4dUDCAw&uact=5 https://github.com/awinogradov/xjst-ddsl https://github.com/awinogradov/ddsl-react
Интересный вариант. Но как это подружить со статической типизацией?
Интересный вариант. Но как это подружить со статической типизацией?
т.к. все действия в рантайме, то кмк никак(хотя я слаб в тс и типизации). Но можно динамическую - генерировать проптайпсы. Мб возможно генерировать типы по коду и как-нибудь подсовывать тс. Как в мол генерируется папка "-". Думаю лучше адекватное расширение без статической типизации, чем с типизацией но без расширения
Подсказки можно показывать через плагин в редакторе
Какие действия по расширению/переопределению компонентов нужны?
Манипуляция реакт элементами
// Базовый компонент
// параметр dialog - прокси, обращаясь к которому мы описываем структуру компанента
// через пропс *as* мы указываем какие компоненты будут рендерится по умолчанию
@AdequateComponent
const Dialog = (props, dialog) => (
<dialog as={Card}>
<dialog.header as={Card.Header}>
<dialog.title as={Text.Title}>Welcome</dialog.title>
</dialog.header>
<dialog.body as={Card.Body}>How are you?</dialog.body>
<dialog.footer as={Card.Footer}>
<dialog.button.bad as={Button}>Bad</dialog.button.bad>
<dialog.button.ok as={Button}>Ok</dialog.button.ok>
</dialog.footer>
</dialog>
);
вставка:
const ExtendedDialog = Dialog.extend(
<>
// Добавление кнопки с иконкой для закрытия диалога
// внешний тег <dialog.header> выступает в роли селектора, так мы указываем относительно какого компонента, производим изменение
<dialog.header>
<dialog.button.close as={Button} mode="APPEND">
{/* режим - добавление в конец. Кнопка с иконкой добавится в конец dialog.header */}
<dialog.icon.close as={Icon.Close} />
</dialog.button.close>
<dialog.header>
<dialog.footer>
{/* Удаление кнопки bad */}
<dialog.button.bad mode="REMOVE" />
</dialog.footer>
</>
)
TODO: дописать все примеры
Есть предложение расширять в как во вью. Например, есть базовый компонент:
// Базовый компонент
// параметр dialog - прокси, обращаясь к которому мы описываем структуру компанента
// через пропс *as* мы указываем какие компоненты будут рендерится по умолчанию
@AdequateComponent
const Dialog = (props, dialog) => (
<dialog as={Card}>
<dialog.header as={Card.Header}>
<dialog.title as={Text.Title}>Welcome</dialog.title>
</dialog.header>
<dialog.body as={Card.Body}>How are you?</dialog.body>
<dialog.footer as={Card.Footer}>
<dialog.button.bad as={Button}>Bad</dialog.button.bad>
<dialog.button.ok as={Button}>Ok</dialog.button.ok>
</dialog.footer>
</dialog>
);
Нужен диалог с текстом "Недостаточно прав" и убрать кнопку cancel:
function DialogBadPermissions(props) {
return (
<Dialog.extend> // нужен какой-то ключ, что бы отличить children от расширения?
<dialog.body>Недостаточно прав</dialog.body> // меняем боди
<dialog.button.cancel as={null} /> // не рендерим кнопку
</Dialog.extend>
);
}
с пропсами идея в том, что бы их не хардкодить, а прокидывать куда нужно используя структуру(путь в структуре). В самом компоненте не юзать this.props Побочным действием получается, что можно и какой-нибудь компонент внутри переопределить, что для какого-нибудь единичного переопределения может быть удобным. Синтаксис расширения уже для того что бы переделывать структуру.
ps: только дизайн, имплементация отдельно
самый первый набросок:
upd: Расширение