Merge pull request #1543 from Kocal/symfony-reprise

[Reprise][StimulusBundle] Add recipe for symfony/reprise

symfony/reprise/0.1/assets/app.js

@@ -0,0 +1,9 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * This file will be included onto the page via the reprise_entry_script_tags('app') Twig function,
+ * which should already be in your base.html.twig.
+ */
+import './styles/app.css';
+
+console.log('This log comes from assets/app.js - welcome to Symfony Reprise! 🎉');

symfony/reprise/0.1/assets/styles/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: skyblue;
+}

symfony/reprise/0.1/config/packages/reprise.yaml

@@ -0,0 +1,34 @@
+# Reprise works with zero configuration. Every option below is shown at its
+# default value; uncomment the block and tweak what you need.
+# See https://github.com/symfony/reprise/blob/main/doc/index.rst#configuration
+# reprise:
+    # Directory the @symfony/reprise plugin writes entrypoints.json and manifest.json into.
+    # output_path: '%kernel.project_dir%/public/build'
+
+    # Throw when entrypoints.json or a requested entry is missing, instead of rendering nothing.
+    # strict_mode: true
+
+    # A framework.assets package name used to resolve entry URLs. null uses the default package.
+    # asset_package: null
+
+    # crossorigin attribute set alongside SRI integrity: false, 'anonymous' or 'use-credentials'.
+    # crossorigin: false
+
+    # Register rendered assets as WebLink HTTP/2 Link: preload headers (needs symfony/web-link).
+    # preload: true
+
+    # Default attributes added to every rendered <script> / <link> tag.
+    # script_attributes: []
+    # link_attributes: []
+
+framework:
+    assets:
+        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
+
+when@prod:
+    reprise:
+        # In prod we'd rather render nothing than let a missing entrypoints.json (or entry) take the app down with a 500.
+        strict_mode: false
+
+        # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
+        cache: true

symfony/reprise/0.1/manifest.json

@@ -0,0 +1,38 @@
+{
+    "bundles": {
+        "Symfony\\Reprise\\RepriseBundle": ["all"]
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/",
+        "config/": "%CONFIG_DIR%/"
+    },
+    "aliases": ["reprise"],
+    "conflict": {
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0",
+        "symfony/framework-bundle": "<6.4"
+    },
+    "gitignore": [
+        "/node_modules/",
+        "/%PUBLIC_DIR%/build/"
+    ],
+    "add-lines": [
+        {
+            "file": "templates/base.html.twig",
+            "content": [
+                "            {{ reprise_entry_link_tags('app') }}"
+            ],
+            "position": "after_target",
+            "target": "{% block stylesheets %}",
+            "warn_if_missing": true
+        },
+        {
+            "file": "templates/base.html.twig",
+            "content": [
+                "            {{ reprise_entry_script_tags('app') }}"
+            ],
+            "position": "after_target",
+            "target": "{% block javascripts %}",
+            "warn_if_missing": true
+        }
+    ]
+}

symfony/reprise/0.1/post-install.txt

