Skip to content

Commit e11a764

Browse files
committed
Update README.md
1 parent a0ca840 commit e11a764

File tree

1 file changed

+10
-43
lines changed

1 file changed

+10
-43
lines changed

README.md

Lines changed: 10 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -248,11 +248,9 @@ The most important thing to understand is that the result of folding is a static
248248

249249
Blaze tries to avoid folding in situations where it's most likely to cause bugs but it is not possible to detect all cases. You will need to analyze each component individually and adjust the parameters to configure when folding should be aborted.
250250

251-
This solely depends on how dynamic attributes and slots are used internally.
252-
253251
### Global state
254252

255-
**Components which use global state should never be folded**. This constitutes anything that isn't passed into the component from the outside and instead accessed via a helper function, facade or a blaze directive. Usage of any of these patterns inside the component will produce incorrect results when folded.
253+
**Components that use global state should never be folded**. This constitutes anything that isn't passed into the component from the outside and is instead accessed via a helper function, facade or a blaze directive. Usage of any of these patterns inside the component will produce incorrect results when folded.
256254

257255
| Category | Examples |
258256
|----------|----------|
@@ -264,7 +262,7 @@ This solely depends on how dynamic attributes and slots are used internally.
264262
| Time | `now()`, `Carbon::now()` |
265263
| Security | `@csrf` |
266264

267-
_This applies to internal component code._ It can be okay to pass global state into the component via attributes or slots. However there are exceptions to that as well. We will explore these in the next sections.
265+
> This applies to internal component code. It can be okay to pass global state into the component via attributes or slots. However there are exceptions to that as well. We will explore these in the next sections.
268266
269267
### Static attributes
270268

@@ -419,15 +417,15 @@ Blaze pre-renders the component using the placeholder.
419417
Which results in:
420418

421419
```blade
422-
<button class="bg-red-500 hover:bg-red-400">
420+
<button class="bg-gray-500 hover:bg-gray-400">
423421
SLOT_PLACEHOLDER_1
424422
</button>
425423
```
426424

427425
Before finalizing the output, Blaze substitutes the original expression back into the HTML.
428426

429427
```blade
430-
<button class="bg-red-500 hover:bg-red-400">
428+
<button class="bg-gray-500 hover:bg-gray-400">
431429
{{ $action }}
432430
</button>
433431
```
@@ -532,40 +530,11 @@ $external = $attributes->get('target') === '_blank';
532530
@if($external)
533531
...
534532
@endif
535-
536-
{{ $slot }}
537533
</a>
538534
```
539535

540536
Now any dynamic attributes will cause folding to abort.
541537

542-
## Global State
543-
544-
Folded components are rendered at compile-time. Any global state is captured at compilation, not runtime:
545-
546-
```blade
547-
@blaze(fold: true)
548-
549-
@if(auth()->check())
550-
<span>Welcome, {{ auth()->user()->name }}</span>
551-
@else
552-
<span>Please log in</span>
553-
@endif
554-
```
555-
556-
If a logged-in user triggers compilation, the "Welcome" message gets permanently embedded. All subsequent users see the same content.
557-
558-
**Components that read global state should not be folded.** Common sources of global state:
559-
560-
| Category | Examples |
561-
|----------|----------|
562-
| Authentication | `auth()->check()`, `@auth`, `@guest` |
563-
| Session | `session('key')` |
564-
| Request | `request()->path()`, `request()->is()` |
565-
| Validation | `$errors->has()`, `$errors->first()` |
566-
| Time | `now()`, `Carbon::now()` |
567-
| Security | `@csrf` |
568-
569538
## The Unblaze Directive
570539

571540
When a component is mostly foldable but needs a dynamic section, use `@unblaze` to exclude that section:
@@ -575,21 +544,19 @@ When a component is mostly foldable but needs a dynamic section, use `@unblaze`
575544
576545
@props(['name', 'label'])
577546
578-
<div class="form-group">
547+
<div>
579548
<label>{{ $label }}</label>
580-
<input name="{{ $name }}" class="rounded-md border-gray-300">
549+
<input name="{{ $name }}">
581550
582551
@unblaze(scope: ['name' => $name])
583-
@error($scope['name'])
584-
<p class="text-red-600">{{ $message }}</p>
585-
@enderror
552+
@if($errors->has($scope['name']))
553+
{{ $errors->first($scope['name']) }}
554+
@endif
586555
@endunblaze
587556
</div>
588557
```
589558

590-
The label and input are folded. Error handling remains dynamic.
591-
592-
Variables from the component scope must be passed explicitly using the `scope` parameter.
559+
Note that variables from the component scope must be passed explicitly using the `scope` parameter.
593560

594561
# Reference
595562

0 commit comments

Comments
 (0)