Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yoannchb-pro/tempjs

TEMPJS is a fast, low code and no dependencies templating langage where you can use javascript inside html!
https://github.com/yoannchb-pro/tempjs

ejs javascript nodejs template templating-language typescript

Last synced: about 1 month ago
JSON representation

TEMPJS is a fast, low code and no dependencies templating langage where you can use javascript inside html!

Host: GitHub
URL: https://github.com/yoannchb-pro/tempjs
Owner: yoannchb-pro
License: mit
Created: 2023-02-02T03:17:56.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-05-04T01:09:38.000Z (over 1 year ago)
Last Synced: 2024-10-12T00:42:19.732Z (3 months ago)
Topics: ejs, javascript, nodejs, template, templating-language, typescript
Language: TypeScript
Homepage:
Size: 93.8 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        # tempjs

TEMPJS is a fast, low code and no dependencies templating langage where you can use javascript inside html !

## Table of content

- [tempjs](#tempjs)

  - [Table of content](#table-of-content)

  - [Demo](#demo)

  - [Update](#update)

  - [Why tempjs ?](#why-tempjs-)

  - [Installation](#installation)

  - [Import](#import)

  - [Simple example](#simple-example)

  - [Simple example with async](#simple-example-with-async)

  - [Usage](#usage)

    - [API](#api)

    - [Include other template into the current](#include-other-template-into-the-current)

      - [Include from nodejs](#include-from-nodejs)

      - [Include from browser](#include-from-browser)

    - [Other Tags](#other-tags)

      - [Remove white spaces](#remove-white-spaces)

    - [Additionals delimiters](#additionals-delimiters)

      - [Return a value](#return-a-value)

      - [Return a value without escaping HTML](#return-a-value-without-escaping-html)

      - [Writting comments](#writting-comments)

      - [Skip js instruction](#skip-js-instruction)

    - [Options](#options)

## Demo

See a simplified live editor on the [github page](https://yoannchb-pro.github.io/tempjs/index.html)

## Update

> NOTE: Use a version upper or equal to 1.0.6 to prevent XSS injection

See the [CHANGELOG](./CHANGELOG.md) file

## Why tempjs ?

There are several reasons why you should consider using tempjs:

1. Lightweight: tempjs is less than 5 kilobytes in size, making it a great choice for projects where size matters.

2. No dependencies: tempjs has no external dependencies, so you won't have to worry about installing and maintaining additional packages.

3. Written in TypeScript: tempjs is written in TypeScript, which makes it easy to use in modern projects and ensures that it follows best practices.

4. Fast: tempjs is optimized for rendering templates quickly, so your users won't experience any delays while waiting for content to load.

5. Cross-platform: tempjs works on any device and has the same properties and functionalities in both Node.js and the browser, making it a versatile tool for rendering templates in any environment.

6. Customizable: With tempjs, you can add as many custom delimiters and plugins as you want, allowing you to tailor it to your specific needs and make it work exactly the way you want it to.

By choosing tempjs, you can be confident that you're using a reliable and efficient template engine for your web application.

## Installation

```

$ npm i tempjs-template

```

Or directly in the browser with

```html

```

## Import

```ts

import tempjs from "tempjs-template";

```

## Simple example

> NOTE: You can use any javascript syntax into the template just ensure to use = operator if you want to return something (never use return)

In this example we render a list and apply a color on the index

```js

const todos = ["Make a chatbot", "Eat an apple", "Do some sports"];

const data = { todos };

document.body.innerHTML = tempjs.compile(

  `

    {%_# I'm just a comment dont worry _%}

    


        {%_ let index = 0 _%}

        {% for(const todo of todos){ _%}    

            {%= todo %}

            {%_ ++index %}

        {%_ } _%}

    

    `,

  data

);

```

## Simple example with async

Working with async is pretty simple

```js

await tempjs.compile(

  `

    {%_

        const req = await fetch("https://jsonplaceholder.typicode.com/todos/")

        const todos = await req.json()

    _%}

    


        {%_ for(const todo of todos){ _%}    

            {%= todo.title %}

        {%_ } _%}

    

    `,

  {

    /*some data here*/

  },

  { async: true }

);

```

## Usage

### API

> NOTE: The return type is calculed on the options so it will be automatically set to string or Promise\. Below is just a simplified version of the return type.

- tempjs.compile(template: string, data: Record\, options: Options): string | Promise\

- tempjs.compileFromFile(filePath: string, data: Record\, options: Options): string | Promise\

- tempjs.compileFromFileBrowser(filePath: string, data: Record\, options: Options): Promise\

- tempjs.createFunction(filePath: string, data: Record\, options: Options): () => string | Promise\

- tempjs.debug(filePath: string, data: Record\, options: Options): { template, options, data, generatedFunction, generatedCode, dataListName, dataListValue, pluginsName, pluginsFunctions }

### Include other template into the current

#### Include from nodejs

include(filaname: string, data: Record, options: Options): string | Promise\

```

{%@ include("header.html", { userName: "Yoann" }) %}

```

#### Include from browser

> NOTE: Don't forget to set the option "async: true" if the file also have an includeBrowser

includeBrowser(filaname: string, data: Record, options: Options): Promise\

```

{%@ await includeBrowser("header.html", { userName: "Yoann" }) %}

```

### Other Tags

#### Remove white spaces

> NOTE: It can be combined with custom delimiters (example: {%_# I'm a comment _%})

- `{%_` Remove white spaces before the first delimiter

- `_%}` Remove white spaces after the last delimiter

```html

{% if(5 > 0){ _%}

Five is greater than 0

{%_ } %}

```

Should compile as follow: `
Five is greater than 0
`

### Additionals delimiters

#### Return a value

```html

{% const greeting = "Hello World!" %}

{%= greeting %}

```

Should compile as follow: `
Hello World!
`

#### Return a value without escaping HTML

> **XSS injection warning**: Only use this with include/includeBrowser or if you are sure about what you are doing

The html will be executed

```

{% const greeting = "
Hello World!" %}

{%@ greeting %}

```

Should compile as follow: `
Hello World!
`

#### Writting comments

```html

{%# You can write some comments here it will not be shown or evaluate

console.log("I ll not show") %}

I love Tempjs

```

Should compile as follow: `
I love Tempjs
`

#### Skip js instruction

```

{%% greeting %}

```

Should compile as follow: `{% greeting %}`

### Options

```ts

type Options = {

  openDelimiter?: string;

  closeDelimiter?: string;

  context?: unknown;

  async?: boolean;

  minimified?: boolean;

  root?: string;

  removeWhitespace?: boolean;

  delimiters?: {

    name: string;

    description: string;

    delimiter: string;

    fn: (content: string, options: Options) => string;

  }[];

  plugins?: { name: string; description: string; fn: Function }[];

};

```

- openDelimiter (default: {%) : Open delimiter

- closeDelimiter (default: %}) : Close delimiter

- context (default: null) : Context of the function

- async (default: false) : Make asynchronous requests in the template

- minimified (default: true) : Make the generated code more readable in debug mode

- root (default: null): Specifie a root directory for including files

- removeWhitespace (default: false): Remove all whitespace before and after js instruction

- delimiters : Create customs delimiters. By default you have:

```

= return a value

@ return a value without escaping HTML

# create a comment

% Ingnore js instruction and display is as text with delimiters

```

Examples of implementation:

- Comment

```js

{

    name: "comment",

    description: "Shortcut to turn some code into a comment",

    delimiter: "#",

    fn: function (content, options) {

      return "/*" + content + "*/";

    },

  }

```

- Return value

```js

{

    name: "return",

    description: "Allow user to add variable to the output",

    delimiter: "=",

    fn: function (content, options) {

      return `$__output += escapeHTML(${content})`;

    },

},

```

- plugins : Create custom acessibles function into the template. By default you have "include" and "includeBrowser" that allow you to render other template into the current template:

```ts

include(filaname: string, data: Record, options: Options): string | Promise

includeBrowser(filaname: string, data: Record, options: Options): Promise

//Can be useful to create your own plugins

escapeHTML(obj: unknow): unknow //if the obj is a string HTML will be escaped

```

Example of implementation:

```ts

  {

    name: "truncat",

    description: "Truncat some text",

    fn: function(text: string, size: number){

        return text.trim().substring(0, size);

    },

  },

```