Skip to content

Commit

Permalink
fix: remove unused isEntry property from info argument of `postpr…
Browse files Browse the repository at this point in the history
…ocess` callback
  • Loading branch information
webdiscus committed Sep 24, 2023
1 parent 5973333 commit 8b256b6
Show file tree
Hide file tree
Showing 7 changed files with 132 additions and 100 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# Change log

## 2.14.1 (2023-09-24)
- fix: remove unused `isEntry` property from the `info` argument of the `postprocess` callback
the `isEntry` property was always true, because template is defined as an entrypoint
- chore: code cleanup
- chore: add examples of using `PureCSS` as a plugin for Webpack and for PostCSS
- docs: fix formatting in readme
- docs: fix some inaccuracies in readme

## 2.14.0 (2023-09-17)

- feat: add the `integrityHashes` hook to allow retrieving the integrity values
Expand Down
96 changes: 53 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,16 @@ In an HTML template can be referenced any source files, similar to how it works

#### See: [install and quick start](#install) | [contents](#contents) | [simple example](#example)

---
### 💡 Highlights
## ❤️ Sponsors

<table>
<tr>
<td><a href="https://www.jetbrains.com/"><img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="100" alt="JetBrains Logo"></a></td>
<td><a href="https://www.jetbrains.com/">JetBrains</a> provides a free license of their IDEs for this OSS development.</td>
</tr>
</table>

## 💡 Highlights

