diff --git a/docs/local-modules.md b/docs/local-modules.md index 024b7ea..a54c6d4 100644 --- a/docs/local-modules.md +++ b/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,27 +44,25 @@ In order to use this script directly in your blade views, you simply need to imp ``` -## 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 `` 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 `` component combined with the `init` prop to evaluate this function immediately after it loads. Without the need of calling the `_import` function manually. ```html - + ``` 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. @@ -71,17 +70,17 @@ This can be used in a variety of creative ways. For example for swapping out Lar ```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 - +