Prechádzať zdrojové kódy

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

Antoine du Hamel 2 rokov pred
rodič
commit
4f1e04d922

+ 1 - 0
.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',

+ 0 - 1
examples/multiple-instances/.gitignore

@@ -1 +0,0 @@
-uppy.min.css

+ 3 - 3
examples/multiple-instances/readme.md → examples/multiple-instances/README.md

@@ -8,8 +8,8 @@ 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.
@@ -17,5 +17,5 @@ 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
 ```

+ 4 - 4
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 @@
         <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>

+ 6 - 3
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.

+ 6 - 6
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"
   }
 }

+ 1 - 3
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