ES6 How to use ?

[monkeymonk]

I can't find how this is supposed to work...

import ScrollPosStyler from "scrollpos-styler";

ScrollPosStyler.init(); // Uncaught TypeError: init is not a function

[mamarmite]

I used :

import ScrollPosStyler from 'scrollpos-styler/scrollPosStyler.js';

The init() is called on DOMContentLoaded event.

[mamarmite]

You must have added the lib to the node_modules and setup the assets accordingly or setup the from based on your files/folders structure.

[acch]

Hi @monkeymonk, does the answer above help?

Just to clarify - in a typical usage scenario there's no need to call the init() function manually. The script is initialized automatically once your DOM is loaded (Immediately-invoked function expression). Refer to the demo for a full working example.

You will, however, need to call the init() function manually in case you're modifying the DOM after it is initially loaded. In that case, ScrollPosStyler.init() needs to be called for the script to parse your DOM (again) in order to find the new element(s). Refer to demo2 for a full working example.

In case you're still stuck please let me know which of the above resembles your use case.

[arichter83]

Dear @acch, thanks for the project! (Danke)

I also don't know how to use this in my NodeJs/React/Typescript/ES6/Meteor application, since it's not uses to global variables.

import ScrollPosStyler from '../../node_modules/scrollpos-styler/scrollPosStyler.js';
console.log(ScrollPosStyler); // undefined

Do you have a quick idea how to solve this?

[acch]

Sorry for the late response - personal matters kept me busy.

To be honest I'm not sure how to answer this. So far, the script is implemented as an IIFE. This means that one can simply include scrollPosStyler.js in his/her HTML an the script will initialize itself automatically. No need to wrap it inside custom JS - I personally consider this the primary use case.

The original way of wrapping the script inside custom JS is by including it first, which will define the global ScrollPosStyler (as shown here). Now I do understand that there's downsides in using global vars, and I do understand that ES6 introduced modules (along with export/import syntax) to circumvent such global vars. But my understanding is that ES6 modules (export/import syntax) is meant to be useful for JS libraries exporting functions and objects to be used by other programs. Hence, I'm not sure that this properly addresses the primary use case "include script in HTML without writing any JS"...

I'm happy to accept proposals on how to make the script work with ES6 export/import syntax, as long as the primary use case mentioned above (automatic initialization without need for custom JS) remains intact. I'd greatly appreciate someone pointing me to examples.

[javinievas]

You can use it like this, as mentioned before:

import ScrollPosStyler from 'scrollpos-styler';

But I've found it not to be initialized always correctly. I needed to force a few scrolls to force it to be initialized, like this:

window.scrollTo(0, 0); 
window.scrollTo(0, 300); 
window.scrollTo(0, 0); 

With this 'trick' works, at least, for me. But, I agree with others, this should be recoded as a module, which exposes a method that allows anyone to call it to do the initialization. That would be a great improvement.

Anyway, thanks for coding such a great script ;-)