vite-plugin-twig-drupal 1.0.0 → 1.0.2

package/.github/workflows/node.js.yml

@@ -9,7 +9,7 @@ jobs:
   main:
     strategy:
       matrix:
-        node: [16, 18]
+        node: [18, 20]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs

package/README.md

@@ -77,7 +77,7 @@ You then need to configure your vite.config.js.
 
 ```javascript
 import { defineConfig } from "vite"
-import twig from "./src/index.js"
+import twig from 'vite-plugin-twig-drupal';
 import { join } from "node:path"
 
 export default defineConfig({
@@ -104,7 +104,7 @@ With this config in place you should be able to import twig files into your stor
 ```javascript
 // stories/Button.stories.js
 
-// Button will be a Javascript function that excepts variables for the twig template.
+// Button will be a Javascript function that accepts variables for the twig template.
 import Button from './button.twig';
 
 // Import stylesheets, this could be a sass or postcss file too.
@@ -149,7 +149,6 @@ export const ButtonStrip = {
 
 
 ```
-- Refer to the [Dom testing library docs](https://testing-library.com/docs/dom-testing-library/example-intro), we're really just adding the ability to render twig templates on top of that.
 
 ## Issues
 

package/package.json

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

package/src/index.js

@@ -18,6 +18,7 @@ const includeTokenTypes = [
   "Twig.logic.type.embed",
   "Twig.logic.type.include",
   "Twig.logic.type.extends",
+  "Twig.logic.type.import",
 ]
 
 const pluckIncludes = (tokens) => {
@@ -64,10 +65,20 @@ const compileTemplate = (id, file, { namespaces }) => {
 
 Twig.cache(false)
 
-const errorHandler = (id) => (e) => ({
-  code: `export default () => 'An error occurred whilst rendering ${id}: ${e.toString()}';`,
-  map: null,
-})
+const errorHandler =
+  (id, isDefault = true) =>
+  (e) => {
+    if (isDefault) {
+      return {
+        code: `export default () => 'An error occurred whilst rendering ${id}: ${e.toString()}';`,
+        map: null,
+      }
+    }
+    return {
+      code: null,
+      map: null,
+    }
+  }
 
 const plugin = (options = {}) => {
   options = { ...defaultOptions, ...options }
@@ -109,13 +120,15 @@ const plugin = (options = {}) => {
             const file = Twig.path.expandNamespace(options.namespaces, template)
             if (!seen.includes(file)) {
               includePromises.push(
-                new Promise(async (resolve) => {
+                new Promise(async (resolve, reject) => {
                   const { includes, code } = await compileTemplate(
                     template,
                     file,
                     options
-                  )
-                  includes.forEach(processIncludes)
+                  ).catch(errorHandler(template, false))
+                  if (includes) {
+                    includes.forEach(processIncludes)
+                  }
                   resolve(code)
                 })
               )
@@ -124,6 +137,7 @@ const plugin = (options = {}) => {
           }
           includes.forEach(processIncludes)
           embed = includes
+            .filter((template) => template !== "_self")
             .map(
               (template) =>
                 `import '${resolve(

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

@@ -23,6 +23,23 @@ exports[`Basic smoke test > Should support includes 1`] = `
 "
 `;
 
+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>
+"
+`;
+
 exports[`Basic smoke test > Should support variables 1`] = `
 "<section>
   <h1>Include</h1>

package/tests/fixtures/error-include.twig

@@ -0,0 +1 @@
+{% include "@tests/error.twig" %}

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/smoke.test.js

@@ -1,5 +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", () => {
@@ -17,4 +19,13 @@ describe("Basic smoke test", () => {
     const error = Error()
     expect(error).toContain("An error occurred")
   })
+  it("Should recover from include errors", () => {
+    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,8 @@ 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",
       fileName: (_, entry) => `${entry}.js`,