preact as global singleton for no-build components?

[eballeste]

Hi, 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 all third-party 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 while hosted in skypackage or unkpg. 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 preact/htm where they can be hosted locally, loaded, and picked up/used as singletons from the global scope, 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?

[rschristian]

Is this all you're looking for?

https://jsfiddle.net/t9xy01kh/1/

It'll just load and execute as soon as the page loads.

Import maps may be of interest. Define once, everything else will just consume from it.

https://jsfiddle.net/aeghk5p8/

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?

It's not really clear to me why you think ESM will not work for your situation, or why you're trying to control module loading the way you are, but yes, ESM is the way the ecosystem is going and it's going to generally be nicer to lean into built-in functionality than trying to build it out yourself.

[eballeste]

hi yes! sorry, i just happened to notice the npm build scripts in the package.json file and built that standalone umd version, works perfectly, thanks!

im mostly a front-end dev and before learning about esm, which was yesterday, this is how i preloaded my assets/built my landing pages while maintaining a no-build approach. also, because this is shopify, dynamic page sections can be embedded into each page which might or might not also try to load the same dependency. this was my way of trying to avoid loading a script more than once.

thanks for pointing me in the right direction, import maps look especially promising!

[rschristian]

Glad it could be of some help!

UMD is definitely the keyword to be looking for here and everything under the sun provides it as a build target usually -- Preact isn't unique there, if you feel something else suites your needs better.

also, because this is shopify, dynamic page sections can be embedded into each page which might or might not also try to load the same dependency. this was my way of trying to avoid loading a script more than once.

Gotcha! Makes sense