Proposal to Create an NPM Package

[erikyo]

Since this is primarily a JavaScript script, I'd like to propose to create an NPM package of it and import into src/index.js that module. This idea came to mind because I would like to use it in my theme, where I already have a very similar function but i don't need to use a filter for that, since i can initialize the scripts differently.

In the past, I have created NPM modules for WordPress plugins (e.g., https://github.com/erikyo/color-2-name and https://github.com/erikyo/OH-MY-SVG/), and it has worked perfectly (btw, take a look, the npm package ended up being more successful than the wordpress plugin :/).

[felixarntz]

@erikyo I'm not familiar with publishing a WordPress plugin as an NPM package. Given there are already several avenues for publishing WordPress plugins, I'm wondering whether there are other suitable alternatives. I have already published this as a Composer package at https://packagist.org/packages/felixarntz/fast-smooth-scroll - wouldn't you be able to import it like that in a theme as well?

Note that the plugin isn't purely JavaScript, in fact the preferred approach is CSS-only, and the PHP layer is required to load things in the most efficient manner.

Curious to get your thoughts on this.

[erikyo]

TBH I have never published a composer package 🙂, but I think you can publish it without any problems even if you are installing and using a npm package inside it. The process would involve moving the content of index.js to an npm module and then importing it as a dependency, treating it as a third-party module.

Ideally, your index.js would then look like this:

import fastSmoothScroll from 'fast-smooth-scroll';

( function () {
    if (
        !window.requestAnimationFrame ||
        !window.performance ||
        !window.performance.now ||
        !window.NodeList
    ) {
        return;
    }

    // polyfill forEach
    // https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
    if (!window.NodeList.prototype.forEach) {
    ...
    }

    fastSmoothScroll.init();
})

Your bundled version would still contain the entire script, maintaining its current structure.

It's not super essential obviously it would give you the possibility to use your plugin in different ways. to be honest the CSS-only way it as a limited choice to me because with this one i can't control the scroll duration or add the click to the history (in this way). In my view, the JavaScript approach is more versatile and, generally, preferable.

Let me know if you have any further questions or if there's anything else I can do for helping!