From 0e3df7e2d2e200401759f258d72aa6fa8a2eaa80 Mon Sep 17 00:00:00 2001
From: Willem Leuverink <willem@leuver.ink>
Date: Wed, 21 Feb 2024 23:38:56 +0100
Subject: [PATCH] update docs

---
 docs/advanced-usage.md | 45 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md
index 5fdd917..4a35787 100644
--- a/docs/advanced-usage.md
+++ b/docs/advanced-usage.md
@@ -59,6 +59,47 @@ export function bar() {
 </script>
 ```
 
+## Reusable options
+
+It can come in handy to share configuration options for npm packages between blade components. Adding another layer of composability for your ui components.
+
+Assuming [path rewriting](https://laravel-bundle.dev/local-modules.html) is set up. Say you have a configuration object you want to pull in to a component in `resources/js/charts/bar-chart-options.js`.
+
+```javascript
+export default {
+  chart: {
+    height: 350,
+    type: "bar",
+  },
+  plotOptions: {
+    bar: {
+      borderRadius: 10,
+      dataLabels: {
+        position: "top",
+      },
+    },
+  },
+};
+```
+
+Then pull it in inside your component. Using AlpineJS & ApexCharts as an example.
+
+```html
+<x-import module="apexcharts" as="ApexCharts" />
+<x-import module="~/charts/bar-chart-options" as="chart-options" inline />
+
+<div
+  x-init="
+    const ApexCharts = await _import('ApexCharts')
+    const options = await _import('chart-options')
+
+    var chart = new ApexCharts($el, options);
+    chart.render();
+"
+  class="w-full xl:w-2/3"
+></div>
+```
+
 ## Using `_import` in a script tag without `type="module"`
 
 All previous examples have used the `_import` function within a script tag with `type='module'`. This instructs the browser to treat the containing code as a module. Practically this means that code gets it's own namespace & you can't reach for variables outside the scope of the script tag.
@@ -85,10 +126,6 @@ It's good practice to use that async function as a listener for the `DOMContentL
 
 > If you reassign the `window.onload` callback directly your browser will only fire the last one, since the callback is overwriten. If you want to use the `onload` event you should use a listener instead: `window.addEventListener('load', () => { /**/ })`
 
-## Import resolution timeout
-
-The `_import` function uses a built-in non blocking polling mechanism in order to account for async & deferred script loading. The import resolution time may be configured milliseconds by updating the config file or via an env variable `BUNDLE_IMPORT_RESOLUTION_TIMEOUT`. This will instruct Bundle how long the `_import` function should wait untill a module is loaded.
-
 ## Minification
 
 All code is minified by default. This can make issues harder to debug at times. Using sourcemaps should relieve this issue. But in case you need it you can disable minification by updating the config file or via an env variable `BUNDLE_MINIFY`.