rblade 0.6.1 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b46e864d0ce53aee73ce1353a29f538c54954a4afeb988de4975b64076d5fe3c
-  data.tar.gz: 12a74fcc836959872de298418892c16b89ce5690d63cb1def6be4c7cadb6a51a
+  metadata.gz: 92480d7f16a4aa87c7b2680f9db5581cac5a2dc9a4e6ffeda163e279ce3910a4
+  data.tar.gz: fe0b611017478bcb7f1a4c12e5deb5356b85dd85cfbc91b63cdee41dd76d8c6d
 SHA512:
-  metadata.gz: b824b61c6fc8d08f57f09de311d4b9d0dfcf2d236712eb5aa5664f27d2819083e66488518e9fa21eb6f8360f332e64676e2ee01f02979d08effdb746eddd1415
-  data.tar.gz: 3c47fc2906be91c9a908c022a57a3222366142479c2167173605e0d31db9bdceaf0bca10a7a58ae9273d0fff5999679c943b92af204f7cc0448ce1e48146fafd
+  metadata.gz: 3c92d262b7b478a88cd377d0f35ff789dc80e18485a0e39f1e2a46a491b3fa5b48fa6562be623dde9a4007d0d58f9e85f6c4cbb8efcbe9b3c6b670dcc0d9cd8c
+  data.tar.gz: f6504a3e463cfd0a51cc8c76a78fc27db62aaace6d517a73f52fd7e1f2ec70d0bc65a2892d8f699fae27673554d624a5dcb60fbfeb2f894bf896c32a7cb95b12

data/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.0.1 [2024-08-09]
+- Automatically detect when properties are used as slots
+- Change `_required` to `required` in @props
+
+## 1.0.0 [2024-08-06]
+- Add quick reference and examples
+- Add @shouldRender directive
+- Add support for ERB style `<%==` unsafe prints
+- Fix bugs with statement argument error handling
+- Remove deprecated "breakIf" and "nextIf" statements
+- Rename "echo" compilers to "print"
+- Update README
+
 ## 0.6.1 [2024-08-02]
 - Fix broken build
 
@@ -56,4 +69,4 @@
 - Add attributes, class and style manager
 
 ## 0.1.0 [2024-07-22]
-- Initial release
+- Initial release

data/README.md

@@ -1,10 +1,32 @@
+<a name="rblade-templates"></a>
 # RBlade Templates
 
