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

[StimulusBundle] Add support for typescript controllers #1335

Merged
merged 1 commit into from
Dec 18, 2023
+27 −9
Merged

[StimulusBundle] Add support for typescript controllers #1335

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
1 change: 1 addition & 0 deletions src/StimulusBundle/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.php-cs-fixer.cache
.phpunit.result.cache
composer.lock
var/
Copy link
Member

Choose a reason for hiding this comment

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

If not necessary, could this be reverted ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'd added it because when running the testsuite it created a failure html-file in var/browser/source and to not accidentally add it git. I'll create a PR.

vendor/
tests/fixtures/var
4 changes: 4 additions & 0 deletions src/StimulusBundle/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGELOG

## 2.x

- Added Typescript controllers support
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 there should be doc somewhere explaining a bit more this change.. as it could be disappointing for some :)

Copy link
Member

Choose a reason for hiding this comment

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

Good point - just a bit more clarity on how .ts controller files are now located (if you use TypeScript bundle to process in the first place)

Copy link
Contributor Author

@evertharmeling evertharmeling Dec 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Yeah fair enough, I'll try to add some documentation

EDIT: #1345


## 2.13.2

- Revert "Change JavaScript package to `type: module`"
Expand Down
8 changes: 6 additions & 2 deletions src/StimulusBundle/src/AssetMapper/ControllersMapGenerator.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
*/
class ControllersMapGenerator
{
private const FILENAME_REGEX = '/^.*[-_](controller\.[jt]s)$/';

public function __construct(
private AssetMapperInterface $assetMapper,
private UxPackageReader $uxPackageReader,
Expand Down Expand Up @@ -66,12 +68,14 @@ private function loadCustomControllers(): array
$finder = new Finder();
$finder->in($this->controllerPaths)
->files()
->name('/^.*[-_]controller\.js$/');
->name(self::FILENAME_REGEX);

$controllersMap = [];
foreach ($finder as $file) {
$name = $file->getRelativePathname();
$name = str_replace(['_controller.js', '-controller.js'], '', $name);
// use regex to extract 'controller'-postfix including extension
preg_match(self::FILENAME_REGEX, $name, $matches);
$name = str_replace(['_'.$matches[1], '-'.$matches[1]], '', $name);
$name = str_replace(['_', '/'], ['-', '--'], $name);

$asset = $this->assetMapper->getAssetFromSourcePath($file->getRealPath());
Expand Down
5 changes: 3 additions & 2 deletions src/StimulusBundle/tests/AssetMapper/ControllerMapGeneratorTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ public function testGetControllersMap()
$map = $generator->getControllersMap();
// + 3 controller.json UX controllers
// - 1 controllers.json UX controller is disabled
// + 8 custom controllers (1 file is not a controller & 1 is overridden)
$this->assertCount(10, $map);
// + 9 custom controllers (1 file is not a controller & 1 is overridden)
$this->assertCount(11, $map);
$packageNames = array_keys($map);
sort($packageNames);
$this->assertSame([
Expand All @@ -88,6 +88,7 @@ public function testGetControllersMap()
'subdir--deeper',
'subdir--deeper-with-dashes',
'subdir--deeper-with-underscores',
'typescript',
], $packageNames);

$controllerSecond = $map['fake-vendor--ux-package1--controller-second'];
Expand Down
12 changes: 7 additions & 5 deletions src/StimulusBundle/tests/AssetMapper/StimulusControllerLoaderFunctionalTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,14 @@ public function testFullApplicationLoad()
$this->assertSame([
// 1x import from loader.js (which is aliased to @symfony/stimulus-bundle via importmap)
'/assets/@symfony/stimulus-bundle/controllers.js',
// 6x from "controllers" (hello is overridden)
// 7x from "controllers" (hello is overridden)
'/assets/controllers/bye_controller.js',
'/assets/controllers/hello-with-dashes-controller.js',
'/assets/controllers/hello_with_underscores-controller.js',
'/assets/controllers/subdir/deeper-controller.js',
'/assets/controllers/subdir/deeper-with-dashes-controller.js',
'/assets/controllers/subdir/deeper_with_underscores-controller.js',
'/assets/controllers/typescript-controller.ts',
// 2x from UX packages, which are enabled in controllers.json
'/assets/fake-vendor/ux-package1/package-controller-second.js',
'/assets/fake-vendor/ux-package2/package-hello-controller.js',
Expand Down Expand Up @@ -92,7 +93,7 @@ public function testFullApplicationLoad()
$preLoadHrefs = $crawler->filter('link[rel="modulepreload"]')->each(function ($link) {
return $link->attr('href');
});
$this->assertCount(11, $preLoadHrefs);
$this->assertCount(12, $preLoadHrefs);
sort($preLoadHrefs);
$this->assertStringStartsWith('/assets/@symfony/stimulus-bundle/controllers-', $preLoadHrefs[0]);
$this->assertStringStartsWith('/assets/@symfony/stimulus-bundle/loader-', $preLoadHrefs[1]);
Expand All @@ -101,9 +102,10 @@ public function testFullApplicationLoad()
$this->assertStringStartsWith('/assets/controllers/subdir/deeper-controller-', $preLoadHrefs[5]);
$this->assertStringStartsWith('/assets/controllers/subdir/deeper-with-dashes-controller-', $preLoadHrefs[6]);
$this->assertStringStartsWith('/assets/controllers/subdir/deeper_with_underscores-controller-', $preLoadHrefs[7]);
$this->assertStringStartsWith('/assets/fake-vendor/ux-package2/package-hello-controller-', $preLoadHrefs[8]);
$this->assertStringStartsWith('/assets/more-controllers/hello-controller-', $preLoadHrefs[9]);
$this->assertStringStartsWith('/assets/vendor/@hotwired/stimulus/stimulus.index', $preLoadHrefs[10]);
$this->assertStringStartsWith('/assets/controllers/typescript-controller-', $preLoadHrefs[8]);
$this->assertStringStartsWith('/assets/fake-vendor/ux-package2/package-hello-controller-', $preLoadHrefs[9]);
$this->assertStringStartsWith('/assets/more-controllers/hello-controller-', $preLoadHrefs[10]);
$this->assertStringStartsWith('/assets/vendor/@hotwired/stimulus/stimulus.index', $preLoadHrefs[11]);
} else {
// legacy
$this->assertSame([
Expand Down
6 changes: 6 additions & 0 deletions src/StimulusBundle/tests/fixtures/assets/controllers/typescript-controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// typescript-controller.js
// @ts-ignore
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
}
Loading