@@ -0,0 +1,67 @@
+
+  <bg=blue;fg=white>                   </>
+  <bg=blue;fg=white>  Symfony Reprise  </>
+  <bg=blue;fg=white>                   </>
+
+  A few frontend steps remain to wire up your bundler.
+  The commands below use npm (or pnpm, yarn, ...).
+
+  * If you don't have a bundler yet, install <fg=green>Vite</> or <fg=green>Rsbuild</>:
+
+      <fg=green>npm install --save-dev vite</>
+      <comment># or</>
+      <fg=green>npm install --save-dev @rsbuild/core</>
+
+  * Install the Reprise plugin:
+
+      <fg=green>npm install --save-dev @symfony/reprise</>
+
+  * Register the plugin in your bundler config:
+
+    <comment>// vite.config.js</>
+    import { defineConfig } from 'vite'
+    import Symfony from '@symfony/reprise/vite'
+
+    export default defineConfig({
+        build: {
+            rollupOptions: {
+                input: {
+                    app: './assets/app.js',
+                },
+            },
+        },
+        plugins: [
+            Symfony({
+                // Enable support for Stimulus Controller and Symfony UX
+                // stimulus: './assets/controllers.json',
+            }),
+        ],
+    })
+
+    <comment>// rsbuild.config.js</>
+    import { defineConfig } from '@rsbuild/core'
+    import Symfony from '@symfony/reprise/rsbuild'
+
+    export default defineConfig({
+        source: {
+            entry: {
+                app: './assets/app.js',
+            },
+        },
+        plugins: [
+            Symfony({
+                // Enable support for Stimulus Controller and Symfony UX
+                // stimulus: './assets/controllers.json',
+            }),
+        ],
+    })
+
+  * Render your assets from Twig with <fg=green>reprise_entry_link_tags('app')</> and
+    <fg=green>reprise_entry_script_tags('app')</> (already added to <fg=green>templates/base.html.twig</> for you).
+
+  * Build your assets:
+
+      <fg=green>npx vite build</>     <comment># or: npx rsbuild build</>
+      <fg=green>npx vite</>           <comment># dev server (or: npx rsbuild dev)</>
+
+  * Read the documentation: <comment>https://github.com/symfony/reprise</>

symfony/stimulus-bundle/3.3/assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

symfony/stimulus-bundle/3.3/assets/controllers/csrf_protection_controller.js

@@ -0,0 +1,81 @@
+const nameCheck = /^[-_a-zA-Z0-9]{4,22}$/;
+const tokenCheck = /^[-_/+a-zA-Z0-9]{24,}$/;
+
+// Generate and double-submit a CSRF token in a form field and a cookie, as defined by Symfony's SameOriginCsrfTokenManager
+// Use `form.requestSubmit()` to ensure that the submit event is triggered. Using `form.submit()` will not trigger the event
+// and thus this event-listener will not be executed.
+document.addEventListener('submit', function (event) {
+    generateCsrfToken(event.target);
+}, true);
+
+// When @hotwired/turbo handles form submissions, send the CSRF token in a header in addition to a cookie
+// The `framework.csrf_protection.check_header` config option needs to be enabled for the header to be checked
+document.addEventListener('turbo:submit-start', function (event) {
+    const h = generateCsrfHeaders(event.detail.formSubmission.formElement);
+    Object.keys(h).map(function (k) {
+        event.detail.formSubmission.fetchRequest.headers[k] = h[k];
+    });
+});
+
+// When @hotwired/turbo handles form submissions, remove the CSRF cookie once a form has been submitted
+document.addEventListener('turbo:submit-end', function (event) {
+    removeCsrfToken(event.detail.formSubmission.formElement);
+});
+
+export function generateCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    let csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+    let csrfToken = csrfField.value;
+
+    if (!csrfCookie && nameCheck.test(csrfToken)) {
+        csrfField.setAttribute('data-csrf-protection-cookie-value', csrfCookie = csrfToken);
+        csrfField.defaultValue = csrfToken = btoa(String.fromCharCode.apply(null, (window.crypto || window.msCrypto).getRandomValues(new Uint8Array(18))));
+    }
+    csrfField.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (csrfCookie && tokenCheck.test(csrfToken)) {
+        const cookie = csrfCookie + '_' + csrfToken + '=' + csrfCookie + '; path=/; samesite=strict';
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+export function generateCsrfHeaders (formElement) {
+    const headers = {};
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return headers;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        headers[csrfCookie] = csrfField.value;
+    }
+
+    return headers;
+}
+
+export function removeCsrfToken (formElement) {
+    const csrfField = formElement.querySelector('input[data-controller="csrf-protection"], input[name="_csrf_token"]');
+
+    if (!csrfField) {
+        return;
+    }
+
+    const csrfCookie = csrfField.getAttribute('data-csrf-protection-cookie-value');
+
+    if (tokenCheck.test(csrfField.value) && nameCheck.test(csrfCookie)) {
+        const cookie = csrfCookie + '_' + csrfField.value + '=0; path=/; samesite=strict; max-age=0';
+
+        document.cookie = window.location.protocol === 'https:' ? '__Host-' + cookie + '; secure' : cookie;
+    }
+}
+
+/* stimulusFetch: 'lazy' */
+export default 'csrf-protection-controller';

