tshtml-loader 1.2.1 → 1.3.0

package/lib/export-template.d.ts

@@ -1,2 +1,2 @@
-#!/usr/bin/env node
-export {};
+#!/usr/bin/env node
+export {};

package/lib/export-template.js

@@ -1,42 +1,42 @@
-#!/usr/bin/env node
-"use strict";
-exports.__esModule = true;
-var fs_1 = require("fs");
-var path = require("node:path");
-var index_1 = require("./index");
-// ----------------------------------------------------------------------------------
-if (process.argv.length !== 3) {
-    console.error("Please specify one .tshtml file");
-    process.exit();
-}
-var fileName = process.argv[2];
-var extension = path.extname(fileName).toLowerCase();
-if (extension !== ".tshtml") {
-    console.error("Input file must have .tshtml extension");
-    process.exit();
-}
-var fileNameNoExtension = fileName.substr(0, fileName.length - extension.length);
-var outputFileName = fileNameNoExtension + ".html";
-fs_1.readFile(fileName, { encoding: 'utf-8' }, function (err, data) {
-    if (!err) {
-        // Transform the source
-        var result = index_1.executeTemplate(data, path.join(process.cwd(), "/test.html"));
-        var htmlResult = index_1.templateToString(result.exports["default"]);
-        // Write to destination
-        // process.stdout.write( htmlResult );
-        fs_1.writeFile(outputFileName, htmlResult, {
-            encoding: "utf8",
-            flag: "w"
-        }, function (writeErr) {
-            if (!writeErr) {
-                console.log("File is written: " + outputFileName);
-            }
-            else {
-                console.log("Error writing to the output file " + outputFileName, writeErr);
-            }
-        });
-    }
-    else {
-        console.log("Error reading the input file " + fileName, err);
-    }
-});
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var fs_1 = require("fs");
+var path = require("node:path");
+var index_1 = require("./index");
+// ----------------------------------------------------------------------------------
+if (process.argv.length !== 3) {
+    console.error("Please specify one .tshtml file");
+    process.exit();
+}
+var fileName = process.argv[2];
+var extension = path.extname(fileName).toLowerCase();
+if (extension !== ".tshtml") {
+    console.error("Input file must have .tshtml extension");
+    process.exit();
+}
+var fileNameNoExtension = fileName.substr(0, fileName.length - extension.length);
+var outputFileName = fileNameNoExtension + ".html";
+(0, fs_1.readFile)(fileName, { encoding: 'utf-8' }, function (err, data) {
+    if (!err) {
+        // Transform the source
+        var result = (0, index_1.executeTemplate)(data, path.join(process.cwd(), "/test.html"));
+        var htmlResult = (0, index_1.templateToString)(result.exports.default);
+        // Write to destination
+        // process.stdout.write( htmlResult );
+        (0, fs_1.writeFile)(outputFileName, htmlResult, {
+            encoding: "utf8",
+            flag: "w",
+        }, function (writeErr) {
+            if (!writeErr) {
+                console.log("File is written: ".concat(outputFileName));
+            }
+            else {
+                console.log("Error writing to the output file ".concat(outputFileName), writeErr);
+            }
+        });
+    }
+    else {
+        console.log("Error reading the input file ".concat(fileName), err);
+    }
+});

package/lib/index.d.ts

@@ -1,8 +1,7 @@
-import LoaderContext = webpack.loader.LoaderContext;
-import * as webpack from "webpack";
-export default function (this: LoaderContext, source: string): string;
-export declare function executeTemplate(code: string, fileName: string): {
-    exports: any;
-    dependencies: string[];
-};
-export declare function templateToString(builder: any): string;
+import * as webpack from "webpack";
+export default function (this: webpack.LoaderContext<any>, source: string): string;
+export declare function executeTemplate(code: string, fileName: string): {
+    exports: any;
+    dependencies: string[];
+};
+export declare function templateToString(builder: any): string;

package/lib/index.js

