Hi, apologies for the non-issue, more of a question type of post but I couldn't find a htm discussion discussion board. Also apologies for the super noob question, esmodules are very new to me and i'm still trying to wrap my head around the concept.
First a little bit of context:
I am working on a project for a Shopify-hosted store where we are trying to move away from using javascript build processes and everything is built using vanilla js. For certain landing pages that are meant to be immersive experiences with lots of media and elements that need to be preloaded first, the page originally loads in a css-only preloading state and includes a loader script that checks to see if any of the page's main script dependencies exist as singletons in the global scope like gsap or lenis, loads them if they don't exist using a promised based setup and then proceeds to load the main script / hides the preloader. I only mention the fact that it's hosted on Shopify because they recommend that all javascript assets are hosted and served by their CDN's which is the approach we are taking even for script dependencies.
This setup has worked great but i recently started to wonder if there was a way to make reusable, non-build, react-like page components and found very promising libraries like preact / atomico / etc but all non-build options so far seem to revolve around the module concept. The main issue with modules, for me, is that it doesn't play nicely with the whole preloader setup mentioned above. It'll just load and execute as soon as the page loads.
My question is, is there a way to use libraries like htm & preact where they can be picked up and used as singletons from the global scope and without the whole module-based setup? Is this some sort of anti-pattern/bad practice type of deal and that's why I can't seem to find a solution or is there something else happening where this must be setup as modules if we want to take the no-build approach?
eballeste
commented
1 year ago
Hi, apologies for the non-issue, more of a question type of post but I couldn't find a
htmdiscussion discussion board. Also apologies for the super noob question, esmodules are very new to me and i'm still trying to wrap my head around the concept.First a little bit of context: I am working on a project for a Shopify-hosted store where we are trying to move away from using javascript build processes and everything is built using vanilla js. For certain landing pages that are meant to be immersive experiences with lots of media and elements that need to be preloaded first, the page originally loads in a css-only preloading state and includes a loader script that checks to see if any of the page's main script dependencies exist as singletons in the global scope like gsap or lenis, loads them if they don't exist using a promised based setup and then proceeds to load the main script / hides the preloader. I only mention the fact that it's hosted on Shopify because they recommend that all javascript assets are hosted and served by their CDN's which is the approach we are taking even for script dependencies.
This setup has worked great but i recently started to wonder if there was a way to make reusable, non-build, react-like page components and found very promising libraries like preact / atomico / etc but all non-build options so far seem to revolve around the module concept. The main issue with modules, for me, is that it doesn't play nicely with the whole preloader setup mentioned above. It'll just load and execute as soon as the page loads.
My question is, is there a way to use libraries like htm & preact where they can be picked up and used as singletons from the global scope and without the whole module-based setup? Is this some sort of anti-pattern/bad practice type of deal and that's why I can't seem to find a solution or is there something else happening where this must be setup as modules if we want to take the no-build approach?