minor symfony#1987 chore(typescript): upgrade target from es2017 to e…

…s2021 (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

chore(typescript): upgrade target from es2017 to es2021

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

We are in 2024, but we still targets ES2017 which requires TypeScript to import some helper functions (to handle `const {a, ...b} = c` and private class methods), which then ship Microsoft license (cc symfony#1937 (comment)).

Since those `dist/` files are:
- either handled by Symfony AssetMapper/ImportMap, which requires browsers to have `importmap` support (if a browser supports `importmap`, it supports rest operator and private class methods)
- either handled by Symfony Webpack Encore, which can polyfill if necessary through Babel/core-js

IMO we can configure an highest TypeScript target. We will have the following benefits:
- no more Microsoft license
- no more useless functions calls, so small performance improvments
- lighter `dist` files

WDYT?

Commits
-------

ca94369 chore(typescript): upgrade target from es2017 to es2021

src/Autocomplete/assets/dist/controller.js

@@ -256,7 +256,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
         score: (search) => {
             const scoringFunction = this.tomSelect.getScoreFunction(search);
             return (item) => {
-                return scoringFunction(Object.assign(Object.assign({}, item), { text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item.text) }));
+                return scoringFunction({ ...item, text: __classPrivateFieldGet(this, _default_1_instances, "m", _default_1_stripTags).call(this, item.text) });
             };
         },
         render: {
@@ -326,7 +326,7 @@ _default_1_instances = new WeakSet(), _default_1_getCommonConfig = function _def
 }, _default_1_stripTags = function _default_1_stripTags(string) {
     return string.replace(/(<([^>]+)>)/gi, '');
 }, _default_1_mergeObjects = function _default_1_mergeObjects(object1, object2) {
-    return Object.assign(Object.assign({}, object1), object2);
+    return { ...object1, ...object2 };
 }, _default_1_createTomSelect = function _default_1_createTomSelect(options) {
     const preConnectPayload = { options };
     this.dispatchEvent('pre-connect', preConnectPayload);

src/LiveComponent/assets/dist/live_controller.js

@@ -441,16 +441,16 @@ class ValueStore {
         return true;
     }
     getOriginalProps() {
-        return Object.assign({}, this.props);
+        return { ...this.props };
     }
     getDirtyProps() {
-        return Object.assign({}, this.dirtyProps);
+        return { ...this.dirtyProps };
     }
     getUpdatedPropsFromParent() {
-        return Object.assign({}, this.updatedPropsFromParent);
+        return { ...this.updatedPropsFromParent };
     }
     flushDirtyPropsToPending() {
-        this.pendingProps = Object.assign({}, this.dirtyProps);
+        this.pendingProps = { ...this.dirtyProps };
         this.dirtyProps = {};
     }
     reinitializeAllProps(props) {
@@ -459,7 +459,7 @@ class ValueStore {
         this.pendingProps = {};
     }
     pushPendingPropsBackToDirty() {
-        this.dirtyProps = Object.assign(Object.assign({}, this.pendingProps), this.dirtyProps);
+        this.dirtyProps = { ...this.pendingProps, ...this.dirtyProps };
         this.pendingProps = {};
     }
     storeNewPropsFromParent(props) {
@@ -1905,11 +1905,10 @@ class Component {
         this.id = id;
         this.listeners = new Map();
         listeners.forEach((listener) => {
-            var _a;
             if (!this.listeners.has(listener.event)) {
                 this.listeners.set(listener.event, []);
             }
-            (_a = this.listeners.get(listener.event)) === null || _a === void 0 ? void 0 : _a.push(listener.action);
+            this.listeners.get(listener.event)?.push(listener.action);
         });
         this.valueStore = new ValueStore(props);
         this.unsyncedInputsTracker = new UnsyncedInputsTracker(this, elementDriver);
@@ -2040,14 +2039,13 @@ class Component {
         this.valueStore.flushDirtyPropsToPending();
         this.isRequestPending = false;
         this.backendRequest.promise.then(async (response) => {
-            var _a;
             const backendResponse = new BackendResponse(response);
             const html = await backendResponse.getBody();
             for (const input of Object.values(this.pendingFiles)) {
                 input.value = '';
             }
             const headers = backendResponse.response.headers;
-            if (!((_a = headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.includes('application/vnd.live-component+html')) && !headers.get('X-Live-Redirect')) {
+            if (!headers.get('Content-Type')?.includes('application/vnd.live-component+html') && !headers.get('X-Live-Redirect')) {
                 const controls = { displayError: true };
                 this.valueStore.pushPendingPropsBackToDirty();
                 this.hooks.triggerHook('response:error', backendResponse, controls);
@@ -2427,9 +2425,8 @@ class LoadingPlugin {
             targetedModels.push(modifier.value);
         });
         directive.modifiers.forEach((modifier) => {
-            var _a;
             if (validModifiers.has(modifier.name)) {
-                const callable = (_a = validModifiers.get(modifier.name)) !== null && _a !== void 0 ? _a : (() => { });
+                const callable = validModifiers.get(modifier.name) ?? (() => { });
                 callable(modifier);
                 return;
             }
@@ -2764,7 +2761,7 @@ function toQueryString(data) {
             }
             else if (null !== iValue) {
                 if (typeof iValue === 'object') {
-                    entries = Object.assign(Object.assign({}, entries), buildQueryStringEntries(iValue, entries, key));
+                    entries = { ...entries, ...buildQueryStringEntries(iValue, entries, key) };
                 }
                 else {
                     entries[key] = encodeURIComponent(iValue)
@@ -2913,16 +2910,14 @@ class LazyPlugin {
         this.intersectionObserver = null;
     }
     attachToComponent(component) {
-        var _a;
-        if ('lazy' !== ((_a = component.element.attributes.getNamedItem('loading')) === null || _a === void 0 ? void 0 : _a.value)) {
+        if ('lazy' !== component.element.attributes.getNamedItem('loading')?.value) {
             return;
         }
         component.on('connect', () => {
             this.getObserver().observe(component.element);
         });
         component.on('disconnect', () => {
-            var _a;
-            (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.unobserve(component.element);
+            this.intersectionObserver?.unobserve(component.element);
         });
     }
     getObserver() {
@@ -2976,7 +2971,7 @@ class LiveControllerDefault extends Controller {
             throw new Error(`No action name provided on element: ${getElementAsTagText(event.currentTarget)}. Did you forget to add the "data-live-action-param" attribute?`);
         }
         const rawAction = params.action;
-        const actionArgs = Object.assign({}, params);
+        const actionArgs = { ...params };
         delete actionArgs.action;
         const directives = parseDirectives(rawAction);
         let debounce = false;
@@ -3003,9 +2998,8 @@ class LiveControllerDefault extends Controller {
                 }
             });
             directive.modifiers.forEach((modifier) => {
-                var _a;
                 if (validModifiers.has(modifier.name)) {
-                    const callable = (_a = validModifiers.get(modifier.name)) !== null && _a !== void 0 ? _a : (() => { });
+                    const callable = validModifiers.get(modifier.name) ?? (() => { });
                     callable(modifier);
                     return;
                 }
@@ -3056,7 +3050,7 @@ class LiveControllerDefault extends Controller {
             throw new Error(`No event name provided on element: ${getElementAsTagText(event.currentTarget)}. Did you forget to add the "data-live-event-param" attribute?`);
         }
         const eventInfo = params.event;
-        const eventArgs = Object.assign({}, params);
+        const eventArgs = { ...params };
         delete eventArgs.event;
         const directives = parseDirectives(eventInfo);
         const emits = [];
@@ -3133,7 +3127,6 @@ class LiveControllerDefault extends Controller {
         this.updateModelFromElementEvent(target, 'change');
     }
     updateModelFromElementEvent(element, eventName) {
-        var _a;
         if (!elementBelongsToThisComponent(element, this.component)) {
             return;
         }
@@ -3142,7 +3135,7 @@ class LiveControllerDefault extends Controller {
         }
         if (element instanceof HTMLInputElement && element.type === 'file') {
             const key = element.name;
-            if ((_a = element.files) === null || _a === void 0 ? void 0 : _a.length) {
+            if (element.files?.length) {
                 this.pendingFiles[key] = element;
             }
             else if (this.pendingFiles[key]) {

src/Svelte/assets/dist/render_controller.js

@@ -2,10 +2,9 @@ import { Controller } from '@hotwired/stimulus';
 
 class default_1 extends Controller {
     connect() {
-        var _a, _b;
         this.element.innerHTML = '';
-        this.props = (_a = this.propsValue) !== null && _a !== void 0 ? _a : undefined;
-        this.intro = (_b = this.introValue) !== null && _b !== void 0 ? _b : undefined;
+        this.props = this.propsValue ?? undefined;
+        this.intro = this.introValue ?? undefined;
         this.dispatchEvent('connect');
         const Component = window.resolveSvelteComponent(this.componentValue);
         this._destroyIfExists();
@@ -30,7 +29,12 @@ class default_1 extends Controller {
         }
     }
     dispatchEvent(name, payload = {}) {
-        const detail = Object.assign({ componentName: this.componentValue, props: this.props, intro: this.intro }, payload);
+        const detail = {
+            componentName: this.componentValue,
+            props: this.props,
+            intro: this.intro,
+            ...payload,
+        };
         this.dispatch(name, { detail, prefix: 'svelte' });
     }
 }

src/Translator/assets/dist/translator_controller.js

@@ -5,7 +5,7 @@ function formatIntl(id, parameters = {}, locale) {
         return '';
     }
     const intlMessage = new IntlMessageFormat(id, [locale.replace('_', '-')], undefined, { ignoreTag: true });
-    parameters = Object.assign({}, parameters);
+    parameters = { ...parameters };
     Object.entries(parameters).forEach(([key, value]) => {
         if (key.includes('%') || key.includes('{')) {
             delete parameters[key];

src/Vue/assets/dist/render_controller.js

@@ -3,8 +3,7 @@ import { createApp } from 'vue';
 
 class default_1 extends Controller {
     connect() {
-        var _a;
-        this.props = (_a = this.propsValue) !== null && _a !== void 0 ? _a : null;
+        this.props = this.propsValue ?? null;
         this.dispatchEvent('connect', { componentName: this.componentValue, props: this.props });
         const component = window.resolveVueComponent(this.componentValue);
         this.app = createApp(component, this.props);

tsconfig.json

@@ -7,7 +7,7 @@
         "rootDir": "src",
         "strict": true,
         "strictPropertyInitialization": false,
-        "target": "es2017",
+        "target": "es2021",
         "removeComments": true,
         "outDir": "types",
         "baseUrl": ".",