Merge pull request #3 from mailcarrierapp/feat/latte-to-twig

Author: danilopolani

README.md

@@ -12,7 +12,7 @@ Design global layouts, compose your template, preview your emails and send them
 
 ### Features
 
-- 🎨 **Beautiful syntax**: Explore a beautiful, expressive template syntax similar to the most popular JS frameworks, brought you by [Latte](https://latte.nette.org/).
+- 🎨 **Beautiful syntax**: Explore a beautiful, expressive template syntax similar to JS thanks to [Twig by Symfony](https://twig.symfony.com).
 - 🧩 **Provider aware**: Bring your desired provider to send email, such as Amazon SES, MailGun, SendGrid etc.  
 - ✨ **Friendly APIs**: Use a friendly and well documented API endpoint to send your emails.
 - 🔐 **Secure by default**: Both authentication and API endpoint are always secure: use one of the pre-built auth system or bring your own.

composer.json

@@ -23,12 +23,12 @@
         "jessarcher/laravel-castable-data-transfer-object": "^2.2.1",
         "laravel/sanctum": "^3.0",
         "laravel/socialite": "^5.5",
-        "latte/latte": "^3.0",
         "livewire/livewire": "^2.10",
         "nunomaduro/termwind": "^1.13",
         "ralphjsmit/laravel-filament-components": "^1.1",
         "socialiteproviders/manager": "^4.1",
-        "spatie/data-transfer-object": "^3.8"
+        "spatie/data-transfer-object": "^3.8",
+        "twig/twig": "^3.0"
     },
     "require-dev": {
         "laravel/pint": "^1.0",

composer.lock

@@ -0,0 +1,6 @@
+/*!-----------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.33.0(4b1abad427e58dbedc1215d99a0902ffc885fcd4)
+ * Released under the MIT license
+ * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
+ *-----------------------------------------------------------------------------*/

dist/js/424.js

@@ -17,7 +17,7 @@ class="w-full rounded-lg shadow-sm focus:border-primary-600 focus:ring-1 focus:r
                 document.addEventListener('DOMContentLoaded', () => {
                     const editor = monaco.editor.create($el, {
                         value: state,
-                        language: 'html',
+                        language: 'twig',
                         automaticLayout: true,
                         scrollBeyondLastLine: false,
                         theme: 'vs-dark',

dist/js/424.js.LICENSE.txt

@@ -98,11 +98,10 @@ protected function send(RecipientDto $recipient): void
 
         try {
             $templateRender = (new Templates\Render)->run($this->template, $recipient->variables);
-        } catch (Exception $e) {
-            $exception = new TemplateRenderException($e->getMessage());
+        } catch (\Twig\Error\RuntimeError $e) {
+            $exception = new TemplateRenderException($e->getRawMessage());
 
-            if (str_contains($e->getMessage(), 'Undefined variable')) {
-                $missingVariableName = Str::match('/Undefined variable \$([\w\d_]+)/i', $e->getMessage());
+            if ($missingVariableName = Str::match('/Variable "(.*)" does not exist/i', $e->getRawMessage())) {
                 $exception = new MissingVariableException(
                     sprintf(
                         'Missing variable "%s" for template "%s"',

dist/js/monaco.js

@@ -2,9 +2,6 @@
 
 namespace MailCarrier\Actions\Templates;
 
-use Illuminate\Support\Str;
-use Illuminate\Support\Stringable;
-use Latte;
 use MailCarrier\Actions\Action;
 use MailCarrier\Models\Template;
 
@@ -15,71 +12,22 @@ class Render extends Action
      */
     public function run(Template $template, array $variables = []): string
     {
-        $mainFileName = sprintf('main-%d.latte', $template->id);
-        $layoutFileName = !$template->layout_id ? null : sprintf('layout-%d.latte', $template->layout_id);
+        $mainFileName = sprintf('main-%d.html', $template->id);
+        $layoutFileName = !$template->layout_id ? null : sprintf('layout-%d.html', $template->layout_id);
         $mainFileContent = !$template->layout_id ? $template->content : sprintf(
-            "{layout '%s'}{block content}%s{/block}",
+            '{%% extends "%s" %%}{%% block content %%}%s{%% endblock %%}',
             $layoutFileName,
             $template->content,
         );
 
-        $latte = new Latte\Engine();
-        $latte->setLoader(new Latte\Loaders\StringLoader([
-            $mainFileName => $this->parse($mainFileContent),
-            $layoutFileName => $this->parse($template->layout?->content ?: ''),
-        ]));
+        $loader = new \Twig\Loader\ArrayLoader([
+            $mainFileName => $mainFileContent,
+            $layoutFileName => $template->layout?->content,
+        ]);
 
-        return $latte->renderToString($mainFileName, $variables);
-    }
-
-    /**
-     * Parse the template syntax.
-     */
-    protected function parse(string $template): string
-    {
-        preg_match_all('/{{(.*?)}}/', $template, $variables);
-
-        foreach ($variables[1] ?? [] as $variable) {
-            $realVariable = Str::of($variable)
-                ->before('|')
-                ->trim()
-                ->toString();
-
-            // Extract filters to reapply them when replacing the variable
-            $variableFilters = '';
-
-            if (str_contains($variable, '|')) {
-                $variableFilters = Str::of($variable)
-                    ->after('|')
-                    ->trim()
-                    ->whenNotEmpty(fn (Stringable $str) => $str->prepend('|'))
-                    ->toString();
-            }
-
-            // Transform variable if is an array/object
-            if (str_contains($realVariable, '.')) {
-                // Transform everything after the actual variable name into an array-based index
-                $indexBasedVariable = Str::of($realVariable)
-                    ->after('.')
-                    ->explode('.')
-                    ->map(fn (string $value) => is_numeric($value) ? "[$value]" : "['$value']")
-                    ->join('');
-
-                // Prepend the actual variable name
-                $realVariable = Str::before($realVariable, '.') . $indexBasedVariable;
-            }
-
-            if (!str_starts_with($realVariable, '$')) {
-                $realVariable = '$' . $realVariable;
-            }
-
-            $template = str_replace(
-                '{{' . $variable . '}}',
-                '{' . $realVariable . $variableFilters . '}',
-                $template
-            );
-        }
+        $twig = new \Twig\Environment($loader);
+        $twig->enableStrictVariables();
 
-        return $template;
+        return $twig->render($mainFileName, $variables);
     }
 }

resources/views/forms/components/monaco-editor.blade.php

@@ -32,7 +32,7 @@ class LayoutResource extends Resource
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
             </head>
             <body>
-                {include content}
+                {% block content %}{% endblock %}
             </body>
         </html>
         HTML;
@@ -102,7 +102,7 @@ protected static function getFormContent(): array
 
                 MonacoEditor::make('content')
                     ->required()
-                    ->hint('<a href="https://latte.nette.org/en/syntax" class="underline text-primary-500 cursor-help" target="_blank" tabindex="-1">Help with template Syntax</a>')
+                    ->hint(new HtmlString('<a href="https://twig.symfony.com/doc/3.x/templates.html" class="underline text-primary-500 cursor-help" target="_blank" tabindex="-1">Help with syntax</a>'))
                     ->hintIcon('heroicon-o-code')
                     // Full width
                     ->columnSpan(2)