feature branch: use pentatrion/vite-bundle

.editorconfig

@@ -0,0 +1,22 @@
+root = true
+
+[*.json]
+indent_size = 4
+
+[*.{yaml,yml}]
+indent_size = 4
+
+[*.php]
+indent_size = 4
+
+[*.css]
+indent_size = 4
+
+[*.{ts,js,tsx,jsx}]
+indent_size = 4
+
+[*.twig]
+indent_size = 4
+
+[*.html]
+indent_size = 4

.github/workflows/javascript.yml

@@ -0,0 +1,39 @@
+name: "JavaScript"
+on:
+  push:
+    branches: ["main", "vite"]
+  pull_request:
+    branches: ["main", "vite"]
+
+defaults:
+  run:
+    working-directory: .
+
+jobs:
+  lint:
+    name: Eslint and Tsc
+    strategy:
+      fail-fast: true
+      matrix:
+        node-versions: [22]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-versions }}
+
+      - name: "Install JS dependencies"
+        run: "npm ci"
+
+      - name: "Eslint"
+        run: "npm run lint:check"
+
+      - name: "Tsc"
+        run: "npm run tsc:check"
+
+      - name: "Test"
+        run: "npm run test"

.gitignore

@@ -20,13 +20,15 @@
 ###> jolicode/castor ###
 .castor.stub.php
 ###< jolicode/castor ###
-
-###> symfony/asset-mapper ###
-/public/assets/
-###< symfony/asset-mapper ###
-
 ###> phpunit/phpunit ###
 /phpunit.xml
 .phpunit.result.cache
 .phpunit.cache
 ###< phpunit/phpunit ###
+
+###> pentatrion/vite-bundle ###
+/node_modules/
+/public/build/
+###< pentatrion/vite-bundle ###
+
+/.vscode

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "arrowParens": "always",
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "tabWidth": 4
+}

Makefile

@@ -2,7 +2,7 @@ SHELL = sh
 .DEFAULT_GOAL = help
 
 # change your prod domain here
-DOMAIN = microsymfony.ovh
+DOMAIN = vite.microsymfony.ovh
 
 # modify the code coverage threshold here
 COVERAGE_THRESHOLD = 100
@@ -17,6 +17,7 @@ help: ## Outputs this help screen
 ## —— Symfony binary 💻 ————————————————————————————————————————————————————————
 start: ## Serve the application with the Symfony binary
 	@symfony serve --daemon
+	@npm run dev
 
 stop: ## Stop the web server
 	@symfony server:stop
@@ -112,7 +113,7 @@ ci: coverage warmup lint
 
 
 ## —— Other tools and helpers 🔨 ———————————————————————————————————————————————
-versions: version-make version-php version-composer version-symfony version-phpunit version-phpstan version-php-cs-fixer ## Output current stack versions
+versions: version-make version-php version-composer version-symfony version-phpunit version-phpstan version-php-cs-fixer version-npm version-node ## Output current stack versions
 version-make:
 	@echo   '—— Make ———————————————————————————————————————————————————————————'
 	@$(MAKE) --version
@@ -134,6 +135,12 @@ version-phpstan:
 version-php-cs-fixer:
 	@echo '\n—— php-cs-fixer ———————————————————————————————————————————————————'
 	@PHP_CS_FIXER_IGNORE_ENV=1 vendor/bin/php-cs-fixer --version
+version-npm:
+	@echo '\n—— NPM ————————————————————————————————————————————————————————————'
+	@npm --version
+version-node:
+	@echo '\n—— node ———————————————————————————————————————————————————————————'
+	@node --version
 	@echo
 
 check-requirements: ## Checks requirements for running Symfony
