Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Handle Stimulus CSS Classes #191

Merged
merged 1 commit into from
Oct 18, 2022
Merged

Handle Stimulus CSS Classes #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,8 @@ class ScriptNonceSubscriber implements EventSubscriberInterface
### stimulus_controller

This bundle also ships with a special `stimulus_controller()` Twig function
that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwired.dev/reference/values).
that can be used to render [Stimulus Controllers & Values](https://stimulus.hotwired.dev/reference/values)
and [CSS Classes](https://stimulus.hotwired.dev/reference/css-classes).
See [stimulus-bridge](https://github.com/symfony/stimulus-bridge) for more details.

For example:
Expand All @@ -224,6 +225,29 @@ For example:
</div>
```

If you want to set CSS classes:

```twig
<div {{ stimulus_controller('chart', { 'name': 'Likes', 'data': [1, 2, 3, 4] }, { 'loading': 'spinner' }) }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should leave this example alone, then add a 2nd example below. The reason is that this might make it look like passing CSS values is required or important, whereas in most cases, it wouldn't be used.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review :)

I moved it into a separate example, with & without values.

Hello
</div>
<!-- would render -->
<div
data-controller="chart"
data-chart-name-value="Likes"
data-chart-data-value="&#x5B;1,2,3,4&#x5D;"
data-chart-loading-class="spinner"
>
Hello
</div>
<!-- or without values -->
<div {{ stimulus_controller('chart', controllerClasses: { 'loading': 'spinner' }) }}>
Hello
</div>
```

Any non-scalar values (like `data: [1, 2, 3, 4]`) are JSON-encoded. And all
values are properly escaped (the string `&#x5B;` is an escaped
`[` character, so the attribute is really `[1,2,3,4]`).
Expand Down
23 changes: 18 additions & 5 deletions src/Dto/StimulusControllersDto.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,9 @@ final class StimulusControllersDto extends AbstractStimulusDto
{
private $controllers = [];
private $values = [];
private $classes = [];

public function addController(string $controllerName, array $controllerValues = []): void
public function addController(string $controllerName, array $controllerValues = [], array $controllerClasses = []): void
{
$controllerName = $this->getFormattedControllerName($controllerName);
$this->controllers[] = $controllerName;
Expand All @@ -31,6 +32,12 @@ public function addController(string $controllerName, array $controllerValues =

$this->values['data-'.$controllerName.'-'.$key.'-value'] = $value;
}

foreach ($controllerClasses as $key => $class) {
$key = $this->escapeAsHtmlAttr($this->normalizeKeyName($key));

$this->values['data-'.$controllerName.'-'.$key.'-class'] = $class;
}
}

public function __toString(): string
Expand All @@ -39,9 +46,15 @@ public function __toString(): string
return '';
}

return rtrim('data-controller="'.implode(' ', $this->controllers).'" '.implode(' ', array_map(static function (string $attribute, string $value): string {
return $attribute.'="'.$value.'"';
}, array_keys($this->values), $this->values)));
return rtrim(
'data-controller="'.implode(' ', $this->controllers).'" '.
implode(' ', array_map(static function (string $attribute, string $value): string {
return $attribute.'="'.$value.'"';
}, array_keys($this->values), $this->values)).' '.
implode(' ', array_map(static function (string $attribute, string $value): string {
return $attribute.'="'.$value.'"';
}, array_keys($this->classes), $this->classes))
);
}

public function toArray(): array
Expand All @@ -52,7 +65,7 @@ public function toArray(): array

return [
'data-controller' => implode(' ', $this->controllers),
] + $this->values;
] + $this->values + $this->classes;
}

