vite-plugin-twig-drupal 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-twig-drupal",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Provides a ⚡️ Vite plugin to transform 🌱 Twig into HTML with a 💧 Drupal flavour",
   "keywords": [
     "Vite",

package/src/index.js

@@ -260,8 +260,13 @@ const plugin = (options = {}) => {
           const component = ${code}
           ${includes ? `component.options.allowInlineIncludes = true;` : ""}
           try {
+            let defaultAttributes = context.defaultAttributes ? context.defaultAttributes : [];
+            if (!Array.isArray(defaultAttributes)) {
+              // We were passed a map, turn it into an array.
+              defaultAttributes = Object.entries(defaultAttributes);
+            }
             return frameworkTransform(component.render({
-              attributes: new DrupalAttribute(),
+              attributes: new DrupalAttribute(defaultAttributes),
               ...${JSON.stringify(options.globalContext)},
               ...context
             }));

package/tests/__snapshots__/smoke.test.js.snap

@@ -1,10 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Basic smoke test > Should cast default attributes to attributes 1`] = `
+"<section>
+  <h1>Include</h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<section>
+  <h1>Embed</h1>
+  <article>
+        Lorem ipsum dolor sit amet.
+    <button class=\\"button--primary\\">Nested include</button>
+          IT WORKS!
+        </article>
+</section>
+<section>
+  <h1></h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<section>
+  <h1>Relative include</h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<h2>SDC</h2>
+<p>Card</p>
+<div>atom badge from nested dir 🙌</div>
+<button>nested button 🙌</button>
+<button>SDC</button>
+<button>included button 👈️</button>
+<h2>Include card</h2>
+<p>🏆️ winning</p>
+<div>atom badge from nested dir 🙌</div>
+<button>nested button 🙌</button>
+<div  class=\\"ponies\\">hey there</div>
+"
+`;
+
 exports[`Basic smoke test > Should recognise default Drupal functions 1`] = `
 "
 <p>Functions work</p>"
 `;
 
+exports[`Basic smoke test > Should support default attributes as a map 1`] = `
+"<section>
+  <h1>Include</h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<section>
+  <h1>Embed</h1>
+  <article>
+        Lorem ipsum dolor sit amet.
+    <button class=\\"button--primary\\">Nested include</button>
+          IT WORKS!
+        </article>
+</section>
+<section>
+  <h1></h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<section>
+  <h1>Relative include</h1>
+  <article>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos fugiat inventore laborum maiores molestiae neque quia quo unde veniam?
+      </article>
+</section>
+<h2>SDC</h2>
+<p>Card</p>
+<div>atom badge from nested dir 🙌</div>
+<button>nested button 🙌</button>
+<button>SDC</button>
+<button>included button 👈️</button>
+<h2>Include card</h2>
+<p>🏆️ winning</p>
+<div>atom badge from nested dir 🙌</div>
+<button>nested button 🙌</button>
+<div  class=\\"ponies\\">hey there</div>
+"
+`;
+
 exports[`Basic smoke test > Should support global context and functions 1`] = `
 "<section>
   <h1>Include</h1>
@@ -42,6 +124,7 @@ exports[`Basic smoke test > Should support global context and functions 1`] = `
 <p>🏆️ winning</p>
 <div>atom badge from nested dir 🙌</div>
 <button>nested button 🙌</button>
+<div >hey there</div>
 "
 `;
 
@@ -82,6 +165,7 @@ exports[`Basic smoke test > Should support includes 1`] = `
 <p>🏆️ winning</p>
 <div>atom badge from nested dir 🙌</div>
 <button>nested button 🙌</button>
+<div >hey there</div>
 "
 `;
 
@@ -139,6 +223,7 @@ exports[`Basic smoke test > Should support nested SDC 1`] = `
 <p>🏆️ winning</p>
 <div>atom badge from nested dir 🙌</div>
 <button>nested button 🙌</button>
+<div >hey there</div>
 "
 `;
 
@@ -179,5 +264,6 @@ exports[`Basic smoke test > Should support variables 1`] = `
 <p>🏆️ winning</p>
 <div>atom badge from nested dir 🙌</div>
 <button>nested button 🙌</button>
+<div >hey there</div>
 "
 `;

package/tests/fixtures/mockup.twig

@@ -26,3 +26,4 @@
   title: 'Include card',
   teaser: '🏆️ winning',
 } %}
+<div {{ attributes }}>hey there</div>

package/tests/smoke.test.js

@@ -49,4 +49,22 @@ describe("Basic smoke test", () => {
     expect(markup).toMatchSnapshot()
     expect(markup).toContain("Functions work")
   })
+  it("Should cast default attributes to attributes", () => {
+    const markup = Markup({
+      defaultAttributes: [["class", ["ponies"]]],
+    })
+    expect(markup).toMatchSnapshot()
+    expect(markup).toContain('class="ponies"')
+    expect(markup).toContain("hey there")
+  })
+  it("Should support default attributes as a map", () => {
+    const markup = Markup({
+      defaultAttributes: {
+        class: ["ponies"],
+      },
+    })
+    expect(markup).toMatchSnapshot()
+    expect(markup).toContain('class="ponies"')
+    expect(markup).toContain("hey there")
+  })
 })