README

用于Twig模板的组件加载器和预处理器。

项目状态：已废弃

这是一个为了允许初级/中级Vue.js开发者快速进入庞大的遗留Symfony/Twig模板而采取的捷径。

它的唯一目的是为了在中间步骤中存活下来进行大重构，以便我们继续使用Vue.js和其他更适合的前端语言。

如果您仍然觉得这可以帮到您，请随时联系post@barthy.koeln或创建一个问题。

语法

组件可以在常规Twig模板中使用

{# File: @components/Page/PHome/PHome.twig #}
{% extends '@components/Teamplate/TBase.twig' %} 

{% block contents %} 
  <AButton
    theme="primary"
    label="{{ 'button.edit_entity'|trans }}"
  />
{% endblock %}

{# File: @components/Atom/AButton/AButton.twig #}

<button
  type="button"
  class="a-button -{{ props.theme|default('grey') }}"
>
  {{ props.label }}
</button>

属性

传递给您的组件的属性可以是硬编码的字符串（例如：theme），或者变量和表达式（例如：level）。它们将在props对象中作用域。

<ALabel
  theme="danger"
  level="{{ errors|count * 10 }}"
/>

块

块可以像在常规twig模板中一样定义和使用。尽管如此，还有一些语法辅助工具

默认块

{# File: @components/Page/PHome/PHome.twig #}
{% extends '@components/Teamplate/TBase.twig' %} 

{% block contents %} 
  <AButton theme="primary">
    {{ 'button.edit_entity'|trans }}
  </AButton>
{% endblock %}

{# File: @components/Atom/AButton/AButton.twig #}

<button
  type="button"
  class="a-button -{{ props.theme|default('grey') }}"
>
  {% block AButton__default %}{% endblock %}
</button>

命名块

{# File: @components/Page/PHome/PHome.twig #}
{% extends '@components/Teamplate/TBase.twig' %} 

{% block contents %} 
  <AButton theme="primary">
    <block #icon>
      <span>&times;</span>
    </block>
    <block #label>{{ 'button.edit_entity'|trans }}</block>
  </AButton>
{% endblock %}

{# File: @components/Atom/AButton/AButton.twig #}

<button
  type="button"
  class="a-button -{{ props.theme|default('grey') }}"
>
  {% if block('icon') is defined %}
    <i class="a-button_icon">{{ block('icon')|raw }}</i>
  {% endif %}
  <span class="a-button__label">
    {% block label %}{% endblock %}
  </span>
</button>

内部工作原理

由于这个组件加载器作为预处理器工作，其目标是接受主观上更简单/更好的语法，并将有效的Twig语法传递给Twig引擎。

了解编译成什么可以帮助您掌握这种新语法

• 包含：没有块的组件
• 嵌入：带有块的组件
• 字符串参数：没有{{ … }}的属性
• 变量和表达式：带有{{ … }}的属性

示例

TCT输入

  <AButton theme="primary">
    <block #icon>
      <span>&times;</span>
    </block>
    <block #label>{{ 'button.edit_entity'|trans }}</block>
  </AButton>
  
  <AIcon name="{{ random_name() }}"/>

Twig输出（简化版）

 {% embed '@components/Atom/AButton/AButton.twig' with { props: { theme: "primary" } } %}
    {% block icon %}
      <span>&times;</span>
    {% endblock %}
    
    {% block label %}
      {{ 'button.edit_entity'|trans }}
    {% endblock %}
 {% endembed %} 
 
 {% include '@components/Atom/AIcon/AIcon.twig' with { props: { name: random_name() } } %}

原因

这个预处理器旨在使开发和管理Twig模板变得更加容易和快捷。

在控制语句：{% if … %}、{% for … %}、{% set … %}和标记/组合：{% include … %}、{% embed … %}之间没有足够的视觉区分。

自定义语法对我来说还不够。