symfony/stimulus-bundle/3.3/assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

symfony/stimulus-bundle/3.3/assets/stimulus_bootstrap.js

@@ -0,0 +1,2 @@
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

symfony/stimulus-bundle/3.3/manifest.json

@@ -0,0 +1,69 @@
+{
+    "bundles": {
+        "Symfony\\UX\\StimulusBundle\\StimulusBundle": ["all"]
+    },
+    "copy-from-recipe": {
+        "assets/": "assets/"
+    },
+    "aliases": ["stimulus", "stimulus-bundle"],
+    "conflict": {
+        "symfony/framework-bundle": "<7.2",
+        "symfony/security-csrf": "<7.2",
+        "symfony/webpack-encore-bundle": "<2.0",
+        "symfony/flex": "<1.20.0 || >=2.0.0,<2.3.0"
+    },
+    "add-lines": [
+        {
+            "file": "webpack.config.js",
+            "content": [
+                "",
+                "    // enables the Symfony UX Stimulus bridge (used in assets/stimulus_bootstrap.js)",
+                "    .enableStimulusBridge('./assets/controllers.json')"
+            ],
+            "position": "after_target",
+            "target": ".splitEntryChunks()"
+        },
+        {
+            "file": "assets/app.js",
+            "content": [
+                "import './stimulus_bootstrap.js';"
+            ],
+            "position": "top",
+            "warn_if_missing": true
+        },
+        {
+            "file": "assets/stimulus_bootstrap.js",
+            "content": [
+                "import { startStimulusApp } from '@symfony/stimulus-bridge';",
+                "",
+                "// Registers Stimulus controllers from controllers.json and in the controllers/ directory",
+                "export const app = startStimulusApp(import.meta.webpackContext('@symfony/stimulus-bridge/lazy-controller-loader!./controllers', {",
+                "    recursive: true,",
+                "    regExp: /\\.[jt]sx?$/,",
+                "}));"
+            ],
+            "position": "top",
+            "requires": "symfony/webpack-encore-bundle"
+        },
+        {
+            "file": "assets/stimulus_bootstrap.js",
+            "content": [
+                "import { startStimulusApp } from '@symfony/stimulus-bundle';",
+                "",
+                "const app = startStimulusApp();"
+            ],
+            "position": "top",
+            "requires": "symfony/asset-mapper"
+        },
+        {
+            "file": "assets/stimulus_bootstrap.js",
+            "content": [
+                "import { startStimulusApp } from '@symfony/reprise/stimulus';",
+                "",
+                "const app = startStimulusApp();"
+            ],
+            "position": "top",
+            "requires": "symfony/reprise"
+        }
+    ]
+}

symfony/stimulus-bundle/3.3/post-install.txt

@@ -0,0 +1,14 @@
+
+  * Add a <comment>data-controller="hello"</> attribute to any element to try the example controller.
+
+  * Using <fg=green>Symfony Reprise</>? Turn Stimulus on by adding the <fg=green>stimulus</> option to the
+    Symfony() plugin in your <comment>vite.config</> or <comment>rsbuild.config</>:
+
+        Symfony({
+            stimulus: './assets/controllers.json',
+        })
+
+  * Using <fg=green>Webpack Encore</>? Install the Stimulus bridge, which is no longer
+    added automatically as of StimulusBundle 3.3:
+
+      <fg=green>npm install --save-dev @symfony/stimulus-bridge</>