### Install Squirrelly in Browser via CDN
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/install.mdx
HTML script tags to include the Squirrelly library directly in a web page using either Unpkg or JSDelivr Content Delivery Networks. This makes Squirrelly available globally as the `Sqrl` variable.
```html
```
```html
```
--------------------------------
### Install Squirrelly via npm or Yarn
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/install.mdx
Instructions for installing the Squirrelly templating library in a Node.js project using either npm or Yarn package managers. The `--save` flag ensures the dependency is added to `package.json`.
```sh
npm install squirrelly --save
```
```sh
yarn add squirrelly
```
--------------------------------
### Complete Squirrelly.js Template Definition and Rendering Example
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/first-template.md
This comprehensive snippet combines the template definition and rendering steps into a single block, providing a full, runnable example of how to use Squirrelly.js to generate dynamic content.
```js
var myTemplate = 'My favorite template engine is {{it.favorite}}.'
var result = Sqrl.render(myTemplate, {
favorite: 'Squirrelly, definitely'
})
```
--------------------------------
### Install Project Dependencies with Yarn
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/README.md
This command installs all necessary project dependencies using Yarn, preparing the Squirrelly documentation website for development or build operations. It ensures that all required packages are available locally.
```Shell
$ yarn
```
--------------------------------
### Example of Squirrelly Helper with Nested Blocks
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/helpers.md
This example demonstrates a practical application of Squirrelly helpers, showcasing how to pass parameters and structure content using nested helper blocks. It illustrates a 'portfolio' helper containing 'tagline', 'hobbies', and 'img' sub-blocks.
```Squirrelly
{{@portfolio( {userID: 3838357} )}}
Joe Edrick
{{#tagline}}
Cool Coder Person
{{#hobbies}}
Eating delicious food
{{#img}}
{{@user.img}}
{{/portfolio}}
```
--------------------------------
### Start Local Development Server with Yarn
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/README.md
This command initiates a local development server for the Squirrelly documentation website. It automatically opens a browser window and supports live reloading for most changes, eliminating the need to restart the server manually.
```Shell
$ yarn start
```
--------------------------------
### Squirrelly.js File Partial Example with Template and JavaScript
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/partials.md
Provides a comprehensive example of using file-based partials in Squirrelly.js for Node.js. It includes both the content of a `.sqrl` partial file and the JavaScript code to render a main template that incorporates this file partial, demonstrating how data is passed and accessed.
```Squirrelly Template
{{! /* src/partial.sqrl */}}
This is a partial speaking: "My name is {{it.name}}"
```
```JavaScript
// src/index.js
Sqrl.render("{{@includeFile('./partial', it) /}}", {
name: 'Ben',
})
// This is a partial speaking: "My name is {{it.name}}"
```
--------------------------------
### Import Squirrelly in Node.js
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/install.mdx
Demonstrates how to import Squirrelly using ES Modules (`import`) or CommonJS (`require`) syntax in a Node.js environment. Squirrelly is packaged as a UMD module, supporting various module loading options.
```js
import * as Sqrl from 'squirrelly'
// or
var Sqrl = require('squirrelly')
```
--------------------------------
### Example Usage of Sqrl.compile
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/compilation.md
Demonstrates how to use `Sqrl.compile` to compile a simple template string and then execute the compiled function with data. It shows the input template, the structure of the resulting compiled function, and the final rendered output.
```js
var myTemplate = "Hi, my name is {{it.name}}";
var compiled = Sqrl.compile(myTemplate);
// Returns a function:
// function anonymous(it,c,cb ) { var tR='';tR+='Hi, my name is ';tR+=c.l('F','e')(it.name);if(cb){cb(null,tR)} return tR }
compiled({ name: "Johnny Appleseed" }, Sqrl.defaultConfig);
//Returns "Hi, my name is Johnny Appleseed"
```
--------------------------------
### Example of Self-Closing Squirrelly Helper for Partials
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/helpers.md
This example provides a common use case for a self-closing Squirrelly helper: including a partial template. It demonstrates how to call the 'include' helper with a partial name as a parameter without requiring a closing tag or content block.
```Squirrelly
{{@include("mypartial")/}}
```
--------------------------------
### Squirrelly.js Registered Partial Definition and Usage Example
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/partials.md
Demonstrates the complete workflow for using registered partials in Squirrelly.js. It shows how to compile a partial string, define it globally using `Sqrl.templates.define`, and then render a main template that includes this partial, passing the current context (`it`) as data.
```JavaScript
let mypartial = `My name is {{it.name}}`
Sqrl.templates.define('mypartial', Sqrl.compile(mypartial))
Sqrl.render("This is a partial: {{@include('mypartial', it) /}}", {
name: 'Ben',
})
// This is a partial: My name is Ben
```
--------------------------------
### Render Squirrelly.js Template with Data
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/first-template.md
This example illustrates how to use the `Sqrl.render` method to process a Squirrelly.js template string with a given data object. The method returns the final rendered string.
```js
var result = Sqrl.render(myTemplate, data)
```
--------------------------------
### Squirrelly If/Else Conditional Helper
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/overview.md
Demonstrates the use of Squirrelly's native `if`, `elif`, and `else` helpers for implementing conditional logic within templates. These helpers compile directly into native JavaScript code, ensuring efficient execution. The example shows how to check numerical conditions and render different content based on the outcome.
```Squirrelly
{{ @if (it.number === 3) }}
Number is three
{{ #elif (it.number === 4) }}
Number is four
{{ #else }}
Number is five
{{ /if}}
```
--------------------------------
### Squirrelly v7 Inconsistent Data Reference Example
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/blog/2020-02-22-squirrelly-v8.md
This snippet illustrates a common issue in Squirrelly v7 where data references often required an explicit 'options.' prefix, leading to inconsistent syntax depending on the variable's position or context.
```Squirrelly
{{val1 + options.val2}}
```
--------------------------------
### Render Squirrelly Template with JavaScript
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/rendering.md
This example demonstrates how to render a Squirrelly template string using the `Sqrl.render()` method. It shows passing a data object to the template and the resulting string output after compilation.
```js
var myTemplate = "Hi, my name is {{it.name}}";
Sqrl.render(myTemplate, { name: "Johnny Appleseed" });
//Returns "Hi, my name is Johnny Appleseed"
```
--------------------------------
### Define and manage Squirrelly cache items for templates and filters
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/containers.md
This JavaScript example demonstrates how to interact with Squirrelly's internal caching mechanisms for templates and filters. It shows how to define a new template or filter using `Sqrl.templates.define` and `Sqrl.filters.define`, retrieve a defined template with `Sqrl.templates.get`, and clear all defined filters using `Sqrl.filters.clear`.
```js
Sqrl.templates.define("my-partial", Sqrl.compile("This is a partial speaking"));
console.log(Sqrl.templates.get("my-partial"));
Sqrl.filters.define("capitalize", function(str) {
return str.toUpperCase();
});
Sqrl.filters.clear();
```
--------------------------------
### Squirrelly Native Code Console Logging
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/native-code.md
Shows an example of performing console logging from within a Squirrelly native code block. This is useful for debugging template logic. It's crucial to include semicolons after function calls like `console.log()` to ensure correct JavaScript execution.
```sqrl
{{! console.log("Hi"); }}
```
--------------------------------
### Squirrelly v7 String Parsing Failure Example
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/blog/2020-02-22-squirrelly-v8.md
This example demonstrates a limitation in Squirrelly v7's parser, which could fail to correctly parse template strings containing specific characters (like '}}') due to its reliance on a single, large regular expression.
```Squirrelly
{{ val1 + "closing tag is }}, right"}}
```
--------------------------------
### Compile Squirrelly Template with Custom Tags using getConfig
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/configuration.md
This example demonstrates how to compile a Squirrelly template string (`myTemplate`) using `Sqrl.compileToString` while applying custom tag delimiters (`<%` and `%>`). The `Sqrl.getConfig` function is used to retrieve a configuration object with the specified tags, ensuring the template engine parses the template with these custom delimiters.
```js
Sqrl.compileToString(myTemplate, Sqrl.getConfig({ tags: ["<%", "%>"] }));
```
--------------------------------
### Squirrelly Whitespace Control Example: Trim Before Tag
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/whitespace-trimming.md
Demonstrates trimming one character of whitespace immediately preceding a Squirrelly tag using the '-' modifier. This is useful for precise layout control.
```sqrl
Hi
{{- it.myname }}
```
--------------------------------
### Parse Squirrelly Template into Syntax Tree
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/parsing.md
This JavaScript example demonstrates how to parse a Squirrelly template string into its internal syntax tree representation using the `Sqrl.parse()` method. The output is a structured array representing the template's components, useful for advanced scenarios like developing custom helpers or plugins.
```js
var myTemplate = 'Hi, my name is {{it.name}}'
var compiled = Sqrl.parse(myTemplate)
//Returns a Squirrelly syntax tree (like an AST):
// ['Hi, my name is ', { f: [], c: 'it.name', t: 'r' }]
```
--------------------------------
### Squirrelly Whitespace Control Example: Trim All Whitespace
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/whitespace-trimming.md
Illustrates trimming all whitespace before and after a Squirrelly tag using the '_' modifier. This is commonly applied to control flow tags like 'if' to prevent unwanted newlines or spaces.
```sqrl
{{_ ~if (it.num) _}}
{{/if}}
```
--------------------------------
### Disable Auto-Escaping for Specific References in Squirrelly.js Templates
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/auto-escaping.md
These examples illustrate how to selectively bypass auto-escaping for individual references within Squirrelly.js templates. This can be achieved by applying the `safe` filter or by preceding the reference with an asterisk (`*`) immediately after the opening delimiters, useful for rendering pre-sanitized or trusted content.
```squirrelly
{{someref | safe}}
{{* someref}}
{{_ * someref}}
```
--------------------------------
### Defining a Native 'if' Helper in Squirrelly.js
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/native-helpers.md
This JavaScript code defines a custom 'if' native helper for Squirrelly.js templates. It processes conditional logic, including 'else' and 'elif' blocks, by compiling template content within the respective scopes. This example demonstrates how to extend Squirrelly's templating capabilities with custom control flow, though native helpers are noted as complex.
```javascript
Sqrl.nativeHelpers.define('if', function (buffer, env) {
// buffer.d is buffer content, in AST form
var returnStr =
'if(' + buffer.p + '){' + Sqrl.compileScope(buffer.d, env) + '}'
if (buffer.b) {
// b stands for blocks
// Loop through each helper block
for (var i = 0; i < buffer.b.length; i++) {
var currentBlock = buffer.b[i]
if (currentBlock.n === 'else') {
returnStr += 'else{' + Sqrl.compileScope(currentBlock.d, env) + '}'
} else if (currentBlock.n === 'elif') {
returnStr +=
'else if(' +
currentBlock.p +
'){' +
Sqrl.compileScope(currentBlock.d, env) +
'}'
}
}
}
return returnStr
})
```
--------------------------------
### Build Static Website Content with Yarn
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/README.md
This command generates static content for the Squirrelly documentation website into the `build` directory. The resulting static files can then be served using any standard static content hosting service, preparing the site for production deployment.
```Shell
$ yarn build
```
--------------------------------
### Deploy Website to GitHub Pages with Yarn
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/README.md
This command facilitates the deployment of the Squirrelly documentation website to GitHub Pages. It automates the process of building the website and pushing the generated content to the `gh-pages` branch, requiring a specified GitHub username and optionally using SSH for authentication.
```Shell
$ GIT_USER= USE_SSH=true yarn deploy
```
--------------------------------
### Sqrl.compile Method Syntax
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/compilation.md
Illustrates the basic syntax for `Sqrl.compile`, showing its parameters and return type. It takes a template string and an optional configuration object, returning a function that can be invoked with data.
```js
Sqrl.compile (str, options)
// returns a function that can be called with (data, options, [cb])
// note: options must be a valid config object
```
--------------------------------
### Render Squirrelly.js Template with Alternative Data
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/first-template.md
This snippet demonstrates the flexibility of Squirrelly.js by rendering the same template with a different data object directly passed to the `render` method, showcasing how dynamic content can be generated.
```js
var result2 = Sqrl.render(myTemplate, {
favorite: 'Squirrelly, definitely'
})
```
--------------------------------
### Applying Filters with and Without Parameters in Squirrelly
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/syntax/filters.md
Illustrates the application of basic filters like `reverse` and `capitalize`, and how to pass parameters to filters such as `join` in Squirrelly templates.
```sqrl
{{! /* Basic filters */}}
{{mystring | reverse | capitalize}}
{{! /* With Parameters */}}
{{it.someArray | join(", ")}}
```
--------------------------------
### Implementing Asynchronous Helpers and Rendering in Squirrelly.js
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/learn/async.md
This snippet illustrates how to define an asynchronous helper (`async-test`) in Squirrelly.js that returns a Promise. It then shows two methods for rendering a template that uses this async helper: one using `async`/`await` syntax and another using a traditional callback function, both demonstrating how Squirrelly.js waits for the helper's promise to resolve before outputting the result.
```js
function resolveAfter2Seconds () {
return new Promise(resolve => {
setTimeout(() => {
resolve('HI FROM ASYNC')
}, 2000)
})
}
Sqrl.helpers.define('async-test', resolveAfter2Seconds)
async function doAsyncStuff () {
console.log(
await Sqrl.render(
'{{@async async-test()/}}',
{},
{ async: true, asyncHelpers: ['async-test'] }
)
)
// logs 'HI FROM ASYNC' after 2 seconds
}
// ALTERNATIVELY, WITH CALLBACKS:
Sqrl.render(
'{{@async async-test()/}}',
{},
{ async: true, asyncHelpers: ['async-test'] },
function (err, res) {
console.log(res)
// logs 'HI FROM ASYNC' after 2 seconds
}
)
```
--------------------------------
### Defining and using Squirrelly.js partials
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/templates.md
This snippet demonstrates how to define partials using `Sqrl.templates.define` and compile them with `Sqrl.compile`. It also shows how to include partials in a template using `{{@include(...)}}` and pass data to them.
```js
Sqrl.templates.define("my-partial", Sqrl.compile("This is a partial speaking"));
Sqrl.render('... {{@include("my-partial")/}}', {});
// ... This is a partial speaking
// To call a partial w/ data:
Sqrl.templates.define("my-partial-2", Sqrl.compile("Name: {{it.name}}"));
Sqrl.render(
'... {{@include("my-partial", {name: it.name})/}}',
// The 2nd argument passed to `include` is the data. You could also pass `it` to forward all data
{ name: "Ben" }
);
// ... Name: Ben
```
--------------------------------
### Prepare Data for Squirrelly.js Template
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/get-started/first-template.md
This code snippet shows how to create a simple JavaScript object that will serve as the data context for rendering a Squirrelly.js template. The object's properties correspond to the placeholders in the template.
```js
var data = {
favorite: 'Squirrelly'
}
```
--------------------------------
### Squirrelly Configuration Options Reference
Source: https://github.com/squirrellyjs/squirrelly-docs/blob/master/docs/api/configuration.md
Defines the various options available to customize Squirrelly's behavior, including their type, description, default value, and whether they are required. This section also details specific behaviors for delimiters, auto-trimming, and plugin structures.
```APIDOC
Squirrelly Configuration Options:
async
Description: Whether to generate async templates
Type: boolean
Default: false
Required: Yes
autoEscape
Description: Whether to automatically XML-escape
Type: boolean
Default: (none specified)
Required: Yes
autoTrim
Description: Configure automatic whitespace trimming
Type: "nl" | "slurp" | boolean | ["nl" | "slurp" | boolean, "nl" | "slurp" | boolean]
Default: [false, "nl"]
Required: Yes
Options:
"nl": trims first character
"slurp": trims all leading/trailing whitespace
true: equivalent to "slurp"
Note: When an array is passed, Squirrelly uses the equivalent options on the left or right side of the string.
cache
Description: Cache templates by `name` or `filename`
Type: boolean
Default: (none specified)
Required: Yes
defaultFilter
Description: Pass all interpolates through a function
Type: false | Function
Default: false
Required: Yes
filename
Description: Absolute filepath of template (for caching)
Type: string
Default: undefined
Required: No
l
Description: Function that returns helpers.
Type: Function
Default: defaultConfig.l
Required: Yes
Signature: (container: "H" | "F", name: string) => Function
name
Description: Template name (for caching)
Type: string
Default: undefined
Required: No
plugins
Description: Plugins object
Type: object
Default: defaultConfig.plugins
Required: Yes
Properties:
processAST:
Description: List of functions that manipulate Squirrelly syntax tree
Type: Array