[WIP] Simplify setting attributes in patterns

Dockerfile

@@ -47,8 +47,11 @@ COPY composer.json \
     ./
 
 RUN mkdir public source && \
-    composer --no-interaction install --ignore-platform-reqs --classmap-authoritative --no-suggest --prefer-dist
+    composer --no-interaction install --ignore-platform-reqs --classmap-authoritative --no-autoloader --no-suggest --prefer-dist
 
+COPY source/php/ source/php/
+
+RUN composer --no-interaction dump-autoload --classmap-authoritative
 
 
 #

composer.json

@@ -4,6 +4,9 @@
     "autoload": {
         "psr-0": {
             "PatternLab\\": "core/src/"
+        },
+        "psr-4": {
+            "Libero\\PatternLibrary\\": "source/php"
         }
     },
     "require": {

config/config.yml

@@ -40,3 +40,5 @@ twigFilterExt: filter.php
 twigFunctionExt: function.php
 twigTagExt: tag.php
 twigTestExt: test.php
+twigExtensions:
+    - Libero\PatternLibrary\Twig\MergeExtension

gulpfile.babel.js

@@ -50,6 +50,7 @@ const buildConfig = (invocationArgs, publicRoot, sourceRoot, testRoot, exportRoo
   config.dir.src.fonts = `${config.sourceRoot}/fonts`;
   config.dir.src.templates = `${config.sourceRoot}/_patterns`;
   config.dir.src.js = `${config.sourceRoot}/js`;
+  config.dir.src.php = `${config.sourceRoot}/php`;
 
   config.dir.test.sass = `${config.testRoot}/sass`;
 
@@ -59,6 +60,7 @@ const buildConfig = (invocationArgs, publicRoot, sourceRoot, testRoot, exportRoo
   config.dir.out.images = `${config.exportRoot}/images`;
   config.dir.out.fonts = `${config.exportRoot}/fonts`;
   config.dir.out.templates = `${config.exportRoot}/templates`;
+  config.dir.out.php = `${config.exportRoot}/php`;
 
   config.files = {
     src: {},
@@ -88,6 +90,7 @@ const buildConfig = (invocationArgs, publicRoot, sourceRoot, testRoot, exportRoo
     `${config.dir.src.templates}/**/*.twig`,
     `!${config.dir.src.templates}/04-pages/**/*.twig`,
   ];
+  config.files.src.php = `${config.dir.src.php}/**/*`;
   config.files.src.derivedConfigs = [
     `${config.dir.src.sass}/variables/**/*`,
     `${config.dir.src.js}/derivedConfig.json`,
@@ -191,9 +194,13 @@ const exportTemplates = () =>
     .pipe(flatten({includeParents: false}))
     .pipe(gulp.dest(config.dir.out.templates));
 
+const exportPhp = () =>
+  gulp.src(config.files.src.php)
+    .pipe(gulp.dest(config.dir.out.php));
+
 export const exportPatterns = gulp.series(
   cleanExport,
-  gulp.parallel(exportCss, exportSass, exportSassVendor, exportImages, exportFonts, exportTemplates),
+  gulp.parallel(exportCss, exportSass, exportSassVendor, exportImages, exportFonts, exportTemplates, exportPhp),
 );
 
 // Default

source/_patterns/00-atoms/block/heading/heading.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['heading']) }) -%}
+{%- set attributes = {class: 'heading'}|merge_recursive(attributes|default({})) -%}
 
 <h{{ level|default(1) }} {{- html.attributes(attributes) }}>
 
@@ -12,7 +12,7 @@
     {%- block text -%}
 
       {%- if attributes.href is defined -%}
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['heading__link']) }) -%}
+        {%- set attributes = {class: 'heading__link'}|merge_recursive(attributes|default({})) -%}
       {%- endif -%}
 
       {%- include 'atoms-link' -%}

source/_patterns/00-atoms/block/paragraph/paragraph.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['paragraph']) }) -%}
+{%- set attributes = {class: 'paragraph'}|merge_recursive(attributes|default({})) -%}
 
 <p {{- html.attributes(attributes) }}>
 

source/_patterns/01-molecules/content-meta/content-meta.twig

@@ -1,22 +1,22 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta']) }) -%}
+{%- set attributes = {class: 'content-meta'}|merge_recursive(attributes|default({})) -%}
 
 <ul {{- html.attributes(attributes) }}>
   {%- for item in items -%}
 
     {%- with item|merge({html: html}) only -%}
       {%- block item -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__item']) }) -%}
+        {%- set attributes = {class: 'content-meta__item'}|merge_recursive(attributes|default({})) -%}
 
         <li {{- html.attributes(attributes) }}>
 
           {%- with content only -%}
             {%- block content -%}
 
               {%- if attributes.href is defined -%}
-                {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-meta__link']) }) -%}
+                {%- set attributes = {class: 'content-meta__link'}|merge_recursive(attributes) -%}
               {%- endif -%}
 
               {%- include 'atoms-link' -%}

source/_patterns/01-molecules/section/section.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section']) }) -%}
+{%- set attributes ={class: 'section'}|merge_recursive(attributes|default({})) -%}
 
 <section {{- html.attributes(attributes) }}>
 
@@ -10,7 +10,7 @@
 
       {%- if text is defined -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__heading']) }) -%}
+        {%- set attributes = {class: 'section__heading'}|merge_recursive(attributes|default({})) -%}
         {%- set level = level|default(2) -%}
 
         {%- include 'atoms-heading' -%}
@@ -25,7 +25,7 @@
 
     {%- block content -%}
 
-      {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['section__body']) }) -%}
+      {%- set attributes = {class: 'section__body'}|merge_recursive(attributes|default({})) -%}
 
       <div {{- html.attributes(attributes) }}>
         {{- html.content(content) -}}