- An [entry point](#option-entry) is any template.
- Allows to **include** **script** and **style** source files directly **in HTML**:
Expand All @@ -56,29 +64,37 @@ In an HTML template can be referenced any source files, similar to how it works

See the [full list of features](#features).

### ⚙️ How works the plugin
## ⚙️ How works the plugin

The plugin resolves references in the HTML template and adds them to the Webpack compilation.
Webpack will automatically process the source files and the plugin replace the references with their output filenames in the generated HTML.
Webpack will automatically process the source files, and the plugin replaces the references with their output filenames in the generated HTML.
See the [example](#example).

<img width="830" style="max-width: 100%;" src="https://raw.githubusercontent.com/webdiscus/html-bundler-webpack-plugin/master/images/workflow.png">

### ✅ Profit
## ✅ Profit

**Start from HTML**, not from JS. Define an **HTML** file as an **entry point**.

You can specify script and style source files directly in an HTML template,
Specify script and style **source files** directly in an **HTML** template,
and you no longer need to define them in Webpack entry or import styles in JavaScript.

Use **any template engine** without additional plugins and loaders.
Most popular template engines supported "**out of the box**".

Use one powerful plugin instead of [many different plugins](#list-of-plugins).

### ❓Question / Feature Request / Bug
## ❓Question / Feature Request / Bug

If you have discovered a bug or have a feature suggestion, feel free to create an [issue](https://github.com/webdiscus/html-bundler-webpack-plugin/issues) on GitHub.

### 📚 Read it
## 📚 Read it

- [Using HTML Bundler Plugin for Webpack to generate HTML files](https://dev.to/webdiscus/using-html-bundler-plugin-for-webpack-to-generate-html-files-30gd)
- [Keep output directory structure in Webpack](https://dev.to/webdiscus/how-to-keep-the-folder-structure-of-source-templates-in-webpack-for-output-html-files-39bj)
- [Auto generate an integrity hash for `link` and `script` tags](https://dev.to/webdiscus/webpack-auto-generate-an-integrity-hash-for-link-and-script-tags-in-an-html-template-48p5)
- [Use a HTML file as an entry point?](https://github.com/webpack/webpack/issues/536) (Webpack issue, #536)
- [Comparison and Benchmarks of Node.js libraries to colorize text in terminal](https://dev.to/webdiscus/comparison-of-nodejs-libraries-to-colorize-text-in-terminal-4j3a) (_offtopic_)

## 🔆 What's New in v2

Expand Down Expand Up @@ -196,7 +212,6 @@ See [boilerplate](https://github.com/webdiscus/webpack-html-scss-boilerplate)

## Contents

1. [Sponsors](#sponsors)
1. [Features](#features)
1. [Install and Quick start](#install)
1. [Webpack options](#webpack-options)
Expand Down Expand Up @@ -894,7 +909,7 @@ If type is `string` then following substitutions (see [output.filename](https://
If type is `Function` then following arguments are available in the function:
- `@param {PathData} pathData` has the useful properties (see the [type PathData](https://webpack.js.org/configuration/output/#outputfilename)):
- `pathData.filename` the full path to source file
- `pathData.filename` the absolute path to source file
- `pathData.chunk.name` the name of entry key
- `@return {string}` The name or template string of output file.
Expand Down Expand Up @@ -1217,11 +1232,10 @@ Please see the details below under the [data](#loader-option-data) loader option
Type:
```ts
type postprocess = (content: string, info: ResourceInfo, compilation: Compilation) => string | undefined;
type postprocess = (content: string, info: TemplateInfo, compilation: Compilation) => string | undefined;

type ResourceInfo = {
type TemplateInfo = {
verbose: boolean;
isEntry: boolean;
filename: string | ((pathData: PathData) => string);
outputPath: string;
sourceFile: string;
Expand All @@ -1231,22 +1245,21 @@ type ResourceInfo = {
Default: `null`
Called after a source of an asset module is rendered, but not yet processed by other plugins.
Called after the template has been rendered, but not yet finalized, before the split chunks and inline assets are injected.
The `postprocess` have the following arguments:
- `content: string` - a content of processed file
- `info: ResourceInfo` - info about current file
- `info: TemplateInfo` - info about current file
- `compilation: Compilation` - the Webpack [compilation object](https://webpack.js.org/api/compilation-object/)
The `ResourceInfo` have the following properties:
The `TemplateInfo` have the following properties:
- `verbose: boolean` - the value defined in the [`verbose`](#option-verbose) option
- `isEntry: boolean` - if is `true`, the resource is the entry point, otherwise is a resource loaded in the entry point
- `filename: string|function` - a filename of the resource, see [filename](https://webpack.js.org/configuration/output/#outputfilename)
- `outputPath: string` - a full path of the output directory
- `sourceFile: string` - a full path of the source file, without URL query
- `assetFile: string` - an output asset file relative to the `outputPath`
- `verbose: boolean` - the [`verbose`](#option-verbose) option
- `filename: string|function` - the [`filename`](#option-filename) option of the template
- `outputPath: string` - the absolute path of the output directory
- `sourceFile: string` - the absolute path of the source file, without URL query
- `assetFile: string` - the output file relative to the `outputPath`

Return new content as a `string`.
If return `undefined`, the result processed via Webpack plugin is ignored and will be saved a result processed via the loader.
Expand Down Expand Up @@ -2443,8 +2456,10 @@ src/views/partials/menu/top/desktop.html
Include the partials in the `src/views/page/home.html` template with the `include()`:
```html
<%~ include('teaser.html') %> <%~ include('menu/nav.html') %> <%~ include('menu/top/desktop.html') %> <%~
include('footer.html') %>
<%~ include('teaser.html') %>
<%~ include('menu/nav.html') %>
<%~ include('menu/top/desktop.html') %>
<%~ include('footer.html') %>
```
If partials have `.eta` extensions, then the extension can be omitted in the include argument.
Expand Down Expand Up @@ -2489,8 +2504,10 @@ Include the partials in the `src/views/page/home.html` template with the `includ
<%- include('/includes/gallery.html') %>

<!-- views paths -->
<%- include('teaser.html') %> <%- include('menu/nav.html') %> <%- include('menu/top/desktop.html') %> <%-
include('footer.html') %>
<%- include('menu/top/desktop.html') %>
<%- include('menu/nav.html') %>
<%- include('teaser.html') %>
<%- include('footer.html') %>
```
If you have partials with `.ejs` extensions, then the extension can be omitted.
Expand Down Expand Up @@ -2536,7 +2553,10 @@ Include the partials in the `src/views/page/home.html` template with the `includ
{{ include '/includes/gallery' }}

<!-- views paths -->
{{ include 'teaser' }} {{ include 'menu/nav' }} {{ include 'menu/top/desktop' }} {{ include 'footer' }}
{{ include 'menu/top/desktop' }}
{{ include 'menu/nav' }}
{{ include 'teaser' }}
{{ include 'footer' }}
```
The `include` helper automatically resolves `.html` and `.hbs` extensions, it can be omitted.
Expand Down Expand Up @@ -2571,8 +2591,8 @@ loaderOptions: {
preprocessorOptions: {
// define partials manually
partials: {
gallery: path.join(__dirname, 'src/views/includes/gallery.html'),
teaser: path.join(__dirname, 'src/views/includes/teaser.html'),
gallery: path.join(__dirname, 'src/views/includes/gallery.html'),
footer: path.join(__dirname, 'src/views/partials/footer.html'),
'menu/nav': path.join(__dirname, 'src/views/partials/menu/nav.html'),
'menu/top/desktop': path.join(__dirname, 'src/views/partials/menu/top/desktop.html'),
Expand All @@ -2584,7 +2604,11 @@ loaderOptions: {
Include the partials in the `src/views/page/home.html` template:
```html
{{> gallery }} {{> teaser }} {{> menu/nav }} {{> menu/top/desktop }} {{> footer }}
{{> menu/top/desktop }}
{{> menu/nav }}
{{> teaser }}
{{> gallery }}
{{> footer }}
```
**The `helpers` option**
Expand Down Expand Up @@ -4496,24 +4520,10 @@ dist/js/app-5fa74877.1aceb2db.js

```
---
#### [↑ back to contents](#contents)
---
<a id="sponsors" name="sponsors" href="#sponsors"></a>
## Sponsors
Thank you to our sponsors!
| Sponsors | |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| <a href="https://www.jetbrains.com/"><img src="https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.png" width="150" alt="JetBrains Logo"></a> | [JetBrains](https://www.jetbrains.com/) provides a free license of their IDEs for this OSS development. |
#### [↑ back to contents](#contents)
## Also See
- [ansis][ansis] - The Node.js lib for ANSI color styling of text in terminal
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": "2.14.0",
"version": "2.14.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
21 changes: 5 additions & 16 deletions src/Plugin/AssetCompiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const cssLoader = {
* @property {string} [sourcePath = options.context] The absolute path to sources.
* @property {string} [outputPath = options.output.path] The output directory for an asset.
* @property {string|function(PathData, AssetInfo): string} filename The file name of output file.
* @property {function(string, ResourceInfo, Compilation): string|null =} postprocess The postprocess for extracted content from entry.
* @property {function(string, TemplateInfo, Compilation): string|null =} postprocess The postprocess for rendered template.
* @property {function(compilation: Compilation, {source: string, assetFile: string, inline: boolean} ): string|null =} extract
*/

Expand All @@ -83,16 +83,6 @@ const cssLoader = {
* @property {boolean} [inline = false] Whether inline CSS should contain an inline source map.
*/

/**
* @typedef {Object} ResourceInfo
* @property {boolean} isEntry True if is the asset from entry, false if asset is required from template.
* @property {boolean} verbose Whether information should be displayed.
* @property {string|(function(PathData, AssetInfo): string)} filename The filename template or function.
* @property {string} sourceFile The absolute path to source file.
* @property {string} outputPath The absolute path to output directory of asset.
* @property {string} assetFile The output asset file relative by outputPath.
*/

/**
* @typedef {Object} FileInfo
*
Expand Down Expand Up @@ -1170,17 +1160,16 @@ class AssetCompiler {
break;
case 'template':
if (Options.hasPostprocess()) {
const resourceInfo = {
isEntry: true,
/**/
const info = {
verbose: Options.isVerbose(),
inline,
filename,
outputPath,
sourceFile,
assetFile,
filename,
};

result = Options.postprocess(result, resourceInfo, this.compilation);
result = Options.postprocess(result, info, this.compilation);
}
break;
}
Expand Down
2 changes: 1 addition & 1 deletion src/Plugin/Messages/Exception.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ const executeFunctionException = (error, sourceFile) => {

/**
* @param {Error} error
* @param {ResourceInfo} info
* @param {TemplateInfo} info
* @throws {Error}
*/
const postprocessException = (error, info) => {
Expand Down
Loading

0 comments on commit 8b256b6

Please sign in to comment.