updated aliases

.gitignore

@@ -18,6 +18,10 @@ yarn-error.log
 /config/backend.js
 /config/pwa.js
 
+/src/config/frontend.js
+/src/config/backend.js
+/src/config/pwa.js
+
 # Bundle
 *.js.map
 stats.json

src/_modules/Arrows.ts

@@ -1,7 +1,7 @@
 import { LatLngLiteral, LayerGroup, Map } from "leaflet";
-import { arrowClusterIcon, createArrow } from "$utils/arrow";
+import { arrowClusterIcon, createArrow } from "~/utils/arrow";
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
-import { angleBetweenPoints, dist2, middleCoord } from "$utils/geom";
+import { angleBetweenPoints, dist2, middleCoord } from "~/utils/geom";
 
 class Component extends LayerGroup {
   constructor(props){

src/_modules/Editor.ts

@@ -1,12 +1,12 @@
-import { Map } from '$modules/Map';
+import { Map } from '~/modules/Map';
-import { Poly } from '$modules/Poly';
+import { Poly } from '~/modules/Poly';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { ILatLng, Stickers } from '$modules/Stickers';
+import { ILatLng, Stickers } from '~/modules/Stickers';
-import { Router } from '$modules/Router';
+import { Router } from '~/modules/Router';
-import { DEFAULT_LOGO, ILogos, LOGOS } from '$constants/logos';
+import { DEFAULT_LOGO, ILogos, LOGOS } from '~/constants/logos';
 
-import { getUrlData } from '$utils/history';
+import { getUrlData } from '~/utils/history';
-import { store } from '$redux/store';
+import { store } from '~/redux/store';
 import {
   resetSaveDialog,
   setActiveSticker,
@@ -16,7 +16,7 @@ import {
   setMarkersShown,
   setMode,
   setRouterPoints, setStarred,
-} from '$redux/user/actions';
+} from '~/redux/user/actions';
 import {
   mapSetAddress,
   mapSetDescription,
@@ -24,11 +24,11 @@ import {
   mapSetPublic,
   mapSetTitle,
   mapSetProvider,
-} from '$redux/map/actions';
+} from '~/redux/map/actions';
-import { DEFAULT_PROVIDER, IProvider, PROVIDERS } from '$constants/providers';
+import { DEFAULT_PROVIDER, IProvider, PROVIDERS } from '~/constants/providers';
-import { STICKERS } from '$constants/stickers';
+import { STICKERS } from '~/constants/stickers';
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { DEFAULT_USER, IUser } from "$constants/auth";
+import { DEFAULT_USER, IUser } from "~/constants/auth";
 
 interface IEditor {
   map: Map;

src/_modules/InteractivePoly.ts

@@ -18,7 +18,7 @@ import {
   LatLngLiteral
 } from "leaflet";
 
-import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom";
+import { distKm, distToSegment, getPolyLength, pointInArea } from "~/utils/geom";
 
 interface InteractivePolylineOptions extends PolylineOptions {
   maxMarkers?: number;

src/_modules/KmMarks.ts

@@ -1,7 +1,7 @@
 import { divIcon, LatLngLiteral, Layer, LayerGroup, Map, marker, Marker } from "leaflet";
-import { arrowClusterIcon, createArrow } from "$utils/arrow";
+import { arrowClusterIcon, createArrow } from "~/utils/arrow";
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
-import { allwaysPositiveAngleDeg, angleBetweenPoints, distKm } from "$utils/geom";
+import { allwaysPositiveAngleDeg, angleBetweenPoints, distKm } from "~/utils/geom";
 import classNames from 'classnames';
 
 interface KmMarksOptions {

src/_modules/Map.ts

@@ -6,8 +6,8 @@ import {
 } from 'leaflet';
 
 import 'leaflet/dist/leaflet.css';
-import { PROVIDER } from '$config/frontend';
+import { PROVIDER } from '~/config/frontend';
-import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
+import { DEFAULT_PROVIDER, PROVIDERS } from '~/constants/providers';
 
 interface Props {
   container: string

src/_modules/Poly.ts

@@ -1,11 +1,11 @@
 import { Map, LatLng } from 'leaflet';
-import { simplify } from '$utils/simplify';
+import { simplify } from '~/utils/simplify';
-import { editor, Editor } from "$modules/Editor";
+import { editor, Editor } from "~/modules/Editor";
-import { ILatLng } from "$modules/Stickers";
+import { ILatLng } from "~/modules/Stickers";
-import { InteractivePoly } from "$modules/InteractivePoly";
+import { InteractivePoly } from "~/modules/InteractivePoly";
-import { Arrows } from "$modules/Arrows";
+import { Arrows } from "~/modules/Arrows";
-import { KmMarks } from "$modules/KmMarks";
+import { KmMarks } from "~/modules/KmMarks";
-import { isMobile } from "$utils/window";
+import { isMobile } from "~/utils/window";
 
 interface Props {
   map: Map;

src/_modules/Router.ts

@@ -1,8 +1,8 @@
 import { Map, Marker } from 'leaflet';
 import * as Routing from 'leaflet-routing-machine/src/index';
-import { CLIENT } from '$config/frontend';
+import { CLIENT } from '~/config/frontend';
-import { DomMarker } from '$utils/DomMarker';
+import { DomMarker } from '~/utils/DomMarker';
-import { editor } from "$modules/Editor";
+import { editor } from "~/modules/Editor";
 
 interface ILatLng {
   lat: number, lng: number

src/_modules/Sticker.tsx

@@ -1,15 +1,15 @@
 import { Map, Marker, marker } from 'leaflet';
 import React from 'react';
-import { DomMarker } from '$utils/DomMarker';
+import { DomMarker } from '~/utils/DomMarker';
 
-import { STICKERS } from '$constants/stickers';
+import { STICKERS } from '~/constants/stickers';
 import ReactDOM from 'react-dom';
-import { StickerDesc } from '$components/StickerDesc';
+import { StickerDesc } from '~/components/StickerDesc';
 import classnames from 'classnames';
-import { getLabelDirection } from '$utils/geom';
+import { getLabelDirection } from '~/utils/geom';
-import { ILatLng } from "$modules/Stickers";
+import { ILatLng } from "~/modules/Stickers";
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { Editor, editor } from "$modules/Editor";
+import { Editor, editor } from "~/modules/Editor";
 
 const getX = e => (
   e.touches && e.touches.length > 0

src/_modules/Stickers.ts

@@ -1,9 +1,9 @@
 import {FeatureGroup, LayerGroup, layerGroup, Map} from 'leaflet';
-import { IStickerDump, Sticker } from '$modules/Sticker';
+import { IStickerDump, Sticker } from '~/modules/Sticker';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
-import { clusterIcon } from '$utils/clusterIcon';
+import { clusterIcon } from '~/utils/clusterIcon';
-import { editor, Editor } from "$modules/Editor";
+import { editor, Editor } from "~/modules/Editor";
-import { STICKERS } from "$constants/stickers";
+import { STICKERS } from "~/constants/stickers";
 
 export interface ILatLng {
   lat: number,

src/components/Cursor.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { IStickerPack, STICKERS } from '$constants/stickers';
+import { IStickerPack, STICKERS } from '~/constants/stickers';
-import { StickerIcon } from '$components/StickerIcon';
+import { StickerIcon } from '~/components/StickerIcon';
-import { IRootReducer } from '$redux/user';
+import { IRootReducer } from '~/redux/user';
 
 interface Props {
   mode: IRootReducer['mode'],

src/components/Fills.tsx

@@ -43,6 +43,6 @@ export const Fills = () => (
         <path d="m 2.625,3.375 h 7.5 L 10.28125,1.609375 13.5,4.25 10.484375,6.921875 10.171875,5.15625 2.625,5.125 Z" fill="#ff3344" fillRule="evenodd" />
       </g>
     </defs>
-    <image xlinkHref={require('$sprites/stickers/stickers-base.svg')} width={0} height={0} />
+    <image xlinkHref={require('~/sprites/stickers/stickers-base.svg')} width={0} height={0} />
   </svg>
 );

src/components/StickerIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { STICKERS } from '$constants/stickers';
+import { STICKERS } from '~/constants/stickers';
 
 type Props = {
   set: string,

src/components/UserLocation.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 // import { marker } from 'leaflet';
-// import { DomMarker } from '$utils/DomMarker';
+// import { DomMarker } from '~/utils/DomMarker';
-// import { Icon } from '$components/panels/Icon';
+// import { Icon } from '~/components/panels/Icon';
-// import { editor } from '$modules/Editor';
+// import { editor } from '~/modules/Editor';
 
 interface Props {
 

src/components/dialogs/AppInfoDialog.tsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
-import { Scroll } from '$components/Scroll';
+import { Scroll } from '~/components/Scroll';
-import { APP_INFO } from '$constants/app_info';
+import { APP_INFO } from '~/constants/app_info';
 
 export const AppInfoDialog = () => (
   <div className="dialog-content">

src/components/dialogs/CancelDialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { setMode, stopEditing } from "$redux/user/actions";
+import { setMode, stopEditing } from "~/redux/user/actions";
 
 type Props = {
   stopEditing: typeof stopEditing,

src/components/dialogs/LogoDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { LOGOS } from '$constants/logos';
+import { LOGOS } from '~/constants/logos';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 import classnames from 'classnames';
-import * as MAP_ACTIONS from "$redux/map/actions"
+import * as MAP_ACTIONS from "~/redux/map/actions"
-import { selectMapLogo } from '$redux/map/selectors';
+import { selectMapLogo } from '~/redux/map/selectors';
 import { connect } from 'react-redux';
 
 const mapStateToProps = state => ({

src/components/dialogs/MapListDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { RouteRowWrapper } from '$components/maps/RouteRowWrapper';
+import { RouteRowWrapper } from '~/components/maps/RouteRowWrapper';
-import { Scroll } from '$components/Scroll';
+import { Scroll } from '~/components/Scroll';
 import {
   searchSetDistance,
   searchSetTitle,
@@ -11,17 +11,17 @@ import {
   dropRoute,
   modifyRoute,
   toggleRouteStarred,
-} from '$redux/user/actions';
+} from '~/redux/user/actions';
-import { isMobile } from '$utils/window';
+import { isMobile } from '~/utils/window';
 import classnames from 'classnames';
 
 import Range from 'rc-slider/lib/Range';
-import { TABS, TABS_TITLES } from '$constants/dialogs';
+import { TABS, TABS_TITLES } from '~/constants/dialogs';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { pushPath } from '$utils/history';
+import { pushPath } from '~/utils/history';
-import { IRootState, IRouteListItem } from '$redux/user';
+import { IRootState, IRouteListItem } from '~/redux/user';
-import { ROLES } from '$constants/auth';
+import { ROLES } from '~/constants/auth';
-import { IState } from '$redux/store';
+import { IState } from '~/redux/store';
 
 export interface IMapListDialogProps extends IRootState {
   marks: { [x: number]: string };

src/components/dialogs/ProviderDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
+import { PROVIDERS, replaceProviderUrl } from '~/constants/providers';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 import classnames from 'classnames';
-import * as MAP_ACTIONS from "$redux/map/actions";
+import * as MAP_ACTIONS from "~/redux/map/actions";
-import { selectMapProvider } from '$redux/map/selectors';
+import { selectMapProvider } from '~/redux/map/selectors';
 import { connect } from 'react-redux';
 
 const mapStateToProps = state => ({

src/components/dialogs/RouterDialog.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 import {
   routerCancel as routerCancelAction,
   routerSubmit as routerSubmitAction,
-} from "$redux/user/actions";
+} from "~/redux/user/actions";
 import classnames from "classnames";
 
 type Props = {

src/components/dialogs/SaveDialog.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import { copyToClipboard, getUrlData } from '$utils/history';
+import { copyToClipboard, getUrlData } from '~/utils/history';
-import { toTranslit, parseDesc } from '$utils/format';
+import { toTranslit, parseDesc } from '~/utils/format';
-import { TIPS } from '$constants/tips';
+import { TIPS } from '~/constants/tips';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { Switch } from '$components/Switch';
+import { Switch } from '~/components/Switch';
 
 import classnames from 'classnames';
 import ExpandableTextarea from 'react-expandable-textarea';
 import { connect } from 'react-redux';
-import { selectMap } from '$redux/map/selectors';
+import { selectMap } from '~/redux/map/selectors';
-import { selectUser } from '$redux/user/selectors';
+import { selectUser } from '~/redux/user/selectors';
-import * as USER_ACTIONS from '$redux/user/actions';
+import * as USER_ACTIONS from '~/redux/user/actions';
 
 const mapStateToProps = state => ({
   map: selectMap(state),

src/components/dialogs/ShotPrefetchDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { selectUserRenderer } from '$redux/user/selectors';
+import { selectUserRenderer } from '~/redux/user/selectors';
 
 const mapStateToProps = state => ({
   renderer: selectUserRenderer(state),

src/components/dialogs/StickersDialog.tsx

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
 
-import { STICKERS } from '$constants/stickers';
+import { STICKERS } from '~/constants/stickers';
-import { setActiveSticker as setActiveStickerAction } from "$redux/user/actions";
+import { setActiveSticker as setActiveStickerAction } from "~/redux/user/actions";
 
 interface Props {
   setActiveSticker: typeof setActiveStickerAction,

src/components/dialogs/TitleDialog.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import classnames from 'classnames';
-import { getStyle } from '$utils/dom';
+import { getStyle } from '~/utils/dom';
-import { nearestInt } from '$utils/geom';
+import { nearestInt } from '~/utils/geom';
-import { parseDesc } from '$utils/format';
+import { parseDesc } from '~/utils/format';
-import { selectUser } from '$redux/user/selectors';
+import { selectUser } from '~/redux/user/selectors';
-import { selectMap } from '$redux/map/selectors';
+import { selectMap } from '~/redux/map/selectors';
 
 const mapStateToProps = state => ({
   user: selectUser(state),

src/components/dialogs/TrashDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 
 type Props = {
   clearPoly: () => void,

src/components/logo/LogoPreview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { LOGOS } from '$constants/logos';
+import { LOGOS } from '~/constants/logos';
 import { connect } from 'react-redux';
-import { IRootState } from '$redux/user';
+import { IRootState } from '~/redux/user';
-import { selectMapLogo } from '$redux/map/selectors';
+import { selectMapLogo } from '~/redux/map/selectors';
 
 const mapStateToProps = state => ({ logo: selectMapLogo(state) });
 type Props = ReturnType<typeof mapStateToProps>;

src/components/maps/RouteRowDrop.tsx

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { MapListDialog } from "$components/dialogs/MapListDialog";
+import { MapListDialog } from "~/components/dialogs/MapListDialog";
-import { Tooltip } from "$components/panels/Tooltip";
+import { Tooltip } from "~/components/panels/Tooltip";
 import { ReactElement } from "react";
 
 interface Props {

src/components/maps/RouteRowEditor.tsx

@@ -1,8 +1,8 @@
 // @flow
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { Switch } from '$components/Switch';
+import { Switch } from '~/components/Switch';
-import { MapListDialog } from "$components/dialogs/MapListDialog";
+import { MapListDialog } from "~/components/dialogs/MapListDialog";
 
 interface Props {
   title: string;

src/components/maps/RouteRowView.tsx

@@ -1,12 +1,12 @@
 // @flow
 import React from "react";
-import { Icon } from "$components/panels/Icon";
+import { Icon } from "~/components/panels/Icon";
-import { MapListDialog } from "$components/dialogs/MapListDialog";
+import { MapListDialog } from "~/components/dialogs/MapListDialog";
-import { Tooltip } from "$components/panels/Tooltip";
+import { Tooltip } from "~/components/panels/Tooltip";
 import { ReactElement } from "react";
 import classnames from "classnames";
-import { toggleRouteStarred } from "$redux/user/actions";
+import { toggleRouteStarred } from "~/redux/user/actions";
-import { TABS } from "$constants/dialogs";
+import { TABS } from "~/constants/dialogs";
 
 interface Props {
   tab: string;

src/components/maps/RouteRowWrapper.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
-import { MapListDialog } from "$components/dialogs/MapListDialog";
+import { MapListDialog } from "~/components/dialogs/MapListDialog";
-import { RouteRowView } from "$components/maps/RouteRowView";
+import { RouteRowView } from "~/components/maps/RouteRowView";
-import { RouteRowEditor } from "$components/maps/RouteRowEditor";
+import { RouteRowEditor } from "~/components/maps/RouteRowEditor";
-import { RouteRowDrop } from "$components/maps/RouteRowDrop";
+import { RouteRowDrop } from "~/components/maps/RouteRowDrop";
 import { ReactElement } from "react";
 
 interface Props {

src/components/panels/DistanceBar.tsx

@@ -1,15 +1,15 @@
 // flow
 import React from 'react';
-import { toHours } from '$utils/format';
+import { toHours } from '~/utils/format';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 import { connect } from 'react-redux';
 // import Slider from 'rc-slider';
 import Slider from 'rc-slider/lib/Slider';
 import { bindActionCreators } from 'redux';
-import { setSpeed } from '$redux/user/actions';
+import { setSpeed } from '~/redux/user/actions';
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { Tooltip } from "$components/panels/Tooltip";
+import { Tooltip } from "~/components/panels/Tooltip";
-import { isMobile } from "$utils/window";
+import { isMobile } from "~/utils/window";
 
 interface Props extends IRootState {
   setSpeed: typeof setSpeed,

src/components/panels/EditorDialog.tsx

@@ -1,18 +1,18 @@
 import React, { createElement } from 'react';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
 
-import { RouterDialog } from '$components/dialogs/RouterDialog';
+import { RouterDialog } from '~/components/dialogs/RouterDialog';
-import { StickersDialog } from '$components/dialogs/StickersDialog';
+import { StickersDialog } from '~/components/dialogs/StickersDialog';
-import { TrashDialog } from '$components/dialogs/TrashDialog';
+import { TrashDialog } from '~/components/dialogs/TrashDialog';
-import { LogoDialog } from '$components/dialogs/LogoDialog';
+import { LogoDialog } from '~/components/dialogs/LogoDialog';
-import { SaveDialog } from '$components/dialogs/SaveDialog';
+import { SaveDialog } from '~/components/dialogs/SaveDialog';
-import { CancelDialog } from '$components/dialogs/CancelDialog';
+import { CancelDialog } from '~/components/dialogs/CancelDialog';
 
 import { connect } from 'react-redux';
 
-import { ProviderDialog } from '$components/dialogs/ProviderDialog';
+import { ProviderDialog } from '~/components/dialogs/ProviderDialog';
-import { ShotPrefetchDialog } from '$components/dialogs/ShotPrefetchDialog';
+import { ShotPrefetchDialog } from '~/components/dialogs/ShotPrefetchDialog';
-import { selectUserMode } from '$redux/user/selectors';
+import { selectUserMode } from '~/redux/user/selectors';
 
 const mapStateToProps = state => ({ mode: selectUserMode(state) });
 

src/components/panels/EditorPanel.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
 import classnames from 'classnames';
 
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { EditorDialog } from '$components/panels/EditorDialog';
+import { EditorDialog } from '~/components/panels/EditorDialog';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setMode, startEditing, stopEditing, takeAShot, keyPressed } from '$redux/user/actions';
+import { setMode, startEditing, stopEditing, takeAShot, keyPressed } from '~/redux/user/actions';
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { Tooltip } from "$components/panels/Tooltip";
+import { Tooltip } from "~/components/panels/Tooltip";
 
 interface Props extends IRootState {
   routing: IRootState['features']['routing'],

src/components/panels/Icon.tsx

@@ -4,7 +4,7 @@ export const Icon = ({ icon, size = 32 }: { icon: string, size?: number }) => (
   <svg width={size} height={size} viewBox="0 0 32 32">
     <defs>
       <mask id={`icon-mask-${icon}`}>
-        <use xlinkHref={`${require('$sprites/icon.svg')}#${icon}`} x={0} y={0} />
+        <use xlinkHref={`${require('~/sprites/icon.svg')}#${icon}`} x={0} y={0} />
       </mask>
     </defs>
     <rect x="0" y="0" width="32" height="32" stroke="none" mask={`url(#icon-mask-${icon})`} />

src/components/panels/RendererPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 
 type Props = {
   onCancel: () => void,

src/components/panels/TopLeftPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { UserLocation } from '$components/UserLocation';
+import { UserLocation } from '~/components/UserLocation';
-import { DistanceBar } from '$components/panels/DistanceBar';
+import { DistanceBar } from '~/components/panels/DistanceBar';
 
 export const TopLeftPanel = () => (
   <div className="status-panel top left">

src/components/panels/TopRightPanel.tsx

@@ -1,16 +1,16 @@
 // flow
 import React, { useCallback } from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { PROVIDERS } from '$constants/providers';
+import { PROVIDERS } from '~/constants/providers';
-import { LOGOS } from '$constants/logos';
+import { LOGOS } from '~/constants/logos';
-import * as USER_ACTIONS from '$redux/user/actions';
+import * as USER_ACTIONS from '~/redux/user/actions';
 import { connect } from 'react-redux';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { IRootState } from '$redux/user';
+import { IRootState } from '~/redux/user';
 
-import { Tooltip } from '$components/panels/Tooltip';
+import { Tooltip } from '~/components/panels/Tooltip';
-import { selectMap } from '$redux/map/selectors';
+import { selectMap } from '~/redux/map/selectors';
-import { selectUser } from '$redux/user/selectors';
+import { selectUser } from '~/redux/user/selectors';
 
 const mapStateToProps = state => ({
   map: selectMap(state),

src/components/panels/UserPanel.tsx

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react';
 
-import { GuestButton } from '$components/user/GuestButton';
+import { GuestButton } from '~/components/user/GuestButton';
-import { DEFAULT_USER, IUser, ROLES } from '$constants/auth';
+import { DEFAULT_USER, ROLES } from '~/constants/auth';
-import { UserButton } from '$components/user/UserButton';
+import { UserButton } from '~/components/user/UserButton';
-import { UserMenu } from '$components/user/UserMenu';
+import { UserMenu } from '~/components/user/UserMenu';
 import {
   setUser,
   userLogout,
@@ -13,16 +13,16 @@ import {
   setDialogActive,
   openMapDialog,
   getGPXTrack,
-} from '$redux/user/actions';
+} from '~/redux/user/actions';
 import { connect } from 'react-redux';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 
 import classnames from 'classnames';
-import { CLIENT } from '$config/frontend';
+import { CLIENT } from '~/config/frontend';
-import { DIALOGS, TABS } from '$constants/dialogs';
+import { DIALOGS, TABS } from '~/constants/dialogs';
-import { IRootState } from '$redux/user';
+import { IRootState } from '~/redux/user';
-import { Tooltip } from '$components/panels/Tooltip';
+import { Tooltip } from '~/components/panels/Tooltip';
-import { TitleDialog } from '$components/dialogs/TitleDialog';
+import { TitleDialog } from '~/components/dialogs/TitleDialog';
 
 interface Props extends IRootState {
   userLogout: typeof userLogout;

src/components/renderer/Renderer.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import { hideRenderer, cropAShot } from '$redux/user/actions';
+import { hideRenderer, cropAShot } from '~/redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import Croppr from 'croppr';
 import 'croppr/dist/croppr.css';
-import { LOGOS } from '$constants/logos';
+import { LOGOS } from '~/constants/logos';
-import { RendererPanel } from '$components/panels/RendererPanel';
+import { RendererPanel } from '~/components/panels/RendererPanel';
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { IRoute } from '$redux/map/types';
+import { IRoute } from '~/redux/map/types';
 
 type Props = {
   data: IRootState['renderer']['data'],

src/components/user/GuestButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
 
 type Props = {
   onClick: () => void,

src/components/user/UserButton.tsx

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
-import { UserPicture } from "$components/user/UserPicture";
+import { UserPicture } from "~/components/user/UserPicture";
-import { IUser } from "$constants/auth";
+import { IUser } from "~/constants/auth";
 
 interface Props {
   user: IUser;

src/components/user/UserMenu.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { APP_INFO } from '$constants/app_info';
+import { APP_INFO } from '~/constants/app_info';
-import { userLogout } from "$redux/user/actions";
+import { userLogout } from "~/redux/user/actions";
 
 interface Props {
   userLogout: typeof userLogout,

src/config/frontend.example.js

@@ -1,4 +1,4 @@
-import { DEFAULT_PROVIDER, PROVIDERS } from '$constants/providers';
+import { DEFAULT_PROVIDER, PROVIDERS } from '~/constants/providers';
 import { LatLngLiteral } from 'leaflet';
 
 const PUBLIC_PATH = '';

src/constants/api.ts

@@ -1,4 +1,4 @@
-import { CLIENT } from '$config/frontend';
+import { CLIENT } from '~/config/frontend';
 
 export const API = {
   GET_GUEST: `${CLIENT.API_ADDR}/api/auth/`,

src/constants/stickers.ts

@@ -37,7 +37,7 @@ export interface IStickers {
 export const STICKERS: IStickers = {
   base: {
     title: 'Простые',
-    url: require('$sprites/stickers/stickers-base.svg'),
+    url: require('~/sprites/stickers/stickers-base.svg'),
     size: 72,
     layers: {
       men: { off: 5, title: 'Александр 3', title_long: 'Парк Городское Начало' },
@@ -66,7 +66,7 @@ export const STICKERS: IStickers = {
   },
   real: {
     title: 'Реалистичные',
-    url: require('$sprites/stickers/stickers-base.svg'),
+    url: require('~/sprites/stickers/stickers-base.svg'),
     size: 72,
     layers: {
       chicken: { off: 31, title: 'Курочка', title_long: 'Курочка' },
@@ -80,7 +80,7 @@ export const STICKERS: IStickers = {
   },
   pin: {
     title: 'ПИН-микс',
-    url: require('$sprites/stickers/stickers-base.svg'),
+    url: require('~/sprites/stickers/stickers-base.svg'),
     size: 72,
     layers: {
       start: { off: 21, title: '1', title_long: 'Первая точка' },
@@ -97,7 +97,7 @@ export const STICKERS: IStickers = {
   },
   points: {
     title: 'Точки',
-    url: require('$sprites/stickers/stickers-base.svg'),
+    url: require('~/sprites/stickers/stickers-base.svg'),
     size: 72,
     layers: {
       pt1: { off: 40, title: '1', title_long: 'Первая точка' },

src/containers/App.tsx

@@ -1,25 +1,25 @@
 // @flow
 import React from 'react';
 
-import { EditorPanel } from '$components/panels/EditorPanel';
+import { EditorPanel } from '~/components/panels/EditorPanel';
-import { Fills } from '$components/Fills';
+import { Fills } from '~/components/Fills';
-import { UserPanel } from '$components/panels/UserPanel';
+import { UserPanel } from '~/components/panels/UserPanel';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { hot } from 'react-hot-loader';
-import { Renderer } from '$components/renderer/Renderer';
+import { Renderer } from '~/components/renderer/Renderer';
-import { hideRenderer, setDialogActive } from '$redux/user/actions';
+import { hideRenderer, setDialogActive } from '~/redux/user/actions';
-import { Cursor } from '$components/Cursor';
+import { Cursor } from '~/components/Cursor';
-import { LeftDialog } from '$containers/LeftDialog';
+import { LeftDialog } from '~/containers/LeftDialog';
-import { TopLeftPanel } from '$components/panels/TopLeftPanel';
+import { TopLeftPanel } from '~/components/panels/TopLeftPanel';
-import { TopRightPanel } from '$components/panels/TopRightPanel';
+import { TopRightPanel } from '~/components/panels/TopRightPanel';
-import { LogoPreview } from '$components/logo/LogoPreview';
+import { LogoPreview } from '~/components/logo/LogoPreview';
-import { IStickerPack } from '$constants/stickers';
+import { IStickerPack } from '~/constants/stickers';
-import { IDialogs } from '$constants/dialogs';
+import { IDialogs } from '~/constants/dialogs';
 
-import { Map } from '$containers/map/Map';
+import { Map } from '~/containers/map/Map';
-import { IRootReducer } from '$redux/user';
+import { IRootReducer } from '~/redux/user';
 
 type Props = {
   sticker: string;

src/containers/LeftDialog.tsx

@@ -1,10 +1,10 @@
 import React, { createElement } from 'react';
-import { DIALOGS, IDialogs } from '$constants/dialogs';
+import { DIALOGS, IDialogs } from '~/constants/dialogs';
 import classnames from 'classnames';
-import { AppInfoDialog } from '$components/dialogs/AppInfoDialog';
+import { AppInfoDialog } from '~/components/dialogs/AppInfoDialog';
-import { Icon } from '$components/panels/Icon';
+import { Icon } from '~/components/panels/Icon';
-import { MapListDialog } from '$components/dialogs/MapListDialog';
+import { MapListDialog } from '~/components/dialogs/MapListDialog';
-import * as USER_ACTIONS from '$redux/user/actions';
+import * as USER_ACTIONS from '~/redux/user/actions';
 
 interface Props {
   dialog: keyof IDialogs;

src/containers/map/Map/index.tsx

@@ -5,14 +5,14 @@ import {
   selectMapProvider,
   selectMapRoute,
   selectMapStickers
-} from "$redux/map/selectors";
+} from "~/redux/map/selectors";
 import { connect } from "react-redux";
-import * as MAP_ACTIONS from "$redux/map/actions";
+import * as MAP_ACTIONS from "~/redux/map/actions";
 
-import { Route } from "$containers/map/Route";
+import { Route } from "~/containers/map/Route";
-import { TileLayer } from "$containers/map/TileLayer";
+import { TileLayer } from "~/containers/map/TileLayer";
-import { Stickers } from "$containers/map/Stickers";
+import { Stickers } from "~/containers/map/Stickers";
-import { selectUserEditing } from '$redux/user/selectors'
+import { selectUserEditing } from '~/redux/user/selectors'
 
 import 'leaflet/dist/leaflet.css';
 

src/containers/map/Route/index.tsx

@@ -6,8 +6,8 @@ import React, {
   useCallback
 } from "react";
 import { IMapRoute, ILatLng } from "../../../redux/map/types";
-import { InteractivePoly } from "$modules/InteractivePoly"; 
+import { InteractivePoly } from "~/modules/InteractivePoly"; 
-import { isMobile } from "$utils/window";
+import { isMobile } from "~/utils/window";
 import { LatLng, Map } from "leaflet";
 
 interface IProps {

src/containers/map/Sticker/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { Map, marker, Marker } from "leaflet";
-import { IStickerDump } from "$redux/map/types";
+import { IStickerDump } from "~/redux/map/types";
-import { STICKERS } from "$constants/stickers";
+import { STICKERS } from "~/constants/stickers";
-import { StickerDesc } from "$components/StickerDesc";
+import { StickerDesc } from "~/components/StickerDesc";
 import classNames from "classnames";
-import { DomMarker } from "$utils/DomMarker";
+import { DomMarker } from "~/utils/DomMarker";
 import { createPortal } from "react-dom";
 
 interface IProps {

src/containers/map/Stickers/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { IStickerDump } from '$redux/map/types';
+import { IStickerDump } from '~/redux/map/types';
 import { FeatureGroup, Map } from 'leaflet';
-import { Sticker } from '$containers/map/Sticker';
+import { Sticker } from '~/containers/map/Sticker';
-import { mapSetSticker, mapDropSticker } from '$redux/map/actions';
+import { mapSetSticker, mapDropSticker } from '~/redux/map/actions';
 
 interface IProps {
   stickers: IStickerDump[];

src/containers/map/TileLayer/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { TileContext } from "../../../utils/context";
 import { TileLayer as TileLayerInterface, tileLayer, Map } from "leaflet";
-import { DEFAULT_PROVIDER, PROVIDERS } from "$constants/providers";
+import { DEFAULT_PROVIDER, PROVIDERS } from "~/constants/providers";
-import { IMapReducer } from "$redux/map";
+import { IMapReducer } from "~/redux/map";
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   provider: IMapReducer['provider'],

src/index.tsx

@@ -1,88 +1,13 @@
-/*
-  ## FEATURES
-  todo screenshots with dot losing .png extension
-  todo refactor reducer to use is_ prefix for editing and etc (mb move them to status object)
-  todo tower sticker
-  done route description
-  done setup deploy
-
-  skip polyline editing only in manual mode (or by click)
-  todo selecting logo on crop
-
-  todo network operations notify
-    done delayed notify (delay(2000).then(showLoadingMsg))
-    todo network error notifications
-    todo check canvas support at startup
-    done check osrm is up
-
-  ## DONE
-
-  done arrows on screenshot
-  done public maps
-    done editing map on map list
-    done setting map public on map list
-
-  done routing spinner
-  done maybe: stickers clusterization?
-  done moving out the screen makes stickers editable again
-
-  done check if osrm available
-  done selecting map on dialog in edit mode opens it at view mode
-  done make arrows and distance points
-
-  done fix arrows (can't reproduce now :-( )
-  done adding route, applying it and adding again and deleting it makes ghost points on the map
-
-  done adding/removing points doesn't change distance
-  done cancelling editing someone's else map return back to it's original address /razminochnyj/
-  done change title on route opening
-  done delete sticker icon
-
-  done tooltips for panel items
-  done map catalogue
-    done public maps
-    done map search
-    done map list lazy loading
-
-  done save spinner
-  done better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline
-    done update after point delete
-    done hidden markers tooltip
-
-  done clear routing on editing cancellation
-  done riding speed slider
-  done dont close map list on click
-  done fix loaded stickers has wrong text placement for right-sided captions
-  done fix save button should not react to clicks
-  done stickers with empty text should not have blackbox at view mode
-  done add ability to copy-paste address after saving
-
-  done hide sticker dialog on sticker selection
-    done separate mode for sticker selection
-  done TEST: set initialData after saving map, clear is-modified
-  done TEST: provider / logo triggers setChanged
-  done shot mechanism (100%)
-    done client-side shot mechanism
-    done croppr.js
-    done shot stickers
-    done progress
-  done hotkeys via sagas
-  done better loader screen
-    done network errors handling on startup
-
-  done stickers drag on rotate bug
- */
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { App } from '$containers/App';
+import { App } from '~/containers/App';
-import '$styles/main.less';
+import '~/styles/main.less';
 
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { configureStore } from '$redux/store';
+import { configureStore } from '~/redux/store';
-import { pushLoaderState } from '$utils/history';
+import { pushLoaderState } from '~/utils/history';
 
 const { store, persistor } = configureStore();
 

src/modules/InteractivePoly.ts

@@ -18,7 +18,7 @@ import {
   LatLngLiteral
 } from "leaflet"; 
 
-import { distKm, distToSegment, getPolyLength, pointInArea } from "$utils/geom";
+import { distKm, distToSegment, getPolyLength, pointInArea } from "~/utils/geom";
 
 interface InteractivePolylineOptions extends PolylineOptions {
   maxMarkers?: number;

src/redux/map/actions.ts

@@ -1,6 +1,6 @@
 import { MAP_ACTIONS } from './constants';
 import { IMapReducer } from './';
-import { IStickerDump } from '$redux/map/types';
+import { IStickerDump } from '~/redux/map/types';
 import { ILatLng } from './types';
 
 export const mapSet = (map: Partial<IMapReducer>) => ({

src/redux/map/index.ts

@@ -1,9 +1,9 @@
 import { createReducer } from 'reduxsauce';
 import { MAP_HANDLERS } from './handlers';
-import { DEFAULT_PROVIDER } from '$constants/providers';
+import { DEFAULT_PROVIDER } from '~/constants/providers';
 import { IMapRoute } from './types';
-import { IStickerDump } from '$redux/map/types';
+import { IStickerDump } from '~/redux/map/types';
-import { DEFAULT_LOGO } from '$constants/logos';
+import { DEFAULT_LOGO } from '~/constants/logos';
 
 export interface IMapReducer {
   provider: string;

src/redux/map/sagas.ts

@@ -1,8 +1,8 @@
 import { takeEvery, select, put, call, TakeEffect, race, take, takeLatest } from 'redux-saga/effects';
 import { MAP_ACTIONS } from './constants';
 import { mapClicked, mapAddSticker, mapSetProvider, mapSet, mapSetTitle, mapSetAddress, mapSetDescription, mapSetOwner, mapSetPublic } from './actions';
-import { selectUserMode, selectUserActiveSticker, selectUser, selectUserUser } from '$redux/user/selectors';
+import { selectUserMode, selectUserActiveSticker, selectUser, selectUserUser } from '~/redux/user/selectors';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
 import {
   setMode,
   setChanged,
@@ -15,15 +15,15 @@ import {
   sendSaveRequest,
   setSaveSuccess,
   setSaveOverwrite,
-} from '$redux/user/actions';
+} from '~/redux/user/actions';
-import { pushLoaderState, getUrlData, pushPath, replacePath } from '$utils/history';
+import { pushLoaderState, getUrlData, pushPath, replacePath } from '~/utils/history';
-import { setReadySaga, searchSetSagaWorker } from '$redux/user/sagas';
+import { setReadySaga, searchSetSagaWorker } from '~/redux/user/sagas';
-import { getStoredMap, postMap } from '$utils/api';
+import { getStoredMap, postMap } from '~/utils/api';
-import { Unwrap } from '$utils/middleware';
+import { Unwrap } from '~/utils/middleware';
-import { DEFAULT_PROVIDER } from '$constants/providers';
+import { DEFAULT_PROVIDER } from '~/constants/providers';
-import { USER_ACTIONS } from '$redux/user/constants';
+import { USER_ACTIONS } from '~/redux/user/constants';
 import { selectMap } from './selectors';
-import { TIPS } from '$constants/tips';
+import { TIPS } from '~/constants/tips';
 import { delay } from 'redux-saga';
 
 function* onMapClick({ latlng }: ReturnType<typeof mapClicked>) {

src/redux/map/selectors.ts

@@ -1,4 +1,4 @@
-import { IState } from "$redux/store";
+import { IState } from "~/redux/store";
 
 export const selectMap = (state: IState) => state.map;
 export const selectMapProvider = (state: IState) => state.map.provider;

src/redux/map/types.ts

@@ -1,5 +1,5 @@
 import { LatLng } from 'leaflet';
-import { IRoutePoint } from '$utils/gpx';
+import { IRoutePoint } from '~/utils/gpx';
 
 export type ILatLng = {
   lat: number;

src/redux/store.ts

@@ -4,13 +4,13 @@ import { persistStore, persistReducer } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
 import createSagaMiddleware from 'redux-saga';
 
-import { userReducer, IRootReducer } from '$redux/user';
+import { userReducer, IRootReducer } from '~/redux/user';
-import { userSaga } from '$redux/user/sagas';
+import { userSaga } from '~/redux/user/sagas';
-import { mapSaga } from '$redux/map/sagas';
+import { mapSaga } from '~/redux/map/sagas';
 import { createBrowserHistory } from 'history';
-import { locationChanged } from '$redux/user/actions';
+import { locationChanged } from '~/redux/user/actions';
 import { PersistConfig, Persistor } from "redux-persist/es/types";
-import { map, IMapReducer } from '$redux/map';
+import { map, IMapReducer } from '~/redux/map';
 
 const userPersistConfig: PersistConfig = {
   key: 'user',

src/redux/user/actions.ts

@@ -1,7 +1,7 @@
-import { USER_ACTIONS } from '$redux/user/constants';
+import { USER_ACTIONS } from '~/redux/user/constants';
-import { IUser } from "$constants/auth";
+import { IUser } from "~/constants/auth";
-import { IRootState } from "$redux/user";
+import { IRootState } from "~/redux/user";
-import { IRoute } from '$redux/map/types';
+import { IRoute } from '~/redux/map/types';
 
 export const setUser = (user: IUser) => ({ type: USER_ACTIONS.SET_USER, user });
 export const userLogout = () => ({ type: USER_ACTIONS.USER_LOGOUT });

src/redux/user/handlers.ts

@@ -1,7 +1,7 @@
 import { IRootState } from ".";
 import * as ActionCreators from './actions'
-import { TIPS } from "$constants/tips";
+import { TIPS } from "~/constants/tips";
-import { TABS } from "$constants/dialogs";
+import { TABS } from "~/constants/dialogs";
 import { USER_ACTIONS } from "./constants";
 
 type UnsafeReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

src/redux/user/index.ts

@@ -1,8 +1,8 @@
 import { createReducer } from 'reduxsauce';
-import { DEFAULT_USER, IUser } from '$constants/auth';
+import { DEFAULT_USER, IUser } from '~/constants/auth';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { DIALOGS, IDialogs } from '$constants/dialogs';
+import { DIALOGS, IDialogs } from '~/constants/dialogs';
-import { IStickers } from "$constants/stickers";
+import { IStickers } from "~/constants/stickers";
 import { USER_HANDLERS } from './handlers';
 
 export interface IRouteListItem {

src/redux/user/sagas.ts

@@ -17,7 +17,7 @@ import {
   getRouteList,
   modifyRoute,
   sendRouteStarred,
-} from '$utils/api';
+} from '~/utils/api';
 import {
   hideRenderer,
   searchPutRoutes,
@@ -38,7 +38,7 @@ import {
   setFeature,
   searchSetTitle,
   setRouteStarred,
-} from '$redux/user/actions';
+} from '~/redux/user/actions';
 
 import {
   getUrlData,
@@ -46,10 +46,10 @@ import {
   pushLoaderState,
   pushNetworkInitError,
   pushPath,
-} from '$utils/history';
+} from '~/utils/history';
-import { USER_ACTIONS } from '$redux/user/constants';
+import { USER_ACTIONS } from '~/redux/user/constants';
-import { MODES } from '$constants/modes';
+import { MODES } from '~/constants/modes';
-import { DEFAULT_USER } from '$constants/auth';
+import { DEFAULT_USER } from '~/constants/auth';
 import {
   composeArrows,
   composeDistMark,
@@ -62,18 +62,18 @@ import {
   getStickersPlacement,
   getTilePlacement,
   imageFetcher,
-} from '$utils/renderer';
+} from '~/utils/renderer';
-import { LOGOS } from '$constants/logos';
+import { LOGOS } from '~/constants/logos';
-import { DIALOGS, TABS } from '$constants/dialogs';
+import { DIALOGS, TABS } from '~/constants/dialogs';
 
-import * as ActionCreators from '$redux/user/actions';
+import * as ActionCreators from '~/redux/user/actions';
-import { downloadGPXTrack, getGPXString } from '$utils/gpx';
+import { downloadGPXTrack, getGPXString } from '~/utils/gpx';
-import { Unwrap } from '$utils/middleware';
+import { Unwrap } from '~/utils/middleware';
-import { IState } from '$redux/store';
+import { IState } from '~/redux/store';
 import { selectUser, selectUserUser } from './selectors';
-import { mapInitSaga, loadMapSaga, replaceAddressIfItsBusy } from '$redux/map/sagas';
+import { mapInitSaga, loadMapSaga, replaceAddressIfItsBusy } from '~/redux/map/sagas';
 import { LatLng } from 'leaflet';
-import { selectMap } from '$redux/map/selectors';
+import { selectMap } from '~/redux/map/selectors';
 
 // const getUser = (state: IState) => state.user.user;
 // const selectUser = (state: IState) => state.user;

src/redux/user/selectors.ts

@@ -1,4 +1,4 @@
-import { IState } from '$redux/store'
+import { IState } from '~/redux/store'
 
 export const selectUser = (state: IState) => state.user;
 export const selectUserUser = (state: IState) => state.user.user;

src/utils/api.ts

@@ -1,8 +1,8 @@
 import axios from 'axios/index';
-import { API } from '$constants/api';
+import { API } from '~/constants/api';
-import { IRootState, IRouteListItem } from '$redux/user';
+import { IRootState, IRouteListItem } from '~/redux/user';
-import { IUser } from '$constants/auth';
+import { IUser } from '~/constants/auth';
-import { CLIENT } from '$config/frontend';
+import { CLIENT } from '~/config/frontend';
 import { LatLngLiteral } from 'leaflet';
 import {
   resultMiddleware,
@@ -10,7 +10,7 @@ import {
   IResultWithStatus,
   configWithToken,
 } from './middleware';
-import { IRoute } from '$redux/map/types';
+import { IRoute } from '~/redux/map/types';
 
 const arrayToObject = (array: any[], key: string): {} =>
   array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});

src/utils/arrow.ts

@@ -1,6 +1,6 @@
 import { divIcon, LatLngLiteral, Marker, marker, DivIcon } from "leaflet";
 
-const arrow_image = require('$sprites/arrow.svg');
+const arrow_image = require('~/sprites/arrow.svg');
 
 // <use xlink:href="#path-arrow" transform="scale(2) translate(5 -2)"/>
 export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => marker(latlng, {

src/utils/history.ts

@@ -1,5 +1,5 @@
-import { history } from '$redux/store';
+import { history } from '~/redux/store';
-import {API_RETRY_INTERVAL} from "$constants/api";
+import {API_RETRY_INTERVAL} from "~/constants/api";
 
 interface IUrlData {
   path: string,

src/utils/renderer.ts

@@ -1,19 +1,19 @@
-// import { editor } from '$modules/Editor';
+// import { editor } from '~/modules/Editor';
-import { COLORS, CLIENT } from '$config/frontend';
+import { COLORS, CLIENT } from '~/config/frontend';
 import saveAs from 'file-saver';
-import { replaceProviderUrl } from '$constants/providers';
+import { replaceProviderUrl } from '~/constants/providers';
-import { STICKERS } from '$constants/stickers';
+import { STICKERS } from '~/constants/stickers';
-import { ILatLng, IRoute } from '$redux/map/types';
+import { ILatLng, IRoute } from '~/redux/map/types';
-import { IStickerDump } from '$redux/map/types';
+import { IStickerDump } from '~/redux/map/types';
-import { IRootState } from '$redux/user';
+import { IRootState } from '~/redux/user';
 import {
   angleBetweenPoints,
   angleBetweenPointsRad,
   findDistancePx,
   middleCoordPx,
-} from '$utils/geom';
+} from '~/utils/geom';
 import { Point } from 'leaflet';
-import { MainMap } from '$containers/map/Map';
+import { MainMap } from '~/containers/map/Map';
 
 export interface ITilePlacement {
   minX: number;
@@ -215,7 +215,7 @@ export const composeArrows = async ({
   points: Point[];
   ctx: CanvasRenderingContext2D;
 }): Promise<boolean[]> => {
-  const image = await imageFetcher(require('$sprites/arrow.svg'));
+  const image = await imageFetcher(require('~/sprites/arrow.svg'));
 
   const distances = points.map(
     (point, i) => (points[i + 1] && findDistancePx(points[i], points[i + 1])) || 0

src/utils/simplify.ts

@@ -1,5 +1,5 @@
 import { Map, LineUtil } from 'leaflet';
-import { ILatLng } from "$redux/map/types";
+import { ILatLng } from "~/redux/map/types";
 
 export const simplify = ({ map, latlngs }: { map: Map, latlngs: ILatLng[] }): ILatLng[] => {
   const points = [];

src/utils/window.ts

@@ -1,3 +1,3 @@
-import { MOBILE_BREAKPOINT } from '$config/frontend';
+import { MOBILE_BREAKPOINT } from '~/config/frontend';
 
 export const isMobile = (): boolean => (window.innerWidth <= MOBILE_BREAKPOINT);

tsconfig.json

@@ -13,15 +13,7 @@
     "isolatedModules": true,
     "baseUrl": ".",
     "paths": {
-      "$components/*": [ "src/components/*" ],
+      "~/*": [ "src/*" ],
-      "$containers/*": [ "src/containers/*" ],
-      "$constants/*": [ "src/constants/*" ],
-      "$sprites/*": [ "src/sprites/*" ],
-      "$config/*": [ "./config/*" ],
-      "$styles/*": [ "src/styles/*" ],
-      "$redux/*": [ "src/redux/*" ],
-      "$utils/*": [ "src/utils/*" ],
-      "$modules/*": [ "src/modules/*" ],
       "custom_modules/*": [
         "src/custom_modules/*"
       ]

webpack.config.js

@@ -1,22 +1,15 @@
-// import { CLIENT } from './config/frontend';
 const webpack = require('webpack');
 
 const HtmlWebPackPlugin = require('html-webpack-plugin');
-// const FlowWebpackPlugin = require('flow-webpack-plugin');
-// const { version } = require('./package.json');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-// const WebpackGitHash = require('webpack-git-hash');
 const path = require('path');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
-// import webpack from 'webpack';
+const PWA_CONFIG = require('./src/config/pwa');
-const PWA_CONFIG = require('./config/pwa');
-// const ManifestPlugin = require('webpack-manifest-plugin');
-/* Plugins */
 
-// const concatPlugin = new webpack.optimize.ModuleConcatenationPlugin();
+/* Plugins */
 
 const htmlPlugin = new HtmlWebPackPlugin({
   template: './src/index.html',
@@ -35,24 +28,20 @@ const miniCssExractPlugin = new MiniCssExtractPlugin({
 
 const devtool = isDevelopment ? 'cheap-module-eval-source-map' : 'source-map';
 
-// const flowPlugin = new FlowWebpackPlugin();
-
-// const gitPlugin = new WebpackGitHash();
-
-
 /* Resolve */
 
 const resolve = {
   alias: {
-    $components: path.join(__dirname, 'src/components'),
+    // $components: path.join(__dirname, 'src/components'),
-    $containers: path.join(__dirname, 'src/containers'),
+    // $containers: path.join(__dirname, 'src/containers'),
-    $constants: path.join(__dirname, 'src/constants'),
+    // $constants: path.join(__dirname, 'src/constants'),
-    $sprites: path.join(__dirname, 'src/sprites'),
+    // $sprites: path.join(__dirname, 'src/sprites'),
-    $config: path.join(__dirname, './config'),
+    // $config: path.join(__dirname, './config'),
-    $styles: path.join(__dirname, 'src/styles'),
+    // $styles: path.join(__dirname, 'src/styles'),
-    $redux: path.join(__dirname, 'src/redux'),
+    // $redux: path.join(__dirname, 'src/redux'),
-    $utils: path.join(__dirname, 'src/utils'),
+    // $utils: path.join(__dirname, 'src/utils'),
-    $modules: path.join(__dirname, 'src/modules'),
+    // $modules: path.join(__dirname, 'src/modules'),
+    '~': path.join(__dirname, 'src'),
   },
   extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json']
 };