Skip to content

Commit

Permalink
fix(pug): correct resolving required resources in multiple pages
Browse files Browse the repository at this point in the history
  • Loading branch information
webdiscus committed Feb 20, 2024
1 parent c8941eb commit bcbf4ac
Show file tree
Hide file tree
Showing 25 changed files with 150 additions and 10 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Change log

## 3.5.1 (2024-02-20)

- fix(pug): correct resolving required resources in multiple pages

## 3.5.0 (2024-02-18)

- feat: add support for the `Pug` template engine.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html-bundler-webpack-plugin",
"version": "3.5.0",
"version": "3.5.1",
"description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
"keywords": [
"html",
Expand Down
17 changes: 9 additions & 8 deletions src/Loader/Preprocessors/Pug/PugCompiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ class PugCompiler {
* @param {{}} loaderOptions
*/
constructor(loaderContext, loaderOptions) {
const { rootContext: context, resource, resourcePath: filename, resourceQuery } = loaderContext;
const { rootContext: context } = loaderContext;
let basedir = loaderOptions.basedir || context;

this.pug = loadModule('pug');
Expand All @@ -74,9 +74,6 @@ class PugCompiler {
Filter.loadFilters(loaderOptions);

this.pugOptions = {
// used to resolve import/extends and to improve errors
filename,

// the root directory of all absolute inclusions, defaults is `/`.
basedir,

Expand Down Expand Up @@ -113,15 +110,19 @@ class PugCompiler {
};
}

_compile(source) {
_compile(source, file) {
// note: for each new compilation must be defined the `filename` with current template filename
// used to resolve import/extends and to improve errors
this.pugOptions.filename = file;

return this.pug.compileClientWithDependenciesTracked(source, this.pugOptions).body;
}

compile(source) {
compile(source, { file }) {
ResolvePlugin.mode = 'compile';

const exportFunctionName = 'templateFn';
const templateFunctionSource = this._compile(source);
const templateFunctionSource = this._compile(source, file);

return templateFunctionSource + `;var ${exportFunctionName}=${this.pugOptions.name};`;
}
Expand All @@ -136,7 +137,7 @@ class PugCompiler {
render(source, { file, data, esModule }) {
ResolvePlugin.mode = 'render';

const templateFunctionSource = this._compile(source);
const templateFunctionSource = this._compile(source, file);
const name = this.pugOptions.name;

const vmScript = new VMScript(
Expand Down
1 change: 0 additions & 1 deletion src/Loader/Preprocessors/Pug/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const PugCompiler = require('./PugCompiler');
const preprocessor = (loaderContext, options, { esModule, watch }) => {
const exportCode = esModule ? 'export default ' : 'module.exports=';
const Pug = new PugCompiler(loaderContext, options);
const { rootContext } = loaderContext;

return {
/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><link rel="stylesheet" href="css/style.f07588a7.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>About</h1><script src="js/script.1.e55bdc4a.js"></script></body></html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body {
font-size: 18px;
font-family: Arial, sans-serif;
}

h1 {
color: deepskyblue;
}

h4 {
color: #9f9f9f;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: orangered;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: seagreen;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>Start page</h1></body></html>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log(">> main");
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log(">> about");
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log(">> news");
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="css/main.4f0fb2f1.css"><link rel="stylesheet" href="css/style.dd1336a7.css"><script src="js/main.5317c1f6.js"></script></head><body><h4>Default layout</h4><h1>News</h1><script src="js/script.26d1b659.js"></script></body></html>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('>> main');
12 changes: 12 additions & 0 deletions test/cases/_pug/resolve-js-css-multipage/src/styles/main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
body {
font-size: 18px;
font-family: Arial, sans-serif;
}

h1 {
color: deepskyblue;
}

h4 {
color: #9f9f9f;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
doctype html
html
head
title= title

block style
link(rel='stylesheet' href=require('@styles/main.css'))

script(src=require('@scripts/main'))
body
h4 Default layout
block content
block script
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
extends @views/layouts/default

append script
script(src='./script.js')

append style
link(rel='stylesheet' href=require('./style.css'))
//-link(rel='stylesheet' href='./style.css')
block content
h1 About
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('>> about');
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: seagreen;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
extends @views/layouts/default

append style

append script

block content
h1 Start page
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
extends @views/layouts/default

append script
script(src='./script.js')

append style
link(rel='stylesheet' href=require('./style.css'))
//-link(rel='stylesheet' href='./style.css')
block content
h1 News
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
console.log('>> news');
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
h1 {
color: orangered;
}
44 changes: 44 additions & 0 deletions test/cases/_pug/resolve-js-css-multipage/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const path = require('path');
const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');

module.exports = {
mode: 'production',

output: {
path: path.join(__dirname, 'dist/'),
},

resolve: {
alias: {
'@views': path.join(__dirname, 'src/views'),
'@styles': path.join(__dirname, 'src/styles'),
'@scripts': path.join(__dirname, 'src/scripts'),
},
},

plugins: [
new HtmlBundlerPlugin({
entry: {
news: './src/views/pages/news/index.pug',
about: './src/views/pages/about/index.pug',
index: './src/views/pages/index.pug',
},
js: {
filename: 'js/[name].[contenthash:8].js',
},
css: {
filename: 'css/[name].[contenthash:8].css',
},
preprocessor: 'pug',
}),
],

module: {
rules: [
{
test: /\.(css)$/,
use: ['css-loader'],
},
],
},
};
4 changes: 4 additions & 0 deletions test/integration-pug.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ describe('simple tests', () => {
test('escape special chars, render', () => compareFiles('_pug/escape-mode-render'));
});

describe('special cases', () => {
test('resolve js, css in multiple pages', () => compareFiles('_pug/resolve-js-css-multipage'));
});

describe('extend / include / raw include', () => {
test('resolve extends alias', () => compareFiles('_pug/extends-alias'));
test('resolve extends relative', () => compareFiles('_pug/extends-relative'));
Expand Down

0 comments on commit bcbf4ac

Please sign in to comment.