migrate to vite

danielacorner · Sep 22, 2023 · abfa7d1 · abfa7d1
1 parent 45b05e2
commit abfa7d1
Show file tree

Hide file tree

Showing 16 changed files with 2,602 additions and 17,707 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-styled-components",
+      {
+        "displayName": false
+      }
+    ]
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -9,7 +9,7 @@
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -7,8 +7,9 @@
     <!-- https://stackoverflow.com/questions/43391307/chromecast-button-with-html-and-javascript -->
     <script src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
   </head>
-  <body style="overflow: hidden;">
+  <body style="overflow: hidden">
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
   <script>
     // https://developers.google.com/cast/docs/chrome_sender/integrate

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.1",
     "@testing-library/user-event": "^7.2.1",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "babel-plugin-styled-components": "^2.1.4",
     "js-string-compression": "^1.0.1",
     "lz-string": "^1.4.4",
@@ -21,15 +22,15 @@
     "react-mde": "^8.2.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^5.0.1",
     "react-swipeable": "^5.5.1",
-    "styled-components": "^6.0.7"
+    "styled-components": "^6.0.8",
+    "vite-plugin-svgr": "^4.0.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -45,5 +46,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.4",
+    "vite": "^4.4.9"
   }
 }
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
diff --git a/src/components/Deck.jsx b/src/components/Deck.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import {
   useDeck,
   useSyncDeckWithHash,
@@ -178,7 +178,7 @@ function SlideIndicator({ slideIndex, numSlides }) {
     }, 1000)
   }, [slideIndex])
 
-  return <Styles show={show}>{`${slideIndex + 1}/${numSlides}`}</Styles>;
+  return <Styles $show={show}>{`${slideIndex + 1}/${numSlides}`}</Styles>;
 }
 const Styles = styled.div`
   position: absolute;
@@ -187,5 +187,5 @@ const Styles = styled.div`
   color: white;
   font-size: 2em;
   transition: opacity 0.5s;
