chore: optimize bundle

AykutSarac · Jul 16, 2023 · 0e35c6a · 0e35c6a
1 parent 4787758
commit 0e35c6a
Show file tree

Hide file tree

Showing 60 changed files with 639 additions and 507 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -6,7 +6,24 @@
     "space-in-parens": "error",
     "no-empty": "error",
     "no-multiple-empty-lines": "error",
-    "no-irregular-whitespace": "error"
+    "no-irregular-whitespace": "error",
+    "strict": ["error", "never"],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double", { "avoidEscape": true }],
+    "semi": ["error", "always"],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
+    ],
+    "space-before-function-paren": [
+      "error",
+      {
+        "anonymous": "always",
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ]
   },
   "extends": ["next/core-web-vitals"],
   "plugins": ["prettier", "unused-imports"]

diff --git a/next.config.js b/next.config.js
@@ -1,27 +1,34 @@
 const { withSentryConfig } = require("@sentry/nextjs");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
 /**
  * @type {import('next').NextConfig}
  */
 const config = {
+  output: "export",
   reactStrictMode: false,
   productionBrowserSourceMaps: true,
   compiler: {
     styledComponents: true,
   },
 };
 
-module.exports = withSentryConfig(
-  config,
-  {
-    silent: true,
-    org: "aykut-sarac",
-    project: "json-crack",
-  },
-  {
-    widenClientFileUpload: true,
-    hideSourceMaps: true,
-    disableLogger: true,
-    disableServerWebpackPlugin: true,
-  }
-);
+module.exports =
+  process.env.ANALYZE === "true"
+    ? withBundleAnalyzer(config)
+    : withSentryConfig(
+        config,
+        {
+          silent: true,
+          org: "aykut-sarac",
+          project: "json-crack",
+        },
+        {
+          widenClientFileUpload: true,
+          hideSourceMaps: true,
+          disableLogger: true,
+          disableServerWebpackPlugin: true,
+        }
+      );
diff --git a/package.json b/package.json
@@ -1,77 +1,78 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.8.0",
+  "version": "v3.0.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build",
+    "analyze": "ANALYZE=true npm run build",
     "start": "next start",
     "lint": "tsc && eslint src && prettier --check src",
-    "lint:fix": "prettier --write src & eslint --fix src",
+    "lint:fix": "eslint --fix src & prettier --write src",
     "deploy": "gh-pages -d out -t true"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
-    "@mantine/core": "^6.0.13",
-    "@mantine/form": "^6.0.13",
-    "@mantine/hooks": "^6.0.13",
-    "@mantine/next": "^6.0.13",
-    "@mantine/prism": "^6.0.13",
+    "@mantine/core": "^6.0.16",
+    "@mantine/form": "^6.0.16",
+    "@mantine/hooks": "^6.0.16",
+    "@mantine/next": "^6.0.16",
+    "@mantine/prism": "^6.0.16",
     "@monaco-editor/react": "^4.5.1",
     "@sentry/nextjs": "^7.55.2",
-    "@tanstack/react-query": "^4.29.14",
+    "@tanstack/react-query": "^4.29.25",
     "allotment": "^1.19.0",
     "altogic": "^2.3.9",
     "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
+    "dayjs": "^1.11.9",
     "html-to-image": "^1.11.11",
     "json-2-csv": "^4.0.0",
     "jsonc-parser": "^3.2.0",
-    "jsonwebtoken": "^9.0.0",
+    "jsonwebtoken": "^9.0.1",
     "jxon": "^2.0.0-beta.5",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "lz-string": "^1.5.0",
-    "next": "13.2.3",
+    "next": "13.3.0",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^4.9.0",
+    "react-icons": "^4.10.1",
     "react-linkify-it": "^1.0.7",
     "react-simple-typewriter": "^5.0.1",
     "react-syntax-highlighter": "^15.5.0",
-    "react-zoom-pan-pinch": "^3.0.8",
+    "react-zoom-pan-pinch": "^3.1.0",
     "reaflow": "5.1.2",
     "styled-components": "^5.3.8",
     "toml": "^3.0.0",
     "universal-cookie": "^4.0.4",
-    "zustand": "^4.3.8"
+    "zustand": "^4.3.9"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.4.3",
+    "@next/bundle-analyzer": "^13.4.10",
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.set": "^4.3.7",
     "@types/lz-string": "^1.5.0",
-    "@types/node": "^20.2.1",
+    "@types/node": "^20.4.2",
     "@types/react": "18.2.6",
     "@types/react-color": "^3.0.6",
     "@types/react-syntax-highlighter": "^15.5.7",
     "@types/styled-components": "^5.1.26",
