⚠️ Use alias Rollup plugin to omit full imports

- Define entries (utils, animations, etc) in the Rollup config in order to omit the whole back path (../../) when importing a file
- Global revoleExtensions in the config (to avoid duplicates)

package.json

@@ -33,6 +33,7 @@
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/runtime": "^7.9.2",
+    "@rollup/plugin-alias": "^3.0.1",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ devDependencies:
   '@babel/plugin-transform-runtime': 7.9.0_@babel+core@7.9.0
   '@babel/preset-env': 7.9.0_@babel+core@7.9.0
   '@babel/runtime': 7.9.2
+  '@rollup/plugin-alias': 3.0.1_rollup@2.3.0
   '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.0
   '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.0
   '@rollup/plugin-replace': 2.3.1_rollup@2.3.0
@@ -891,6 +892,15 @@ packages:
     dev: false
     resolution:
       integrity: sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA==
+  /@rollup/plugin-alias/3.0.1_rollup@2.3.0:
+    dependencies:
+      rollup: 2.3.0
+      slash: 3.0.0
+    dev: true
+    peerDependencies:
+      rollup: ^1.20.0
+    resolution:
+      integrity: sha512-ReSy6iPl3GsWLMNeshXAfgItZFMoMOTYC7MZQQM5va4pqxiGgwl1xZUZfHW6zGyZPK+k8TBadxx+kdmepiUa+g==
   /@rollup/plugin-commonjs/11.0.2_rollup@2.3.0:
     dependencies:
       '@rollup/pluginutils': 3.0.8_rollup@2.3.0
@@ -3963,6 +3973,12 @@ packages:
       node: '>= 6'
     resolution:
       integrity: sha512-dQbZnsMaIiTQPZmbGmktz+c74zt/hyrJEB4tdp2Jj0RNv9J6B/OWR5RyrZEvIn9fyh9Zlg2OlE2XzKz6wMKGAw==
+  /slash/3.0.0:
+    dev: true
+    engines:
+      node: '>=8'
+    resolution:
+      integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
   /slice-ansi/2.1.0:
     dependencies:
       ansi-styles: 3.2.1
@@ -4515,6 +4531,7 @@ specifiers:
   '@babel/plugin-transform-runtime': ^7.9.0
   '@babel/preset-env': ^7.9.0
   '@babel/runtime': ^7.9.2
+  '@rollup/plugin-alias': ^3.0.1
   '@rollup/plugin-commonjs': ^11.0.2
   '@rollup/plugin-node-resolve': ^7.1.1
   '@rollup/plugin-replace': ^2.3.1

rollup.config.js

@@ -1,4 +1,6 @@
+import path from 'path'
 import resolve from '@rollup/plugin-node-resolve'
+import alias from '@rollup/plugin-alias'
 import replace from '@rollup/plugin-replace'
 import commonjs from '@rollup/plugin-commonjs'
 import svelte from 'rollup-plugin-svelte'
@@ -32,6 +34,19 @@ const preprocess = autoPreprocess({
     postcss: true
 })
 