@@ -1,180 +1,195 @@
-"use strict";
-exports.__esModule = true;
-exports.templateToString = exports.executeTemplate = void 0;
-var lodash_1 = require("lodash");
-var ts_node_1 = require("ts-node");
-var fs_1 = require("fs");
-var path_1 = require("path");
-var vm_1 = require("vm");
-var tshtml_1 = require("tshtml");
-require("tsconfig-paths/register"); // Necessary to support @folders resolution by Nodejs
-var Module = require("module");
-// ----------------------------------------------------------------------------------
-//
-function default_1(source) {
-    var _this = this;
-    var result;
-    var htmlResult;
-    var builder;
-    try {
-        result = executeTemplate(source, this.resourcePath);
-        builder = result.exports["default"];
-    }
-    catch (error) {
-        throw new Error("Error executing template: " + error.message + "\n " + error.stack);
-    }
-    if (builder == null) {
-        throw new Error("Template must be exported as \"default\".");
-    }
-    htmlResult = templateToString(builder);
-    // Dependencies
-    var reTestNodeFolder = /[\/\\]node_modules[\/\\]/g;
-    var filteredDependencies = lodash_1.filter(result.dependencies, function (x) { return x.startsWith(_this.rootContext) && !reTestNodeFolder.test(x); });
-    for (var _i = 0, filteredDependencies_1 = filteredDependencies; _i < filteredDependencies_1.length; _i++) {
-        var file = filteredDependencies_1[_i];
-        this.addDependency(file);
-    }
-    return htmlResult;
-}
-exports["default"] = default_1;
-;
-// ----------------------------------------------------------------------------------
-//
-function executeTemplate(code, fileName) {
-    var dirName = path_1.dirname(fileName);
-    var output = compileCode(code, fileName);
-    var script = new vm_1.Script(output, { filename: fileName });
-    var module = new Module(fileName);
-    module.filename = fileName;
-    module.loaded = true;
-    module.paths = Module._nodeModulePaths(dirName);
-    var req = createRequireService(fileName);
-    var sandbox = {
-        __filename: fileName,
-        __dirname: dirName,
-        module: module,
-        exports: module.exports,
-        require: req
-    };
-    script.runInNewContext(sandbox, {
-        filename: fileName
-    });
-    return {
-        exports: sandbox.exports,
-        dependencies: req.dependencies
-    };
-}
-exports.executeTemplate = executeTemplate;
-function templateToString(builder) {
-    if (lodash_1.isString(builder)) {
-        return builder;
-    }
-    else if (typeof (builder) == "function") {
-        return (new builder()).toString();
-    }
-    else if (lodash_1.isArray(builder) || tshtml_1.isTag(builder)) {
-        return tshtml_1.tagToString(builder);
-    }
-    else {
-        return builder.toString();
-    }
-}
-exports.templateToString = templateToString;
-var compilerService;
-/***
- * Compiles given TypeScript code
- * @param code
- * @param fileName
- */
-function compileCode(code, fileName) {
-    var tsFileName = fileName + ".ts";
-    if (compilerService == null) {
-        compilerService = ts_node_1.register({
-            compilerOptions: {
-                module: "CommonJS",
-                target: "es2015"
-            }
-        });
-    }
-    return compilerService.compile(code, tsFileName);
-}
-/***
- * Create a logging wrapper for "require" function.
- * @param fileName
- */
-function createRequireService(fileName) {
-    var req = Module.createRequire(fileName);
-    var cache = req.cache;
-    var dependencies = [];
-    var resolveFn = function (id, options) {
-        return req.resolve(id, options);
-    };
-    resolveFn.paths = req.resolve.paths;
-    var requireFn = function (request) {
-        var filePath;
-        try {
-            filePath = resolveFn(request);
-        }
-        catch (error) {
-            // Likely file doesn't exist, so short circuit to the default implementation
-            return req(request);
-        }
-        // Try to get the module from cache and check it's modification time
-        var module = cache[filePath];
-        if (module != null) {
-            cleanOutdatedModules(module, {});
-        }
-        var result = req(request);
-        // Store last modification date
-        var allFiles = {};
-        storeModuleTimes(cache[filePath], allFiles);
-        // Store request to the dependency resolution log
-        dependencies.push.apply(dependencies, lodash_1.keys(allFiles));
-        return result;
-    };
-    requireFn.resolve = resolveFn;
-    requireFn.cache = cache;
-    requireFn.extensions = req.extensions;
-    requireFn.main = req.main;
-    requireFn.dependencies = dependencies;
-    return requireFn;
-    // ---
-    function cleanOutdatedModules(module, allFiles) {
-        allFiles[module.filename] = true;
-        var doClean = false;
-        // If the module file was modified since last access -> remove it from the cache
-        if (module.fileLastModified != null) {
-            var moduleTime = fs_1.statSync(module.filename).mtimeMs;
-            if (module.fileLastModified != moduleTime) {
-                doClean = true;
-            }
-        }
-        // Check if any child module is outdated
-        for (var _i = 0, _a = module.children; _i < _a.length; _i++) {
-            var childModule = _a[_i];
-            if (allFiles[childModule.filename] || !checkFilename(childModule.filename))
-                continue;
-            doClean = cleanOutdatedModules(childModule, allFiles) || doClean;
-        }
-        if (doClean) {
-            delete cache[module.filename];
-        }
-        return doClean;
-    }
-    function storeModuleTimes(module, allFiles) {
-        allFiles[module.filename] = true;
-        if (module.fileLastModified == null) {
-            module.fileLastModified = fs_1.statSync(module.filename).mtimeMs;
-        }
-        var childModule;
-        for (var _i = 0, _a = module.children; _i < _a.length; _i++) {
-            childModule = _a[_i];
-            if (allFiles[childModule.filename] || !checkFilename(childModule.filename))
-                continue;
-            storeModuleTimes(childModule, allFiles);
-        }
-    }
-    function checkFilename(filename) {
-        return filename.indexOf("\\node_modules\\") === -1;
-    }
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+exports.executeTemplate = executeTemplate;
+exports.templateToString = templateToString;
+var lodash_1 = require("lodash");
+var ts_node_1 = require("ts-node");
+var fs_1 = require("fs");
+var path_1 = require("path");
+var vm_1 = require("vm");
+var webpack = require("webpack");
+var tshtml_1 = require("tshtml");
+require("tsconfig-paths/register"); // Necessary to support @folders resolution by Nodejs
+var Module = require("module");
+// ----------------------------------------------------------------------------------
+// tshtml-loader implementation
+function default_1(source) {
+    var _this = this;
+    var result;
+    var htmlResult;
+    var builder;
+    try {
+        result = executeTemplate(source, this.resourcePath);
+        builder = result.exports.default;
+    }
+    catch (error) {
+        throw new Error("Error executing template: ".concat(error.message, "\n ").concat(error.stack));
+    }
+    if (builder == null) {
+        throw new Error("Template must be exported as \"default\".");
+    }
+    htmlResult = templateToString(builder);
+    // Dependencies
+    var reTestNodeFolder = /[\/\\]node_modules[\/\\]/;
+    var filteredDependencies = (0, lodash_1.filter)(result.dependencies, function (x) {
+        return x.startsWith(_this.rootContext) && !reTestNodeFolder.test(x);
+    });
+    for (var _i = 0, filteredDependencies_1 = filteredDependencies; _i < filteredDependencies_1.length; _i++) {
+        var file = filteredDependencies_1[_i];
+        this.addDependency(file);
+    }
+    // In case of AOT build add the resulting HTML to the assets
+    if (this._compilation.name === "angular-compiler:resource") {
+        var compilation_1 = this._compilation;
+        var rawRequest = this._module.rawRequest;
+        var request_1 = rawRequest.substring(0, rawRequest.lastIndexOf("?"));
+        // postpone to a later event, because when loader is invoked, the chunks don’t yet exist, and we need to register the file
+        compilation_1.hooks.processAssets.tap({
+            name: "tshtml-loader",
+            stage: webpack.Compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
+        }, function (assets) {
+            compilation_1.emitAsset(request_1, new webpack.sources.RawSource(htmlResult));
+            compilation_1.addChunk("resource").files.add(request_1);
+        });
+    }
+    return htmlResult;
+}
+// ----------------------------------------------------------------------------------
+//
+function executeTemplate(code, fileName) {
+    var dirName = (0, path_1.dirname)(fileName);
+    var output = compileCode(code, fileName);
+    var script = new vm_1.Script(output, { filename: fileName });
+    var module = new Module(fileName);
+    module.filename = fileName;
+    module.loaded = true;
+    module.paths = Module._nodeModulePaths(dirName);
+    var req = createRequireService(fileName);
+    var sandbox = {
+        __filename: fileName,
+        __dirname: dirName,
+        module: module,
+        exports: module.exports,
+        require: req,
+    };
+    script.runInNewContext(sandbox, {
+        filename: fileName,
+    });
+    return {
+        exports: sandbox.exports,
+        dependencies: req.dependencies,
+    };
+}
+function templateToString(builder) {
+    if ((0, lodash_1.isString)(builder)) {
+        return builder;
+    }
+    else if (typeof (builder) == "function") {
+        return (new builder()).toString();
+    }
+    else if ((0, lodash_1.isArray)(builder) || (0, tshtml_1.isTag)(builder)) {
+        return (0, tshtml_1.tagToString)(builder);
+    }
+    else {
+        return builder.toString();
+    }
+}
+var compilerService;
+/***
+ * Compiles given TypeScript code
+ * @param code
+ * @param fileName
+ */
+function compileCode(code, fileName) {
+    var tsFileName = "".concat(fileName, ".ts");
+    if (compilerService == null) {
+        compilerService = (0, ts_node_1.register)({
+            compilerOptions: {
+                module: "CommonJS",
+                target: "es2015",
+            },
+        });
+    }
+    return compilerService.compile(code, tsFileName);
+}
+/***
+ * Create a logging wrapper for "require" function.
+ * @param fileName
+ */
+function createRequireService(fileName) {
+    var req = Module.createRequire(fileName);
+    var cache = req.cache;
+    var dependencies = [];
+    var resolveFn = function (id, options) {
+        return req.resolve(id, options);
+    };
+    resolveFn.paths = req.resolve.paths;
+    var requireFn = function (request) {
+        var filePath;
+        try {
+            filePath = resolveFn(request);
+        }
+        catch (error) {
+            // Likely file doesn't exist, so short circuit to the default implementation
+            return req(request);
+        }
+        // Try to get the module from cache and check it's modification time
+        var module = cache[filePath];
+        if (module != null) {
+            cleanOutdatedModules(module, {});
+        }
+        var result = req(request);
+        // Store last modification date
+        var allFiles = {};
+        storeModuleTimes(cache[filePath], allFiles);
+        // Store request to the dependency resolution log
+        dependencies.push.apply(dependencies, (0, lodash_1.keys)(allFiles));
+        return result;
+    };
+    requireFn.resolve = resolveFn;
+    requireFn.cache = cache;
+    requireFn.extensions = req.extensions;
+    requireFn.main = req.main;
+    requireFn.dependencies = dependencies;
+    return requireFn;
+    // ---
+    function cleanOutdatedModules(module, allFiles) {
+        allFiles[module.filename] = true;
+        var doClean = false;
+        // If the module file was modified since last access -> remove it from the cache
+        if (module.fileLastModified != null) {
+            var moduleTime = (0, fs_1.statSync)(module.filename).mtimeMs;
+            if (module.fileLastModified != moduleTime) {
+                doClean = true;
+            }
+        }
+        // Check if any child module is outdated
+        for (var _i = 0, _a = module.children; _i < _a.length; _i++) {
+            var childModule = _a[_i];
+            if (allFiles[childModule.filename] || !checkFilename(childModule.filename))
+                continue;
+            doClean = cleanOutdatedModules(childModule, allFiles) || doClean;
+        }
+        if (doClean) {
+            delete cache[module.filename];
+        }
+        return doClean;
+    }
+    function storeModuleTimes(module, allFiles) {
+        allFiles[module.filename] = true;
+        if (module.fileLastModified == null) {
+            module.fileLastModified = (0, fs_1.statSync)(module.filename).mtimeMs;
+        }
+        var childModule;
+        for (var _i = 0, _a = module.children; _i < _a.length; _i++) {
+            childModule = _a[_i];
+            if (allFiles[childModule.filename] || !checkFilename(childModule.filename))
+                continue;
+            storeModuleTimes(childModule, allFiles);
+        }
+    }
+    function checkFilename(filename) {
+        return filename.indexOf("\\node_modules\\") === -1;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tshtml-loader",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "",
   "main": "lib/index.js",
   "files": [
@@ -8,22 +8,21 @@
   ],
   "bin": "./lib/export-template.js",
   "scripts": {
-    "build": "tsc ./src/index.ts ./src/export-template.ts --outdir ./lib -d && npm run copy-docs",
-    "build-watch": "tsc ./src/index.ts --outdir ./lib -d -w",
-    "copy-docs": "npx npx shx cp ../README.md ."
+    "build": "tsc ./src/index.ts ./src/export-template.ts --outdir ./lib -d",
+    "build-watch": "tsc ./src/index.ts --outdir ./lib -d -w"
   },
   "author": "LOGEX Group",
   "license": "MIT",
   "devDependencies": {
-    "@types/lodash": "4.14.178",
-    "@types/node": "16.11.7",
-    "@types/webpack": "4.41.26"
+    "@types/lodash": "4.17.15",
+    "@types/node": "22.13.5",
+    "@types/webpack": "5.28.5"
   },
   "dependencies": {
     "lodash": "^4.17.21",
-    "ts-node": "^10.5.0",
-    "tsconfig-paths": "^3.12.0",
-    "tshtml": "^1.1.6",
-    "typescript": "4.3.5"
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "tshtml": "^1.3.0",
+    "typescript": "5.7.3"
   }
 }

package/README.md

@@ -1,179 +0,0 @@
-# tshtml
-
-## Installation
-```
-npm i tshtml tshtml-loader
-```
-
-
-## What is it?
-tshtml-file is a TypeScript template that emits HTML code during build-time.
-The simplest one could look like this:
-
-```
-// test.tshtml
-
-export default `<p>Hello world!</p>`;
-```
-Obviosly this does not differ much from a static HTML file with the same paragraph. 
-But now you can start write code in the template, just like this:
-
-```
-export default `
-    <p>Hello world!</p>
-    <p>Build time is ${Date()}.</p>`;
-```
-
-This code is executed at build time, and only the resulting 
-HTML will be fed to Angular. This way we produce just the same fast Angular templates,
-but with help of possible very sophisticated code in tshtml.
-So, it's a lovely little metaprogramming: code that creates code.
-
-You can write helper functions to extract repetitive patterns of template code,
-import constants and static data structures used at run time to generate some
-template elements out of them, and also create templates that inherit other templates.
-The latter is very handy when you have Angular components derived from some
-base components.
-
-## _html_ function
-Combining HTML by hands is not very pleasant task. You must ensure that it is well-formed
-so usually it requires more efforts than just to concatenate strings together. 
-
-To simplify this task we created `html` function. It parses the text into a 
-tree of node-like objects that can be later serialized to a well-formed HTML.
-Since the tree is just a graph of plain JavaScript objects, you can update it:
-change attributes, add new children and so on.
-
-The simplest example with `html` added looks basically the same:
-```
-import { html } from "tshtml";
-
-export default html`<p>Hello world!</p>`;
-```
-
-Let's combine two HTML trees together:
-```
-import { html } from "tshtml";
-
-const buildTime = html`<p>Build time is ${Date()}.</p>`;
-
-// Resulting tree has buildTime subtree inserted at the appropriate place
-const res = html`
-    <p>Hello world!</p>
-    ${buildTime}`;
-    
-// Tree of template elements will be converted to string by the loader
-export default res;    
-```
-
-Here `builtTime` is not a string, it's an object, but you can still use standard
-template string placeholder syntax to combine HTML fragments together.
-
-The tree can be manipulated using methods of `TemplateItem` class. 
-```
-import { htmlEl } from "tshtml";
-
-const res = htmlEl`<p>Hello world!</p>`;
-
-// Add an attribute
-res.attrs( { "color": "red } );
-
-export default res; 
-```
-
-## To use in your Angular project
-First, configure Angular build as described here: 
-https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21
-
-For that you need to install necessary packages:
-```
-npm install @angular-devkit/build-angular --save-dev
-npm install @angular-builders/custom-webpack --save-dev
-```
-Add "architect" section to the "angular.json" if it is not already there. Change
-builder configuration and specify the name of additional webpack config file:
-```
-"architect": {
-    "build": {
-        "builder": "@angular-builders/custom-webpack:browser",
-        "options": {
-        "customWebpackConfig": {
-            "path": "./extra-webpack.config.js",
-            "replaceDuplicatePlugins": true
-        },
-        ...
-    },
-    "serve": {
-        "builder": "@angular-builders/custom-webpack:dev-server",
-        ...
-```
-
-Add `extra-webpack.config.js`. Configuration is a bit different depending of which
-Webpack version do you use.
-
-**Webpack 4**
-
-With Webpack 4 (used in Angular 11 and earlier) you need to configure loader like this.
-It's preferred to use `tshtml-loader` version less than 1.2 with Webpack 4. 
-```
-module.exports = {
-    module: {
-        rules: [
-            {
-                test: /\.tshtml$/,
-                use: ["tshtml-loader"],
-                enforce: "pre"
-            },
-        ]
-    }
-};
-```
-
-
-**Webpack 5**
-
-Webpack 5 (used in Angular 12 and up) brings new resource types, so the recommended loader configuration is the following:
-```
-module.exports = {
-    module: {
-        rules: [
-                test: /\.tshtml$/,
-                use: ["tshtml-loader"],
-                type: "asset/source"
-        ]
-    }
-};
-```
-
-
-You also need to have "tshtml" and  "tshtml-loader" packages in your project.
-
-Finally you just refer to `tshtml` files instead of `html` files in your Angular components.
-
-
-## Library development
-
-In tshtml folder:
-```
-npm run test
-npm run build
-```
-
-### Debugging
-
-If you need to debug the tests, then you can do the following:
-
-1. In the console where you are going to execute tests set environment variable:
-`set-item env:NODE_OPTIONS "--inspect"`
-   
-1. Configure you debugger to attach to Node.js at port 9229. Start the debugger
-
-1. Start test: `node ./test/jasmine "TEST NAME"`
-
-### tshtml-loader
-
-In tshtml-loader folder:
-```
-npm run build
-```
-