Aller au contenu

@withstudiocms/template-lang

StudioCMS intègre son propre langage de modèles personnalisé dont la syntaxe est similaire à celle de langages de modèles populaires comme Handlebars^ ou Liquid^. Ce langage de modèles vous permet de créer des modèles dynamiques et réutilisables dans différentes parties du tableau de bord de StudioCMS, comme dans le système de modèles d’e-mails ou dans des modules d’extension personnalisés que vous pourriez développer.

@withstudiocms/template-lang est un langage de modèles ESM simple reposant sur TypeScript et sous licence MIT. Celui-ci est dédié aux e-mails au format HTML et est similaire à Handlebars mais axé sur la simplicité et l’intégration des données de base de données.

  • Syntaxe simple pour l’interpolation de variables à l’aide de {{variable}}
  • Prise en charge des propriétés imbriquées avec la notation pointée ({{user.name}})
  • TypeScript avec prise en charge complète d’ESM
  • Mode strict pour la gestion des erreurs
  • Conçu spécifiquement pour les modèles d’e-mails et les données de base de données
  • Aucune dépendance

Idéal pour :

  • les modèles d’e-mails au format HTML,
  • la génération de contenu dynamique à partir de données de base de données,
  • des besoins de modèles simples sans logique complexe,
  • les projets TypeScript axés sur ESM.

Pour ceux qui souhaitent utiliser le langage de modèles StudioCMS dans leurs projets, vous pouvez l’installer à l’aide de votre gestionnaire de paquets préféré :

Fenêtre de terminal
npm i @withstudiocms/template-lang

À l’instar d’autres langages de modèles, le langage de modèles de StudioCMS utilise des doubles accolades {{ }} pour désigner les variables qui doivent être remplacées par des données réelles lors du rendu du modèle.

Contrairement à d’autres langages de modèles, celui de StudioCMS privilégie la simplicité et ne comporte ni logique complexe ni structures de contrôle. Il est principalement conçu pour l’interpolation simple de variables.

<h1>Bonjour {{utilisateur.Prenom}} {{utilisateur.Nom}} !</h1>
<p>Le total de votre commande n°{{commande.id}} est de {{commande.total}}</p>
<p>Livraison à : {{utilisateur.adresse.rue}}, {{utilisateur.adresse.ville}}</p>
basic-usage.ts
import
class TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
from "@withstudiocms/template-lang";
const
const engine: TemplateEngine
engine
= new
new TemplateEngine(options?: TemplateOptions): TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
();
const
const template: "Bonjour {{name}} ! Bienvenue chez {{company.name}}."
template
= "Bonjour {{name}} ! Bienvenue chez {{company.name}}.";
const
const data: {
name: string;
company: {
name: string;
};
}
data
= {
name: string
name
: "John Doe",
company: {
name: string;
}
company
: {
name: string
name
: "Acme Corp",
},
};
const
const result: string
result
=
const engine: TemplateEngine
engine
.
TemplateEngine.render(template: string, data: TemplateData): string

Render a template string with data

@paramtemplate The template string containing {{variable}} placeholders

@paramdata The data context for variable replacement

@returnsThe rendered template string

render
(
const template: "Bonjour {{name}} ! Bienvenue chez {{company.name}}."
template
,
const data: {
name: string;
company: {
name: string;
};
}
data
);
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err

@seesource

console
.
Console.log(message?: any, ...optionalParams: any[]): void

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.

@sincev0.1.100

log
(
const result: string
result
); // "Bonjour John Doe ! Bienvenue chez Acme Corp."
email-template.ts
import
class TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
from "@withstudiocms/template-lang";
const
const engine: TemplateEngine
engine
= new
new TemplateEngine(options?: TemplateOptions): TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
();
const
const emailTemplate: "\n<!DOCTYPE html>\n<html>\n<head>\n <title>{{subject}}</title>\n</head>\n<body>\n <h1>Bonjour {{user.name}} !</h1>\n <p>Votre commande n°{{order.id}} a été confirmée.</p>\n <p>Total : {{order.total}}</p>\n</body>\n</html>\n"
emailTemplate
= `
<!DOCTYPE html>
<html>
<head>
<title>{{subject}}</title>
</head>
<body>
<h1>Bonjour {{user.name}} !</h1>
<p>Votre commande n°{{order.id}} a été confirmée.</p>
<p>Total : {{order.total}}</p>
</body>
</html>
`;
const
const data: {
subject: string;
user: {
name: string;
};
order: {
id: string;
total: string;
};
}
data
= {
subject: string
subject
: "Confirmation de commande",
user: {
name: string;
}
user
: {
name: string
name
: "John Doe" },
order: {
id: string;
total: string;
}
order
: {
id: string
id
: "12345",
total: string
total
: "99.99" },
};
const
const html: string
html
=
const engine: TemplateEngine
engine
.
TemplateEngine.render(template: string, data: TemplateData): string