/**
Expand Down
17 changes: 9 additions & 8 deletions src/Twig/StimulusTwigExtension.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,19 @@ public function getFilters(): array
}

/**
* @param string $controllerName the Stimulus controller name
* @param array $controllerValues array of controller values
* @param string $controllerName the Stimulus controller name
* @param array $controllerValues array of controller values
* @param array $controllerClasses array of controller CSS classes
*/
public function renderStimulusController(Environment $env, $controllerName, array $controllerValues = []): StimulusControllersDto
public function renderStimulusController(Environment $env, $controllerName, array $controllerValues = [], array $controllerClasses = []): StimulusControllersDto
{
$dto = new StimulusControllersDto($env);

if (\is_array($controllerName)) {
trigger_deprecation('symfony/webpack-encore-bundle', 'v1.15.0', 'Passing an array as first argument of stimulus_controller() is deprecated.');

if ($controllerValues) {
throw new \InvalidArgumentException('You cannot pass an array to the first and second argument of stimulus_controller(): check the documentation.');
if ($controllerValues || $controllerClasses) {
throw new \InvalidArgumentException('You cannot pass an array to the first and second/third argument of stimulus_controller(): check the documentation.');
}

$data = $controllerName;
Expand All @@ -61,7 +62,7 @@ public function renderStimulusController(Environment $env, $controllerName, arra
return $dto;
}

$dto->addController($controllerName, $controllerValues);
$dto->addController($controllerName, $controllerValues, $controllerClasses);

return $dto;
}
Expand Down Expand Up @@ -107,9 +108,9 @@ public function renderStimulusAction(Environment $env, $controllerName, string $
return $dto;
}

public function appendStimulusController(StimulusControllersDto $dto, string $controllerName, array $controllerValues = []): StimulusControllersDto
public function appendStimulusController(StimulusControllersDto $dto, string $controllerName, array $controllerValues = [], array $controllerClasses = []): StimulusControllersDto
{
$dto->addController($controllerName, $controllerValues);
$dto->addController($controllerName, $controllerValues, $controllerClasses);

return $dto;
}
Expand Down
24 changes: 20 additions & 4 deletions tests/IntegrationTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,57 +209,73 @@ public function provideRenderStimulusController()
'controllerValues' => [
'my"Key"' => true,
],
'expectedString' => 'data-controller="symfony--ux-dropzone--dropzone" data-symfony--ux-dropzone--dropzone-my-key-value="true"',
'expectedArray' => ['data-controller' => 'symfony--ux-dropzone--dropzone', 'data-symfony--ux-dropzone--dropzone-my-key-value' => 'true'],
'controllerClasses' => [
'second"Key"' => 'loading',
],
'expectedString' => 'data-controller="symfony--ux-dropzone--dropzone" data-symfony--ux-dropzone--dropzone-my-key-value="true" data-symfony--ux-dropzone--dropzone-second-key-class="loading"',
'expectedArray' => ['data-controller' => 'symfony--ux-dropzone--dropzone', 'data-symfony--ux-dropzone--dropzone-my-key-value' => 'true', 'data-symfony--ux-dropzone--dropzone-second-key-class' => 'loading'],
];

yield 'short-single-controller-no-data' => [
'dataOrControllerName' => 'my-controller',
'controllerValues' => [],
'controllerClasses' => [],
'expectedString' => 'data-controller="my-controller"',
'expectedArray' => ['data-controller' => 'my-controller'],
];

yield 'short-single-controller-with-data' => [
'dataOrControllerName' => 'my-controller',
'controllerValues' => ['myValue' => 'scalar-value'],
'controllerClasses' => [],
'expectedString' => 'data-controller="my-controller" data-my-controller-my-value-value="scalar-value"',
'expectedArray' => ['data-controller' => 'my-controller', 'data-my-controller-my-value-value' => 'scalar-value'],
];

yield 'false-attribute-value-renders-false' => [
'dataOrControllerName' => 'false-controller',
'controllerValues' => ['isEnabled' => false],
'controllerClasses' => [],
'expectedString' => 'data-controller="false-controller" data-false-controller-is-enabled-value="false"',
'expectedArray' => ['data-controller' => 'false-controller', 'data-false-controller-is-enabled-value' => 'false'],
];

yield 'true-attribute-value-renders-true' => [
'dataOrControllerName' => 'true-controller',
'controllerValues' => ['isEnabled' => true],
'controllerClasses' => [],
'expectedString' => 'data-controller="true-controller" data-true-controller-is-enabled-value="true"',
'expectedArray' => ['data-controller' => 'true-controller', 'data-true-controller-is-enabled-value' => 'true'],
];

yield 'null-attribute-value-does-not-render' => [
'dataOrControllerName' => 'null-controller',
'controllerValues' => ['firstName' => null],
'controllerClasses' => [],
'expectedString' => 'data-controller="null-controller"',
'expectedArray' => ['data-controller' => 'null-controller'],
];

yield 'short-single-controller-no-data-with-class' => [
'dataOrControllerName' => 'my-controller',
'controllerValues' => [],
'controllerClasses' => ['loading' => 'spinner'],
'expectedString' => 'data-controller="my-controller" data-my-controller-loading-class="spinner"',
'expectedArray' => ['data-controller' => 'my-controller', 'data-my-controller-loading-class' => 'spinner'],
];
}

/**
* @dataProvider provideRenderStimulusController
*/
public function testRenderStimulusController($dataOrControllerName, array $controllerValues, string $expectedString, array $expectedArray)
public function testRenderStimulusController($dataOrControllerName, array $controllerValues, array $controllerClasses, string $expectedString, array $expectedArray)
{
$kernel = new WebpackEncoreIntegrationTestKernel(true);
$kernel->boot();
$twig = $this->getTwigEnvironmentFromBootedKernel($kernel);

$extension = new StimulusTwigExtension();
$dto = $extension->renderStimulusController($twig, $dataOrControllerName, $controllerValues);
$dto = $extension->renderStimulusController($twig, $dataOrControllerName, $controllerValues, $controllerClasses);
$this->assertSame($expectedString, (string) $dto);
$this->assertSame($expectedArray, $dto->toArray());
}
Expand Down