@webdiscus/pug-loader - npm Package Compare versions

Comparing version 1.4.4 to 1.4.5

package.json

 {
   "name": "@webdiscus/pug-loader",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "The pug loader resolves paths and webpack aliases in a pug template and compiles it to HTML or into a template function.",
@@ -35,5 +35,2 @@ "keywords": [
   },
-  "engines": {
-    "node": ">=12.13.0"
-  },
   "scripts": {
@@ -56,2 +53,5 @@ "test": "jest --detectOpenHandles --config ./test/jest.config.js",
   ],
+  "engines": {
+    "node": ">=12.14"
+  },
   "peerDependencies": {
@@ -58,0 +58,0 @@ "pug": ">=3.0.2",

README.md

@@ -20,9 +20,3 @@ [![npm version](https://badge.fury.io/js/@webdiscus%2Fpug-loader.svg)](https://badge.fury.io/js/@webdiscus%2Fpug-loader)
  - supports integration with `Angular Component`
- - supports syntax of `CommonJS` and `ES modules` in generated JavaScript modules, e.g.:
-   ```js
-   const html = require('./template.pug');
-   ```
-   ```js
-   import html from './template.pug';
-   ```
+ - supports the syntax of `CommonJS` and `ES modules` in generated templates for loading them via `require` or `import`
  - compiling a pug into a template function, e.g.:
@@ -37,4 +31,4 @@ ```js
    ```
-   **NEW** supports require of JS and JSON files in pug **at compile time**, e.g.: \
-   file `data.json`
+   **NEW** now supports the `require()` for CommonJS and JSON files in pug templates **by all methods**, e.g.: \
+   `data.json`
    ```json
@@ -46,4 +40,13 @@ [
    ```
-   pug template
+   `say-hello.js`
+   ```js
+   module.exports = function (name) {
+     return `Hello ${name}!`;
+   }
+   ```
+   `pug template`
    ```pug
+   - var sayHello = require('./say-hello')
+   h1 #{ sayHello('pug') }
+   
    - var myData = require('./data.json')
@@ -53,4 +56,4 @@ each item in myData
    ```
- - rendering into a pure HTML (method `'html'`) for processing the HTML in additional loaders, e.g. in `html-loader`
- - support for passing custom data to templates at compile time using loader option `data`, e.g.:
+ - rendering to pure HTML using method `'html'` to handle HTML in additional loaders, e.g. in `html-loader`
+ - support for passing custom data to templates at compile time using the loader option `data`, e.g.:
    ```js
@@ -152,7 +155,7 @@ {
 
-// The options for pug-loader.
+// Default pug-loader options.
 const pugLoaderOptions = {
   method: 'compile',
   esModule: false,
-};
+};‚
 
@@ -265,8 +268,10 @@ module.exports  = {
  - `compile` the pug template compiles into a template function and in JavaScript can be called with variables to render into HTML at runtime. \
+   The query parameter is `?pug-compile`. Can be used if the method is `render`. \
    Use this method, if the template have variables passed from JavaScript at runtime. [see usage](#method-compile)
  - `render` the pug template renders into HTML at compile time and exported as a string. 
    All required resource will be processed by the webpack and separately included as added strings wrapped to a function. \
+   The query parameter is `?pug-render`. Can be used if the method is `compile` or is not defined in options. \
    Use this method, if the template does not have variables passed from JavaScript at runtime. The method generates the most compact and fastest code. [see usage](#method-render)
  - `html` the template renders into a pure HTML string at compile time. The method need an addition loader to handles the HTML. \
-   Use this method if the rendered HTML needs to be processed by another loader, e.g. by `html-loader` [see usage](#method-html)
+   Use this method if the rendered HTML needs to be processed by additional loader, e.g. by `html-loader` [see usage](#method-html)
  
@@ -273,0 +278,0 @@ > Embedded resources such as `img(src=require('./image.jpeg'))` handles at compile time by the webpack using [**asset/resource**](https://webpack.js.org/guides/asset-modules/#resource-assets).

src/index.js

@@ -9,8 +9,8 @@ // add polyfill for node.js >= 12.0.0 && < 15.0.0
   { resolveTemplatePath, resolveResourcePath, getResourceParams, injectExternalVariables } = require('./utils'),
-  loaderMethods = require('./loader-methods'),
-  code = require('./code');
+  loaderMethods = require('./loader-methods');
 
 // the variables with global scope for the resolvePlugin
 let webpackResolveAlias = {},
-  loaderMethod = null;
+  loaderMethod = null,
+  codeDependencies = [];
 
@@ -20,3 +20,3 @@ const isRendering = (loaderMethod) => ['render', 'html'].indexOf(loaderMethod.method) > -1;
 /**
- * Resolve a source code in the argument of require() function and save source in cache.
+ * Resolve the code file path in require ().
  *
@@ -28,3 +28,3 @@ * @param {string} templateFile The filename of the template where resolves the resource.
  */
-const requireCode = (templateFile, value, aliases) =>
+const resolveCodePath = (templateFile, value, aliases) =>
   value.replaceAll(/(require\(.+?\))/g, (value) => {
@@ -35,10 +35,11 @@ const [, sourcePath] = /(?<=require\("|'|`)(.+)(?="|'|`\))/.exec(value) || [];
 
-    // Important: delete the file from require.cache to allow reload cached files after changes.
-    delete require.cache[__filename];
+    // Important: delete the file from require.cache to allow reload cached files after changes by watch.
+    delete require.cache[resolvedPath];
+    codeDependencies.push(resolvedPath);
 
-    return code.require(resolvedPath);
+    return `require('${resolvedPath}')`;
   });
 
 /**
- * Pug plugin to resolve path for include, extend, require.
+ * The pug plugin to resolve path for include, extend, require.
  *
@@ -57,3 +58,3 @@ * @type {{preLoad: (function(*): *)}}
           // require a code (need only by rendering), e.g.: `- var data = require('./data.js')`
-          let result = requireCode(node.filename, node.val, webpackResolveAlias);
+          let result = resolveCodePath(node.filename, node.val, webpackResolveAlias);
           if (result && result !== node.val) node.val = result;
@@ -93,7 +94,6 @@ }
 
-  // pug compiler options
   const options = {
     // used to resolve imports/extends and to improve errors
     filename: loaderContext.resourcePath,
-    // The root directory of all absolute inclusion. Defaults is /.
+    // the root directory of all absolute inclusion. Defaults is /
     basedir: loaderOptions.basedir || '/',
@@ -105,11 +105,10 @@ doctype: loaderOptions.doctype || 'html',
     self: loaderOptions.self || false,
-    // Output compiled function to stdout. Must be false.
+    // output compiled function to stdout, must be false
     debug: false,
-    // Include the function source in the compiled template. Defaults is false.
+    // include the function source in the compiled template, defaults is false
     compileDebug: loaderOptions.debug || false,
-    //globals: ['require', ...(loaderOptions.globals || [])],
-    globals: ['__asset_resource_require__', 'require', ...(loaderOptions.globals || [])],
-    // Include inline runtime functions must be true.
+    globals: ['require', ...(loaderOptions.globals || [])],
+    // include inline runtime functions must be true
     inlineRuntimeFunctions: true,
-    // module must be false to get compiled function body w/o export code
+    // for the pure function code w/o exports the module must be false
     module: false,
@@ -138,3 +137,3 @@ // default name of template function is `template`
   res.dependencies.forEach(loaderContext.addDependency);
-  if (isRendering(loaderMethod)) code.getFiles().forEach(loaderContext.addDependency);
+  codeDependencies.forEach(loaderContext.addDependency);
 
@@ -145,9 +144,10 @@ // remove pug method from query data to pass only clean data w/o options
   const locals = merge(loaderOptions.data || {}, resourceParams),
-    funcBody = code.getCode() + (Object.keys(locals).length ? injectExternalVariables(res.body, locals) : res.body),
+    funcBody = Object.keys(locals).length ? injectExternalVariables(res.body, locals) : res.body,
     output = loaderMethod.output(funcBody, locals, esModule);
 
+  //console.log('\n######################## OUT:\n', output);
+
   callback(null, output);
 };
 
-// Asynchronous Loader, see https://webpack.js.org/api/loaders/#asynchronous-loaders
 module.exports = function (content, map, meta) {
@@ -157,3 +157,2 @@ const callback = this.async();
   // save resolve.alias from webpack config for global scope in this module,
-  // see https://webpack.js.org/api/loaders/#this_compiler
   webpackResolveAlias = this._compiler.options.resolve.alias || {};
@@ -160,0 +159,0 @@

src/loader-methods.js

@@ -1,4 +0,1 @@
-// add polyfill for node.js >= 12.0.0 && < 15.0.0
-require('./polyfills/string.replaceAll');
-
 /**
@@ -13,3 +10,2 @@ * @typedef LoaderMethod
 const getExportCode = (esModule) => (esModule ? 'export default ' : 'module.exports=');
-const requireResource = (file) => `' + __asset_resource_require__('${file}') + '`;
 
@@ -33,10 +29,14 @@ /**
     queryParam: 'pug-render',
-    requireResource: (file) => `requireResource(${file})`,
+    // the result of compiled string must be exact as this:
+    //requireResource: (file) => "((file) => `' + require('${file}') + '`)(" + file + ')',
+    // to prevent escaping the 'single quotes' they must be as HTML char '&quot;' encoded and at end decoded:
+    requireResource: (file) => '((file) => `&quot; + require(&quot;${file}&quot;) + &quot;`)(' + file + ')',
     output: (funcBody, locals, esModule) =>
       getExportCode(esModule) +
-      (
-        "'" +
-        new Function('requireResource', funcBody + ';return template;')(requireResource)(locals) +
-        "';"
-      ).replaceAll('__asset_resource_require__', 'require'),
+      "'" +
+      new Function('require', funcBody + ';return template;')(require)(locals)
+        .replace(/\n/g, '\\n')
+        .replace(/'/g, "\\'")
+        .replace(/&amp;quot;/g, "'") +
+      "';",
   },
@@ -53,7 +53,10 @@ {
     // render to pure HTML string at compile time
-    // note: this method should be used with additional loader to handle HTML
+    // notes:
+    //   - this method has not a query parameter for method
+    //   - this method should be used with additional loader to handle HTML
+    //   - the require() function for embedded resources must be removed to allow handle the `src` in `html-loader`
     method: 'html',
     queryParam: null,
     requireResource: (file) => `(${file})`,
-    output: (funcBody, locals, esModule) => new Function('', funcBody + ';return template;')()(locals),
+    output: (funcBody, locals, esModule) => new Function('require', funcBody + ';return template;')(require)(locals),
   },
@@ -60,0 +63,0 @@ ];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

899

increased by0.56%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

45849

decreased by-1.11%

Number of package files

8

decreased by-11.11%

Lines of code

364

decreased by-7.85%

No dependency changes