Merge branch '2.x' into fix-expanded-choices

Author: Lustmored

.github/workflows/test.yaml

@@ -9,11 +9,10 @@ jobs:
             - uses: actions/checkout@master
             - uses: shivammathur/setup-php@v2
               with:
-                  php-version: '7.4'
+                  php-version: '8.0'
+                  tools: php-cs-fixer, cs2pr
             - name: php-cs-fixer
-              run: |
-                  wget https://github.com/FriendsOfPHP/PHP-CS-Fixer/releases/download/v2.18.2/php-cs-fixer.phar -q
-                  php php-cs-fixer.phar fix --dry-run --diff
+              run: php-cs-fixer fix --dry-run --format=checkstyle | cs2pr
 
     coding-style-js:
         runs-on: ubuntu-latest

.gitignore

@@ -1,4 +1,4 @@
-.php_cs.cache
+.php-cs-fixer.cache
 node_modules
 yarn.lock
 yarn-error.log

.php_cs.dist renamed to .php-cs-fixer.dist.php

@@ -4,7 +4,7 @@
     exit(0);
 }
 
-return PhpCsFixer\Config::create()
+return (new PhpCsFixer\Config())
     ->setRules([
         '@Symfony' => true,
         '@Symfony:risky' => true,

src/Chartjs/Resources/assets/src/controller.ts

@@ -13,6 +13,8 @@ import { Controller } from '@hotwired/stimulus';
 import Chart from 'chart.js/auto';
 
 export default class extends Controller {
+    readonly viewValue: any;
+
     static values = {
         view: Object,
     };

src/Cropperjs/Resources/assets/src/controller.ts

@@ -14,6 +14,9 @@ import Cropper from 'cropperjs';
 import CropEvent = Cropper.CropEvent;
 
 export default class CropperController extends Controller {
+    readonly publicUrlValue: string;
+    readonly optionsValue: object;
+
     static values = {
         publicUrl: String,
         options: Object,

src/Dropzone/Resources/assets/src/controller.ts

@@ -12,6 +12,13 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
+    readonly inputTarget: HTMLInputElement;
+    readonly placeholderTarget: HTMLDivElement;
+    readonly previewTarget: HTMLDivElement;
+    readonly previewClearButtonTarget: HTMLButtonElement;
+    readonly previewFilenameTarget: HTMLDivElement;
+    readonly previewImageTarget: HTMLDivElement;
+
     static targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
 
     connect() {
@@ -39,7 +46,7 @@ export default class extends Controller {
         this._dispatchEvent('dropzone:clear');
     }
 
-    onInputChange(event) {
+    onInputChange(event: any) {
         const file = event.target.files[0];
         if (typeof file === 'undefined') {
             return;
@@ -62,23 +69,23 @@ export default class extends Controller {
         this._dispatchEvent('dropzone:change', file);
     }
 
-    _populateImagePreview(file) {
+    _populateImagePreview(file: Blob) {
         if (typeof FileReader === 'undefined') {
             // FileReader API not available, skip
             return;
         }
 
         const reader = new FileReader();
 
-        reader.addEventListener('load', (event) => {
+        reader.addEventListener('load', (event: any) => {
             this.previewImageTarget.style.display = 'block';
             this.previewImageTarget.style.backgroundImage = 'url("' + event.target.result + '")';
         });
 
         reader.readAsDataURL(file);
     }
 
-    _dispatchEvent(name: string, payload: any) {
+    _dispatchEvent(name: string, payload: any = {}) {
         this.element.dispatchEvent(new CustomEvent(name, { detail: payload }));
     }
 }

src/LazyImage/Resources/assets/src/controller.ts

@@ -12,20 +12,25 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
+    readonly srcValue: string;
+    readonly srcsetValue: any;
+    readonly hasSrcsetValue: boolean;
+
     static values = {
         src: String,
         srcset: Object,
     };
 
     connect() {
         const hd = new Image();
+        const element = this.element as HTMLImageElement;
 
         const srcsetString = this._calculateSrcsetString();
 
         hd.addEventListener('load', () => {
-            this.element.src = this.srcValue;
+            element.src = this.srcValue;
             if (srcsetString) {
-                this.element.srcset = srcsetString;
+                element.srcset = srcsetString;
             }
             this._dispatchEvent('lazy-image:ready', { image: hd });
         });
@@ -43,7 +48,7 @@ export default class extends Controller {
             return '';
         }
 
-        const sets = Object.keys(this.srcsetValue).map((size) => {
+        const sets = Object.keys(this.srcsetValue).map((size: string) => {
             return `${this.srcsetValue[size]} ${size}`;
         });
 

src/LazyImage/Resources/doc/index.rst

@@ -69,8 +69,9 @@ There is also support for the ``srcset`` attribute by passing an
         }) }}
     />
 
-**Note** The ``stimulus_controller()`` function comes from
-`WebpackEncoreBundle v1.10`_.
+.. note::
+
+    The ``stimulus_controller()`` function comes from `WebpackEncoreBundle v1.10`_.
 
 Instead of using a generated thumbnail that would exist on your
 filesystem, you can use the BlurHash algorithm to create a light,

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.1.0
+
+-   The Live Component AJAX endpoints now return HTML in all situations
+    instead of JSON.
+
+-   Send live action arguments to backend
+
 ## 2.0.0
 
 -   Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus`

src/LiveComponent/assets/dist/live_controller.js

@@ -1088,7 +1088,7 @@ class default_1 extends Controller {
         directives.forEach((directive) => {
             const _executeAction = () => {
                 this._clearWaitingDebouncedRenders();
-                this._makeRequest(directive.action);
+                this._makeRequest(directive.action, directive.named);
             };
             let handled = false;
             directive.modifiers.forEach((modifier) => {
@@ -1192,11 +1192,14 @@ class default_1 extends Controller {
             }, this.debounceValue || DEFAULT_DEBOUNCE);
         }
     }
-    _makeRequest(action) {
+    _makeRequest(action, args) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl;
         const [, queryString] = splitUrl;
         const params = new URLSearchParams(queryString || '');
+        if (typeof args === 'object' && Object.keys(args).length > 0) {
+            params.set('args', new URLSearchParams(args).toString());
+        }
         const fetchOptions = {};
         fetchOptions.headers = {
             'Accept': 'application/vnd.live-component+json',

src/LiveComponent/assets/src/live_controller.ts

@@ -6,12 +6,6 @@ import { buildFormData, buildSearchParams } from './http_data_helper';
 import { setDeepData, doesDeepPropertyExist, normalizeModelName } from './set_deep_data';
 import { haveRenderedValuesChanged } from './have_rendered_values_changed';
 
-interface LiveResponseData {
-    redirect_url?: string,
-    html?: string,
-    data?: any,
-}
-
 interface ElementLoadingDirectives {
     element: HTMLElement,
     directives: Directive[]
@@ -152,7 +146,7 @@ export default class extends Controller {
                 // taking precedence
                 this._clearWaitingDebouncedRenders();
 
-                this._makeRequest(directive.action);
+                this._makeRequest(directive.action, directive.named);
             }
 
             let handled = false;
@@ -203,20 +197,8 @@ export default class extends Controller {
         this._makeRequest(null);
     }
 
-    _getValueFromElement(element: HTMLElement){
-        const value = element.dataset.value || element.value;
-
-        if (!value) {
-            const clonedElement = (element.cloneNode());
-            // helps typescript know this is an HTMLElement
-            if (!(clonedElement instanceof HTMLElement)) {
-                throw new Error('cloneNode() produced incorrect type');
-            }
-
-            throw new Error(`The update() method could not be called for "${clonedElement.outerHTML}": the element must either have a "data-value" or "value" attribute set.`);
-        }
-
-        return value;
+    _getValueFromElement(element: HTMLElement) {
+        return element.dataset.value || (element as any).value;
     }
 
     _updateModelFromElement(element: HTMLElement, value: string, shouldRender: boolean) {
@@ -322,15 +304,19 @@ export default class extends Controller {
         }
     }
 
-    _makeRequest(action: string|null) {
+    _makeRequest(action: string|null, args: Record<string,unknown>) {
         const splitUrl = this.urlValue.split('?');
         let [url] = splitUrl
         const [, queryString] = splitUrl;
         const params = new URLSearchParams(queryString || '');
 
+        if (typeof args === 'object' && Object.keys(args).length > 0) {
+            params.set('args', new URLSearchParams(args).toString());
+        }
+
         const fetchOptions: RequestInit = {};
         fetchOptions.headers = {
-            'Accept': 'application/vnd.live-component+json',
+            'Accept': 'application/vnd.live-component+html',
         };
 
         if (action) {
@@ -361,8 +347,8 @@ export default class extends Controller {
 
             const isMostRecent = this.renderPromiseStack.removePromise(thisPromise);
             if (isMostRecent) {
-                response.json().then((data) => {
-                    this._processRerender(data)
+                response.text().then((html) => {
+                    this._processRerender(html, response);
                 });
             }
         })
@@ -373,24 +359,24 @@ export default class extends Controller {
      *
      * @private
      */
-    _processRerender(data: LiveResponseData) {
+    _processRerender(html: string, response: Response) {
         // check if the page is navigating away
         if (this.isWindowUnloaded) {
             return;
         }
 
-        if (data.redirect_url) {
+        if (response.headers.get('Location')) {
             // action returned a redirect
             if (typeof Turbo !== 'undefined') {
-                Turbo.visit(data.redirect_url);
+                Turbo.visit(response.headers.get('Location'));
             } else {
-                window.location.href = data.redirect_url;
+                window.location.href = response.headers.get('Location') || '';
             }
 
             return;
         }
 
-        if (!this._dispatchEvent('live:render', data, true, true)) {
+        if (!this._dispatchEvent('live:render', html, true, true)) {
             // preventDefault() was called
             return;
         }
@@ -400,15 +386,8 @@ export default class extends Controller {
         // elements to appear different unnecessarily
         this._onLoadingFinish();
 
-        if (!data.html) {
-            throw new Error('Missing html key on response JSON');
-        }
-
         // merge/patch in the new HTML
-        this._executeMorphdom(data.html);
-
-        // "data" holds the new, updated data
-        this.dataValue = data.data;
+        this._executeMorphdom(html);
     }
 
     _clearWaitingDebouncedRenders() {
@@ -640,7 +619,7 @@ export default class extends Controller {
         let callback: () => void;
         if (actionName.charAt(0) === '$') {
             callback = () => {
-                this[actionName]();
+                (this as any)[actionName]();
             }
         } else {
             callback = () => {
@@ -654,7 +633,7 @@ export default class extends Controller {
         this.pollingIntervals.push(timer);
     }
 
-    _dispatchEvent(name: string, payload: object | null = null, canBubble = true, cancelable = false) {
+    _dispatchEvent(name: string, payload: object | string | null = null, canBubble = true, cancelable = false) {
         return this.element.dispatchEvent(new CustomEvent(name, {
             bubbles: canBubble,
             cancelable,

src/LiveComponent/assets/test/controller/action.test.ts

@@ -35,6 +35,8 @@ describe('LiveController Action Tests', () => {
                 data-action="live#action"
                 data-action-name="save"
             >Save</button>
+
+            <button data-action="live#action" data-action-name="sendNamedArgs(a=1, b=2, c=3)">Send named args</button>
         </div>
     `;
 
@@ -48,10 +50,10 @@ describe('LiveController Action Tests', () => {
         const { element } = await startStimulus(template(data));
 
         // ONLY a post is sent, not a re-render GET
-        const postMock = fetchMock.postOnce('http://localhost/_components/my_component/save', {
-            html: template({ comments: 'hi weaver', isSaved: true }),
-            data: { comments: 'hi weaver', isSaved: true }
-        });
+        const postMock = fetchMock.postOnce(
+            'http://localhost/_components/my_component/save',
+            template({ comments: 'hi weaver', isSaved: true })
+        );
 
         await userEvent.type(getByLabelText(element, 'Comments:'), ' WEAVER');
 
@@ -64,4 +66,15 @@ describe('LiveController Action Tests', () => {
 
         expect(postMock.lastOptions().body.get('comments')).toEqual('hi WEAVER');
     });
+
+    it('Sends action named args', async () => {
+        const data = { comments: 'hi' };
+        const { element } = await startStimulus(template(data));
+
+        fetchMock.postOnce('http://localhost/_components/my_component/sendNamedArgs?values=a%3D1%26b%3D2%26c%3D3', {
+            html: template({ comments: 'hi' }),
+        });
+
+        getByText(element, 'Send named args').click();
+    });
 });

src/LiveComponent/assets/test/controller/child.test.ts

@@ -133,6 +133,7 @@ describe('LiveController parent -> child component tests', () => {
         const inputElement = getByLabelText(element, 'Content:');
         await userEvent.clear(inputElement);
         await userEvent.type(inputElement, 'changed content');
+        // change the rows on the server
         mockRerender({'value': 'changed content'}, childTemplate, (data) => {
             data.rows = 5;
         });

src/LiveComponent/assets/test/controller/csrf.test.ts

@@ -47,10 +47,10 @@ describe('LiveController CSRF Tests', () => {
         const data = { comments: 'hi' };
         const { element } = await startStimulus(template(data));
 
-        const postMock = fetchMock.postOnce('http://localhost/_components/my_component/save', {
-            html: template({ comments: 'hi', isSaved: true }),
-            data: { comments: 'hi', isSaved: true }
-        });
+        const postMock = fetchMock.postOnce(
+            'http://localhost/_components/my_component/save',
+            template({ comments: 'hi', isSaved: true })
+        );
         getByText(element, 'Save').click();
 
         await waitFor(() => expect(element).toHaveTextContent('Comment Saved!'));