424d2f6965
## Description
This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.
As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes
This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)
### Why is this needed?
This PR is needed because, for the Lodash optimization from
7cbb12af88,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.
However, just using `import type` in the current codebase will give you
this:
<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">
That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.
### Why enforce `import type`?
Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)
I’m doing this because I believe `import type` improves DX and makes
refactorings easier.
Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)
```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
It’s pretty hard, right?
What about now?
```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```
Now, it’s clear that only `lodash` will be bundled.
This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.
This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.
## Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
This was tested to not break the build.
### Test Plan
> Add Testsmith test cases links that relate to this PR
### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
246 lines
8.9 KiB
TypeScript
246 lines
8.9 KiB
TypeScript
import log from "loglevel";
|
|
import AudioRecorderWidget, {
|
|
CONFIG as AUDIO_RECORDER_WIDGET_CONFIG,
|
|
} from "widgets/AudioRecorderWidget";
|
|
import AudioWidget, {
|
|
CONFIG as AUDIO_WIDGET_CONFIG,
|
|
} from "widgets/AudioWidget";
|
|
import ButtonGroupWidget, {
|
|
CONFIG as BUTTON_GROUP_CONFIG,
|
|
} from "widgets/ButtonGroupWidget";
|
|
import ButtonWidget, {
|
|
CONFIG as BUTTON_WIDGET_CONFIG,
|
|
} from "widgets/ButtonWidget";
|
|
import SelectWidget, {
|
|
CONFIG as SELECT_WIDGET_CONFIG,
|
|
} from "widgets/SelectWidget";
|
|
import CameraWidget, {
|
|
CONFIG as CAMERA_WIDGET_CONFIG,
|
|
} from "widgets/CameraWidget";
|
|
import CanvasWidget, {
|
|
CONFIG as CANVAS_WIDGET_CONFIG,
|
|
} from "widgets/CanvasWidget";
|
|
import ChartWidget, {
|
|
CONFIG as CHART_WIDGET_CONFIG,
|
|
} from "widgets/ChartWidget";
|
|
import CheckboxGroupWidget, {
|
|
CONFIG as CHECKBOX_GROUP_WIDGET_CONFIG,
|
|
} from "widgets/CheckboxGroupWidget";
|
|
import CheckboxWidget, {
|
|
CONFIG as CHECKBOX_WIDGET_CONFIG,
|
|
} from "widgets/CheckboxWidget";
|
|
import CircularProgressWidget, {
|
|
CONFIG as CIRCULAR_PROGRESS_WIDGET_CONFIG,
|
|
} from "widgets/CircularProgressWidget";
|
|
import ContainerWidget, {
|
|
CONFIG as CONTAINER_WIDGET_CONFIG,
|
|
} from "widgets/ContainerWidget";
|
|
import CurrencyInputWidget, {
|
|
CONFIG as CURRENCY_INPUT_WIDGET_V2_CONFIG,
|
|
} from "widgets/CurrencyInputWidget";
|
|
import DatePickerWidget, {
|
|
CONFIG as DATE_PICKER_WIDGET_CONFIG,
|
|
} from "widgets/DatePickerWidget";
|
|
import DatePickerWidget2, {
|
|
CONFIG as DATE_PICKER_WIDGET_2_CONFIG,
|
|
} from "widgets/DatePickerWidget2";
|
|
import DividerWidget, {
|
|
CONFIG as DIVIDER_WIDGET_CONFIG,
|
|
} from "widgets/DividerWidget";
|
|
import MultiSelectWidgetV2, {
|
|
CONFIG as MULTI_SELECT_WIDGET_V2_CONFIG,
|
|
} from "widgets/MultiSelectWidgetV2";
|
|
import DocumentViewerWidget, {
|
|
CONFIG as DOCUMENT_VIEWER_WIDGET_CONFIG,
|
|
} from "widgets/DocumentViewerWidget";
|
|
import DropdownWidget, {
|
|
CONFIG as DROPDOWN_WIDGET_CONFIG,
|
|
} from "widgets/DropdownWidget";
|
|
import FilePickerWidget, {
|
|
CONFIG as FILEPICKER_WIDGET_CONFIG,
|
|
} from "widgets/FilepickerWidget";
|
|
import FilePickerWidgetV2, {
|
|
CONFIG as FILEPICKER_WIDGET_V2_CONFIG,
|
|
} from "widgets/FilePickerWidgetV2";
|
|
import FormButtonWidget, {
|
|
CONFIG as FORM_BUTTON_WIDGET_CONFIG,
|
|
} from "widgets/FormButtonWidget";
|
|
import FormWidget, { CONFIG as FORM_WIDGET_CONFIG } from "widgets/FormWidget";
|
|
import IconButtonWidget, {
|
|
CONFIG as ICON_BUTTON_WIDGET_CONFIG,
|
|
} from "widgets/IconButtonWidget";
|
|
import IconWidget, { CONFIG as ICON_WIDGET_CONFIG } from "widgets/IconWidget";
|
|
import IframeWidget, {
|
|
CONFIG as IFRAME_WIDGET_CONFIG,
|
|
} from "widgets/IframeWidget";
|
|
import ImageWidget, {
|
|
CONFIG as IMAGE_WIDGET_CONFIG,
|
|
} from "widgets/ImageWidget";
|
|
import InputWidget, {
|
|
CONFIG as INPUT_WIDGET_CONFIG,
|
|
} from "widgets/InputWidget";
|
|
import InputWidgetV2, {
|
|
CONFIG as INPUT_WIDGET_V2_CONFIG,
|
|
} from "widgets/InputWidgetV2";
|
|
import ListWidget, { CONFIG as LIST_WIDGET_CONFIG } from "widgets/ListWidget";
|
|
import MapChartWidget, {
|
|
CONFIG as MAP_CHART_WIDGET_CONFIG,
|
|
} from "widgets/MapChartWidget";
|
|
import MapWidget, { CONFIG as MAP_WIDGET_CONFIG } from "widgets/MapWidget";
|
|
import MenuButtonWidget, {
|
|
CONFIG as MENU_BUTTON_WIDGET_CONFIG,
|
|
} from "widgets/MenuButtonWidget";
|
|
import ModalWidget, {
|
|
CONFIG as MODAL_WIDGET_CONFIG,
|
|
} from "widgets/ModalWidget";
|
|
import MultiSelectTreeWidget, {
|
|
CONFIG as MULTI_SELECT_TREE_WIDGET_CONFIG,
|
|
} from "widgets/MultiSelectTreeWidget";
|
|
import MultiSelectWidget, {
|
|
CONFIG as MULTI_SELECT_WIDGET_CONFIG,
|
|
} from "widgets/MultiSelectWidget";
|
|
import PhoneInputWidget, {
|
|
CONFIG as PHONE_INPUT_WIDGET_V2_CONFIG,
|
|
} from "widgets/PhoneInputWidget";
|
|
import ProgressBarWidget, {
|
|
CONFIG as PROGRESSBAR_WIDGET_CONFIG,
|
|
} from "widgets/ProgressBarWidget";
|
|
import RadioGroupWidget, {
|
|
CONFIG as RADIO_GROUP_WIDGET_CONFIG,
|
|
} from "widgets/RadioGroupWidget";
|
|
import RateWidget, { CONFIG as RATE_WIDGET_CONFIG } from "widgets/RateWidget";
|
|
import RichTextEditorWidget, {
|
|
CONFIG as RICH_TEXT_EDITOR_WIDGET_CONFIG,
|
|
} from "widgets/RichTextEditorWidget";
|
|
import SingleSelectTreeWidget, {
|
|
CONFIG as SINGLE_SELECT_TREE_WIDGET_CONFIG,
|
|
} from "widgets/SingleSelectTreeWidget";
|
|
import SkeletonWidget, {
|
|
CONFIG as SKELETON_WIDGET_CONFIG,
|
|
} from "widgets/SkeletonWidget";
|
|
import StatboxWidget, {
|
|
CONFIG as STATBOX_WIDGET_CONFIG,
|
|
} from "widgets/StatboxWidget";
|
|
import JSONFormWidget, {
|
|
CONFIG as JSON_FORM_WIDGET_CONFIG,
|
|
} from "widgets/JSONFormWidget";
|
|
import SwitchGroupWidget, {
|
|
CONFIG as SWITCH_GROUP_WIDGET_CONFIG,
|
|
} from "widgets/SwitchGroupWidget";
|
|
import SwitchWidget, {
|
|
CONFIG as SWITCH_WIDGET_CONFIG,
|
|
} from "widgets/SwitchWidget";
|
|
import TableWidget, {
|
|
CONFIG as TABLE_WIDGET_CONFIG,
|
|
} from "widgets/TableWidget";
|
|
import TabsMigratorWidget, {
|
|
CONFIG as TABS_MIGRATOR_WIDGET_CONFIG,
|
|
} from "widgets/TabsMigrator";
|
|
import TabsWidget, { CONFIG as TABS_WIDGET_CONFIG } from "widgets/TabsWidget";
|
|
import TextWidget, { CONFIG as TEXT_WIDGET_CONFIG } from "widgets/TextWidget";
|
|
import VideoWidget, {
|
|
CONFIG as VIDEO_WIDGET_CONFIG,
|
|
} from "widgets/VideoWidget";
|
|
import ProgressWidget, {
|
|
CONFIG as PROGRESS_WIDGET_CONFIG,
|
|
} from "widgets/ProgressWidget";
|
|
import { registerWidget } from "./WidgetRegisterHelpers";
|
|
import type { WidgetConfiguration } from "widgets/constants";
|
|
import TableWidgetV2, {
|
|
CONFIG as TABLE_WIDGET_CONFIG_V2,
|
|
} from "widgets/TableWidgetV2";
|
|
import NumberSliderWidget, {
|
|
CONFIG as NUMBER_SLIDER_WIDGET_CONFIG,
|
|
} from "widgets/NumberSliderWidget";
|
|
import RangeSliderWidget, {
|
|
CONFIG as RANGE_SLIDER_WIDGET_CONFIG,
|
|
} from "widgets/RangeSliderWidget";
|
|
import CategorySliderWidget, {
|
|
CONFIG as CATEGORY_SLIDER_WIDGET_CONFIG,
|
|
} from "widgets/CategorySliderWidget";
|
|
import CodeScannerWidget, {
|
|
CONFIG as CODE_SCANNER_WIDGET_CONFIG,
|
|
} from "widgets/CodeScannerWidget";
|
|
import ListWidgetV2, {
|
|
CONFIG as LIST_WIDGET_CONFIG_V2,
|
|
} from "widgets/ListWidgetV2";
|
|
|
|
export const ALL_WIDGETS_AND_CONFIG: [any, WidgetConfiguration][] = [
|
|
[CanvasWidget, CANVAS_WIDGET_CONFIG],
|
|
[SkeletonWidget, SKELETON_WIDGET_CONFIG],
|
|
[ContainerWidget, CONTAINER_WIDGET_CONFIG],
|
|
[TextWidget, TEXT_WIDGET_CONFIG],
|
|
[TableWidget, TABLE_WIDGET_CONFIG],
|
|
[CheckboxWidget, CHECKBOX_WIDGET_CONFIG],
|
|
[RadioGroupWidget, RADIO_GROUP_WIDGET_CONFIG],
|
|
[ButtonWidget, BUTTON_WIDGET_CONFIG],
|
|
[ImageWidget, IMAGE_WIDGET_CONFIG],
|
|
[VideoWidget, VIDEO_WIDGET_CONFIG],
|
|
[TabsWidget, TABS_WIDGET_CONFIG],
|
|
[ModalWidget, MODAL_WIDGET_CONFIG],
|
|
[ChartWidget, CHART_WIDGET_CONFIG],
|
|
[MapWidget, MAP_WIDGET_CONFIG],
|
|
[RichTextEditorWidget, RICH_TEXT_EDITOR_WIDGET_CONFIG],
|
|
[DatePickerWidget2, DATE_PICKER_WIDGET_2_CONFIG],
|
|
[SwitchWidget, SWITCH_WIDGET_CONFIG],
|
|
[FormWidget, FORM_WIDGET_CONFIG],
|
|
[RateWidget, RATE_WIDGET_CONFIG],
|
|
[IframeWidget, IFRAME_WIDGET_CONFIG],
|
|
[TabsMigratorWidget, TABS_MIGRATOR_WIDGET_CONFIG],
|
|
[DividerWidget, DIVIDER_WIDGET_CONFIG],
|
|
[MenuButtonWidget, MENU_BUTTON_WIDGET_CONFIG],
|
|
[IconButtonWidget, ICON_BUTTON_WIDGET_CONFIG],
|
|
[CheckboxGroupWidget, CHECKBOX_GROUP_WIDGET_CONFIG],
|
|
[FilePickerWidgetV2, FILEPICKER_WIDGET_V2_CONFIG],
|
|
[StatboxWidget, STATBOX_WIDGET_CONFIG],
|
|
[AudioRecorderWidget, AUDIO_RECORDER_WIDGET_CONFIG],
|
|
[DocumentViewerWidget, DOCUMENT_VIEWER_WIDGET_CONFIG],
|
|
[ButtonGroupWidget, BUTTON_GROUP_CONFIG],
|
|
[MultiSelectTreeWidget, MULTI_SELECT_TREE_WIDGET_CONFIG],
|
|
[SingleSelectTreeWidget, SINGLE_SELECT_TREE_WIDGET_CONFIG],
|
|
[SwitchGroupWidget, SWITCH_GROUP_WIDGET_CONFIG],
|
|
[AudioWidget, AUDIO_WIDGET_CONFIG],
|
|
[ProgressBarWidget, PROGRESSBAR_WIDGET_CONFIG],
|
|
[CameraWidget, CAMERA_WIDGET_CONFIG],
|
|
[MapChartWidget, MAP_CHART_WIDGET_CONFIG],
|
|
[SelectWidget, SELECT_WIDGET_CONFIG],
|
|
[MultiSelectWidgetV2, MULTI_SELECT_WIDGET_V2_CONFIG],
|
|
[InputWidgetV2, INPUT_WIDGET_V2_CONFIG],
|
|
[PhoneInputWidget, PHONE_INPUT_WIDGET_V2_CONFIG],
|
|
[CurrencyInputWidget, CURRENCY_INPUT_WIDGET_V2_CONFIG],
|
|
[JSONFormWidget, JSON_FORM_WIDGET_CONFIG],
|
|
[TableWidgetV2, TABLE_WIDGET_CONFIG_V2],
|
|
[NumberSliderWidget, NUMBER_SLIDER_WIDGET_CONFIG],
|
|
[RangeSliderWidget, RANGE_SLIDER_WIDGET_CONFIG],
|
|
[CategorySliderWidget, CATEGORY_SLIDER_WIDGET_CONFIG],
|
|
[CodeScannerWidget, CODE_SCANNER_WIDGET_CONFIG],
|
|
[ListWidgetV2, LIST_WIDGET_CONFIG_V2],
|
|
|
|
//Deprecated Widgets
|
|
[InputWidget, INPUT_WIDGET_CONFIG],
|
|
[DropdownWidget, DROPDOWN_WIDGET_CONFIG],
|
|
[DatePickerWidget, DATE_PICKER_WIDGET_CONFIG],
|
|
[IconWidget, ICON_WIDGET_CONFIG],
|
|
[FilePickerWidget, FILEPICKER_WIDGET_CONFIG],
|
|
[MultiSelectWidget, MULTI_SELECT_WIDGET_CONFIG],
|
|
[FormButtonWidget, FORM_BUTTON_WIDGET_CONFIG],
|
|
[ProgressWidget, PROGRESS_WIDGET_CONFIG],
|
|
[CircularProgressWidget, CIRCULAR_PROGRESS_WIDGET_CONFIG],
|
|
[ListWidget, LIST_WIDGET_CONFIG],
|
|
|
|
/*
|
|
* If a newly added widget works well inside the list widget,
|
|
* please add widget type in the List widget's allowed widget
|
|
* list, to make the new widget be droppable inside List widget.
|
|
*/
|
|
];
|
|
|
|
export const registerWidgets = () => {
|
|
const start = performance.now();
|
|
for (const widget of ALL_WIDGETS_AND_CONFIG) {
|
|
registerWidget(widget[0], widget[1] as WidgetConfiguration);
|
|
}
|
|
|
|
log.debug("Widget registration took: ", performance.now() - start, "ms");
|
|
};
|