From 267e8c20c1bac2a32d53ddbd21c4fbffae053446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerd=20M=C3=BCller?= Date: Wed, 20 Dec 2023 09:55:29 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20perf:=20add=20import=20sorting?= =?UTF-8?q?=20order=20+=20lazy=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 17 +---- .prettierrc | 20 ++++++ package-lock.json | 129 ++++++++++++++++++++++++++++++++++ package.json | 2 + src/components/App.tsx | 5 +- src/components/Collection.tsx | 17 +++-- src/components/Layout.tsx | 6 +- src/components/Select.tsx | 8 +-- src/components/Start.tsx | 3 +- src/main.tsx | 1 + src/utils.tsx | 8 +-- 11 files changed, 180 insertions(+), 36 deletions(-) create mode 100644 .prettierrc diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 451a8b8..a6bfcbb 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -10,19 +10,6 @@ module.exports = { ], ignorePatterns: ['dist', '.eslintrc.cjs'], parser: '@typescript-eslint/parser', - plugins: ['react-refresh', 'prettier'], - rules: { - 'prettier/prettier': [ - 'error', - { - singleQuote: false, - semi: true, - printWidth: 80, - }, - ], - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], - }, + plugins: ['react-refresh'], + rules: { 'prettier/prettier': 1}, } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9dab4a0 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,20 @@ +{ + "bracketSpacing": true, + "jsonRecursiveSort": true, + "importOrder": [ + "", + "^@material-ui/(.*)$", + "src", + "^[./]" + ], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true, + "plugins": [ + "prettier-plugin-sort-json", + "@trivago/prettier-plugin-sort-imports" + ], + "semi": true, + "singleQuote": false, + "printWidth": 80, + "trailingComma": "all" + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 640e98d..fcaedd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "zustand": "^4.4.7" }, "devDependencies": { + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.15.0", @@ -38,6 +39,7 @@ "eslint-plugin-react-refresh": "^0.4.5", "postcss": "^8.4.32", "prettier": "^3.1.1", + "prettier-plugin-sort-json": "^3.1.0", "react-icons": "^4.12.0", "tailwindcss": "^3.3.7", "typescript": "^5.3.3", @@ -3739,6 +3741,115 @@ "string.prototype.matchall": "^4.0.6" } }, + "node_modules/@trivago/prettier-plugin-sort-imports": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz", + "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==", + "dev": true, + "dependencies": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.23.2", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@vue/compiler-sfc": "3.x", + "prettier": "2.x - 3.x" + }, + "peerDependenciesMeta": { + "@vue/compiler-sfc": { + "optional": true + } + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.23.6", + "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/types": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -7155,6 +7266,12 @@ "node": ">=8" } }, + "node_modules/javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "node_modules/jest-worker": { "version": "26.6.2", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz", @@ -8299,6 +8416,18 @@ "node": ">=6.0.0" } }, + "node_modules/prettier-plugin-sort-json": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-sort-json/-/prettier-plugin-sort-json-3.1.0.tgz", + "integrity": "sha512-eIDEUjwzekiVd+oKrpd0aoACBTp5zOW71wDTNy+qQ5C9Q8oqt9n9wCm4F+SeRZbXfgblh/WYIguJynImlBXrvQ==", + "dev": true, + "engines": { + "node": ">=16.0.0" + }, + "peerDependencies": { + "prettier": "^3.0.0" + } + }, "node_modules/pretty-bytes": { "version": "6.1.1", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz", diff --git a/package.json b/package.json index f183bb5..9630584 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "zustand": "^4.4.7" }, "devDependencies": { + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.15.0", @@ -42,6 +43,7 @@ "eslint-plugin-react-refresh": "^0.4.5", "postcss": "^8.4.32", "prettier": "^3.1.1", + "prettier-plugin-sort-json": "^3.1.0", "react-icons": "^4.12.0", "tailwindcss": "^3.3.7", "typescript": "^5.3.3", diff --git a/src/components/App.tsx b/src/components/App.tsx index c3b5b45..6ce3744 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,7 +1,8 @@ -import { Routes, Route } from "react-router-dom"; -import Layout from "./Layout"; +import { Route, Routes } from "react-router-dom"; + import Collection from "./Collection"; import Creation from "./Creation"; +import Layout from "./Layout"; import Select from "./Select"; import Start from "./Start"; diff --git a/src/components/Collection.tsx b/src/components/Collection.tsx index cfe48b6..899c673 100644 --- a/src/components/Collection.tsx +++ b/src/components/Collection.tsx @@ -1,12 +1,13 @@ -import { useState } from "react"; -import { Masonry } from "react-plock"; -import Viewer from "@samvera/clover-iiif/viewer"; - +// import Viewer from "@samvera/clover-iiif/viewer"; // @ts-ignore -import { Block, Button, Card, Page, Navbar, Link, Popup } from "konsta/react"; +import { Block, Button, Card, Link, Navbar, Page, Popup } from "konsta/react"; +import { Suspense, lazy, useState } from "react"; +import { Masonry } from "react-plock"; -import utils from "../utils"; import useStore, { Image } from "../store"; +import utils from "../utils"; + +const Viewer = lazy(() => import("@samvera/clover-iiif/viewer")); const options = { canvasBackgroundColor: "010A01", @@ -101,7 +102,9 @@ function Collection() { } /> - + 🌀 Loading...}> + +