mikel 0.2.1 → 0.3.0

package/README.md

@@ -3,7 +3,7 @@
 ![npm version](https://badgen.net/npm/v/mikel?labelColor=1d2734&color=21bf81)
 ![license](https://badgen.net/github/license/jmjuanes/mikel?labelColor=1d2734&color=21bf81)
 
-Mikel is a lightweight implementation of the Mustache templating system in JavaScript, designed to be concise and simple. With less than 60 lines of code, it offers a convenient way to render templates using data.
+Mikel is a lightweight templating library based on the [Mustache](https://mustache.github.io) syntax, designed to be concise and easy to use. It provides a simple way to render templates using data objects, supporting features such as variables, partials, conditional sections, and looping. With a focus on simplicity and minimalism, Mikel offers a tiny yet powerful solution for generating dynamic content in JavaScript applications.
 
 ## Installation
 
@@ -17,36 +17,100 @@ $ npm install mikel
 $ yarn add mikel
 ```
 
-## Usage
+## Syntax
 
-### `m(template, data)`
+Mikel supports the following syntax for rendering templates:
+
+### Variables
+
+Use double curly braces `{{ }}` to insert variables into your template. Variables will be replaced with the corresponding values from the data object.
+
+### Sections
+
+Sections allow for conditional rendering of blocks of content based on the presence or absence of a value in the data object. Use the pound symbol `#` to start a section and the caret `^` to denote an inverted section. End the section with a forward slash `/`.
+
+Example:
+
+```javascript
+const data = {
+    isAdmin: true,
+};
+const result = m("{{#isAdmin}}You are Admin{{/isAdmin}}", data);
+// Output: 'You are Admin'
+```
+
+You can also use sections for looping over arrays. When looping over array of strings, you can use a dot `.` to reference the current item in the loop.
+
+Example:
+
+```javascript
+const data = {
+    users: [
+        { name: "John" },
+        { name: "Alice" },
+        { name: "Bob" }
+    ],
+};
+
+const result = m("Users:{{# users }} {{ name }},{{/ users }}", data);
+// Output: 'Users: John, Alice, Bob,'
+```
+
+Inverted sections render their block of content if the value is falsy or the key does not exist in the data object.
+
+Example:
+
+```javascript
+const data = {
+    isAdmin: false,
+};
+const result = m("{{^isAdmin}}You are not Admin{{/isAdmin}}", data);
+// Output: 'You are not Admin'
+```
+
+### Partials (added in v0.3.0)
+
+Partials allow you to include separate templates within your main template. Use the greater than symbol `>` followed by the partial name inside double curly braces `{{> partialName }}`.
+
+Example:
+
+```javascript
+const data = {
+    name: "Bob",
+};
+
+const partials = {
+    hello: "Hello {{name}}!",
+};
+
+const result = m("{{> hello}}", data, {partials});
+// Output: 'Hello Bob!'
+```
+
+## API
+
+### `m(template, data[, options])`
 
 Render the given template string with the provided data object.
 
 - `template` (string): The Mustache template string.
 - `data` (object): The data object containing the values to render.
+- `options` (object): An object containing the following optional values:
+    - `partials` (object): An object containing the available partials.
 
 Returns: A string with the rendered output.
 
 ```javascript
 import m from "mikel";
 
-const template = "Hello, {{ name }}!";
 const data = {
     name: "World",
 };
 
-const result = m(template, data);
+const result = m("Hello, {{name}}!", data);
 console.log(result); // Output: "Hello, World!"
 ```
 
-## Limitations
-
-Mikel aims to provide a minimalistic implementation of Mustache templating and currently has the following limitations:
-
-- **No support for partials:** Mikel does not support partials, meaning you cannot include separate templates within your main template file.
-- **Basic functionality:** While Mikel supports the core features of Mustache templating, it may lack some advanced features found in other implementations.
-
 ## License
 
 This project is licensed under the [MIT License](LICENSE).

package/index.js

@@ -1,3 +1,4 @@
+const tags = /\{\{|\}\}/;
 const escapedChars = {
     "&": "&",
     "<": "&lt;",
@@ -14,7 +15,7 @@ const get = (ctx, path) => {
     return path === "." ? ctx : (path.split(".").reduce((p, k) => p?.[k], ctx) || "");
 };
 
-const compile = (tokens, output, ctx, index, section) => {
+const compile = (tokens, output, ctx, opt, index, section) => {
     let i = index;
     while (i < tokens.length) {
         if (i % 2 === 0) {
@@ -30,12 +31,18 @@ const compile = (tokens, output, ctx, index, section) => {
             if (!negate && value && Array.isArray(value)) {
                 const j = i + 1;
                 value.forEach(item => {
-                    i = compile(tokens, output, item, j, t);
+                    i = compile(tokens, output, item, opt, j, t);
                 });
             }
             else {
                 const includeOutput = (!negate && !!value) || (negate && !!!value);
-                i = compile(tokens, includeOutput ? output : [], ctx, i + 1, t);
+                i = compile(tokens, includeOutput ? output : [], ctx, opt, i + 1, t);
+            }
+        }
+        else if (tokens[i].startsWith(">")) {
+            const t = tokens[i].slice(1).trim();
+            if (typeof opt?.partials?.[t] === "string") {
+                compile(opt.partials[t].split(tags), output, ctx, opt, 0, "");
             }
         }
         else if (tokens[i].startsWith("/")) {
@@ -52,7 +59,7 @@ const compile = (tokens, output, ctx, index, section) => {
     return i;
 };
 
-export default (str, ctx = {}, output = []) => {
-    compile(str.split(/\{\{|\}\}/), output, ctx, 0, "");
+export default (str, ctx = {}, opt = {}, output = []) => {
+    compile(str.split(tags), output, ctx, opt, 0, "");
     return output.join("");
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "mikel",
-    "description": "Micro mustache implementation with zero dependencies",
-    "version": "0.2.1",
+    "description": "Micro templating library with zero dependencies",
+    "version": "0.3.0",
     "type": "module",
     "author": {
         "name": "Josemi Juanes",