tools: enable linter on website examples (#3366)

.eslintrc.js

@@ -152,6 +152,15 @@ module.exports = {
         'no-underscore-dangle': 'off',
       },
     },
+    {
+      files: [
+        'website/src/examples/*/*.es6',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+        'no-console': 'off',
+      },
+    },
     {
       files: [
         '*.test.js',

website/src/examples/dragdrop/app.es6

@@ -4,20 +4,19 @@ const ProgressBar = require('@uppy/progress-bar')
 const Tus = require('@uppy/tus')
 
 // Function for displaying uploaded files
-const onUploadSuccess = (elForUploadedFiles) =>
-  (file, response) => {
-    const url = response.uploadURL
-    const fileName = file.name
+const onUploadSuccess = (elForUploadedFiles) => (file, response) => {
+  const url = response.uploadURL
+  const fileName = file.name
 
-    const li = document.createElement('li')
-    const a = document.createElement('a')
-    a.href = url
-    a.target = '_blank'
-    a.appendChild(document.createTextNode(fileName))
-    li.appendChild(a)
+  const li = document.createElement('li')
+  const a = document.createElement('a')
+  a.href = url
+  a.target = '_blank'
+  a.appendChild(document.createTextNode(fileName))
+  li.appendChild(a)
 
-    document.querySelector(elForUploadedFiles).appendChild(li)
-  }
+  document.querySelector(elForUploadedFiles).appendChild(li)
+}
 
 const uppyOne = new Uppy({ debug: true, autoProceed: true })
 uppyOne
@@ -34,6 +33,6 @@ uppyTwo
   .on('upload-success', onUploadSuccess('.example-two .uploaded-files ol'))
 
 const uploadBtn = document.querySelector('.example-two button.upload-button')
-uploadBtn.addEventListener('click', function () {
+uploadBtn.addEventListener('click', () => {
   uppyTwo.upload()
 })

website/src/examples/markdown-snippets/app.es6

@@ -30,7 +30,8 @@ class MarkdownTextarea {
     this.uploadLine.classList.add('form-upload')
 
     this.uploadLine.appendChild(
-      document.createTextNode('Tap here to upload an attachment'))
+      document.createTextNode('Tap here to upload an attachment'),
+    )
   }
 
   install () {
@@ -86,24 +87,6 @@ class MarkdownTextarea {
     })
   }
 
-  matchFilesAndThumbs (results) {
-    const filesById = {}
-    const thumbsById = {}
-
-    results.forEach((result) => {
-      if (result.stepName === 'thumbnails') {
-        thumbsById[result.original_id] = result
-      } else {
-        filesById[result.original_id] = result
-      }
-    })
-
-    return Object.keys(filesById).map((key) => ({
-      file : filesById[key],
-      thumb : thumbsById[key],
-    }))
-  }
-
   uploadFiles (files) {
     robodog.upload(files, {
       waitForEncoding: true,
@@ -114,7 +97,7 @@ class MarkdownTextarea {
     }).then((result) => {
       if (result === null) return
       this.insertAttachments(
-        this.matchFilesAndThumbs(result.results)
+        matchFilesAndThumbs(result.results),
       )
     }).catch((err) => {
       console.error(err)
@@ -139,7 +122,7 @@ class MarkdownTextarea {
     }).then((result) => {
       if (result === null) return
       this.insertAttachments(
-        this.matchFilesAndThumbs(result.results)
+        matchFilesAndThumbs(result.results),
       )
     }).catch((err) => {
       console.error(err)
@@ -177,11 +160,29 @@ function loadSnippets () {
   }
 }
 
+function matchFilesAndThumbs (results) {
+  const filesById = {}
+  const thumbsById = {}
+
+  results.forEach((result) => {
+    if (result.stepName === 'thumbnails') {
+      thumbsById[result.original_id] = result
+    } else {
+      filesById[result.original_id] = result
+    }
+  })
+
+  return Object.keys(filesById).map((key) => ({
+    file : filesById[key],
+    thumb : thumbsById[key],
+  }))
+}
+
 document.querySelector('#new').addEventListener('submit', (event) => {
   event.preventDefault()
 
-  const title = event.target.querySelector('input[name="title"]').value ||
-    'Unnamed Snippet'
+  const title = event.target.elements['title'].value
+    || 'Unnamed Snippet'
   const text = textarea.element.value
 
   saveSnippet(title, text)
@@ -191,6 +192,4 @@ document.querySelector('#new').addEventListener('submit', (event) => {
   event.target.querySelector('textarea').value = ''
 })
 
-window.addEventListener('DOMContentLoaded', () => {
-  loadSnippets()
-})
+window.addEventListener('DOMContentLoaded', loadSnippets, { once: true })

website/src/examples/statusbar/app.es6

@@ -3,12 +3,12 @@ const FileInput = require('@uppy/file-input')
 const StatusBar = require('@uppy/status-bar')
 const Tus = require('@uppy/tus')
 
-const uppyOne = new Uppy({debug: true, autoProceed: true})
+const uppyOne = new Uppy({ debug: true, autoProceed: true })
 uppyOne
   .use(FileInput, { target: '.UppyInput', pretty: false })
   .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
   .use(StatusBar, {
     target: '.UppyInput-Progress',
     hideUploadButton: true,
-    hideAfterFinish: false
+    hideAfterFinish: false,
   })

website/src/examples/transloadit/app.es6

@@ -28,13 +28,13 @@ function initUppy (opts = {}) {
       maxFileSize: 1024 * 1024 * 1024,
       maxNumberOfFiles: 2,
       minNumberOfFiles: 1,
-      allowedFileTypes
+      allowedFileTypes,
     },
     locale: {
       strings: {
-        youCanOnlyUploadFileTypes: 'You can only upload images'
-      }
-    }
+        youCanOnlyUploadFileTypes: 'You can only upload images',
+      },
+    },
   })
 
   function getExpiration (future) {
@@ -49,7 +49,7 @@ function initUppy (opts = {}) {
     let params = {
       auth: {
         key: window.TRANSLOADIT_API_KEY,
-        expires: hasSecret ? getExpiration(5 * 60 * 1000) : undefined
+        expires: hasSecret ? getExpiration(5 * 60 * 1000) : undefined,
       },
       // It's more secure to use a template_id and enable
       // Signature Authentication
@@ -61,18 +61,18 @@ function initUppy (opts = {}) {
           resize_strategy: 'fit',
           text: [
             {
-              text: `© ${(new Date).getFullYear()} Transloadit.com`,
+              text: `© ${(new Date()).getFullYear()} Transloadit.com`,
               size: 12,
               font: 'Ubuntu',
               color: '#eeeeee',
               valign: 'bottom',
               align: 'right',
               x_offset: 16,
-              y_offset: -10
-            }
-          ]
-        }
-      }
+              y_offset: -10,
+            },
+          ],
+        },
+      },
     }
 
     if (zoomMode) {
@@ -83,7 +83,7 @@ function initUppy (opts = {}) {
           result: true,
           ffmpeg_stack: 'v3.3.3',
           preset: 'ipad-high',
-          resize_strategy: 'fillcrop'
+          resize_strategy: 'fillcrop',
         },
         watermarked: {
           use: 'resized',
@@ -96,8 +96,8 @@ function initUppy (opts = {}) {
           watermark_size: '25%',
           watermark_url: 'https://demos.transloadit.com/inputs/transloadit-padded.png',
           watermark_x_offset: -10,
-          watermark_y_offset: 10
-        }
+          watermark_y_offset: 10,
+        },
       }
     }
 
