diff --git a/docs/introduction.md b/docs/introduction.md index 5aa4bf4..3e74dca 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -8,31 +8,32 @@ image: "/assets/social-square.png" 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. +Bun does all the heavy lifting and Bundle provides the glue between Blade and injects your imports on the client side. -The component bundles your import on the fly and renders a script tag in place. +The component processes your import on the fly and renders a script tag in place. ```html - + ``` ### A bit more in depth -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 `` component. +{: .note } -Bun treats these bundles as being separate builds. This normally would cause collisions with reused tokens inside the window scope. +> Bundle is meant as a tool for Blade centric apps, like [Livewire](https://livewire.laravel.com), to enable code colocation with page specific JavaScript. -This is countered by loading those bundles via a script tag with `type="module"`. Which constraints the code to it's own module scope. +In contrary to how a 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 `` component. -A script tag with `type="module"` makes your script `defer` by default, so they are loaded in parallel & executed in order. +Bun treats these bundles as being separate builds. This would cause collisions with reused tokens inside the window scope, but since Bundle loads your imports via a script tag with `type="module"` the code is constrained to it's own module scope. -When you use the `` 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. +A script tag with `type="module"` also makes it `defer` by default, so they are loaded in parallel & executed in order. -Being this constrained and relying on Bun for al the heavy lifting allows Bundle's code to be extremely thin and surprisingly well testable. +When you use the `` 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 it up and caches it in the `storage/app/bundle` directory. This is then either served over http or rendered inline.