rblade 0.6.1 → 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +14 -1
- data/README.md +94 -62
- data/REFERENCE.md +138 -0
- data/examples/README.md +3 -0
- data/examples/application/home.rblade +23 -0
- data/examples/components/content/alert.rblade +6 -0
- data/examples/components/content/hero.rblade +14 -0
- data/examples/components/h1.rblade +6 -0
- data/examples/components/p.rblade +14 -0
- data/examples/layouts/app.rblade +16 -0
- data/lib/rblade/compiler/compiles_components.rb +2 -2
- data/lib/rblade/compiler/{compiles_echos.rb → compiles_prints.rb} +11 -10
- data/lib/rblade/compiler/compiles_statements.rb +3 -4
- data/lib/rblade/compiler/statements/{compiles_props.rb → compiles_component_helpers.rb} +29 -10
- data/lib/rblade/compiler/statements/compiles_conditionals.rb +5 -13
- data/lib/rblade/compiler/statements/compiles_form.rb +13 -13
- data/lib/rblade/compiler/statements/compiles_loops.rb +8 -4
- data/lib/rblade/compiler/statements/compiles_once.rb +6 -6
- data/lib/rblade/compiler/statements/compiles_stacks.rb +10 -10
- data/lib/rblade/compiler/tokenizes_statements.rb +1 -1
- data/lib/rblade/compiler.rb +3 -3
- data/lib/rblade/helpers/attributes_manager.rb +7 -11
- data/lib/rblade/helpers/slot_manager.rb +5 -2
- data/rblade.gemspec +1 -1
- metadata +12 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 92480d7f16a4aa87c7b2680f9db5581cac5a2dc9a4e6ffeda163e279ce3910a4
|
4
|
+
data.tar.gz: fe0b611017478bcb7f1a4c12e5deb5356b85dd85cfbc91b63cdee41dd76d8c6d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3c92d262b7b478a88cd377d0f35ff789dc80e18485a0e39f1e2a46a491b3fa5b48fa6562be623dde9a4007d0d58f9e85f6c4cbb8efcbe9b3c6b670dcc0d9cd8c
|
7
|
+
data.tar.gz: f6504a3e463cfd0a51cc8c76a78fc27db62aaace6d517a73f52fd7e1f2ec70d0bc65a2892d8f699fae27673554d624a5dcb60fbfeb2f894bf896c32a7cb95b12
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,16 @@
|
|
1
|
+
## 1.0.1 [2024-08-09]
|
2
|
+
- Automatically detect when properties are used as slots
|
3
|
+
- Change `_required` to `required` in @props
|
4
|
+
|
5
|
+
## 1.0.0 [2024-08-06]
|
6
|
+
- Add quick reference and examples
|
7
|
+
- Add @shouldRender directive
|
8
|
+
- Add support for ERB style `<%==` unsafe prints
|
9
|
+
- Fix bugs with statement argument error handling
|
10
|
+
- Remove deprecated "breakIf" and "nextIf" statements
|
11
|
+
- Rename "echo" compilers to "print"
|
12
|
+
- Update README
|
13
|
+
|
1
14
|
## 0.6.1 [2024-08-02]
|
2
15
|
- Fix broken build
|
3
16
|
|
@@ -56,4 +69,4 @@
|
|
56
69
|
- Add attributes, class and style manager
|
57
70
|
|
58
71
|
## 0.1.0 [2024-07-22]
|
59
|
-
- Initial release
|
72
|
+
- Initial release
|
data/README.md
CHANGED
@@ -1,10 +1,32 @@
|
|
1
|
+
<a name="rblade-templates"></a>
|
1
2
|
# RBlade Templates
|
2
3
|
|
4
|
+
RBlade is a simple, yet powerful templating engine for Ruby on Rails, inspired by [Laravel Blade](https://laravel.com/docs/blade). Unlike other Rails templating engines, RBlade prioritises the use of components and partials within templates.
|
5
|
+
|
6
|
+
RBlade template files use the `.rblade` file extension and are typically stored in the `app/views` directory.
|
7
|
+
|
8
|
+
|
9
|
+
<a name="getting-started"></a>
|
10
|
+
## Getting Started
|
11
|
+
|
12
|
+
Add RBlade to your Rails project by adding it to your Gemfile:
|
13
|
+
|
14
|
+
```
|
15
|
+
bundle add rblade
|
16
|
+
```
|
17
|
+
|
18
|
+
RBlade will automatically be detected and start parsing templates ending in `.rblade`.
|
19
|
+
|
20
|
+
For a quick overview of RBlade's capabilities, refer to the [reference file](REFERENCE.md) or take a look at the [examples](examples/).
|
21
|
+
|
22
|
+
<a name="table-of-contents"></a>
|
23
|
+
## Table of Contents
|
3
24
|
- [RBlade Templates](#rblade-templates)
|
4
|
-
* [
|
25
|
+
* [Getting Started](#getting-started)
|
26
|
+
* [Table of Contents](#table-of-contents)
|
5
27
|
* [Displaying Data](#displaying-data)
|
6
28
|
+ [HTML Entity Encoding](#html-entity-encoding)
|
7
|
-
+ [
|
29
|
+
+ [RBlade and JavaScript Frameworks](#rblade-and-javascript-frameworks)
|
8
30
|
- [The `@verbatim` Directive](#the-at-verbatim-directive)
|
9
31
|
* [RBlade Directives](#rblade-directives)
|
10
32
|
+ [If Statements](#if-statements)
|
@@ -37,15 +59,10 @@
|
|
37
59
|
+ [Method Field](#method-field)
|
38
60
|
* [Stacks](#stacks)
|
39
61
|
|
40
|
-
<a name="introduction"></a>
|
41
|
-
## Introduction
|
42
|
-
|
43
|
-
RBlade is a simple, yet powerful templating engine for Ruby on Rails, inspired by [Laravel Blade](https://laravel.com/docs/blade). Unlike some templating engines, RBlade does not restrict you from using plain Ruby code in your templates. Blade template files use the `.rblade` file extension and are typically stored in the `app/views` directory.
|
44
|
-
|
45
62
|
<a name="displaying-data"></a>
|
46
63
|
## Displaying Data
|
47
64
|
|
48
|
-
You
|
65
|
+
You can display data that is passed to your RBlade views by wrapping the variable in curly braces. For example, given the following controller method:
|
49
66
|
|
50
67
|
```ruby
|
51
68
|
def index
|
@@ -53,16 +70,16 @@ def index
|
|
53
70
|
end
|
54
71
|
```
|
55
72
|
|
56
|
-
You
|
73
|
+
You can display the contents of the `name` variable like so:
|
57
74
|
|
58
75
|
```rblade
|
59
76
|
Hello, {{ name }}.
|
60
77
|
```
|
61
78
|
|
62
79
|
> [!NOTE]
|
63
|
-
> RBlade's `{{ }}` print
|
80
|
+
> RBlade's `{{ }}` print directives are automatically sent through Rails' `h` function to prevent XSS attacks.
|
64
81
|
|
65
|
-
You are not limited to displaying the contents of the variables passed to the view. You
|
82
|
+
You are not limited to displaying the contents of the variables passed to the view. You can also print the results of any Ruby function. In fact, you can put any Ruby code you wish inside of a RBlade print directive:
|
66
83
|
|
67
84
|
```rblade
|
68
85
|
The current UNIX timestamp is {{ Time.now.to_i }}.
|
@@ -71,19 +88,19 @@ The current UNIX timestamp is {{ Time.now.to_i }}.
|
|
71
88
|
<a name="html-entity-encoding"></a>
|
72
89
|
### HTML Entity Encoding
|
73
90
|
|
74
|
-
By default, RBlade `{{ }}`
|
91
|
+
By default, RBlade `{{ }}` directives are automatically sent through Rails' `h` function to prevent XSS attacks. If you do not want your data to be escaped, you can use the following syntax:
|
75
92
|
|
76
93
|
```rblade
|
77
94
|
Hello, {!! name !!}.
|
78
95
|
```
|
79
96
|
|
80
97
|
> [!WARNING]
|
81
|
-
> Be very careful when
|
98
|
+
> Be very careful when printing content that is supplied by users of your application. You should typically use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.
|
82
99
|
|
83
|
-
<a name="
|
84
|
-
###
|
100
|
+
<a name="rblade-and-javascript-frameworks"></a>
|
101
|
+
### RBlade and JavaScript Frameworks
|
85
102
|
|
86
|
-
Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you
|
103
|
+
Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you can use the `@` symbol to inform the RBlade rendering engine an expression should remain untouched. For example:
|
87
104
|
|
88
105
|
```rblade
|
89
106
|
<h1>Laravel</h1>
|
@@ -91,12 +108,12 @@ Since many JavaScript frameworks also use "curly" braces to indicate a given exp
|
|
91
108
|
Hello, @{{ name }}.
|
92
109
|
```
|
93
110
|
|
94
|
-
In this example, the `@` symbol will be removed by
|
111
|
+
In this example, the `@` symbol will be removed by RBlade; however, `{{ name }}` expression will remain untouched by the RBlade engine, allowing it to be rendered by your JavaScript framework.
|
95
112
|
|
96
|
-
The `@` symbol
|
113
|
+
The `@` symbol can also be used to escape RBlade directives:
|
97
114
|
|
98
115
|
```rblade
|
99
|
-
{{--
|
116
|
+
{{-- RBlade template --}}
|
100
117
|
@@if()
|
101
118
|
|
102
119
|
<!-- HTML output -->
|
@@ -106,7 +123,7 @@ The `@` symbol may also be used to escape RBlade directives:
|
|
106
123
|
<a name="the-at-verbatim-directive"></a>
|
107
124
|
#### The `@verbatim` Directive
|
108
125
|
|
109
|
-
If you are displaying JavaScript variables in a large portion of your template, you
|
126
|
+
If you are displaying JavaScript variables in a large portion of your template, you can wrap the HTML in the `@verbatim` directive so that you do not have to prefix each RBlade print directive with an `@` symbol:
|
110
127
|
|
111
128
|
```rblade
|
112
129
|
@verbatim
|
@@ -116,18 +133,18 @@ If you are displaying JavaScript variables in a large portion of your template,
|
|
116
133
|
@endverbatim
|
117
134
|
```
|
118
135
|
|
119
|
-
<a name="
|
136
|
+
<a name="rblade-directives"></a>
|
120
137
|
## RBlade Directives
|
121
138
|
|
122
139
|
In addition to template inheritance and displaying data, RBlade also provides convenient shortcuts for common Ruby control structures, such as conditional statements and loops. These shortcuts provide a very clean, terse way of working with Ruby control structures while also remaining familiar to their ruby counterparts.
|
123
140
|
|
124
141
|
> [!NOTE]
|
125
|
-
> RBlade directives are case insensitive and ignore underscores, so depending on your preference, all of `@
|
142
|
+
> RBlade directives are case insensitive and ignore underscores, so depending on your preference, all of `@endIf`, `@endIf` and `@end_if` are identical.
|
126
143
|
|
127
144
|
<a name="if-statements"></a>
|
128
145
|
### If Statements
|
129
146
|
|
130
|
-
You
|
147
|
+
You can construct `if` statements using the `@if`, `@elseIf`, `@else`, `@endIf`, `@unless`, and `@endUnless` directives. These directives function identically to their Ruby counterparts:
|
131
148
|
|
132
149
|
```rblade
|
133
150
|
@unless(records.nil?)
|
@@ -141,20 +158,20 @@ You may construct `if` statements using the `@if`, `@elseIf`, `@else`, `@endIf`,
|
|
141
158
|
@endUnless
|
142
159
|
```
|
143
160
|
|
144
|
-
In addition to the conditional directives above, the `@blank?`, `defined?`, `@empty?`, `@nil?` and `@present` directives
|
161
|
+
In addition to the conditional directives above, the `@blank?`, `defined?`, `@empty?`, `@nil?` and `@present` directives can be used as convenient shortcuts:
|
145
162
|
|
146
163
|
```rblade
|
147
164
|
@present?(records)
|
148
165
|
// records is defined and is not nil
|
149
166
|
@else
|
150
|
-
//
|
167
|
+
// Since these directives are compiled to if statements, you can also use the @else directive
|
151
168
|
@endempty?
|
152
169
|
```
|
153
170
|
|
154
171
|
<a name="environment-directives"></a>
|
155
172
|
#### Environment Directives
|
156
173
|
|
157
|
-
You
|
174
|
+
You can check if the application is running in the production environment using the `@production` directive:
|
158
175
|
|
159
176
|
```rblade
|
160
177
|
@production
|
@@ -162,7 +179,7 @@ You may check if the application is running in the production environment using
|
|
162
179
|
@endProduction
|
163
180
|
```
|
164
181
|
|
165
|
-
Or, you
|
182
|
+
Or, you can determine if the application is running in a specific environment using the `@env` directive:
|
166
183
|
|
167
184
|
```rblade
|
168
185
|
@env('staging')
|
@@ -238,7 +255,7 @@ for (user in users)
|
|
238
255
|
@endFor
|
239
256
|
```
|
240
257
|
|
241
|
-
You
|
258
|
+
You can also include the continuation or break condition within the directive declaration:
|
242
259
|
|
243
260
|
```rblade
|
244
261
|
@for (user in users)
|
@@ -253,7 +270,7 @@ You may also include the continuation or break condition within the directive de
|
|
253
270
|
<a name="conditional-classes-and-styles"></a>
|
254
271
|
### Conditional Classes & Styles
|
255
272
|
|
256
|
-
The `@class` directive conditionally adds CSS classes. The directive accepts a
|
273
|
+
The `@class` directive conditionally adds CSS classes. The directive accepts a Hash of classes where the key contains the class or classes you wish to add, and the value is a boolean expression:
|
257
274
|
|
258
275
|
```rblade
|
259
276
|
@ruby
|
@@ -271,7 +288,7 @@ The `@class` directive conditionally adds CSS classes. The directive accepts a `
|
|
271
288
|
<span class="p-4 text-gray-500 bg-red"></span>
|
272
289
|
```
|
273
290
|
|
274
|
-
Likewise, the `@style` directive
|
291
|
+
Likewise, the `@style` directive can be used to conditionally add inline CSS styles to an HTML element:
|
275
292
|
|
276
293
|
```rblade
|
277
294
|
@ruby
|
@@ -289,7 +306,7 @@ Likewise, the `@style` directive may be used to conditionally add inline CSS sty
|
|
289
306
|
<a name="additional-attributes"></a>
|
290
307
|
### Additional Attributes
|
291
308
|
|
292
|
-
For convenience, you
|
309
|
+
For convenience, you can use the `@checked` directive to easily indicate if a given HTML checkbox input is "checked". This directive will print `checked` if the provided condition evaluates to `true`:
|
293
310
|
|
294
311
|
```rblade
|
295
312
|
<input type="checkbox"
|
@@ -298,7 +315,7 @@ For convenience, you may use the `@checked` directive to easily indicate if a gi
|
|
298
315
|
@checked(user.active)) />
|
299
316
|
```
|
300
317
|
|
301
|
-
Likewise, the `@selected` directive
|
318
|
+
Likewise, the `@selected` directive can be used to indicate if a given select option should be "selected":
|
302
319
|
|
303
320
|
```rblade
|
304
321
|
<select name="version">
|
@@ -310,13 +327,13 @@ Likewise, the `@selected` directive may be used to indicate if a given select op
|
|
310
327
|
</select>
|
311
328
|
```
|
312
329
|
|
313
|
-
Additionally, the `@disabled` directive
|
330
|
+
Additionally, the `@disabled` directive can be used to indicate if a given element should be "disabled":
|
314
331
|
|
315
332
|
```rblade
|
316
333
|
<button type="submit" @disabled(isDisabled)>Submit</button>
|
317
334
|
```
|
318
335
|
|
319
|
-
Moreover, the `@readonly` directive
|
336
|
+
Moreover, the `@readonly` directive can be used to indicate if a given element should be "readonly":
|
320
337
|
|
321
338
|
```rblade
|
322
339
|
<input type="email"
|
@@ -325,7 +342,7 @@ Moreover, the `@readonly` directive may be used to indicate if a given element s
|
|
325
342
|
@readonly(!user.isAdmin) />
|
326
343
|
```
|
327
344
|
|
328
|
-
In addition, the `@required` directive
|
345
|
+
In addition, the `@required` directive can be used to indicate if a given element should be "required":
|
329
346
|
|
330
347
|
```rblade
|
331
348
|
<input type="text"
|
@@ -337,7 +354,7 @@ In addition, the `@required` directive may be used to indicate if a given elemen
|
|
337
354
|
<a name="the-once-directive"></a>
|
338
355
|
### The `@once` Directive
|
339
356
|
|
340
|
-
The `@once` directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This
|
357
|
+
The `@once` directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This can be useful for pushing a given piece of JavaScript into the page's header using [stacks](#stacks). For example, if you are rendering a given [component](#components) within a loop, you may wish to only push the JavaScript to the header the first time the component is rendered:
|
341
358
|
|
342
359
|
```rblade
|
343
360
|
@once
|
@@ -402,7 +419,7 @@ Components are a way of including sub-views into your templates. To illustrate h
|
|
402
419
|
|
403
420
|
First, we will create a new `alert.rblade` file in the `app/views/components/forms` directory. Templates in the `app/views/components` directory and its subdirectories are are automatically discovered as components, so no further registration is required. Both `.rblade` and `.html.rblade` are valid extensions for RBlade components.
|
404
421
|
|
405
|
-
Once your component has been created, it
|
422
|
+
Once your component has been created, it can be rendered using its tag alias:
|
406
423
|
|
407
424
|
```rblade
|
408
425
|
<x-forms.alert/>
|
@@ -411,7 +428,7 @@ Once your component has been created, it may be rendered using its tag alias:
|
|
411
428
|
<a name="rendering-components"></a>
|
412
429
|
### Rendering Components
|
413
430
|
|
414
|
-
To display a component, you
|
431
|
+
To display a component, you can use a RBlade component tag within one of your RBlade templates. RBlade component tags start with the string `x-` followed by the kebab case name of the component class:
|
415
432
|
|
416
433
|
```rblade
|
417
434
|
{{-- Render the `alert` component in app/views/components/ --}}
|
@@ -458,11 +475,11 @@ You can define a component's data properties using a `@props` directive at the t
|
|
458
475
|
|
459
476
|
```rblade
|
460
477
|
{{-- alert.rblade --}}
|
461
|
-
@props({type: "warning", message:
|
478
|
+
@props({type: "warning", message: required})
|
462
479
|
<div class="{{ type }}">{{ message }}</div>
|
463
480
|
```
|
464
481
|
|
465
|
-
The `@props` directive accepts a
|
482
|
+
The `@props` directive accepts a Hash where the key is the name of the attribute, and the value is the default value for the property. You can use the special `required` value to represent a property with no default that must always be defined:
|
466
483
|
|
467
484
|
```rblade
|
468
485
|
{{-- This will give an error because the alert component requires a message propery --}}
|
@@ -472,14 +489,14 @@ The `@props` directive accepts a `Hash` where the key is the name of the attribu
|
|
472
489
|
All properties in the `@props` directive are automatically removed from `attributes`. Properties with names that aren't valid Ruby variable names or are Ruby reserved keywords are not created as local variables. However, you can reference them via the `attributes` local variable:
|
473
490
|
|
474
491
|
```rblade
|
475
|
-
@props({"for":
|
492
|
+
@props({"for": required, "data-value": nil})
|
476
493
|
<div>{{ attributes[:for] }} {{ attributes[:'data-value'] }}</div>
|
477
494
|
```
|
478
495
|
|
479
496
|
<a name="short-attribute-syntax"></a>
|
480
497
|
#### Short Attribute Syntax
|
481
498
|
|
482
|
-
When passing attributes to components, you
|
499
|
+
When passing attributes to components, you can also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:
|
483
500
|
|
484
501
|
```rblade
|
485
502
|
{{-- Short attribute syntax... --}}
|
@@ -492,7 +509,7 @@ When passing attributes to components, you may also use a "short attribute" synt
|
|
492
509
|
<a name="escaping-attribute-rendering"></a>
|
493
510
|
#### Escaping Attribute Rendering
|
494
511
|
|
495
|
-
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you
|
512
|
+
Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you can use a double colon (`::`) prefix to inform RBlade that the attribute is not a Ruby expression. For example, given the following component:
|
496
513
|
|
497
514
|
```rblade
|
498
515
|
<x-button ::class="{ danger: isDeleting }">
|
@@ -511,13 +528,13 @@ The following HTML will be rendered by RBlade:
|
|
511
528
|
<a name="component-attributes"></a>
|
512
529
|
### Component Attributes
|
513
530
|
|
514
|
-
We've already examined how to pass data attributes to a component; however, sometimes you
|
531
|
+
We've already examined how to pass data attributes to a component; however, sometimes you can need to specify additional HTML attributes, such as `class`, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template. For example, imagine we want to render an `alert` component like so:
|
515
532
|
|
516
533
|
```rblade
|
517
534
|
<x-alert type="error" :message class="mt-4"/>
|
518
535
|
```
|
519
536
|
|
520
|
-
All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute manager". This attribute manager is automatically made available to the component via the `attributes` variable. All of the attributes
|
537
|
+
All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute manager". This attribute manager is automatically made available to the component via the `attributes` variable. All of the attributes can be rendered within the component by printing this variable:
|
521
538
|
|
522
539
|
```rblade
|
523
540
|
<div {{ attributes }}>
|
@@ -528,7 +545,7 @@ All of the attributes that are not part of the component's constructor will auto
|
|
528
545
|
<a name="default-and-merged-attributes"></a>
|
529
546
|
#### Default & Merged Attributes
|
530
547
|
|
531
|
-
Sometimes you
|
548
|
+
Sometimes you can need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you can use the attribute manager's `merge` method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:
|
532
549
|
|
533
550
|
```rblade
|
534
551
|
<div {{ attributes.merge({"class": "alert alert-#{type}"}) }}>
|
@@ -606,19 +623,19 @@ If you need to merge other attributes onto your component, you can chain the `me
|
|
606
623
|
|
607
624
|
The attributes manager is a wrapper around the Ruby Hash class. Unless explicitly overwritten, any methods called on the attributes manager will call that same method on the underlying Hash.
|
608
625
|
|
609
|
-
You
|
626
|
+
You can filter attributes using the `filter` and `slice` methods. These methods call `filter` and `slice` on the underlying Hash and return a new attributes manager with the result.
|
610
627
|
|
611
628
|
```rblade
|
612
629
|
{{ attributes.filter { |k, v| k == 'foo'} }}
|
613
630
|
{{ attributes.slice :foo }}
|
614
631
|
```
|
615
632
|
|
616
|
-
If you would like to check if an attribute is present on the component, you
|
633
|
+
If you would like to check if an attribute is present on the component, you can use the `has?` method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:
|
617
634
|
|
618
635
|
```rblade
|
619
636
|
@if (attributes.has?(:class))
|
620
637
|
<div>Class attribute is present</div>
|
621
|
-
@
|
638
|
+
@endIf
|
622
639
|
```
|
623
640
|
|
624
641
|
If multiple parameters are passed to the `has?` method, the method will determine if all of the given attributes are present on the component:
|
@@ -626,15 +643,15 @@ If multiple parameters are passed to the `has?` method, the method will determin
|
|
626
643
|
```rblade
|
627
644
|
@if (attributes.has?('name', 'class'))
|
628
645
|
<div>All of the attributes are present</div>
|
629
|
-
@
|
646
|
+
@endIf
|
630
647
|
```
|
631
648
|
|
632
|
-
The `has_any?` method
|
649
|
+
The `has_any?` method can be used to determine if any of the given attributes are present on the component:
|
633
650
|
|
634
651
|
```rblade
|
635
652
|
@if (attributes.has_any?('href', ':href', 'v-bind:href'))
|
636
653
|
<div>One of the attributes is present</div>
|
637
|
-
@
|
654
|
+
@endIf
|
638
655
|
```
|
639
656
|
|
640
657
|
<a name="slots"></a>
|
@@ -649,7 +666,7 @@ You will often need to pass additional content to your component via "slots". Th
|
|
649
666
|
</div>
|
650
667
|
```
|
651
668
|
|
652
|
-
We
|
669
|
+
We can pass content to the `slot` by injecting content into the component:
|
653
670
|
|
654
671
|
```rblade
|
655
672
|
<x-alert>
|
@@ -657,18 +674,21 @@ We may pass content to the `slot` by injecting content into the component:
|
|
657
674
|
</x-alert>
|
658
675
|
```
|
659
676
|
|
677
|
+
> [!NOTE]
|
678
|
+
> You can instead use `<//>` as the closing tag of RBlade components; however, this will bypass some of the template sanity checking that the compiler performs.
|
679
|
+
|
660
680
|
Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:
|
661
681
|
|
662
682
|
```rblade
|
663
683
|
{{-- /app/views/components/alert.rblade --}}
|
664
|
-
@props({title:
|
684
|
+
@props({title: required})
|
665
685
|
<span class="alert-title">{{ title }}</span>
|
666
686
|
<div class="alert alert-danger">
|
667
687
|
{{ slot }}
|
668
688
|
</div>
|
669
689
|
```
|
670
690
|
|
671
|
-
You
|
691
|
+
You can define the content of the named slot using the `x-slot` tag. Any content not within an explicit `x-slot` tag will be passed to the component in the `slot` variable:
|
672
692
|
|
673
693
|
```xml
|
674
694
|
<x-alert>
|
@@ -690,14 +710,14 @@ The slot object extends the String interface, so you can invoke a slot's `empty?
|
|
690
710
|
This is default content if the slot is empty.
|
691
711
|
@else
|
692
712
|
{{ slot }}
|
693
|
-
@
|
713
|
+
@endIf
|
694
714
|
</div>
|
695
715
|
```
|
696
716
|
|
697
717
|
<a name="slot-attributes"></a>
|
698
718
|
#### Slot Attributes
|
699
719
|
|
700
|
-
Like RBlade components, you
|
720
|
+
Like RBlade components, you can assign additional [attributes](#component-attributes) to slots such as CSS class names:
|
701
721
|
|
702
722
|
```xml
|
703
723
|
<x-card class="shadow-sm">
|
@@ -713,12 +733,12 @@ Like RBlade components, you may assign additional [attributes](#component-attrib
|
|
713
733
|
</x-card>
|
714
734
|
```
|
715
735
|
|
716
|
-
To interact with slot attributes, you
|
736
|
+
To interact with slot attributes, you can access the `attributes` property of the slot's variable. For more information on how to interact with attributes, please consult the documentation on [component attributes](#component-attributes):
|
717
737
|
|
718
738
|
```rblade
|
719
739
|
@props({
|
720
|
-
"heading":
|
721
|
-
"footer":
|
740
|
+
"heading": required,
|
741
|
+
"footer": required,
|
722
742
|
})
|
723
743
|
|
724
744
|
<div {{ attributes.class('border') }}>
|
@@ -734,6 +754,18 @@ To interact with slot attributes, you may access the `attributes` property of th
|
|
734
754
|
</div>
|
735
755
|
```
|
736
756
|
|
757
|
+
<a name="conditional-rendering"></a>
|
758
|
+
#### Conditional Rendering
|
759
|
+
|
760
|
+
Sometimes, you may wish to return early from a component without printing anything. For example, if you make an error component and no errors are passed in as properties, you might want to skip rendering. You can use the `@shouldRender` directive anywhere within a component to prevent the component from being rendered:
|
761
|
+
|
762
|
+
```rblade
|
763
|
+
{{-- components/error.rblade --}}
|
764
|
+
@props({errors: []})
|
765
|
+
@shouldRender(errors.present?)
|
766
|
+
...
|
767
|
+
```
|
768
|
+
|
737
769
|
<a name="registering-additional-component-directories"></a>
|
738
770
|
### Registering Additional Component Directories
|
739
771
|
|
@@ -822,7 +854,7 @@ RBlade allows you to push to named stacks which can be rendered elsewhere in ano
|
|
822
854
|
@endPush
|
823
855
|
```
|
824
856
|
|
825
|
-
If you would like to `@push` content if a given boolean expression evaluates to `true`, you
|
857
|
+
If you would like to `@push` content if a given boolean expression evaluates to `true`, you can use the `@pushif` directive:
|
826
858
|
|
827
859
|
```rblade
|
828
860
|
@pushIf(shouldPush, 'scripts')
|
@@ -830,7 +862,7 @@ If you would like to `@push` content if a given boolean expression evaluates to
|
|
830
862
|
@endPushIf
|
831
863
|
```
|
832
864
|
|
833
|
-
You
|
865
|
+
You can push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the `@stack` directive:
|
834
866
|
|
835
867
|
```rblade
|
836
868
|
<head>
|