@adobe/htlengine has removed withUseDirectory

[kevinolivar]

Current Behavior:

After installing this package, I am getting the following error,

TypeError: runtime.withUseDirectory is not a function

This is happening only if using 'useDir' in webpack config.

I dug into the code of the runtime in @adobe/htlengine and found out that this function was removed in the following commit,

https://github.com/adobe/htlengine/commit/4f0088b7183d3587db2bcba779c980b626f15e66

and 'useResourceLoader' was added instead.

Here the line in the index.js

compiledCode = compiledCode.replace(
      /(runtime\.setGlobal\(resource\);)/,
      `$1\nruntime.withUseDirectory('${settings.useDir}');`
    );

Locally, I renamed the useDir to resourceLoader and call useResourceLoader instead (in my webpack config I string replace the compiled code). However, I am not 100% if the useDir property can be replaced with resourceLoader. I could not find an explanation in the release note. When I tried, nothing happened...I may have missed something though.

Expected Behavior:

I guess the type error to be cleared and useResourceLoader to be used in order to specify the mock folder

Environment:

OS: Mac OS Big Sur Node: 16.11.1 npm: 8.0.0

[backflip]

@kevinolivar, thanks for the report! I will have a look at it and possibly ping @tripodsan if I get stuck anywhere.

[backflip]

@kevinolivar, I have removed the option with https://github.com/backflip/htl-loader/releases/tag/v4.0.0 without adding a new solution. As there is no createResourceLoader exposed in https://github.com/adobe/htlengine/blob/4b3d2175adb96175448ee67d0d040694ebe53999/src/index.js, I'm assuming it is not supposed to be used publicly for now.

[kevinolivar]

@backflip Thanks, then it means one cannot specify path to mock?

[tripodsan]

yes, you need to add a custom resource loader, like here: https://github.com/adobe/htlengine/commit/4f0088b7183d3587db2bcba779c980b626f15e66#diff-67cddf1b21e3c1cdcb0b4fc6b9ef0f2c5a210bf5f1667f17a3edb11d76f4a92dR103

[backflip]

@kevinolivar, not sure what you are referring to with path to mock but for "data files" I'm using moduleImportGenerator.

Let's say I have the following template and my-mock.js is located in mocks/:

<h1 data-sly-use.page="my-mock">${page.title}</h1>

I would use the following loader config:

use: {
  loader: path.resolve("./index.js"),
  options: {
    moduleImportGenerator: (baseDir, varName, id) => {
      const modulePath = path.join(
        __dirname,
        "mocks",
        path.basename(id)
      );

      return `const ${varName} = require('${modulePath}');`;
    }
  }
}

[kevinolivar]

@backflip yes exactly that.

'useDir' was used to set a path to the mocks (data file) and then, used by 'withUseDirectory'. As this function is now removed, I was wondering how to specify a path to the mocks. Previously, I used 'useResourceLoader' and added the path to the mocks as argument. It did not work.

Sorry if I wasn't clear and actually, thanks for the example.

[backflip]

@kevinolivar great to hear! FWIW, I was confused about useResourceLoader, too. I had to play around for quite a bit to figure out that this was not necessarily a replacement for what I had been using withUseDirectory before...