vite-plugin-twig-drupal 1.0.1 → 1.0.3

package/package.json

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

package/src/index.js

@@ -1,6 +1,8 @@
 import Twig from "twig"
+import { resolve, dirname } from "node:path"
+import { existsSync } from "node:fs"
+
 const { twig } = Twig
-import { resolve } from "node:path"
 
 const FRAMEWORK_REACT = "react"
 const FRAMEWORK_HTML = "html"
@@ -18,9 +20,17 @@ const includeTokenTypes = [
   "Twig.logic.type.embed",
   "Twig.logic.type.include",
   "Twig.logic.type.extends",
+  "Twig.logic.type.import",
 ]
 
-const pluckIncludes = (tokens) => {
+const resolveFile = (directory, file) => {
+  if (existsSync(resolve(file))) {
+    return resolve(file)
+  }
+  return resolve(directory, file)
+}
+
+const pluckIncludes = (tokens, relative) => {
   return [
     ...tokens
       .filter((token) => includeTokenTypes.includes(token.token?.type))
@@ -32,7 +42,10 @@ const pluckIncludes = (tokens) => {
         []
       ),
     ...tokens.reduce(
-      (carry, token) => [...carry, ...pluckIncludes(token.token?.output || [])],
+      (carry, token) => [
+        ...carry,
+        ...pluckIncludes(token.token?.output || [], relative),
+      ],
       []
     ),
   ].filter((value, index, array) => {
@@ -54,7 +67,11 @@ const compileTemplate = (id, file, { namespaces }) => {
           return
         }
         resolve({
-          includes: pluckIncludes(template.tokens),
+          // We don't use dirname here because this ends up in the browser.
+          includes: pluckIncludes(
+            template.tokens,
+            template.id.split("/").slice(0, -1).join("/")
+          ),
           code: template.compile(options),
         })
       },
@@ -69,7 +86,9 @@ const errorHandler =
   (e) => {
     if (isDefault) {
       return {
-        code: `export default () => 'An error occurred whilst rendering ${id}: ${e.toString()}';`,
+        code: `export default () => 'An error occurred whilst rendering ${id}: ${e.toString()} ${
+          e.stack
+        }';`,
         map: null,
       }
     }
@@ -116,8 +135,11 @@ const plugin = (options = {}) => {
           includes = result.includes
           const includePromises = []
           const processIncludes = (template) => {
-            const file = Twig.path.expandNamespace(options.namespaces, template)
-            if (!seen.includes(file)) {
+            const file = resolveFile(
+              dirname(id),
+              Twig.path.expandNamespace(options.namespaces, template)
+            )
+            if (!seen.includes(template)) {
               includePromises.push(
                 new Promise(async (resolve, reject) => {
                   const { includes, code } = await compileTemplate(
@@ -131,14 +153,16 @@ const plugin = (options = {}) => {
                   resolve(code)
                 })
               )
-              seen.push(file)
+              seen.push(template)
             }
           }
           includes.forEach(processIncludes)
           embed = includes
+            .filter((template) => template !== "_self")
             .map(
               (template) =>
-                `import '${resolve(
+                `import '${resolveFile(
+                  dirname(id),
                   Twig.path.expandNamespace(options.namespaces, template)
                 )}';`
             )

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

@@ -20,6 +20,29 @@ exports[`Basic smoke test > Should support includes 1`] = `
           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>
+"
+`;
+
+exports[`Basic smoke test > Should support macros 1`] = `
+"<ul>
+      <li><a href=\\"/home\\">Home</a>
+      </li>
+
+      <li><a href=\\"/about\\">About</a>
+          <ul>
+                      <li><a href=\\"/contact\\">Contact</a>
+      </li>
+
+              </ul>
+      </li>
+
+</ul>
 "
 `;
 
@@ -43,5 +66,11 @@ exports[`Basic smoke test > Should support variables 1`] = `
           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>
 "
 `;

package/tests/fixtures/macro.twig

@@ -0,0 +1,12 @@
+{% macro menu_link(title, href, children = []) %}
+  {% import _self as navigation %}
+  <li><a href="{{ href }}">{{ title }}</a>
+    {% if children|length %}
+      <ul>
+        {% for child in children %}
+          {{ navigation.menu_link(child.title, child.href) }}
+        {% endfor %}
+      </ul>
+    {% endif %}
+  </li>
+{% endmacro %}

package/tests/fixtures/menu.twig

@@ -0,0 +1,7 @@
+{% import "@tests/macro.twig" as navigation %}
+<ul>
+  {{ navigation.menu_link('Home', '/home') }}
+  {{ navigation.menu_link('About', '/about', [
+    { title: 'Contact', href: '/contact'}
+  ]) }}
+</ul>

package/tests/fixtures/mockup.twig

@@ -6,3 +6,4 @@
   {% endblock %}
 {% endembed %}
 {% include "@tests/section.twig" %}
+{% include "../fixtures/section.twig" with {title: 'Relative include'} %}

package/tests/smoke.test.js

@@ -1,6 +1,7 @@
 import Markup from "../dist/test.js"
 import Error from "../dist/error.js"
 import ErrorInclude from "../dist/errorInclude.js"
+import Menu from "../dist/menu.js"
 import { describe, expect, it } from "vitest"
 
 describe("Basic smoke test", () => {
@@ -8,6 +9,7 @@ describe("Basic smoke test", () => {
     const markup = Markup()
     expect(markup).toMatchSnapshot()
     expect(markup).toContain("Nested include")
+    expect(markup).toContain("Relative include")
   })
   it("Should support variables", () => {
     const markup = Markup({ title: "Pickle Fixie" })
@@ -22,4 +24,9 @@ describe("Basic smoke test", () => {
     const error = ErrorInclude()
     expect(error).toContain("An error occurred")
   })
+  it("Should support macros", () => {
+    const markup = Menu()
+    expect(markup).toContain("Contact")
+    expect(markup).toMatchSnapshot()
+  })
 })

package/vite.config.js

@@ -9,6 +9,7 @@ export default defineConfig({
       entry: {
         test: resolve(__dirname, "tests/fixtures/mockup.twig"),
         error: resolve(__dirname, "tests/fixtures/error.twig"),
+        menu: resolve(__dirname, "tests/fixtures/menu.twig"),
         errorInclude: resolve(__dirname, "tests/fixtures/error-include.twig"),
       },
       name: "vite-plugin-twig-drupal",