JavaScript import maps are now supported cross-browser

1. esm.sh

   1 64 3,370 9.5 Go

   A nobuild content delivery network(CDN) for modern web development.

   

   Check out https://esm.sh/#cli for a minimalist yet full featured solution that amends your import map for you. It does require Deno.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. compression-dictionary-transport

   2 8 102 4.1

   

   Bundles have a colossal disadvantages. Change one thing and boom your user is re-downloading a pretty big bundle. Fine grained file resolution means apps can grow & evolve with very little user cost.

   People harp on and on about the benefits of bundles for compression, but man, it's so shortsighted & stupid. It favors only the first-load situation. If your user actually comes back to your app, these advantages all go away, disappear. Personally I'd rather help people that use my app regularly.

   Second, the days of bundles being better at compression are numbered. Work has been ongoing to figure out how to send compression dictionaries separately. With this, 98% of the compression advantage disappears out the window. https://github.com/WICG/compression-dictionary-transport

   Neither of your approaches sounds like what I'd do. Personally I would build an http server that takes raw uncompressed source. When asked for a file the first time, it compresses & builds the dependency maps in parallel, & saves both of these out, maybe a .gz with some xattr on it. Or store that data in memory, whatever. The first user gets a couple extra ms hit, but the server transparently still does the thing. Developer mode is just a tool to watch the file system & clear those caches, nothing more, & can potentially be completely separate.

   Bundles are just so awful. They complicate what used to be an elegant understandable clear world of computing. We can & should try to get back to resources, if it makes sense. And the cards are lining up to make this horrible un-web un-resourceful kludge potentially obsolete. I'm excited we might make the web make sense again for end-users. They deserve to be out of the bad times.

4. webappsec-subresource-integrity

   3 5 72 4.4 HTML

   WebAppSec Subresource Integrity

   

   Seeing this, it reminded me of an interesting topic: caching at browser-level the external libraries used for big performance improvements: https://github.com/w3c/webappsec-subresource-integrity/issue...

5. simpatico

   4 3 8 8.7 JavaScript

   Discontinued Simpatico is an umbrella term for several data-structures and algorithms written in JavaScript

   >Does this mean that in theory i could skip the build/bundling step entirely?

   You can but you must write your app in something the browser understands (js not ts, css not sass etc) and use native modules. For example, here is the test harness for a custom module, written in pure html with no build step: https://github.com/javajosh/simpatico/blob/master/combine2.h.... Here is a more complex (and much older) example from Crockford: https://www.jslint.com/

   And yes, the experience developing this way is quite nice!

6. JSLint

   5 19 3,629 6.0 JavaScript

   JSLint, The JavaScript Code Quality and Coverage Tool

   

   >Does this mean that in theory i could skip the build/bundling step entirely?

   You can but you must write your app in something the browser understands (js not ts, css not sass etc) and use native modules. For example, here is the test harness for a custom module, written in pure html with no build step: https://github.com/javajosh/simpatico/blob/master/combine2.h.... Here is a more complex (and much older) example from Crockford: https://www.jslint.com/

   And yes, the experience developing this way is quite nice!

7. download-esm

   6 1 113 5.1 Python

   Download ESM modules from npm and jsdelivr

   

   This downloads the ESM version of Observable Plot from the jsDelivr CDN, figures out its dependencies, downloads them as well (40 files total!) and rewrites their imports to be local, not CDN paths.

   More details here: https://simonwillison.net/2023/May/2/download-esm/

   I'm not considering adding import maps support: https://github.com/simonw/download-esm/issues/4

8. quickjspp

   7 5 - -

   In Sciter I did just that - JSX is an integral part of JS compiler - patched version of QuickJS : https://gitlab.com/c-smile/quickjspp/-/blob/master/quickjs-j...

   So in Sciter this works out of the box:

9. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

10. sciter-js-sdk

    8 14 - -

11. import-maps

    9 45 2,723 3.1 JavaScript

    How to control the behavior of JavaScript imports

    

    https://github.com/WICG/import-maps/issues/2

12. esbuild

    10 352 38,704 9.1 Go

    An extremely fast bundler for the web

    

    Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:

        deno run --allow-all https://deno.land/x/esbuild@v0.17.18/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230

13. proposal-type-annotations

    11 110 4,311 3.0 JavaScript

    ECMAScript proposal for type syntax that is erased - Stage 1

    

14. lit

    12 173 19,363 8.6 TypeScript

    Lit is a simple library for building fast, lightweight web components.

    

    Lit also requires no build step and is shipped only as standard JS modules. It also uses file extensions in all imports so that the required import map to access all files is very short (one index map + one prefix map * 4 core packages). See https://lit.dev

Suggest a related project