How to add nunjucks global variables (discussion with chatGpt)

Query:

any global way of declaring nunjucks variables so that I dont need to pass context for each web-component?

ChatGPT said:

Yes — Nunjucks has built-in mechanisms to provide global variables so you DON’T need to pass context manually for every component render.

You can declare global variables once and then use them in every template automatically.

Below are the 3 correct ways to do this.

---

✅ Solution 1 — Use nunjucks.configure({ globals }) (BEST for your case)

When you initialize Nunjucks in your frontend (probably in your main app JS):

import nunjucks from "nunjucks";

nunjucks.configure({
    autoescape: true
});

// Set global variables
nunjucks.addGlobal("passwordPattern", "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])");
nunjucks.addGlobal("passwordTitle",
    "required, 8-64 characters, at least 1 lowercase, 1 uppercase, 1 number");

✔ Now ALL templates automatically receive:

• passwordPattern

• passwordTitle

• any other globals you define

✔ You no longer need to pass context manually in:

nunjucks.renderString(templateHtml)

✔ Your component template can directly use:

pattern="{{ passwordPattern }}"
title="{{ passwordTitle }}"

---

🔥 What your component becomes (MUCH cleaner)

render() {
    const rendered = `
        <style>${signInCss}</style>
        ${nunjucks.renderString(SignInHtml)}
    `;
    this.shadowRoot.innerHTML = rendered;
}

→ No more context object
→ No more passing parameters manually

---

✅ Solution 2 — Add globals through your Nunjucks environment

If you create a custom environment:

const env = new nunjucks.Environment(new nunjucks.WebLoader());
env.addGlobal("passwordPattern", "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])");
env.addGlobal("passwordTitle", "....");

Then render using:

env.renderString(templateHtml);

---

✅ Solution 3 — Use Nunjucks addFilter or addExtension for computed data

Useful if you want dynamic patterns later:

nunjucks.addGlobal("makePattern", (min, max) =>
    `(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{${min},${max}}`
);

Then in template:

pattern="{{ makePattern(8, 64) }}"

---

🧠 Which method is best for your project?

✔ Use Solution 1 (addGlobal)

It matches your architecture:

• You have many small Web Components

• Each one loads templates using nunjucks.renderString()

• You want shared constants (regex, messages, URLs, patterns, branding text)

• You don’t want to pass context everywhere

---

🎯 Example: Your Globals File (recommended)

Create:

globals.js

export const globals = {
    passwordPattern: "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])",
    passwordTitle: "required, 8-64 characters, 1 lowercase, 1 uppercase, 1 number",
    emailPlaceholder: "[email protected]",
    appName: "Mohit App"
};

Then include them:

import { globals } from "./globals.js";

Object.entries(globals).forEach(([key, value]) => {
    nunjucks.addGlobal(key, value);
});

✔ Now every component gets these values for free.

---

🎉 FINAL ANSWER

👉 YES, Nunjucks fully supports global variables.
👉 Add them using:

nunjucks.addGlobal("name", value);

👉 Then all templates can use {{ name }} without needing a context object.
👉 This is the cleanest and recommended way for your multi-component frontend.

---

If you want, I can show you how to create a shared global Nunjucks module for:

• input patterns

• field error messages

• labels/icons

• API URLs

• environment variables (dev/prod)

Just tell me.