From 9944002c38f71bf82533d00fd4dfd80875c8d04d Mon Sep 17 00:00:00 2001 From: Artur Paikin Date: Fri, 5 Aug 2022 16:59:43 +0100 Subject: [PATCH 1/2] website: convert all website examples to ESM Co-authored-by: Antoine du Hamel --- .eslintrc.js | 1 + website/src/examples/dashboard/app.es6 | 44 +++++++++---------- website/src/examples/dragdrop/app.es6 | 8 ++-- .../src/examples/markdown-snippets/app.es6 | 6 +-- website/src/examples/statusbar/app.es6 | 8 ++-- website/src/examples/transloadit/app.es6 | 16 +++---- website/src/examples/xhrupload/app.es6 | 8 ++-- 7 files changed, 46 insertions(+), 45 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 3814d3c9f5..916604aa0f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -243,6 +243,7 @@ module.exports = { 'packages/@uppy/webcam/src/**/*.js', 'packages/@uppy/xhr-upload/src/**/*.js', 'packages/@uppy/zoom/src/**/*.js', + 'website/src/examples/*/*.es6', ], parser: 'espree', parserOptions: { diff --git a/website/src/examples/dashboard/app.es6 b/website/src/examples/dashboard/app.es6 index 69432b7fdf..80f7d520ca 100644 --- a/website/src/examples/dashboard/app.es6 +++ b/website/src/examples/dashboard/app.es6 @@ -1,25 +1,25 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const GoogleDrive = require('@uppy/google-drive') -const Dropbox = require('@uppy/dropbox') -const Instagram = require('@uppy/instagram') -const Facebook = require('@uppy/facebook') -const OneDrive = require('@uppy/onedrive') -const Zoom = require('@uppy/zoom') -const Unsplash = require('@uppy/unsplash') -const Box = require('@uppy/box') -const ImageEditor = require('@uppy/image-editor') -const Url = require('@uppy/url') -const Webcam = require('@uppy/webcam') -const Audio = require('@uppy/audio') -const ScreenCapture = require('@uppy/screen-capture') -const Tus = require('@uppy/tus') -const DropTarget = require('@uppy/drop-target') -const GoldenRetriever = require('@uppy/golden-retriever') -const Compressor = require('@uppy/compressor') -const localeList = require('../locale_list.json') - -const COMPANION = require('../env') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import GoogleDrive from '@uppy/google-drive' +import Dropbox from '@uppy/dropbox' +import Instagram from '@uppy/instagram' +import Facebook from '@uppy/facebook' +import OneDrive from '@uppy/onedrive' +import Zoom from '@uppy/zoom' +import Unsplash from '@uppy/unsplash' +import Box from '@uppy/box' +import ImageEditor from '@uppy/image-editor' +import Url from '@uppy/url' +import Webcam from '@uppy/webcam' +import Audio from '@uppy/audio' +import ScreenCapture from '@uppy/screen-capture' +import Tus from '@uppy/tus' +import DropTarget from '@uppy/drop-target' +import GoldenRetriever from '@uppy/golden-retriever' +import Compressor from '@uppy/compressor' +import localeList from '../locale_list.json' + +import COMPANION from '../env.js' const RTL_LOCALES = ['ar_SA', 'fa_IR', 'he_IL'] diff --git a/website/src/examples/dragdrop/app.es6 b/website/src/examples/dragdrop/app.es6 index 59b2044e2d..22871b9866 100644 --- a/website/src/examples/dragdrop/app.es6 +++ b/website/src/examples/dragdrop/app.es6 @@ -1,7 +1,7 @@ -const Uppy = require('@uppy/core') -const DragDrop = require('@uppy/drag-drop') -const ProgressBar = require('@uppy/progress-bar') -const Tus = require('@uppy/tus') +import Uppy from '@uppy/core' +import DragDrop from '@uppy/drag-drop' +import ProgressBar from '@uppy/progress-bar' +import Tus from '@uppy/tus' // Function for displaying uploaded files const onUploadSuccess = (elForUploadedFiles) => (file, response) => { diff --git a/website/src/examples/markdown-snippets/app.es6 b/website/src/examples/markdown-snippets/app.es6 index 644265bde8..bcdb483156 100644 --- a/website/src/examples/markdown-snippets/app.es6 +++ b/website/src/examples/markdown-snippets/app.es6 @@ -1,10 +1,10 @@ /* eslint-env browser */ -const marked = require('marked') -const dragdrop = require('drag-drop') +import marked from 'marked' +import dragdrop from 'drag-drop' // Add Robodog JS. It is advisable to install Robodog from npm/yarn. // But for experimenting, you can use also Transloadit’s CDN, Edgly: // -const robodog = require('@uppy/robodog') +import robodog from '@uppy/robodog' const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0' const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a' diff --git a/website/src/examples/statusbar/app.es6 b/website/src/examples/statusbar/app.es6 index fa5c0f63b1..ff9ef996f5 100644 --- a/website/src/examples/statusbar/app.es6 +++ b/website/src/examples/statusbar/app.es6 @@ -1,7 +1,7 @@ -const Uppy = require('@uppy/core') -const FileInput = require('@uppy/file-input') -const StatusBar = require('@uppy/status-bar') -const Tus = require('@uppy/tus') +import Uppy from '@uppy/core' +import FileInput from '@uppy/file-input' +import StatusBar from '@uppy/status-bar' +import Tus from '@uppy/tus' const uppyOne = new Uppy({ debug: true, autoProceed: true }) uppyOne diff --git a/website/src/examples/transloadit/app.es6 b/website/src/examples/transloadit/app.es6 index b1eb8bcb6f..a6586fa75d 100644 --- a/website/src/examples/transloadit/app.es6 +++ b/website/src/examples/transloadit/app.es6 @@ -1,11 +1,11 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const Webcam = require('@uppy/webcam') -const Transloadit = require('@uppy/transloadit') -const Instagram = require('@uppy/instagram') -const Facebook = require('@uppy/facebook') -const Zoom = require('@uppy/zoom') -const COMPANION = require('../env') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import Webcam from '@uppy/webcam' +import Transloadit from '@uppy/transloadit' +import Instagram from '@uppy/instagram' +import Facebook from '@uppy/facebook' +import Zoom from '@uppy/zoom' +import COMPANION from '../env.js' const enc = new TextEncoder('utf-8') async function sha1 (secret, body) { diff --git a/website/src/examples/xhrupload/app.es6 b/website/src/examples/xhrupload/app.es6 index fcadd07c51..b26c588e49 100644 --- a/website/src/examples/xhrupload/app.es6 +++ b/website/src/examples/xhrupload/app.es6 @@ -1,7 +1,7 @@ -const Uppy = require('@uppy/core') -const FileInput = require('@uppy/file-input') -const XHRUpload = require('@uppy/xhr-upload') -const ProgressBar = require('@uppy/progress-bar') +import Uppy from '@uppy/core' +import FileInput from '@uppy/file-input' +import XHRUpload from '@uppy/xhr-upload' +import ProgressBar from '@uppy/progress-bar' document.querySelector('.Uppy').innerHTML = '' From 2e0193012c45bda8fc7e8b1b6caf52ffd134a78e Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 5 Aug 2022 21:27:16 +0200 Subject: [PATCH 2/2] fixup! website: convert all website examples to ESM --- website/src/examples/dashboard/app.es6 | 4 +- website/src/examples/dashboard/index.ejs | 65 +----------------- website/src/examples/transloadit/index.ejs | 78 +--------------------- 3 files changed, 4 insertions(+), 143 deletions(-) diff --git a/website/src/examples/dashboard/app.es6 b/website/src/examples/dashboard/app.es6 index 80f7d520ca..752852f759 100644 --- a/website/src/examples/dashboard/app.es6 +++ b/website/src/examples/dashboard/app.es6 @@ -1,4 +1,4 @@ -import Uppy from '@uppy/core' +import Uppy, { debugLogger } from '@uppy/core' import Dashboard from '@uppy/dashboard' import GoogleDrive from '@uppy/google-drive' import Dropbox from '@uppy/dropbox' @@ -37,7 +37,7 @@ function uppyInit () { const opts = window.uppyOptions const uppy = new Uppy({ - logger: Uppy.debugLogger, + logger: debugLogger, }) uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) diff --git a/website/src/examples/dashboard/index.ejs b/website/src/examples/dashboard/index.ejs index 5441e06923..50e46d321e 100644 --- a/website/src/examples/dashboard/index.ejs +++ b/website/src/examples/dashboard/index.ejs @@ -21,67 +21,4 @@ Dashboard is the full-featured UI for Uppy that shows nice file previews and up
Note: in this snippet we've omitted the code to toggle options using checkboxes. The behavior of this code may be different from the above example depending on which options you've selected.
-{% codeblock lang:js %} -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const GoogleDrive = require('@uppy/google-drive') -const Dropbox = require('@uppy/dropbox') -const Unsplash = require('@uppy/unsplash') -const Box = require('@uppy/box') -const Instagram = require('@uppy/instagram') -const Facebook = require('@uppy/facebook') -const OneDrive = require('@uppy/onedrive') -const Webcam = require('@uppy/webcam') -const ScreenCapture = require('@uppy/screen-capture') -const ImageEditor = require('@uppy/image-editor') -const Tus = require('@uppy/tus') -const Url = require('@uppy/url') -const DropTarget = require('@uppy/drop-target') -const GoldenRetriever = require('@uppy/golden-retriever') -const Compressor = require('@uppy/compressor') - -const uppy = new Uppy({ - debug: true, - autoProceed: false, - restrictions: { - maxFileSize: 1000000, - maxNumberOfFiles: 3, - minNumberOfFiles: 2, - allowedFileTypes: ['image/*', 'video/*'], - requiredMetaFields: ['caption'], - } -}) -.use(Dashboard, { - trigger: '.UppyModalOpenerBtn', - inline: true, - target: '.DashboardContainer', - showProgressDetails: true, - note: 'Images and video only, 2–3 files, up to 1 MB', - height: 470, - metaFields: [ - { id: 'name', name: 'Name', placeholder: 'file name' }, - { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' } - ], - browserBackButtonClose: false -}) -.use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Dropbox, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Box, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Facebook, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(OneDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Unsplash, { target: Dashboard, companionUrl: 'https://companion.uppy.io' }) -.use(Webcam, { target: Dashboard }) -.use(Audio, { target: Dashboard }) -.use(ScreenCapture, { target: Dashboard }) -.use(ImageEditor, { target: Dashboard }) -.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) -.use(DropTarget, {target: document.body }) -.use(GoldenRetriever) -.use(Compressor) - -uppy.on('complete', result => { - console.log('successful files:', result.successful) - console.log('failed files:', result.failed) -}) -{% endcodeblock %} +{% include_code lang:js dashboard/app.es6 %} diff --git a/website/src/examples/transloadit/index.ejs b/website/src/examples/transloadit/index.ejs index dd92099c32..8575bd2ab0 100644 --- a/website/src/examples/transloadit/index.ejs +++ b/website/src/examples/transloadit/index.ejs @@ -89,80 +89,4 @@ This example demonstrates how to unlock Transloadit’s features within Uppy.

On this page we're using the following JavaScript:

-{% codeblock lang:js %} -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/transloadit') -const Webcam = require('@uppy/webcam') -const Transloadit = require('@uppy/transloadit') -const Instagram = require('@uppy/instagram') - -const uppy = new Uppy({ - debug: true, - autoProceed: false, - restrictions: { - maxFileSize: 1024 * 1024 * 1024, - maxNumberOfFiles: 2, - minNumberOfFiles: 1, - allowedFileTypes: ['image/*'] - }, - locale: { - strings: { - youCanOnlyUploadFileTypes: 'You can only upload images' - } - } -}) - -uppy - .use(Transloadit, { - params: { - auth: { - key: YOUR_TRANSLOADIT_API_KEY - }, - // It’s more secure to use a template_id and enable - // Signature Authentication - steps: { - resize: { - robot: '/image/resize', - width: 250, - height: 250, - resize_strategy: 'fit', - text: [ - { - text: '© Transloadit.com', - size: 12, - font: 'Ubuntu', - color: '#eeeeee', - valign: 'bottom', - align: 'right', - x_offset: 16, - y_offset: -10 - } - ] - } - } - }, - waitForEncoding: true - }) - .use(Instagram, { target: Dashboard, companionUrl: 'https://api2.transloadit.com/companion', companionAllowedHosts: /\.transloadit\.com$/ }) - .use(Dashboard, { - inline: true, - maxHeight: 400, - target: '#uppy-dashboard-container', - note: 'Images and video only, 1–2 files, up to 1 MB' - }) - .use(Webcam, { target: Dashboard }) - .on('transloadit:result', (stepName, result) => { - const file = uppy.getFile(result.localId) - var resultContainer = document.createElement('div') - resultContainer.innerHTML = ` -
-

Name: ${file.name}

-
- View -
- ` - document - .getElementById('uppy-transloadit-result') - .appendChild(resultContainer) - }) -{% endcodeblock %} +{% include_code lang:js transloadit/app.es6 %}