Merge pull request #4 from kblais/allow-both-string-and-name-type

README.md

@@ -45,6 +45,9 @@ In your body you may include the component like:
 
 {# If you wish to pass along variables to your component #}
 {% livewire counter with {'count': 3} %}
+
+{# To include a nested component (or dashes), you need to use '' #}
+{% livewire 'nested.component' %}
 ```
 
 ### Example
@@ -82,9 +85,6 @@ class Counter extends Component
 }
 ```
 
-## Caveats
-- Components with hyphens cannot be called like `{% livewire foo-bar %}` as Twig doesn't allow hyphens like that. We've added a workaround for this by allowing camel case: `{% livewire fooBar %}`
-
 ## Todo
 - [ ] Implement support for `key` tracking
 - [ ] Implement support for preserving child tracking

src/LivewireTokenParser.php

@@ -3,14 +3,31 @@
 namespace Enflow\LivewireTwig;
 
 use Illuminate\Support\Str;
+use Twig\Error\SyntaxError;
 use Twig\Token;
 use Twig\TokenParser\AbstractTokenParser;
 
 class LivewireTokenParser extends AbstractTokenParser
 {
     public function parse(Token $token): LivewireNode
     {
-        $component = $this->parser->getStream()->expect(Token::NAME_TYPE)->getValue();
+        $componentNameToken = $this->parser->getStream()->next();
+
+        if ($componentNameToken->test(Token::NAME_TYPE) || $componentNameToken->test(Token::STRING_TYPE)) {
+            $component = $componentNameToken->getValue();
+        } else {
+            throw new SyntaxError(
+                sprintf(
+                    'Unexpected token "%s"%s ("%s" or "%s" expected).',
+                    Token::typeToEnglish($componentNameToken->getType()),
+                    $componentNameToken->getValue() ? sprintf(' of value "%s"', $componentNameToken->getValue()) : '',
+                    Token::typeToEnglish(Token::NAME_TYPE),
+                    Token::typeToEnglish(Token::STRING_TYPE)
+                ),
+                $componentNameToken->getLine(),
+                $this->parser->getStream()->getSourceContext()
+            );
+        }
 
         $variables = null;
         if ($this->parser->getStream()->nextIf(/* Token::NAME_TYPE */ 5, 'with')) {

tests/RenderTest.php

@@ -0,0 +1,86 @@
+<?php
+
+namespace Enflow\LivewireTwig\Test;
+
+use Livewire\Component;
+use Livewire\Livewire;
+
+class RenderTest extends TestCase
+{
+    public function test_name_type_component_correctly_renders()
+    {
+        Livewire::component('counter', Counter::class);
+
+        $rendered = view('name-type-test')->render();
+
+        $this->assertStringContainsString('[wire\:loading]', $rendered); // Styles
+        $this->assertStringContainsString('window.livewire', $rendered); // Scripts
+        $this->assertStringContainsString('increment', $rendered); // Counter component
+        $this->assertStringContainsString('Lorem ipsum!', $rendered); // Counter component title
+    }
+
+    public function test_string_type_component_correctly_renders()
+    {
+        Livewire::component('counter', Counter::class);
+
+        $rendered = view('string-type-test')->render();
+
+        $this->assertStringContainsString('[wire\:loading]', $rendered); // Styles
+        $this->assertStringContainsString('window.livewire', $rendered); // Scripts
+        $this->assertStringContainsString('increment', $rendered); // Counter component
+        $this->assertStringContainsString('Lorem ipsum!', $rendered); // Counter component title
+    }
+
+    public function test_nested_component_correctly_renders()
+    {
+        Livewire::component('table', Table::class);
+        Livewire::component('table.row', TableRow::class);
+        Livewire::component('dashed-counter', Counter::class);
+
+        $rendered = view('nested-test')->render();
+
+        $this->assertStringContainsString('increment', $rendered);
+        $this->assertStringContainsString('Foo', $rendered);
+        $this->assertStringContainsString('Bar', $rendered);
+    }
+
+    public function test_invalid_type_throws_exception()
+    {
+        $this->expectException(\ErrorException::class);
+        $this->expectExceptionMessage('Unexpected token "number" of value "63" ("name" or "string" expected).');
+        Livewire::component('counter', Counter::class);
+
+        $rendered = view('invalid-type-test')->render();
+    }
+}
+
+class Counter extends Component
+{
+    public $count = 3;
+    public $title = null;
+
+    public function render()
+    {
+        return view('components.counter');
+    }
+}
+
+class Table extends Component
+{
+    public $elements;
+
+    public function render()
+    {
+        return view('components.table');
+    }
+}
+
+class TableRow extends Component
+{
+    public $element;
+
+    public function render()
+    {
+        return view('components.table.row');
+    }
+}

tests/views/components/table.twig

@@ -0,0 +1,5 @@
+<table>
+    {% for element in elements %}
+        {% livewire 'table.row' with { 'element': element } %}
+    {% endfor %}
+</table>

tests/views/components/table/row.twig

@@ -0,0 +1,4 @@
+<tr>
+    <td>{{ element.id }}</td>
+    <td>{{ element.name }}</td>
+</tr>

tests/views/invalid-type-test.twig

@@ -0,0 +1,5 @@
+{% extends 'layout' %}
+
+{% block content %}
+    {% livewire 63 %}
+{% endblock %}

tests/views/layout.twig

@@ -1,9 +1,5 @@
 {{ livewireStyles() }}
 
-{% livewire counter %}
-
-{% livewire counter with {'count': 3} %}
-
-{% livewire counter with {'count': 3, 'title': 'Lorem ipsum!'} %}
+{% block content %}{% endblock %}
 
 {{ livewireScripts() }}

tests/views/name-type-test.twig

@@ -0,0 +1,9 @@
+{% extends 'layout' %}
+
+{% block content %}
+    {% livewire counter %}
+
+    {% livewire counter with {'count': 3} %}
+
+    {% livewire counter with {'count': 3, 'title': 'Lorem ipsum!'} %}
+{% endblock %}

tests/views/nested-test.twig

@@ -0,0 +1,12 @@
+{% extends 'layout' %}
+
+{% set elements = [
+    {'id': 1, 'name': 'Foo'},
+    {'id': 2, 'name': 'Bar'},
+] %}
+
+{% block content %}
+    {% livewire 'dashed-counter' %}
+
+    {% livewire 'table' with {'elements' : elements} %}
+{% endblock %}

tests/views/string-type-test.twig

@@ -0,0 +1,9 @@
+{% extends 'layout' %}
+
+{% block content %}
+    {% livewire 'counter' %}
+
+    {% livewire 'counter' with {'count': 3} %}
+
+    {% livewire 'counter' with {'count': 3, 'title': 'Lorem ipsum!'} %}
+{% endblock %}