Update spectacle dependencies (#1241)

* chore: one stage of installing dependencies

* chore: more updates

* chore: more dependency changes

* chore: even more package updates

* chore: update history

* chore: update react-spring and others

* chore: update react-swipeable

* chore: update use-resize-observer

* chore: revert the local dependency notation

Author: fritz-c

package.json

@@ -1,49 +1,48 @@
 {
   "name": "spectacle-monorepo",
   "devDependencies": {
-    "@babel/cli": "^7.12.8",
-    "@babel/core": "^7.17.2",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.0",
-    "@changesets/cli": "^2.23.1",
+    "@changesets/cli": "^2.24.4",
     "@svitejs/changesets-changelog-github-compact": "^0.1.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.1.1",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-jsx-to-htm": "^2.0.0",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.4.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.2.0",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.27.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.3.0",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
     "jest-puppeteer": "^6.1.1",
     "mkdirp": "^1.0.4",
     "nps": "^5.10.0",
     "prettier": "^2.4.1",
-    "puppeteer": "^16.0.0",
+    "puppeteer": "^18.0.5",
     "raw-loader": "^4.0.0",
     "rimraf": "^3.0.0",
     "serve": "^14.0.1",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.7.4",
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.8.4",
     "wait-on": "^6.0.1",
     "webpack": "^5.68.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.7.4",
-    "wireit": "^0.7.1"
+    "webpack-dev-server": "^4.11.1",
+    "wireit": "^0.7.2"
   },
   "pnpm": {
     "neverBuiltDependencies": [

packages/create-spectacle/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@types/node": "^18.0.3",
     "@types/prompts": "^2.0.14",
-    "spectacle": "workspace:*"
+    "spectacle": "*"
   },
   "resolutions": {},
   "scripts": {

packages/spectacle/package.json

@@ -18,45 +18,44 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "broadcast-channel": "^3.2.0",
-    "history": "^4.9.0",
+    "broadcast-channel": "^4.17.0",
+    "history": "^5.3.0",
     "kbar": "0.1.0-beta.36",
     "mdast-builder": "^1.1.1",
     "mdast-zone": "^4.0.0",
     "merge-anything": "^3.0.3",
     "mousetrap": "^1.6.5",
-    "query-string": "^6.8.2",
+    "query-string": "^7.1.1",
     "react-fast-compare": "^3.2.0",
     "react-is": "^18.1.0",
-    "react-spring": "^8.0.25",
-    "react-swipeable": "^6.1.0",
+    "react-spring": "^9.5.5",
+    "react-swipeable": "^7.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "rehype-raw": "^5.1.0",
     "rehype-react": "^6.0.0",
     "remark-parse": "^8.0.3",
     "remark-rehype": "^7.0.0",
-    "styled-components": "^4.3.2",
+    "styled-components": "^5.3.6",
     "styled-system": "5.1.5",
     "ulid": "^2.3.0",
     "unified": "^9.0.0",
     "unist-util-visit": "^2.0.3",
-    "use-resize-observer": "^6.1.0"
+    "use-resize-observer": "^9.0.2"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@types/history": "^4.7.9",
     "@types/mousetrap": "^1.6.8",
-    "@types/react": "^18.0.12",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.5",
     "@types/react-is": "^17.0.3",
-    "@types/react-syntax-highlighter": "^15.5.2",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.15",
     "@types/styled-system": "^5.1.5",
     "@types/unist": "^2.0.6",
-    "csstype": "^3.1.0",
+    "csstype": "^3.1.1",
     "process": "^0.11.10",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"

packages/spectacle/src/components/appear.tsx

@@ -42,15 +42,19 @@ const SteppedComponent = (props: SteppedComponentProps): JSX.Element => {
   }
 
   const springStyle = useSpring({
-    to: isActive ? activeStyle : inactiveStyle,
+    to: (isActive ? activeStyle : inactiveStyle) as React.CSSProperties,
     immediate
   });
 
   return (
     <>
       {placeholder}
       <AnimatedEl
-        style={alwaysAppearActive ? activeStyle : springStyle}
+        style={
+          alwaysAppearActive
+            ? (activeStyle as React.CSSProperties)
+            : springStyle
+        }
         className={className}
         data-testid="AppearElement"
       >

packages/spectacle/src/components/deck/default-deck.tsx

@@ -75,13 +75,13 @@ const DefaultDeck = (props: DefaultDeckProps): JSX.Element => {
   );
 
   const onMobileSlide: DeckInternalProps['onMobileSlide'] = (e) => {
-    if (navigator.maxTouchPoints < 1) return;
+    if (navigator.maxTouchPoints < 1 || !deck.current) return;
     switch (e.dir) {
       case 'Left':
-        deck.current!.stepForward();
+        deck.current.stepForward();
         break;
       case 'Right':
-        deck.current!.regressSlide();
+        deck.current.regressSlide();
         break;
     }
   };

packages/spectacle/src/components/markdown/markdown.tsx

@@ -209,11 +209,9 @@ export const Markdown = forwardRef<HTMLDivElement, MarkdownProps>(
   }
 );
 
-type PropsFrom<T extends ElementType> = T extends ElementType<infer Props>
-  ? Props
-  : never;
-
-const AppearingListItem = (props: PropsFrom<typeof ListItem>) => (
+const AppearingListItem = (
+  props: React.ComponentPropsWithoutRef<typeof ListItem>
+) => (
   <Appear>
     <ListItem {...props} />
   </Appear>

packages/spectacle/src/hooks/use-location-sync.ts

@@ -61,7 +61,7 @@ export default function useLocationSync({
   // "down-sync" from location to state
   useEffect(() => {
     if (!initialized && disableInteractivity) return;
-    return history.listen((location) => {
+    return history.listen(({ location }) => {
       setState(mapLocationToState(location));
     });
   }, [