source/_patterns/01-molecules/tag-list/tag-list.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list']) }) -%}
+{%- set attributes = {class: 'tag-list'}|merge_recursive(attributes|default({})) -%}
 
 <div {{- html.attributes(attributes) }}>
 
@@ -9,7 +9,7 @@
 
       {% if text is defined %}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__title']) }) -%}
+        {%- set attributes = {class: 'tag-list__title'}|merge_recursive(attributes|default({})) -%}
         {%- include 'atoms-heading' with {level: level|default(4)} -%}
 
       {% endif %}
@@ -20,28 +20,30 @@
   {%- with list|merge({html: html}) only -%}
     {%- block list -%}
 
-      {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__list']) }) -%}
+      {%- set classes = ['tag-list__list'] -%}
 
       {%- if singleLine|default(false) -%}
-        {%- set attributes = attributes|merge({class: attributes.class|merge(['tag-list__list--single-line']) }) -%}
+        {%- set classes = classes|merge(['tag-list__list--single-line']) -%}
       {%- endif -%}
 
+      {%- set attributes = {class: classes}|merge_recursive(attributes|default({})) -%}
+
       <ul {{- html.attributes(attributes) }}>
 
         {%- for item in items -%}
 
           {%- with item|merge({html: html}) only -%}
             {%- block item -%}
 
-              {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__item']) }) -%}
+              {%- set attributes = {class: 'tag-list__item'}|merge_recursive(attributes|default({})) -%}
 
               <li {{- html.attributes(attributes) }}>
 
                 {%- with content only -%}
                   {%- block content -%}
 
                     {%- if attributes.href is defined -%}
-                      {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['tag-list__link']) }) -%}
+                      {%- set attributes = {class: 'tag-list__link'}|merge_recursive(attributes|default({})) -%}
                     {%- endif -%}
 
                     {%- include 'atoms-link' -%}

source/_patterns/01-molecules/teaser/teaser.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser']) }) -%}
+{%- set attributes = {class: 'teaser'}|merge_recursive(attributes|default({})) -%}
 
 <div {{- html.attributes(attributes) }}>
 
@@ -13,7 +13,7 @@
         {%- with heading|merge({text: {attributes: {href: href}, text: heading.text} }) only -%}
           {%- block heading -%}
 
-            {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser__heading']) }) -%}
+            {%- set attributes = {class: 'teaser__heading'}|merge_recursive(attributes|default({})) -%}
             {%- set level = level|default(3) -%}
 
             {%- include 'atoms-heading' -%}

source/_patterns/02-organisms/content-header/content-header.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-header']) }) -%}
+{%- set attributes = {class: 'content-header'}|merge_recursive(attributes|default({})) -%}
 
 <header {{- html.attributes(attributes) }}>
 
@@ -38,7 +38,7 @@
           {% set lengthClass = 'xx-long' %}
         {% endif %}
 
-        {% set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-header__title', 'content-header__title--' ~ lengthClass]) }) %}
+        {% set attributes = {class: ['content-header__title', 'content-header__title--' ~ lengthClass]}|merge_recursive(attributes|default({})) %}
         {% set level = 1 %}
 
         {% include 'atoms-heading' %}

source/_patterns/02-organisms/item-tags/item-tags.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['item-tags']) }) -%}
+{%- set attributes = {class: 'item-tags'}|merge_recursive(attributes|default({})) -%}
 
 <div {{- html.attributes(attributes) }}>
 

source/_patterns/02-organisms/teaser-list/teaser-list.twig

@@ -1,6 +1,6 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser-list']) }) -%}
+{%- set attributes = {class: 'teaser-list'}|merge_recursive(attributes|default({})) -%}
 
 {%- if title.text is defined -%}
   {%- set title_id = title.attributes.id|default('heading' ~ random()) -%}
@@ -15,7 +15,7 @@
 
       {% if text is defined %}
 
-        {%- set attributes = attributes|default({})|merge({id: _id, class: attributes.class|default([])|merge(['teaser-list__title']) }) -%}
+        {%- set attributes = {id: _id, class: 'teaser-list__title'}|merge_recursive(attributes|default({})) -%}
         {%- include 'atoms-heading' with {level: level|default(2)} -%}
 
       {% endif %}
