diff --git a/test/cases/js-tmpl-entry-js/expected/index.html b/test/cases/js-tmpl-entry-js/expected/index.html new file mode 100644 index 00000000..b78b3cd2 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/expected/index.html @@ -0,0 +1 @@ +Test

Hello World!

\ No newline at end of file diff --git a/test/cases/js-tmpl-entry-js/expected/main.js b/test/cases/js-tmpl-entry-js/expected/main.js new file mode 100644 index 00000000..a7a57c71 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/expected/main.js @@ -0,0 +1 @@ +(()=>{var e={661:e=>{var r={"pug-compile":""},t=/["&<>]/;e.exports=function(e){var n,o="",a={...r,...e};return function(e){o=o+"

Component - "+function(e){var r=""+e,n=t.exec(r);if(!n)return e;var o,a,u,i="";for(o=n.index,a=0;o

included component partial

"}.call(this,"name"in a?a.name:"undefined"!=typeof name?name:void 0),o}},186:(e,r,t)=>{"use strict";t.d(r,{Z:()=>o});var n=t(661);const o=t.n(n)()({name:"MyComponent"})}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var a=r[n]={exports:{}};return e[n](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";var e=t(186);document.getElementById("root").innerHTML=e.Z})()})(); \ No newline at end of file diff --git a/test/cases/js-tmpl-entry-js/expected/myComponent.js b/test/cases/js-tmpl-entry-js/expected/myComponent.js new file mode 100644 index 00000000..ffa4ff6f --- /dev/null +++ b/test/cases/js-tmpl-entry-js/expected/myComponent.js @@ -0,0 +1 @@ +(()=>{var e={661:e=>{var r={"pug-compile":""},n=/["&<>]/;e.exports=function(e){var t,a="",o={...r,...e};return function(e){a=a+"

Component - "+function(e){var r=""+e,t=n.exec(r);if(!t)return e;var a,o,u,i="";for(a=t.index,o=0;a

included component partial

"}.call(this,"name"in o?o.name:"undefined"!=typeof name?name:void 0),a}}},r={};function n(t){var a=r[t];if(void 0!==a)return a.exports;var o=r[t]={exports:{}};return e[t](o,o.exports,n),o.exports}n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{"use strict";var e=n(661);n.n(e)()({name:"MyComponent"})})()})(); \ No newline at end of file diff --git a/test/cases/js-tmpl-entry-js/src/component/component.js b/test/cases/js-tmpl-entry-js/src/component/component.js new file mode 100644 index 00000000..577d2bf9 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/src/component/component.js @@ -0,0 +1,10 @@ +// to import Pug template as template function use the url param `pug-compile` +import componentTmpl from './component.pug?pug-compile'; + +// render template function into HTML +const html = componentTmpl({ + // pass variables into template + name: 'MyComponent' +}); + +export default html; diff --git a/test/cases/js-tmpl-entry-js/src/component/component.pug b/test/cases/js-tmpl-entry-js/src/component/component.pug new file mode 100644 index 00000000..bfbdd3e0 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/src/component/component.pug @@ -0,0 +1,2 @@ +h2 Component - #{name} +include partial diff --git a/test/cases/js-tmpl-entry-js/src/component/partial.pug b/test/cases/js-tmpl-entry-js/src/component/partial.pug new file mode 100644 index 00000000..10f469f2 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/src/component/partial.pug @@ -0,0 +1 @@ +p included component partial diff --git a/test/cases/js-tmpl-entry-js/src/index.pug b/test/cases/js-tmpl-entry-js/src/index.pug new file mode 100644 index 00000000..5f8f345b --- /dev/null +++ b/test/cases/js-tmpl-entry-js/src/index.pug @@ -0,0 +1,7 @@ +html + head + title Test + script(src=require('./main.js') defer='defer') + body + h1 Hello World! + #root diff --git a/test/cases/js-tmpl-entry-js/src/main.js b/test/cases/js-tmpl-entry-js/src/main.js new file mode 100644 index 00000000..48fb3d44 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/src/main.js @@ -0,0 +1,4 @@ +import component from './component/component'; + +// inject the rendered template into DOM +document.getElementById('root').innerHTML = component; diff --git a/test/cases/js-tmpl-entry-js/webpack.config.js b/test/cases/js-tmpl-entry-js/webpack.config.js new file mode 100644 index 00000000..8710a449 --- /dev/null +++ b/test/cases/js-tmpl-entry-js/webpack.config.js @@ -0,0 +1,30 @@ +const path = require('path'); +const PugPlugin = require('../../../'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + }, + + entry: { + // test the compiled template function used in the html + index: './src/index.pug', + // test the compiled template function standalone, e.g., as a component + myComponent: './src/component/component.js', + }, + + plugins: [ + new PugPlugin(), + ], + + module: { + rules: [ + { + test: /\.pug$/, + loader: PugPlugin.loader, + }, + ], + }, +}; diff --git a/test/index.test.js b/test/index.test.js index aa0522f2..9292705c 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -515,6 +515,10 @@ describe('special cases', () => { test('js-import-image', (done) => { compareFileListAndContent(PATHS, 'js-import-image', done); }); + + test('compile template function in js', (done) => { + compareFileListAndContent(PATHS, 'js-tmpl-entry-js', done); + }); }); // Test Messages diff --git a/test/manual/watch-dependencies-import-js/package.json b/test/manual/watch-dependencies-import-js/package.json new file mode 100644 index 00000000..cfa38ad2 --- /dev/null +++ b/test/manual/watch-dependencies-import-js/package.json @@ -0,0 +1,11 @@ +{ + "description": "IMPORTANT: don't install webpack here because the Webpack instance MUST be one, otherwise appear the error: The 'compilation' argument must be an instance of Compilation.", + "scripts": { + "start": "webpack serve --mode development", + "watch": "webpack watch --mode development", + "build": "webpack --mode=production --progress" + }, + "devDependencies": { + "html-bundler-webpack-plugin": "file:../../.." + } +} diff --git a/test/manual/watch-dependencies-import-js/src/index.pug b/test/manual/watch-dependencies-import-js/src/index.pug new file mode 100644 index 00000000..26339c2d --- /dev/null +++ b/test/manual/watch-dependencies-import-js/src/index.pug @@ -0,0 +1,7 @@ +html + head + title Test + script(src=require("./main.js") defer="defer") +body + h1 Hello World! + p Change the content of an imported JS file. diff --git a/test/manual/watch-dependencies-import-js/src/main.js b/test/manual/watch-dependencies-import-js/src/main.js new file mode 100644 index 00000000..856c0908 --- /dev/null +++ b/test/manual/watch-dependencies-import-js/src/main.js @@ -0,0 +1,4 @@ +// test in serv mode: change the content of the imported file +import str from './module'; + +console.log('>> main', { str }); diff --git a/test/manual/watch-dependencies-import-js/src/module.js b/test/manual/watch-dependencies-import-js/src/module.js new file mode 100644 index 00000000..83ca81c1 --- /dev/null +++ b/test/manual/watch-dependencies-import-js/src/module.js @@ -0,0 +1,2 @@ +// TODO: fix error after change this file in serv mode +module.exports = 'Test 123'; diff --git a/test/manual/watch-dependencies-import-js/webpack.config.js b/test/manual/watch-dependencies-import-js/webpack.config.js new file mode 100644 index 00000000..ae0cf5ae --- /dev/null +++ b/test/manual/watch-dependencies-import-js/webpack.config.js @@ -0,0 +1,47 @@ +const path = require('path'); +const PugPlugin = require('../../..'); + +module.exports = { + mode: 'production', + + output: { + path: path.join(__dirname, 'dist/'), + clean: true, + }, + + entry: { + index: './src/index.pug', + }, + + plugins: [ + new PugPlugin({ + js: { + filename: '[name].[contenthash:8].js', + }, + }), + ], + + module: { + rules: [ + { + test: /\.pug$/, + loader: PugPlugin.loader, + options: { + method: 'render', + }, + }, + ], + }, + + // enable HMR with live reload + devServer: { + //hot: false, + static: path.join(__dirname, 'dist'), + watchFiles: { + paths: ['src/**/*.*'], + options: { + usePolling: true, + }, + }, + }, +};