-  opacity: ${(props) => (props.show ? 1 : 0)};
+  opacity: ${(props) => (props.$show ? 1 : 0)};
 `;
diff --git a/src/components/EditorAndPreview.jsx b/src/components/EditorAndPreview.jsx
@@ -10,7 +10,7 @@ import {
   defaultValue,
 } from "../utils/constants";
 import ReactMde from "react-mde";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import { useMediaQuery } from "@material-ui/core";
 import { useHistory, useLocation } from "react-router";
 import { useDeck } from "../utils/customHooks";
@@ -27,9 +27,9 @@ const EditorAndPreviewStyles = styled.div`
   width: 100%;
   display: grid;
   grid-template-columns: ${(props) =>
-    props.isPreviewVisible && props.isTabletOrLarger ? "50vw 50vw" : "1fr"};
+    props.$isPreviewVisible && props.$isTabletOrLarger ? "50vw 50vw" : "1fr"};
   grid-template-rows: ${(props) =>
-    props.isPreviewVisible && !props.isTabletOrLarger ? "50vh 50vh" : "1fr"};
+    props.$isPreviewVisible && !props.$isTabletOrLarger ? "50vh 50vh" : "1fr"};
   .editor {
     width: 100%;
     max-width: 100vw;
@@ -60,8 +60,8 @@ const EditorAndPreviewStyles = styled.div`
     textarea,
     .mde-header,
     .mde-header * {
-      background: ${(props) => props.STYLES.background};
-      color: ${(props) => props.STYLES.color};
+      background: ${(props) => props.$STYLES.background};
+      color: ${(props) => props.$STYLES.color};
     }
   }
 `;
@@ -164,9 +164,9 @@ export default function EditorAndPreview({ isPreviewVisible, isLightTheme }) {
   const STYLES = THEMES[isLightTheme ? "LIGHT" : "DARK"].STYLES;
   return (
     <EditorAndPreviewStyles
-      STYLES={STYLES}
-      isPreviewVisible={isPreviewVisible}
-      isTabletOrLarger={isTabletOrLarger}
+      $STYLES={STYLES}
+      $isPreviewVisible={isPreviewVisible}
+      $isTabletOrLarger={isTabletOrLarger}
       className="editorAndPreview"
     >
       <div className="editor">
@@ -194,9 +194,8 @@ export default function EditorAndPreview({ isPreviewVisible, isLightTheme }) {
               value={editorValue}
               onChange={handleEditorChange}
               editorDidMount={editorDidMount}
-              height={`calc(${
-                isPreviewVisible && !isTabletOrLarger ? 50 : 100
-              }vh - ${PROMPT_HEIGHT_PX}px)`}
+              height={`calc(${isPreviewVisible && !isTabletOrLarger ? 50 : 100
+                }vh - ${PROMPT_HEIGHT_PX}px)`}
               width={"100%"}
               language="markdown"
               theme={isLightTheme ? "light" : "dark"}

diff --git a/src/components/EditorControls.jsx b/src/components/EditorControls.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Switch, useMediaQuery } from "@material-ui/core";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import { BREAKPOINTS, THEMES } from "../utils/constants";
 import { useWindowSize } from "../utils/customHooks";
 import queryString from "query-string";
@@ -20,7 +20,7 @@ const ControlsStyles = styled.div`
     }
   }
   .layoutSwitch .preview {
-    color: ${(props) => (props.isLightTheme ? "black" : "white")};
+    color: ${(props) => (props.$isLightTheme ? "black" : "white")};
   }
 `;
 
@@ -57,7 +57,7 @@ export default function EditorControls({
         left: isTabletOrLarger ? 30 : windowSize.width - 160,
         top: windowSize.height - (isTabletOrLarger ? 90 : 140),
       }}
-      isLightTheme={isLightTheme}
+      $isLightTheme={isLightTheme}
     >
       <div className="layoutSwitch">
         <span className="preview">Preview</span>{" "}

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 import { useLocation } from "react-router";
 import { Button, Snackbar } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";

diff --git a/src/components/Slide.jsx b/src/components/Slide.jsx
@@ -1,20 +1,20 @@
 import Markdown from "markdown-to-jsx";
 import React from "react";
-import styled from "styled-components/macro";
+import styled from "styled-components";
 
 import { TRANSITION } from "../utils/constants";
 
 const SlideStyles = styled.div`
   position: relative;
-  display: ${(props) => (props.idx === props.slideIndex ? `grid` : `none`)};
+  display: ${(props) => (props.$idx === props.$slideIndex ? `grid` : `none`)};
   height: 100%;
   width: 100%;
   & > div {
     max-width: 100vw;
   }
   transition: ${TRANSITION};
-  background: ${(props) => props.background};
-  color: ${(props) => props.color};
+  background: ${(props) => props.$background};
+  color: ${(props) => props.$color};
   text-align: center;
   place-items: center;
   font-size: 2em;
@@ -29,7 +29,7 @@ const SlideStyles = styled.div`
   a {
     color: hsl(240, 100%, 59%);
   }
-  ${(props) => props.slideCustomCss}
+  ${(props) => props.$slideCustomCss}
 `;
 
 const SINGLE_IMAGE_SLIDE_PROPS = {
@@ -83,12 +83,12 @@ export default function Slide({
 }) {
   return (
     <SlideStyles
-      isImageSlide={isSingleImageSlideNoText}
-      slideCustomCss={slideCustomCss}
-      idx={idx}
-      slideIndex={slideIndex}
-      background={background}
-      color={color}
+      $isImageSlide={isSingleImageSlideNoText}
+      $slideCustomCss={slideCustomCss}
+      $idx={idx}
+      $slideIndex={slideIndex}
+      $background={background}
+      $color={color}
     >
       <Markdown
         {...(isSingleImageSlideNoText

diff --git a/src/index.js b/src/index.js
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+// import * as serviceWorker from "./serviceWorker";
+
+import AppWithRouter from "./Router";
+
+ReactDOM.render(<AppWithRouter />, document.getElementById("root"));
+
+// // If you want your app to work offline and load faster, you can change
+// // unregister() to register() below. Note this comes with some pitfalls.
+// // Learn more about service workers: https://bit.ly/CRA-PWA
+// serviceWorker.unregister();
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
     /coverage
     # production
-    /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@