Replace default export with named exports (#1998)

## Launch Checklist

See title,
Also removed some "_" from some file names.
This is a pure refactoring, no logic changes.


 - [x] Briefly describe the changes in this PR.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

eslint.config.js

@@ -34,7 +34,9 @@ export default defineConfig({
   rules: {
     "react-refresh/only-export-components": [
       "warn",
-      { allowConstantExport: true }
+      // Many components are exported as withTranslation()(Component); without
+      // this the rule cannot tell the HOC's result is still a component.
+      { allowConstantExport: true, extraHOCs: ["withTranslation"] }
     ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": [

src/components/App.tsx

@@ -11,29 +11,29 @@ import {type Map, type LayerSpecification, type StyleSpecification, type Validat
 import {validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-import MapMaplibreGl from "./MapMaplibreGl";
+import { MapMaplibreGl } from "./MapMaplibreGl";
-import MapOpenLayers from "./MapOpenLayers";
+import { MapOpenLayers } from "./MapOpenLayers";
-import CodeEditor from "./CodeEditor";
+import { CodeEditor } from "./CodeEditor";
-import LayerList from "./LayerList";
+import { LayerList } from "./LayerList";
-import LayerEditor from "./LayerEditor";
+import { LayerEditor } from "./LayerEditor";
-import AppToolbar, { type MapState } from "./AppToolbar";
+import { AppToolbar, type MapState } from "./AppToolbar";
-import AppLayout from "./AppLayout";
+import { AppLayout } from "./AppLayout";
-import MessagePanel from "./AppMessagePanel";
+import { AppMessagePanel as MessagePanel } from "./AppMessagePanel";
 
-import ModalSettings from "./modals/ModalSettings";
+import { ModalSettings } from "./modals/ModalSettings";
-import ModalExport from "./modals/ModalExport";
+import { ModalExport } from "./modals/ModalExport";
-import ModalSources from "./modals/ModalSources";
+import { ModalSources } from "./modals/ModalSources";
-import ModalOpen from "./modals/ModalOpen";
+import { ModalOpen } from "./modals/ModalOpen";
-import ModalShortcuts from "./modals/ModalShortcuts";
+import { ModalShortcuts } from "./modals/ModalShortcuts";
-import ModalDebug from "./modals/ModalDebug";
+import { ModalDebug } from "./modals/ModalDebug";
-import ModalGlobalState from "./modals/ModalGlobalState";
+import { ModalGlobalState } from "./modals/ModalGlobalState";
 
 import {downloadGlyphsMetadata, downloadSpriteMetadata} from "../libs/metadata";
-import style from "../libs/style";
+import { emptyStyle, getAccessToken, replaceAccessTokens } from "../libs/style";
 import { undoMessages, redoMessages } from "../libs/diffmessage";
 import { createStyleStore, type IStyleStore } from "../libs/store/style-store-factory";
 import { RevisionStore } from "../libs/revisions";
-import LayerWatcher from "../libs/layerwatcher";
+import { LayerWatcher } from "../libs/layerwatcher";
 import tokens from "../config/tokens.json";
 import isEqual from "lodash.isequal";
 import { type MapOptions } from "maplibre-gl";
@@ -48,19 +48,19 @@ function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
   const matchesThunderforest = url.match(/\.thunderforest\.com/);
   const matchesLocationIQ = url.match(/\.locationiq\.com/);
   if (matchesTilehosting || matchesMaptiler) {
-    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("openmaptiles", mapStyle, {allowFallback: true});
     if (accessToken) {
       return url.replace("{key}", accessToken);
     }
   }
   else if (matchesThunderforest) {
-    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("thunderforest", mapStyle, {allowFallback: true});
     if (accessToken) {
       return url.replace("{key}", accessToken);
     }
   }
   else if (matchesLocationIQ) {
-    const accessToken = style.getAccessToken("locationiq", mapStyle, {allowFallback: true});
+    const accessToken = getAccessToken("locationiq", mapStyle, {allowFallback: true});
     if (accessToken) {
       return url.replace("{key}", accessToken);
     }
@@ -123,7 +123,7 @@ type AppState = {
   fileHandle: FileSystemFileHandle | null
 };
 
-export default class App extends React.Component<any, AppState> {
+export class App extends React.Component<any, AppState> {
   revisionStore: RevisionStore;
   styleStore: IStyleStore | null = null;
   layerWatcher: LayerWatcher;
@@ -137,7 +137,7 @@ export default class App extends React.Component<any, AppState> {
     this.state = {
       errors: [],
       infos: [],
-      mapStyle: style.emptyStyle,
+      mapStyle: emptyStyle,
       selectedLayerIndex: 0,
       sources: {},
       vectorLayers: {},
@@ -698,7 +698,7 @@ export default class App extends React.Component<any, AppState> {
       mapStyle: (dirtyMapStyle || mapStyle),
       mapView: this.state.mapView,
       replaceAccessTokens: (mapStyle: StyleSpecification) => {
-        return style.replaceAccessTokens(mapStyle, {
+        return replaceAccessTokens(mapStyle, {
           allowFallback: true
         });
       },

src/components/AppLayout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import ScrollContainer from "./ScrollContainer";
+import { ScrollContainer } from "./ScrollContainer";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { IconContext } from "react-icons";
 
@@ -50,5 +50,4 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
   }
 }
 
-const AppLayout = withTranslation()(AppLayoutInternal);
+export const AppLayout = withTranslation()(AppLayoutInternal);
-export default AppLayout;

src/components/AppMessagePanel.tsx

@@ -61,5 +61,4 @@ class AppMessagePanelInternal extends React.Component<AppMessagePanelInternalPro
   }
 }
 
-const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
+export const AppMessagePanel = withTranslation()(AppMessagePanelInternal);
-export default AppMessagePanel;

src/components/AppToolbar.tsx

@@ -306,5 +306,4 @@ class AppToolbarInternal extends React.Component<AppToolbarInternalProps> {
   }
 }
 
-const AppToolbar = withTranslation()(AppToolbarInternal);
+export const AppToolbar = withTranslation()(AppToolbarInternal);
-export default AppToolbar;

src/components/Block.tsx

@@ -1,7 +1,7 @@
 import React, {type CSSProperties, type PropsWithChildren, type SyntheticEvent} from "react";
 import classnames from "classnames";
-import FieldDocLabel from "./FieldDocLabel";
+import { FieldDocLabel } from "./FieldDocLabel";
-import Doc from "./Doc";
+import { Doc } from "./Doc";
 
 export type BlockProps = PropsWithChildren & {
   "data-wd-key"?: string
@@ -19,7 +19,7 @@ type BlockState = {
 };
 
 /** Wrap a component with a label */
-export default class Block extends React.Component<BlockProps, BlockState> {
+export class Block extends React.Component<BlockProps, BlockState> {
   _blockEl: HTMLDivElement | null = null;
 
   constructor (props: BlockProps) {

src/components/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import InputJson from "./InputJson";
+import { InputJson } from "./InputJson";
 import React from "react";
 import { withTranslation, type WithTranslation } from "react-i18next";
 import { type StyleSpecification } from "maplibre-gl";
@@ -24,6 +24,4 @@ const CodeEditorInternal: React.FC<CodeEditorProps> = (props) => {
   </>;
 };
 
-const CodeEditor = withTranslation()(CodeEditorInternal);
+export const CodeEditor = withTranslation()(CodeEditorInternal);
-
-export default CodeEditor;

src/components/Collapse.tsx

@@ -9,7 +9,7 @@ type CollapseProps = {
 };
 
 
-export default class Collapse extends React.Component<CollapseProps> {
+export class Collapse extends React.Component<CollapseProps> {
   static defaultProps = {
     isActive: true
   };

src/components/Collapser.tsx

@@ -6,7 +6,7 @@ type CollapserProps = {
   style?: object
 };
 
-export default class Collapser extends React.Component<CollapserProps> {
+export class Collapser extends React.Component<CollapserProps> {
   render() {
     const iconStyle = {
       width: 20,

src/components/DataProperty.tsx

@@ -3,19 +3,19 @@ import {PiListPlusBold} from "react-icons/pi";
 import {TbMathFunction} from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
-import InputSpec from "./InputSpec";
+import { InputSpec } from "./InputSpec";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
-import Block from "./Block";
+import { Block } from "./Block";
-import docUid from "../libs/document-uid";
+import { generateUniqueId as docUid } from "../libs/document-uid";
-import sortNumerically from "../libs/sort-numerically";
+import { sortNumerically } from "../libs/sort-numerically";
 import {findDefaultFromSpec} from "../libs/spec-helper";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import labelFromFieldName from "../libs/label-from-field-name";
+import { labelFromFieldName } from "../libs/label-from-field-name";
-import DeleteStopButton from "./_DeleteStopButton";
+import { DeleteStopButton } from "./DeleteStopButton";
 import { type MappedLayerErrors } from "../libs/definitions";
 
 
@@ -380,5 +380,4 @@ class DataPropertyInternal extends React.Component<DataPropertyInternalProps, Da
   }
 }
 
-const DataProperty = withTranslation()(DataPropertyInternal);
+export const DataProperty = withTranslation()(DataPropertyInternal);
-export default DataProperty;

src/components/DeleteStopButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
@@ -23,5 +23,4 @@ class DeleteStopButtonInternal extends React.Component<DeleteStopButtonInternalP
   }
 }
 
-const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);
+export const DeleteStopButton = withTranslation()(DeleteStopButtonInternal);
-export default DeleteStopButton;

src/components/Doc.tsx

@@ -23,7 +23,7 @@ type DocProps = {
   }
 };
 
-export default class Doc extends React.Component<DocProps> {
+export class Doc extends React.Component<DocProps> {
   render () {
     const {fieldSpec} = this.props;
 

src/components/ExpressionProperty.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import {MdDelete, MdUndo} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import Block from "./Block";
+import { Block } from "./Block";
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
-import labelFromFieldName from "../libs/label-from-field-name";
+import { labelFromFieldName } from "../libs/label-from-field-name";
-import FieldJson from "./FieldJson";
+import { FieldJson } from "./FieldJson";
 import type { StylePropertySpecification } from "maplibre-gl";
 import { type MappedLayerErrors } from "../libs/definitions";
 
@@ -90,5 +90,4 @@ class ExpressionPropertyInternal extends React.Component<ExpressionPropertyInter
   }
 }
 
-const ExpressionProperty = withTranslation()(ExpressionPropertyInternal);
+export const ExpressionProperty = withTranslation()(ExpressionPropertyInternal);
-export default ExpressionProperty;

src/components/FieldArray.tsx

@@ -1,5 +1,5 @@
-import InputArray, { type InputArrayProps } from "./InputArray";
+import { InputArray, type InputArrayProps } from "./InputArray";
-import Fieldset from "./Fieldset";
+import { Fieldset } from "./Fieldset";
 
 type FieldArrayProps = InputArrayProps & {
   name?: string
@@ -8,12 +8,10 @@ type FieldArrayProps = InputArrayProps & {
   }
 };
 
-const FieldArray: React.FC<FieldArrayProps> = (props) => {
+export const FieldArray: React.FC<FieldArrayProps> = (props) => {
   return (
     <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
       <InputArray {...props} />
     </Fieldset>
   );
 };
-
-export default FieldArray;

src/components/FieldAutocomplete.tsx

@@ -1,5 +1,5 @@
-import Block from "./Block";
+import { Block } from "./Block";
-import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
+import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";
 
 
 type FieldAutocompleteProps = InputAutocompleteProps & {
@@ -7,12 +7,10 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };
 
 
-const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
+export const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
   return (
     <Block label={props.label}>
       <InputAutocomplete {...props} />
     </Block>
   );
 };
-
-export default FieldAutocomplete;

src/components/FieldCheckbox.tsx

@@ -1,5 +1,5 @@
-import Block from "./Block";
+import { Block } from "./Block";
-import InputCheckbox, {type InputCheckboxProps} from "./InputCheckbox";
+import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";
 
 
 type FieldCheckboxProps = InputCheckboxProps & {
@@ -7,12 +7,10 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };
 
 
-const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
+export const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
   return (
     <Block label={props.label}>
       <InputCheckbox {...props} />
     </Block>
   );
 };
-
-export default FieldCheckbox;

src/components/FieldColor.tsx

@@ -1,5 +1,5 @@
-import Block from "./Block";
+import { Block } from "./Block";
-import InputColor, {type InputColorProps} from "./InputColor";
+import { InputColor, type InputColorProps } from "./InputColor";
 
 
 type FieldColorProps = InputColorProps & {
@@ -10,12 +10,10 @@ type FieldColorProps = InputColorProps & {
 };
 
 
-const FieldColor: React.FC<FieldColorProps> = (props) => {
+export const FieldColor: React.FC<FieldColorProps> = (props) => {
   return (
     <Block label={props.label} fieldSpec={props.fieldSpec}>
       <InputColor {...props} />
     </Block>
   );
 };
-
-export default FieldColor;

src/components/FieldComment.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import Block from "./Block";
+import { Block } from "./Block";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldCommentInternalProps = {
@@ -36,5 +36,4 @@ const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
   );
 };
 
-const FieldComment = withTranslation()(FieldCommentInternal);
+export const FieldComment = withTranslation()(FieldCommentInternal);
-export default FieldComment;

src/components/FieldDocLabel.tsx

@@ -10,7 +10,7 @@ type FieldDocLabelProps = {
 };
 
 
-const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
+export const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
   const [open, setOpen] = React.useState(false);
 
   const onToggleDoc = (state: boolean) => {
@@ -49,5 +49,3 @@ const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
   }
   return <div />;
 };
-
-export default FieldDocLabel;

src/components/FieldDynamicArray.tsx

@@ -1,16 +1,14 @@
-import InputDynamicArray, {type InputDynamicArrayProps} from "./InputDynamicArray";
+import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
-import Fieldset from "./Fieldset";
+import { Fieldset } from "./Fieldset";
 
 type FieldDynamicArrayProps = InputDynamicArrayProps & {
   name?: string
 };
 
-const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
+export const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
   return (
     <Fieldset label={props.label}>
       <InputDynamicArray {...props} />
     </Fieldset>
   );
 };
-
-export default FieldDynamicArray;

src/components/FieldEnum.tsx

@@ -1,5 +1,5 @@
-import InputEnum, {type InputEnumProps} from "./InputEnum";
+import { InputEnum, type InputEnumProps } from "./InputEnum";
-import Fieldset from "./Fieldset";
+import { Fieldset } from "./Fieldset";
 
 
 type FieldEnumProps = InputEnumProps & {
@@ -10,12 +10,10 @@ type FieldEnumProps = InputEnumProps & {
 };
 
 
-const FieldEnum: React.FC<FieldEnumProps> = (props) => {
+export const FieldEnum: React.FC<FieldEnumProps> = (props) => {
   return (
     <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
       <InputEnum {...props} />
     </Fieldset>
   );
 };
-
-export default FieldEnum;

src/components/FieldFunction.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import SpecProperty from "./_SpecProperty";
+import { SpecProperty } from "./SpecProperty";
-import DataProperty, { type Stop } from "./_DataProperty";
+import { DataProperty, type Stop } from "./DataProperty";
-import ZoomProperty from "./_ZoomProperty";
+import { ZoomProperty } from "./ZoomProperty";
-import ExpressionProperty from "./_ExpressionProperty";
+import { ExpressionProperty } from "./ExpressionProperty";
 import {function as styleFunction} from "@maplibre/maplibre-gl-style-spec";
 import {findDefaultFromSpec} from "../libs/spec-helper";
 import { type MappedLayerErrors } from "../libs/definitions";
@@ -128,7 +128,7 @@ type FieldFunctionProps = {
 /** Supports displaying spec field for zoom function objects
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
-const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
+export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const [dataType, setDataType] = React.useState(
     getDataType(props.value, props.fieldSpec)
   );
@@ -402,5 +402,3 @@ const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
     </div>
   );
 };
-
-export default FieldFunction;

src/components/FieldId.tsx

@@ -1,7 +1,7 @@
 
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
 
 type FieldIdProps = {
   value: string
@@ -10,7 +10,7 @@ type FieldIdProps = {
   error?: {message: string}
 };
 
-const FieldId: React.FC<FieldIdProps> = (props) => {
+export const FieldId: React.FC<FieldIdProps> = (props) => {
   return (
     <Block label="ID" fieldSpec={latest.layer.id}
       data-wd-key={props.wdKey}
@@ -24,5 +24,3 @@ const FieldId: React.FC<FieldIdProps> = (props) => {
     </Block>
   );
 };
-
-export default FieldId;

src/components/FieldJson.tsx

@@ -1,11 +1,9 @@
-import InputJson, {type InputJsonProps} from "./InputJson";
+import { InputJson, type InputJsonProps } from "./InputJson";
 
 
 type FieldJsonProps = InputJsonProps & {};
 
 
-const FieldJson: React.FC<FieldJsonProps> = (props) => {
+export const FieldJson: React.FC<FieldJsonProps> = (props) => {
   return <InputJson {...props} />;
 };
-
-export default FieldJson;

src/components/FieldMaxZoom.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldMaxZoomInternalProps = {
@@ -31,5 +31,4 @@ const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
   );
 };
 
-const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
+export const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
-export default FieldMaxZoom;

src/components/FieldMinZoom.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldMinZoomInternalProps = {
@@ -31,5 +31,4 @@ const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
   );
 };
 
-const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
+export const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
-export default FieldMinZoom;

src/components/FieldMultiInput.tsx

@@ -1,5 +1,5 @@
-import InputMultiInput, {type InputMultiInputProps} from "./InputMultiInput";
+import { InputMultiInput, type InputMultiInputProps } from "./InputMultiInput";
-import Fieldset from "./Fieldset";
+import { Fieldset } from "./Fieldset";
 
 
 type FieldMultiInputProps = InputMultiInputProps & {
@@ -7,12 +7,10 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };
 
 
-const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
+export const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
   return (
     <Fieldset label={props.label}>
       <InputMultiInput {...props} />
     </Fieldset>
   );
 };
-
-export default FieldMultiInput;

src/components/FieldNumber.tsx

@@ -1,5 +1,5 @@
-import InputNumber, {type InputNumberProps} from "./InputNumber";
+import { InputNumber, type InputNumberProps } from "./InputNumber";
-import Block from "./Block";
+import { Block } from "./Block";
 
 
 type FieldNumberProps = InputNumberProps & {
@@ -10,12 +10,10 @@ type FieldNumberProps = InputNumberProps & {
 };
 
 
-const FieldNumber: React.FC<FieldNumberProps> = (props) => {
+export const FieldNumber: React.FC<FieldNumberProps> = (props) => {
   return (
     <Block label={props.label} fieldSpec={props.fieldSpec}>
       <InputNumber {...props} />
     </Block>
   );
 };
-
-export default FieldNumber;

src/components/FieldSelect.tsx

@@ -1,5 +1,5 @@
-import Block from "./Block";
+import { Block } from "./Block";
-import InputSelect, {type InputSelectProps} from "./InputSelect";
+import { InputSelect, type InputSelectProps } from "./InputSelect";
 
 
 type FieldSelectProps = InputSelectProps & {
@@ -10,12 +10,10 @@ type FieldSelectProps = InputSelectProps & {
 };
 
 
-const FieldSelect: React.FC<FieldSelectProps> = (props) => {
+export const FieldSelect: React.FC<FieldSelectProps> = (props) => {
   return (
     <Block label={props.label} fieldSpec={props.fieldSpec}>
       <InputSelect {...props} />
     </Block>
   );
 };
-
-export default FieldSelect;

src/components/FieldSource.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldSourceInternalProps = {
@@ -38,5 +38,4 @@ const FieldSourceInternal: React.FC<FieldSourceInternalProps> = ({
 };
 
 
-const FieldSource = withTranslation()(FieldSourceInternal);
+export const FieldSource = withTranslation()(FieldSourceInternal);
-export default FieldSource;

src/components/FieldSourceLayer.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
 import {latest} from "@maplibre/maplibre-gl-style-spec";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
 type FieldSourceLayerInternalProps = {
@@ -35,5 +35,4 @@ const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = ({
   );
 };
 
-const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
+export const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
-export default FieldSourceLayer;

src/components/FieldSpec.tsx

@@ -1,6 +1,6 @@
-import Block, { type BlockProps } from "./Block";
+import { Block, type BlockProps } from "./Block";
-import InputSpec, { type FieldSpecType, type InputSpecProps } from "./InputSpec";
+import { InputSpec, type FieldSpecType, type InputSpecProps } from "./InputSpec";
-import Fieldset, { type FieldsetProps } from "./Fieldset";
+import { Fieldset, type FieldsetProps } from "./Fieldset";
 
 function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[] }): typeof Fieldset | typeof Block {
   switch(fieldSpec.type) {
@@ -36,7 +36,7 @@ function getElementFromType(fieldSpec: { type?: FieldSpecType, values?: unknown[
 
 export type FieldSpecProps = InputSpecProps & BlockProps & FieldsetProps;
 
-const FieldSpec: React.FC<FieldSpecProps> = (props) => {
+export const FieldSpec: React.FC<FieldSpecProps> = (props) => {
   const TypeBlock = getElementFromType(props.fieldSpec!);
 
   return (
@@ -45,5 +45,3 @@ const FieldSpec: React.FC<FieldSpecProps> = (props) => {
     </TypeBlock>
   );
 };
-
-export default FieldSpec;

src/components/FieldString.tsx

@@ -1,5 +1,5 @@
-import Block from "./Block";
+import { Block } from "./Block";
-import InputString, {type InputStringProps} from "./InputString";
+import { InputString, type InputStringProps } from "./InputString";
 
 type FieldStringProps = InputStringProps & {
   name?: string
@@ -9,12 +9,10 @@ type FieldStringProps = InputStringProps & {
   }
 };
 
-const FieldString: React.FC<FieldStringProps> = (props) => {
+export const FieldString: React.FC<FieldStringProps> = (props) => {
   return (
     <Block label={props.label} fieldSpec={props.fieldSpec}>
       <InputString {...props} />
     </Block>
   );
 };
-
-export default FieldString;

src/components/FieldType.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import {v8} from "@maplibre/maplibre-gl-style-spec";
-import Block from "./Block";
+import { Block } from "./Block";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { startCase } from "lodash";
 
@@ -43,5 +43,4 @@ const FieldTypeInternal: React.FC<FieldTypeInternalProps> = ({
   );
 };
 
-const FieldType = withTranslation()(FieldTypeInternal);
+export const FieldType = withTranslation()(FieldTypeInternal);
-export default FieldType;

src/components/FieldUrl.tsx

@@ -1,5 +1,5 @@
-import InputUrl, {type FieldUrlProps as InputUrlProps} from "./InputUrl";
+import { InputUrl, type FieldUrlProps as InputUrlProps } from "./InputUrl";
-import Block from "./Block";
+import { Block } from "./Block";
 
 
 type FieldUrlProps = InputUrlProps & {
@@ -10,12 +10,10 @@ type FieldUrlProps = InputUrlProps & {
 };
 
 
-const FieldUrl: React.FC<FieldUrlProps> = (props) => {
+export const FieldUrl: React.FC<FieldUrlProps> = (props) => {
   return (
     <Block label={props.label} fieldSpec={props.fieldSpec}>
       <InputUrl {...props} />
     </Block>
   );
 };
-
-export default FieldUrl;

src/components/Fieldset.tsx

@@ -1,8 +1,8 @@
 import React, { type PropsWithChildren, type ReactElement } from "react";
 import classnames from "classnames";
-import FieldDocLabel from "./FieldDocLabel";
+import { FieldDocLabel } from "./FieldDocLabel";
-import Doc from "./Doc";
+import { Doc } from "./Doc";
-import generateUniqueId from "../libs/document-uid";
+import { generateUniqueId } from "../libs/document-uid";
 
 export type FieldsetProps = PropsWithChildren & {
   label?: string,
@@ -12,7 +12,7 @@ export type FieldsetProps = PropsWithChildren & {
 };
 
 
-const Fieldset: React.FC<FieldsetProps> = (props) => {
+export const Fieldset: React.FC<FieldsetProps> = (props) => {
   const [showDoc, setShowDoc] = React.useState(false);
   const labelId = React.useRef(generateUniqueId("fieldset_label_"));
 
@@ -49,5 +49,3 @@ const Fieldset: React.FC<FieldsetProps> = (props) => {
     </div>
   );
 };
-
-export default Fieldset;

src/components/FilterEditor.tsx

@@ -7,13 +7,13 @@ import {migrate, convertFilter} from "@maplibre/maplibre-gl-style-spec";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
 import {combiningFilterOps} from "../libs/filterops";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
-import Block from "./Block";
+import { Block } from "./Block";
-import SingleFilterEditor from "./SingleFilterEditor";
+import { SingleFilterEditor } from "./SingleFilterEditor";
-import FilterEditorBlock from "./FilterEditorBlock";
+import { FilterEditorBlock } from "./FilterEditorBlock";
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
-import Doc from "./Doc";
+import { Doc } from "./Doc";
-import ExpressionProperty from "./_ExpressionProperty";
+import { ExpressionProperty } from "./ExpressionProperty";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import type { MappedLayerErrors, StyleSpecificationWithId } from "../libs/definitions";
 
@@ -316,5 +316,4 @@ class FilterEditorInternal extends React.Component<FilterEditorInternalProps, Fi
   }
 }
 
-const FilterEditor = withTranslation()(FilterEditorInternal);
+export const FilterEditor = withTranslation()(FilterEditorInternal);
-export default FilterEditor;

src/components/FilterEditorBlock.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from "react";
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
@@ -27,5 +27,4 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
   }
 }
 
-const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
+export const FilterEditorBlock = withTranslation()(FilterEditorBlockInternal);
-export default FilterEditorBlock;

src/components/FunctionButtons.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
 import {MdFunctions, MdInsertChart} from "react-icons/md";
 import { TbMathFunction } from "react-icons/tb";
 import { type WithTranslation, withTranslation } from "react-i18next";
@@ -67,5 +67,4 @@ class FunctionInputButtonsInternal extends React.Component<FunctionInputButtonsI
   }
 }
 
-const FunctionInputButtons = withTranslation()(FunctionInputButtonsInternal);
+export const FunctionInputButtons = withTranslation()(FunctionInputButtonsInternal);
-export default FunctionInputButtons;

src/components/IconLayer.tsx

@@ -13,7 +13,7 @@ type IconLayerProps = {
   className?: string
 };
 
-const IconLayer: React.FC<IconLayerProps> = (props) => {
+export const IconLayer: React.FC<IconLayerProps> = (props) => {
   const iconProps = { style: props.style };
   switch(props.type) {
     case "fill-extrusion": return <IoMdCube {...iconProps} />;
@@ -29,5 +29,3 @@ const IconLayer: React.FC<IconLayerProps> = (props) => {
     default: return <MdPriorityHigh {...iconProps} />;
   }
 };
-
-export default IconLayer;

src/components/InputArray.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
 
 export type InputArrayProps = {
   value: (string | number | undefined)[]
@@ -17,7 +17,7 @@ type InputArrayState = {
   initialPropsValue: unknown[]
 };
 
-export default class InputArray extends React.Component<InputArrayProps, InputArrayState> {
+export class InputArray extends React.Component<InputArrayProps, InputArrayState> {
   static defaultProps = {
     value: [],
     default: [],

src/components/InputAutocomplete.browser.test.tsx

@@ -1,7 +1,7 @@
 import { expect, test } from "vitest";
 import { render } from "vitest-browser-react";
 import { page } from "vitest/browser";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";
 
 const fruits = ["apple", "banana", "cherry"];
 

src/components/InputAutocomplete.tsx

@@ -11,7 +11,7 @@ export type InputAutocompleteProps = {
   "aria-label"?: string
 };
 
-export default function InputAutocomplete({
+export function InputAutocomplete({
   value,
   options = [],
   onChange = () => {},

src/components/InputButton.tsx

@@ -14,7 +14,7 @@ type InputButtonProps = {
   title?: string
 };
 
-export default class InputButton extends React.Component<InputButtonProps> {
+export class InputButton extends React.Component<InputButtonProps> {
   render() {
     return <button
       id={this.props.id}

src/components/InputCheckbox.tsx

@@ -6,7 +6,7 @@ export type InputCheckboxProps = {
   onChange(...args: unknown[]): unknown
 };
 
-export default class InputCheckbox extends React.Component<InputCheckboxProps> {
+export class InputCheckbox extends React.Component<InputCheckboxProps> {
   static defaultProps = {
     value: false,
   };

src/components/InputColor.tsx

@@ -20,7 +20,7 @@ export type InputColorProps = {
 };
 
 /*** Number fields with support for min, max and units and documentation*/
-export default class InputColor extends React.Component<InputColorProps> {
+export class InputColor extends React.Component<InputColorProps> {
   state = {
     pickerOpened: false
   };

src/components/InputDynamicArray.tsx

@@ -3,13 +3,13 @@ import capitalize from "lodash.capitalize";
 import {MdDelete} from "react-icons/md";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputString from "./InputString";
+import { InputString } from "./InputString";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
-import FieldDocLabel from "./FieldDocLabel";
+import { FieldDocLabel } from "./FieldDocLabel";
-import InputEnum from "./InputEnum";
+import { InputEnum } from "./InputEnum";
-import InputUrl from "./InputUrl";
+import { InputUrl } from "./InputUrl";
-import InputColor from "./InputColor";
+import { InputColor } from "./InputColor";
 
 
 export type InputDynamicArrayProps = {
@@ -141,9 +141,7 @@ class InputDynamicArrayInternal extends React.Component<InputDynamicArrayInterna
   }
 }
 
-const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
+export const InputDynamicArray = withTranslation()(InputDynamicArrayInternal);
-export default InputDynamicArray;
-
 type DeleteValueInputButtonProps = {
   onClick?(...args: unknown[]): unknown
 } & WithTranslation;

src/components/InputEnum.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
-import InputMultiInput from "./InputMultiInput";
+import { InputMultiInput } from "./InputMultiInput";
 
 
 function optionsLabelLength(options: any[]) {
@@ -25,7 +25,7 @@ export type InputEnumProps = {
 };
 
 
-export default class InputEnum extends React.Component<InputEnumProps> {
+export class InputEnum extends React.Component<InputEnumProps> {
   render() {
     const {options, value, onChange, name, label} = this.props;
 

src/components/InputFont.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";
 
 export type InputFontProps = {
   name: string
@@ -11,7 +11,7 @@ export type InputFontProps = {
   "aria-label"?: string
 };
 
-export default class InputFont extends React.Component<InputFontProps> {
+export class InputFont extends React.Component<InputFontProps> {
   static defaultProps = {
     fonts: []
   };

src/components/InputJson.tsx

@@ -135,5 +135,4 @@ class InputJsonInternal extends React.Component<InputJsonInternalProps, InputJso
   }
 }
 
-const InputJson = withTranslation()(InputJsonInternal);
+export const InputJson = withTranslation()(InputJsonInternal);
-export default InputJson;

src/components/InputMultiInput.tsx

@@ -9,7 +9,7 @@ export type InputMultiInputProps = {
   "aria-label"?: string
 };
 
-export default class InputMultiInput extends React.Component<InputMultiInputProps> {
+export class InputMultiInput extends React.Component<InputMultiInputProps> {
   render() {
     let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {

src/components/InputNumber.tsx

@@ -1,5 +1,5 @@
 import React, { type BaseSyntheticEvent } from "react";
-import generateUniqueId from "../libs/document-uid";
+import { generateUniqueId } from "../libs/document-uid";
 
 export type InputNumberProps = {
   value?: number
@@ -25,7 +25,7 @@ type InputNumberState = {
   dirtyValue?: number | string | undefined
 };
 
-export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
+export class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
   static defaultProps = {
     rangeStep: 1
   };

src/components/InputSelect.tsx

@@ -10,7 +10,7 @@ export type InputSelectProps = {
   "aria-label"?: string
 };
 
-export default class InputSelect extends React.Component<InputSelectProps> {
+export class InputSelect extends React.Component<InputSelectProps> {
   render() {
     let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {

src/components/InputSpec.tsx

@@ -1,14 +1,14 @@
 import React, { type ReactElement } from "react";
 
-import InputColor, { type InputColorProps } from "./InputColor";
+import { InputColor, type InputColorProps } from "./InputColor";
-import InputNumber, { type InputNumberProps } from "./InputNumber";
+import { InputNumber, type InputNumberProps } from "./InputNumber";
-import InputCheckbox, { type InputCheckboxProps } from "./InputCheckbox";
+import { InputCheckbox, type InputCheckboxProps } from "./InputCheckbox";
-import InputString, { type InputStringProps } from "./InputString";
+import { InputString, type InputStringProps } from "./InputString";
-import InputArray, { type InputArrayProps } from "./InputArray";
+import { InputArray, type InputArrayProps } from "./InputArray";
-import InputDynamicArray, { type InputDynamicArrayProps } from "./InputDynamicArray";
+import { InputDynamicArray, type InputDynamicArrayProps } from "./InputDynamicArray";
-import InputFont, { type InputFontProps } from "./InputFont";
+import { InputFont, type InputFontProps } from "./InputFont";
-import InputAutocomplete, { type InputAutocompleteProps } from "./InputAutocomplete";
+import { InputAutocomplete, type InputAutocompleteProps } from "./InputAutocomplete";
-import InputEnum, { type InputEnumProps } from "./InputEnum";
+import { InputEnum, type InputEnumProps } from "./InputEnum";
 import capitalize from "lodash.capitalize";
 
 const iconProperties = ["background-pattern", "fill-pattern", "line-pattern", "fill-extrusion-pattern", "icon-image"];
@@ -38,7 +38,7 @@ export type InputSpecProps = {
 /** Display any field from the Maplibre GL style spec and
  * choose the correct field component based on the @{fieldSpec}
  * to display @{value}. */
-export default class InputSpec extends React.Component<InputSpecProps> {
+export class InputSpec extends React.Component<InputSpecProps> {
 
   childNodes() {
     const commonProps = {

src/components/InputString.tsx

@@ -20,7 +20,7 @@ type InputStringState = {
   value?: string
 };
 
-export default class InputString extends React.Component<InputStringProps, InputStringState> {
+export class InputString extends React.Component<InputStringProps, InputStringState> {
   static defaultProps = {
     onInput: () => {},
   };

src/components/InputUrl.tsx

@@ -1,6 +1,6 @@
 import React, { type JSX } from "react";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
-import SmallError from "./SmallError";
+import { SmallError } from "./SmallError";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 import { type TFunction } from "i18next";
 import { ErrorType, validate } from "../libs/urlopen";
@@ -91,5 +91,4 @@ class InputUrlInternal extends React.Component<InputUrlInternalProps, InputUrlSt
   }
 }
 
-const InputUrl = withTranslation()(InputUrlInternal);
+export const InputUrl = withTranslation()(InputUrlInternal);
-export default InputUrl;

src/components/LayerEditor.tsx

@@ -6,17 +6,17 @@ import { IconContext } from "react-icons";
 import { type BackgroundLayerSpecification, type LayerSpecification, type SourceSpecification } from "maplibre-gl";
 import { v8 } from "@maplibre/maplibre-gl-style-spec";
 
-import FieldJson from "./FieldJson";
+import { FieldJson } from "./FieldJson";
-import FilterEditor from "./FilterEditor";
+import { FilterEditor } from "./FilterEditor";
-import PropertyGroup from "./PropertyGroup";
+import { PropertyGroup } from "./PropertyGroup";
-import LayerEditorGroup from "./LayerEditorGroup";
+import { LayerEditorGroup } from "./LayerEditorGroup";
-import FieldType from "./FieldType";
+import { FieldType } from "./FieldType";
-import FieldId from "./FieldId";
+import { FieldId } from "./FieldId";
-import FieldMinZoom from "./FieldMinZoom";
+import { FieldMinZoom } from "./FieldMinZoom";
-import FieldMaxZoom from "./FieldMaxZoom";
+import { FieldMaxZoom } from "./FieldMaxZoom";
-import FieldComment from "./FieldComment";
+import { FieldComment } from "./FieldComment";
-import FieldSource from "./FieldSource";
+import { FieldSource } from "./FieldSource";
-import FieldSourceLayer from "./FieldSourceLayer";
+import { FieldSourceLayer } from "./FieldSourceLayer";
 import { changeType, changeProperty } from "../libs/layer";
 import { formatLayerId } from "../libs/format";
 import { type WithTranslation, withTranslation } from "react-i18next";
@@ -419,5 +419,4 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
   }
 }
 
-const LayerEditor = withTranslation()(LayerEditorInternal);
+export const LayerEditor = withTranslation()(LayerEditorInternal);
-export default LayerEditor;

src/components/LayerEditorGroup.tsx

@@ -18,7 +18,7 @@ type LayerEditorGroupProps = {
 };
 
 
-export default class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
+export class LayerEditorGroup extends React.Component<LayerEditorGroupProps> {
   render() {
     return <AccordionItem uuid={this.props.id}>
       <AccordionItemHeading className="maputnik-layer-editor-group"

src/components/LayerList.tsx

@@ -14,12 +14,12 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 
-import LayerListGroup from "./LayerListGroup";
+import { LayerListGroup } from "./LayerListGroup";
-import LayerListItem from "./LayerListItem";
+import { LayerListItem } from "./LayerListItem";
-import ModalAdd from "./modals/ModalAdd";
+import { ModalAdd } from "./modals/ModalAdd";
 
 import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
-import generateUniqueId from "../libs/document-uid";
+import { generateUniqueId } from "../libs/document-uid";
 import { findClosestCommonPrefix, layerPrefix } from "../libs/layer";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { type MappedError, type OnMoveLayerCallback } from "../libs/definitions";
@@ -336,7 +336,7 @@ type LayerListProps = LayerListContainerProps & {
   onMoveLayer: OnMoveLayerCallback
 };
 
-const LayerList: React.FC<LayerListProps> = (props) => {
+export const LayerList: React.FC<LayerListProps> = (props) => {
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -361,5 +361,3 @@ const LayerList: React.FC<LayerListProps> = (props) => {
     </DndContext>
   );
 };
-
-export default LayerList;

src/components/LayerListGroup.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Collapser from "./Collapser";
+import { Collapser } from "./Collapser";
 
 type LayerListGroupProps = {
   title: string
@@ -9,7 +9,7 @@ type LayerListGroupProps = {
   "aria-controls"?: string
 };
 
-export default class LayerListGroup extends React.Component<LayerListGroupProps> {
+export class LayerListGroup extends React.Component<LayerListGroupProps> {
   render() {
     return <li className="maputnik-layer-list-group">
       <div className="maputnik-layer-list-group-header"

src/components/LayerListItem.tsx

@@ -5,7 +5,7 @@ import { IconContext } from "react-icons";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 
-import IconLayer from "./IconLayer";
+import { IconLayer } from "./IconLayer";
 import type { VisibilitySpecification } from "maplibre-gl";
 
 
@@ -87,7 +87,7 @@ type LayerListItemProps = {
   onLayerVisibilityToggle?(...args: unknown[]): unknown
 };
 
-const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
+export const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props, ref) => {
   const {
     isSelected = false,
     visibility = "visible",
@@ -162,5 +162,3 @@ const LayerListItem = React.forwardRef<HTMLLIElement, LayerListItemProps>((props
     </li>
   </IconContext.Provider>;
 });
-
-export default LayerListItem;

src/components/MapMaplibreGl.tsx

@@ -3,10 +3,10 @@ import {createRoot} from "react-dom/client";
 import MapLibreGl, {type LayerSpecification, type LngLat, type Map, type MapOptions, type SourceSpecification, type StyleSpecification} from "maplibre-gl";
 import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
 import colors from "@maplibre/maplibre-gl-inspect/lib/colors";
-import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
+import { FeatureLayerPopup as MapMaplibreGlLayerPopup } from "./MapMaplibreGlLayerPopup";
-import MapMaplibreGlFeaturePropertyPopup, { type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
+import { FeaturePropertyPopup as MapMaplibreGlFeaturePropertyPopup, type InspectFeature } from "./MapMaplibreGlFeaturePropertyPopup";
 import Color from "color";
-import ZoomControl from "../libs/zoomcontrol";
+import { ZoomControl } from "../libs/zoomcontrol";
 import { type HighlightedLayer, colorHighlightedLayer } from "../libs/highlight";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "../maplibregl.css";
@@ -322,5 +322,4 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
   }
 }
 
-const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
+export const MapMaplibreGl = withTranslation()(MapMaplibreGlInternal);
-export default MapMaplibreGl;

src/components/MapMaplibreGlFeaturePropertyPopup.tsx

@@ -63,7 +63,7 @@ type FeaturePropertyPopupProps = {
   features: InspectFeature[]
 };
 
-class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
+export class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
   render() {
     const features = removeDuplicatedFeatures(this.props.features);
     return <div className="maputnik-feature-property-popup" dir="ltr" data-wd-key="feature-property-popup">
@@ -75,6 +75,3 @@ class FeaturePropertyPopup extends React.Component<FeaturePropertyPopupProps> {
     </div>;
   }
 }
-
-
-export default FeaturePropertyPopup;

src/components/MapMaplibreGlLayerPopup.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import IconLayer from "./IconLayer";
+import { IconLayer } from "./IconLayer";
 import type {InspectFeature} from "./MapMaplibreGlFeaturePropertyPopup";
 
 function groupFeaturesBySourceLayer(features: InspectFeature[]) {
@@ -32,7 +32,7 @@ type FeatureLayerPopupProps = {
   zoom?: number
 };
 
-class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
+export class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
   _getFeatureColor(feature: InspectFeature, _zoom?: number) {
     // Guard because openlayers won't have this
     if (!feature.layer.paint) {
@@ -109,6 +109,3 @@ class FeatureLayerPopup extends React.Component<FeatureLayerPopupProps> {
     </div>;
   }
 }
-
-
-export default FeatureLayerPopup;

src/components/MapOpenLayers.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {throttle} from "lodash";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import MapMaplibreGlLayerPopup from "./MapMaplibreGlLayerPopup";
+import { FeatureLayerPopup as MapMaplibreGlLayerPopup } from "./MapMaplibreGlLayerPopup";
 
 import "ol/ol.css";
 //@ts-ignore
@@ -204,5 +204,4 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
   }
 }
 
-const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
+export const MapOpenLayers = withTranslation()(MapOpenLayersInternal);
-export default MapOpenLayers;

src/components/PropertyGroup.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import FieldFunction from "./FieldFunction";
+import { FieldFunction } from "./FieldFunction";
 import type {LayerSpecification} from "maplibre-gl";
 import { type MappedLayerErrors } from "../libs/definitions";
 
@@ -40,7 +40,7 @@ type PropertyGroupProps = {
   errors?: MappedLayerErrors
 };
 
-export default class PropertyGroup extends React.Component<PropertyGroupProps> {
+export class PropertyGroup extends React.Component<PropertyGroupProps> {
   onPropertyChange = (property: string, newValue: any) => {
     const group = getGroupName(this.props.spec, this.props.layer.type, property);
     this.props.onChange(group ,property, newValue);

src/components/ScrollContainer.tsx

@@ -4,7 +4,7 @@ type ScrollContainerProps = {
   children?: React.ReactNode
 };
 
-export default class ScrollContainer extends React.Component<ScrollContainerProps> {
+export class ScrollContainer extends React.Component<ScrollContainerProps> {
   render() {
     return <div className="maputnik-scroll-container">
       {this.props.children}

src/components/SingleFilterEditor.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import {otherFilterOps} from "../libs/filterops";
-import InputString from "./InputString";
+import { InputString } from "./InputString";
-import InputAutocomplete from "./InputAutocomplete";
+import { InputAutocomplete } from "./InputAutocomplete";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
 
 function tryParseInt(v: string | number) {
   if (v === "") return v;
@@ -40,7 +40,7 @@ type SingleFilterEditorProps = {
   properties?: {[key: string]: string}
 };
 
-export default class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
+export class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
   static defaultProps = {
     properties: {},
   };

src/components/SmallError.tsx

@@ -18,5 +18,4 @@ class SmallErrorInternal extends React.Component<SmallErrorInternalProps> {
   }
 }
 
-const SmallError = withTranslation()(SmallErrorInternal);
+export const SmallError = withTranslation()(SmallErrorInternal);
-export default SmallError;

src/components/SpecProperty.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import FieldSpec, {type FieldSpecProps} from "./FieldSpec";
+import { FieldSpec, type FieldSpecProps } from "./FieldSpec";
-import FunctionButtons from "./_FunctionButtons";
+import { FunctionInputButtons as FunctionButtons } from "./FunctionButtons";
 
-import labelFromFieldName from "../libs/label-from-field-name";
+import { labelFromFieldName } from "../libs/label-from-field-name";
 
 
 type SpecPropertyProps = FieldSpecProps & {
@@ -19,7 +19,7 @@ type SpecPropertyProps = FieldSpecProps & {
 };
 
 
-export default class SpecProperty extends React.Component<SpecPropertyProps> {
+export class SpecProperty extends React.Component<SpecPropertyProps> {
   static defaultProps = {
     errors: {},
   };

src/components/ZoomProperty.tsx

@@ -4,17 +4,17 @@ import { TbMathFunction } from "react-icons/tb";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputButton from "./InputButton";
+import { InputButton } from "./InputButton";
-import InputSpec from "./InputSpec";
+import { InputSpec } from "./InputSpec";
-import InputNumber from "./InputNumber";
+import { InputNumber } from "./InputNumber";
-import InputSelect from "./InputSelect";
+import { InputSelect } from "./InputSelect";
-import Block from "./Block";
+import { Block } from "./Block";
 
-import DeleteStopButton from "./_DeleteStopButton";
+import { DeleteStopButton } from "./DeleteStopButton";
-import labelFromFieldName from "../libs/label-from-field-name";
+import { labelFromFieldName } from "../libs/label-from-field-name";
 
-import docUid from "../libs/document-uid";
+import { generateUniqueId as docUid } from "../libs/document-uid";
-import sortNumerically from "../libs/sort-numerically";
+import { sortNumerically } from "../libs/sort-numerically";
 import { type MappedLayerErrors } from "../libs/definitions";
 
 
@@ -264,5 +264,4 @@ class ZoomPropertyInternal extends React.Component<ZoomPropertyInternalProps, Zo
   }
 }
 
-const ZoomProperty = withTranslation()(ZoomPropertyInternal);
+export const ZoomProperty = withTranslation()(ZoomPropertyInternal);
-export default ZoomProperty;

src/components/modals/Modal.tsx

@@ -67,5 +67,4 @@ class ModalInternal extends React.Component<ModalInternalProps> {
   }
 }
 
-const Modal = withTranslation()(ModalInternal);
+export const Modal = withTranslation()(ModalInternal);
-export default Modal;

src/components/modals/ModalAdd.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import type {LayerSpecification, SourceSpecification} from "maplibre-gl";
 
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import FieldType from "../FieldType";
+import { FieldType } from "../FieldType";
-import FieldId from "../FieldId";
+import { FieldId } from "../FieldId";
-import FieldSource from "../FieldSource";
+import { FieldSource } from "../FieldSource";
-import FieldSourceLayer from "../FieldSourceLayer";
+import { FieldSourceLayer } from "../FieldSourceLayer";
 import { NON_SOURCE_LAYERS } from "../../libs/non-source-layers";
 
 type ModalAddInternalProps = {
@@ -192,5 +192,4 @@ class ModalAddInternal extends React.Component<ModalAddInternalProps, ModalAddSt
   }
 }
 
-const ModalAdd = withTranslation()(ModalAddInternal);
+export const ModalAdd = withTranslation()(ModalAddInternal);
-export default ModalAdd;

src/components/modals/ModalDebug.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from "./Modal";
+import { Modal } from "./Modal";
 
 
 type ModalDebugInternalProps = {
@@ -79,5 +79,4 @@ class ModalDebugInternal extends React.Component<ModalDebugInternalProps> {
   }
 }
 
-const ModalDebug = withTranslation()(ModalDebugInternal);
+export const ModalDebug = withTranslation()(ModalDebugInternal);
-export default ModalDebug;

src/components/modals/ModalExport.tsx

@@ -6,11 +6,11 @@ import {format} from "@maplibre/maplibre-gl-style-spec";
 import {MdMap, MdSave} from "react-icons/md";
 import {type WithTranslation, withTranslation} from "react-i18next";
 
-import FieldString from "../FieldString";
+import { FieldString } from "../FieldString";
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import style from "../../libs/style";
+import { replaceAccessTokens, stripAccessTokens } from "../../libs/style";
-import fieldSpecAdditional from "../../libs/field-spec-additional";
+import { spec as fieldSpecAdditional } from "../../libs/field-spec-additional";
 import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
 
 
@@ -32,8 +32,8 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
 
   tokenizedStyle() {
     return format(
-      style.stripAccessTokens(
+      stripAccessTokens(
-        style.replaceAccessTokens(this.props.mapStyle)
+        replaceAccessTokens(this.props.mapStyle)
       )
     );
   }
@@ -217,5 +217,4 @@ class ModalExportInternal extends React.Component<ModalExportInternalProps> {
   }
 }
 
-const ModalExport = withTranslation()(ModalExportInternal);
+export const ModalExport = withTranslation()(ModalExportInternal);
-export default ModalExport;

src/components/modals/ModalGlobalState.tsx

@@ -3,13 +3,13 @@ import { withTranslation, type WithTranslation } from "react-i18next";
 import { MdDelete } from "react-icons/md";
 import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import FieldString from "../FieldString";
+import { FieldString } from "../FieldString";
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
 import { PiListPlusBold } from "react-icons/pi";
 import { type StyleSpecificationWithId } from "../../libs/definitions";
 import { type SchemaSpecification } from "maplibre-gl";
-import Doc from "../Doc";
+import { Doc } from "../Doc";
 
 type ModalGlobalStateInternalProps = {
   mapStyle: StyleSpecificationWithId;
@@ -151,5 +151,4 @@ const ModalGlobalStateInternal: React.FC<ModalGlobalStateInternalProps> = (props
   );
 };
 
-const ModalGlobalState = withTranslation()(ModalGlobalStateInternal);
+export const ModalGlobalState = withTranslation()(ModalGlobalStateInternal);
-export default ModalGlobalState;

src/components/modals/ModalLoading.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
-import Modal from "./Modal";
+import { Modal } from "./Modal";
 
 
 type ModalLoadingInternalProps = {
@@ -35,5 +35,4 @@ class ModalLoadingInternal extends React.Component<ModalLoadingInternalProps> {
   }
 }
 
-const ModalLoading = withTranslation()(ModalLoadingInternal);
+export const ModalLoading = withTranslation()(ModalLoadingInternal);
-export default ModalLoading;

src/components/modals/ModalOpen.tsx

@@ -3,12 +3,12 @@ import { MdFileUpload } from "react-icons/md";
 import { MdAddCircleOutline } from "react-icons/md";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import ModalLoading from "./ModalLoading";
+import { ModalLoading } from "./ModalLoading";
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
-import InputUrl from "../InputUrl";
+import { InputUrl } from "../InputUrl";
 
-import style from "../../libs/style";
+import { ensureStyleValidity } from "../../libs/style";
 import publicStyles from "../../config/styles.json";
 
 type PublicStyleProps = {
@@ -109,7 +109,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
           activeRequestUrl: null
         });
 
-        const mapStyle = style.ensureStyleValidity(body);
+        const mapStyle = ensureStyleValidity(body);
         console.log("Loaded style ", mapStyle.id);
         this.props.onStyleOpen(mapStyle);
         this.onOpenToggle();
@@ -165,7 +165,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
       });
       return;
     }
-    mapStyle = style.ensureStyleValidity(mapStyle);
+    mapStyle = ensureStyleValidity(mapStyle);
 
     this.props.onStyleOpen(mapStyle, fileHandle);
     this.onOpenToggle();
@@ -193,7 +193,7 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
         });
         return;
       }
-      mapStyle = style.ensureStyleValidity(mapStyle);
+      mapStyle = ensureStyleValidity(mapStyle);
       this.props.onStyleOpen(mapStyle);
       this.onOpenToggle();
     };
@@ -364,5 +364,4 @@ class ModalOpenInternal extends React.Component<ModalOpenInternalProps, ModalOpe
   }
 }
 
-const ModalOpen = withTranslation()(ModalOpenInternal);
+export const ModalOpen = withTranslation()(ModalOpenInternal);
-export default ModalOpen;

src/components/modals/ModalSettings.tsx

@@ -3,17 +3,17 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import type {LightSpecification, ProjectionSpecification, StyleSpecification, TerrainSpecification, TransitionSpecification} from "maplibre-gl";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import FieldArray from "../FieldArray";
+import { FieldArray } from "../FieldArray";
-import FieldNumber from "../FieldNumber";
+import { FieldNumber } from "../FieldNumber";
-import FieldString from "../FieldString";
+import { FieldString } from "../FieldString";
-import FieldUrl from "../FieldUrl";
+import { FieldUrl } from "../FieldUrl";
-import FieldSelect from "../FieldSelect";
+import { FieldSelect } from "../FieldSelect";
-import FieldEnum from "../FieldEnum";
+import { FieldEnum } from "../FieldEnum";
-import FieldColor from "../FieldColor";
+import { FieldColor } from "../FieldColor";
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import FieldJson from "../FieldJson";
+import { FieldJson } from "../FieldJson";
-import Block from "../Block";
+import { Block } from "../Block";
-import fieldSpecAdditional from "../../libs/field-spec-additional";
+import { spec as fieldSpecAdditional } from "../../libs/field-spec-additional";
 import type {OnStyleChangedCallback, StyleSpecificationWithId} from "../../libs/definitions";
 
 type ModalSettingsInternalProps = {
@@ -325,5 +325,4 @@ class ModalSettingsInternal extends React.Component<ModalSettingsInternalProps>
   }
 }
 
-const ModalSettings = withTranslation()(ModalSettingsInternal);
+export const ModalSettings = withTranslation()(ModalSettingsInternal);
-export default ModalSettings;

src/components/modals/ModalShortcuts.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Trans, type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from "./Modal";
+import { Modal } from "./Modal";
 
 
 type ModalShortcutsInternalProps = {
@@ -134,5 +134,4 @@ class ModalShortcutsInternal extends React.Component<ModalShortcutsInternalProps
   }
 }
 
-const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
+export const ModalShortcuts = withTranslation()(ModalShortcutsInternal);
-export default ModalShortcuts;

src/components/modals/ModalSources.tsx

@@ -4,13 +4,13 @@ import latest from "@maplibre/maplibre-gl-style-spec/dist/latest.json";
 import type {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, VectorSourceSpecification} from "maplibre-gl";
 import { type WithTranslation, withTranslation } from "react-i18next";
 
-import Modal from "./Modal";
+import { Modal } from "./Modal";
-import InputButton from "../InputButton";
+import { InputButton } from "../InputButton";
-import FieldString from "../FieldString";
+import { FieldString } from "../FieldString";
-import FieldSelect from "../FieldSelect";
+import { FieldSelect } from "../FieldSelect";
-import ModalSourcesTypeEditor, { type EditorMode } from "./ModalSourcesTypeEditor";
+import { ModalSourcesTypeEditor, type EditorMode } from "./ModalSourcesTypeEditor";
 
-import style from "../../libs/style";
+import { generateId } from "../../libs/style";
 import { deleteSource, addSource, changeSource } from "../../libs/source";
 import publicSources from "../../config/tilesets.json";
 import { type OnStyleChangedCallback, type StyleSpecificationWithId } from "../../libs/definitions";
@@ -121,7 +121,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
     super(props);
     this.state = {
       mode: "tilejson_vector",
-      sourceId: style.generateId(),
+      sourceId: generateId(),
       source: this.defaultSource("tilejson_vector"),
     };
   }
@@ -343,5 +343,4 @@ class ModalSourcesInternal extends React.Component<ModalSourcesInternalProps> {
   }
 }
 
-const ModalSources = withTranslation()(ModalSourcesInternal);
+export const ModalSources = withTranslation()(ModalSourcesInternal);
-export default ModalSources;

src/components/modals/ModalSourcesTypeEditor.tsx

@@ -3,14 +3,14 @@ import {latest} from "@maplibre/maplibre-gl-style-spec";
 import { type WithTranslation, withTranslation } from "react-i18next";
 import { type TFunction } from "i18next";
 
-import Block from "../Block";
+import { Block } from "../Block";
-import FieldUrl from "../FieldUrl";
+import { FieldUrl } from "../FieldUrl";
-import FieldNumber from "../FieldNumber";
+import { FieldNumber } from "../FieldNumber";
-import FieldSelect from "../FieldSelect";
+import { FieldSelect } from "../FieldSelect";
-import FieldDynamicArray from "../FieldDynamicArray";
+import { FieldDynamicArray } from "../FieldDynamicArray";
-import FieldArray from "../FieldArray";
+import { FieldArray } from "../FieldArray";
-import FieldJson from "../FieldJson";
+import { FieldJson } from "../FieldJson";
-import FieldCheckbox from "../FieldCheckbox";
+import { FieldCheckbox } from "../FieldCheckbox";
 
 
 export type EditorMode = "video" | "image" | "tilejson_vector" | "tile_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "pmtiles_vector" | "tile_vector" | "geojson_url" | "geojson_json" | null;
@@ -375,5 +375,4 @@ class ModalSourcesTypeEditorInternal extends React.Component<ModalSourcesTypeEdi
   }
 }
 
-const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
+export const ModalSourcesTypeEditor = withTranslation()(ModalSourcesTypeEditorInternal);
-export default ModalSourcesTypeEditor;

src/i18n.ts

@@ -42,4 +42,4 @@ i18n
     }
   });
 
-export default i18n;
+export { i18n };

src/index.jsx

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import "./favicon.ico";
 import "./styles/index.scss";
 import "./i18n";
-import App from "./components/App";
+import { App } from "./components/App";
 
 const root = createRoot(document.querySelector("#app"));
 root.render(

src/libs/document-uid.ts

@@ -3,7 +3,7 @@
  */
 let REF = 0;
 
-export default function generateUniqueId(prefix="") {
+export function generateUniqueId(prefix="") {
   REF++;
   return prefix+REF;
 }

src/libs/field-spec-additional.ts

@@ -1,6 +1,6 @@
 import { type TFunction } from "i18next";
 
-const spec = (t: TFunction) => ({
+export const spec = (t: TFunction) => ({
   maputnik: {
     maptiler_access_token: {
       label: t("MapTiler Access Token"),
@@ -32,5 +32,3 @@ const spec = (t: TFunction) => ({
     },
   }
 });
-
-export default spec;

src/libs/label-from-field-name.ts

@@ -1,6 +1,6 @@
 import capitalize from "lodash.capitalize";
 
-export default function labelFromFieldName(fieldName: string) {
+export function labelFromFieldName(fieldName: string) {
   let label;
   const parts = fieldName.split("-");
   if (parts.length > 1) {

src/libs/layerwatcher.ts

@@ -9,7 +9,7 @@ export type LayerWatcherOptions = {
 
 /** Listens to map events to build up a store of available vector
  * layers contained in the tiles */
-export default class LayerWatcher {
+export class LayerWatcher {
   onSourcesChange: (sources: { [sourceId: string]: string[] }) => void;
   onVectorLayersChange: (vectorLayers: { [vectorLayerId: string]: { [propertyName: string]: { [propertyValue: string]: {} } } }) => void;
   throttledAnalyzeVectorLayerFields: (map: any) => void;

src/libs/sort-numerically.ts

@@ -1,4 +1,4 @@
-export default function(num1: string | number, num2: string| number) {
+export function sortNumerically(num1: string | number, num2: string| number) {
   const a = +num1;
   const b = +num2;
 

src/libs/store/apistore.ts

@@ -1,4 +1,4 @@
-import style from "../style";
+import { emptyStyle, ensureStyleValidity, replaceAccessTokens, stripAccessTokens } from "../style";
 import {format} from "@maplibre/maplibre-gl-style-spec";
 import ReconnectingWebSocket from "reconnecting-websocket";
 import type {IStyleStore, OnStyleChangedCallback, StyleSpecificationWithId} from "../definitions";
@@ -40,13 +40,13 @@ export class ApiStyleStore implements IStyleStore {
     connection.onmessage = e => {
       if(!e.data) return;
       console.log("Received style update from API");
-      let parsedStyle = style.emptyStyle;
+      let parsedStyle = emptyStyle;
       try {
         parsedStyle = JSON.parse(e.data);
       } catch(err) {
         console.error(err);
       }
-      const updatedStyle = style.ensureStyleValidity(parsedStyle);
+      const updatedStyle = ensureStyleValidity(parsedStyle);
       this.onLocalStyleChange(updatedStyle);
     };
   }
@@ -57,7 +57,7 @@ export class ApiStyleStore implements IStyleStore {
         mode: "cors",
       });
       const body = await response.json();
-      return style.ensureStyleValidity(body);
+      return ensureStyleValidity(body);
     } else {
       throw new Error("No latest style available. You need to init the api backend first.");
     }
@@ -66,8 +66,8 @@ export class ApiStyleStore implements IStyleStore {
   // Save current style replacing previous version
   save(mapStyle: StyleSpecificationWithId) {
     const styleJSON = format(
-      style.stripAccessTokens(
+      stripAccessTokens(
-        style.replaceAccessTokens(mapStyle)
+        replaceAccessTokens(mapStyle)
       )
     );
 

src/libs/store/stylestore.ts

@@ -1,4 +1,4 @@
-import style from "../style";
+import { ensureStyleValidity } from "../style";
 import {loadStyleUrl} from "../urlopen";
 import publicSources from "../../config/styles.json";
 import type {IStyleStore, StyleSpecificationWithId} from "../definitions";
@@ -89,7 +89,7 @@ export class StyleStore implements IStyleStore {
 
   // Save current style replacing previous version
   save(mapStyle: StyleSpecificationWithId) {
-    mapStyle = style.ensureStyleValidity(mapStyle);
+    mapStyle = ensureStyleValidity(mapStyle);
     const key = styleKey(mapStyle.id);
 
     const saveFn = () => {

src/libs/style.ts

@@ -148,7 +148,7 @@ function stripAccessTokens(mapStyle: StyleSpecification) {
   };
 }
 
-export default {
+export {
   ensureStyleValidity,
   emptyStyle,
   indexOfLayer,

src/libs/urlopen.ts

@@ -1,4 +1,4 @@
-import style from "./style";
+import { emptyStyle, ensureStyleValidity } from "./style";
 import { type StyleSpecificationWithId } from "./definitions";
 
 export function getStyleUrlFromAddressbarAndRemoveItIfNeeded(): string | null {
@@ -19,10 +19,10 @@ export async function loadStyleUrl(styleUrl: string): Promise<StyleSpecification
       credentials: "same-origin"
     });
     const body = await response.json();
-    return style.ensureStyleValidity(body);
+    return ensureStyleValidity(body);
   } catch {
     console.warn("Could not fetch default style: " + styleUrl);
-    return style.emptyStyle;
+    return emptyStyle;
   }
 }
 

src/libs/zoomcontrol.ts

@@ -1,6 +1,6 @@
 import {type Map} from "maplibre-gl";
 
-export default class ZoomControl {
+export class ZoomControl {
   _map: Map| undefined = undefined;
   _container: HTMLDivElement | undefined = undefined;
   _textEl: HTMLSpanElement | null = null;