Add `index.js` that autoloads `lib` components

[premail]

Add `index.js` that autoloads `lib` components

[rootwork]

Unfortunately this did not work. I tried this (v1.1.2):

export { default as MjList } from './MjList'
export { default as MjLi } from './MjLi'

Looks the same, right? But when I ran gulp build, I got:

TypeError: Cannot read property 'componentName' of undefined

So to be clear (to myself), it was loading the component files, but wasn't processing the exported default class. These are lines 36-37 in gulpfile.babel.js:

delete require.cache[fullPath]
registerComponent(require(fullPath).default)

Since it was doing everything up to that point, it did actually build the JS files, but they didn't work when I tried using them in a project -- as with the build above, the components weren't getting registered.

[rootwork]

I tried several other things.

In v1.1.3 I tried using the spread operator with old JS syntax:

module.exports = {
  ...require('./MjList'),
  ...require('./MjLi'),
}

This successfully built the components without complaint, but when I tried to use it in a project the components still weren't being registered.

In v1.1.4 I tried adding "files": ["lib"], to package.json but that had no effect.

In v1.1.5 I tried importing the classes that were being exported from the component files before exporting them from the index:

import * as MjList from './MjList'
import * as MjLi from './MjLi'

export default { MjList, MjLi }

Also built successfully, but also failed to register the components when I tried to use it in a project.

Along the way, I tried a bunch of different methods for both importing and exporting, including another old-style syntax for exporting (module.exports = [require('./MjList'), require('./MjLi')]). All of these experiments led to either the build not transpiling (with the missing property TypeError, indicating the component wasn't being loaded, described above) or successfully transpiling but then failing to actually register the components when used in a project.

When I experimented by placing the contents of MjList.js into index.js, it successfully built and worked in a project -- but of course I need MjLi.js too, and they can't be combined into one file given the structure of MJML custom components. So for some reason having index.js pass along these exported classes seems to always fail.

So, for now, I reverted the documentation to point to the two component files individually in .mjmlconfig, which is a pain.

I'm probably overlooking something very simple here, but I was reaching diminishing returns continuing to plow time into this issue for now.

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it is being marked as stale.

Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍

Because this issue is marked as stale, it will be closed and locked in 10 days if no further activity occurs. If you want to prevent it from being closed, just leave a comment.

Thank you for your contributions!

[github-actions]

There hasn't been any activity on this issue recently, and in order to prioritize active issues, it is being marked as stale.

Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by leaving a 👍

Because this issue is marked as stale, it will be closed and locked in 10 days if no further activity occurs. If you want to prevent it from being closed, just leave a comment.

Thank you for your contributions!