Merge pull request #5 from webdiscus/issue3-alias-windows

 bugfix: path resolving on windows; issues #3, #4

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change log
 
+## 1.5.1 (2021-12-10)
+- bugfix: fix path resolving on windows
+- some optimisations
+- code refactoring
+
 ## 1.5.0 (2021-12-07)
 - NEW: the `pug-loader` is now the part of the [pug-plugin](https://github.com/webdiscus/pug-plugin).
 - feature: added option `basedir` for all absolute inclusion

README.md

@@ -11,7 +11,7 @@ Webpack loader for the [Pug](https://pugjs.org) templates.\
 The pug loader resolves paths and webpack aliases for `extends`/`include`/`require()` in a pug template and compiles it to HTML or into a template function.
 
 > **NEW:** The `pug-loader` is now the part of the [pug-plugin](https://github.com/webdiscus/pug-plugin).
-> This plugin extract HTML and CSS from `pug` `html` `scss` files defined by webpack entry into output directory.
+> This plugin extracts HTML from the `pug` files defined in the webpack entry and save them in the output directory.
 > Now is possible define `pug` files directly in `webpack entry`. [See usage examples](https://github.com/webdiscus/pug-plugin#usage-examples). 
 
 ## Features
@@ -33,7 +33,7 @@ The pug loader resolves paths and webpack aliases for `extends`/`include`/`requi
    ```
    supports the `require()` for CommonJS and JSON files in pug templates **by all methods**, e.g.: \
    `data.json`
-   ```jsson
+   ```json
    [
      { "id": 1, "name": "abc" },
      { "id": 2, "name": "xyz" }
@@ -459,7 +459,7 @@ The result of `console.log(html)`:
 </div>
 ```
 
-[See the simple web app example >>](https://github.com/webdiscus/pug-loader/tree/master/examples/webpack-app-hello-pug/)
+See [the simple web app example](https://github.com/webdiscus/pug-loader/tree/master/examples/webpack-app-hello-pug/).
 
 <a id="usage-in-pug-javascript" name="usage-in-pug-javascript" href="#usage-in-pug-javascript"></a>
 ## Usage methods `compile`, `render` or `html` in JavaScript
@@ -682,7 +682,7 @@ h1 Hello Pug!
 p Description: #{description}
 ```
 
-[See the source files of this example >>](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-render/)
+See [the source files of this example](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-render/).
 
 
 ### Alternative usage with additional `html-loader`
@@ -735,7 +735,7 @@ module.exports = {
 
 ```
 
-[See the source files of this example >>](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-html/)
+See [the source files of this example](https://github.com/webdiscus/pug-loader/tree/master/examples/angular-component-html/).
 
 
 <a id="passing-data-into-template" name="passing-data-into-template" href="#passing-data-into-template"></a>

examples/angular-component-html/package.json

@@ -31,7 +31,7 @@
     "@angular/compiler-cli": "~13.0.0",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
-    "@webdiscus/pug-loader": "^1.5.0",
+    "@webdiscus/pug-loader": "^1.5.1",
     "html-loader": "^3.0.1",
     "pug-plugin-ng": "^0.0.3",
     "jasmine-core": "~3.10.0",

examples/angular-component-render/package.json

@@ -31,7 +31,7 @@
     "@angular/compiler-cli": "~13.0.0",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
-    "@webdiscus/pug-loader": "^1.5.0",
+    "@webdiscus/pug-loader": "^1.5.1",
     "html-loader": "^3.0.1",
     "pug-plugin-ng": "^0.0.3",
     "jasmine-core": "~3.10.0",

examples/webpack-app-hello-pug/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@webdiscus/pug-loader": "^1.5.0",
+    "@webdiscus/pug-loader": "^1.5.1",
     "pug-plugin": "^1.1.0",
     "webpack": "^5.64.0",
     "webpack-cli": "^4.9.1",

examples/webpack-app-hello-pug/webpack.config.js

@@ -82,10 +82,7 @@ module.exports = {
         name: 'Firefox',
       },
     },*/
-    hot: false,
-    //hot: true,
-    //liveReload: true,
-    liveReload: false,
+    liveReload: true,
 
     client: {
       progress: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webdiscus/pug-loader",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "The pug loader resolves paths and webpack aliases in a pug template and compiles it to HTML or into a template function.",
   "keywords": [
     "pug",

src/index.js

@@ -5,67 +5,95 @@ const path = require('path'),
   pug = require('pug'),
   walk = require('pug-walk'),
   { merge } = require('webpack-merge'),
-  { resolveTemplatePath, resolveResourcePath, getResourceParams, injectExternalVariables } = require('./utils'),
-  loaderMethods = require('./loader-methods');
+  {
+    resolveTemplatePath,
+    resolveRequireCode,
+    resolveRequireResource,
+    getResourceParams,
+    injectExternalVariables,
+  } = require('./utils'),
+  loaderMethods = require('./loader-methods'),
+  loader = 'pug-loader';
 
 // the variables with global scope for the resolvePlugin
 let webpackResolveAlias = {},
   loaderMethod = null,
   codeDependencies = [];
 
-const isRendering = (loaderMethod) => ['html', 'render'].indexOf(loaderMethod.method) > -1;
-
 /**
- * Resolve the code file path in require ().
+ * The pug plugin to resolve path for include, extends, require.
  *
- * @param {string} templateFile The filename of the template where resolves the resource.
- * @param {string} value The resource value include require().
- * @param {{}} aliases The resolve.alias from webpack config.
- * @return {string}
- */
-const resolveCodePath = (templateFile, value, aliases) =>
-  value.replaceAll(/(require\(.+?\))/g, (value) => {
-    const [, sourcePath] = /(?<=require\("|'|`)(.+)(?="|'|`\))/.exec(value) || [];
-    let resolvedPath = resolveTemplatePath(sourcePath, aliases);
-    if (sourcePath === resolvedPath) resolvedPath = path.join(path.dirname(templateFile), resolvedPath);
-
-    // Important: delete the file from require.cache to allow reload cached files after changes by watch.
-    delete require.cache[resolvedPath];
-    codeDependencies.push(resolvedPath);
-
-    return `require('${resolvedPath}')`;
-  });
-
-/**
- * The pug plugin to resolve path for include, extend, require.
- *
- * @type {{preLoad: (function(*): *)}}
+ * @type {{resolve: (function(string, string, {}): string), preCodeGen: (function({}): *)}}
  */
 const resolvePlugin = {
-  preLoad: (ast) =>
+  /**
+   * Resolve the filename for extends / include / raw include.
+   *
+   * @param {string} filename The extends/include filename in template.
+   * @param {string} source The absolute path to template.
+   * @param {{}} options The options of pug compiler.
+   * @return {string}
+   */
+  resolve: (filename, source, options) => {
+    let resolvedFile = filename.trim();
+
+    if (resolvedFile[0] === '/') {
+      if (!options.basedir) optionBasedirException();
+      resolvedFile = path.join(options.basedir, resolvedFile);
+    } else {
+      if (!source) noSourceException();
+      resolvedFile = resolveTemplatePath(resolvedFile, webpackResolveAlias);
+      // note: on windows an absolute path begin not with `/` otherwise as like `C:\`
+      if (!path.isAbsolute(resolvedFile)) {
+        resolvedFile = path.join(path.dirname(source.trim()), resolvedFile);
+      }
+    }
+
+    return resolvedFile;
+  },
+
+  /**
+   * Resolve the filename for require().
+   *
+   * @param {{}} ast The parsed tree of pug template.
+   * @return {{}}
+   */
+  preCodeGen: (ast) =>
     walk(ast, (node) => {
-      if (node.type === 'FileReference') {
-        // resolving for extends/include
-        let result = resolveTemplatePath(node.path, webpackResolveAlias);
-        if (result && result !== node.path) node.path = result;
-      } else if (node.type === 'Code' && isRendering(loaderMethod)) {
-        // resolving for require of a code, e.g.: `- var data = require('./data.js')` (its need only by rendering)
-        if (node.val && node.val.indexOf('require(') > 0) {
-          let result = resolveCodePath(node.filename, node.val, webpackResolveAlias);
+      if (node.type === 'Code') {
+        // resolving for require of a code, e.g.: `- var data = require('./data.js')`
+        if (containRequire(node)) {
+          let result = resolveRequireCode(node.filename, node.val, webpackResolveAlias, codeDependencies);
           if (result && result !== node.val) node.val = result;
         }
       } else if (node.attrs) {
         // resolving for tag attributes, e.g.: img(src=require('./image.jpeg'))
         node.attrs.forEach((attr) => {
-          if (attr.val && typeof attr.val === 'string' && attr.val.indexOf('require(') === 0) {
-            let result = resolveResourcePath(attr.filename, attr.val, webpackResolveAlias, loaderMethod);
+          if (containRequire(attr)) {
+            let result = resolveRequireResource(attr.filename, attr.val, webpackResolveAlias, loaderMethod);
             if (result && result !== attr.val) attr.val = result;
           }
         });
       }
     }),
 };
 
+/**
+ * Whether the node value contains the require().
+ *
+ * @param {{val: *}} obj
+ * @return {boolean}
+ */
+const containRequire = (obj) => obj.val && typeof obj.val === 'string' && obj.val.indexOf('require(') >= 0;
+
+const optionBasedirException = () => {
+  throw new Error(`[${loader}] the "basedir" option is required to use includes and extends with "absolute" paths.`);
+};
+
+const noSourceException = () => {
+  throw new Error(`[${loader}] the "filename" option is required to use includes and extends with "relative" paths.`);
+};
+
 /**
  * @param {string} content The pug template.
  * @param {function(error: string|null, result: string?)?} callback The asynchronous callback function.
@@ -119,7 +147,7 @@ const compilePugContent = function (content, callback) {
   } catch (exception) {
     // watch files in which an error occurred
     if (exception.filename) loaderContext.addDependency(path.normalize(exception.filename));
-    callback('\n[pug-loader] Pug compilation failed.\n' + exception.toString());
+    callback(`\n[${loader}] Pug compilation failed.\n` + exception.toString());
     return;
   }
 

src/loader-methods.js

@@ -26,7 +26,7 @@ const loaderMethods = [
     method: 'render',
     queryParam: 'pug-render',
     // the result of compiled string must be exact as this:
-    //requireResource: (file) => "((file) => `' + require('${file}') + '`)(" + file + ')',
+    // requireResource: (file) => "((file) => `' + require('${file}') + '`)(" + file + ')',
     // to prevent escaping the 'single quotes' they must be as HTML char '"' encoded and at end decoded:
     requireResource: (file) => '((file) => `" + require("${file}") + "`)(' + file + ')',
     output: (funcBody, locals, esModule) =>