vite-plugin-twig-drupal 1.5.0 → 1.6.1

package/package.json

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

package/src/index.js

@@ -171,7 +171,7 @@ const plugin = (options = {}) => {
           functions,
           code,
           includes,
-          seen = []
+          seen = {}
 
         try {
           const result = await compileTemplate(id, id, options).catch(
@@ -183,31 +183,36 @@ const plugin = (options = {}) => {
           }
           code = result.code
           includes = result.includes
-          const includePromises = []
-          const processIncludes = (template) => {
-            const file = resolveFile(
-              dirname(id),
-              resolveNamespaceOrComponent(options.namespaces, template)
-            )
-            if (!seen.includes(template)) {
-              includePromises.push(
-                new Promise(async (resolve, reject) => {
-                  const { includes, code } = await compileTemplate(
-                    template,
-                    file,
-                    options
-                  ).catch(errorHandler(template, false))
-                  if (includes) {
-                    includes.forEach(processIncludes)
+
+          // Process includes in a queue.
+          const promisifyIncludes = (includes) => {
+            return includes.reduce(
+              (queue, template) =>
+                queue.then(() => {
+                  const file = resolveFile(
+                    dirname(id),
+                    resolveNamespaceOrComponent(options.namespaces, template)
+                  )
+                  if (!(template in seen)) {
+                    return compileTemplate(template, file, options)
+                      .catch(errorHandler(template, false))
+                      .then(({ code, includes }) => {
+                        seen[template] = code
+                        if (!includes) {
+                          return Promise.resolve()
+                        }
+                        return promisifyIncludes(includes)
+                      })
                   }
-                  resolve(code)
-                })
-              )
-              seen.push(template)
-            }
+                  return Promise.resolve()
+                }),
+              Promise.resolve()
+            )
           }
-          includes.forEach(processIncludes)
-          embed = includes
+          const includeResult = await promisifyIncludes(includes).catch(
+            errorHandler(id)
+          )
+          embed = Object.keys(seen)
             .filter((template) => template !== "_self")
             .map(
               (template) =>
@@ -227,14 +232,11 @@ const plugin = (options = {}) => {
             })
             .join("\n")
 
-          const includeResult = await Promise.all(includePromises).catch(
-            errorHandler(id)
-          )
-          if (!Array.isArray(includeResult) && "map" in includeResult) {
+          if (includeResult !== undefined && "map" in includeResult) {
             // An error occurred.
             return includeResult
           }
-          embeddedIncludes = includeResult.reverse().join("\n")
+          embeddedIncludes = Object.values(seen).reverse().join("\n")
         } catch (e) {
           return errorHandler(id)(e)
         }
@@ -260,8 +262,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,96 @@
 // 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>
+  All received
+  pony town
+"
+`;
+
 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>
+  All received
+  pony town
+"
+`;
+
 exports[`Basic smoke test > Should support global context and functions 1`] = `
 "<section>
   <h1>Include</h1>
@@ -42,6 +128,9 @@ 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>
+  All received
+  pony town
 "
 `;
 
@@ -82,6 +171,9 @@ 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>
+  All received
+  pony town
 "
 `;
 
@@ -139,6 +231,9 @@ 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>
+  All received
+  pony town
 "
 `;
 
@@ -179,5 +274,8 @@ 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>
+  All received
+  pony town
 "
 `;

package/tests/fixtures/extend-level2.twig

@@ -0,0 +1 @@
+{{ title }}

package/tests/fixtures/extend-me.twig

@@ -0,0 +1,7 @@
+{% if variant == 'roger' %}
+  All received
+{% else %}
+  Not hearing you
+{% endif %}
+{% block content %}
+{% endblock %}

package/tests/fixtures/extender.twig

@@ -0,0 +1,5 @@
+{% set variant = 'roger' %}
+{% extends "extend-me.twig" %}
+{% block content %}
+  {% include "field.twig" %}
+{% endblock %}

package/tests/fixtures/field.twig

@@ -0,0 +1,2 @@
+{% set title = "pony town" %}
+{% extends "extend-level2.twig" %}

package/tests/fixtures/mockup.twig

@@ -26,3 +26,5 @@
   title: 'Include card',
   teaser: '🏆️ winning',
 } %}
+<div {{ attributes }}>hey there</div>
+{% include "extender.twig" %}

package/tests/smoke.test.js

@@ -49,4 +49,27 @@ 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")
+  })
+  it("Should support extends", () => {
+    const markup = Markup()
+    expect(markup).toContain("All received")
+    expect(markup).toContain("pony town")
+  })
 })