vite-plugin-twig-drupal 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-twig-drupal",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "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"
@@ -9,6 +11,7 @@ const defaultOptions = {
   namespaces: {},
   filters: {},
   functions: {},
+  globalContext: {},
   framework: FRAMEWORK_HTML,
   pattern: /\.(twig)(\?.*)?$/,
 }
@@ -21,6 +24,13 @@ const includeTokenTypes = [
   "Twig.logic.type.import",
 ]
 
+const resolveFile = (directory, file) => {
+  if (existsSync(resolve(file))) {
+    return resolve(file)
+  }
+  return resolve(directory, file)
+}
+
 const pluckIncludes = (tokens) => {
   return [
     ...tokens
@@ -70,7 +80,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,
       }
     }
@@ -102,9 +114,11 @@ const plugin = (options = {}) => {
         }
         let embed,
           embeddedIncludes,
+          functions,
           code,
           includes,
           seen = []
+
         try {
           const result = await compileTemplate(id, id, options).catch(
             errorHandler(id)
@@ -117,8 +131,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(
@@ -132,7 +149,7 @@ const plugin = (options = {}) => {
                   resolve(code)
                 })
               )
-              seen.push(file)
+              seen.push(template)
             }
           }
           includes.forEach(processIncludes)
@@ -140,11 +157,22 @@ const plugin = (options = {}) => {
             .filter((template) => template !== "_self")
             .map(
               (template) =>
-                `import '${resolve(
+                `import '${resolveFile(
+                  dirname(id),
                   Twig.path.expandNamespace(options.namespaces, template)
                 )}';`
             )
             .join("\n")
+
+          functions = Object.entries(options.functions)
+            .map(([name, value]) => {
+              return `
+              const ${name} = ${value};
+              ${name}(Twig);
+            `
+            })
+            .join("\n")
+
           const includeResult = await Promise.all(includePromises).catch(
             errorHandler(id)
           )
@@ -161,10 +189,11 @@ const plugin = (options = {}) => {
         import DrupalAttribute from 'drupal-attribute';
         import { addDrupalExtensions } from 'drupal-twig-extensions/twig';
         ${frameworkInclude}
-        
+
         ${embed}
 
-        addDrupalExtensions(Twig);
+        ${functions}
+
         // Disable caching.
         Twig.cache(false);
 
@@ -176,7 +205,8 @@ const plugin = (options = {}) => {
           ${includes ? `component.options.allowInlineIncludes = true;` : ""}
           try {
             return frameworkTransform(component.render({
-            attributes: new DrupalAttribute(),
+              attributes: new DrupalAttribute(),
+              ...${JSON.stringify(options.globalContext)},
               ...context
             }));
           }

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

@@ -1,5 +1,35 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Basic smoke test > Should support global context and functions 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>
+"
+`;
+
 exports[`Basic smoke test > Should support includes 1`] = `
 "<section>
   <h1>Include</h1>
@@ -12,7 +42,8 @@ exports[`Basic smoke test > Should support includes 1`] = `
   <article>
         Lorem ipsum dolor sit amet.
     <button class=\\"button--primary\\">Nested include</button>
-    </article>
+          IT WORKS!
+        </article>
 </section>
 <section>
   <h1></h1>
@@ -20,6 +51,12 @@ 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>
 "
 `;
 
@@ -52,7 +89,8 @@ exports[`Basic smoke test > Should support variables 1`] = `
   <article>
         Lorem ipsum dolor sit amet.
     <button class=\\"button--primary\\">Nested include</button>
-    </article>
+          IT WORKS!
+        </article>
 </section>
 <section>
   <h1>Pickle Fixie</h1>
@@ -60,5 +98,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/mockup.twig

@@ -3,6 +3,10 @@
   {% block content %}
     Lorem ipsum dolor sit amet.
     {% include "@tests/button.twig" with {text: 'Nested include'} %}
+    {% if active_theme == 'poodles' %}
+      {{ testFunction() }}
+    {% endif %}
   {% endblock %}
 {% endembed %}
 {% include "@tests/section.twig" %}
+{% include "../fixtures/section.twig" with {title: 'Relative include'} %}

package/tests/smoke.test.js

@@ -9,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" })
@@ -28,4 +29,10 @@ describe("Basic smoke test", () => {
     expect(markup).toContain("Contact")
     expect(markup).toMatchSnapshot()
   })
+  it("Should support global context and functions", () => {
+    const markup = Markup()
+    expect(markup).toMatchSnapshot()
+    expect(markup).toContain("Nested include")
+    expect(markup).toContain("IT WORKS!")
+  })
 })

package/vite.config.js

@@ -18,6 +18,13 @@ export default defineConfig({
   },
   plugins: [
     twig({
+      globalContext: {
+        active_theme: "poodles",
+      },
+      functions: {
+        testFunction: (instance) =>
+          instance.extendFunction("testFunction", () => "IT WORKS!"),
+      },
       namespaces: {
         tests: join(__dirname, "/tests/fixtures"),
       },