Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
gwleuverink committed Jan 23, 2024
1 parent 40546a0 commit 584c361
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 5 deletions.
8 changes: 7 additions & 1 deletion docs/advanced-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ You should apply this with consideration. You will save up on requests, but doin

<!-- yields the following script -->

<script data-module="apexcharts">
<script type="module" data-module="apexcharts" data-alias="ApexCharts">
// Your minified bundle
</script>
```
Expand Down Expand Up @@ -141,3 +141,9 @@ BundleManager::fake();
```

When you'd like to use Dusk for browser testing you need to run Bundle in order for your tests not to blow up. Simply don't fake the BundleManager in your DuskTestCase.

## CSS Loader

Bun doesn't ship with a css loader. They have it on [the roadmap](https://github.com/oven-sh/bun/issues/159){:target="\_blank"} but no release date is known at this time. We plan to support css loading out-of-the-box as soon as Bun does!

We'd like to experiment with Bun plugin support soon. If that is released before Bun's builtin css loader does, it might be possible to write your own plugin to achieve this.
20 changes: 16 additions & 4 deletions docs/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,34 @@ image: "/assets/social-square.png"

## How it works

The `<x-import />` component bundles your import on the fly using [Bun](https://bun.sh){:target="\_blank"} and renders a script tag in place.
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 injects your imports on the client side.

The <x-import /> component bundles your import on the fly using Bun and renders a script tag in place.

```html
<x-import module="apexcharts" as="ApexCharts" />

<!-- yields the following script -->

<script src="/x-import/e52def31336c.min.js" type="module" data-module="alert" data-alias="ApexCharts"
></script>
<script src="/x-import/e52def31336c.min.js" type="module" data-module="alert" data-alias="ApexCharts"></script>
```

### 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.

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.

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.

Being this constrained and relying on Bun for al the heavy lifting allows Bundle's code to be extremely thin.

<br />

<!--
{: .note }

> You may pass any attributes a script tag would accept, like `defer` or `async`. Note that scripts with `type="module"` are deferred by default.
-->

<br />

Expand Down
10 changes: 10 additions & 0 deletions docs/roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,16 @@ image: "/assets/social-square.png"

Bundle is under active development. If you feel there are features missing or you've got a great idea that's not on on the roadmap please [open a discussion](https://github.com/gwleuverink/bundle/discussions/categories/ideas){:target="\_blank"} on GitHub.

## CSS loader

Bun doesn't ship with a css loader. They have it on [the roadmap](https://github.com/oven-sh/bun/issues/159){:target="\_blank"} but no release date is known at this time. We plan to support css loading out-of-the-box as soon as Bun does!

Plugin support is a feature we'd like to experiment with. If that is released before Bun's builtin css loader does, it might be possible to write your own plugin to achieve this.

## Bun plugin support

We'd like to add 3rd party plugin support and, in the spirit of making things even more meta than they already are, also try to support custom plugins right from inside your `resources` directory.

## Initable exports

When importing a local module, the only method to immidiatly invoke some code is by using the [IIFE export](https://laravel-bundle.dev/local-modules.html#iife-exports) method.
Expand Down

0 comments on commit 584c361

Please sign in to comment.