test: add test for compile pug as template funciton imported in js

webdiscus · Dec 17, 2023 · e308d82 · e308d82
1 parent 97daf4c
commit e308d82
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 0 deletions.
diff --git a/test/cases/js-tmpl-entry-js/expected/index.html b/test/cases/js-tmpl-entry-js/expected/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title>Test</title><script src="main.js" defer="defer"></script></head><body><h1>Hello World!</h1><div id="root"></div></body></html>
diff --git a/test/cases/js-tmpl-entry-js/expected/main.js b/test/cases/js-tmpl-entry-js/expected/main.js
diff --git a/test/cases/js-tmpl-entry-js/expected/myComponent.js b/test/cases/js-tmpl-entry-js/expected/myComponent.js
diff --git a/test/cases/js-tmpl-entry-js/src/component/component.js 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
+      },
+    },
+  },
+};