wip

docs/introduction.md

@@ -6,7 +6,7 @@ image: "/assets/social-square.png"
 
 ## How it works
 
-Bundle facilitates JavaScript imports inside Blade using [Bun](https://bun.sh){:target="\_blank"}. 
+Bundle facilitates JavaScript imports inside Blade using [Bun](https://bun.sh){:target="\_blank"}.
 
 Bun does all the heavy lifting. Bundle provides the glue between Blade and Bun and injects your imports on the client side.
 
@@ -20,15 +20,19 @@ The <x-import /> component bundles your import on the fly and renders a script t
 <script src="/x-import/e52def31336c.min.js" type="module" data-module="alert" data-alias="ApexCharts"></script>
 ```
 
-### In depth
+### A bit more in depth
 
-In contrary to how an entire JavaScript app would be bundled at once, this package creates tiny bundles based on the props you pass to the `<x-import />` component.
+In contrary to how an entire JavaScript app would be bundled, this package creates tiny bundles usually only consisting of one module each, depending on the props you pass to the `<x-import />` component.
 
-Bun treats these bundles as being separate builds. This normally would cause collisions with reused tokens inside the window scope but this is countered by loading those bundles via a script tag with `type="module"`. This constraints the code to it's own scope and makes the script be deferred automatically.
+Bun treats these bundles as being separate builds. This normally would cause collisions with reused tokens inside the window scope.
 
-When you use the `<x-import />` component Bundle constructs a small JS script containing your desired module & a tiny bit of code to expose the module on the page. It then bundles the entire thing up and caches it in the `storage/bundle` directory. This is then either served over http or rendered inline.
+This is countered by loading those bundles via a script tag with `type="module"`. Which constraints the code to it's own module scope.
 
-Being this constrained and relying on Bun for al the heavy lifting allows Bundle's code to be extremely thin.
+A script tag with `type="module"` makes your script `defer` by default, so they are loaded in parallel & executed in order.
+
+When you use the `<x-import />` component Bundle constructs a small JS script that imports the desired module and exposes it on the page, along with the `_import` helper function. It then bundles the entire thing up and caches it in the `storage/bundle` directory. This is then either served over http or rendered inline.
+
+Being this constrained and relying on Bun for al the heavy lifting allows Bundle's code to be extremely thin and surprisingly well testable.
 
 <br />