Enabling allowDeclareFields in Babel to use declare for properties

This is actually the propery way to do this in ts+Stimulus

Author: weaverryan

babel.config.js

@@ -2,6 +2,6 @@ module.exports = {
     presets: [
         ['@babel/preset-env', {targets: {node: 'current'}}],
         '@babel/react',
-        '@babel/preset-typescript',
+        ['@babel/preset-typescript', { allowDeclareFields: true }]
     ],
 };

src/Autocomplete/assets/src/controller.ts

@@ -13,14 +13,14 @@ export default class extends Controller {
         preload: String,
     };
 
-    readonly urlValue: string;
-    readonly optionsAsHtmlValue: boolean;
-    readonly noMoreResultsTextValue: string;
-    readonly noResultsFoundTextValue: string;
-    readonly minCharactersValue: number;
-    readonly tomSelectOptionsValue: object;
-    readonly hasPreloadValue: boolean;
-    readonly preloadValue: string;
+    declare readonly urlValue: string;
+    declare readonly optionsAsHtmlValue: boolean;
+    declare readonly noMoreResultsTextValue: string;
+    declare readonly noResultsFoundTextValue: string;
+    declare readonly minCharactersValue: number;
+    declare readonly tomSelectOptionsValue: object;
+    declare readonly hasPreloadValue: boolean;
+    declare readonly preloadValue: string;
     tomSelect: TomSelect;
 
     initialize() {

src/Chartjs/assets/src/controller.ts

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

src/Cropperjs/assets/src/controller.ts

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

src/Dropzone/assets/src/controller.ts

@@ -12,12 +12,12 @@
 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;
+    declare readonly inputTarget: HTMLInputElement;
+    declare readonly placeholderTarget: HTMLDivElement;
+    declare readonly previewTarget: HTMLDivElement;
+    declare readonly previewClearButtonTarget: HTMLButtonElement;
+    declare readonly previewFilenameTarget: HTMLDivElement;
+    declare readonly previewImageTarget: HTMLDivElement;
 
     static targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
 

src/LazyImage/assets/src/controller.ts

@@ -12,9 +12,9 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    readonly srcValue: string;
-    readonly srcsetValue: any;
-    readonly hasSrcsetValue: boolean;
+    declare readonly srcValue: string;
+    declare readonly srcsetValue: any;
+    declare readonly hasSrcsetValue: boolean;
 
     static values = {
         src: String,

src/LiveComponent/assets/src/live_controller.ts

@@ -40,13 +40,13 @@ export default class extends Controller<HTMLElement> implements LiveController {
         fingerprint: String,
     };
 
-    readonly urlValue!: string;
-    readonly dataValue!: any;
-    readonly propsValue!: any;
-    readonly csrfValue!: string;
-    readonly hasDebounceValue: boolean;
-    readonly debounceValue: number;
-    readonly fingerprintValue: string;
+    declare readonly urlValue: string;
+    declare readonly dataValue: any;
+    declare readonly propsValue: any;
+    declare readonly csrfValue: string;
+    declare readonly hasDebounceValue: boolean;
+    declare readonly debounceValue: number;
+    declare readonly fingerprintValue: string;
 
     /** The component, wrapped in the convenience Proxy */
     private proxiedComponent: Component;

src/React/assets/src/render_controller.ts

@@ -14,8 +14,8 @@ import { createRoot } from 'react-dom/client';
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    readonly componentValue?: string;
-    readonly propsValue?: object;
+    declare readonly componentValue?: string;
+    declare readonly propsValue?: object;
 
     static values = {
         component: String,

src/Swup/assets/src/controller.ts

@@ -17,19 +17,19 @@ import SwupFadeTheme from '@swup/fade-theme';
 import SwupSlideTheme from '@swup/slide-theme';
 
 export default class extends Controller {
-    animateHistoryBrowsingValue: boolean;
-    hasAnimateHistoryBrowsingValue: boolean;
-    animationSelectorValue: string;
-    hasAnimationSelectorValue: boolean;
-    cacheValue: boolean;
-    hasCacheValue: boolean;
-    containersValue: string[];
-    mainElementValue: string;
-    hasMainElementValue: boolean;
-    linkSelectorValue: string;
-    hasLinkSelectorValue: boolean;
-    themeValue: string;
-    debugValue: boolean;
+    declare readonly animateHistoryBrowsingValue: boolean;
+    declare readonly hasAnimateHistoryBrowsingValue: boolean;
+    declare readonly animationSelectorValue: string;
+    declare readonly hasAnimationSelectorValue: boolean;
+    declare readonly cacheValue: boolean;
+    declare readonly hasCacheValue: boolean;
+    declare readonly containersValue: string[];
+    declare readonly mainElementValue: string;
+    declare readonly hasMainElementValue: boolean;
+    declare readonly linkSelectorValue: string;
+    declare readonly hasLinkSelectorValue: boolean;
+    declare readonly themeValue: string;
+    declare readonly debugValue: boolean;
 
     static values = {
         animateHistoryBrowsing: Boolean,

src/Typed/assets/src/controller.ts

@@ -34,24 +34,24 @@ export default class extends Controller {
         contentType: { type: String, default: 'html' },
     };
 
-    readonly stringsValue!: string[];
-    readonly typeSpeedValue: number;
-    readonly smartBackspaceValue: boolean;
-    readonly startDelayValue?: number;
-    readonly backSpeedValue?: number;
-    readonly shuffleValue?: boolean;
-    readonly backDelayValue: number;
-    readonly fadeOutValue?: boolean;
-    readonly fadeOutClassValue: string;
-    readonly fadeOutDelayValue: number;
-    readonly loopValue?: boolean;
-    readonly loopCountValue: number;
-    readonly showCursorValue: boolean;
-    readonly cursorCharValue: string;
-    readonly autoInsertCssValue: boolean;
-    readonly attrValue?: string;
-    readonly bindInputFocusEventsValue?: boolean;
-    readonly contentTypeValue: string;
+    declare readonly stringsValue: string[];
+    declare readonly typeSpeedValue: number;
+    declare readonly smartBackspaceValue: boolean;
+    declare readonly startDelayValue?: number;
+    declare readonly backSpeedValue?: number;
+    declare readonly shuffleValue?: boolean;
+    declare readonly backDelayValue: number;
+    declare readonly fadeOutValue?: boolean;
+    declare readonly fadeOutClassValue: string;
+    declare readonly fadeOutDelayValue: number;
+    declare readonly loopValue?: boolean;
+    declare readonly loopCountValue: number;
+    declare readonly showCursorValue: boolean;
+    declare readonly cursorCharValue: string;
+    declare readonly autoInsertCssValue: boolean;
+    declare readonly attrValue?: string;
+    declare readonly bindInputFocusEventsValue?: boolean;
+    declare readonly contentTypeValue: string;
 
     connect() {
         const options = {