e5b2a26c65
## Description We are improving the LCP by reducing the time to reach the first evaluation, aiming for a 1.8 to 2.2 second reduction. To achieve this, we’ve implemented the following changes: Code Splitting of Widgets: During page load, only the widgets required for an evaluation are loaded and registered. For every evaluation cycle we keep discovering widget types and load them as required. Web Worker Offloading: Macro tasks such as clearCache and JavaScript library installation have been moved to the web worker setup. These are now executed in a separate thread, allowing the firstUnevaluatedTree to be computed in parallel with JS library installation. Parallel JS Library Loading: All JavaScript libraries are now loaded in parallel within the web worker, instead of sequentially, improving efficiency. Deferred Rendering of AppViewer: We now render the AppViewer and Header component only after registering the remaining widgets. This ensures that heavy rendering tasks—such as expensive selector computations and loading additional chunks related to the AppViewer—can execute in parallel with the first evaluation, further enhancing performance. ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/16202622510> > Commit: b648036bd7b74ae742f5c5d7f6cfd770867a2828 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=16202622510&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Thu, 10 Jul 2025 19:22:25 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Widgets are now loaded and registered asynchronously, improving app startup and modularity. * Widget registration and configuration changes are now versioned, ensuring selectors and UI update appropriately. * Widget initialization and factory cache management are more robust, with explicit cache clearing after widget registration. * Added new Redux actions and selectors to manage first page load, deferred JS library loading, and page rendering state. * Theme handling and widget initialization in AppViewer are streamlined for faster evaluation and rendering. * Deferred loading of JavaScript libraries on first page load improves performance. * Conditional rendering gates added to AppViewer and Navigation components based on evaluation state. * **Bug Fixes** * Prevented errors when conditionally rendering widgets and navigation components before evaluation is complete. * Improved widget property pane and configuration tests to ensure all widgets are properly loaded and validated. * **Refactor** * Widget import and registration logic was refactored to support dynamic, on-demand loading. * Evaluation and initialization sagas were modularized for better maintainability and performance. * Widget factory and memoization logic were enhanced to allow explicit cache clearing and version tracking. * JavaScript library loading logic was parallelized for faster startup. * Theme application extracted into a dedicated component for clarity and reuse. * **Tests** * Expanded and updated widget and evaluation saga test suites to cover asynchronous widget loading, cache management, and first evaluation scenarios. * Added tests verifying widget factory cache behavior and first evaluation integration. * **Chores** * Updated internal dependencies and selectors to track widget configuration version changes, ensuring UI consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
183 lines
8.7 KiB
TypeScript
183 lines
8.7 KiB
TypeScript
import type { InputControlProps } from "components/propertyControls/InputTextControl";
|
|
import InputTextControl from "components/propertyControls/InputTextControl";
|
|
import type { DropDownControlProps } from "components/propertyControls/DropDownControl";
|
|
import DropDownControl from "components/propertyControls/DropDownControl";
|
|
import type { SwitchControlProps } from "components/propertyControls/SwitchControl";
|
|
import SwitchControl from "components/propertyControls/SwitchControl";
|
|
import OptionControl from "components/propertyControls/OptionControl";
|
|
import type { ControlProps } from "components/propertyControls/BaseControl";
|
|
import CodeEditorControl from "components/propertyControls/CodeEditorControl";
|
|
import type BaseControl from "components/propertyControls/BaseControl";
|
|
import type { DatePickerControlProps } from "components/propertyControls/DatePickerControl";
|
|
import DatePickerControl from "components/propertyControls/DatePickerControl";
|
|
import ChartDataControl from "components/propertyControls/ChartDataControl";
|
|
import LocationSearchControl from "components/propertyControls/LocationSearchControl";
|
|
import type { StepControlProps } from "components/propertyControls/StepControl";
|
|
import StepControl from "components/propertyControls/StepControl";
|
|
import TabControl from "components/propertyControls/TabControl";
|
|
import ActionSelectorControl from "components/propertyControls/ActionSelectorControl";
|
|
import ColumnActionSelectorControl from "components/propertyControls/ColumnActionSelectorControl";
|
|
import PrimaryColumnsControl from "components/propertyControls/PrimaryColumnsControl";
|
|
import type { PrimaryColumnDropdownControlProps } from "components/propertyControls/PrimaryColumnDropdownControl";
|
|
import PrimaryColumnDropdownControl from "components/propertyControls/PrimaryColumnDropdownControl";
|
|
import type { ColorPickerControlProps } from "components/propertyControls/ColorPickerControl";
|
|
import ColorPickerControl from "components/propertyControls/ColorPickerControl";
|
|
import type { PrimaryColumnColorPickerControlProps } from "components/propertyControls/PrimaryColumnColorPickerControl";
|
|
import PrimaryColumnColorPickerControl from "components/propertyControls/PrimaryColumnColorPickerControl";
|
|
import type { ComputeTablePropertyControlProps } from "components/propertyControls/ComputeTablePropertyControl";
|
|
import ComputeTablePropertyControl from "components/propertyControls/ComputeTablePropertyControl";
|
|
import type { IconTabControlProps } from "components/propertyControls/IconTabControl";
|
|
import IconTabControl from "components/propertyControls/IconTabControl";
|
|
import type { ButtonTabControlProps } from "components/propertyControls/ButtonTabControl";
|
|
import ButtonTabControl from "components/propertyControls/ButtonTabControl";
|
|
import type { MultiSwitchControlProps } from "components/propertyControls/MultiSwitchControl";
|
|
import MultiSwitchControl from "components/propertyControls/MultiSwitchControl";
|
|
import MenuItemsControl from "./MenuItemsControl";
|
|
import OpenConfigPanelControl from "./OpenConfigPanelControl";
|
|
import ButtonListControl from "./ButtonListControl";
|
|
import IconSelectControl from "./IconSelectControl";
|
|
import BoxShadowOptionsControl from "./BoxShadowOptionsControl";
|
|
import BorderRadiusOptionsControl from "./BorderRadiusOptionsControl";
|
|
import ButtonBorderRadiusOptionsControl from "./ButtonBorderRadiusControl";
|
|
import FieldConfigurationControl from "components/propertyControls/FieldConfigurationControl";
|
|
import JSONFormComputeControl from "./JSONFormComputeControl";
|
|
import ButtonControl from "./ButtonControl";
|
|
import LabelAlignmentOptionsControl from "./LabelAlignmentOptionsControl";
|
|
import type { NumericInputControlProps } from "./NumericInputControl";
|
|
import NumericInputControl from "./NumericInputControl";
|
|
import PrimaryColumnsControlV2 from "components/propertyControls/PrimaryColumnsControlV2";
|
|
import type { SelectDefaultValueControlProps } from "./SelectDefaultValueControl";
|
|
import SelectDefaultValueControl from "./SelectDefaultValueControl";
|
|
import type { ComputeTablePropertyControlPropsV2 } from "components/propertyControls/TableComputeValue";
|
|
import ComputeTablePropertyControlV2 from "components/propertyControls/TableComputeValue";
|
|
import type { PrimaryColumnColorPickerControlPropsV2 } from "components/propertyControls/PrimaryColumnColorPickerControlV2";
|
|
import PrimaryColumnColorPickerControlV2 from "components/propertyControls/PrimaryColumnColorPickerControlV2";
|
|
import type { TableInlineEditValidationControlProps } from "./TableInlineEditValidationControl";
|
|
import TableInlineEditValidationControl from "./TableInlineEditValidationControl";
|
|
import TableInlineEditValidPropertyControl from "./TableInlineEditValidPropertyControl";
|
|
import type { MenuButtonDynamicItemsControlProps } from "components/propertyControls/MenuButtonDynamicItemsControl";
|
|
import MenuButtonDynamicItemsControl from "components/propertyControls/MenuButtonDynamicItemsControl";
|
|
import type { ListComputeControlProps } from "./ListComputeControl";
|
|
import ListComputeControl from "./ListComputeControl";
|
|
import type { OneClickBindingControlProps } from "./OneClickBindingControl";
|
|
import OneClickBindingControl from "./OneClickBindingControl";
|
|
import type { WrappedCodeEditorControlProps } from "./WrappedCodeEditorControl";
|
|
import WrappedCodeEditorControl from "./WrappedCodeEditorControl";
|
|
import DynamicPropertiesControl from "./HTMLDocumentBuilderControl";
|
|
import CustomWidgetEditSourceButtonControl from "./CustomWidgetEditSourceButtonControl";
|
|
import CustomWidgetAddEventButtonControl from "./CustomWidgetAddEventButtonControl";
|
|
import type { ZoneStepperControlProps } from "./ZoneStepperControl";
|
|
import ZoneStepperControl from "./ZoneStepperControl";
|
|
import {
|
|
SectionSplitterControl,
|
|
type SectionSplitterControlProps,
|
|
} from "./SectionSplitterControl";
|
|
import type { IconSelectControlV2Props } from "./IconSelectControlV2";
|
|
import IconSelectControlV2 from "./IconSelectControlV2";
|
|
import PrimaryColumnsControlWDS from "./PrimaryColumnsControlWDS";
|
|
import ToolbarButtonListControl from "./ToolbarButtonListControl";
|
|
import ArrayControl from "./ArrayControl";
|
|
import TableCustomSortControl, {
|
|
type TableCustomSortControlProps,
|
|
} from "./TableCustomSortControl";
|
|
import EEPropertyControls from "ee/components/propertyControls";
|
|
|
|
export const PropertyControls = {
|
|
InputTextControl,
|
|
DropDownControl,
|
|
SwitchControl,
|
|
OptionControl,
|
|
ArrayControl,
|
|
CodeEditorControl,
|
|
DatePickerControl,
|
|
ActionSelectorControl,
|
|
ColumnActionSelectorControl,
|
|
MultiSwitchControl,
|
|
ChartDataControl,
|
|
LocationSearchControl,
|
|
StepControl,
|
|
TabControl,
|
|
ColorPickerControl,
|
|
PrimaryColumnsControl,
|
|
PrimaryColumnsControlV2,
|
|
PrimaryColumnDropdownControl,
|
|
IconTabControl,
|
|
ButtonTabControl,
|
|
ComputeTablePropertyControl,
|
|
ComputeTablePropertyControlV2,
|
|
MenuItemsControl,
|
|
MenuButtonDynamicItemsControl,
|
|
OpenConfigPanelControl,
|
|
ButtonListControl,
|
|
IconSelectControl,
|
|
BoxShadowOptionsControl,
|
|
BorderRadiusOptionsControl,
|
|
ButtonBorderRadiusOptionsControl,
|
|
FieldConfigurationControl,
|
|
JSONFormComputeControl,
|
|
ButtonControl,
|
|
LabelAlignmentOptionsControl,
|
|
NumericInputControl,
|
|
PrimaryColumnColorPickerControl,
|
|
PrimaryColumnColorPickerControlV2,
|
|
SelectDefaultValueControl,
|
|
TableInlineEditValidationControl,
|
|
TableInlineEditValidPropertyControl,
|
|
ListComputeControl,
|
|
OneClickBindingControl,
|
|
WrappedCodeEditorControl,
|
|
DynamicPropertiesControl,
|
|
CustomWidgetEditSourceButtonControl,
|
|
CustomWidgetAddEventButtonControl,
|
|
ZoneStepperControl,
|
|
SectionSplitterControl,
|
|
IconSelectControlV2,
|
|
PrimaryColumnsControlWDS,
|
|
ToolbarButtonListControl,
|
|
TableCustomSortControl,
|
|
...EEPropertyControls,
|
|
};
|
|
|
|
export type PropertyControlPropsType =
|
|
| ControlProps
|
|
| InputControlProps
|
|
| DropDownControlProps
|
|
| SwitchControlProps
|
|
| DatePickerControlProps
|
|
| MultiSwitchControlProps
|
|
| IconTabControlProps
|
|
| ButtonTabControlProps
|
|
| StepControlProps
|
|
| ColorPickerControlProps
|
|
| ComputeTablePropertyControlProps
|
|
| PrimaryColumnDropdownControlProps
|
|
| NumericInputControlProps
|
|
| PrimaryColumnColorPickerControlProps
|
|
| ComputeTablePropertyControlPropsV2
|
|
| MenuButtonDynamicItemsControlProps
|
|
| PrimaryColumnDropdownControlProps
|
|
| PrimaryColumnColorPickerControlPropsV2
|
|
| SelectDefaultValueControlProps
|
|
| TableInlineEditValidationControlProps
|
|
| ListComputeControlProps
|
|
| OneClickBindingControlProps
|
|
| WrappedCodeEditorControlProps
|
|
| ZoneStepperControlProps
|
|
| SectionSplitterControlProps
|
|
| IconSelectControlV2Props
|
|
| TableCustomSortControlProps;
|
|
|
|
export const getPropertyControlTypes = (): { [key: string]: string } => {
|
|
const _types: { [key: string]: string } = {};
|
|
|
|
Object.values(PropertyControls).forEach(
|
|
(Control: typeof BaseControl & { getControlType: () => string }) => {
|
|
const controlType = Control.getControlType();
|
|
|
|
_types[controlType] = controlType;
|
|
},
|
|
);
|
|
|
|
return _types;
|
|
};
|