-    "eslint": "8.43.0",
-    "eslint-config-next": "13.4.6",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "prettier": "^2.8.8",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "prettier": "^3.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "5.0.4"
+    "typescript": "5.1.6"
   }
 }
diff --git a/public/assets/multidata.png b/public/assets/multidata.png
diff --git a/public/assets/multidata.webp b/public/assets/multidata.webp
diff --git a/src/api/altogic.ts b/src/api/altogic.ts
diff --git a/src/pages/Mona-Sans.woff2 → src/assets/fonts/Mona-Sans.woff2 b/src/pages/Mona-Sans.woff2 → src/assets/fonts/Mona-Sans.woff2
diff --git a/src/components/AdTest/index.tsx b/src/components/AdTest/index.tsx
@@ -45,13 +45,17 @@ const AdWrapper = styled.div`
     background: #fff;
     box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.15);
     opacity: 0;
-    transition: transform 0.2s ease-in-out, opacity 0.1s ease-in-out;
+    transition:
+      transform 0.2s ease-in-out,
+      opacity 0.1s ease-in-out;
     transform: scale(1) translateY(-50px);
   }
 
   & #native-button:checked + .native-overlay {
     opacity: 1;
-    transition: transform 0.2s ease-in-out, opacity 0.4s ease-in-out;
+    transition:
+      transform 0.2s ease-in-out,
+      opacity 0.4s ease-in-out;
     transform: scale(1) translateY(0);
   }
 
@@ -119,6 +123,7 @@ export const AdTest = () => {
     if (window.innerWidth < 660) return;
     ref.current.innerHTML = "";
     const s = document.createElement("script");
+
     s.id = "_carbonads_js";
     s.innerHTML = `(function() {
         if (typeof _bsa !== 'undefined' && _bsa) {

diff --git a/src/components/CarbonAds/index.tsx b/src/components/CarbonAds/index.tsx
@@ -9,8 +9,9 @@ export const CarbonAds = () => {
     if (!premium) {
       ref.current.innerHTML = "";
       const s = document.createElement("script");
+
       s.id = "_carbonads_js";
-      s.src = `//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom`;
+      s.src = "//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom";
       ref.current.appendChild(s);
     }
   }, [premium]);

diff --git a/src/components/CustomNode/ObjectNode.tsx b/src/components/CustomNode/ObjectNode.tsx
@@ -5,11 +5,12 @@ import * as Styled from "./styles";
 
 const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
   const { text, width, height, data } = node;
-  if (data.isEmpty) return null;
+
+  if (data?.isEmpty) return null;
 
   return (
     <Styled.StyledForeignObject width={width} height={height} x={0} y={0} isObject>
-      {text.map((val, idx) => {
+      {(text as [string, unknown][]).map((val, idx) => {
         return (
           <Styled.StyledRow
             data-key={JSON.stringify(val)}

diff --git a/src/components/CustomNode/TextNode.tsx b/src/components/CustomNode/TextNode.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { MdLink, MdLinkOff } from "react-icons/md";
 import { CustomNodeProps } from "src/components/CustomNode";
+import { isContentImage } from "src/lib/utils/core/calculateNodeSize";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
-import { isContentImage } from "src/utils/core/calculateNodeSize";
 import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 
@@ -56,7 +56,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const isImage = imagePreview && isContentImage(text);
+  const isImage = imagePreview && isContentImage(text as string);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -75,7 +75,7 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
     >
       {isImage ? (
         <StyledImageWrapper>
-          <StyledImage src={text} width="70" height="70" loading="lazy" />
+          <StyledImage src={text as string} width="70" height="70" loading="lazy" />
         </StyledImageWrapper>
       ) : (
         <StyledTextNodeWrapper

diff --git a/src/components/CustomNode/index.tsx b/src/components/CustomNode/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Node, NodeProps } from "reaflow";
+import { NodeData } from "src/types/models";
 import { ObjectNode } from "./ObjectNode";
 import { TextNode } from "./TextNode";
 

diff --git a/src/components/GoogleAnalytics/index.tsx b/src/components/GoogleAnalytics/index.tsx
@@ -4,7 +4,7 @@ import Script from "next/script";
 const isDevelopment = process.env.NODE_ENV === "development";
 const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
 
-export const GoogleAnalytics: React.FC = () => {
+const GoogleAnalytics: React.FC = () => {
   if (isDevelopment) return null;
 
   return (
@@ -30,3 +30,5 @@ export const GoogleAnalytics: React.FC = () => {
     </>
   );
 };
+
+export default GoogleAnalytics;
diff --git a/src/components/Graph/PremiumView.tsx b/src/components/Graph/PremiumView.tsx
@@ -64,20 +64,32 @@ const StyledPremiumView = styled.div`
 
   .glowing span:nth-child(3n + 1)::before {
     background: rgba(134, 255, 0, 1);
-    box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1),
-      0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1);
+    box-shadow:
+      0 0 20px rgba(134, 255, 0, 1),
+      0 0 40px rgba(134, 255, 0, 1),
+      0 0 60px rgba(134, 255, 0, 1),
+      0 0 80px rgba(134, 255, 0, 1),
+      0 0 0 8px rgba(134, 255, 0, 0.1);
   }
 
   .glowing span:nth-child(3n + 2)::before {
     background: rgba(255, 214, 0, 1);
-    box-shadow: 0 0 20px rgba(255, 214, 0, 1), 0 0 40px rgba(255, 214, 0, 1),
-      0 0 60px rgba(255, 214, 0, 1), 0 0 80px rgba(255, 214, 0, 1), 0 0 0 8px rgba(255, 214, 0, 0.1);
+    box-shadow:
+      0 0 20px rgba(255, 214, 0, 1),
+      0 0 40px rgba(255, 214, 0, 1),
+      0 0 60px rgba(255, 214, 0, 1),
+      0 0 80px rgba(255, 214, 0, 1),
+      0 0 0 8px rgba(255, 214, 0, 0.1);
   }
 
   .glowing span:nth-child(3n + 3)::before {
     background: rgba(0, 226, 255, 1);
-    box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1),
-      0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1);
+    box-shadow:
+      0 0 20px rgba(0, 226, 255, 1),
+      0 0 40px rgba(0, 226, 255, 1),
+      0 0 60px rgba(0, 226, 255, 1),
+      0 0 80px rgba(0, 226, 255, 1),
+      0 0 0 8px rgba(0, 226, 255, 0.1);
   }
 
   .glowing span:nth-child(3n + 1) {

diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx
@@ -8,11 +8,14 @@ import useToggleHide from "src/hooks/useToggleHide";
 import useGraph from "src/store/useGraph";
 import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
+import { NodeData } from "src/types/models";
 import { Loading } from "../../layout/Loading";
 import { ErrorView } from "./ErrorView";
 import { PremiumView } from "./PremiumView";
 
-const Canvas = dynamic(() => import("reaflow").then(r => r.Canvas));
+const Canvas = dynamic(() => import("reaflow").then(r => r.Canvas), {
+  ssr: false,
+});
 
 interface GraphProps {
   isWidget?: boolean;
@@ -32,8 +35,16 @@ const StyledEditorWrapper = styled.div<{ widget: boolean }>`
     linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
     linear-gradient(var(--line-color-2) 1px, transparent 1px),
     linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
-  background-position: -1.5px -1.5px, -1.5px -1.5px, -1px -1px, -1px -1px;
-  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+  background-position:
+    -1.5px -1.5px,
+    -1.5px -1.5px,
+    -1px -1px,
+    -1px -1px;
+  background-size:
+    100px 100px,
+    100px 100px,
+    20px 20px,
+    20px 20px;
 
   :active {
     cursor: move;
@@ -116,6 +127,7 @@ export const Graph = ({ isWidget = false }: GraphProps) => {
 
   const memoizedNode = React.useCallback(
     (props: JSX.IntrinsicAttributes & NodeProps<any>) => (
+      // @ts-ignore
       <CustomNode {...props} onClick={handleNodeClick} animated={false} />
     ),
     [handleNodeClick]

diff --git a/src/components/HovercardAds/index.tsx b/src/components/HovercardAds/index.tsx
@@ -6,6 +6,7 @@ export const HovercardAds = () => {
 
   React.useEffect(() => {
     const isAvailable = document.querySelectorAll("#_hellobar_")[0];
+
     if (typeof window._bsa !== "undefined" && window._bsa && !!!isAvailable) {
       window._bsa.init("hellobar", "CE7IPKQL", "placement:jsoncrackcom");
     }

diff --git a/src/constants/customFonts.ts b/src/constants/customFonts.ts
@@ -1,7 +1,7 @@
 import localFont from "next/font/local";
 
 const monaSans = localFont({
-  src: "../pages/Mona-Sans.woff2",
+  src: "../assets/fonts/Mona-Sans.woff2",
   variable: "--mona-sans",
   display: "swap",
   fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],