@@ -28,7 +28,7 @@
 
       {%- if items|default([])|length -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser-list__list']) }) -%}
+        {%- set attributes = {class: 'teaser-list__list'}|merge_recursive(attributes|default({})) -%}
 
         <ol {{- html.attributes(attributes) }}>
 
@@ -37,7 +37,7 @@
             {%- with item|merge({html: html}) only -%}
               {%- block item -%}
 
-                {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['teaser-list__item']) }) -%}
+                {%- set attributes = {class: 'teaser-list__item'}|merge_recursive(attributes|default({})) -%}
 
                 <li {{- html.attributes(attributes) }}>
 

source/_patterns/03-templates/content-grid/content-grid.twig

@@ -1,30 +1,30 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-grid']) }) -%}
+{%- set classes = ['content-grid'] -%}
 
 {%- set hasSecondary = false -%}
 {%- for area in content if area.area|default('full') == 'secondary' and area.content|default([])|length -%}
   {%- set hasSecondary = true -%}
 {%- endfor -%}
 
 {%- if hasSecondary -%}
-  {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid--has-secondary']) }) -%}
+  {%- set classes = classes|merge(['content-grid--has-secondary']) -%}
 {%- endif -%}
 
+{%- set attributes = {class: classes}|merge_recursive(attributes|default({})) -%}
+
 <{{ element|default('div') }} {{- html.attributes(attributes) }}>
 
   {%- for area in content -%}
     {%- with area|merge({html: html}) only -%}
 
       {%- block item -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-grid__item']) }) -%}
-
         {%- if area is defined -%}
 
           {%- if content|default([])|length -%}
 
-            {%- set attributes = attributes|merge({class: attributes.class|merge(['content-grid__item--' ~ area]) }) -%}
+            {%- set attributes = {class: ['content-grid__item', 'content-grid__item--' ~ area]}|merge_recursive(attributes|default({})) -%}
 
             <div {{- html.attributes(attributes) }}>
               {{- html.content(content) -}}
@@ -36,7 +36,7 @@
 
           {%- with arguments|merge({_template: template}) only -%}
 
-            {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['content-grid__item'])}) -%}
+            {%- set attributes = {class: 'content-grid__item'}|merge_recursive(attributes|default({})) -%}
 
             {%- include _template -%}
 

source/_patterns/03-templates/listing-grid/listing-grid.twig

@@ -1,52 +1,52 @@
 {%- import 'atoms-html' as html -%}
 
-{%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['listing-grid']) }) -%}
+{%- set classes = ['listing-grid'] -%}
 
 {%- set hasSecondary = false -%}
 {%- for area in content if area.area|default('full') == 'secondary' and area.content|default([])|length -%}
   {%- set hasSecondary = true -%}
 {%- endfor -%}
 
 {%- if hasSecondary -%}
-  {%- set attributes = attributes|merge({class: attributes.class|merge(['listing-grid--has-secondary']) }) -%}
+  {%- set classes = classes|merge(['listing-grid--has-secondary']) -%}
 {%- endif -%}
 
+{%- set attributes = {class: classes}|merge_recursive(attributes|default({})) -%}
+
 <{{ element|default('div') }} {{- html.attributes(attributes) }}>
 
-  {%- for area in content -%}
-    {%- with area|merge({html: html}) only -%}
+{%- for area in content -%}
+  {%- with area|merge({html: html}) only -%}
 
-      {%- block item -%}
+    {%- block item -%}
 
-        {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['listing-grid__item']) }) -%}
+      {%- if area is defined -%}
 
-        {%- if area is defined -%}
+        {%- if content|default([])|length -%}
 
-          {%- if content|default([])|length -%}
+          {%- set attributes = {class: ['listing-grid__item', 'listing-grid__item--' ~ area]}|merge_recursive(attributes|default({})) -%}
 
-            {%- set attributes = attributes|merge({class: attributes.class|merge(['listing-grid__item--' ~ area]) }) -%}
+          <div {{- html.attributes(attributes) }}>
+            {{- html.content(content) -}}
+          </div>
 
-            <div {{- html.attributes(attributes) }}>
-              {{- html.content(content) -}}
-            </div>
+        {%- endif -%}
 
-          {%- endif -%}
+      {%- else -%}
 
-        {%- else -%}
+        {%- with arguments|merge({_template: template}) only -%}
 
-          {%- with arguments|merge({_template: template}) only -%}
+          {%- set attributes = {class: 'listing-grid__item'}|merge_recursive(attributes|default({})) -%}
 
-            {%- set attributes = attributes|default({})|merge({class: attributes.class|default([])|merge(['listing-grid__item'])}) -%}
+          {%- include _template -%}
 
-            {%- include _template -%}
+        {%- endwith -%}
 
-          {%- endwith -%}
+      {%- endif -%}
 
-        {%- endif -%}
+    {%- endblock item -%}
 
-      {%- endblock item -%}
-
-    {%- endwith -%}
-  {%- endfor -%}
+  {%- endwith -%}
+{%- endfor -%}
 
 </{{ element|default('div') }}>