[9.x] Migrate mail components #44527

timacdonald · 2022-10-10T03:35:37Z

This PR allows mail components to be used with the <x-component> syntax.

These two are now identical:

@component('mail::button', ['url' => 'https://forge.laravel.com'])
Deploy with Forge
@endcomponent

<x-mail::button url="https://forge.laravel.com">
Deploy with Forge
</x-mail>

Below are some of the test views I've used to ensure things are working as expected. You may like to fire these up in a standalone Mailable to test out.

<x-mail::message>

# TEST: @@component('mail::button', ['url' => ''])

@component('mail::button', ['url' => ''])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="">

<x-mail::button url="">
    slot content
</x-mail::button>

# TEST: @@component('mail::button', ['url' => 'https://forge.laravel.com'])

@component('mail::button', ['url' => 'https://forge.laravel.com'])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="https://vapor.laravel.com">

<x-mail::button url="https://vapor.laravel.com">
    slot content
</x-mail::button>

# TEST: @@component('mail::button', ['url' => 'https://forge.laravel.com', 'color' => 'success'])

@component('mail::button', ['url' => 'https://forge.laravel.com', 'color' => 'success'])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="https://vapor.laravel.com" color="success">

<x-mail::button url="https://vapor.laravel.com" color="success">
    slot content
</x-mail::button>

# TEST: @@component('mail::table')

<style> .table { background-color: palegoldenrod } </style>

@component('mail::table')
Table content
@endcomponent

# TEST: &lt;x-mail::table&gt;

<x-mail::table>
Table content
</x-mail::table>

# TEST: @@component('mail::subcopy')

@component('mail::subcopy')
## Slot content
@endcomponent

# TEST: &lt;x-mail::subcopy&gt;

<x-mail::subcopy>
## Slot content
</x-mail::subcopy>

# TEST: @@component('mail::panel')

@component('mail::panel')
## Slot content
@endcomponent

# TEST: &lt;x-mail::panel&gt;

<x-mail::panel>
## Slot content
</x-mail::panel>

# TEST: @@component('mail::header', ['url' => 'https://forge.laravel.com']) Laravel @@endcomponent

<table>
@component('mail::header', ['url' => 'https://forge.laravel.com'])
Laravel
@endcomponent
</table>

# TEST: &lt;x-mail::header url="https://vapor.laravel.com"&gt; Laravel &lt;/x-mail::header&gt;

<table>
<x-mail::header url="https://vapor.laravel.com">Laravel</x-mail::header>
</table>

# TEST: @@component('mail::header', ['url' => 'https://forge.laravel.com']) Acme @@endcomponent

<table>
@component('mail::header', ['url' => 'https://forge.laravel.com'])
Acme
@endcomponent
</table>

# TEST: &lt;x-mail::header url="https://vapor.laravel.com"&gt; Acme &lt;/x-mail::header&gt;

<table>
<x-mail::header url="https://vapor.laravel.com">Acme</x-mail::header>
</table>

# TEST: @@component('mail::footer')

<table>
@component('mail::footer', ['url' => 'https://forge.laravel.com'])
## Slot content
@endcomponent
</table>

# TEST: &lt;x-mail::footer&gt;

<table>
<x-mail::footer url="https://vapor.laravel.com">
## Slot content
</x-mail::footer>
</table>

# TEST: Pass slots instead of props...

@component('mail::button')
@slot('url')
https://forge.laravel.com
@endslot
slot content
@endcomponent

<x-mail::button>
<x-slot:url>
https://forge.laravel.com
</x-slot:url>
slot content
</x-mail::button>

</x-mail::message>

@component('mail::message')

# TEST: @@component('mail::button', ['url' => ''])

@component('mail::button', ['url' => ''])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="">

<x-mail::button url="">
    slot content
</x-mail::button>

# TEST: @@component('mail::button', ['url' => 'https://forge.laravel.com'])

@component('mail::button', ['url' => 'https://forge.laravel.com'])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="https://vapor.laravel.com">

<x-mail::button url="https://vapor.laravel.com">
    slot content
</x-mail::button>

# TEST: @@component('mail::button', ['url' => 'https://forge.laravel.com', 'color' => 'success'])

@component('mail::button', ['url' => 'https://forge.laravel.com', 'color' => 'success'])
    slot content
@endcomponent

# TEST: &lt;x-mail::button url="https://vapor.laravel.com" color="success">

<x-mail::button url="https://vapor.laravel.com" color="success">
    slot content
</x-mail::button>

# TEST: @@component('mail::table')

<style> .table { background-color: palegoldenrod } </style>

@component('mail::table')
Table content
@endcomponent

# TEST: &lt;x-mail::table&gt;

<x-mail::table>
Table content
</x-mail::table>

# TEST: @@component('mail::subcopy')

@component('mail::subcopy')
## Slot content
@endcomponent

# TEST: &lt;x-mail::subcopy&gt;

<x-mail::subcopy>
## Slot content
</x-mail::subcopy>

# TEST: @@component('mail::panel')

@component('mail::panel')
## Slot content
@endcomponent

# TEST: &lt;x-mail::panel&gt;

<x-mail::panel>
## Slot content
</x-mail::panel>