Render a template string with data

@paramtemplate The template string containing {{variable}} placeholders

@paramdata The data context for variable replacement

@returnsThe rendered template string

render
(
const emailTemplate: "\n<!DOCTYPE html>\n<html>\n<head>\n <title>{{subject}}</title>\n</head>\n<body>\n <h1>Bonjour {{user.name}} !</h1>\n <p>Votre commande n°{{order.id}} a été confirmée.</p>\n <p>Total : {{order.total}}</p>\n</body>\n</html>\n"
emailTemplate
,
const data: {
subject: string;
user: {
name: string;
};
order: {
id: string;
total: string;
};
}
data
);
strict-mode.ts
import
class TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
from "@withstudiocms/template-lang";
const
const strictEngine: TemplateEngine
strictEngine
= new
new TemplateEngine(options?: TemplateOptions): TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
({
TemplateOptions.strict?: boolean

Whether to throw an error when a variable is not found in the data

@defaultfalse

strict
: true });
// Une erreur sera générée si 'missingVar' est absent des données.
try {
const
const result: string
result
=
const strictEngine: TemplateEngine
strictEngine
.
TemplateEngine.render(template: string, data: TemplateData): string

Render a template string with data

@paramtemplate The template string containing {{variable}} placeholders

@paramdata The data context for variable replacement

@returnsThe rendered template string

render
("Bonjour {{missingVar}} !", {});
} catch (
var error: unknown
error
) {
var console: Console

The console module provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

The module exports two specific components:

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
  • A global console instance configured to write to process.stdout and process.stderr. The global console can be used without importing the node:console module.

Warning: The global console object's methods are neither consistently synchronous like the browser APIs they resemble, nor are they consistently asynchronous like all other Node.js streams. See the note on process I/O for more information.

Example using the global console:

console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr

Example using the Console class:

const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err

@seesource

console
.
Console.log(message?: any, ...optionalParams: any[]): void

Prints to stdout with newline. Multiple arguments can be passed, with the first used as the primary message and all additional used as substitution values similar to printf(3) (the arguments are all passed to util.format()).

const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout

See util.format() for more information.

@sincev0.1.100

log
("Variable introuvable :", (
var error: unknown
error
as
interface Error
Error
).
Error.message: string
message
);
}
default-values.ts
import
class TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
from "@withstudiocms/template-lang";
const
const engine: TemplateEngine
engine
= new
new TemplateEngine(options?: TemplateOptions): TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
({
TemplateOptions.defaultValue?: string

Default value to use when a variable is not found and strict is false

@default''

defaultValue
: "[NON DÉFINI]" });
const
const result: string
result
=
const engine: TemplateEngine
engine
.
TemplateEngine.render(template: string, data: TemplateData): string

Render a template string with data

@paramtemplate The template string containing {{variable}} placeholders

@paramdata The data context for variable replacement

@returnsThe rendered template string

render
("Bonjour {{name}} !", {});
// Résultat : "Bonjour [NON DÉFINI] !"
template-compilation.ts
import
class TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
from "@withstudiocms/template-lang";
const
const engine: TemplateEngine
engine
= new
new TemplateEngine(options?: TemplateOptions): TemplateEngine

Main template engine class that provides a simple API for template rendering

TemplateEngine
();
// Compiler une fois, utiliser plusieurs fois
const
const compiled: (data: TemplateData) => string
compiled
=
const engine: TemplateEngine
engine
.
TemplateEngine.compile(template: string): (data: TemplateData) => string

Create a template function that can be reused with different data

@paramtemplate The template string

@returnsA function that takes data and returns rendered template

compile
("Bonjour {{name}} !");
const
const result1: string
result1
=
const compiled: (data: TemplateData) => string
compiled
({
name: string
name
: "Alice" });
const
const result2: string
result2
=
const compiled: (data: TemplateData) => string
compiled
({
name: string
name
: "Bob" });
new TemplateEngine(options?: TemplateOptions)

render(template: string, data: TemplateData): string Génère un modèle à partir des données fournies.

compile(template: string): (data: TemplateData) => string Compile un modèle en une fonction réutilisable.

hasVariables(template: string): boolean Vérifie si un modèle contient des variables.

getVariables(template: string): string[] Renvoie un tableau de tous les noms de variables présents dans le modèle.

setOptions(options: Partial<TemplateOptions>): void Met à jour les options du moteur.

interface TemplateOptions {
strict?: boolean; // Générer une erreur en cas de variables manquantes (par défaut : false)
defaultValue?: string; // Valeur par défaut pour les variables manquantes (par défaut : '')
}