example: migrate multiple-instances to ESM (#4007)

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

Hide file tree

Showing 7 changed files with 21 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -195,6 +195,7 @@ module.exports = {
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
         'examples/custom-provider/client/*.js',
+        'examples/multiple-instances/*.js',
         'examples/transloadit-markdown-bin/*.js',
         'private/dev/*.js',
         'private/release/*.js',

diff --git a/examples/multiple-instances/.gitignore b/examples/multiple-instances/.gitignore
diff --git a/examples/multiple-instances/readme.md → examples/multiple-instances/README.md b/examples/multiple-instances/readme.md → examples/multiple-instances/README.md
@@ -8,14 +8,14 @@ It has two instances on the same page, side-by-side, but with different `id`s so
 To run this example, make sure you've correctly installed the **repository root**:
 
 ```bash
-npm install
-npm run build
+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 multiple-instances
+corepack yarn workspace @uppy-example/multiple-instances start
 ```
diff --git a/examples/multiple-instances/index.html b/examples/multiple-instances/index.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Uppy example: Multiple instances</title>
-  </head>
-  <body>
     <style>
       main {
         display: flex;
@@ -14,6 +12,8 @@
       }
       h1 { text-align: center }
     </style>
+  </head>
+  <body>
     <main>
       <div>
         <h1>Instance A</h1>
@@ -24,8 +24,8 @@ <h1>Instance B</h1>
         <div id="b"></div>
       </div>
     </main>
+    <noscript>This app requires JavaScript to be enabled.</noscript>
 
-    <link href="uppy.min.css" rel="stylesheet">
-    <script src="bundle.js"></script>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/multiple-instances/main.js b/examples/multiple-instances/main.js
@@ -1,6 +1,9 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const GoldenRetriever = require('@uppy/golden-retriever')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import GoldenRetriever from '@uppy/golden-retriever'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
 
 // Initialise two Uppy instances with the GoldenRetriever plugin,
 // but with different `id`s.

diff --git a/examples/multiple-instances/package.json b/examples/multiple-instances/package.json
@@ -1,17 +1,17 @@
 {
   "name": "@uppy-example/multiple-instances",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.4.4",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
-    "@uppy/golden-retriever": "workspace:*",
-    "babelify": "^10.0.0",
-    "budo": "^11.6.1"
+    "@uppy/golden-retriever": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "^3.0.0"
   },
   "private": true,
   "scripts": {
-    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "yarn run css && budo main.js:bundle.js -- -t babelify"
+    "start": "vite"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -8137,12 +8137,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/multiple-instances@workspace:examples/multiple-instances"
   dependencies:
-    "@babel/core": ^7.4.4
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
     "@uppy/golden-retriever": "workspace:*"
-    babelify: ^10.0.0
-    budo: ^11.6.1
+    vite: ^3.0.0
   languageName: unknown
   linkType: soft