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 mui/material-ui#30671 (comment). add workaround for react-ace not published in ESM module format See securingsincity/react-ace#1540 (comment).
magjac · Dec 16, 2023 · c8d1ea4 · c8d1ea4
1 parent 388b2a1
commit c8d1ea4
Show file tree

Hide file tree

Showing 25 changed files with 206 additions and 205 deletions.
diff --git 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';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
 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';
+import { Close as CloseIcon } from '@mui/icons-material';
 
 const styles = theme => ({
   title: {

diff --git 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';
+import { Toolbar } from '@mui/material';
+import { Typography } from '@mui/material';
+import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
+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
@@ -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';
+import { Input } from '@mui/material';
 
 import { ChromePicker } from 'react-color'
 

diff --git 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';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
 
 const styles = theme => ({
   title: {

diff --git 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';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
 
 const styles = theme => ({
   title: {

diff --git 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';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Input } from '@mui/material';
 
 const styles = theme => ({
   title: {

diff --git 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';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Input } from '@mui/material';
 
 const styles = theme => ({
   title: {

diff --git 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';
+import { Drawer } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Divider } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { ChevronLeft as ChevronLeftIcon } from '@mui/icons-material';
+import { ChevronRight as ChevronRightIcon } from '@mui/icons-material';
+import { FormControl } from '@mui/material';
+import { FormGroup } from '@mui/material';
+import { FormControlLabel } from '@mui/material';
+import { Checkbox } from '@mui/material';
+import { Switch } from '@mui/material';
+import ColorPicker from './ColorPicker.js'
 
 const drawerWidth = '100%';
 

diff --git 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';
 
 function GitHubIcon(props) {
   return (

diff --git a/src/Graph.js b/src/Graph.js
@@ -1,16 +1,16 @@
 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';
+import { CircularProgress } from '@mui/material';
 import { select as d3_select} from 'd3-selection';
 import { selectAll as d3_selectAll} from 'd3-selection';
 import { transition as d3_transition} from 'd3-transition';
 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
@@ -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';
+import { MenuItem } from '@mui/material';
 
 class HelpMenu extends React.Component {
 

diff --git 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';
+import { AccordionDetails } from '@mui/material';
+import { AccordionSummary } from '@mui/material';
+import { Typography } from '@mui/material';
+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
@@ -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';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableRow } from '@mui/material';
+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
@@ -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';
+import { MenuItem } from '@mui/material';
 
 class MainMenu extends React.Component {
 

diff --git 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';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableRow } from '@mui/material';
+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
@@ -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';
+import { Button } from '@mui/material';
+import { Dialog } from '@mui/material';
+import { DialogContent } from '@mui/material';
+import { DialogContentText } from '@mui/material';
+import { DialogTitle } from '@mui/material';
+import { DialogActions } from '@mui/material';
+import { Table } from '@mui/material';
+import { TableHead } from '@mui/material';
+import { TableRow } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { TableBody } from '@mui/material';
+import { TableSortLabel } from '@mui/material';
+import { Tooltip } from '@mui/material';
 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;