Provide basedir or root option to allow absolute paths for includes

[gerwintown]

Feature Description

First of all, thank you for your work on this project. I am migrating from ng-cli-pug-loader (thanks to your helpful reply on one of its issue threads) following the upgrade to Angular 12 and think this implementation is very nice. I did run into one big issue however but it seems like it should be pretty easy to solve.

Pug allows the use of 'include" to import pug templates from elsewhere in the source code. It is very convenient to be able to use absolute paths, relative to the root or base of the project, for these includes.

The former solution, ng-cli-pug-loader, did allow this style for includes, my project relied on it heavily. Btw, this project also had some issues with pug includes, see below for more info on that.

The dependency simple-pug-loader allows this style as well, however you have to provide that value for the basedir or root option in the loader config:

...
const addPugRules = (config) => {
     return webpack_merge_1.merge(config, {
        module: {
            rules: [
                {
                    test: /\.(pug|jade)$/,
                    use: [
                        { loader: 'apply-loader' },
                        { 
                            loader: 'simple-pug-loader', 
                            options: {
                                basedir: config.context // '/srv/deeply/nested/path/to/project/app'
                            }
                        }
                    ]
                }
            ]
        }
     });
  };
...

I am not entirely sure if this is actually an issue with the simple-pug-loader dependency or what, but it seems modifying the loader rules created by ngx-pug-builder's util.js file takes care of the problem for me at least.

FYI, I also noticed that the former project, ng-cli-pug-loader, had some issues with includes, specifically with apply-loader per this issue, and this was their solution:

function getPugLoaderRules(): string {
  const partialRegex = /\.(include|partial)\.(pug|jade)$/;
  return `
    {
      test: /\\.(pug|jade)$/,
      exclude: ${partialRegex},
      use: [
        { loader: "apply-loader" },
        { loader: "pug-loader" }
      ]
    },
    {
      test: ${partialRegex},
      loader: "pug-loader"
    },`.replace(/\s+/gm, ' ');
}

I'm not 100% clear on the why and how or if this even address the problem I am discussing or a different one, but hoping you know more than me, maybe you can make use of this information.

Let me know if there is anything else I can do, am interested to see how you think this should be addressed if at all.

Thanks again.

Use Case

I can keep my includes like so:

include /src/theme/templates/mixins/shared.include.pug

Instead of what would otherwise be a nightmare:

include ../../../../../../theme/templates/mixins/shared.include.pug

[gerwintown]

PS, I might have labeled this a bug instead if I had the option, but like I said, I don't know if this is really more an issue belonging to simple-pug-loader or what, all I know is they do provide the ability to pass the correct options object with the rules config, and everything is documented.

This all began when I was unable to compile or serve with my includes like so:

include /src/theme/templates/mixins/shared.include.pug

For the files which contained those includes, the following error would return when attempting to compile:

Error: Module build failed (from ./node_modules/simple-pug-loader/index.js):
[ng] Error: the "basedir" option is required to use includes and extends with "absolute" paths
[ng]     at /srv/project/client/src/app/mods/com/comps/meta/view/com.meta.view.comp.pug line 1
[ng]     at Function.resolve (/srv/project/client/node_modules/pug-load/index.js:73:11)
[ng]     at Object.resolve (/srv/project/client/node_modules/pug/lib/index.js:153:19)
[ng]     at /srv/project/client/node_modules/pug-load/index.js:26:26
[ng]     at walkAST (/srv/project/client/node_modules/pug-load/node_modules/pug-walk/index.js:26:18)
[ng]     at /srv/project/client/node_modules/pug-load/node_modules/pug-walk/index.js:112:20
[ng]     at Array.reduce (<anonymous>)
[ng]     at walkAndMergeNodes (/srv/project/client/node_modules/pug-load/node_modules/pug-walk/index.js:111:18)
[ng]     at walkAST (/srv/project/client/node_modules/pug-load/node_modules/pug-walk/index.js:40:19)
[ng]     at load (/srv/project/client/node_modules/pug-load/index.js:13:10)
[ng]     at Function.loadString [as string] (/srv/project/client/node_modules/pug-load/index.js:55:10)
[ng]     at compileBody (/srv/project/client/node_modules/pug/lib/index.js:82:18)
[ng]     at Object.exports.compileClientWithDependenciesTracked (/srv/project/client/node_modules/pug/lib/index.js:317:16)
[ng]     at Object.module.exports (/srv/project/client/node_modules/simple-pug-loader/index.js:86:29)

This is the relevant piece of code for simple-pug-loader, index.js:

const pugOptions = {
      filename,
      doctype: options.doctype || 'html',
      pretty: options.pretty,
      self: options.self,
      compileDebug: loaderContext.debug || false,
      globals: ['require'].concat(options.globals || []),
      name: 'template',
      inlineRuntimeFunctions: false,
      filters: options.filters,
      plugins: [plugin].concat(options.plugins || []),
      basedir: options.root || options.basedir
    };

You can see how if no options are passed, basedir will be undefined. I do not have any idea where it goes from there to determine when basedir is actually required.

Anyway, just more info for you.

[lekhmanrus]

Hi @gerwintown,
Thank you! That is a great idea. Just released a new version and added documentation to Readme file. 🙂
Please see Options here.