From 8edf9f6422b49dcba1a5621d11b91692007fda4a Mon Sep 17 00:00:00 2001 From: Willem Leuverink Date: Wed, 17 Jan 2024 16:18:24 +0100 Subject: [PATCH] update page order --- docs/advanced-usage.md | 91 -------------------------------------- docs/caveats.md | 2 +- docs/integrations/index.md | 2 +- docs/production-builds.md | 2 +- docs/roadmap.md | 2 +- 5 files changed, 4 insertions(+), 95 deletions(-) diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md index a2dd1b8..d9390bb 100644 --- a/docs/advanced-usage.md +++ b/docs/advanced-usage.md @@ -30,97 +30,6 @@ If a module supports per method exports, like `lodash` does, it is recomended to ``` -## 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. - -```json -{ - "compilerOptions": { - "paths": { - "~/*": ["./resources/js/*"] - } - } -} -``` - -Consider the following example script `resources/js/alert.js`: - -```javascript -export default function alertProxy(message) { - alert(message); -} -``` - -In order to use this script directly in your blade views, you simply need to import it using the `` component. - -```html - - - -``` - -## Self evaluating exports - -**Beta** - -You can use this mechanism to immediatly execute some code or to bootstrap & import other libraries. - -Consider the following example the following file `resources/js/immediately-invoked.js` - -```javascript -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"} - -```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. - -```javascript -import axios from "axios"; - -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 - - - -``` - -Note that your consuming script still needs to be of `type="module"` otherwise `window.axios` will be undefined. - -{: .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. - -Please note 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. - -{: .note } - -> Bundle is meant as a tool for Blade centric apps, like [Livewire](https://livewire.laravel.com), to enable code colocation with page specific JavaScript. Preferably the bulk of custom code should live inline in a script tag or in a [Alpine]((https://alpinejs.dev)) component. - ## Sourcemaps Sourcemaps are disabled by default. You may enable this by setting `BUNDLE_SOURCEMAPS_ENABLED` to true in your env file or by publishing and updating the bundle config. diff --git a/docs/caveats.md b/docs/caveats.md index 77f4efe..b40bf56 100644 --- a/docs/caveats.md +++ b/docs/caveats.md @@ -1,5 +1,5 @@ --- -nav_order: 6 +nav_order: 7 title: Caveats image: "/assets/social-square.png" --- diff --git a/docs/integrations/index.md b/docs/integrations/index.md index c18c50d..006ea8c 100644 --- a/docs/integrations/index.md +++ b/docs/integrations/index.md @@ -1,5 +1,5 @@ --- -nav_order: 5 +nav_order: 6 has_children: true title: Integration examples image: "/assets/social-square.png" diff --git a/docs/production-builds.md b/docs/production-builds.md index 665f234..4fd0d5f 100644 --- a/docs/production-builds.md +++ b/docs/production-builds.md @@ -1,5 +1,5 @@ --- -nav_order: 4 +nav_order: 5 title: Production builds image: "/assets/social-square.png" --- diff --git a/docs/roadmap.md b/docs/roadmap.md index 425c720..e8d6871 100644 --- a/docs/roadmap.md +++ b/docs/roadmap.md @@ -1,5 +1,5 @@ --- -nav_order: 7 +nav_order: 8 title: Roadmap image: "/assets/social-square.png" ---