example: migrate xhr-bundle to ESM (#4012)

transloadit · Aug 18, 2022 · f1ddd43 · f1ddd43
1 parent 4f1e04d
commit f1ddd43
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 26 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -197,6 +197,7 @@ module.exports = {
         'examples/custom-provider/client/*.js',
         'examples/multiple-instances/*.js',
         'examples/transloadit-markdown-bin/*.js',
+        'examples/xhr-bundle/*.js',
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',

diff --git a/examples/xhr-bundle/.gitignore b/examples/xhr-bundle/.gitignore
diff --git a/examples/xhr-bundle/readme.md → examples/xhr-bundle/README.md b/examples/xhr-bundle/readme.md → examples/xhr-bundle/README.md
@@ -2,21 +2,21 @@
 
 This example uses Uppy with XHRUpload plugin in `bundle` mode. Bundle mode uploads all files to the endpoint in a single request, instead of firing off a new request for each file. This makes uploading a bit slower, but it may be easier to handle on the server side, depending on your setup.
 
-[serve.js](./serve.js) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream.
+[`server.cjs`](./server.cjs) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream.
 
 ## Run it
 
 To run this example, make sure you've correctly installed the **repository root**:
 
-```bash
-npm install
-npm run build
+```sh
+corepack yarn install
+corepack yarn build
 ```
 
 That will also install the dependencies for this example.
 
 Then, again in the **repository root**, start this example by doing:
 
-```bash
-npm run example xhr-bundle
+```sh
+corepack yarn workspace @uppy-example/xhr-bundle start
 ```
diff --git a/examples/xhr-bundle/index.html b/examples/xhr-bundle/index.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Uppy example: XHRUpload to a single endpoint</title>
-  </head>
-  <body>
     <style>
       main {
         display: flex;
@@ -14,14 +12,16 @@
       }
       h1 { text-align: center }
     </style>
+  </head>
+  <body>
     <main>
       <div>
         <h1>files[]</h1>
         <div id="app"></div>
       </div>
     </main>
 
-    <link href="uppy.min.css" rel="stylesheet">
-    <script src="bundle.js"></script>
+    <noscript>This app requires JavaScript.</noscript>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/xhr-bundle/main.js b/examples/xhr-bundle/main.js
@@ -1,6 +1,9 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const XHRUpload = require('@uppy/xhr-upload')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import XHRUpload from '@uppy/xhr-upload'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
 
 const uppy = new Uppy({
   debug: true,

diff --git a/examples/xhr-bundle/package.json b/examples/xhr-bundle/package.json
@@ -2,22 +2,21 @@
   "name": "@uppy-example/xhr-bundle",
   "version": "0.0.0",
   "dependencies": {
-    "@babel/core": "^7.2.2",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
     "@uppy/xhr-upload": "workspace:*",
-    "babelify": "^10.0.0",
-    "budo": "^11.6.1",
     "cors": "^2.8.5",
     "express": "^4.16.4",
-    "multer": "^1.4.1",
-    "npm-run-all": "^4.1.5"
+    "multer": "^1.4.1"
+  },
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "vite": "^3.0.0"
   },
   "private": true,
   "scripts": {
-    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "run-p start:*",
-    "start:client": "yarn run css && budo main.js:bundle.js -- -t babelify",
-    "start:server": "node serve.js"
+    "start": "run-p start:server start:client",
+    "start:client": "vite",
+    "start:server": "node server.cjs"
   }
 }
diff --git a/examples/xhr-bundle/serve.js → examples/xhr-bundle/server.cjs b/examples/xhr-bundle/serve.js → examples/xhr-bundle/server.cjs
diff --git a/yarn.lock b/yarn.lock
@@ -8356,16 +8356,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/xhr-bundle@workspace:examples/xhr-bundle"
   dependencies:
-    "@babel/core": ^7.2.2
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/xhr-upload": "workspace:*"
-    babelify: ^10.0.0
-    budo: ^11.6.1
     cors: ^2.8.5
     express: ^4.16.4
     multer: ^1.4.1
     npm-run-all: ^4.1.5
+    vite: ^3.0.0
   languageName: unknown
   linkType: soft