I really try to go #serverless and #buildless on new smallish JS browser projects.

Ever since I discovered that you can nowadays

<script type="module">

and then import most packages directly in JS with

import foo from "https://unpkg.com/<packagename>@<version>/<file>?module"

(or import the old-fashioned "require" UMD module with the hack described here: https://stackoverflow.com/a/64721256 )

, I start coding away without having to mess with node & build crap. 👍😎

I remember how much I have been laughed at when I said we want #buildless JavaScript, and now it is popping up all over the place. I mean webpack was never just a simple tool, and I still try to avoid magic, big dependencies.

#WebComponents experience :underheart:

:sadness: Browsers don't have the same baseline styles.
:fatyoshi: 2 hours figuring out how to avoid #frameworks and #bundlers.
:AngeryCat: 3 hours of searching framework anyway, only to stumble upon options that either, like #LitElement, have minified bundle without #TS declaration or, like #StencilJS, require building.
:tinking: Ending up writing my own nano-framework with adoptedStyleSheets #polyfill.

#TIL #JavaScript #buildless #AreWeThereYet

After some more digging, I found dreaded polyfills to make #ShadowDOM and #buildless understand each other, also ditching #CSSinJS out:
📜 https://github.com/calebdwilliams/construct-style-sheets
📜 https://github.com/guybedford/es-module-shims#css-modules

One does not simply do #buildless #WebComponents, while employing #ShadowDOM *AND* avoiding #CSSinJS. :blobsweats: I start to sound like insane interop advocate here, can anyone relate? :BlobhajSadReach:

The Modern Web Dev folks are doing some really good work: https://modern-web.dev/blog/introducing-modern-web/

#esm #buildless #web #dev #simplicity