@itrocks/template 0.0.42 → 0.1.1

package/README.md

@@ -410,6 +410,11 @@ Any expression starting with `/`, `./` or `../` is considered a template include
 </div>
 ```
 
+The path prefix defines how the file location is resolved:
+- `./` refers to the directory of the current template file
+- `../` refers to the parent directory of the current template file
+- `/` refers to the root of the current project (not the filesystem root)
+
 The default contextual data is the one in the current scope.
 
 You can pass parent or sub-data to your included template as an alternative context:

package/cjs/template.d.ts

@@ -19,6 +19,12 @@ type Open = '(' | '{';
 export type VariableParser = [parser: string, (variable: string, data: any) => any];
 export declare const frontScripts: SortedArray<string>;
 export declare function templateDependsOn(dependencies: Partial<Dependencies>): void;
+export declare class HtmlResponse {
+    html: string;
+    dependencies: string[];
+    constructor(html: string, ...dependencies: string[]);
+    toString(): string;
+}
 export declare class Template {
     data?: any;
     containerData?: any;
@@ -65,6 +71,7 @@ export declare class Template {
     closeTag(shouldInLiteral: boolean, targetIndex: number): boolean;
     combineLiterals(text: string, parts?: string[]): string;
     debugEvents(): void;
+    embedHtmlResponse(htmlResponse: HtmlResponse): void;
     getCleanContext(): {
         addLinks: SortedArray<string>;
         doHeadLinks: boolean;
@@ -101,6 +108,7 @@ export declare class Template {
         targetStack: string[];
     };
     include(path: string, data: any): Promise<string>;
+    includePath(filePath: string): string;
     isContextClean(): boolean;
     literalTarget(index: number, isTitle?: boolean): void;
     parseBuffer(buffer: string): Promise<string>;

package/cjs/template.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Template = exports.frontScripts = exports.depends = void 0;
+exports.Template = exports.HtmlResponse = exports.frontScripts = exports.depends = void 0;
 exports.templateDependsOn = templateDependsOn;
 const app_dir_1 = require("@itrocks/app-dir");
 const rename_1 = require("@itrocks/rename");
@@ -17,6 +17,16 @@ exports.frontScripts.distinct = true;
 function templateDependsOn(dependencies) {
     Object.assign(exports.depends, dependencies);
 }
+class HtmlResponse {
+    html;
+    dependencies;
+    constructor(html, ...dependencies) {
+        this.html = html;
+        this.dependencies = dependencies;
+    }
+    toString() { return this.html; }
+}
+exports.HtmlResponse = HtmlResponse;
 class Template {
     data;
     containerData;
@@ -119,6 +129,28 @@ class Template {
         this.onTagOpened = (name) => console.log('tag.opened =', name);
         this.onTagClose = (name) => console.log('tag.closed =', name);
     }
+    embedHtmlResponse(htmlResponse) {
+        for (let dependency of htmlResponse.dependencies) {
+            if (dependency[0] === '<') {
+                const script = dependency.match(/<script[^>]*\bsrc=["']([^"']+)["']/i)?.[1];
+                if (script) {
+                    exports.frontScripts.insert(script);
+                }
+                this.headLinks.insert(dependency);
+                continue;
+            }
+            dependency = (0, node_path_1.normalize)(dependency).slice(app_dir_1.appDir.length);
+            switch (dependency.slice(dependency.lastIndexOf('.') + 1)) {
+                case 'css':
+                    this.headLinks.insert('<link href="' + dependency + '" rel="stylesheet">');
+                    continue;
+                case 'js':
+                    exports.frontScripts.insert(dependency);
+                    this.headLinks.insert('<script src="' + dependency + '" type="module"></script>');
+                    continue;
+            }
+        }
+    }
     getCleanContext() {
         const addLinks = new sorted_array_1.SortedArray;
         const doneLinks = new sorted_array_1.SortedArray;
@@ -194,6 +226,11 @@ class Template {
             ? parsed.slice(beginPosition + 12, (endPosition > -1) ? endPosition : parsed.length)
             : parsed;
     }
+    includePath(filePath) {
+        return (filePath[0] === '/')
+            ? (app_dir_1.appDir + ((filePath[1] === '@') ? '/node_modules' : '') + filePath)
+            : filePath;
+    }
     isContextClean() {
         const clean = this.getCleanContext();
         const context = this.getContext();
@@ -369,13 +406,13 @@ class Template {
                     expressionEnd--;
                 }
                 const blockStack = this.blockStack;
-                return this.include(expression.slice(0, expressionEnd), blockStack[blockStack.length - blockBack].data);
+                return this.include(this.includePath(expression.slice(0, expressionEnd)), blockStack[blockStack.length - blockBack].data);
             }
             if (expression[expressionEnd] === ')') {
                 const openPosition = expression.lastIndexOf('(');
-                return this.include(expression.slice(0, openPosition), await this.parsePath(expression.slice(openPosition + 1, expression.length - 1), data));
+                return this.include(this.includePath(expression.slice(0, openPosition)), await this.parsePath(expression.slice(openPosition + 1, expression.length - 1), data));
             }
-            return this.include(expression, data);
+            return this.include(this.includePath(expression), data);
         }
         let onlyDots = true;
         for (const c of expression) {
@@ -396,6 +433,9 @@ class Template {
         for (const variable of expression.split('.')) {
             data = await this.parseVariable(variable, data);
         }
+        if (data instanceof HtmlResponse) {
+            this.embedHtmlResponse(data);
+        }
         return data;
     }
     async parseVariable(variable, data) {

package/esm/template.d.ts

@@ -19,6 +19,12 @@ type Open = '(' | '{';
 export type VariableParser = [parser: string, (variable: string, data: any) => any];
 export declare const frontScripts: SortedArray<string>;
 export declare function templateDependsOn(dependencies: Partial<Dependencies>): void;
+export declare class HtmlResponse {
+    html: string;
+    dependencies: string[];
+    constructor(html: string, ...dependencies: string[]);
+    toString(): string;
+}
 export declare class Template {
     data?: any;
     containerData?: any;
@@ -65,6 +71,7 @@ export declare class Template {
     closeTag(shouldInLiteral: boolean, targetIndex: number): boolean;
     combineLiterals(text: string, parts?: string[]): string;
     debugEvents(): void;
+    embedHtmlResponse(htmlResponse: HtmlResponse): void;
     getCleanContext(): {
         addLinks: SortedArray<string>;
         doHeadLinks: boolean;
@@ -101,6 +108,7 @@ export declare class Template {
         targetStack: string[];
     };
     include(path: string, data: any): Promise<string>;
+    includePath(filePath: string): string;
     isContextClean(): boolean;
     literalTarget(index: number, isTitle?: boolean): void;
     parseBuffer(buffer: string): Promise<string>;

package/esm/template.js

@@ -13,6 +13,15 @@ frontScripts.distinct = true;
 export function templateDependsOn(dependencies) {
     Object.assign(depends, dependencies);
 }
+export class HtmlResponse {
+    html;
+    dependencies;
+    constructor(html, ...dependencies) {
+        this.html = html;
+        this.dependencies = dependencies;
+    }
+    toString() { return this.html; }
+}
 export class Template {
     data;
     containerData;
@@ -115,6 +124,28 @@ export class Template {
         this.onTagOpened = (name) => console.log('tag.opened =', name);
         this.onTagClose = (name) => console.log('tag.closed =', name);
     }
+    embedHtmlResponse(htmlResponse) {
+        for (let dependency of htmlResponse.dependencies) {
+            if (dependency[0] === '<') {
+                const script = dependency.match(/<script[^>]*\bsrc=["']([^"']+)["']/i)?.[1];
+                if (script) {
+                    frontScripts.insert(script);
+                }
+                this.headLinks.insert(dependency);
+                continue;
+            }
+            dependency = normalize(dependency).slice(appDir.length);
+            switch (dependency.slice(dependency.lastIndexOf('.') + 1)) {
+                case 'css':
+                    this.headLinks.insert('<link href="' + dependency + '" rel="stylesheet">');
+                    continue;
+                case 'js':
+                    frontScripts.insert(dependency);
+                    this.headLinks.insert('<script src="' + dependency + '" type="module"></script>');
+                    continue;
+            }
+        }
+    }
     getCleanContext() {
         const addLinks = new SortedArray;
         const doneLinks = new SortedArray;
@@ -190,6 +221,11 @@ export class Template {
             ? parsed.slice(beginPosition + 12, (endPosition > -1) ? endPosition : parsed.length)
             : parsed;
     }
+    includePath(filePath) {
+        return (filePath[0] === '/')
+            ? (appDir + ((filePath[1] === '@') ? '/node_modules' : '') + filePath)
+            : filePath;
+    }
     isContextClean() {
         const clean = this.getCleanContext();
         const context = this.getContext();
@@ -365,13 +401,13 @@ export class Template {
                     expressionEnd--;
                 }
                 const blockStack = this.blockStack;
-                return this.include(expression.slice(0, expressionEnd), blockStack[blockStack.length - blockBack].data);
+                return this.include(this.includePath(expression.slice(0, expressionEnd)), blockStack[blockStack.length - blockBack].data);
             }
             if (expression[expressionEnd] === ')') {
                 const openPosition = expression.lastIndexOf('(');
-                return this.include(expression.slice(0, openPosition), await this.parsePath(expression.slice(openPosition + 1, expression.length - 1), data));
+                return this.include(this.includePath(expression.slice(0, openPosition)), await this.parsePath(expression.slice(openPosition + 1, expression.length - 1), data));
             }
-            return this.include(expression, data);
+            return this.include(this.includePath(expression), data);
         }
         let onlyDots = true;
         for (const c of expression) {
@@ -392,6 +428,9 @@ export class Template {
         for (const variable of expression.split('.')) {
             data = await this.parseVariable(variable, data);
         }
+        if (data instanceof HtmlResponse) {
+            this.embedHtmlResponse(data);
+        }
         return data;
     }
     async parseVariable(variable, data) {

package/package.json

@@ -69,5 +69,5 @@
 		"test": "test/test"
 	},
 	"types": "./esm/template.d.ts",
-	"version": "0.0.42"
+	"version": "0.1.1"
 }