├── .gitignore
├── composer.json
├── composer.lock
├── license.md
├── readme.md
└── source
    ├── RenderlessComponent.php
    ├── RenderlessComponentsBladeCompiler.php
    └── RenderlessComponentsProvider.php


/.gitignore:
--------------------------------------------------------------------------------
1 | vendor
2 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "assertchris/laravel-renderless-components",
 3 |   "description": "Create components with lazy-evaluated content",
 4 |   "license": "MIT",
 5 |   "require": {
 6 |     "php": "^7.4"
 7 |   },
 8 |   "autoload": {
 9 |     "psr-4": {
10 |       "RenderlessComponents\\": "source"
11 |     }
12 |   },
13 |   "extra": {
14 |     "laravel": {
15 |       "providers": [
16 |         "RenderlessComponents\\RenderlessComponentsProvider"
17 |       ]
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/composer.lock:
--------------------------------------------------------------------------------
 1 | {
 2 |     "_readme": [
 3 |         "This file locks the dependencies of your project to a known state",
 4 |         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
 5 |         "This file is @generated automatically"
 6 |     ],
 7 |     "content-hash": "35adaadc3f94a4abb242d80617939710",
 8 |     "packages": [],
 9 |     "packages-dev": [],
10 |     "aliases": [],
11 |     "minimum-stability": "stable",
12 |     "stability-flags": [],
13 |     "prefer-stable": false,
14 |     "prefer-lowest": false,
15 |     "platform": {
16 |         "php": "^7.4"
17 |     },
18 |     "platform-dev": [],
19 |     "plugin-api-version": "1.1.0"
20 | }
21 | 


--------------------------------------------------------------------------------
/license.md:
--------------------------------------------------------------------------------
1 | Copyright Christopher Pitt
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Laravel renderless components
 2 | 
 3 | Blade components are great, aren't they? The one thing I was still missing from them is a way to create [renderless components](https://adamwathan.me/renderless-components-in-vuejs). Blade renders top-down, which means you can't lazy-evaluate child content. Imagine being able to define and use a component like this:
 4 | 
 5 | ```html
 6 | <ul class="space-y-2">
 7 |   @foreach ($items as $item)
 8 |   <li class="text-gray-900">{{ $render($item, $loop->count) }}</li>
 9 |   @endforeach
10 | </ul>
11 | ```
12 | 
13 | ```html
14 | <x-list :items="$items">
15 |   {{ $item }} (of {{ $count }})
16 | </x-list>
17 | ```
18 | 
19 | So, I built a way to do it. You need to define your PHP component to look like this:
20 | 
21 | ```php
22 | namespace App\View\Components;
23 | 
24 | use RenderlessComponents\RenderlessComponent;
25 | 
26 | class List extends RenderlessComponent
27 | {
28 |     public array $items = [];
29 | 
30 |     public function __construct(array $items)
31 |     {
32 |         $this->items = $items;
33 |     }
34 | 
35 |     public function view(): string
36 |     {
37 |         return 'components.tailwind-list';
38 |     }
39 | 
40 |     public function viewParams(): array
41 |     {
42 |         // think of this as the array of params
43 |         // you usually give as the second argument
44 |         // of the view() function
45 |         return [
46 |             'items' => $this->items,
47 |         ];
48 |     }
49 | 
50 |     public function renderParams(): string
51 |     {
52 |         // think of this as the list of arguments
53 |         // you give to the render function
54 |         return '$params, $count';
55 |     }
56 | }
57 | ```
58 | 
59 | ## Usage
60 | 
61 | Add the library to your project:
62 | 
63 | ```
64 | composer require assertchris/laravel-renderless-components
65 | ```
66 | 
67 | It automatically registers itself, so the only thing left is to extend `RenderlessComponents\RenderlessComponent` instead of `Illuminate\View\Component` and implement the abstract methods.
68 | 
69 | ## Caveats
70 | 
71 | - I've changed how the lazy-evaluated content is cached, so that this library works alongside `facade/ignition`. On local (or on any other env, if the file doesn't already exist); the lazy-evaluated content is cached in the `storage/framework/views/components` folder. If your view isn't updating, you might be in an environment other than `local`. You can change the environment or remove the cache files in that folder.
72 | 


--------------------------------------------------------------------------------
/source/RenderlessComponent.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace RenderlessComponents;
 4 | 
 5 | use Illuminate\View\Component;
 6 | 
 7 | abstract class RenderlessComponent extends Component
 8 | {
 9 |     abstract public function view(): string;
10 |     abstract public function viewParams(): array;
11 |     abstract public function renderParams(): string;
12 | 
13 |     public string $children;
14 | 
15 |     public function render()
16 |     {
17 |         $component = $this;
18 | 
19 |         $file = $this->createViewFile();
20 | 
21 |         return view($this->view(), [
22 |             'render' => require_once $file,
23 |         ] + $this->viewParams());
24 |     }
25 | 
26 |     private function createViewFile(): string
27 |     {
28 |         $children = trim($this->children);
29 |         $renderParams = $this->renderParams();
30 | 
31 |         $folder = $this->createComponentsFolder();
32 |         $file = $this->join($folder, sha1($this->view()) . '.php');
33 | 
34 |         if (!file_exists($file) || app()->environment('local')) {
35 |             file_put_contents($file, trim(
36 | <<<FN
37 | <?php
38 | 
39 | return function ({$renderParams}) use (\$component) {
40 |     if (true):
41 |         ?>
42 |             {$children}
43 |         <?php
44 |     endif;
45 | };
46 | FN
47 |             ));
48 |         }
49 | 
50 |         return $file;
51 |     }
52 | 
53 |     private function createComponentsFolder(): string
54 |     {
55 |         $folder = storage_path($this->join('framework', 'views', 'components'));
56 | 
57 |         if (!file_exists($folder)) {
58 |             mkdir($folder);
59 |         }
60 | 
61 |         return $folder;
62 |     }
63 | 
64 |     private function join(...$parts): string
65 |     {
66 |         return join(DIRECTORY_SEPARATOR, $parts);
67 |     }
68 | }
69 | 


--------------------------------------------------------------------------------
/source/RenderlessComponentsBladeCompiler.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace RenderlessComponents;
 4 | 
 5 | use Illuminate\Support\Str;
 6 | use Illuminate\View\Compilers\BladeCompiler;
 7 | 
 8 | class RenderlessComponentsBladeCompiler extends BladeCompiler
 9 | {
10 |     public static function compileClassComponentOpening(string $component, string $alias, string $data, string $hash)
11 |     {
12 |         return implode("\n", [
13 |             '<?php if (isset($component)) { $__componentOriginal'.$hash.' = $component; } ?>',
14 |             '<?php $component = $__env->getContainer()->make('.Str::finish($component, '::class').', '.($data ?: '[]').'); ?>',
15 |             '<?php $component->withName('.$alias.'); ?>',
16 |             '<?php if ($component->shouldRender()): ?>',
17 |             '<?php $component->children = <<<\'CHILDREN\'',
18 |         ]);
19 |     }
20 | 
21 |     protected function compileEndComponent()
22 |     {
23 |         $hash = array_pop(static::$componentHashStack);
24 | 
25 |         return implode("\n", [
26 |             PHP_EOL,
27 |             'CHILDREN; ?>',
28 |             '<?php $__env->startComponent($component->resolveView(), $component->data()); ?>',
29 |             '<?php if (isset($__componentOriginal'.$hash.')): ?>',
30 |             '<?php $component = $__componentOriginal'.$hash.'; ?>',
31 |             '<?php unset($__componentOriginal'.$hash.'); ?>',
32 |             '<?php endif; ?>',
33 |             '<?php echo $__env->renderComponent(); ?>',
34 |         ]);
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/source/RenderlessComponentsProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace RenderlessComponents;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | 
 7 | class RenderlessComponentsProvider extends ServiceProvider
 8 | {
 9 |     public function boot()
10 |     {
11 |         $this->app->singleton(
12 |             'blade.compiler',
13 |             fn($app) => new RenderlessComponentsBladeCompiler($app['files'], $app['config']['view.compiled']),
14 |         );
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------