@uppy/webcam: refactor to ESM

.eslintrc.js

@@ -209,6 +209,7 @@ module.exports = {
         'packages/@uppy/svelte/src/**/*.js',
         'packages/@uppy/svelte/rollup.config.js',
         'packages/@uppy/vue/src/**/*.js',
+        'packages/@uppy/webcam/src/**/*.js',
       ],
       parser: 'espree',
       parserOptions: {

packages/@uppy/webcam/package.json

@@ -6,6 +6,7 @@
   "main": "lib/index.js",
   "style": "dist/style.min.css",
   "types": "types/index.d.ts",
+  "type": "module",
   "keywords": [
     "file uploader",
     "uppy",

packages/@uppy/webcam/src/CameraIcon.js → packages/@uppy/webcam/src/CameraIcon.jsx

@@ -1,6 +1,6 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
-module.exports = () => {
+export default () => {
   return (
     <svg aria-hidden="true" focusable="false" fill="#0097DC" width="66" height="55" viewBox="0 0 66 55">
       <path d="M57.3 8.433c4.59 0 8.1 3.51 8.1 8.1v29.7c0 4.59-3.51 8.1-8.1 8.1H8.7c-4.59 0-8.1-3.51-8.1-8.1v-29.7c0-4.59 3.51-8.1 8.1-8.1h9.45l4.59-7.02c.54-.54 1.35-1.08 2.16-1.08h16.2c.81 0 1.62.54 2.16 1.08l4.59 7.02h9.45zM33 14.64c-8.62 0-15.393 6.773-15.393 15.393 0 8.62 6.773 15.393 15.393 15.393 8.62 0 15.393-6.773 15.393-15.393 0-8.62-6.773-15.393-15.393-15.393zM33 40c-5.648 0-9.966-4.319-9.966-9.967 0-5.647 4.318-9.966 9.966-9.966s9.966 4.319 9.966 9.966C42.966 35.681 38.648 40 33 40z" fillRule="evenodd" />

packages/@uppy/webcam/src/CameraScreen.js → packages/@uppy/webcam/src/CameraScreen.jsx

@@ -1,11 +1,11 @@
 /* eslint-disable jsx-a11y/media-has-caption */
-const { h, Component } = require('preact')
-const SnapshotButton = require('./SnapshotButton')
-const RecordButton = require('./RecordButton')
-const RecordingLength = require('./RecordingLength')
-const VideoSourceSelect = require('./VideoSourceSelect')
-const SubmitButton = require('./SubmitButton')
-const DiscardButton = require('./DiscardButton')
+import { h, Component } from 'preact'
+import SnapshotButton from './SnapshotButton.jsx'
+import RecordButton from './RecordButton.jsx'
+import RecordingLength from './RecordingLength.jsx'
+import VideoSourceSelect from './VideoSourceSelect.jsx'
+import SubmitButton from './SubmitButton.jsx'
+import DiscardButton from './DiscardButton.jsx'
 
 function isModeAvailable (modes, mode) {
   return modes.indexOf(mode) !== -1
@@ -116,4 +116,4 @@ class CameraScreen extends Component {
   }
 }
 
-module.exports = CameraScreen
+export default CameraScreen

packages/@uppy/webcam/src/DiscardButton.js → packages/@uppy/webcam/src/DiscardButton.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 function DiscardButton ({ onDiscard, i18n }) {
   return (
@@ -28,4 +28,4 @@ function DiscardButton ({ onDiscard, i18n }) {
   )
 }
 
-module.exports = DiscardButton
+export default DiscardButton

packages/@uppy/webcam/src/PermissionsScreen.jsx

@@ -0,0 +1,11 @@
+import { h } from 'preact'
+
+export default ({ icon, i18n, hasCamera }) => {
+  return (
+    <div className="uppy-Webcam-permissons">
+      <div className="uppy-Webcam-permissonsIcon">{icon()}</div>
+      <h1 className="uppy-Webcam-title">{hasCamera ? i18n('allowAccessTitle') : i18n('noCameraTitle')}</h1>
+      <p>{hasCamera ? i18n('allowAccessDescription') : i18n('noCameraDescription')}</p>
+    </div>
+  )
+}

packages/@uppy/webcam/src/RecordButton.js → packages/@uppy/webcam/src/RecordButton.jsx

@@ -1,6 +1,6 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
-module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) {
+export default function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) {
   if (recording) {
     return (
       <button

packages/@uppy/webcam/src/RecordingLength.js → packages/@uppy/webcam/src/RecordingLength.jsx

@@ -1,7 +1,7 @@
-const { h } = require('preact')
-const formatSeconds = require('./formatSeconds')
+import { h } from 'preact'
+import formatSeconds from './formatSeconds.js'
 
-module.exports = function RecordingLength ({ recordingLengthSeconds, i18n }) {
+export default function RecordingLength ({ recordingLengthSeconds, i18n }) {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
 
   return (

packages/@uppy/webcam/src/SnapshotButton.js → packages/@uppy/webcam/src/SnapshotButton.jsx

@@ -1,7 +1,7 @@
-const { h } = require('preact')
-const CameraIcon = require('./CameraIcon')
+import { h } from 'preact'
+import CameraIcon from './CameraIcon.jsx'
 
-module.exports = ({ onSnapshot, i18n }) => {
+export default ({ onSnapshot, i18n }) => {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--picture"

packages/@uppy/webcam/src/SubmitButton.js → packages/@uppy/webcam/src/SubmitButton.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 function SubmitButton ({ onSubmit, i18n }) {
   return (
@@ -25,4 +25,4 @@ function SubmitButton ({ onSubmit, i18n }) {
   )
 }
 
-module.exports = SubmitButton
+export default SubmitButton

packages/@uppy/webcam/src/VideoSourceSelect.js → packages/@uppy/webcam/src/VideoSourceSelect.jsx

@@ -1,6 +1,6 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
-module.exports = ({ currentDeviceId, videoSources, onChangeVideoSource }) => {
+export default ({ currentDeviceId, videoSources, onChangeVideoSource }) => {
   return (
     <div className="uppy-Webcam-videoSource">
       <select