chore: refactor jsx types

Author: nd0ut

src/blocks/CloudImageEditor/src/CloudImageEditorBlock.ts

@@ -30,6 +30,11 @@ type TabIdValue = (typeof TabId)[keyof typeof TabId];
 const DEFAULT_TABS = serializeCsv([...ALL_TABS]);
 
 export class CloudImageEditorBlock extends LitBlock {
+  public declare attributesMeta: ({ uuid: string } | { 'cdn-url': string }) &
+    Partial<{ tabs: string; 'crop-preset': string }> & {
+      'ctx-name': string;
+    };
+
   public override ctxOwner = true;
   public static override styleAttrs = ['uc-cloud-image-editor'];
 

src/blocks/CloudImageEditor/src/elements/button/BtnUi.ts

@@ -32,8 +32,8 @@ export class BtnUi extends LitBlock {
   @property({ attribute: 'title-prop' })
   public titleProp = '';
 
-  protected override firstUpdated(_changed: PropertyValues<this>): void {
-    super.firstUpdated(_changed);
+  protected override firstUpdated(changed: PropertyValues<this>): void {
+    super.firstUpdated(changed);
     this._applyReverse();
     this._applyThemeClass();
   }

src/blocks/Config/Config.ts

@@ -53,6 +53,10 @@ const getLocalPropName = (key: string) => `__${key}`;
 
 // biome-ignore lint/suspicious/noUnsafeDeclarationMerging: This is intentional interface merging, used to add configuration setters/getters
 export class Config extends LitBlock {
+  public declare attributesMeta: Partial<ConfigPlainType> & {
+    'ctx-name': string;
+  };
+
   public override init$ = {
     ...this.init$,
     ...Object.fromEntries(

src/blocks/FormInput/FormInput.ts

@@ -3,6 +3,9 @@ import type { OutputCollectionState } from '../../types/index';
 import { applyStyles } from '../../utils/applyStyles';
 
 export class FormInput extends LitUploaderBlock {
+  public declare propertiesMeta: {
+    'ctx-name': string;
+  };
   private _validationInputElement: HTMLInputElement | null = null;
   private _dynamicInputsContainer: HTMLDivElement | null = null;
 

src/blocks/UploadCtxProvider/UploadCtxProvider.ts

@@ -5,6 +5,9 @@ import { type EventPayload, EventType } from './EventEmitter';
 
 // biome-ignore lint/suspicious/noUnsafeDeclarationMerging: This is intentional interface merging, used to add event listener types
 export class UploadCtxProvider extends LitUploaderBlock {
+  public declare propertiesMeta: {
+    'ctx-name': string;
+  };
   public static override styleAttrs = ['uc-wgt-common'];
   public static EventType = EventType;
 

src/lit/LitBlock.ts

@@ -24,6 +24,10 @@ import { TestModeController } from './TestModeController';
 
 const LitBlockBase = RegisterableElementMixin(SymbioteMixin<SharedState>()(CssDataMixin(LightDomMixin(LitElement))));
 export class LitBlock extends LitBlockBase {
+  /** Special property to reflect properties metadata to build proper JSX types */
+  public declare attributesMeta: {
+    [key: string]: unknown;
+  };
   private __cfgProxy!: ConfigType;
 
   public static styleAttrs: string[] = [];

src/solutions/file-uploader/inline/FileUploaderInline.ts

@@ -13,6 +13,9 @@ type FileUploaderInlineInitState = BaseInitState & {
 };
 
 export class FileUploaderInline extends LitSolutionBlock {
+  public declare propertiesMeta: {
+    'ctx-name': string;
+  };
   public static override styleAttrs = [...super.styleAttrs, 'uc-file-uploader-inline'];
 
   @state()

src/solutions/file-uploader/minimal/FileUploaderMinimal.ts

@@ -16,6 +16,9 @@ type FileUploaderMinimalInitState = BaseInitState & {
 };
 
 export class FileUploaderMinimal extends LitSolutionBlock {
+  public declare propertiesMeta: {
+    'ctx-name': string;
+  };
   public static override styleAttrs = [...super.styleAttrs, 'uc-file-uploader-minimal'];
 
   @state()

src/solutions/file-uploader/regular/FileUploaderRegular.ts

@@ -10,6 +10,10 @@ interface FileUploaderRegularInitState extends BaseInitState {
 }
 
 export class FileUploaderRegular extends LitSolutionBlock {
+  public declare attributesMeta: {
+    headless: boolean;
+    'ctx-name': string;
+  };
   public static override styleAttrs = [...super.styleAttrs, 'uc-file-uploader-regular'];
 
   @property({ type: Boolean })

types/jsx.d.ts

@@ -1,66 +1,93 @@
 /// <reference types="react" />
 
-type ConfigPlainType = import('../dist/index.ts').ConfigPlainType;
+type LitBlock = import('../dist/index.ts').Block;
 type UploadCtxProvider = import('../dist/index.ts').UploadCtxProvider;
 type Config = import('../dist/index.ts').Config;
 type FileUploaderInline = import('../dist/index.ts').FileUploaderInline;
 type FileUploaderRegular = import('../dist/index.ts').FileUploaderRegular;
 type FileUploaderMinimal = import('../dist/index.ts').FileUploaderMinimal;
+type BtnUi = import('../dist/index.ts').BtnUi;
+type LineLoaderUi = import('../dist/index.ts').LineLoaderUi;
+type PresenceToggle = import('../dist/index.ts').PresenceToggle;
+type SliderUi = import('../dist/index.ts').SliderUi;
+type CropFrame = import('../dist/index.ts').CropFrame;
+type EditorCropButtonControl = import('../dist/index.ts').EditorCropButtonControl;
+type EditorAspectRatioButtonControl = import('../dist/index.ts').EditorAspectRatioButtonControl;
+type EditorFreeformButtonControl = import('../dist/index.ts').EditorFreeformButtonControl;
+type EditorFilterControl = import('../dist/index.ts').EditorFilterControl;
+type EditorOperationControl = import('../dist/index.ts').EditorOperationControl;
+type EditorImageCropper = import('../dist/index.ts').EditorImageCropper;
+type EditorImageFader = import('../dist/index.ts').EditorImageFader;
+type EditorScroller = import('../dist/index.ts').EditorScroller;
+type EditorSlider = import('../dist/index.ts').EditorSlider;
+type EditorToolbar = import('../dist/index.ts').EditorToolbar;
+type Icon = import('../dist/index.ts').Icon;
+type Img = import('../dist/index.ts').Img;
+type SimpleBtn = import('../dist/index.ts').SimpleBtn;
+type StartFrom = import('../dist/index.ts').StartFrom;
+type DropArea = import('../dist/index.ts').DropArea;
+type SourceBtn = import('../dist/index.ts').SourceBtn;
+type SourceList = import('../dist/index.ts').SourceList;
+type FileItem = import('../dist/index.ts').FileItem;
+type Modal = import('../dist/index.ts').Modal;
+type UploadList = import('../dist/index.ts').UploadList;
+type UrlSource = import('../dist/index.ts').UrlSource;
+type CameraSource = import('../dist/index.ts').CameraSource;
+type ProgressBarCommon = import('../dist/index.ts').ProgressBarCommon;
+type ProgressBar = import('../dist/index.ts').ProgressBar;
+type ExternalSource = import('../dist/index.ts').ExternalSource;
+type CloudImageEditorActivity = import('../dist/index.ts').CloudImageEditorActivity;
 type FormInput = import('../dist/index.ts').FormInput;
 type CloudImageEditorBlock = import('../dist/index.ts').CloudImageEditorBlock;
-type CtxAttributes = {
-  'ctx-name': string;
-  testMode?: boolean;
-};
+
 type CommonHtmlAttributes<T> = Partial<
   Pick<React.HTMLAttributes<T>, 'id' | 'children' | 'hidden'> & { class: React.HTMLAttributes<T>['className'] }
 >;
 
-type CustomElement<C, A = {}> = React.DetailedHTMLProps<CommonHtmlAttributes<C>, C> & A;
+type ReflectAttributes<T extends LitBlock> = T['attributesMeta'];
+
+type CustomElement<C> = React.DetailedHTMLProps<CommonHtmlAttributes<C>, C> & ReflectAttributes<C>;
 
 declare namespace JSX {
   interface IntrinsicElements {
-    'uc-crop-frame': any;
-    'uc-editor-crop-button-control': any;
-    'uc-editor-aspect-ratio-button-control': any;
-    'uc-editor-freeform-button-control': any;
-    'uc-editor-filter-control': any;
-    'uc-editor-operation-control': any;
-    'uc-editor-image-cropper': any;
-    'uc-editor-image-fader': any;
-    'uc-editor-scroller': any;
-    'uc-editor-slider': any;
-    'uc-editor-toolbar': any;
-    'uc-btn-ui': any;
-    'uc-line-loader-ui': any;
-    'uc-presence-toggle': any;
-    'uc-slider-ui': any;
-    'uc-icon': any;
-    'uc-img': any;
-    'uc-simple-btn': any;
-    'uc-start-from': any;
-    'uc-drop-area': any;
-    'uc-source-btn': any;
-    'uc-source-list': any;
-    'uc-file-item': any;
-    'uc-modal': any;
-    'uc-upload-list': any;
-    'uc-url-source': any;
-    'uc-camera-source': any;
-    'uc-progress-bar-common': any;
-    'uc-progress-bar': any;
-    'uc-external-source': any;
-    'uc-cloud-image-editor-activity': any;
-    'uc-cloud-image-editor-block': CustomElement<
-      CloudImageEditorBlock,
-      CtxAttributes & ({ uuid: string } | { 'cdn-url': string }) & Partial<{ tabs: string; 'crop-preset': string }>
-    >;
-    'uc-cloud-image-editor': CustomElement<CloudImageEditorBlock, JSX.IntrinsicElements['uc-cloud-image-editor-block']>;
-    'uc-form-input': CustomElement<FormInput, CtxAttributes>;
-    'uc-file-uploader-regular': CustomElement<FileUploaderRegular, CtxAttributes & Partial<{ headless: boolean }>>;
-    'uc-file-uploader-minimal': CustomElement<FileUploaderMinimal, CtxAttributes>;
-    'uc-file-uploader-inline': CustomElement<FileUploaderInline, CtxAttributes>;
-    'uc-upload-ctx-provider': CustomElement<UploadCtxProvider, CtxAttributes>;
-    'uc-config': CustomElement<Config, CtxAttributes & Partial<ConfigPlainType>>;
+    'uc-crop-frame': CustomElement<CropFrame>;
+    'uc-editor-crop-button-control': CustomElement<EditorCropButtonControl>;
+    'uc-editor-aspect-ratio-button-control': CustomElement<EditorAspectRatioButtonControl>;
+    'uc-editor-freeform-button-control': CustomElement<EditorFreeformButtonControl>;
+    'uc-editor-filter-control': CustomElement<EditorFilterControl>;
+    'uc-editor-operation-control': CustomElement<EditorOperationControl>;
+    'uc-editor-image-cropper': CustomElement<EditorImageCropper>;
+    'uc-editor-image-fader': CustomElement<EditorImageFader>;
+    'uc-editor-scroller': CustomElement<EditorScroller>;
+    'uc-editor-slider': CustomElement<EditorSlider>;
+    'uc-editor-toolbar': CustomElement<EditorToolbar>;
+    'uc-btn-ui': CustomElement<BtnUi>;
+    'uc-line-loader-ui': CustomElement<LineLoaderUi>;
+    'uc-presence-toggle': CustomElement<PresenceToggle>;
+    'uc-slider-ui': CustomElement<SliderUi>;
+    'uc-icon': CustomElement<Icon>;
+    'uc-img': CustomElement<Img>;
+    'uc-simple-btn': CustomElement<SimpleBtn>;
+    'uc-start-from': CustomElement<StartFrom>;
+    'uc-drop-area': CustomElement<DropArea>;
+    'uc-source-btn': CustomElement<SourceBtn>;
+    'uc-source-list': CustomElement<SourceList>;
+    'uc-file-item': CustomElement<FileItem>;
+    'uc-modal': CustomElement<Modal>;
+    'uc-upload-list': CustomElement<UploadList>;
+    'uc-url-source': CustomElement<UrlSource>;
+    'uc-camera-source': CustomElement<CameraSource>;
+    'uc-progress-bar-common': CustomElement<ProgressBarCommon>;
+    'uc-progress-bar': CustomElement<ProgressBar>;
+    'uc-external-source': CustomElement<ExternalSource>;
+    'uc-cloud-image-editor-activity': CustomElement<CloudImageEditorActivity>;
+    'uc-cloud-image-editor-block': CustomElement<CloudImageEditorBlock>;
+    'uc-cloud-image-editor': CustomElement<CloudImageEditorBlock>;
+    'uc-form-input': CustomElement<FormInput>;
+    'uc-file-uploader-regular': CustomElement<FileUploaderRegular>;
+    'uc-file-uploader-minimal': CustomElement<FileUploaderMinimal>;
+    'uc-file-uploader-inline': CustomElement<FileUploaderInline>;
+    'uc-upload-ctx-provider': CustomElement<UploadCtxProvider>;
+    'uc-config': CustomElement<Config>;
   }
 }