From 86c089fcc476e805393e5385584227f063600c08 Mon Sep 17 00:00:00 2001 From: Magnus Jacobsson Date: Sat, 18 Feb 2023 17:13:40 +0100 Subject: [PATCH] add .js extension to all local imports Add .js Add more .js DEBUG: comment out text editor and all icon. Rendering ok now add workaround for @mui/icons-material not published in ESM module format See https://github.com/mui/material-ui/issues/30671#issuecomment-1819254734. add workaround for react-ace not published in ESM module format See https://github.com/securingsincity/react-ace/issues/1540#issue-1250613655. --- src/AboutDialog.js | 14 +++++------ src/ButtonAppBar.js | 34 +++++++++++++------------- src/ColorPicker.js | 6 ++--- src/DoYouWantToDeleteDialog.js | 18 +++++++------- src/DoYouWantToReplaceItDialog.js | 18 +++++++------- src/ExportAsSvgDialog.js | 20 ++++++++-------- src/ExportAsUrlDialog.js | 22 ++++++++--------- src/FormatDrawer.js | 26 ++++++++++---------- src/GitHubIcon.js | 2 +- src/Graph.js | 6 ++--- src/HelpMenu.js | 4 ++-- src/InsertPanels.js | 12 +++++----- src/KeyboardShortcutsDialog.js | 22 ++++++++--------- src/MainMenu.js | 4 ++-- src/MouseOperationsDialog.js | 20 ++++++++-------- src/OpenFromBrowserDialog.js | 40 +++++++++++++++---------------- src/SaveAsToBrowserDialog.js | 22 ++++++++--------- src/SettingsDialog.js | 40 +++++++++++++++---------------- src/SvgPreview.js | 6 ++--- src/TextEditor.js | 11 +++++---- src/UpdatedSnackbar.js | 10 ++++---- src/dot.js | 2 +- src/dot.test.js | 8 +++---- src/index.js | 2 +- src/pages/index.js | 40 +++++++++++++++---------------- src/withRoot.js | 4 ++-- 26 files changed, 207 insertions(+), 206 deletions(-) diff --git a/src/AboutDialog.js b/src/AboutDialog.js index e4b2b5a0..aa07506a 100644 --- a/src/AboutDialog.js +++ b/src/AboutDialog.js @@ -1,16 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; +import withRoot from './withRoot.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; import graphvizVersions from './graphviz-versions.json'; import packageJSON from '../package.json'; import versions from './versions.json'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; +import IconButton from '@mui/material/IconButton/index.js'; +import { Close as CloseIcon } from '@mui/icons-material'; const styles = theme => ({ title: { diff --git a/src/ButtonAppBar.js b/src/ButtonAppBar.js index ca7c2558..d055d4fb 100644 --- a/src/ButtonAppBar.js +++ b/src/ButtonAppBar.js @@ -1,23 +1,23 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import AddIcon from '@mui/icons-material/Add'; -import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser'; -import SaveAltIcon from '@mui/icons-material/SaveAlt'; -import UndoIcon from '@mui/icons-material/Undo'; -import RedoIcon from '@mui/icons-material/Redo'; -import ZoomInIcon from '@mui/icons-material/ZoomIn'; -import ZoomOutIcon from '@mui/icons-material/ZoomOut'; -import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'; -import SettingsIcon from '@mui/icons-material/Settings'; -import HelpIcon from '@mui/icons-material/Help'; -import GitHubIcon from './GitHubIcon' +import AppBar from '@mui/material/AppBar/index.js'; +import Toolbar from '@mui/material/Toolbar/index.js'; +import Typography from '@mui/material/Typography/index.js'; +import Button from '@mui/material/Button/index.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import { Menu as MenuIcon } from '@mui/icons-material'; +import { Add as AddIcon } from '@mui/icons-material'; +import { OpenInBrowser as OpenInBrowserIcon } from '@mui/icons-material'; +import { SaveAlt as SaveAltIcon } from '@mui/icons-material'; +import { Undo as UndoIcon } from '@mui/icons-material'; +import { Redo as RedoIcon } from '@mui/icons-material'; +import { ZoomIn as ZoomInIcon } from '@mui/icons-material'; +import { ZoomOut as ZoomOutIcon } from '@mui/icons-material'; +import { ZoomOutMap as ZoomOutMapIcon } from '@mui/icons-material'; +import { Settings as SettingsIcon } from '@mui/icons-material'; +import { Help as HelpIcon } from '@mui/icons-material'; +import GitHubIcon from './GitHubIcon.js' const styles = { root: { diff --git a/src/ColorPicker.js b/src/ColorPicker.js index fa64ce19..5b3e9585 100644 --- a/src/ColorPicker.js +++ b/src/ColorPicker.js @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import FormControl from '@mui/material/FormControl'; -import Input from '@mui/material/Input'; +import withRoot from './withRoot.js'; +import FormControl from '@mui/material/FormControl/index.js'; +import Input from '@mui/material/Input/index.js'; import { ChromePicker } from 'react-color' diff --git a/src/DoYouWantToDeleteDialog.js b/src/DoYouWantToDeleteDialog.js index 0ae88b85..0ba754ab 100644 --- a/src/DoYouWantToDeleteDialog.js +++ b/src/DoYouWantToDeleteDialog.js @@ -1,15 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; const styles = theme => ({ title: { diff --git a/src/DoYouWantToReplaceItDialog.js b/src/DoYouWantToReplaceItDialog.js index c07854f1..c919634b 100644 --- a/src/DoYouWantToReplaceItDialog.js +++ b/src/DoYouWantToReplaceItDialog.js @@ -1,15 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; const styles = theme => ({ title: { diff --git a/src/ExportAsSvgDialog.js b/src/ExportAsSvgDialog.js index 18e251b5..78d2ffc6 100644 --- a/src/ExportAsSvgDialog.js +++ b/src/ExportAsSvgDialog.js @@ -1,16 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; -import Input from '@mui/material/Input'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; +import Input from '@mui/material/Input/index.js'; const styles = theme => ({ title: { diff --git a/src/ExportAsUrlDialog.js b/src/ExportAsUrlDialog.js index 854ae4e7..155391c2 100644 --- a/src/ExportAsUrlDialog.js +++ b/src/ExportAsUrlDialog.js @@ -1,17 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import LinkIcon from '@mui/icons-material/Link'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; -import Input from '@mui/material/Input'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import { Link as LinkIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; +import Input from '@mui/material/Input/index.js'; const styles = theme => ({ title: { diff --git a/src/FormatDrawer.js b/src/FormatDrawer.js index d0899bef..e46fdce9 100644 --- a/src/FormatDrawer.js +++ b/src/FormatDrawer.js @@ -2,19 +2,19 @@ import React from 'react'; import { useState } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import { useTheme } from '@mui/material/styles'; -import Drawer from '@mui/material/Drawer'; -import DialogTitle from '@mui/material/DialogTitle'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import FormControl from '@mui/material/FormControl'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; -import Switch from '@mui/material/Switch'; -import ColorPicker from './ColorPicker' +import { useTheme } from '@mui/material/styles/index.js'; +import Drawer from '@mui/material/Drawer/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import Divider from '@mui/material/Divider/index.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import { ChevronLeft as ChevronLeftIcon } from '@mui/icons-material'; +import { ChevronRight as ChevronRightIcon } from '@mui/icons-material'; +import FormControl from '@mui/material/FormControl/index.js'; +import FormGroup from '@mui/material/FormGroup/index.js'; +import FormControlLabel from '@mui/material/FormControlLabel/index.js'; +import Checkbox from '@mui/material/Checkbox/index.js'; +import Switch from '@mui/material/Switch/index.js'; +import ColorPicker from './ColorPicker.js' const drawerWidth = '100%'; diff --git a/src/GitHubIcon.js b/src/GitHubIcon.js index 2fdeeb65..6e994246 100644 --- a/src/GitHubIcon.js +++ b/src/GitHubIcon.js @@ -1,5 +1,5 @@ import React from 'react'; -import SvgIcon from '@mui/material/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon/index.js'; function GitHubIcon(props) { return ( diff --git a/src/Graph.js b/src/Graph.js index 8591ac6c..1da3cd65 100644 --- a/src/Graph.js +++ b/src/Graph.js @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import Fade from '@mui/material/Fade'; -import CircularProgress from '@mui/material/CircularProgress'; +import Fade from '@mui/material/Fade/index.js'; +import CircularProgress from '@mui/material/CircularProgress/index.js'; import { select as d3_select} from 'd3-selection'; import { selectAll as d3_selectAll} from 'd3-selection'; import { transition as d3_transition} from 'd3-transition'; @@ -10,7 +10,7 @@ import { zoomIdentity as d3_zoomIdentity} from 'd3-zoom'; import { zoomTransform as d3_zoomTransform} from 'd3-zoom'; import { pointer as d3_pointer} from 'd3-selection'; import 'd3-graphviz'; -import DotGraph from './dot' +import DotGraph from './dot.js' const styles = { root: { diff --git a/src/HelpMenu.js b/src/HelpMenu.js index 0004a881..d0a4c0ab 100644 --- a/src/HelpMenu.js +++ b/src/HelpMenu.js @@ -1,6 +1,6 @@ import React from 'react'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; +import Menu from '@mui/material/Menu/index.js'; +import MenuItem from '@mui/material/MenuItem/index.js'; class HelpMenu extends React.Component { diff --git a/src/InsertPanels.js b/src/InsertPanels.js index 956b6ba8..a272fa68 100644 --- a/src/InsertPanels.js +++ b/src/InsertPanels.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import Accordion from '@mui/material/Accordion'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import {shapes} from './shapes'; +import Accordion from '@mui/material/Accordion/index.js'; +import AccordionDetails from '@mui/material/AccordionDetails/index.js'; +import AccordionSummary from '@mui/material/AccordionSummary/index.js'; +import Typography from '@mui/material/Typography/index.js'; +import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material'; +import {shapes} from './shapes.js'; const nodeShapeCategories = [ { diff --git a/src/KeyboardShortcutsDialog.js b/src/KeyboardShortcutsDialog.js index a3aefaad..cb614d30 100644 --- a/src/KeyboardShortcutsDialog.js +++ b/src/KeyboardShortcutsDialog.js @@ -1,17 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import IconButton from '@mui/material/IconButton'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableRow from '@mui/material/TableRow'; -import CloseIcon from '@mui/icons-material/Close'; +import withRoot from './withRoot.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import Table from '@mui/material/Table/index.js'; +import TableBody from '@mui/material/TableBody/index.js'; +import TableCell from '@mui/material/TableCell/index.js'; +import TableRow from '@mui/material/TableRow/index.js'; +import { Close as CloseIcon } from '@mui/icons-material'; const keyboardShortcuts = [ {key: 'Ctrl-A', description: 'Select all nodes and edges.'}, diff --git a/src/MainMenu.js b/src/MainMenu.js index 8958fe66..9a8d917e 100644 --- a/src/MainMenu.js +++ b/src/MainMenu.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; +import Menu from '@mui/material/Menu/index.js'; +import MenuItem from '@mui/material/MenuItem/index.js'; class MainMenu extends React.Component { diff --git a/src/MouseOperationsDialog.js b/src/MouseOperationsDialog.js index 2948de67..e9550222 100644 --- a/src/MouseOperationsDialog.js +++ b/src/MouseOperationsDialog.js @@ -1,16 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import IconButton from '@mui/material/IconButton'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogTitle from '@mui/material/DialogTitle'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableRow from '@mui/material/TableRow'; -import CloseIcon from '@mui/icons-material/Close'; +import withRoot from './withRoot.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import Table from '@mui/material/Table/index.js'; +import TableBody from '@mui/material/TableBody/index.js'; +import TableCell from '@mui/material/TableCell/index.js'; +import TableRow from '@mui/material/TableRow/index.js'; +import { Close as CloseIcon } from '@mui/icons-material'; const mouseOperations = [ {key: 'Mouse wheel', description: 'Zoom in or out.'}, diff --git a/src/OpenFromBrowserDialog.js b/src/OpenFromBrowserDialog.js index 2d5f2837..0aac1b28 100644 --- a/src/OpenFromBrowserDialog.js +++ b/src/OpenFromBrowserDialog.js @@ -1,27 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; -import Table from '@mui/material/Table'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import TableCell from '@mui/material/TableCell'; -import TableBody from '@mui/material/TableBody'; -import TableSortLabel from '@mui/material/TableSortLabel'; -import Tooltip from '@mui/material/Tooltip'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; +import Table from '@mui/material/Table/index.js'; +import TableHead from '@mui/material/TableHead/index.js'; +import TableRow from '@mui/material/TableRow/index.js'; +import TableCell from '@mui/material/TableCell/index.js'; +import TableBody from '@mui/material/TableBody/index.js'; +import TableSortLabel from '@mui/material/TableSortLabel/index.js'; +import Tooltip from '@mui/material/Tooltip/index.js'; import moment from 'moment'; -import DeleteIcon from '@mui/icons-material/Delete'; -import DoYouWantToDeleteDialog from './DoYouWantToDeleteDialog'; -import SvgPreview from './SvgPreview'; -import DotSrcPreview from './DotSrcPreview'; +import { Delete as DeleteIcon } from '@mui/icons-material'; +import DoYouWantToDeleteDialog from './DoYouWantToDeleteDialog.js'; +import SvgPreview from './SvgPreview.js'; +import DotSrcPreview from './DotSrcPreview.js'; const numLinesPreview = 5; diff --git a/src/SaveAsToBrowserDialog.js b/src/SaveAsToBrowserDialog.js index f627b858..ae2f0c72 100644 --- a/src/SaveAsToBrowserDialog.js +++ b/src/SaveAsToBrowserDialog.js @@ -1,17 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogActions from '@mui/material/DialogActions'; -import TextField from '@mui/material/TextField'; -import DoYouWantToReplaceItDialog from './DoYouWantToReplaceItDialog'; +import withRoot from './withRoot.js'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Button from '@mui/material/Button/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import DialogActions from '@mui/material/DialogActions/index.js'; +import TextField from '@mui/material/TextField/index.js'; +import DoYouWantToReplaceItDialog from './DoYouWantToReplaceItDialog.js'; const styles = theme => ({ title: { diff --git a/src/SettingsDialog.js b/src/SettingsDialog.js index eb5d2b94..d87d9b52 100644 --- a/src/SettingsDialog.js +++ b/src/SettingsDialog.js @@ -1,26 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; -import IconButton from '@mui/material/IconButton'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Switch from '@mui/material/Switch'; -import Input from '@mui/material/Input'; -import InputAdornment from '@mui/material/InputAdornment'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; -import CloseIcon from '@mui/icons-material/Close'; +import withRoot from './withRoot.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import Dialog from '@mui/material/Dialog/index.js'; +import DialogContent from '@mui/material/DialogContent/index.js'; +import DialogContentText from '@mui/material/DialogContentText/index.js'; +import DialogTitle from '@mui/material/DialogTitle/index.js'; +import FormGroup from '@mui/material/FormGroup/index.js'; +import FormControlLabel from '@mui/material/FormControlLabel/index.js'; +import FormLabel from '@mui/material/FormLabel/index.js'; +import RadioGroup from '@mui/material/RadioGroup/index.js'; +import Radio from '@mui/material/Radio/index.js'; +import Switch from '@mui/material/Switch/index.js'; +import Input from '@mui/material/Input/index.js'; +import InputAdornment from '@mui/material/InputAdornment/index.js'; +import InputLabel from '@mui/material/InputLabel/index.js'; +import MenuItem from '@mui/material/MenuItem/index.js'; +import FormHelperText from '@mui/material/FormHelperText/index.js'; +import FormControl from '@mui/material/FormControl/index.js'; +import Select from '@mui/material/Select/index.js'; +import { Close as CloseIcon } from '@mui/icons-material'; const engines = [ 'circo', diff --git a/src/SvgPreview.js b/src/SvgPreview.js index a75124cc..fe223157 100644 --- a/src/SvgPreview.js +++ b/src/SvgPreview.js @@ -2,10 +2,10 @@ import React from 'react'; import { useState } from 'react'; import { useEffect } from 'react'; import PropTypes from 'prop-types'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; +import Card from '@mui/material/Card/index.js'; +import CardContent from '@mui/material/CardContent/index.js'; import { withStyles } from 'tss-react/mui'; -import { useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles/index.js'; const previewWidth = 400; const previewHeight = 250; diff --git a/src/TextEditor.js b/src/TextEditor.js index 4db424fb..6fffe390 100644 --- a/src/TextEditor.js +++ b/src/TextEditor.js @@ -1,10 +1,11 @@ import React from 'react'; import { withStyles } from 'tss-react/mui'; -import AceEditor from 'react-ace'; -import 'ace-builds/src-noconflict/mode-dot'; -import 'ace-builds/src-noconflict/theme-github'; -import IconButton from '@mui/material/IconButton'; -import ErrorOutline from '@mui/icons-material/ErrorOutline'; +import ace from 'react-ace'; +import 'ace-builds/src-noconflict/mode-dot.js'; +import 'ace-builds/src-noconflict/theme-github.js'; +import IconButton from '@mui/material/IconButton/index.js'; +import { ErrorOutline } from '@mui/icons-material'; +const AceEditor = ace.default; const styles = { errorButton: { diff --git a/src/UpdatedSnackbar.js b/src/UpdatedSnackbar.js index c748eb69..3a7df965 100644 --- a/src/UpdatedSnackbar.js +++ b/src/UpdatedSnackbar.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import CloseIcon from '@mui/icons-material/Close'; -import IconButton from '@mui/material/IconButton'; -import Snackbar from '@mui/material/Snackbar'; -import SnackbarContent from '@mui/material/SnackbarContent'; +import { Close as CloseIcon } from '@mui/icons-material'; +import IconButton from '@mui/material/IconButton/index.js'; +import Snackbar from '@mui/material/Snackbar/index.js'; +import SnackbarContent from '@mui/material/SnackbarContent/index.js'; import { withStyles } from 'tss-react/mui'; -import withRoot from './withRoot'; +import withRoot from './withRoot.js'; import packageJSON from '../package.json'; import versions from './versions.json'; import graphvizVersions from './graphviz-versions.json'; diff --git a/src/dot.js b/src/dot.js index 9ccb8013..f1ab1db1 100644 --- a/src/dot.js +++ b/src/dot.js @@ -1,4 +1,4 @@ -import parser from './dotParser'; +import parser from './dotParser.js'; var parse = parser.parse; const whitespaceWithinLine = ' \t\r'; diff --git a/src/dot.test.js b/src/dot.test.js index 83b01b33..37f81abc 100644 --- a/src/dot.test.js +++ b/src/dot.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { screen } from '@testing-library/react'; import '@testing-library/jest-dom' -import DotGraph from './dot'; +import DotGraph from './dot.js'; import { readFileSync } from 'fs'; class WrapDot extends React.Component { @@ -1078,12 +1078,12 @@ c # baz it('deletes the first node and the succeeding whitespace in the same line in a graph with two nodes', () => { let dotSrc = `graph { - a b + a b }`; let newDotSrc = `graph { - b + b }`; render(); @@ -1093,7 +1093,7 @@ c # baz it('deletes the second node and the succeeding whitespace in the same line in a graph with two nodes', () => { let dotSrc = `graph { - a b + a b }`; let newDotSrc = `graph { diff --git a/src/index.js b/src/index.js index b5a86ae9..46ff5f8d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Index from './pages/index'; +import Index from './pages/index.js'; ReactDOM.render(, document.querySelector('#root')); diff --git a/src/pages/index.js b/src/pages/index.js index 3504b8db..b6e27f94 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,31 +1,31 @@ import React from 'react'; import 'typeface-roboto'; import PropTypes from 'prop-types'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper/index.js'; +import Grid from '@mui/material/Grid/index.js'; import { withStyles } from 'tss-react/mui'; -import withRoot from '../withRoot'; -import ButtonAppBar from '../ButtonAppBar'; -import Graph from '../Graph'; -import TextEditor from '../TextEditor'; -import MainMenu from '../MainMenu'; -import HelpMenu from '../HelpMenu'; -import SettingsDialog from '../SettingsDialog'; -import OpenFromBrowserDialog from '../OpenFromBrowserDialog'; -import SaveAsToBrowserDialog from '../SaveAsToBrowserDialog'; -import InsertPanels from '../InsertPanels'; -import FormatDrawer from '../FormatDrawer'; +import withRoot from '../withRoot.js'; +import ButtonAppBar from '../ButtonAppBar.js'; +import Graph from '../Graph.js'; +import TextEditor from '../TextEditor.js'; +import MainMenu from '../MainMenu.js'; +import HelpMenu from '../HelpMenu.js'; +import SettingsDialog from '../SettingsDialog.js'; +import OpenFromBrowserDialog from '../OpenFromBrowserDialog.js'; +import SaveAsToBrowserDialog from '../SaveAsToBrowserDialog.js'; +import InsertPanels from '../InsertPanels.js'; +import FormatDrawer from '../FormatDrawer.js'; import { schemeCategory10 as d3_schemeCategory10} from 'd3-scale-chromatic'; import { schemePaired as d3_schemePaired} from 'd3-scale-chromatic'; -import KeyboardShortcutsDialog from '../KeyboardShortcutsDialog'; -import MouseOperationsDialog from '../MouseOperationsDialog'; -import AboutDialog from '../AboutDialog'; +import KeyboardShortcutsDialog from '../KeyboardShortcutsDialog.js'; +import MouseOperationsDialog from '../MouseOperationsDialog.js'; +import AboutDialog from '../AboutDialog.js'; import { parse as qs_parse } from 'qs'; import { stringify as qs_stringify } from 'qs'; -import ExportAsUrlDialog from '../ExportAsUrlDialog'; -import ExportAsSvgDialog from '../ExportAsSvgDialog' -import { graphvizVersion } from '../graphvizVersion'; -import UpdatedSnackbar from '../UpdatedSnackbar'; +import ExportAsUrlDialog from '../ExportAsUrlDialog.js'; +import ExportAsSvgDialog from '../ExportAsSvgDialog.js' +import { graphvizVersion } from '../graphvizVersion.js'; +import UpdatedSnackbar from '../UpdatedSnackbar.js'; import packageJSON from '../../package.json'; const styles = theme => ({ diff --git a/src/withRoot.js b/src/withRoot.js index b8ac2d77..60e97b2b 100644 --- a/src/withRoot.js +++ b/src/withRoot.js @@ -1,6 +1,6 @@ import React from 'react'; -import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; +import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles/index.js'; +import CssBaseline from '@mui/material/CssBaseline/index.js'; // A theme with custom primary and secondary color. // It's optional.