example: upgrade React example to use React 18

transloadit · Aug 18, 2022 · 59a6ba1 · 59a6ba1
1 parent 8195b22
commit 59a6ba1
Show file tree

Hide file tree

Showing 11 changed files with 224 additions and 157 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/react-example/*.js',
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',

diff --git a/examples/react-example/.babelrc.js b/examples/react-example/.babelrc.js
diff --git a/examples/react-example/.gitignore b/examples/react-example/.gitignore
diff --git a/examples/react-example/App.js → examples/react-example/App.jsx b/examples/react-example/App.js → examples/react-example/App.jsx
@@ -1,11 +1,11 @@
 /* eslint-disable */
-const React = require('react')
-const Uppy = require('@uppy/core')
-const Tus = require('@uppy/tus')
-const GoogleDrive = require('@uppy/google-drive')
-const { Dashboard, DashboardModal, DragDrop, ProgressBar, FileInput } = require('@uppy/react')
+import React from'react'
+import Uppy from'@uppy/core'
+import Tus from'@uppy/tus'
+import GoogleDrive from'@uppy/google-drive'
+import { Dashboard, DashboardModal, DragDrop, ProgressBar, FileInput } from'@uppy/react'
 
-module.exports = class App extends React.Component {
+export default class App extends React.Component {
   constructor (props) {
     super(props)
 

diff --git a/examples/react-example/README.md b/examples/react-example/README.md
@@ -0,0 +1,30 @@
+# React example
+
+This is minimal example created to demonstrate how to integrate Uppy in your
+React app.
+
+To spawn the demo, use the following commands:
+
+```sh
+corepack yarn install
+corepack yarn build
+corepack yarn workspace @uppy-example/react dev
+```
+
+If you'd like to use a different package manager than Yarn  (e.g. npm) to work
+with this example, you can extract it from the workspace like this:
+
+```sh
+corepack yarn workspace @uppy-example/react pack
+
+# The above command should have create a .tgz file, we're going to extract it to
+# a new directory outside of the Uppy workspace.
+mkdir ../react-example
+tar -xzf examples/react-example/package.tgz -C ../react-example --strip-components 1
+rm -f examples/react-example/package.tgz
+
+# Now you can leave the Uppy workspace and use the example as a standalone JS project:
+cd ../react-example
+npm i
+npm run dev
+```
diff --git a/examples/react-example/index.html b/examples/react-example/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="bundle.js"></script>
+    <script src="./main.jsx" type="module"></script>
   </body>
 </html>
diff --git a/examples/react-example/main.js b/examples/react-example/main.js
diff --git a/examples/react-example/main.jsx b/examples/react-example/main.jsx
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react'
+import { createRoot } from 'react-dom/client';
+import App from './App.jsx'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+import '@uppy/file-input/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+
+createRoot(document.querySelector('#app')).render(
+  <App />
+)
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
@@ -1,17 +1,27 @@
 {
-  "name": "@uppy-example/react-example",
+  "name": "@uppy-example/react",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "babelify": "^10.0.0",
-    "budo": "^11.6.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "@uppy/core": "workspace:*",
+    "@uppy/dashboard": "workspace:*",
+    "@uppy/drag-drop": "workspace:*",
+    "@uppy/file-input": "workspace:*",
+    "@uppy/google-drive": "workspace:*",
+    "@uppy/progress-bar": "workspace:*",
+    "@uppy/react": "workspace:*",
+    "@uppy/tus": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "private": true,
   "scripts": {
-    "css": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "yarn run css && budo main.js:bundle.js -- -r react:react -r react-dom:react-dom -t babelify"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^2.0.0",
+    "vite": "^3.0.0"
   }
 }
diff --git a/examples/react-example/vite.config.js b/examples/react-example/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})