mikel 0.4.0 → 0.6.0

package/README.md

@@ -199,11 +199,46 @@ const data = {
 console.log(m("{{#unless isAdmin}}Hello guest{{/unless}}", data)); // --> 'Hello guest'
 ```
 
-### At-Variables
+### Custom Helpers
+
+> Added in `v0.5.0`.
+
+Custom helpers should be provided as an object in the `options.helpers` field, where each key represents the name of the helper and the corresponding value is a function defining the helper's behavior.
+
+Example:
+
+```javascript
+const template = "{{#greeting name}}{{/greeting}}";
+const data = {
+    name: "World!",
+};
+const options = {
+    helpers: {
+        customHelper: ({context, value, key, options, fn}) => {
+            return `Hello, ${value}!`;
+        },
+    },
+};
+
+const result = m(template, data, options);
+console.log(result); // Output: "Hello, World!"
+```
+
+Custom helper functions receive a single object parameter containing the following fields:
+
+- `context`: The current context (data) where the helper has been executed.
+- `value`: The current value passed to the helper.
+- `key`: The field used to extract the value from the current context.
+- `options`: The global options object.
+- `fn`: A function that executes the template provided in the helper block and returns a string with the evaluated template in the provided context.
+
+The helper function must return a string, which will be injected into the result string.
+
+### Variables
 
 > Added in `v0.4.0`.
 
-At-Variables in Mikel provide convenient access to special values within your templates. These variables, denoted by the `@` symbol, allow users to interact with specific data contexts or values.
+Data Variables in Mikel provide convenient access to special values within your templates. These variables, denoted by the `@` symbol, allow users to interact with specific data contexts or values.
 
 #### @root
 
@@ -231,10 +266,30 @@ The `@key` variable allows users to retrieve the current key of the object entry
 
 The `@value` variable allows users to retrieve the current value of the object entry when iterating over an object using the `#each` helper. It simplifies access to object values for dynamic rendering and data manipulation.
 
+### Custom variables
+
+> Added in `v0.5.0`
+
+Mikel allows users to define custom data variables, providing enhanced flexibility and customization options for templates. These custom data variables can be accessed within the template using the `@` character.
+
+Custom data variables should be provided in the `options.variables` field of the options object when rendering a template. Each custom data variable should be defined as a key-value pair, where the key represents the variable name and the value represents the data associated with that variable.
+
+Example:
+
+```javascript
+const result = m("Hello, {{@customVariable}}!", {}, {
+    variables: {
+        customVariable: "World",
+    },
+});
+console.log(result); // --> 'Hello, World!'
+```
+
+In this example, the custom data variable `customVariable` is defined with the value `"World"`, and it can be accessed in the template using `@customVariable`.
 
 ## API
 
-### `m(template, data[, options])`
+### `mikel(template, data[, options])`
 
 Render the given template string with the provided data object.
 
@@ -242,20 +297,30 @@ Render the given template string with the provided data object.
 - `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.
+    - `variables` (object): An object containing custom data variables.
+    - `helpers` (object): An object containing custom helpers.
 
 Returns: A string with the rendered output.
 
 ```javascript
-import m from "mikel";
+import mikel from "mikel";
 
 const data = {
     name: "World",
 };
 
-const result = m("Hello, {{name}}!", data);
+const result = mikel("Hello, {{name}}!", data);
 console.log(result); // Output: "Hello, World!"
 ```
 
+### `mikel.escape(str)`
+
+This function converts special HTML characters `&`, `<`, `>`, `"`, and `'` to their corresponding HTML entities.
+
+### `mikel.get(object, path)`
+
+This function returns the value in `object` following the provided `path` string.
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE).

package/index.js

@@ -7,50 +7,47 @@ const escapedChars = {
     "'": "'",
 };
 
