Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
gwleuverink committed Jan 11, 2024
1 parent 87cebff commit 9aad280
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions docs/advanced-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,7 @@ The `<x-bundle />` component bundles your import on the fly using [Bun](https://

> You may pass any attributes a script source accepts, like `defer` or `async`.
Furthermore, you can render the bundle inline by using the `inline` option. This saves an additional request and makes the import available immediately after the script has rendered.

You should apply this with consideration. You will save up on requests, but doing so will increase the initial page load response size.

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

<!-- yields the following script -->

<script data-bundle="alert">
// Your minified bundle
</script>
```

---

After you use <x-bundle /> somewhere in your template a global function `_bundle` will become available on the window object.
After you use `<x-bundle />` somewhere in your template a global function `_bundle` will become available on the window object.

You can use this function to fetch the bundled import by the name you've passed to the `as` argument. The `_bundle` function accepts a optional `export` argument which defaults to 'default'.

Expand All @@ -49,6 +33,22 @@ The `_bundle` function is async & returns a Promise. In order to use this in inl

Please refer to the examples below for a more detailed explanation on how the `_bundle` function can be utilized in different scenarios.

## Inline bundles

You can render the bundle inline by using the `inline` option. This saves an additional request and makes the import available immediately after the script has rendered.

You should apply this with consideration. You will save up on requests, but doing so will increase the initial page load response size.

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

<!-- yields the following script -->

<script data-bundle="alert">
// Your minified bundle
</script>
```

## Path rewriting for local modules

If you want to import modules from any other directory than `node_modules`, you may add a `jsconfig.json` file to your project root with all your path aliases.
Expand Down

0 comments on commit 9aad280

Please sign in to comment.