@@ -113,22 +113,22 @@ function initUppy (opts = {}) {
   uppy
     .use(Transloadit, {
       getAssemblyOptions,
-      waitForEncoding: true
+      waitForEncoding: true,
     })
     .use(Dashboard, {
       inline: true,
       maxHeight: 400,
       target: '#uppy-dashboard-container',
-      note: 'Images only, 1–2 files, up to 1 MB'
+      note: 'Images only, 1–2 files, up to 1 MB',
     })
     .use(Instagram, {
       target: Dashboard,
       companionUrl: 'https://api2.transloadit.com/companion',
-      companionAllowedHosts: Transloadit.COMPANION_PATTERN
+      companionAllowedHosts: Transloadit.COMPANION_PATTERN,
     })
     .use(Facebook, {
       target: Dashboard,
-      companionUrl: COMPANION
+      companionUrl: COMPANION,
     })
     .use(Webcam, { target: Dashboard, modes: ['picture'] })
 
@@ -136,14 +136,14 @@ function initUppy (opts = {}) {
     uppy.use(Zoom, {
       target: Dashboard,
       companionUrl: 'https://api2.transloadit.com/companion',
-      companionAllowedHosts: Transloadit.COMPANION_PATTERN
+      companionAllowedHosts: Transloadit.COMPANION_PATTERN,
     })
   }
 
   uppy
     .on('transloadit:result', (stepName, result) => {
       const file = uppy.getFile(result.localId)
-      var resultContainer = document.createElement('div')
+      const resultContainer = document.createElement('div')
       if (!zoomMode) {
         resultContainer.innerHTML = `
           <div>