+// Resolve and Alias
+const resolveExtensions = ['.mjs', '.js', '.svelte', '.scss', '.json', '.html']
+const aliases = alias({
+    resolve: resolveExtensions,
+    entries: [
+        { find: 'utils', replacement: path.resolve(__dirname, 'src/utils') },
+        { find: 'animations', replacement: path.resolve(__dirname, 'src/animations') },
+        { find: 'atoms', replacement: path.resolve(__dirname, 'src/atoms') },
+        { find: 'molecules', replacement: path.resolve(__dirname, 'src/molecules') },
+        { find: 'organisms', replacement: path.resolve(__dirname, 'src/organisms') },
+    ]
+})
+
 
 export default {
     /*
@@ -53,15 +68,16 @@ export default {
                 emitCss: true,
                 // css: css => css.write('static/bundle.css')
             }),
+            aliases,
             resolve({
                 browser: true,
-                extensions: ['.mjs', '.js', '.svelte', '.scss', '.json', '.html'],
+                extensions: resolveExtensions,
                 dedupe: ['svelte']
             }),
             commonjs(),
             // dev && eslint(),
             legacy && babel({
-                extensions: ['.js', '.mjs', '.html', '.svelte'],
+                extensions: resolveExtensions,
                 exclude: ['*.scss', '*.css', 'node_modules/@babel/**'],
                 runtimeHelpers: true
             }),
@@ -92,12 +108,13 @@ export default {
                 preprocess,
                 generate: 'ssr'
             }),
+            aliases,
             resolve({
                 browser: true,
-                extensions: ['.mjs', '.js', '.json', '.html', '.svelte', '.scss'],
+                extensions: resolveExtensions,
                 dedupe: ['svelte']
             }),
-            commonjs(),
+            commonjs()
         ],
         external: Object.keys(pkg.dependencies).concat(
             require('module').builtinModules || Object.keys(process.binding('natives'))
@@ -114,6 +131,7 @@ export default {
     // 	output: sapperConfig.serviceworker.output(),
     // 	plugins: [
     // 		resolve(),
+    //      aliases,
     // 		replace({
     // 			'process.browser': true,
     // 			...replaceOptions

src/animations/Carousel.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from '../utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*

src/animations/Locations.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from '../utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*

src/animations/Photo.js

@@ -1,8 +1,8 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import imagesLoaded from 'imagesloaded'
-import { animDuration, animDurationLong } from '../utils/store'
-import { throttle, parallaxAnime } from '../utils/functions'
+import { animDuration, animDurationLong } from 'utils/store'
+import { throttle, parallaxAnime } from 'utils/functions'
 
 
 /*

src/animations/TitleSite.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from '../utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*

src/animations/Transition.js

@@ -1,5 +1,5 @@
 import anime from 'animejs'
-import { animDuration, animDurationLong } from '../utils/store'
+import { animDuration, animDurationLong } from 'utils/store'
 
 
 /*

src/animations/index.js

@@ -1,7 +1,7 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration } from '../utils/store'
-import { throttle, parallaxAnime } from '../utils/functions'
+import { animDuration } from 'utils/store'
+import { throttle, parallaxAnime } from 'utils/functions'
 
 
 /*

src/animations/page.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { animDuration, animDurationLong } from '../utils/store'
+import { animDuration, animDurationLong } from 'utils/store'
 
 
 /*

src/animations/place.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 // import ScrollOut from 'scroll-out'
-import { animDuration } from '../utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*

src/animations/viewer.js

@@ -1,5 +1,5 @@
 import anime from 'animejs'
-import { animDuration } from '../utils/store'
+import { animDuration } from 'utils/store'
 
 
 /*

src/atoms/IconGlobe.svelte

@@ -1,6 +1,6 @@
 <script>
     import { stores } from '@sapper/app'
-    import { randomString } from '../utils/functions'
+    import { randomString } from 'utils/functions'
     const { page } = stores()
 
     // Props

src/atoms/IconGlobeSmall.svelte

@@ -1,6 +1,6 @@
 <script>
     import { stores } from '@sapper/app'
-    import { randomString } from '../utils/functions'
+    import { randomString } from 'utils/functions'
     const { page } = stores()
 
     // Props

src/atoms/TitleSite.svelte

@@ -1,9 +1,9 @@
 <script>
     import { onMount } from 'svelte'
-    import { charsToSpan } from '../utils/functions'
+    import { charsToSpan } from 'utils/functions'
 
     // Animations
-    import { animateIn } from '../animations/TitleSite'
+    import { animateIn } from 'animations/TitleSite'
 
     // Variables
     let scope

src/molecules/InteractiveGlobe.svelte

@@ -4,7 +4,7 @@
     // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
 
     import { onMount } from 'svelte'
-    import { locations } from '../utils/store'
+    import { locations } from 'utils/store'
 
 
     // Props

src/molecules/Photo.svelte

@@ -1,10 +1,10 @@
 <script>
     import { onMount } from 'svelte'
-    import { site, currentLocation } from '../utils/store'
-    import { getThumbnail, formatDate } from '../utils/functions'
+    import { site, currentLocation } from 'utils/store'
+    import { getThumbnail, formatDate } from 'utils/functions'
 
     // Animations
-    import { animateIn } from '../animations/Photo'
+    import { animateIn } from 'animations/Photo'
 
     // Props and variables
     export let photo

src/molecules/Switcher.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { currentLocation } from '../utils/store'
+    import { currentLocation } from 'utils/store'
 
     // Components
-    import IconGlobe from '../atoms/IconGlobe'
+    import IconGlobe from 'atoms/IconGlobe'
 
     // Props
     export let type = ''

src/organisms/Carousel.svelte

@@ -1,19 +1,19 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
     import { stores } from '@sapper/app'
-    import { currentLocation, fullscreen } from '../utils/store'
-    import { getThumbnail, formatDate } from '../utils/functions'
+    import { currentLocation, fullscreen } from 'utils/store'
+    import { getThumbnail, formatDate } from 'utils/functions'
 
     // Dependencies
     import SwipeListener from 'swipe-listener'
 
     // Animations
-    import { animateIn } from '../animations/Carousel'
+    import { animateIn } from 'animations/Carousel'
 
     // Components
-    import IconArrow from '../atoms/IconArrow'
-    import Counter from '../atoms/Counter'
-    import PaginationDots from '../molecules/PaginationDots'
+    import IconArrow from 'atoms/IconArrow'
+    import Counter from 'atoms/Counter'
+    import PaginationDots from 'molecules/PaginationDots'
 
     // Props
     export let photos

src/organisms/Footer.svelte

@@ -1,10 +1,10 @@
 <script>
     // Svelte
-    import { site, currentLocation } from '../utils/store'
+    import { site, currentLocation } from 'utils/store'
 
     // Components
-    import LinkTranslate from '../atoms/LinkTranslate'
-    import Switcher from '../molecules/Switcher'
+    import LinkTranslate from 'atoms/LinkTranslate'
+    import Switcher from 'molecules/Switcher'
 </script>
 
 <footer class="footer">

src/organisms/Fullscreen.svelte

@@ -1,13 +1,13 @@
 <script>
-    import { fullscreen } from '../utils/store'
-    import { throttle, getThumbnail } from '../utils/functions'
+    import { fullscreen } from 'utils/store'
+    import { throttle, getThumbnail } from 'utils/functions'
 
     // Dependencies
     import imagesLoaded from 'imagesloaded'
 
     // Components
-    import IconGlobe from '../atoms/IconGlobe'
-    import IconZoomOut from '../atoms/IconZoomOut'
+    import IconGlobe from 'atoms/IconGlobe'
+    import IconZoomOut from 'atoms/IconZoomOut'
 
     // Variables
     let scope

src/organisms/Locations.svelte

@@ -1,16 +1,16 @@
 <script>
     import { onMount } from 'svelte'
     import { flip } from 'svelte/animate'
-    import { receive, send } from '../animations/crossfade'
-    import { locations, countries, continents } from '../utils/store'
-    import { throttle } from '../utils/functions'
+    import { receive, send } from 'animations/crossfade'
+    import { locations, countries, continents } from 'utils/store'
+    import { throttle } from 'utils/functions'
 
     // Components
-    import Button from '../atoms/Button'
-    import Location from '../molecules/Location'
+    import Button from 'atoms/Button'
+    import Location from 'molecules/Location'
 
     // Animations
-    import { animateIn } from '../animations/Locations'
+    import { animateIn } from 'animations/Locations'
 
     // Variables
     const transitionDuration = 800

src/organisms/Pagination.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte'
-    import { currentLocation } from '../utils/store'
+    import { currentLocation } from 'utils/store'
     const dispatch = createEventDispatcher()
 
     // Props

src/routes/_error.svelte

@@ -1,12 +1,12 @@
 <script>
-    import { site } from '../utils/store'
+    import { site } from 'utils/store'
 
     // Components
-    import IconArrow from '../atoms/IconArrow'
-    import TitleSite from '../atoms/TitleSite'
-    import Button from '../atoms/Button'
-    import InteractiveGlobe from '../molecules/InteractiveGlobe'
-    import Footer from '../organisms/Footer'
+    import IconArrow from 'atoms/IconArrow'
+    import TitleSite from 'atoms/TitleSite'
+    import Button from 'atoms/Button'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Footer from 'organisms/Footer'
 
     // Props
     export let status

src/routes/_layout.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-    import { apiEndpoints, } from '../utils/store'
+    import { apiEndpoints } from 'utils/store'
 
     export async function preload (page, session) {
         const req = await this.fetch(apiEndpoints.gql, {
@@ -71,11 +71,11 @@
         continents,
         countries,
         locations
-    } from '../utils/store'
+    } from 'utils/store'
 
     // Components
-    import Transition from '../utils/Transition'
-    import AnalyticsTracker from '../utils/AnalyticsTracker'
+    import Transition from 'utils/Transition'
+    import AnalyticsTracker from 'utils/AnalyticsTracker'
 
     // Variables
     const { page } = stores()

src/routes/choose.svelte

@@ -7,18 +7,18 @@
         currentPhotos,
         pageReady,
         pageTransition
-    } from '../utils/store'
+    } from 'utils/store'
 
     // Components
-    import IconArrow from '../atoms/IconArrow'
-    import TitleSite from '../atoms/TitleSite'
-    import Globe from '../molecules/InteractiveGlobe'
-    import Locations from '../organisms/Locations'
-    import Footer from '../organisms/Footer'
-    import SocialMetas from '../utils/SocialMetas'
+    import IconArrow from 'atoms/IconArrow'
+    import TitleSite from 'atoms/TitleSite'
+    import Globe from 'molecules/InteractiveGlobe'
+    import Locations from 'organisms/Locations'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
 
     // Animations
-    import { animateIn } from '../animations/page'
+    import { animateIn } from 'animations/page'
     pageTransition.onAnimationEnd = animateIn
 
     // Variables

src/routes/credits.svelte

@@ -1,18 +1,18 @@
 <script>
     import { onMount } from 'svelte'
     import { stores } from '@sapper/app'
-    import { site, pageReady, pageTransition } from '../utils/store'
+    import { site, pageReady, pageTransition } from 'utils/store'
 
     // Components
-    import IconArrow from '../atoms/IconArrow'
-    import TitleSite from '../atoms/TitleSite'
-    import LinkTranslate from '../atoms/LinkTranslate'
-    import InteractiveGlobe from '../molecules/InteractiveGlobe'
-    import Footer from '../organisms/Footer'
-    import SocialMetas from '../utils/SocialMetas'
+    import IconArrow from 'atoms/IconArrow'
+    import TitleSite from 'atoms/TitleSite'
+    import LinkTranslate from 'atoms/LinkTranslate'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
 
     // Animations
-    import { animateIn } from '../animations/page'
+    import { animateIn } from 'animations/page'
     pageTransition.onAnimationEnd = animateIn
 
     // Variables

src/routes/index.svelte

@@ -1,6 +1,4 @@
 <script context="module">
-	import { site, apiEndpoints } from '../utils/store'
-
     // Variables
     let limit
 
@@ -29,30 +27,32 @@
     import { onMount } from 'svelte'
     import { stores } from '@sapper/app'
     import {
+        apiEndpoints,
+        site,
         currentLocation,
         currentPhotos,
         pageReady,
         pageTransition
-    } from '../utils/store'
-    import { charsToSpan } from '../utils/functions'
+    } from 'utils/store'
+    import { charsToSpan } from 'utils/functions'
 
     // Dependencies
     import zenscroll from 'zenscroll'
 
     // Components
-    import Button from '../atoms/Button'
-    import IconGlobeSmall from '../atoms/IconGlobeSmall'
-    import IconGlobe from '../atoms/IconGlobe'
-    import InteractiveGlobe from '../molecules/InteractiveGlobe'
-    import Carousel from '../organisms/Carousel'
-    import Fullscreen from '../organisms/Fullscreen'
-    import Locations from '../organisms/Locations'
-    import Footer from '../organisms/Footer'
-    import SocialMetas from '../utils/SocialMetas'
-    import Transition from '../utils/Transition'
+    import Button from 'atoms/Button'
+    import IconGlobeSmall from 'atoms/IconGlobeSmall'
+    import IconGlobe from 'atoms/IconGlobe'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Carousel from 'organisms/Carousel'
+    import Fullscreen from 'organisms/Fullscreen'
+    import Locations from 'organisms/Locations'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
+    import Transition from 'utils/Transition'
 
     // Animations
-    import { animateIn } from '../animations/index'
+    import { animateIn } from 'animations/index'
     pageTransition.onAnimationEnd = animateIn
 
     // Props and variables

src/routes/location/[country]/[place].svelte

@@ -1,5 +1,5 @@
 <script context="module">
-    import { apiEndpoints } from '../../../utils/store'
+    import { apiEndpoints } from 'utils/store'
 
     // Preload data
     export async function preload (page, session) {
@@ -30,25 +30,25 @@
         currentPhotos,
         pageReady,
         pageTransition
-    } from '../../../utils/store'
-    import { formatDate, relativeTime, getThumbnail } from '../../../utils/functions'
+    } from 'utils/store'
+    import { formatDate, relativeTime, getThumbnail } from 'utils/functions'
 
     // Dependencies
     import lazySizes from 'lazysizes'
 
     // Components
-    import IconGlobe from '../../../atoms/IconGlobe'
-    import IconGlobeSmall from '../../../atoms/IconGlobeSmall'
-    import LinkChange from '../../../atoms/LinkChange'
-    import ToggleLayout from '../../../atoms/ToggleLayout'
-    import Photo from '../../../molecules/Photo'
-    import Switcher from '../../../molecules/Switcher'
-    import Pagination from '../../../organisms/Pagination'
-    import Footer from '../../../organisms/Footer'
-    import SocialMetas from '../../../utils/SocialMetas'
+    import IconGlobe from 'atoms/IconGlobe'
+    import IconGlobeSmall from 'atoms/IconGlobeSmall'
+    import LinkChange from 'atoms/LinkChange'
+    import ToggleLayout from 'atoms/ToggleLayout'
+    import Photo from 'molecules/Photo'
+    import Switcher from 'molecules/Switcher'
+    import Pagination from 'organisms/Pagination'
+    import Footer from 'organisms/Footer'
+    import SocialMetas from 'utils/SocialMetas'
 
     // Animations
-    import { animateIn } from '../../../animations/place'
+    import { animateIn } from 'animations/place'
     pageTransition.onAnimationEnd = animateIn
 
     // Props and variables

src/routes/sitemap.xml.js

@@ -1,6 +1,6 @@
 const fs = require('fs')
 const fetch = require('node-fetch')
-import { apiEndpoints } from '../utils/store'
+import { apiEndpoints } from 'utils/store'
 
 
 // Variables

src/routes/viewer/[country]/[place]/[photo].svelte

@@ -1,7 +1,4 @@
 <script context="module">
-    import { stores } from '@sapper/app'
-    import { apiEndpoints } from '../../../../utils/store'
-
     // Define either to preload data or use the store
     let preloaded
     currentPhotos.subscribe(store => preloaded = store ? store : undefined)
@@ -31,25 +28,27 @@
 
 <script>
     import { onMount } from 'svelte'
+    import { stores } from '@sapper/app'
     import {
+        apiEndpoints,
         site,
         locations,
         currentLocation,
         currentPhotos,
         pageReady,
         pageTransition
-    } from '../../../../utils/store'
-    import { getThumbnail } from '../../../../utils/functions'
+    } from 'utils/store'
+    import { getThumbnail } from 'utils/functions'
 
     // Components
-    import IconGlobe from '../../../../atoms/IconGlobe'
-    import IconCross from '../../../../atoms/IconCross'
-    import Carousel from '../../../../organisms/Carousel'
-    import Fullscreen from '../../../../organisms/Fullscreen'
-    import SocialMetas from '../../../../utils/SocialMetas'
+    import IconGlobe from 'atoms/IconGlobe'
+    import IconCross from 'atoms/IconCross'
+    import Carousel from 'organisms/Carousel'
+    import Fullscreen from 'organisms/Fullscreen'
+    import SocialMetas from 'utils/SocialMetas'
 
     // Animations
-    import { animateIn } from '../../../../animations/viewer'
+    import { animateIn } from 'animations/viewer'
     pageTransition.onAnimationEnd = animateIn
 
     // Props

src/utils/AnalyticsTracker.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { analyticsUpdate } from '../utils/functions'
+    import { analyticsUpdate } from 'utils/functions'
 
     // Props
     export let stores

src/utils/Transition.svelte

@@ -4,11 +4,11 @@
     const { page } = stores()
 
     // Components
-    import TitleSite from '../atoms/TitleSite'
-    import IconGlobe from '../atoms/IconGlobe'
+    import TitleSite from 'atoms/TitleSite'
+    import IconGlobe from 'atoms/IconGlobe'
 
     // Animations
-    import { animateIn, animateOut } from '../animations/Transition'
+    import { animateIn, animateOut } from 'animations/Transition'
 
 
     /*