fix(metadata): Removed CI configuration file .gitlab-ci.yml and updated project metadata
This commit is contained in:
156
readme.md
156
readme.md
@@ -1,112 +1,172 @@
|
||||
# @push.rocks/smarthbs
|
||||
handlebars with better fs support
|
||||
|
||||
A library that enhances handlebars with better file system support, templates compilation, and partials registration.
|
||||
|
||||
## Install
|
||||
|
||||
To install `@push.rocks/smarthbs`, run the following command in your terminal:
|
||||
|
||||
```bash
|
||||
npm install @push.rocks/smarthbs --save
|
||||
```
|
||||
|
||||
This will add `@push.rocks/smarthbs` to your project's dependencies.
|
||||
This will add `@push.rocks/smarthbs` as a dependency to your project, allowing you to leverage its enhanced Handlebars templating capabilities.
|
||||
|
||||
## Usage
|
||||
|
||||
The `@push.rocks/smarthbs` package enhances Handlebars with improved filesystem support, making it easy to manage partials and compile directories with template files. Below is a comprehensive guide to utilizing its capabilities in your project.
|
||||
The `@push.rocks/smarthbs` library extends Handlebars functionality by introducing better file system interaction, template compilation, and an easier way to manage partials. The following sections walk you through the various features and how you can utilize them for creating dynamic and organized templates.
|
||||
|
||||
### Getting Started
|
||||
|
||||
First, ensure you've imported `@push.rocks/smarthbs` using ECMAScript Module (ESM) syntax in TypeScript:
|
||||
First, import the `@push.rocks/smarthbs` module using ECMAScript Module (ESM) syntax in a TypeScript file:
|
||||
|
||||
```typescript
|
||||
import * as smarthbs from '@push.rocks/smarthbs';
|
||||
```
|
||||
|
||||
### Registering Partials
|
||||
### Managing Partials
|
||||
|
||||
In Handlebars, *partials* are reusable templates that can be included within other templates. `@push.rocks/smarthbs` simplifies the process of registering all partials from a directory, enabling a more organized template structure.
|
||||
Handlebars' partials allow for embedding templates within other templates, making it simple to manage reusable pieces of template code. With `@push.rocks/smarthbs`, you can efficiently register an entire directory of partials.
|
||||
|
||||
To register all `.hbs` files from a directory (and its subdirectories) as partials:
|
||||
#### Registering a Directory of Partials
|
||||
|
||||
To register all `.hbs` files in a directory, including those in subdirectories, as partials:
|
||||
|
||||
```typescript
|
||||
await smarthbs.registerPartialDir(pathToPartialsDirectory);
|
||||
await smarthbs.registerPartialDir('./path/to/partials');
|
||||
```
|
||||
|
||||
**Example:**
|
||||
|
||||
```typescript
|
||||
await smarthbs.registerPartialDir('./views/partials');
|
||||
```
|
||||
|
||||
This automatically registers each `.hbs` file in the directory as a partial that can be referenced by its path relative to the specified directory.
|
||||
Each `.hbs` file in the specified directory becomes available as a partial. Partials are identified by their paths relative to the specified directory.
|
||||
|
||||
### Compiling Templates
|
||||
|
||||
`@push.rocks/smarthbs` allows you to compile an entire directory of Handlebars template files, outputting the rendered HTML to a specified directory. You can also provide a `.json` file containing data to be used by all templates during compilation.
|
||||
Compiling directories of Handlebars templates is seamless with `@push.rocks/smarthbs`. This feature reads templates from a source directory, compiles them using a specified data context, and writes the rendered output to a destination directory.
|
||||
|
||||
**Example:**
|
||||
#### Compile a Directory
|
||||
|
||||
```typescript
|
||||
await smarthbs.compileDirectory(sourceDirectory, destinationDirectory, 'data.json');
|
||||
await smarthbs.compileDirectory('./source/templates', './destination/html', 'data.json');
|
||||
```
|
||||
|
||||
This reads all `.hbs` files in `sourceDirectory`, compiles them using the data from `data.json`, and writes the resulting HTML to `destinationDirectory`.
|
||||
Here, every `.hbs` file in `./source/templates` is compiled with data from `data.json`. The rendered outputs are saved as `.html` files in `./destination/html`.
|
||||
|
||||
### Finding Variables in Templates
|
||||
### Working with Variables
|
||||
|
||||
When working with complex templates, it might be useful to programmatically find all variables used within a template:
|
||||
When handling complex templates, you might want to analyze which variables are used, verify their satisfaction, and ensure data completeness.
|
||||
|
||||
#### Finding Variables in Templates
|
||||
|
||||
To extract all variables used within a Handlebars template string:
|
||||
|
||||
```typescript
|
||||
let varsInTemplate = await smarthbs.findVarsInHbsString(templateString);
|
||||
console.log(varsInTemplate); // Outputs an array of variable names used in the template
|
||||
const templateVariables = await smarthbs.findVarsInHbsString("Your template {{example}} here.");
|
||||
console.log(templateVariables); // Outputs an array of variable names: ['example']
|
||||
```
|
||||
|
||||
### Checking Variables Satisfaction
|
||||
#### Ensuring Variables Satisfaction
|
||||
|
||||
To ensure that the data provided to a template includes all necessary variables, you can compare a template against a data object:
|
||||
To check if a given data object satisfies all required variables in a template:
|
||||
|
||||
```typescript
|
||||
let missingVars = await smarthbs.checkVarsSatisfaction(templateString, dataObject);
|
||||
if(missingVars.length > 0) {
|
||||
console.error('Some required variables are missing:', missingVars);
|
||||
const missingVars = await smarthbs.checkVarsSatisfaction("Your template {{example}} here.", { anotherVar: "some value" });
|
||||
if(missingVars.length) {
|
||||
console.error('Missing variables:', missingVars);
|
||||
}
|
||||
```
|
||||
|
||||
This function returns an array of missing variable names, allowing you to validate data completeness before rendering.
|
||||
This function ensures the provided data object contains all variables used in the template. Otherwise, it returns an array with the names of the missing variables.
|
||||
|
||||
### Templates and Strings
|
||||
### Rendering Templates
|
||||
|
||||
You can also get templates directly from strings or files on disk, which can then be rendered with context data:
|
||||
You can use `@push.rocks/smarthbs` to compile Handlebars templates directly from strings or files:
|
||||
|
||||
#### From a String
|
||||
|
||||
```typescript
|
||||
// From a string
|
||||
let templateFromString = await smarthbs.getTemplateForString("Hello {{name}}!");
|
||||
let resultString = templateFromString({ name: "World" });
|
||||
console.log(resultString); // Outputs: Hello World!
|
||||
|
||||
// From a file
|
||||
let templateFromFile = await smarthbs.getTemplateForFile("./templates/greeting.hbs");
|
||||
let resultFileString = templateFromFile({ name: "File World" });
|
||||
console.log(resultFileString); // Outputs the rendered content of greeting.hbs with provided data
|
||||
const stringTemplate = await smarthbs.getTemplateForString("Hello, {{name}}!");
|
||||
const renderedString = stringTemplate({ name: "World" });
|
||||
console.log(renderedString); // "Hello, World!"
|
||||
```
|
||||
|
||||
### Post-processing: Safe Syntax
|
||||
|
||||
In scenarios where Handlebars syntax needs to be preserved during an intermediate step:
|
||||
#### From a File
|
||||
|
||||
```typescript
|
||||
let safeString = await smarthbs.postprocess(yourTemplateString);
|
||||
const fileTemplate = await smarthbs.getTemplateForFile('./path/to/template.hbs');
|
||||
const renderedFileString = fileTemplate({ key: "value" });
|
||||
console.log(renderedFileString); // Outputs the processed template with provided data
|
||||
```
|
||||
|
||||
This method converts safe syntax markers (e.g., `{-{` and `}-}`) back into standard Handlebars syntax (`{{` and `}}`), useful if your templates go through multiple processing steps.
|
||||
### Ensuring Safe Syntax
|
||||
|
||||
### Advanced Usage and Helpers
|
||||
If your Handlebars templates go through multiple processing stages, you might need to protect and restore the syntax:
|
||||
|
||||
`@push.rocks/smarthbs` also supports advanced use cases and custom helpers. For example, registering a helper to log all available partials or to perform runtime template compilation based on dynamic data.
|
||||
```typescript
|
||||
const processedString = await smarthbs.postprocess("This is {-{safe}-} syntax.");
|
||||
console.log(processedString); // Restores to "This is {{safe}} syntax."
|
||||
```
|
||||
|
||||
This approach allows you to keep placeholders intact during various stages, converting `{-{ ... }-}` syntax back to `{{ ... }}`.
|
||||
|
||||
### Advanced Features and Helpers
|
||||
|
||||
#### Custom Helpers
|
||||
|
||||
Extend Handlebars with custom helpers to introduce new functionalities or debug existing templates. For instance:
|
||||
|
||||
- **Analyze Helper**: Displays partials and their details.
|
||||
- **Log Registered Partials**: Logs all registered partials, aiding in debugging.
|
||||
- **Runtime Compilation**: Compile templates dynamically using the `__compile` helper.
|
||||
|
||||
### Example: Building an HTML Page
|
||||
|
||||
Suppose you are building a simple HTML page. First, define a partial for the header and a general layout:
|
||||
|
||||
Create a new header partial:
|
||||
|
||||
```hbs
|
||||
<!-- ./partials/header.hbs -->
|
||||
<header>
|
||||
<h1>{{title}}</h1>
|
||||
</header>
|
||||
```
|
||||
|
||||
Define a base layout that includes the header and a body:
|
||||
|
||||
```hbs
|
||||
<!-- ./layouts/main.hbs -->
|
||||
{{> header title=pageTitle}}
|
||||
<section>
|
||||
<h2>{{subtitle}}</h2>
|
||||
<p>{{content}}</p>
|
||||
</section>
|
||||
```
|
||||
|
||||
In your script, register partials and compile the layout:
|
||||
|
||||
```typescript
|
||||
import * as smarthbs from '@push.rocks/smarthbs';
|
||||
|
||||
// Register partials
|
||||
await smarthbs.registerPartialDir('./partials');
|
||||
|
||||
// Prepare data for compilation
|
||||
const data = {
|
||||
pageTitle: "My Awesome Page",
|
||||
subtitle: "Welcome to the world of dynamic templates!",
|
||||
content: "Handlebars makes creating reusable templates easy."
|
||||
};
|
||||
|
||||
// Compile and render the layout
|
||||
const mainTemplate = await smarthbs.getTemplateForFile('./layouts/main.hbs');
|
||||
const renderedHtml = mainTemplate(data);
|
||||
|
||||
console.log(renderedHtml);
|
||||
// Outputs the full HTML replacing variables in the layout with data
|
||||
```
|
||||
|
||||
### Conclusion
|
||||
|
||||
`@push.rocks/smarthbs` provides a robust set of features to enhance your Handlebars templating, making it easier to manage and render complex templates with external data sources and organized partials. Whether you're building web applications, generating email templates, or any task involving templating, `@push.rocks/smarthbs` can simplify and streamline your workflow.
|
||||
The `@push.rocks/smarthbs` library enhances the already powerful Handlebars templating engine with capabilities that are crucial for modern development workflows, especially those involving complex template management and dynamic content generation. Whether managing large-scale projects with numerous reusable components or simply wanting a better way to handle templates and partials, this tool provides a robust solution to enhance your projects and improve productivity.
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
|
||||
Reference in New Issue
Block a user