# TEST: @@component('mail::header', ['url' => 'https://forge.laravel.com']) Laravel @@endcomponent

<table>
@component('mail::header', ['url' => 'https://forge.laravel.com'])
Laravel
@endcomponent
</table>

# TEST: &lt;x-mail::header url="https://vapor.laravel.com"&gt; Laravel &lt;/x-mail::header&gt;

<table>
<x-mail::header url="https://vapor.laravel.com">Laravel</x-mail::header>
</table>

# TEST: @@component('mail::header', ['url' => 'https://forge.laravel.com']) Acme @@endcomponent

<table>
@component('mail::header', ['url' => 'https://forge.laravel.com'])
Acme
@endcomponent
</table>

# TEST: &lt;x-mail::header url="https://vapor.laravel.com"&gt; Acme &lt;/x-mail::header&gt;

<table>
<x-mail::header url="https://vapor.laravel.com">Acme</x-mail::header>
</table>

# TEST: @@component('mail::footer')

<table>
@component('mail::footer', ['url' => 'https://forge.laravel.com'])
## Slot content
@endcomponent
</table>

# TEST: &lt;x-mail::footer&gt;

<table>
<x-mail::footer url="https://vapor.laravel.com">
## Slot content
</x-mail::footer>
</table>

# TEST: Pass slots instead of props...

@component('mail::button')
@slot('url')
https://forge.laravel.com
@endslot
slot content
@endcomponent

<x-mail::button>
<x-slot:url>
https://forge.laravel.com
</x-slot:url>
slot content
</x-mail::button>

@endcomponent

timacdonald · 2022-10-10T05:02:17Z

src/Illuminate/View/Compilers/Concerns/CompilesComponents.php

-        return "<?php foreach(\$attributes->onlyProps{$expression} as \$__key => \$__value) {
+        return "<?php \$attributes ??= new \\Illuminate\\View\\ComponentAttributeBag; ?>
+<?php foreach(\$attributes->onlyProps{$expression} as \$__key => \$__value) {


This ensures that the older style syntax works can show views that use the @props directive. In place for BC.

timacdonald · 2022-10-10T05:03:46Z

src/Illuminate/View/Compilers/ComponentTagCompiler.php

+        if (Str::startsWith($component, 'mail::') && $viewFactory->exists($component)) {
+            return $component;
+        }


I've given special treatment to mail:: prefixed components, as they are given special treatment in the framework.

This is explicitly performed after the loop to ensure it does not change current functionality in anyway.

timacdonald · 2022-10-10T05:11:24Z

Documentation: laravel/docs#8284

DougSisk · 2022-10-11T15:06:11Z

I'm now getting an exception when running view:cache:

  InvalidArgumentException 

  Unable to locate a class or view for component [mail::message].

  at vendor/laravel/framework/src/Illuminate/View/Compilers/ComponentTagCompiler.php:319

timacdonald added 4 commits October 10, 2022 12:40

allow framework mail component to be used as anonymous components

2d1eaee

refactor button component

e0ea315

migrate header

6bcfd3e

refactor message

dd2c5d7

timacdonald changed the title ~~Migrate mail component~~ [9.x] Migrate mail components Oct 10, 2022

timacdonald added 3 commits October 10, 2022 14:47

reinstate url

f0a05a3

BC fix for old component syntax

5647047

migrate markdown stub

0b04ff9

timacdonald commented Oct 10, 2022

View reviewed changes

fix test

b066dd6

timacdonald mentioned this pull request Oct 10, 2022

[9.x] Update mail syntax laravel/docs#8284

Merged

timacdonald added 3 commits October 10, 2022 16:19

refactor text layout

ddd4195

migrate notification

04d872b

fix attributes

602c511

timacdonald marked this pull request as ready for review October 10, 2022 05:47

taylorotwell merged commit 5fb31a5 into laravel:9.x Oct 10, 2022

DougSisk mentioned this pull request Oct 11, 2022

php artisan view:cache returns an error since laravel 9.35 : Unable to locate a class or view for component [mail::message]. #44544

Closed

timacdonald deleted the mail-component-migration branch October 11, 2022 22:12

LeoniePhiline mentioned this pull request Oct 18, 2022

#44527 broke mail for installations applying Blade::withoutComponentTags() in their AppServiceProvider #44637

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[9.x] Migrate mail components #44527

[9.x] Migrate mail components #44527

timacdonald commented Oct 10, 2022 •

edited

Loading

timacdonald Oct 10, 2022 •

edited

Loading

timacdonald Oct 10, 2022 •

edited

Loading

timacdonald commented Oct 10, 2022

DougSisk commented Oct 11, 2022

[9.x] Migrate mail components #44527

[9.x] Migrate mail components #44527

Conversation

timacdonald commented Oct 10, 2022 • edited Loading

timacdonald Oct 10, 2022 • edited Loading

Choose a reason for hiding this comment

timacdonald Oct 10, 2022 • edited Loading

Choose a reason for hiding this comment

timacdonald commented Oct 10, 2022

DougSisk commented Oct 11, 2022

timacdonald commented Oct 10, 2022 •

edited

Loading

timacdonald Oct 10, 2022 •

edited

Loading

timacdonald Oct 10, 2022 •

edited

Loading