add initable exports to docs

docs/local-modules.md

@@ -5,6 +5,7 @@ image: "/assets/social-square.png"
 ---
 
 {: .note }
+
 > Bundle is meant as a tool for Blade centric apps, like [Livewire](https://livewire.laravel.com), to enable colocation of page specific JavaScript inside Blade. Preferably the bulk your code should live inline in a script tag or in a [Alpine](https://alpinejs.dev) component.
 >
 > Local modules are a place to put boilerplate code. Like importing a single module & doing some setup, loading plugins etc. Writing complex code in here is discouraged. You should put that a inline script within the same component/partial that consumes it instead.
@@ -43,45 +44,43 @@ In order to use this script directly in your blade views, you simply need to imp
 </script>
 ```
 
-## IIFE exports
-
-**Beta**
+## Initable exports
 
 You can use this mechanism to immediatly execute some code to, for example, bootstrap & import other libraries.
 
-Bundle's primary goal is to get imports inside your Blade template. While the IIFE strategy can be very powerful, it is not the place to put a lot of business code since can be a lot harder to debug.
+Bundle's primary goal is to get imports inside your Blade template. While this strategy can be very powerful, it is not the place to put a lot of business code since can be a lot harder to debug.
 
-Consider the following example file `resources/js/immediately-invoked.js`:
+Consider the following example file `resources/js/hello-world.js`:
 
 ```javascript
-export default (() => {
+export default () => {
   alert("Hello World!");
-})();
+};
 ```
 
-Then in your template you can use the `<x-import />` component to evaluate this function. Without the need of calling the `_import` function. Note this only works with a [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE){:target="\_blank"}
+Then in your template you can use the `<x-import />` component combined with the `init` prop to evaluate this function immediately after it loads. Without the need of calling the `_import` function manually.
 
 ```html
 <!-- User will be alerted with 'Hello World' -->
-<x-import module="~/immediately-invoked" />
+<x-import module="~/hello-world" init />
 ```
 
 This can be used in a variety of creative ways. For example for swapping out Laravel's default `bootstrap.js` for an approach where you only pull in a configured library when you need it.
 
 ```javascript
 import axios from "axios";
 
-export default (() => {
+export default () => {
   window.axios = axios;
 
   window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
-})();
+};
 ```
 
 When importing this module you can omit the `as` prop. Axios will be available on the window object since the function is evaluated on import.
 
 ```html
-<x-import module="~/bootstrap/axios" />
+<x-import module="~/bootstrap/axios" init />
 
 <script type="module">
   axios
@@ -96,9 +95,3 @@ Note that your consuming script still needs to be of `type="module"` otherwise `
 {: .warning }
 
 > Code splitting is [not supported](https://laravel-bundle.dev/caveats.html#code-splitting). Be careful when importing modules in your local scripts like this. When two script rely on the same dependency, it will be included in both bundles. This approach is meant to be used as a method to allow setup of more complex libraries. It is recommended to place business level code inside your templates instead.
-
-## Initable exports / components
-
-An alternative API is possible that would make it a bit easier to structure your code in case you need IIFE behaviour in object exports. This would be done by use of a `init` option on the `<x-import/>` component.
-
-Check out [the roadmap](https://laravel-bundle.dev/roadmap.html) to see what we've got planned for Bundle!