@@ -147,7 +154,7 @@ deploy: ## Simple manual deploy on a VPS (this is to update the demo site https:
 	@chown -R www-data: ./var/*
 	@cp .env.local.dist .env.local
 	@composer dump-env prod -n
-	@bin/console asset-map:compile
+	@npm run build
 
 le-renew: ## Renew Let's Encrypt HTTPS certificates
-	@certbot --apache -d $(DOMAIN) -d www.$(DOMAIN)
+	@certbot --apache -d $(DOMAIN)

README.md

@@ -156,9 +156,9 @@ Open [https://localhost](https://localhost) and enjoy! 🙂
   * [Tests job output](https://github.com/strangebuzz/MicroSymfony/actions/runs/12099802785/job/33737745422)
   * [Lint job output](https://github.com/strangebuzz/MicroSymfony/actions/runs/12099802785/job/33737745094)
   * [Security job output](https://github.com/strangebuzz/MicroSymfony/actions/runs/12099802785/job/33737745205)
-* Asset mapper+Stimulus ([documentation](https://symfony.com/doc/current/frontend/asset_mapper.html))
-  * Vanilla Js ([source](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/controllers/hello_controller.js)) ([demo](https://microsymfony.ovh/stimulus))
-  * Fetch on a JSON endpoint of the application ([source](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/controllers/api_controller.js)) ([demo](https://microsymfony.ovh/stimulus)) 
+* Vite + Stimulus ([documentation](https://symfony-vite.pentatrion.com/))
+  * Hello Stimulus ([source](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/controllers/hello_controller.ts)) ([demo](https://vite.microsymfony.ovh/stimulus))
+  * Fetch on a JSON endpoint of the application ([source](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/controllers/api_controller.ts)) ([demo](https://vite.microsymfony.ovh/stimulus)) 
 * A custom error template
   * [Source](https://github.com/strangebuzz/MicroSymfony/blob/main/templates/bundles/TwigBundle/Exception/error.html.twig)
   * [Demo](https://microsymfony.ovh/404) 
@@ -198,7 +198,7 @@ One will rebase those branches regularly so they are always up to date.
 
 ### Symfony-UX
 
-Turbo forms are disabled in [assets/app.js](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/app.js).
+Turbo forms are disabled in [assets/app.ts](https://github.com/strangebuzz/MicroSymfony/blob/main/assets/app.ts).
 To enable the feature for a given form, add the `data-turbo="true"` attribute to it. 
 Or change the parameter `Turbo.setFormMode` to `on` to activate the feature globally.
 In both cases, your controller code has to be [modified accordingly](https://symfony.com/bundles/ux-turbo/current/index.html#3-form-response-code-changes).

assets/app.ts

@@ -0,0 +1,17 @@
+/*
+ * Welcome to your app's main TypeScript file!
+ *
+ * This file will be included onto the page via
+ *  - vite_entry_script_tags('app')
+ *  - vite_entry_link_tags('app')
+ * Twig functions which should already be in your base.html.twig.
+ */
+
+// app
+import './bootstrap.js';
+
+// "optin" - No turbo forms unless you insist. Use data-turbo="true" to enable turbo on individual forms.
+// @see https://stackoverflow.com/a/76286583/633864
+Turbo.config.forms.mode = 'optin';
+
+console.log('This log comes from assets/app.ts - welcome to ViteBundle! 🎉');

assets/bootstrap.ts

@@ -0,0 +1,14 @@
+import { registerControllers, startStimulusApp } from 'vite-plugin-symfony/stimulus/helpers';
+
+const app = startStimulusApp();
+
+registerControllers(
+    app,
+    import.meta.glob<StimulusControllerInfosImport>('./controllers/*_controller.ts', {
+        query: '?stimulus',
+        eager: true,
+    }),
+);
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers/api_controller.test.ts

@@ -0,0 +1,66 @@
+import { afterAll, afterEach, beforeAll, expect, test } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/dom';
+import { Application } from '@hotwired/stimulus';
+import ApiController from './api_controller';
+
+import { setupServer } from 'msw/node';
+import { HttpResponse, http } from 'msw';
+
+const handlers = [
+    http.get('/api/slugify', () => {
+        return HttpResponse.json({ slug: 'hello-world' });
+    }),
+];
+const server = setupServer(...handlers);
+
+function getController() {
+    const div = document.createElement('div');
+    div.innerHTML = `
+        <p data-controller="api" data-api-url-value="/api/slugify">
+            <label for="title">
+                Enter a blog post title below:
+                <input type="text" required="" name="title" data-api-target="title" data-action="api#slugify" id="title">
+            </label>
+
+            <label for="slug">
+                Slug (readonly):
+                <input readonly="" name="slug" data-api-target="slug" type="text" id="slug">
+            </label>
+        </p>
+    `;
+
+    return div;
+}
+
+beforeAll(() => {
+    server.listen();
+    const app = Application.start();
+    app.register('api', ApiController);
+});
+
+afterEach(() => {
+    server.resetHandlers();
+    document.body.innerHTML = '';
+});
+
+afterAll(() => server.close());
+
+test('show slug', async () => {
+    const user = userEvent.setup();
+    const container = getController();
+    document.body.append(container);
+
+    const title = screen.getByLabelText<HTMLInputElement>('post title', { exact: false });
+    const slug = screen.getByLabelText<HTMLInputElement>('Slug', { exact: false });
+
+    expect(slug.value).toBe('');
+
+    await user.type(title, 'Hello World !');
+
+    waitFor(() => {
+        expect(slug.value).not.toBe('');
+    });
+
+    expect(slug.value).toBe('hello-world');
+});

assets/controllers/api_controller.ts

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<HTMLElement> {
+    declare readonly titleTarget: HTMLInputElement;
+    declare readonly slugTarget: HTMLInputElement;
+    static targets = ['title', 'slug'];
+
+    declare urlValue: string;
+    static values = {
+        url: String,
+    };
+
+    connect() {
+        console.log('Dataset: ', this.element.dataset); // list all data properties of the controller
+    }
+
+    slugify() {
+        const apiUrl = this.urlValue + '?title=' + this.titleTarget.value;
+        const slugTarget = this.slugTarget;
+        fetch(apiUrl)
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (data) {
+                slugTarget.value = data.slug;
+            })
+            .catch(function (error) {
+                console.log('An error occured. 😞', error);
+            });
+    }
+}