es-module-shims

CSS Module scripts are only currently natively supported in blink based browsers because would you believe it Apple is years behind everyone else on web technology yet again for the millionth time. There is a simple polyfill however in the meantime which means you can actually use it today. https://github.com/guybedford/es-module-shims

not a basic question at all— front end has jumped the shark. you can bypass node, npm install, etc for a prototype entirely in an html file leveraging an import map. this is the importmap i load for all my pages: https://github.com/tylerchilds/plan98/blob/6120e6a80a3d48438... to support faces, i’d add an entry: “facesjs”: “https://esm.sh/facesjs@4.0.0” which should get rid of the import path issue, and to support legacy browsers that still might have that error: https://github.com/guybedford/es-module-shims

The only long term solution I've found that works is to minimize the need for 3rd party dependencies in the first place. I completely gave up on bundling and all forms of optimization beyond that. Turns out it doesn't matter as long as the total amount of source for your site is less than what twitter or Facebook use (it will be). I recently had to take a dep on three.js and a few others items for a side project, and instead of reaching for one of the various toolchains, I grabbed the raw JS/module source and wrote my own import map by hand: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc... Note that you will need an ES module shim for iOS/Safari if you go this path: https://github.com/guybedford/es-module-shims

https://github.com/guybedford/es-module-shims has a polyfill. (But it is fairly large: 53KB raw, 15KB gzipped, 32KB minified, 11KB minified+gzipped. It’s providing a lot of likely-unnecessary functionality. I’d prefer a stripped-down and reworked polyfill that can also be lazily-loaded, controlled by a snippet of at most a few hundred bytes that you can drop into the document, only loading the polyfill in the uncommon case that it’s needed—like how five years ago as part of modernising some of the code of Fastmail’s webmail, I had it fetch and execute core-js before loading the rest iff !Object.values (choosing that as a convenient baseline—see https://www.fastmail.com/blog/using-the-modern-web-platform/... for more details), so that the cost to new browsers of supporting old browsers was a single trivial branch, and maybe fifty bytes in

Safari support is enabled with https://github.com/guybedford/es-module-shims

No problem! There's also a polyfill if you need to support Safari: https://github.com/guybedford/es-module-shims

You can use ES6 imports for JS and CSS directly in the browser, by including es-module-shims[1]. No need for a package manager, transpiler, or build step. <script type="module"> import Pkg from 'https://site.com/pkg.js' import sheet from 'https://site.com/sheet.css' assert { type: 'css' }; </script> 1: https://github.com/guybedford/es-module-shims

I explored using client-side service workers for build-less deployment workflows a while back, but the blocker was the initial visit when the service worker hasn't been installed yet. Ended up using es-module-shim's fetch hook (https://github.com/guybedford/es-module-shims#fetch-hook) instead, which worked quite well. I kept the demo repo around here, in case it's helpful to anyone: https://github.com/lewisl9029/buildless-hot-reload-demo. The repo itself is quite out of date at this point, but my current project, Reflame, is essentially the spiritual successor: https://reflame.app/ Reflame has the same ideals of achieving the developer experience I've always wanted for building client rendered React apps: - instant production deployments (usually <200ms) - instant preview environments that match production in pretty much every imaginable

Yeah, that's expected. It comes from the shim I'm using to support import maps, it's explained why the error is "wanted" here: https://github.com/guybedford/es-module-shims#polyfill-mode I could probably silence it, but since I have examples with that module in the tutorial it felt dishonest to do so.

There is lit-html and lit-element, though you can get tripped up by the difference between props and attributes coming from React JSX where everything is props because it’s all native JS until the DOM render... It’s tricky to recommend them because I’m using web components at work and find the transition from React especially rocky. But they are native and standard, and other frameworks are slowly moving in that direction... I expect React will be the last to adopt them, or they’ll push for spec changes before they do... open-wc is also worth a mention: https://dev.to/thepassle/announcing-open-web-components-5h7 - their guide and setup for using web components is over here: https://open-wc.org/guide/#quickstart You can also technically start using native es modules in browsers, either localhost in Chrome 74+ or via origin whitelist with G