vite-plugin-twig-drupal 1.2.0 → 1.3.0

package/README.md

@@ -95,6 +95,8 @@ export default defineConfig({
         // You can add custom functions - each is a function that is passed the active Twig instance and should call
         // e.g. extendFunction to register a function
         reverse: (twigInstance) => twigInstance.extendFunction("reverse", () => (text) => text.split(' ').reverse().join(' ')),
+        // e.g. extendFilter to register a filter
+        clean_unique_id: (twigInstance) => twigInstance.extendFilter("clean_unique_id", () => (text) => text.split(' ').reverse().join(' ')),
       },
       globalContext: {
         // Global variables that should be present in all templates.

package/package.json

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

package/src/index.js

@@ -25,8 +25,16 @@ const includeTokenTypes = [
 ]
 
 const resolveFile = (directory, file) => {
-  if (existsSync(resolve(file))) {
-    return resolve(file)
+  const filesToTry = [file, `${file}.twig`, `${file}.html.twig`]
+  for (const ix in filesToTry) {
+    const path = resolve(filesToTry[ix])
+    if (existsSync(path)) {
+      return path
+    }
+    const withDir = resolve(directory, filesToTry[ix])
+    if (existsSync(withDir)) {
+      return withDir
+    }
   }
   return resolve(directory, file)
 }
@@ -51,6 +59,16 @@ const pluckIncludes = (tokens) => {
   })
 }
 
+const resolveNamespaceOrComponent = (namespaces, template) => {
+  let resolveTemplate = template
+  // Support for SDC.
+  if (template.includes(":")) {
+    const [namespace, component] = template.split(":")
+    resolveTemplate = `@${namespace}/${component}/${component}`
+  }
+  return Twig.path.expandNamespace(namespaces, resolveTemplate)
+}
+
 const compileTemplate = (id, file, { namespaces }) => {
   return new Promise((resolve, reject) => {
     const options = { namespaces, rethrow: true, allowInlineIncludes: true }
@@ -133,7 +151,7 @@ const plugin = (options = {}) => {
           const processIncludes = (template) => {
             const file = resolveFile(
               dirname(id),
-              Twig.path.expandNamespace(options.namespaces, template)
+              resolveNamespaceOrComponent(options.namespaces, template)
             )
             if (!seen.includes(template)) {
               includePromises.push(
@@ -159,7 +177,7 @@ const plugin = (options = {}) => {
               (template) =>
                 `import '${resolveFile(
                   dirname(id),
-                  Twig.path.expandNamespace(options.namespaces, template)
+                  resolveNamespaceOrComponent(options.namespaces, template)
                 )}';`
             )
             .join("\n")
@@ -194,6 +212,8 @@ const plugin = (options = {}) => {
 
         ${functions}
 
+        addDrupalExtensions(Twig);
+        
         // Disable caching.
         Twig.cache(false);
 

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

@@ -1,5 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Basic smoke test > Should recognise default Drupal functions 1`] = `
+"
+<p>Functions work</p>"
+`;
+
 exports[`Basic smoke test > Should support global context and functions 1`] = `
 "<section>
   <h1>Include</h1>
@@ -27,6 +32,9 @@ exports[`Basic smoke test > Should support global context and functions 1`] = `
           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>
+<button>SDC</button>
 "
 `;
 
@@ -57,6 +65,9 @@ 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>
+<h2>SDC</h2>
+<p>Card</p>
+<button>SDC</button>
 "
 `;
 
@@ -104,5 +115,8 @@ 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>
+<h2>SDC</h2>
+<p>Card</p>
+<button>SDC</button>
 "
 `;

package/tests/fixtures/drupal-functions.twig

@@ -0,0 +1,2 @@
+{{ attach_library('drupal/library') }}
+<p>Functions work</p>

package/tests/fixtures/jabba/button/button.twig

@@ -0,0 +1 @@
+<button>{{title}}</button>

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

@@ -0,0 +1,2 @@
+<h2>{{title}}</h2>
+<p>{{teaser}}</p>

package/tests/fixtures/mockup.twig

@@ -10,3 +10,12 @@
 {% endembed %}
 {% include "@tests/section.twig" %}
 {% include "../fixtures/section.twig" with {title: 'Relative include'} %}
+{% embed 'jabba:card' with {
+  title: 'SDC',
+  teaser: 'Card',
+} %}
+{% endembed %}
+{% embed 'jabba:button' with {
+  title: 'SDC',
+} %}
+{% endembed %}

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 drupalFunctions from "../dist/drupalFunctions.js"
 import Menu from "../dist/menu.js"
 import { describe, expect, it } from "vitest"
 
@@ -35,4 +36,9 @@ describe("Basic smoke test", () => {
     expect(markup).toContain("Nested include")
     expect(markup).toContain("IT WORKS!")
   })
+  it("Should recognise default Drupal functions", () => {
+    const markup = drupalFunctions()
+    expect(markup).toMatchSnapshot()
+    expect(markup).toContain("Functions work")
+  })
 })

package/vite.config.js

@@ -11,6 +11,10 @@ export default defineConfig({
         error: resolve(__dirname, "tests/fixtures/error.twig"),
         menu: resolve(__dirname, "tests/fixtures/menu.twig"),
         errorInclude: resolve(__dirname, "tests/fixtures/error-include.twig"),
+        drupalFunctions: resolve(
+          __dirname,
+          "tests/fixtures/drupal-functions.twig"
+        ),
       },
       name: "vite-plugin-twig-drupal",
       fileName: (_, entry) => `${entry}.js`,
@@ -27,6 +31,7 @@ export default defineConfig({
       },
       namespaces: {
         tests: join(__dirname, "/tests/fixtures"),
+        jabba: join(__dirname, "/tests/fixtures/jabba"),
       },
     }),
   ],