ventojs 1.15.0 → 2.0.0-canary.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## 2.0.0 - Unreleased
+Vento 2.0 is now dependency-free and compatible with browsers without requiring a build process.
+
+### Added
+- Build-less browser support.
+- `plugins/mod.ts` module to register all default plugins easily.
+
+### Changed
+- Renamed `src` directory to `core`.
+- Moved all loaders to the `loaders` root directory.
+- Implemented a different approach to resolve the variables without using `meriyah` to analyze the code. [#128]
+
+### Removed
+- Deprecated option `useWith`.
+- All extenal dependencies (`meriyah`, `estree`, etc).
+- `bare.ts` file since now it's useless.
+
+[#128]: https://github.com/ventojs/vento/issues/128

package/README.md

@@ -20,6 +20,8 @@ Nunjucks, Liquid, Mustache, and EJS.
 ## Features
 
 - Minimal, fast runtime. 🔥
+- No dependencies.
+- Compatible with browsers and JS runtimes (Deno, Node, Bun, etc).
 - Ergonomic by design. All tags and outputs are written with `{{` and `}}`.
 - Write JavaScript anywhere. `{{ await user.getName() }}` is real JS executed at
   runtime.

package/browser.js

@@ -0,0 +1,19 @@
+import { Environment } from "./core/environment.js";
+import { UrlLoader } from "./loaders/url.js";
+import defaultPlugins from "./plugins/mod.js";
+export default function (options) {
+    // Determine the loader based on the includes option
+    const loader = options.includes instanceof URL
+        ? new UrlLoader(options.includes)
+        : options.includes;
+    // Create a new Environment instance with the provided options
+    const env = new Environment({
+        loader,
+        dataVarname: options.dataVarname || "it",
+        autoescape: options.autoescape ?? false,
+        autoDataVarname: options.autoDataVarname ?? true,
+    });
+    // Register the default plugins
+    env.use(defaultPlugins());
+    return env;
+}

package/{esm/src → core}/environment.js

@@ -1,8 +1,6 @@
-import "../_dnt.polyfills.js";
-import * as dntShim from "../_dnt.shims.js";
+import iterateTopLevel from "./js.js";
 import tokenize from "./tokenizer.js";
-import { transformTemplateCode } from "./transformer.js";
-import { TemplateError, TransformError } from "./errors.js";
+import { TemplateError } from "./errors.js";
 export class Environment {
     cache = new Map();
     options;
@@ -47,14 +45,16 @@ export class Environment {
         let code = this.compileTokens(tokens).join("\n");
         const { dataVarname, autoDataVarname } = this.options;
         if (autoDataVarname) {
-            try {
-                code = transformTemplateCode(code, dataVarname);
-            }
-            catch (cause) {
-                if (cause instanceof TransformError) {
-                    throw new TemplateError(path, source, cause.position, cause);
-                }
-                throw new Error(`Unknown error while transforming ${path}`, { cause });
+            const generator = iterateTopLevel(code);
+            const [, , variables] = generator.next().value;
+            while (!generator.next().done)
+                ;
+            variables.delete(dataVarname);
+            if (variables.size > 0) {
+                code = `
+          var {${[...variables].join(",")}} = ${dataVarname};
+          {\n${code}\n}
+        `;
             }
         }
         const constructor = new Function("__file", "__env", "__defaults", "__err", `return${sync ? "" : " async"} function (${dataVarname}) {
@@ -65,7 +65,7 @@ export class Environment {
           ${code}
           return __exports;
         } catch (cause) {
-          const template = __env.cache.get(__file);
+          const template = ${sync ? "" : "await"} __env.cache.get(__file);
           throw new __err(__file, template?.source, __pos, cause);
         }
       }
@@ -171,14 +171,15 @@ export class Environment {
     }
 }
 function isGlobal(name) {
-    // @ts-ignore TS doesn't know about globalThis
-    if (Object.hasOwn(dntShim.dntGlobalThis, name)) {
+    if (name == "name")
+        return false;
+    if (Object.hasOwn(globalThis, name)) {
         return true;
     }
     if (name.includes(".")) {
         const [obj, prop] = name.split(".");
         // @ts-ignore TS doesn't know about globalThis
-        return Object.hasOwn(dntShim.dntGlobalThis[obj], prop);
+        return Object.hasOwn(globalThis[obj], prop);
     }
 }
 // deno-lint-ignore no-explicit-any

package/{esm/src → core}/errors.js

@@ -1,4 +1,3 @@
-import "../_dnt.polyfills.js";
 class VentoBaseError extends Error {
     name = this.constructor.name;
 }
@@ -14,13 +13,6 @@ export class TemplateError extends VentoBaseError {
         this.position = position;
     }
 }
-export class TransformError extends VentoBaseError {
-    position;
-    constructor(message, position = 0, cause) {
-        super(message, { cause });
-        this.position = position;
-    }
-}
 /** Returns the number and code of the errored line */
 export function errorLine(source, position) {
     let line = 1;

package/{esm/src → core}/js.js

@@ -1,17 +1,19 @@
-import "../_dnt.polyfills.js";
+import reserved from "./reserved.js";
 const TEMPLATE_PART = /[`}](?:\\?[^])*?(?:`|\${)/y;
 const REGEX_LITERAL_START = /(?<=[(=:,?&!]\s*)\//y;
-const STOPPING_POINT = /['"`{}[\]/|]/g;
+const STOPPING_POINT = /['"`{}[\]/|]|((?<!\.\??)\b[a-zA-Z_]\w+)/g;
 /**
- * This function iterates over the top-level scope of a JavaScript source code string.
- * It yields pairs of the index and the type of each top-level element found.
+ * This function iterates over the top-level scope of a JavaScript source code
+ * string. It yields pairs of the index and the type of each top-level element
+ * found.
  *
  * @example `{ foo: { bar: 1 } }` will yield:
- * - [0, "{"] for the opening brace
- * - [18, "}"] for the closing brace
- * - [18, ""] for the end of the string
+ * - [0, "{", Set[]]                for the first opening brace
+ * - [18, "}", Set['foo', 'bar']]   for the _second_ closing brace
+ * - [18, "", Set['foo', 'bar']]    for the end of the string
  */
 export default function* iterateTopLevel(source, start = 0) {
+    const variables = new Set();
     let cursor = start;
     let depth = -1;
     const brackets = [];
@@ -25,7 +27,13 @@ export default function* iterateTopLevel(source, start = 0) {
             break parsing;
         }
         cursor = match.index;
-        const [stop] = match;
+        const [stop, variable] = match;
+        if (variable) {
+            cursor += variable.length;
+            if (!reserved.has(variable))
+                variables.add(variable);
+            continue;
+        }
         // Check the type of the stopping point.
         switch (stop) {
             case "|": {
@@ -33,7 +41,7 @@ export default function* iterateTopLevel(source, start = 0) {
                 // It's a pipe `|>` in the top-level scope
                 if (depth < 0 && source[cursor] === ">") {
                     cursor++;
-                    yield [cursor - 2, "|>"];
+                    yield [cursor - 2, "|>", variables];
                 }
                 break;
             }
@@ -58,7 +66,7 @@ export default function* iterateTopLevel(source, start = 0) {
             case "{": {
                 // It's an opening brace: yield if it's in the top-level scope.
                 if (depth < 0)
-                    yield [cursor, "{"];
+                    yield [cursor, "{", variables];
                 cursor++;
                 // Handle `{}`
                 if (source[cursor] == "}")
@@ -71,7 +79,7 @@ export default function* iterateTopLevel(source, start = 0) {
             case "[": {
                 // It's an opening brace: yield if it's in the top-level scope.
                 if (depth < 0)
-                    yield [cursor, "["];
+                    yield [cursor, "[", variables];
                 cursor++;
                 // Handle `[]`
                 if (source[cursor] == "]")
@@ -87,7 +95,7 @@ export default function* iterateTopLevel(source, start = 0) {
                     depth--;
                 // Yield if it's in the top-level scope.
                 if (depth < 0)
-                    yield [cursor, "]"];
+                    yield [cursor, "]", variables];
                 cursor++;
                 break;
             }
@@ -97,13 +105,13 @@ export default function* iterateTopLevel(source, start = 0) {
                     depth--;
                     // Yield if it's in the top-level scope.
                     if (depth < 0)
-                        yield [cursor, "}"];
+                        yield [cursor, "}", variables];
                     cursor++;
                     break;
                 }
                 // If it doesn't match, but we're in the top-level scope, yield anyway.
                 if (depth < 0) {
-                    yield [cursor, "}"];
+                    yield [cursor, "}", variables];
                     cursor++;
                     break;
                 }
@@ -179,5 +187,5 @@ export default function* iterateTopLevel(source, start = 0) {
             }
         }
     }
-    return [max, ""];
+    return [max, "", variables];
 }

package/core/reserved.js

@@ -0,0 +1,63 @@
+const variables = new Set([
+    // Words reserved by Vento, used internally. In general, don't use variable
+    // names starting with two underscores to be future-proof and avoid clashes.
+    "__file",
+    "__env",
+    "__defaults",
+    "__err",
+    "__exports",
+    "__pos",
+    "__tmp",
+    // JS reserved words, and some "dangerous" words like `let`, `async`, `of` or
+    // `undefined`, which aren't technically reserved but don't name your
+    // variables that.
+    "async",
+    "await",
+    "break",
+    "case",
+    "catch",
+    "class",
+    "const",
+    "continue",
+    "debugger",
+    "default",
+    "delete",
+    "do",
+    "else",
+    "enum",
+    "export",
+    "extends",
+    "false",
+    "finally",
+    "for",
+    "function",
+    "if",
+    "import",
+    "in",
+    "instanceof",
+    "let",
+    "new",
+    "null",
+    "of",
+    "return",
+    "super",
+    "switch",
+    "this",
+    "throw",
+    "true",
+    "try",
+    "typeof",
+    "undefined",
+    "var",
+    "void",
+    "while",
+    "with",
+    "yield",
+    // Variables that are already defined globally
+    ...Object.getOwnPropertyNames(globalThis),
+]);
+// Remove `name` from the reserved variables
+// because it's widely used in templates
+// and it can cause issues if it's reserved.
+variables.delete("name");
+export default variables;

package/{esm/src → core}/tokenizer.js

@@ -1,4 +1,3 @@
-import "../_dnt.polyfills.js";
 import iterateTopLevel from "./js.js";
 export default function tokenize(source) {
     const tokens = [];

package/highlightjs-vento.js

@@ -0,0 +1,24 @@
+/** @type LanguageFn */
+export default function (hljs) {
+  return {
+    name: "vento",
+    subLanguage: "xml",
+    contains: [
+      hljs.COMMENT("{{#", "#}}"),
+      {
+        begin: "{{[-]?",
+        end: "[-]?}}",
+        subLanguage: "javascript",
+        excludeBegin: true,
+        excludeEnd: true,
+      },
+      {
+        begin: "^---\n",
+        end: "\n---\n",
+        subLanguage: "yaml",
+        excludeBegin: true,
+        excludeEnd: true,
+      },
+    ],
+  };
+}

package/{esm/src/loader.js → loaders/file.js}

@@ -1,7 +1,10 @@
-import "../_dnt.polyfills.js";
 import path from "node:path";
 import fs from "node:fs/promises";
 import process from "node:process";
+/**
+ * Vento file loader for loading templates from the file system.
+ * Used by JS runtimes like Node, Deno, and Bun.
+ */
 export class FileLoader {
     #root;
     constructor(root = process.cwd()) {

package/loaders/memory.js

@@ -0,0 +1,24 @@
+import path from "node:path";
+/**
+ * Vento loader for loading templates from an in-memory object.
+ * Used for testing or in-memory operations.
+ */
+export class MemoryLoader {
+    files = {};
+    constructor(files) {
+        this.files = files;
+    }
+    load(file) {
+        if (!(file in this.files)) {
+            throw new Error(`File not found: ${file}`);
+        }
+        const source = this.files[file];
+        return Promise.resolve({ source });
+    }
+    resolve(from, file) {
+        if (file.startsWith(".")) {
+            return path.join(path.dirname(from), file).replace(/\\/g, "/");
+        }
+        return path.join("/", file).replace(/\\/g, "/");
+    }
+}

package/loaders/url.js

@@ -0,0 +1,28 @@
+/**
+ * Vento URL loader for loading templates from a URL.
+ * Used by browser environments.
+ */
+export class UrlLoader {
+    #root;
+    constructor(root) {
+        this.#root = root;
+    }
+    async load(file) {
+        const url = new URL(join(this.#root.pathname, file), this.#root);
+        const source = await (await fetch(url)).text();
+        return { source };
+    }
+    resolve(from, file) {
+        if (file.startsWith(".")) {
+            return join("/", dirname(from), file);
+        }
+        return join("/", file);
+    }
+}
+function join(...parts) {
+    return parts.join("/").replace(/\/+/g, "/");
+}
+function dirname(path) {
+    const lastSlash = path.lastIndexOf("/");
+    return lastSlash === -1 ? "." : path.slice(0, lastSlash);
+}

package/{esm/bare.js → mod.js}

@@ -1,14 +1,19 @@
-import { Environment } from "./src/environment.js";
-import { FileLoader } from "./src/loader.js";
+import { Environment } from "./core/environment.js";
+import { FileLoader } from "./loaders/file.js";
+import defaultPlugins from "./plugins/mod.js";
 export default function (options = {}) {
+    // Determine the loader based on the includes option
     const loader = typeof options.includes === "object"
         ? options.includes
         : new FileLoader(options.includes);
+    // Create a new Environment instance with the provided options
     const env = new Environment({
         loader,
         dataVarname: options.dataVarname || "it",
         autoescape: options.autoescape ?? false,
         autoDataVarname: options.autoDataVarname ?? true,
     });
+    // Register the default plugins
+    env.use(defaultPlugins());
     return env;
 }

package/package.json

@@ -1,92 +1,179 @@
 {
   "name": "ventojs",
-  "version": "1.15.0",
+  "version": "2.0.0-canary.0",
   "description": "🌬 A minimal but powerful template engine",
-  "homepage": "https://vento.js.org/",
-  "repository": "github:oscarotero/vento",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ventojs/vento.git"
+  },
+  "keywords": [
+    "template engine"
+  ],
+  "author": "Óscar Otero",
   "license": "MIT",
-  "bugs": "https://github.com/oscarotero/vento/issues",
-  "module": "./esm/mod.js",
+  "bugs": {
+    "url": "https://github.com/ventojs/vento/issues"
+  },
+  "homepage": "https://vento.js.org/",
   "exports": {
     ".": {
-      "import": "./esm/mod.js"
-    },
-    "./src/environment.js": {
-      "import": "./esm/src/environment.js"
-    },
-    "./src/errors.js": {
-      "import": "./esm/src/errors.js"
-    },
-    "./src/js.js": {
-      "import": "./esm/src/js.js"
-    },
-    "./src/loader.js": {
-      "import": "./esm/src/loader.js"
-    },
-    "./src/tokenizer.js": {
-      "import": "./esm/src/tokenizer.js"
-    },
-    "./src/transformer.js": {
-      "import": "./esm/src/transformer.js"
-    },
-    "./src/url_loader.js": {
-      "import": "./esm/src/url_loader.js"
+      "import": {
+        "types": "./types/mod.d.ts",
+        "default": "./mod.js"
+      }
+    },
+    "./browser.js": {
+      "import": {
+        "types": "./types/browser.d.ts",
+        "default": "./browser.js"
+      }
+    },
+    "./core/environment.js": {
+      "import": {
+        "types": "./types/core/environment.d.ts",
+        "default": "./core/environment.js"
+      }
+    },
+    "./core/errors.js": {
+      "import": {
+        "types": "./types/core/errors.d.ts",
+        "default": "./core/errors.js"
+      }
+    },
+    "./core/js.js": {
+      "import": {
+        "types": "./types/core/js.d.ts",
+        "default": "./core/js.js"
+      }
+    },
+    "./core/reserved.js": {
+      "import": {
+        "types": "./types/core/reserved.d.ts",
+        "default": "./core/reserved.js"
+      }
+    },
+    "./core/tokenizer.js": {
+      "import": {
+        "types": "./types/core/tokenizer.d.ts",
+        "default": "./core/tokenizer.js"
+      }
+    },
+    "./highlightjs-vento.js": "./highlightjs-vento.js",
+    "./loaders/file.js": {
+      "import": {
+        "types": "./types/loaders/file.d.ts",
+        "default": "./loaders/file.js"
+      }
+    },
+    "./loaders/memory.js": {
+      "import": {
+        "types": "./types/loaders/memory.d.ts",
+        "default": "./loaders/memory.js"
+      }
+    },
+    "./loaders/url.js": {
+      "import": {
+        "types": "./types/loaders/url.d.ts",
+        "default": "./loaders/url.js"
+      }
+    },
+    "./mod.js": {
+      "import": {
+        "types": "./types/mod.d.ts",
+        "default": "./mod.js"
+      }
     },
     "./plugins/auto_trim.js": {
-      "import": "./esm/plugins/auto_trim.js"
+      "import": {
+        "types": "./types/plugins/auto_trim.d.ts",
+        "default": "./plugins/auto_trim.js"
+      }
     },
     "./plugins/echo.js": {
-      "import": "./esm/plugins/echo.js"
+      "import": {
+        "types": "./types/plugins/echo.d.ts",
+        "default": "./plugins/echo.js"
+      }
     },
     "./plugins/escape.js": {
-      "import": "./esm/plugins/escape.js"
+      "import": {
+        "types": "./types/plugins/escape.d.ts",
+        "default": "./plugins/escape.js"
+      }
     },
     "./plugins/export.js": {
-      "import": "./esm/plugins/export.js"
+      "import": {
+        "types": "./types/plugins/export.d.ts",
+        "default": "./plugins/export.js"
+      }
     },
     "./plugins/for.js": {
-      "import": "./esm/plugins/for.js"
+      "import": {
+        "types": "./types/plugins/for.d.ts",
+        "default": "./plugins/for.js"
+      }
     },
     "./plugins/function.js": {
-      "import": "./esm/plugins/function.js"
+      "import": {
+        "types": "./types/plugins/function.d.ts",
+        "default": "./plugins/function.js"
+      }
     },
     "./plugins/if.js": {
-      "import": "./esm/plugins/if.js"
+      "import": {
+        "types": "./types/plugins/if.d.ts",
+        "default": "./plugins/if.js"
+      }
     },
     "./plugins/import.js": {
-      "import": "./esm/plugins/import.js"
+      "import": {
+        "types": "./types/plugins/import.d.ts",
+        "default": "./plugins/import.js"
+      }
     },
     "./plugins/include.js": {
-      "import": "./esm/plugins/include.js"
+      "import": {
+        "types": "./types/plugins/include.d.ts",
+        "default": "./plugins/include.js"
+      }
     },
     "./plugins/js.js": {
-      "import": "./esm/plugins/js.js"
+      "import": {
+        "types": "./types/plugins/js.d.ts",
+        "default": "./plugins/js.js"
+      }
     },
     "./plugins/layout.js": {
-      "import": "./esm/plugins/layout.js"
+      "import": {
+        "types": "./types/plugins/layout.d.ts",
+        "default": "./plugins/layout.js"
+      }
+    },
+    "./plugins/mod.js": {
+      "import": {
+        "types": "./types/plugins/mod.d.ts",
+        "default": "./plugins/mod.js"
+      }
     },
     "./plugins/set.js": {
-      "import": "./esm/plugins/set.js"
+      "import": {
+        "types": "./types/plugins/set.d.ts",
+        "default": "./plugins/set.js"
+      }
     },
     "./plugins/trim.js": {
-      "import": "./esm/plugins/trim.js"
+      "import": {
+        "types": "./types/plugins/trim.d.ts",
+        "default": "./plugins/trim.js"
+      }
     },
     "./plugins/unescape.js": {
-      "import": "./esm/plugins/unescape.js"
-    }
-  },
-  "scripts": {
-    "test": "node test_runner.js"
-  },
-  "dependencies": {
-    "estree-walker": "3.0.3",
-    "meriyah": "6.0.5"
-  },
-  "devDependencies": {
-    "@types/node": "^20.9.0",
-    "picocolors": "^1.0.0",
-    "@deno/shim-deno": "~0.18.0",
-    "@types/estree": "1.0.5"
-  },
-  "_generatedBy": "dnt@dev"
+      "import": {
+        "types": "./types/plugins/unescape.d.ts",
+        "default": "./plugins/unescape.js"
+      }
+    },
+    "./prism-vento.js": "./prism-vento.js"
+  }
 }

package/{esm/plugins → plugins}/auto_trim.js

@@ -1,4 +1,3 @@
-import "../_dnt.polyfills.js";
 export const defaultTags = [
     ">",
     "#",

package/{esm/plugins → plugins}/echo.js

@@ -1,4 +1,3 @@
-import "../_dnt.polyfills.js";
 export default function () {
     return (env) => {
         env.tags.push(echoTag);