From 38e064fa0f54cf420cce07178ddb2ec8c1e79343 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 15 Jun 2021 19:36:56 +0100 Subject: [PATCH] Fix all eslint issues --- packages/bbui/src/Form/Core/Combobox.svelte | 1 + packages/bbui/src/Form/Core/DatePicker.svelte | 1 - packages/bbui/src/Form/Core/Dropzone.svelte | 23 +++---------- .../bbui/src/Form/Core/Multiselect.svelte | 2 ++ packages/bbui/src/Form/Core/Picker.svelte | 2 +- packages/bbui/src/Form/Core/RadioGroup.svelte | 4 ++- packages/bbui/src/Form/Core/Switch.svelte | 1 - packages/bbui/src/Form/Multiselect.svelte | 1 + packages/bbui/src/Icon/Icon.svelte | 6 +++- packages/bbui/src/Label/Label.svelte | 2 +- packages/bbui/src/Modal/Content.svelte | 11 ------- packages/bbui/src/Modal/QuizModal.svelte | 1 - .../bbui/src/ProgressBar/ProgressBar.svelte | 1 - packages/bbui/src/Table/CellRenderer.svelte | 1 - .../bbui/src/Table/SelectEditRenderer.svelte | 1 - .../FlowChart/AutomationBlockTagline.svelte | 2 +- .../FlowChart/FlowItem.svelte | 10 ------ .../CreateAutomationModal.svelte | 4 --- .../automation/SetupPanel/CronBuilder.svelte | 2 +- .../backend/DataTable/DataTable.svelte | 1 - .../components/backend/DataTable/Table.svelte | 6 ---- .../DataTable/buttons/DeleteRowsButton.svelte | 2 +- .../DataTable/modals/CalculateModal.svelte | 1 - .../DataTable/modals/CreateEditColumn.svelte | 1 - .../DataTable/modals/CreateViewModal.svelte | 2 -- .../DataTable/modals/FilterModal.svelte | 1 - .../DataTable/modals/GroupByModal.svelte | 3 +- .../DataTable/modals/ManageAccessModal.svelte | 1 - .../popovers/EditDatasourcePopover.svelte | 2 +- .../modals/CreateTableModal.svelte | 1 - .../popovers/EditTablePopover.svelte | 18 ----------- .../popovers/EditViewPopover.svelte | 1 - .../src/components/common/ValuesList.svelte | 2 +- .../common/bindings/ServerBindingPanel.svelte | 5 +-- .../common/users/PasswordRepeatInput.svelte | 1 + .../CreateWebhookDeploymentModal.svelte | 1 - .../src/components/deploy/DeployModal.svelte | 1 - .../deploy/DeploymentHistory.svelte | 7 +--- .../src/components/deploy/RevertModal.svelte | 10 +----- .../AppPreview/ComponentSelectionList.svelte | 8 +---- .../AppPreview/CurrentItemPreview.svelte | 2 +- .../ComponentDropdownMenu.svelte | 10 ------ .../ComponentTree.svelte | 3 +- .../NavigationPanel/NewLayoutModal.svelte | 1 - .../design/PropertiesPanel/CategoryTab.svelte | 2 +- .../design/PropertiesPanel/DesignView.svelte | 4 --- .../PropertiesPanel/PropertiesPanel.svelte | 7 ---- .../DataProviderSelect.svelte | 1 - .../PropertyControls/DataSourceSelect.svelte | 11 ++----- .../EventsEditor/EventEditor.svelte | 15 --------- .../EventsEditor/actions/ExecuteQuery.svelte | 7 ++-- .../EventsEditor/actions/NavigateTo.svelte | 3 -- .../PropertyControls/FieldSelect.svelte | 1 - .../FilterEditor/FilterEditor.svelte | 1 - .../FilterEditor/LuceneFilterBuilder.svelte | 3 -- .../FlatButtonGroup/FlatButtonGroup.svelte | 5 +-- .../PropertyControls/FormFieldSelect.svelte | 1 - .../IconSelect/IconSelect.svelte | 4 +-- .../PropertyControls/MultiFieldSelect.svelte | 1 - .../PropertyControls/PropertyControl.svelte | 2 +- .../PropertyControls/PropertyGroup.svelte | 7 ++-- .../PropertiesPanel/SettingsView.svelte | 7 ---- .../integration/KeyValueBuilder.svelte | 4 --- .../components/integration/QueryEditor.svelte | 2 -- .../integration/QueryFieldsBuilder.svelte | 8 ----- .../components/integration/QueryViewer.svelte | 9 ------ .../src/components/settings/Link.svelte | 7 ---- .../settings/tabs/Integrations.svelte | 5 --- .../src/components/start/TemplateList.svelte | 3 +- .../src/pages/builder/admin/index.svelte | 2 +- .../builder/app/[application]/_layout.svelte | 32 +------------------ .../[selectedDatasource]/[query]/index.svelte | 11 ------- .../[selectedDatasource]/index.svelte | 2 +- .../data/datasource/index.svelte | 2 +- .../src/pages/builder/apps/index.svelte | 4 +-- .../auth/_components/GoogleButton.svelte | 4 --- .../src/pages/builder/auth/forgot.svelte | 2 +- .../src/pages/builder/auth/login.svelte | 2 +- .../src/pages/builder/invite/index.svelte | 2 +- .../portal/manage/email/[template].svelte | 3 +- .../builder/portal/manage/email/index.svelte | 6 ++-- .../portal/settings/organisation.svelte | 2 +- .../builder/portal/settings/update.svelte | 11 ++----- .../static/templates/BudibaseApp.svelte | 2 -- .../standard-components/src/Button.svelte | 1 - .../standard-components/src/Container.svelte | 2 +- .../src/DateRangePicker.svelte | 3 +- .../standard-components/src/Navigation.svelte | 14 +------- .../standard-components/src/Repeater.svelte | 3 +- .../src/charts/BarChart.svelte | 1 - .../src/charts/LineChart.svelte | 1 - .../src/charts/PieChart.svelte | 1 - .../src/forms/AttachmentField.svelte | 3 -- .../src/forms/FieldGroupFallback.svelte | 1 - .../src/forms/InnerForm.svelte | 2 -- .../src/forms/RelationshipField.svelte | 1 + .../src/table/Table.svelte | 2 +- 97 files changed, 73 insertions(+), 336 deletions(-) diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index e5346ed9a8..5ea94bf0a4 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -58,6 +58,7 @@ class:is-focused={open || focus} > (focus = true)} on:blur={() => (focus = false)} diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte index f76e42a55a..c8f8bfc6c9 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker.svelte @@ -10,7 +10,6 @@ export let id = null export let disabled = false export let error = null - export let isPlaceholder = false export let enableTime = true export let value = null export let placeholder = null diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte index 57f70c8d9a..3512ec989a 100644 --- a/packages/bbui/src/Form/Core/Dropzone.svelte +++ b/packages/bbui/src/Form/Core/Dropzone.svelte @@ -30,9 +30,6 @@ "bmp", "jfif", ] - const onChange = event => { - dispatch("change", event.target.checked) - } const fieldId = id || generateID() let selectedImageIdx = 0 @@ -205,7 +202,8 @@ width="125" height="60" viewBox="0 0 199 97.7" - > + > + diff --git a/packages/bbui/src/Modal/QuizModal.svelte b/packages/bbui/src/Modal/QuizModal.svelte index 285c04ebc5..203a4256db 100644 --- a/packages/bbui/src/Modal/QuizModal.svelte +++ b/packages/bbui/src/Modal/QuizModal.svelte @@ -1,5 +1,4 @@
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte index b03f73a723..dfc11f3dae 100644 --- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte @@ -131,8 +131,4 @@ min-height: 120px; font-size: var(--font-size-xs); } - - option { - text-transform: capitalize; - } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte index e1efa02e1c..d9bc4559f2 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte @@ -3,17 +3,10 @@ import { store, selectedComponent, currentAsset } from "builderStore" import { Tabs, Tab } from "@budibase/bbui" import { FrontendTypes } from "constants" - import CategoryTab from "./CategoryTab.svelte" import DesignView from "./DesignView.svelte" import SettingsView from "./SettingsView.svelte" import { setWith } from "lodash" - const categories = [ - { value: "settings", name: "Settings" }, - { value: "design", name: "Design" }, - ] - let selectedCategory = categories[0] - $: definition = store.actions.components.getDefinition( $selectedComponent._component ) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte index f21cc7fcf9..d27a542f47 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte @@ -6,7 +6,6 @@ import { createEventDispatcher, onMount } from "svelte" export let value - export let onChange const dispatch = createEventDispatcher() const getValue = component => `{{ literal ${makePropSafe(component._id)} }}` diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte index 91578dd313..3f07fd54e3 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte @@ -103,8 +103,9 @@ } function fetchQueryDefinition(query) { - const source = $datasources.list.find(ds => ds._id === query.datasourceId) - .source + const source = $datasources.list.find( + ds => ds._id === query.datasourceId + ).source return $integrations[source].query[query.queryVerb] } @@ -264,12 +265,6 @@ background-color: var(--spectrum-global-color-gray-200); } - .drawer-contents { - padding: var(--spacing-l); - height: calc(40vh - 2 * var(--spacing-l)); - overflow-y: auto; - } - i { margin-left: 5px; display: flex; diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte index 5847f13b8f..843f33cab9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte @@ -153,16 +153,6 @@ color: var(--ink); } - .available-action { - padding: var(--spacing-s); - font-size: var(--font-size-s); - cursor: pointer; - } - - .available-action:hover { - background: var(--grey-2); - } - .action-container { border-bottom: 1px solid var(--grey-1); display: flex; @@ -171,9 +161,4 @@ .action-container:last-child { border-bottom: none; } - - i:hover { - color: var(--red); - cursor: pointer; - } diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte index 09f420b4d9..44f349a324 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte @@ -1,5 +1,5 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte index 2b24e2fd74..e713ccce4a 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte @@ -6,9 +6,6 @@ export let parameters - let bindingDrawer - let tempValue = parameters.url - $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte index 9b6aec4584..7d1741df17 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte @@ -9,7 +9,6 @@ export let componentInstance = {} export let value = "" - export let multiselect = false export let placeholder const dispatch = createEventDispatcher() diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte index 20a7b9d9ff..e2a386497c 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte @@ -14,7 +14,6 @@ } from "builderStore/dataBinding" import LuceneFilterBuilder from "./LuceneFilterBuilder.svelte" import { currentAsset } from "builderStore" - import SaveFields from "../EventsEditor/actions/SaveFields.svelte" const dispatch = createEventDispatcher() diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte index 53242f5e9b..539d53636c 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte @@ -9,12 +9,9 @@ } from "@budibase/bbui" import { store, currentAsset } from "builderStore" import { getBindableProperties } from "builderStore/dataBinding" - import { createEventDispatcher } from "svelte" import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" import { generate } from "shortid" - const dispatch = createEventDispatcher() - export let schemaFields export let value diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte index a23fada40c..394f3f245c 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButtonGroup.svelte @@ -6,7 +6,7 @@ export let isMultiSelect = false export let value = [] export let initialValue = "" - export let onChange = selected => {} + export let onChange = () => {} onMount(() => { if (!value && !!initialValue) { @@ -28,9 +28,6 @@ } onChange(val) } - - const checkSelected = val => - isMultiSelect ? value.includes(val) : value === val
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte index 1824bf7f58..0926561640 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte @@ -9,7 +9,6 @@ export let componentInstance export let value - export let onChange export let type $: form = findClosestMatchingComponent( diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte index 1840e4efbd..7167dd046c 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte @@ -57,7 +57,7 @@ let loading = false function findIconByTerm(term) { - const r = new RegExp(`\^${term}`, "i") + const r = new RegExp(`^${term}`, "i") return icons.filter(i => r.test(i)) } @@ -99,7 +99,7 @@ loading = false } - async function searchForIcon(e) { + async function searchForIcon() { currentPage = 1 loading = true filteredIcons = findIconByTerm(searchTerm) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte index e3f38d88d8..485fde64fa 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte @@ -9,7 +9,6 @@ export let componentInstance = {} export let value = "" - export let multiselect = false export let placeholder const dispatch = createEventDispatcher() diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 4a4e21ac2e..d5d51ff52b 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -1,5 +1,5 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte index eeb4fe1bb3..31b6c0d381 100644 --- a/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/SettingsView.svelte @@ -42,13 +42,6 @@ { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect }, ] - const assetProps = [ - "title", - "description", - "routing.route", - "layoutId", - "routing.roleId", - ] let confirmResetFieldsDialog $: settings = componentDefinition?.settings ?? [] diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte index 842e6057b0..83977fa2a8 100644 --- a/packages/builder/src/components/integration/KeyValueBuilder.svelte +++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte @@ -46,8 +46,4 @@ align-items: center; margin-bottom: var(--spacing-m); } - - .ri-close-circle-fill { - cursor: pointer; - } diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte index 4016e2c1b2..b44477da9a 100644 --- a/packages/builder/src/components/integration/QueryEditor.svelte +++ b/packages/builder/src/components/integration/QueryEditor.svelte @@ -77,8 +77,6 @@ const refs = {} let editor let updating_externally = false - let marker - let error_line let destroyed = false $: if (editor && width && height) { diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte index 640c215aa1..15de6f2930 100644 --- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte +++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte @@ -59,14 +59,6 @@ {/if} diff --git a/packages/builder/src/components/settings/tabs/Integrations.svelte b/packages/builder/src/components/settings/tabs/Integrations.svelte index 419aed17ef..e0e3cb5987 100644 --- a/packages/builder/src/components/settings/tabs/Integrations.svelte +++ b/packages/builder/src/components/settings/tabs/Integrations.svelte @@ -37,9 +37,4 @@ font-size: 14px; font-weight: bold; } - .background { - border-radius: 5px; - background-color: var(--light-grey); - padding: 12px 12px 18px 12px; - } diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte index 89095c97c5..7e7b5c74d5 100644 --- a/packages/builder/src/components/start/TemplateList.svelte +++ b/packages/builder/src/components/start/TemplateList.svelte @@ -1,6 +1,5 @@ diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte index a8e9f3cfe0..e9a6d6e95e 100644 --- a/packages/standard-components/src/Button.svelte +++ b/packages/standard-components/src/Button.svelte @@ -4,7 +4,6 @@ const { styleable } = getContext("sdk") const component = getContext("component") - export let className = "default" export let disabled = false export let text = "" export let onClick diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte index cb4a982643..bd4a461a92 100644 --- a/packages/standard-components/src/Container.svelte +++ b/packages/standard-components/src/Container.svelte @@ -1,7 +1,7 @@ {#if fieldGroupContext} diff --git a/packages/standard-components/src/forms/InnerForm.svelte b/packages/standard-components/src/forms/InnerForm.svelte index 70f5c2e3a9..b2a174629b 100644 --- a/packages/standard-components/src/forms/InnerForm.svelte +++ b/packages/standard-components/src/forms/InnerForm.svelte @@ -8,11 +8,9 @@ export let theme export let size export let disabled = false - export let actionType = "Create" export let initialValues const component = getContext("component") - const context = getContext("context") const { styleable, API, Provider, ActionTypes } = getContext("sdk") let loaded = false diff --git a/packages/standard-components/src/forms/RelationshipField.svelte b/packages/standard-components/src/forms/RelationshipField.svelte index f36dc80472..b695994e75 100644 --- a/packages/standard-components/src/forms/RelationshipField.svelte +++ b/packages/standard-components/src/forms/RelationshipField.svelte @@ -81,6 +81,7 @@ error={$fieldState.error} getOptionLabel={getDisplayName} getOptionValue={option => option._id} + {placeholder} /> {/if} diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte index 35839e4722..ad3fb46d5d 100644 --- a/packages/standard-components/src/table/Table.svelte +++ b/packages/standard-components/src/table/Table.svelte @@ -12,7 +12,7 @@ export let quiet const component = getContext("component") - const { styleable, Provider } = getContext("sdk") + const { styleable } = getContext("sdk") const customColumnKey = `custom-${Math.random()}` const customRenderers = [ {