Vanilla JavaScript Module Compatibility

[Nicholas-Westby]

Reading through the documentation, I didn't see any mention of JavaScript modules.

I do see that you are using things like module.exports, but that is a different sort of module (not the type natively supported by browsers).

Is this something that can be added? The main thing that would have to change would be that the script tags would need to use a type of "module" rather than "javascript" (e.g., <script type="module" src="..."></script>).

Taking this configuration example from your docs:

  scripts: [
    './dist/my-angular-components.js',
    './dist/my-react-components.js',
    './dist/my-vue-components.js',
    './dist/my-vanilla-components.js'
  ],

I imagine this could be changed to something like:

  scripts: [
    './dist/my-angular-components.js',
    './dist/my-react-components.js',
    './dist/my-vue-components.js',
    {
      isModule: true,
      './dist/my-vanilla-components.js'
    }
  ],

Alternatively, you could use type: 'module' rather than isModule: true, depending on your style/approach preferences.

[rafaelcamargo]

Hello, @Nicholas-Westby! How are you?

The cases in which you noticed the use of module.exports on the documentation refer to the files pitsby.config.js and *.doc.js. Theses files are consumed by NodeJS. That's the reason why they use CommonJS syntax.

Now, let me know if I understand you properly when you suggest the type module for browsers. As I could understand, you would have some javascript files - written as ES6 module - that you would like to add to the site generated by Pitsby. Is it? If it's right, I confess that I really didn't think about this specific use case.

[Nicholas-Westby]

I'm good, nice to meet you @rafaelcamargo 🙂

Correct, ES6 modules. The use case is that I tend to write JavaScript now that is modular and I don't bundle it as it actually performs better thanks to only using the files necessary and because HTTP/2 means you get less of a penalty for loading a bunch of files.

So I'd like to write the real JavaScript for my frontend components and make use of Pitsby in order to display those components in the context of a design system.

Would you be open to such a modification to Pitsby?

And just to clarify in case there is some question, I'm not proposing changing the internals of Pitsby to use ES6 modules. Only my components would would use ES6 modules. The existing files (e.g., "pitsby.config.js" and "*.doc.js") would still use things like module.exports. I suppose those could also be made into ES6 modules, but that is not the request I am making as part of this GitHub issue.

[rafaelcamargo]

Hey @Nicholas-Westby!

Yes, I'm quite open to such modification. I wouldn't even say modification, since it would be an actual improvement.

I have just open a Pull Request with an implementation to your proposal. In the PR body I describe the API improvement. Please, check it out and let me know if that new ability resolves your use case. If so, I'll release a new minor version containing that configuration improvement :v:

Best!

[Nicholas-Westby]

@rafaelcamargo This looks like a great solution, good thinking regarding a generic solution that allows for any attribute! 👍

I have one minor technical comment that I'll add to the PR momentarily.

[rafaelcamargo]

Resolved by: https://github.com/glorious-codes/glorious-pitsby/pull/224

[rafaelcamargo]

@Nicholas-Westby Just released v1.32.0 with this improvement :v: