Skip to content

Commit 092d4c0

Browse files
lukesmurraylukesmurray
committed
upgrade dependencies
1 parent fb420d2 commit 092d4c0

File tree

12 files changed

+1849
-1057
lines changed

12 files changed

+1849
-1057
lines changed

‎lib/useReactQueryAutoSave.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { useMutation, UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
12
import debounce from "lodash.debounce";
23
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
3-
import { useMutation, UseMutationOptions, UseMutationResult } from "react-query";
44
import { ReactQueryAutoSaveSaveStatus } from "./ReactQueryAutoSyncSaveStatus";
55
import { UseReactQueryAutoSyncDraftProvider } from "./UseReactQueryAutoSyncDraftProvider";
66
import { AutoSaveOptions, EmptyDebounceFunc, MergeFunc } from "./utils";

‎lib/useReactQueryAutoSync.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import debounce from "lodash.debounce";
2-
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
31
import {
42
QueryKey,
53
useMutation,
@@ -9,7 +7,9 @@ import {
97
useQueryClient,
108
UseQueryOptions,
119
UseQueryResult,
12-
} from "react-query";
10+
} from "@tanstack/react-query";
11+
import debounce from "lodash.debounce";
12+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
1313
import { ReactQueryAutoSyncSaveStatus } from "./ReactQueryAutoSyncSaveStatus";
1414
import { UseReactQueryAutoSyncDraftProvider } from "./UseReactQueryAutoSyncDraftProvider";
1515
import { AutoSaveOptions } from "./utils/AutoSaveOptions";

‎package.json‎

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -30,44 +30,46 @@
3030
"serve": "vite preview --config vite.example.config.ts"
3131
},
3232
"peerDependencies": {
33-
"react": "^17.0.0",
34-
"react-dom": "^17.0.0",
35-
"react-query": "^3.19.1"
33+
"@tanstack/react-query": "^4.7.2",
34+
"react": "^18.2.0",
35+
"react-dom": "^18.2.0"
3636
},
3737
"dependencies": {
3838
"lodash.debounce": "^4.0.8"
3939
},
4040
"devDependencies": {
41-
"@reach/rect": "^0.15.3",
42-
"@rollup/plugin-typescript": "^8.2.5",
43-
"@types/lodash.debounce": "^4.0.6",
44-
"@types/node": "^16.4.3",
45-
"@types/react": "^17.0.0",
46-
"@types/react-dom": "^17.0.0",
47-
"@types/styled-components": "^5.1.11",
48-
"@typescript-eslint/eslint-plugin": "^4.28.5",
49-
"@typescript-eslint/parser": "^4.28.5",
50-
"@vitejs/plugin-react-refresh": "^1.3.1",
51-
"eslint": "^7.31.0",
52-
"eslint-config-prettier": "^8.3.0",
53-
"eslint-plugin-prettier": "^3.4.0",
54-
"eslint-plugin-react": "^7.24.0",
55-
"eslint-plugin-react-hooks": "^4.2.0",
56-
"leva": "^0.9.13",
57-
"msw": "^0.33.2",
58-
"nanoid": "^3.1.23",
59-
"perfect-freehand": "^0.4.10",
60-
"prettier": "^2.3.2",
61-
"react": "^17.0.2",
62-
"react-dom": "^17.0.2",
63-
"react-query": "^3.19.1",
41+
"@reach/rect": "^0.17.0",
42+
"@rollup/plugin-typescript": "^8.5.0",
43+
"@tanstack/react-query": "^4.7.2",
44+
"@tanstack/react-query-devtools": "^4.7.2",
45+
"@types/lodash.debounce": "^4.0.7",
46+
"@types/node": "^18.7.23",
47+
"@types/react": "^18.0.21",
48+
"@types/react-dom": "^18.0.6",
49+
"@types/styled-components": "^5.1.26",
50+
"@typescript-eslint/eslint-plugin": "^5.38.1",
51+
"@typescript-eslint/parser": "^5.38.1",
52+
"@vitejs/plugin-react": "^2.1.0",
53+
"babel-plugin-macros": "^3.1.0",
54+
"babel-plugin-styled-components": "^2.0.7",
55+
"eslint": "^8.24.0",
56+
"eslint-config-prettier": "^8.5.0",
57+
"eslint-plugin-prettier": "^4.2.1",
58+
"eslint-plugin-react": "^7.31.8",
59+
"eslint-plugin-react-hooks": "^4.6.0",
60+
"leva": "^0.9.31",
61+
"msw": "^0.47.3",
62+
"nanoid": "^4.0.0",
63+
"perfect-freehand": "^1.2.0",
64+
"prettier": "^2.7.1",
65+
"react": "^18.2.0",
66+
"react-dom": "^18.2.0",
6467
"rollup-plugin-copy": "^3.4.0",
65-
"styled-components": "^5.3.0",
66-
"tailwindcss": "^2.2.7",
67-
"twin.macro": "^2.6.2",
68-
"typescript": "^4.3.2",
69-
"vite": "^2.4.2",
70-
"vite-plugin-babel-macros": "^1.0.5"
68+
"styled-components": "^5.3.6",
69+
"tailwindcss": "^3.1.8",
70+
"twin.macro": "^2.8.2",
71+
"typescript": "^4.8.4",
72+
"vite": "^3.1.4"
7173
},
7274
"sideEffects": false,
7375
"msw": {

‎src/components/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2+
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
13
import React from "react";
2-
import { QueryClient, QueryClientProvider } from "react-query";
3-
import { ReactQueryDevtools } from "react-query/devtools";
44
import { GlobalStyles } from "twin.macro";
55
import { Demo } from "./Demo";
66

‎src/components/Demo.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function Demo() {
2828
ref={eventElementRef}
2929
height="100%"
3030
width="100%"
31+
// eslint-disable-next-line react/no-unknown-property
3132
css={[
3233
tw`bg-gray-100 rounded-md`,
3334
css`
@@ -128,7 +129,7 @@ function useStrokes() {
128129
return useReactQueryAutoSync({
129130
// pass standard query options for loading data from the server
130131
queryOptions: {
131-
queryKey: "getStrokes",
132+
queryKey: ["getStrokes"],
132133
queryFn: async () =>
133134
await fetch(`/load`)
134135
.then((res) => res.json())

‎src/main.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from "react";
2-
import ReactDOM from "react-dom";
32
import App from "./components/App";
43

5-
ReactDOM.render(
4+
import { createRoot } from "react-dom/client";
5+
6+
const container = document.getElementById("root");
7+
const root = createRoot(container!);
8+
root.render(
69
<React.StrictMode>
710
<App />
811
</React.StrictMode>,
9-
document.getElementById("root"),
1012
);

‎src/styles/GlobalStyles.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import React from "react";
22
import { createGlobalStyle } from "styled-components";
33
import tw, { GlobalStyles as BaseStyles, theme } from "twin.macro";
44

5-
const CustomStyles = createGlobalStyle`
6-
body {
7-
-webkit-tap-highlight-color: ${theme`colors.purple.500`};
8-
${tw`antialiased`}
9-
}
10-
`;
5+
const CustomStyles = createGlobalStyle({
6+
body: {
7+
WebkitTapHighlightColor: theme`colors.purple.500`,
8+
...tw`antialiased`,
9+
},
10+
});
1111

1212
const GlobalStyles = () => (
1313
<>
1414
<BaseStyles />
15+
{/* @ts-expect-error -- styled components typing issue */}
1516
<CustomStyles />
1617
</>
1718
);

‎src/types/twin.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { DOMAttributes } from "react";
21
import styledImport, { css as cssImport, CSSProp } from "styled-components";
32
import "twin.macro";
43

@@ -12,17 +11,18 @@ declare module "react" {
1211
// The css prop
1312
interface HTMLAttributes<T> extends DOMAttributes<T> {
1413
css?: CSSProp;
14+
tw?: string;
1515
}
1616
// The inline svg css prop
1717
interface SVGProps<T> extends SVGProps<SVGSVGElement> {
1818
css?: CSSProp;
19+
tw?: string;
1920
}
2021
}
2122

2223
// The 'as' prop on styled components
2324
declare global {
2425
namespace JSX {
25-
//@ts-expect-error this comes from twin.example repo
2626
interface IntrinsicAttributes<T> extends DOMAttributes<T> {
2727
as?: string | Element;
2828
}

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,5 @@
1515
"noEmit": true,
1616
"jsx": "react"
1717
},
18-
"include": ["./src", "./lib"]
18+
"include": ["./src", "./src/types", "./lib"]
1919
}

‎vite.example.config.ts‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import reactRefresh from "@vitejs/plugin-react-refresh";
1+
import react from "@vitejs/plugin-react";
22
import path from "path";
33
import copy from "rollup-plugin-copy";
44
import { defineConfig } from "vite";
5-
import macrosPlugin from "vite-plugin-babel-macros";
65

76
export default defineConfig({
8-
plugins: [reactRefresh(), macrosPlugin()],
7+
plugins: [
8+
react({
9+
babel: {
10+
plugins: ["babel-plugin-macros", "babel-plugin-styled-components"],
11+
},
12+
}),
13+
],
914
build: {
1015
outDir: "public",
1116
emptyOutDir: true,
@@ -28,4 +33,16 @@ export default defineConfig({
2833
"process.env": {},
2934
"process.versions": {},
3035
},
36+
server: {
37+
port: 3000,
38+
},
39+
optimizeDeps: {
40+
esbuildOptions: {
41+
target: "es2020",
42+
},
43+
},
44+
esbuild: {
45+
// https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
46+
logOverride: { "this-is-undefined-in-esm": "silent" },
47+
},
3148
});

0 commit comments

Comments
 (0)