From f1ddd43765dc521aeeb615729a59973357a89d6a Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 19 Aug 2022 00:49:55 +0200 Subject: [PATCH] example: migrate `xhr-bundle` to ESM (#4012) --- .eslintrc.js | 1 + examples/xhr-bundle/.gitignore | 1 - examples/xhr-bundle/{readme.md => README.md} | 12 ++++++------ examples/xhr-bundle/index.html | 8 ++++---- examples/xhr-bundle/main.js | 9 ++++++--- examples/xhr-bundle/package.json | 17 ++++++++--------- examples/xhr-bundle/{serve.js => server.cjs} | 0 yarn.lock | 4 +--- 8 files changed, 26 insertions(+), 26 deletions(-) delete mode 100644 examples/xhr-bundle/.gitignore rename examples/xhr-bundle/{readme.md => README.md} (58%) rename examples/xhr-bundle/{serve.js => server.cjs} (100%) diff --git a/.eslintrc.js b/.eslintrc.js index d3982658a7..f0c9f318e5 100644 --- 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 deleted file mode 100644 index 70a19130fe..0000000000 --- a/examples/xhr-bundle/.gitignore +++ /dev/null @@ -1 +0,0 @@ -uppy.min.css diff --git a/examples/xhr-bundle/readme.md b/examples/xhr-bundle/README.md similarity index 58% rename from examples/xhr-bundle/readme.md rename to examples/xhr-bundle/README.md index b357f68c3c..fef3e256f7 100644 --- a/examples/xhr-bundle/readme.md +++ b/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 index a73b084f04..720d7633db 100644 --- a/examples/xhr-bundle/index.html +++ b/examples/xhr-bundle/index.html @@ -4,8 +4,6 @@ Uppy example: XHRUpload to a single endpoint - - + +

files[]

@@ -21,7 +21,7 @@

files[]

- - + + diff --git a/examples/xhr-bundle/main.js b/examples/xhr-bundle/main.js index dc773108f4..d9adf1eda1 100644 --- 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 index 7c36cd117f..5971f61cc4 100644 --- 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 b/examples/xhr-bundle/server.cjs similarity index 100% rename from examples/xhr-bundle/serve.js rename to examples/xhr-bundle/server.cjs diff --git a/yarn.lock b/yarn.lock index 408ccb96b8..e795c14132 100644 --- 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