vite-plugin-twig-drupal 1.4.1 → 1.4.2

package/package.json

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

package/src/index.js

@@ -1,6 +1,6 @@
 import Twig from "twig"
-import { resolve, dirname } from "node:path"
-import { existsSync } from "node:fs"
+import { join, resolve, dirname } from "node:path"
+import { existsSync, readdirSync } from "node:fs"
 import { normalizePath } from "vite"
 
 const { twig } = Twig
@@ -25,6 +25,18 @@ const includeTokenTypes = [
   "Twig.logic.type.import",
 ]
 
+const findInChildDirectories = (directory, component) => {
+  const files = readdirSync(directory, { recursive: true })
+  for (const file of files) {
+    const filePath = join(directory, file)
+    if (file.endsWith(`/${component}.twig`)) {
+      return filePath
+    }
+  }
+
+  return null
+}
+
 const resolveFile = (directory, file) => {
   const filesToTry = [file, `${file}.twig`, `${file}.html.twig`]
   for (const ix in filesToTry) {
@@ -63,12 +75,25 @@ const pluckIncludes = (tokens) => {
 
 const resolveNamespaceOrComponent = (namespaces, template) => {
   let resolveTemplate = template
+  const isNamespace = template.includes(":")
+
   // Support for SDC.
-  if (template.includes(":")) {
+  if (isNamespace) {
     const [namespace, component] = template.split(":")
     resolveTemplate = `@${namespace}/${component}/${component}`
   }
-  return Twig.path.expandNamespace(namespaces, resolveTemplate)
+  let expandedPath = Twig.path.expandNamespace(namespaces, resolveTemplate)
+
+  // If file not found and we are in namespace -> search deeper.
+  if (!existsSync(expandedPath) && isNamespace) {
+    const [namespace, component] = template.split(":")
+    let foundFile = findInChildDirectories(namespaces[namespace], component)
+    if (existsSync(foundFile)) {
+      expandedPath = foundFile
+    }
+  }
+
+  return expandedPath
 }
 
 const compileTemplate = (id, file, { namespaces }) => {
@@ -224,7 +249,7 @@ const plugin = (options = {}) => {
         ${functions}
 
         addDrupalExtensions(Twig);
-        
+
         // Disable caching.
         Twig.cache(false);
 

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

@@ -34,7 +34,14 @@ exports[`Basic smoke test > Should support global context and functions 1`] = `
 </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>
 "
 `;
 
@@ -67,7 +74,14 @@ exports[`Basic smoke test > Should support includes 1`] = `
 </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>
 "
 `;
 
@@ -88,6 +102,46 @@ exports[`Basic smoke test > Should support macros 1`] = `
 "
 `;
 
+exports[`Basic smoke test > Should support nested SDC 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>
+"
+`;
+
 exports[`Basic smoke test > Should support variables 1`] = `
 "<section>
   <h1>Include</h1>
@@ -117,6 +171,13 @@ exports[`Basic smoke test > Should support variables 1`] = `
 </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>
 "
 `;

package/tests/fixtures/jabba/atoms/badge/badge.twig

@@ -0,0 +1 @@
+<div>{{ label }}</div>

package/tests/fixtures/jabba/card/card.html.twig

@@ -1,2 +1,9 @@
 <h2>{{title}}</h2>
 <p>{{teaser}}</p>
+{% include 'jabba:badge' with {
+  label: 'atom badge from nested dir 🙌',
+} %}
+
+{% include 'jabba:button' with {
+  title: 'nested button 🙌',
+} %}

package/tests/fixtures/mockup.twig

@@ -19,3 +19,10 @@
   title: 'SDC',
 } %}
 {% endembed %}
+{% include 'jabba:button' with {
+  title: 'included button 👈️',
+} %}
+{% include 'jabba:card' with {
+  title: 'Include card',
+  teaser: '🏆️ winning',
+} %}

package/tests/smoke.test.js

@@ -30,6 +30,14 @@ describe("Basic smoke test", () => {
     expect(markup).toContain("Contact")
     expect(markup).toMatchSnapshot()
   })
+  it("Should support nested SDC", () => {
+    const markup = Markup()
+    expect(markup).toContain("nested button 🙌")
+    expect(markup).toContain("included button 👈️")
+    expect(markup).toContain("Include card")
+    expect(markup).toContain("🏆️ winning")
+    expect(markup).toMatchSnapshot()
+  })
   it("Should support global context and functions", () => {
     const markup = Markup()
     expect(markup).toMatchSnapshot()