diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46a5529..8f6dc39 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,12 @@
# Change log
+## 1.6.0 (2022-01-12)
+- added supports resolving aliases from `webpack.resolve.plugins`
+ if a file is by `webpack.resolve.alais` not resolved, then uses the slow enhanced resolver
+- update packages
+
## 1.5.1 (2021-12-10)
-- bugfix: fix path resolving on windows
+- bugfix: fix path resolving on Windows
- some optimisations
- code refactoring
diff --git a/README.md b/README.md
index e1a5096..a1bfdb0 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[](https://badge.fury.io/js/@webdiscus%2Fpug-loader)
+[](https://www.npmjs.com/package/@webdiscus/pug-loader "download npm package")
[](https://nodejs.org)
[](https://webpack.js.org/)
[](https://github.com/pugjs/pug)
@@ -19,7 +19,7 @@ The pug loader resolves paths and webpack aliases for `extends`/`include`/`requi
- supports features and options of original [`pugjs/pug-loader`](https://github.com/pugjs/pug-loader/)
- up to 4x faster than original `pugjs/pug-loader` at webpack starting
- up to 8x faster than original `pugjs/pug-loader` at webpack watching during compile changes in dependencies
- - supports Webpack `resolve.alias`, works with and without the prefixes: `~` `@`
+ - supports Webpack `resolve.alias` and `resolve.plugins`, works with and without the prefixes `~` `@`
- supports integration with `Angular Component`
- supports the syntax of `CommonJS` and `ES modules` in generated templates for loading them via `require` or `import`
- compiling a pug into a template function, e.g. using in javascript:
diff --git a/examples/angular-component-html/package.json b/examples/angular-component-html/package.json
index 0a8306b..9ca151c 100644
--- a/examples/angular-component-html/package.json
+++ b/examples/angular-component-html/package.json
@@ -1,7 +1,7 @@
{
"name": "ng-app",
"description": "Usage the pug template in angular component",
- "version": "0.0.1",
+ "version": "1.0.0",
"scripts": {
"ng": "npx -p @angular/cli ng",
"start": "npx -p @angular/cli ng serve",
@@ -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.1",
+ "@webdiscus/pug-loader": "^1.6.0",
"html-loader": "^3.0.1",
"pug-plugin-ng": "^0.0.3",
"jasmine-core": "~3.10.0",
diff --git a/examples/angular-component-html/webpack.config.js b/examples/angular-component-html/webpack.config.js
index 73f248c..09d6e20 100644
--- a/examples/angular-component-html/webpack.config.js
+++ b/examples/angular-component-html/webpack.config.js
@@ -11,15 +11,15 @@ module.exports = {
module: {
rules: [
- /*{
- test: /\.pug$/,
- loader: 'pug-loader',
- options: {
- method: 'render',
- doctype: 'html',
- plugins: [require('pug-plugin-ng')],
- },
- },*/
+ // {
+ // test: /\.pug$/,
+ // loader: 'pug-loader',
+ // options: {
+ // method: 'render',
+ // doctype: 'html',
+ // plugins: [require('pug-plugin-ng')],
+ // },
+ // },
{
test: /\.pug$/,
diff --git a/examples/angular-component-render/package.json b/examples/angular-component-render/package.json
index 0a8306b..9ca151c 100644
--- a/examples/angular-component-render/package.json
+++ b/examples/angular-component-render/package.json
@@ -1,7 +1,7 @@
{
"name": "ng-app",
"description": "Usage the pug template in angular component",
- "version": "0.0.1",
+ "version": "1.0.0",
"scripts": {
"ng": "npx -p @angular/cli ng",
"start": "npx -p @angular/cli ng serve",
@@ -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.1",
+ "@webdiscus/pug-loader": "^1.6.0",
"html-loader": "^3.0.1",
"pug-plugin-ng": "^0.0.3",
"jasmine-core": "~3.10.0",
diff --git a/examples/webpack-app-hello-pug/README.md b/examples/webpack-app-hello-pug/README.md
index f7c383e..065a4b5 100644
--- a/examples/webpack-app-hello-pug/README.md
+++ b/examples/webpack-app-hello-pug/README.md
@@ -1,14 +1,19 @@
## Install
-npm install
+```
+npm i
+```
-## Start local app in browser
+## Start the app in browser for local development
+```
npm run start
-> !!! currently not work !!!
->
-> Bugfix in progress...
+```
## Build
+```
npm run build
+```
## Watch
+```
npm run watch
+```
diff --git a/examples/webpack-app-hello-pug/package.json b/examples/webpack-app-hello-pug/package.json
index a7bf0b0..77200ba 100644
--- a/examples/webpack-app-hello-pug/package.json
+++ b/examples/webpack-app-hello-pug/package.json
@@ -2,19 +2,20 @@
"name": "webpack-app",
"version": "1.0.0",
"description": "Simple web app",
+ "author": "webdiscus",
+ "license": "ISC",
"main": "index.js",
"scripts": {
- "__start": "webpack serve",
+ "start": "webpack serve",
"build": "webpack --mode=production --progress",
"watch": "webpack --mode=production --watch --progress"
},
- "author": "",
- "license": "ISC",
"devDependencies": {
- "@webdiscus/pug-loader": "^1.5.1",
- "pug-plugin": "^1.1.0",
- "webpack": "^5.64.0",
+ "@webdiscus/pug-loader": "^1.6.0",
+ "css-loader": "^6.5.1",
+ "pug-plugin": "^1.2.0",
+ "webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
- "webpack-dev-server": "^4.5.0"
+ "webpack-dev-server": "^4.7.2"
}
}
diff --git a/examples/webpack-app-hello-pug/src/app/app.pug b/examples/webpack-app-hello-pug/src/app/app.pug
index b35620c..9347ada 100644
--- a/examples/webpack-app-hello-pug/src/app/app.pug
+++ b/examples/webpack-app-hello-pug/src/app/app.pug
@@ -4,7 +4,6 @@ p Hello Pug!
img(src=require('Images/image.jpeg'))
- var colors = require('App/colors.json')
-
.colors
each color in colors
div(style=`background-color:${color.hex};`)= color.name
diff --git a/examples/webpack-app-hello-pug/webpack.config.js b/examples/webpack-app-hello-pug/webpack.config.js
index 6809373..6c34ed0 100644
--- a/examples/webpack-app-hello-pug/webpack.config.js
+++ b/examples/webpack-app-hello-pug/webpack.config.js
@@ -34,7 +34,10 @@ module.exports = {
plugins: [
// extract HTML from pug files defined by webpack entry
- new PugPlugin(),
+ new PugPlugin({
+ // extract CSS from required styles in pug and from webpack entry
+ modules: [PugPlugin.extractCss()],
+ }),
],
module: {
@@ -61,8 +64,9 @@ module.exports = {
test: /\.(css)/,
type: 'asset/resource',
generator: {
- filename: 'assets/css/[hash][ext][query]',
+ filename: 'assets/css/[name].[hash][ext]',
},
+ use: ['css-loader'],
},
],
},
@@ -71,21 +75,24 @@ module.exports = {
static: {
directory: path.join(__dirname, 'public'),
},
- compress: true,
port: 9000,
https: false,
- // open in default browser
- open: true,
- // define a development browser
- /*open: {
- app: {
- name: 'Firefox',
- },
- },*/
liveReload: true,
-
+ hot: true,
client: {
progress: true,
},
+ compress: true,
+ headers: {
+ 'Cross-Origin-Opener-Policy': 'same-origin',
+ 'Cross-Origin-Embedder-Policy': 'require-corp',
+ },
+ // open in default browser
+ open: true,
+ // open: {
+ // app: {
+ // name: 'Firefox',
+ // },
+ // },
},
};
diff --git a/package.json b/package.json
index c3c3390..83fddb3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@webdiscus/pug-loader",
- "version": "1.5.1",
+ "version": "1.6.0",
"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",
@@ -11,7 +11,8 @@
"render",
"html",
"template",
- "pug-loader"
+ "pug-loader",
+ "pug-plugin"
],
"license": "ISC",
"author": "webdiscus (https://github.com/webdiscus)",
@@ -65,15 +66,16 @@
"webpack-merge": "^5.8.0"
},
"devDependencies": {
- "@babel/core": "^7.16.0",
- "@babel/preset-env": "^7.16.4",
- "@types/jest": "^27.0.3",
- "html-loader": "^3.0.1",
- "jest": "^27.4.3",
+ "@babel/core": "^7.16.7",
+ "@babel/preset-env": "^7.16.8",
+ "@types/jest": "^27.4.0",
+ "html-loader": "^3.1.0",
+ "jest": "^27.4.7",
"jstransformer-markdown-it": "^2.1.0",
"prettier": "^2.5.1",
- "pug-plugin": "^1.1.0",
+ "pug-plugin": "^1.2.0",
"rimraf": "^3.0.2",
+ "tsconfig-paths-webpack-plugin": "^3.5.2",
"webpack": "^5.65.0"
}
}
diff --git a/src/asset-loader.js b/src/asset-loader.js
deleted file mode 100644
index 7160a26..0000000
--- a/src/asset-loader.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// Achtung: this is reserved for future features. Don't use it!
-exports.pitch = async function (remaining) {
- console.log('+++ Asset Loader: ', this.resourcePath, ' === ', remaining);
- const result = await this.importModule(this.resourcePath + '.webpack[asset/resource]' + '!=!' + remaining);
- console.log('+++ Asset Loader RESULT: ', result);
-
- return result.default || result;
-};
diff --git a/src/directory-resolve-plugin.js b/src/directory-resolve-plugin.js
new file mode 100644
index 0000000..b42c8f8
--- /dev/null
+++ b/src/directory-resolve-plugin.js
@@ -0,0 +1,60 @@
+const plugin = 'directory-resolve-plugin';
+
+//// pipeline ////
+// The list of event names.
+
+// resolve
+// internal-resolve
+// new-interal-resolve
+// parsed-resolve
+// described-resolve
+// internal
+// raw-module
+// module
+// resolve-as-module
+// undescribed-resolve-in-package
+// resolve-in-package
+// resolve-in-existing-directory
+// relative
+// described-relative
+// directory
+// undescribed-existing-directory
+// existing-directory
+// undescribed-raw-file
+// raw-file
+// file
+// final-file
+// existing-file
+// resolved
+
+// The source is start pipeline: use the prefix `before` or `after` with pipeline, e.g. `before-resolve`.
+// The Target is one of pipeline list.
+
+class DirectoryResolvePlugin {
+ /**
+ *
+ * @param {string} source The source is the name of the event that starts the pipeline.
+ * Use the prefix `before` or `after` with event name, e.g. `before-resolve`.
+ * @param {string} target The target is the event name what should fire.
+ */
+ constructor(source, target) {
+ this.source = source;
+ this.target = target;
+ }
+
+ apply(resolver) {
+ const target = resolver.ensureHook(this.target);
+ //console.log('\n** [directory-resolve-plugin] target: ', target);
+
+ resolver.getHook(this.source).tapAsync(plugin, (request, resolveContext, callback) => {
+ let message = null;
+ //console.log('\n** [directory-resolve-plugin] request: ', request, resolveContext);
+ //console.log('\n** [directory-resolve-plugin]\n: ', resolveContext.stack);
+
+ // Any logic you need to create a new `request` can go here
+ resolver.doResolve(target, request, message, resolveContext, callback);
+ });
+ }
+}
+
+module.exports = DirectoryResolvePlugin;
diff --git a/src/index.js b/src/index.js
index 61b06fd..f96eb1d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,24 +1,28 @@
// add polyfill for node.js >= 12.0.0 && < 15.0.0
require('./polyfills/string.replaceAll');
-const path = require('path'),
- pug = require('pug'),
- walk = require('pug-walk'),
- { merge } = require('webpack-merge'),
- {
- resolveTemplatePath,
- resolveRequireCode,
- resolveRequireResource,
- getResourceParams,
- injectExternalVariables,
- } = require('./utils'),
- loaderMethods = require('./loader-methods'),
- loader = 'pug-loader';
+const path = require('path');
+const pug = require('pug');
+const walk = require('pug-walk');
+const { merge } = require('webpack-merge');
+const {
+ resolveTemplatePath,
+ resolveRequireCode,
+ resolveRequireResource,
+ getResourceParams,
+ injectExternalVariables,
+} = require('./utils');
+const { getPugResolverSync, getDirResolverSync } = require('./resolver');
+const loaderMethods = require('./loader-methods');
+const loader = 'pug-loader';
// the variables with global scope for the resolvePlugin
-let webpackResolveAlias = {},
+let webpackResolveAlias = null,
loaderMethod = null,
- codeDependencies = [];
+ codeDependencies = [],
+ loaderContext = null,
+ resolvePugSync,
+ resolveDirSync;
/**
* The pug plugin to resolve path for include, extends, require.
@@ -35,21 +39,49 @@ const resolvePlugin = {
* @return {string}
*/
resolve: (filename, source, options) => {
- let resolvedFile = filename.trim();
+ const originalFile = filename.trim();
+ let result = originalFile;
- if (resolvedFile[0] === '/') {
+ // absolute path is resolved by prepending options.basedir
+ if (originalFile[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 path.join(options.basedir, originalFile);
+ }
+
+ // relative to the current file
+ if (originalFile[0] === '.') {
+ return path.join(path.dirname(source.trim()), result);
}
- return resolvedFile;
+ if (!source) noSourceException();
+
+ // resolve by `resolve.alias`
+ if (webpackResolveAlias) {
+ result = resolveTemplatePath(originalFile, webpackResolveAlias);
+ }
+
+ // #Method 1
+ // fallback to slow resolver for `resolve.plugins`
+ // resolve alias or relative path to the current file
+ // note: relative path is allowed without `./`
+ // see https://pugjs.org/language/includes.html
+ if (result === originalFile) {
+ result = resolvePugSync(path.dirname(source.trim()), filename);
+ //console.log('### RESOLVE\nfile:', filename, '\nsource:', source, '\n==', result);
+ }
+
+ // #Method 2
+ // fallback to slow resolver for `resolve.plugins`,
+ // the alias must begin with any non-word char, like @ or ~
+ // if (result === originalFile && !/^[a-z]{1}/i.test(result)) {
+ // result = resolvePugSync(filename);
+ // console.log('### RESOLVE\nfile:', filename, '\nsource:', source, '\n==', result);
+ // }
+ // if (!path.isAbsolute(result)) {
+ // result = path.join(path.dirname(source.trim()), result);
+ // }
+
+ return result;
},
/**
@@ -166,10 +198,15 @@ const compilePugContent = function (content, callback) {
};
module.exports = function (content, map, meta) {
+ const webpackResolve = this._compiler.options.resolve || {};
const callback = this.async();
+ loaderContext = this;
+
+ // save resolve.alias from webpack config for global scope in this module, defaults the `webpackResolveAlias` is null
+ if (webpackResolve.alias && Object.keys(webpackResolve.alias).length > 0) webpackResolveAlias = webpackResolve.alias;
- // save resolve.alias from webpack config for global scope in this module,
- webpackResolveAlias = this._compiler.options.resolve.alias || {};
+ resolvePugSync = getPugResolverSync(this.rootContext, webpackResolve);
+ //resolveDirSync = getDirResolverSync(this.rootContext, webpackResolve);
compilePugContent.call(this, content, (err, result) => {
if (err) return callback(err);
diff --git a/src/resolver.js b/src/resolver.js
new file mode 100644
index 0000000..556a118
--- /dev/null
+++ b/src/resolver.js
@@ -0,0 +1,71 @@
+// the 'enhanced-resolve' package already used in webpack, don't need to define it in package.json
+const ResolverFactory = require('enhanced-resolve');
+
+// reserved for next release
+const DirectoryResolvePlugin = require('./directory-resolve-plugin');
+
+/**
+ * @param {string} path The start path to resolve.
+ * @param {{}} options The enhanced-resolve options.
+ * @returns {function(context:string, request:string): string | false}
+ */
+const getPugResolverSync = (path, options) => {
+ const resolve = ResolverFactory.create.sync({
+ ...options,
+ aliasFields: [],
+ conditionNames: [],
+ descriptionFiles: [],
+ exportsFields: [],
+ mainFields: [],
+ modules: [],
+ mainFiles: [],
+ extensions: ['.pug'],
+ restrictions: [/\.(pug)$/i],
+ preferRelative: true,
+ });
+
+ return (context, request) => {
+ if (!request) request = context;
+ else path = context;
+ return resolve(path, request);
+ };
+};
+
+/**
+ * TODO resolve only directory, without file
+ *
+ * @param {string} path The start path to resolve.
+ * @param {{}} options The enhanced-resolve options.
+ * @returns {function(context:string, request:string): string | false}
+ */
+const getDirResolverSync = (path, options) => {
+ const resolve = ResolverFactory.create.sync({
+ ...options,
+ aliasFields: [],
+ conditionNames: [],
+ descriptionFiles: [],
+
+ mainFields: [],
+ mainFiles: [],
+ extensions: [],
+ exportsFields: [],
+ modules: [],
+
+ plugins: [
+ '...',
+ //new DirectoryResolvePlugin('undescribed-existing-directory', 'resolved'), // ok for resolve.alias
+ //new DirectoryResolvePlugin('relative', 'resolved'), // ok for resolve.alias, but not for resolve.plugins
+ //new DirectoryResolvePlugin('resolved', 'file'), // max
+ new DirectoryResolvePlugin('directory', 'relative'), //
+ ],
+
+ preferRelative: true,
+ });
+
+ return (request) => resolve(path, request);
+};
+
+module.exports = {
+ getPugResolverSync,
+ getDirResolverSync,
+};
diff --git a/src/utils.js b/src/utils.js
index d2afd4d..89c3949 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -51,13 +51,13 @@ const getResourceParams = function (str) {
/**
* Converts the win path to POSIX standard.
- * The require() understands only POSIX format.
+ * The require() function understands only POSIX format.
*
- * For example:
+ * Fix path, for example:
* - `..\\some\\path\\file.js` to `../some/path/file.js`
* - `C:\\some\\path\\file.js` to `C:/some/path/file.js`
*
- * @param {string} value The windows path.
+ * @param {string} value The path on Windows.
* @return {*}
*/
const pathToPosix = (value) => value.replace(/\\/g, '/');
@@ -103,7 +103,7 @@ const resolveRequireCode = (templateFile, value, aliases, dependencies) =>
if (resolvedPath === sourcePath) resolvedPath = path.join(path.dirname(templateFile), sourcePath);
- // windows only: fix the path format
+ // Windows only: fix the path format
if (isWin) resolvedPath = pathToPosix(resolvedPath);
// Important: delete the file from require.cache to allow reload cached files after changes by watch.
@@ -151,7 +151,7 @@ const resolveRequireResource = function (templateFile, value, aliases, method) {
resolvedPath = `'${path.dirname(templateFile)}/' + ${resourcePath}`;
}
- // windows only: fix the path format
+ // Windows only: fix the path format
if (isWin) resolvedPath = pathToPosix(resolvedPath);
return method.requireResource(resolvedPath);
@@ -166,9 +166,11 @@ const resolveRequireResource = function (templateFile, value, aliases, method) {
* @return {string} The string with replaced alias.
*/
const resolveAlias = (value, aliases, regexp) => {
+ if (!aliases) return value;
+
const patternAliases = Object.keys(aliases).join('|');
- // no aliases
+ // webpack.alias is empty
if (!patternAliases) return value;
const [, alias] = new RegExp(regexp(patternAliases)).exec(value) || [];
diff --git a/test/cases/include-alias/expected/index.html b/test/cases/include-alias-resolve.alias/expected/index.html
similarity index 100%
rename from test/cases/include-alias/expected/index.html
rename to test/cases/include-alias-resolve.alias/expected/index.html
diff --git a/test/cases/include-alias/src/includes/include-a.pug b/test/cases/include-alias-resolve.alias/src/includes/include-a.pug
similarity index 100%
rename from test/cases/include-alias/src/includes/include-a.pug
rename to test/cases/include-alias-resolve.alias/src/includes/include-a.pug
diff --git a/test/cases/include-alias/src/includes/include-b.pug b/test/cases/include-alias-resolve.alias/src/includes/include-b.pug
similarity index 100%
rename from test/cases/include-alias/src/includes/include-b.pug
rename to test/cases/include-alias-resolve.alias/src/includes/include-b.pug
diff --git a/test/cases/include-alias/src/includes/include-c.pug b/test/cases/include-alias-resolve.alias/src/includes/include-c.pug
similarity index 100%
rename from test/cases/include-alias/src/includes/include-c.pug
rename to test/cases/include-alias-resolve.alias/src/includes/include-c.pug
diff --git a/test/cases/include-alias/src/includes/markdown.md b/test/cases/include-alias-resolve.alias/src/includes/markdown.md
similarity index 100%
rename from test/cases/include-alias/src/includes/markdown.md
rename to test/cases/include-alias-resolve.alias/src/includes/markdown.md
diff --git a/test/cases/include-alias/src/includes/mixins.pug b/test/cases/include-alias-resolve.alias/src/includes/mixins.pug
similarity index 100%
rename from test/cases/include-alias/src/includes/mixins.pug
rename to test/cases/include-alias-resolve.alias/src/includes/mixins.pug
diff --git a/test/cases/include-alias/src/template/index.pug b/test/cases/include-alias-resolve.alias/src/template/index.pug
similarity index 100%
rename from test/cases/include-alias/src/template/index.pug
rename to test/cases/include-alias-resolve.alias/src/template/index.pug
diff --git a/test/cases/include-alias/webpack.config.js b/test/cases/include-alias-resolve.alias/webpack.config.js
similarity index 100%
rename from test/cases/include-alias/webpack.config.js
rename to test/cases/include-alias-resolve.alias/webpack.config.js
diff --git a/test/cases/include-alias-resolve.plugins/expected/index.html b/test/cases/include-alias-resolve.plugins/expected/index.html
new file mode 100644
index 0000000..e55e94e
--- /dev/null
+++ b/test/cases/include-alias-resolve.plugins/expected/index.html
@@ -0,0 +1 @@
+include without .pug ext
Hello World
include with .pug ext
Hello World