From 22a6091373b7651b9000dd3722b3aea0fc9977fc Mon Sep 17 00:00:00 2001 From: biodiscus Date: Tue, 23 Jul 2024 14:00:17 +0200 Subject: [PATCH] feat: add `runtime` option for the `handlebars` preprocessor --- CHANGELOG.md | 6 +++ README.md | 18 +++++-- src/Loader/Preprocessors/Handlebars/index.js | 8 +-- .../cases/js-tmpl-hbs-compile/expected/app.js | 2 +- .../expected/app.js | 1 + .../expected/img/fig.c6809878.png | Bin 0 -> 1635 bytes .../expected/img/kiwi.da3e3cc9.png | Bin 0 -> 1697 bytes .../expected/img/pear.6b9b072a.png | Bin 0 -> 1759 bytes .../expected/index.html | 11 +++++ .../src/app.js | 10 ++++ .../src/index.hbs | 11 +++++ .../src/partials/content.hbs | 12 +++++ .../src/partials/star.hbs | 2 + .../webpack.config.js | 46 ++++++++++++++++++ test/integration.test.js | 1 + 15 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/expected/app.js create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/expected/img/fig.c6809878.png create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/expected/img/kiwi.da3e3cc9.png create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/expected/img/pear.6b9b072a.png create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/expected/index.html create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/src/app.js create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/src/index.hbs create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/content.hbs create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/star.hbs create mode 100644 test/cases/loader-option-preprocessor-handlebars-runtime/webpack.config.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d552bcbd..476bad40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Change log +## 3.16.0 (2024-07-23) + +- feat: add `runtime` option for the `handlebars` preprocessor +- test: add test for the `runtime` option +- docs: update readme + ## 3.15.1 (2024-07-07) - fix: resolving source file in a tag attribute when another attribute contains the `>` char, e.g.: diff --git a/README.md b/README.md index de2dfce5..bee050d2 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,8 @@ ## HTML template as entry point The **HTML Bundler** generates static HTML or [template function](#template-in-js) from [various templates](#template-engine) containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root). -This plugin allows using a template file as an [entry point](#option-entry). +This plugin looks at the template files in [entry](#option-entry) to start building the bundle. +The source files of dependencies (scripts, styles, etc.) can be defined directly in the template. The plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML. The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory. @@ -24,7 +25,6 @@ You can use a relative path or Webpack alias to a source file. A template imported in JS will be compiled into [template function](#template-in-js). You can use the **template function** in JS to render the template with variables in runtime on the client-side in the browser. - This plugin is an **advanced replacement** of `html-webpack-plugin` and many other [plugins and loaders](#list-of-plugins). + + + +
+ + \ No newline at end of file diff --git a/test/cases/loader-option-preprocessor-handlebars-runtime/src/app.js b/test/cases/loader-option-preprocessor-handlebars-runtime/src/app.js new file mode 100644 index 00000000..bc9600e9 --- /dev/null +++ b/test/cases/loader-option-preprocessor-handlebars-runtime/src/app.js @@ -0,0 +1,10 @@ +import tmpl from './partials/content.hbs?lang=en'; + +const locals = { + name: 'World', + people: ['Alexa ', 'Cortana ', 'Siri '], +}; + +document.getElementById('main').innerHTML = tmpl(locals); + +console.log('>> app'); diff --git a/test/cases/loader-option-preprocessor-handlebars-runtime/src/index.hbs b/test/cases/loader-option-preprocessor-handlebars-runtime/src/index.hbs new file mode 100644 index 00000000..6c6538fb --- /dev/null +++ b/test/cases/loader-option-preprocessor-handlebars-runtime/src/index.hbs @@ -0,0 +1,11 @@ + + + + {{ title }} + + + + +
+ + \ No newline at end of file diff --git a/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/content.hbs b/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/content.hbs new file mode 100644 index 00000000..ca028f85 --- /dev/null +++ b/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/content.hbs @@ -0,0 +1,12 @@ +

Hello {{ name }}!

+
Global data: title = "{{ title }}"
+
Query param: lang = "{{ lang }}"
+ +
    + {{#each people}} +
  • {{this}}
    • + {{/each}} +
+ + +{{!-- {{TODO: add supports for include 'star'}} --}} diff --git a/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/star.hbs b/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/star.hbs new file mode 100644 index 00000000..4b15fc8c --- /dev/null +++ b/test/cases/loader-option-preprocessor-handlebars-runtime/src/partials/star.hbs @@ -0,0 +1,2 @@ +
++ Included partial ++
+ \ No newline at end of file diff --git a/test/cases/loader-option-preprocessor-handlebars-runtime/webpack.config.js b/test/cases/loader-option-preprocessor-handlebars-runtime/webpack.config.js new file mode 100644 index 00000000..ffb53de0 --- /dev/null +++ b/test/cases/loader-option-preprocessor-handlebars-runtime/webpack.config.js @@ -0,0 +1,46 @@ +const path = require('path'); +const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + }, + + resolve: { + alias: { + '@images': path.join(__dirname, '../../fixtures/images'), + }, + }, + + plugins: [ + new HtmlBundlerPlugin({ + entry: { + index: './src/index.hbs', + }, + preprocessor: 'handlebars', + preprocessorOptions: { + //runtime: 'handlebars/runtime', // default runtime + runtime: 'handlebars/dist/handlebars.runtime.min', // test custom runtime file + views: ['src/partials'], + partials: ['src/partials'], + }, + data: { + title: 'My Title', + }, + }), + ], + + module: { + rules: [ + { + test: /\.(ico|png|jp?g|svg)$/, + type: 'asset/resource', + generator: { + filename: 'img/[name].[hash:8][ext][query]', + }, + }, + ], + }, +}; diff --git a/test/integration.test.js b/test/integration.test.js index 117c65cb..05d3a8e0 100644 --- a/test/integration.test.js +++ b/test/integration.test.js @@ -226,6 +226,7 @@ describe('loader preprocessor options', () => { test('handlebars partials', () => compareFiles('loader-option-preprocessor-handlebars-partials')); test('handlebars partials path', () => compareFiles('loader-option-preprocessor-handlebars-partials-path')); test('handlebars access @root', () => compareFiles('hbs-access-root-variable')); + test('handlebars runtime', () => compareFiles('loader-option-preprocessor-handlebars-runtime')); test('liquid', () => compareFiles('loader-option-preprocessor-liquid')); test('liquid async', () => compareFiles('loader-option-preprocessor-liquid-async'));