-const escape = str => {
-    return str.toString().replace(/[&<>\"']/g, m => escapedChars[m]);
-};
+const escape = s => s.toString().replace(/[&<>\"']/g, m => escapedChars[m]);
 
-const get = (ctx, path) => {
-    return (path === "." ? ctx : path.split(".").reduce((p, k) => p?.[k], ctx)) ?? "";
-};
+const get = (c, p) => (p === "." ? c : p.split(".").reduce((x, k) => x?.[k], c)) ?? "";
 
-const helpers = new Map(Object.entries({
-    "#each": (value, options) => {
+const defaultHelpers = {
+    "each": ({value, fn}) => {
         return (typeof value === "object" ? Object.entries(value || {}) : [])
-            .map((item, index) => options.fn(item[1], {index: index, key: item[0], value: item[1]}))
+            .map((item, index) => fn(item[1], {index: index, key: item[0], value: item[1]}))
             .join("");
     },
-    "#if": (value, options) => !!value ? options.fn(options.context) : "",
-    "#unless": (value, options) => !!!value ? options.fn(options.context) : "",
-}));
+    "if": ({value, fn, context}) => !!value ? fn(context) : "",
+    "unless": ({value, fn, context}) => !!!value ? fn(context) : "",
+};
 
-const compile = (tokens, output, context, opt, index = 0, section = "", vars = {}) => {
+const compile = (tokens, output, context, partials, helpers, vars, index = 0, section = "") => {
     let i = index;
     while (i < tokens.length) {
         if (i % 2 === 0) {
             output.push(tokens[i]);
         }
         else if (tokens[i].startsWith("@")) {
-            output.push(get(vars || {}, tokens[i].slice(1).trim() ?? "_") ?? "");
+            output.push(get(vars, tokens[i].slice(1).trim() ?? "_") ?? "");
         }
         else if (tokens[i].startsWith("!")) {
             output.push(get(context, tokens[i].slice(1).trim()));
         }
-        else if (tokens[i].startsWith("#") && helpers.has(tokens[i].trim().split(" ")[0])) {
+        else if (tokens[i].startsWith("#") && typeof helpers[tokens[i].slice(1).trim().split(" ")[0]] === "function") {
             const [t, v] = tokens[i].slice(1).trim().split(" ");
             const j = i + 1;
-            output.push(helpers.get("#" + t)(get(context, v), {
+            output.push(helpers[t]({
                 context: context,
-                globalOptions: opt,
+                key: v || ".",
+                value: get(context, v || "."),
                 fn: (blockContext = {}, blockVars = {}, blockOutput = []) => {
-                    i = compile(tokens, blockOutput, blockContext, opt, j, t, {root: vars.root, ...blockVars});
+                    i = compile(tokens, blockOutput, blockContext, partials, helpers, {...vars, ...blockVars, root: vars.root}, j, t);
                     return blockOutput.join("");
                 },
             }));
             // Make sure that this block has been executed
             if (i + 1 === j) {
-                i = compile(tokens, [], {}, opt, j, t, vars);
+                i = compile(tokens, [], {}, partials, helpers, vars, j, t);
             }
         }
         else if (tokens[i].startsWith("#") || tokens[i].startsWith("^")) {
@@ -60,18 +57,18 @@ const compile = (tokens, output, context, opt, index = 0, section = "", vars = {
             if (!negate && value && Array.isArray(value)) {
                 const j = i + 1;
                 (value.length > 0 ? value : [""]).forEach(item => {
-                    i = compile(tokens, value.length > 0 ? output : [], item, opt, j, t, vars);
+                    i = compile(tokens, value.length > 0 ? output : [], item, partials, helpers, vars, j, t);
                 });
             }
             else {
                 const includeOutput = (!negate && !!value) || (negate && !!!value);
-                i = compile(tokens, includeOutput ? output : [], context, opt, i + 1, t, vars);
+                i = compile(tokens, includeOutput ? output : [], context, partials, helpers, vars, i + 1, t);
             }
         }
         else if (tokens[i].startsWith(">")) {
             const [t, v] = tokens[i].slice(1).trim().split(" ");
-            if (typeof opt?.partials?.[t] === "string") {
-                compile(opt.partials[t].split(tags), output, v ? get(context, v) : context, opt, 0, "", vars);
+            if (typeof partials[t] === "string") {
+                compile(partials[t].split(tags), output, v ? get(context, v) : context, partials, helpers, vars, 0, "");
             }
         }
         else if (tokens[i].startsWith("/")) {
@@ -88,7 +85,17 @@ const compile = (tokens, output, context, opt, index = 0, section = "", vars = {
     return i;
 };
 
-export default (str, context = {}, opt = {}, output = []) => {
-    compile(str.split(tags), output, context, opt, 0, "", {root: context});
+// @description main compiler function
+const mikel = (str, context = {}, opt = {}, output = []) => {
+    const partials = Object.assign({}, opt.partials || {});
+    const helpers = Object.assign({}, defaultHelpers, opt.helpers || {});
+    const variables = Object.assign({}, opt.variables || {}, {root: context});
+    compile(str.split(tags), output, context, partials, helpers, variables, 0, "");
     return output.join("");
 };
+
+// @description assign utilities
+mikel.escape = escape;
+mikel.get = get;
+
+export default mikel;

package/package.json

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