+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.
+
+RBlade template files use the `.rblade` file extension and are typically stored in the `app/views` directory.
+
+
+<a name="getting-started"></a>
+## Getting Started
+
+Add RBlade to your Rails project by adding it to your Gemfile:
+
+```
+bundle add rblade
+```
+
+RBlade will automatically be detected and start parsing templates ending in `.rblade`.
+
+For a quick overview of RBlade's capabilities, refer to the [reference file](REFERENCE.md) or take a look at the [examples](examples/).
+
+<a name="table-of-contents"></a>
+## Table of Contents
 - [RBlade Templates](#rblade-templates)
-  * [Introduction](#introduction)
+  * [Getting Started](#getting-started)
+  * [Table of Contents](#table-of-contents)
   * [Displaying Data](#displaying-data)
     + [HTML Entity Encoding](#html-entity-encoding)
-    + [Blade and JavaScript Frameworks](#blade-and-javascript-frameworks)
+    + [RBlade and JavaScript Frameworks](#rblade-and-javascript-frameworks)
       - [The `@verbatim` Directive](#the-at-verbatim-directive)
   * [RBlade Directives](#rblade-directives)
     + [If Statements](#if-statements)
@@ -37,15 +59,10 @@
     + [Method Field](#method-field)
   * [Stacks](#stacks)
 
-<a name="introduction"></a>
-## Introduction
-
-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.
-
 <a name="displaying-data"></a>
 ## Displaying Data
 
-You may display data that is passed to your RBlade views by wrapping the variable in curly braces. For example, given the following controller method:
+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:
 
 ```ruby
 def index
@@ -53,16 +70,16 @@ def index
 end
 ```
 
-You may display the contents of the `name` variable like so:
+You can display the contents of the `name` variable like so:
 
 ```rblade
 Hello, {{ name }}.
 ```
 
 > [!NOTE]  
-> RBlade's `{{ }}` print statements are automatically sent through Rails' `h` function to prevent XSS attacks.
+> RBlade's `{{ }}` print directives are automatically sent through Rails' `h` function to prevent XSS attacks.
 
-You are not limited to displaying the contents of the variables passed to the view. You may also print the results of any Ruby function. In fact, you can put any Ruby code you wish inside of a RBlade print directive:
+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:
 
 ```rblade
 The current UNIX timestamp is {{ Time.now.to_i }}.
@@ -71,19 +88,19 @@ The current UNIX timestamp is {{ Time.now.to_i }}.
 <a name="html-entity-encoding"></a>
 ### HTML Entity Encoding
 
-By default, RBlade `{{ }}` statements are automatically sent through Rails' `h` function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:
+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:
 
 ```rblade
 Hello, {!! name !!}.
 ```
 
 > [!WARNING]  
-> Be very careful when echoing 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.
+> 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.
 
-<a name="blade-and-javascript-frameworks"></a>
-### Blade and JavaScript Frameworks
+<a name="rblade-and-javascript-frameworks"></a>
+### RBlade and JavaScript Frameworks
 
-Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the `@` symbol to inform the RBlade rendering engine an expression should remain untouched. For example:
+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:
 
 ```rblade
 <h1>Laravel</h1>
@@ -91,12 +108,12 @@ Since many JavaScript frameworks also use "curly" braces to indicate a given exp
 Hello, @{{ name }}.
 ```
 
-In this example, the `@` symbol will be removed by Blade; however, `{{ name }}` expression will remain untouched by the RBlade engine, allowing it to be rendered by your JavaScript framework.
+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.
 
-The `@` symbol may also be used to escape RBlade directives:
+The `@` symbol can also be used to escape RBlade directives:
 
 ```rblade
-{{-- Blade template --}}
+{{-- RBlade template --}}
 @@if()
 
 <!-- HTML output -->
@@ -106,7 +123,7 @@ The `@` symbol may also be used to escape RBlade directives:
 <a name="the-at-verbatim-directive"></a>
 #### The `@verbatim` Directive
 
-If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the `@verbatim` directive so that you do not have to prefix each Blade print directive with an `@` symbol:
+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:
 
 ```rblade
 @verbatim
@@ -116,18 +133,18 @@ If you are displaying JavaScript variables in a large portion of your template,
 @endverbatim
 ```
 
-<a name="blade-directives"></a>
+<a name="rblade-directives"></a>
 ## RBlade Directives
 
 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.
 
 > [!NOTE]  
-> RBlade directives are case insensitive and ignore underscores, so depending on your preference, all of `@endif`, `@endIf` and `@end_if` are identical.
+> RBlade directives are case insensitive and ignore underscores, so depending on your preference, all of `@endIf`, `@endIf` and `@end_if` are identical.
 
 <a name="if-statements"></a>
 ### If Statements
 
-You may construct `if` statements using the `@if`, `@elseIf`, `@else`, `@endIf`, `@unless`, and `@endUnless` directives. These directives function identically to their Ruby counterparts:
+You can construct `if` statements using the `@if`, `@elseIf`, `@else`, `@endIf`, `@unless`, and `@endUnless` directives. These directives function identically to their Ruby counterparts:
 
 ```rblade
 @unless(records.nil?)
@@ -141,20 +158,20 @@ You may construct `if` statements using the `@if`, `@elseIf`, `@else`, `@endIf`,
 @endUnless
 ```
 
-In addition to the conditional directives above, the `@blank?`, `defined?`, `@empty?`, `@nil?` and `@present` directives may be used as convenient shortcuts:
+In addition to the conditional directives above, the `@blank?`, `defined?`, `@empty?`, `@nil?` and `@present` directives can be used as convenient shortcuts:
 
 ```rblade
 @present?(records)
     // records is defined and is not nil
 @else
-    // These directives are shortcuts to if statements so @else may be used
+    // Since these directives are compiled to if statements, you can also use the @else directive
 @endempty?
 ```
 
 <a name="environment-directives"></a>
 #### Environment Directives
 
-You may check if the application is running in the production environment using the `@production` directive:
+You can check if the application is running in the production environment using the `@production` directive:
 
 ```rblade
 @production
@@ -162,7 +179,7 @@ You may check if the application is running in the production environment using
 @endProduction
 ```
 
-Or, you may determine if the application is running in a specific environment using the `@env` directive:
+Or, you can determine if the application is running in a specific environment using the `@env` directive:
 
 ```rblade
 @env('staging')
@@ -238,7 +255,7 @@ for (user in users)
 @endFor
 ```
 
-You may also include the continuation or break condition within the directive declaration:
+You can also include the continuation or break condition within the directive declaration:
 
 ```rblade
 @for (user in users)
@@ -253,7 +270,7 @@ You may also include the continuation or break condition within the directive de
 <a name="conditional-classes-and-styles"></a>
 ### Conditional Classes & Styles
 
-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:
+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:
 
 ```rblade
 @ruby
@@ -271,7 +288,7 @@ The `@class` directive conditionally adds CSS classes. The directive accepts a `
 <span class="p-4 text-gray-500 bg-red"></span>
 ```
 
-Likewise, the `@style` directive may be used to conditionally add inline CSS styles to an HTML element:
+Likewise, the `@style` directive can be used to conditionally add inline CSS styles to an HTML element:
 
 ```rblade
 @ruby
@@ -289,7 +306,7 @@ Likewise, the `@style` directive may be used to conditionally add inline CSS sty
 <a name="additional-attributes"></a>
 ### Additional Attributes
 
-For convenience, you may 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`:
+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`:
 
 ```rblade
 <input type="checkbox"
@@ -298,7 +315,7 @@ For convenience, you may use the `@checked` directive to easily indicate if a gi
   @checked(user.active)) />
 ```
 
-Likewise, the `@selected` directive may be used to indicate if a given select option should be "selected":
+Likewise, the `@selected` directive can be used to indicate if a given select option should be "selected":
 
 ```rblade
 <select name="version">
@@ -310,13 +327,13 @@ Likewise, the `@selected` directive may be used to indicate if a given select op
 </select>
 ```
 
-Additionally, the `@disabled` directive may be used to indicate if a given element should be "disabled":
+Additionally, the `@disabled` directive can be used to indicate if a given element should be "disabled":
 
 ```rblade
 <button type="submit" @disabled(isDisabled)>Submit</button>
 ```
 
-Moreover, the `@readonly` directive may be used to indicate if a given element should be "readonly":
+Moreover, the `@readonly` directive can be used to indicate if a given element should be "readonly":
 
 ```rblade
 <input type="email"
@@ -325,7 +342,7 @@ Moreover, the `@readonly` directive may be used to indicate if a given element s
   @readonly(!user.isAdmin) />
 ```
 
-In addition, the `@required` directive may be used to indicate if a given element should be "required":
+In addition, the `@required` directive can be used to indicate if a given element should be "required":
 
 ```rblade
 <input type="text"
@@ -337,7 +354,7 @@ In addition, the `@required` directive may be used to indicate if a given elemen
 <a name="the-once-directive"></a>
 ### The `@once` Directive
 
-The `@once` directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This may 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:
+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:
 
 ```rblade
 @once
@@ -402,7 +419,7 @@ Components are a way of including sub-views into your templates. To illustrate h
 
 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.
 
-Once your component has been created, it may be rendered using its tag alias:
+Once your component has been created, it can be rendered using its tag alias:
 
 ```rblade
 <x-forms.alert/>
@@ -411,7 +428,7 @@ Once your component has been created, it may be rendered using its tag alias:
 <a name="rendering-components"></a>
 ### Rendering Components
 
-To display a component, you may use a Blade component tag within one of your Blade templates. Blade component tags start with the string `x-` followed by the kebab case name of the component class:
+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:
 
 ```rblade
 {{-- 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
 
 ```rblade
 {{-- alert.rblade --}}
-@props({type: "warning", message: _required})
+@props({type: "warning", message: required})
 <div class="{{ type }}">{{ message }}</div>
 ```
 
-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:
+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:
 
 ```rblade
 {{-- 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
 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:
 
 ```rblade
-@props({"for": _required, "data-value": nil})
+@props({"for": required, "data-value": nil})
 <div>{{ attributes[:for] }} {{ attributes[:'data-value'] }}</div>
 ```
 
 <a name="short-attribute-syntax"></a>
 #### Short Attribute Syntax
 
-When passing attributes to components, you may also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:
+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:
 
 ```rblade
 {{-- Short attribute syntax... --}}
@@ -492,7 +509,7 @@ When passing attributes to components, you may also use a "short attribute" synt
 <a name="escaping-attribute-rendering"></a>
 #### Escaping Attribute Rendering
 
-Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (`::`) prefix to inform RBlade that the attribute is not a Ruby expression. For example, given the following component:
+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:
 
 ```rblade
 <x-button ::class="{ danger: isDeleting }">
@@ -511,13 +528,13 @@ The following HTML will be rendered by RBlade:
 <a name="component-attributes"></a>
 ### Component Attributes
 
-We've already examined how to pass data attributes to a component; however, sometimes you may 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:
+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:
 
 ```rblade
 <x-alert type="error" :message class="mt-4"/>
 ```
 
-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 may be rendered within the component by printing this variable:
+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:
 
 ```rblade
 <div {{ attributes }}>
@@ -528,7 +545,7 @@ All of the attributes that are not part of the component's constructor will auto
 <a name="default-and-merged-attributes"></a>
 #### Default & Merged Attributes
 
-Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may 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:
+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:
 
 ```rblade
 <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
 
 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.
 
-You may 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.
+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.
 
 ```rblade
 {{ attributes.filter { |k, v| k == 'foo'} }}
 {{ attributes.slice :foo }}
 ```
 
-If you would like to check if an attribute is present on the component, you may 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:
+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:
 
 ```rblade
 @if (attributes.has?(:class))
     <div>Class attribute is present</div>
-@endif
+@endIf
 ```
 
 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
 ```rblade
 @if (attributes.has?('name', 'class'))
     <div>All of the attributes are present</div>
-@endif
+@endIf
 ```
 
-The `has_any?` method may be used to determine if any of the given attributes are present on the component:
+The `has_any?` method can be used to determine if any of the given attributes are present on the component:
 
 ```rblade
 @if (attributes.has_any?('href', ':href', 'v-bind:href'))
     <div>One of the attributes is present</div>
-@endif
+@endIf
 ```
 
 <a name="slots"></a>
@@ -649,7 +666,7 @@ You will often need to pass additional content to your component via "slots". Th
 </div>
 ```
 
-We may pass content to the `slot` by injecting content into the component:
+We can pass content to the `slot` by injecting content into the component:
 
 ```rblade
 <x-alert>
@@ -657,18 +674,21 @@ We may pass content to the `slot` by injecting content into the component:
 </x-alert>
 ```
 
+> [!NOTE]  
+> 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.
+
 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:
 
 ```rblade
 {{-- /app/views/components/alert.rblade --}}
-@props({title: _required})
+@props({title: required})
 <span class="alert-title">{{ title }}</span>
 <div class="alert alert-danger">
     {{ slot }}
 </div>
 ```
 
-You may 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:
+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:
 
 ```xml
 <x-alert>
@@ -690,14 +710,14 @@ The slot object extends the String interface, so you can invoke a slot's `empty?
         This is default content if the slot is empty.
     @else
         {{ slot }}
-    @endif
+    @endIf
 </div>
 ```
 
 <a name="slot-attributes"></a>
 #### Slot Attributes
 
-Like RBlade components, you may assign additional [attributes](#component-attributes) to slots such as CSS class names:
+Like RBlade components, you can assign additional [attributes](#component-attributes) to slots such as CSS class names:
 
 ```xml
 <x-card class="shadow-sm">
@@ -713,12 +733,12 @@ Like RBlade components, you may assign additional [attributes](#component-attrib
 </x-card>
 ```
 
-To interact with slot attributes, you may 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):
+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):
 
 ```rblade
 @props({
-    "heading": _required,
-    "footer": _required,
+    "heading": required,
+    "footer": required,
 })
 
 <div {{ attributes.class('border') }}>
@@ -734,6 +754,18 @@ To interact with slot attributes, you may access the `attributes` property of th
 </div>
 ```
 
+<a name="conditional-rendering"></a>
+#### Conditional Rendering
+
+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:
+
+```rblade
+{{-- components/error.rblade --}}
+@props({errors: []})
+@shouldRender(errors.present?)
+...
+```
+
 <a name="registering-additional-component-directories"></a>
 ### Registering Additional Component Directories
 
@@ -822,7 +854,7 @@ RBlade allows you to push to named stacks which can be rendered elsewhere in ano
 @endPush
 ```
 
-If you would like to `@push` content if a given boolean expression evaluates to `true`, you may use the `@pushif` directive:
+If you would like to `@push` content if a given boolean expression evaluates to `true`, you can use the `@pushif` directive:
 
 ```rblade
 @pushIf(shouldPush, 'scripts')
@@ -830,7 +862,7 @@ If you would like to `@push` content if a given boolean expression evaluates to
 @endPushIf
 ```
 
-You may 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:
+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:
 
 ```rblade
 <head>