From 6228002c26a32d71842b2f04583b4b6510fbfd29 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Tue, 31 Dec 2024 14:36:02 -0500 Subject: [PATCH] improve npm download count animation --- app/components/OpenSourceStats.tsx | 25 ++++--- package.json | 2 +- pnpm-lock.yaml | 114 +++++++++++++++-------------- 3 files changed, 77 insertions(+), 64 deletions(-) diff --git a/app/components/OpenSourceStats.tsx b/app/components/OpenSourceStats.tsx index a85b68c4..575dc0a6 100644 --- a/app/components/OpenSourceStats.tsx +++ b/app/components/OpenSourceStats.tsx @@ -8,9 +8,13 @@ import { FaDownload } from 'react-icons/fa' import convexImageWhite from '~/images/convex-white.svg' import convexImageDark from '~/images/convex-dark.svg' -const counterIntervalMs = 500 - -const StableCounter = ({ value }: { value?: number }) => { +const StableCounter = ({ + value, + intervalMs, +}: { + value?: number + intervalMs?: number +}) => { const dummyString = Number( Array(value?.toString().length ?? 1) .fill('8') @@ -23,14 +27,19 @@ const StableCounter = ({ value }: { value?: number }) => { {dummyString} @@ -43,10 +52,8 @@ const NpmDownloadCounter = ({ }: { npmData: Parameters[0] }) => { - const liveNpmDownloadCount = useNpmDownloadCounter(npmData, { - intervalMs: counterIntervalMs, - }) - return + const { count, intervalMs } = useNpmDownloadCounter(npmData) + return } export default function OssStats() { diff --git a/package.json b/package.json index fd2185db..2b11a026 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@convex-dev/react-query": "0.0.0-alpha.8", "@docsearch/css": "^3.5.2", "@docsearch/react": "^3.5.2", - "@erquhart/convex-oss-stats": "0.4.2", + "@erquhart/convex-oss-stats": "^0.5.0", "@headlessui/react": "1.7.18", "@number-flow/react": "^0.4.1", "@octokit/graphql": "^7.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 81e8462a..2b6c2a07 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^3.5.2 version: 3.6.0(@algolia/client-search@5.17.0)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.17.3) '@erquhart/convex-oss-stats': - specifier: 0.4.2 - version: 0.4.2(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zod@3.23.8) + specifier: ^0.5.0 + version: 0.5.0(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zod@3.23.8) '@headlessui/react': specifier: 1.7.18 version: 1.7.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1096,8 +1096,8 @@ packages: '@emotion/weak-memoize@0.2.5': resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==} - '@erquhart/convex-oss-stats@0.4.2': - resolution: {integrity: sha512-lOnwQS5CjBOa0LkbhJNkEzPP+Rr/ryccyR8rf4MN2oCb0LKPp67pqx62sVzTbq1Fv4KtvHkE4BnKT53gx4bdcg==} + '@erquhart/convex-oss-stats@0.5.0': + resolution: {integrity: sha512-HN7Tfv4I6qDClT7rnMMvQ5tSffbSqEpvcR1ShyjqLVmrkuIq5b9R4Q6Npau9iDPIz0ZBudOYRWamMOBtg7oANA==} peerDependencies: convex: ~1.16.5 || ~1.17.0 react: ^17.0.2 || ^18.0.0 || ^19.0.0-0 @@ -1971,8 +1971,8 @@ packages: resolution: {integrity: sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==} engines: {node: '>= 18'} - '@octokit/endpoint@10.1.1': - resolution: {integrity: sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==} + '@octokit/endpoint@10.1.2': + resolution: {integrity: sha512-XybpFv9Ms4hX5OCHMZqyODYqGTZ3H6K6Vva+M9LR7ib/xr1y1ZnlChYv9H680y77Vd/i/k+thXApeRASBQkzhA==} engines: {node: '>= 18'} '@octokit/endpoint@9.0.2': @@ -1986,20 +1986,20 @@ packages: resolution: {integrity: sha512-OJ2iGMtj5Tg3s6RaXH22cJcxXRi7Y3EBqbHTBRq+PQAqfaS8f/236fUrWhfSn8P4jovyzqucxme7/vWSSZBX2Q==} engines: {node: '>= 18'} - '@octokit/graphql@8.1.1': - resolution: {integrity: sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==} + '@octokit/graphql@8.1.2': + resolution: {integrity: sha512-bdlj/CJVjpaz06NBpfHhp4kGJaRZfz7AzC+6EwUImRtrwIw8dIgJ63Xg0OzV9pRn3rIzrt5c2sa++BL0JJ8GLw==} engines: {node: '>= 18'} - '@octokit/oauth-app@7.1.3': - resolution: {integrity: sha512-EHXbOpBkSGVVGF1W+NLMmsnSsJRkcrnVmDKt0TQYRBb6xWfWzoi9sBD4DIqZ8jGhOWO/V8t4fqFyJ4vDQDn9bg==} + '@octokit/oauth-app@7.1.4': + resolution: {integrity: sha512-Au4zSGsWOZtShLxVUXcZ9TZJVQjpEK/OW2L1SWLE030QVYaZ+69TP4vHBdXakZUifvOELD1VBYEY6eprPcY2Mg==} engines: {node: '>= 18'} '@octokit/oauth-authorization-url@7.1.1': resolution: {integrity: sha512-ooXV8GBSabSWyhLUowlMIVd9l1s2nsOGQdlP2SQ4LnkEsGXzeCvbSbCPdZThXhEFzleGPwbapT0Sb+YhXRyjCA==} engines: {node: '>= 18'} - '@octokit/oauth-methods@5.1.2': - resolution: {integrity: sha512-C5lglRD+sBlbrhCUTxgJAFjWgJlmTx5bQ7Ch0+2uqRjYv7Cfb5xpX4WuSC9UgQna3sqRGBL9EImX9PvTpMaQ7g==} + '@octokit/oauth-methods@5.1.3': + resolution: {integrity: sha512-M+bDBi5H8FnH0xhCTg0m9hvcnppdDnxUqbZyOkxlLblKpLAR+eT2nbDPvJDp0eLrvJWA1I8OX0KHf/sBMQARRA==} engines: {node: '>= 18'} '@octokit/openapi-types@19.0.2': @@ -2063,16 +2063,16 @@ packages: resolution: {integrity: sha512-X7pnyTMV7MgtGmiXBwmO6M5kIPrntOXdyKZLigNfQWSEQzVxR4a4vo49vJjTWX70mPndj8KhfT4Dx+2Ng3vnBQ==} engines: {node: '>= 18'} - '@octokit/request-error@6.1.5': - resolution: {integrity: sha512-IlBTfGX8Yn/oFPMwSfvugfncK2EwRLjzbrpifNaMY8o/HTEAFqCA1FZxjD9cWvSKBHgrIhc4CSBIzMxiLsbzFQ==} + '@octokit/request-error@6.1.6': + resolution: {integrity: sha512-pqnVKYo/at0NuOjinrgcQYpEbv4snvP3bKMRqHaD9kIsk9u1LCpb2smHZi8/qJfgeNqLo5hNW4Z7FezNdEo0xg==} engines: {node: '>= 18'} '@octokit/request@8.1.4': resolution: {integrity: sha512-M0aaFfpGPEKrg7XoA/gwgRvc9MSXHRO2Ioki1qrPDbl1e9YhjIwVoHE7HIKmv/m3idzldj//xBujcFNqGX6ENA==} engines: {node: '>= 18'} - '@octokit/request@9.1.3': - resolution: {integrity: sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==} + '@octokit/request@9.1.4': + resolution: {integrity: sha512-tMbOwGm6wDII6vygP3wUVqFTw3Aoo0FnVQyhihh8vVq12uO3P+vQZeo2CKMpWtPSogpACD0yyZAlVlQnjW71DA==} engines: {node: '>= 18'} '@octokit/rest@20.0.2': @@ -4132,6 +4132,9 @@ packages: extend@3.0.2: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} + fast-content-type-parse@2.0.0: + resolution: {integrity: sha512-fCqg/6Sps8tqk8p+kqyKqYfOF0VjPNYrqpLiqNl0RBKmD80B080AJWVV6EkSkscjToNExcXg1+Mfzftrx6+iSA==} + fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -5285,8 +5288,8 @@ packages: resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==} engines: {node: '>= 0.4'} - octokit@4.0.2: - resolution: {integrity: sha512-wbqF4uc1YbcldtiBFfkSnquHtECEIpYD78YUXI6ri1Im5OO2NLo6ZVpRdbJpdnpZ05zMrVPssNiEo6JQtea+Qg==} + octokit@4.0.3: + resolution: {integrity: sha512-kfqH80Yuuux4fLbZ4SvObjCvVu89U0eCh5+fulh6tr/hJkDYS1inXDGnNJDOp312GANMEhWWMLYmjQR8MvSSMQ==} engines: {node: '>= 18'} ofetch@1.4.1: @@ -7792,10 +7795,10 @@ snapshots: '@emotion/weak-memoize@0.2.5': {} - '@erquhart/convex-oss-stats@0.4.2(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zod@3.23.8)': + '@erquhart/convex-oss-stats@0.5.0(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(zod@3.23.8)': dependencies: '@convex-dev/crons': 0.1.5(convex@1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) - '@octokit/graphql': 8.1.1 + '@octokit/graphql': 8.1.2 '@octokit/graphql-schema': 15.25.0 cheerio: 1.0.0 convex: 1.17.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -7804,7 +7807,7 @@ snapshots: framer-motion: 11.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) nano: 10.1.4 npm-api: 1.0.1 - octokit: 4.0.2 + octokit: 4.0.3 p-limit: 6.2.0 react: 18.3.1 remeda: 2.19.0 @@ -8311,7 +8314,7 @@ snapshots: '@octokit/auth-app': 7.1.3 '@octokit/auth-unauthenticated': 6.1.0 '@octokit/core': 6.1.2 - '@octokit/oauth-app': 7.1.3 + '@octokit/oauth-app': 7.1.4 '@octokit/plugin-paginate-rest': 11.3.6(@octokit/core@6.1.2) '@octokit/types': 13.6.2 '@octokit/webhooks': 13.4.1 @@ -8320,8 +8323,8 @@ snapshots: dependencies: '@octokit/auth-oauth-app': 8.1.1 '@octokit/auth-oauth-user': 5.1.1 - '@octokit/request': 9.1.3 - '@octokit/request-error': 6.1.5 + '@octokit/request': 9.1.4 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 toad-cache: 3.7.0 universal-github-app-jwt: 2.2.0 @@ -8331,22 +8334,22 @@ snapshots: dependencies: '@octokit/auth-oauth-device': 7.1.1 '@octokit/auth-oauth-user': 5.1.1 - '@octokit/request': 9.1.3 + '@octokit/request': 9.1.4 '@octokit/types': 13.6.2 universal-user-agent: 7.0.2 '@octokit/auth-oauth-device@7.1.1': dependencies: - '@octokit/oauth-methods': 5.1.2 - '@octokit/request': 9.1.3 + '@octokit/oauth-methods': 5.1.3 + '@octokit/request': 9.1.4 '@octokit/types': 13.6.2 universal-user-agent: 7.0.2 '@octokit/auth-oauth-user@5.1.1': dependencies: '@octokit/auth-oauth-device': 7.1.1 - '@octokit/oauth-methods': 5.1.2 - '@octokit/request': 9.1.3 + '@octokit/oauth-methods': 5.1.3 + '@octokit/request': 9.1.4 '@octokit/types': 13.6.2 universal-user-agent: 7.0.2 @@ -8356,7 +8359,7 @@ snapshots: '@octokit/auth-unauthenticated@6.1.0': dependencies: - '@octokit/request-error': 6.1.5 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 '@octokit/core@5.0.1': @@ -8372,14 +8375,14 @@ snapshots: '@octokit/core@6.1.2': dependencies: '@octokit/auth-token': 5.1.1 - '@octokit/graphql': 8.1.1 - '@octokit/request': 9.1.3 - '@octokit/request-error': 6.1.5 + '@octokit/graphql': 8.1.2 + '@octokit/request': 9.1.4 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 before-after-hook: 3.0.2 universal-user-agent: 7.0.2 - '@octokit/endpoint@10.1.1': + '@octokit/endpoint@10.1.2': dependencies: '@octokit/types': 13.6.2 universal-user-agent: 7.0.2 @@ -8401,30 +8404,30 @@ snapshots: '@octokit/types': 12.1.1 universal-user-agent: 6.0.0 - '@octokit/graphql@8.1.1': + '@octokit/graphql@8.1.2': dependencies: - '@octokit/request': 9.1.3 + '@octokit/request': 9.1.4 '@octokit/types': 13.6.2 universal-user-agent: 7.0.2 - '@octokit/oauth-app@7.1.3': + '@octokit/oauth-app@7.1.4': dependencies: '@octokit/auth-oauth-app': 8.1.1 '@octokit/auth-oauth-user': 5.1.1 '@octokit/auth-unauthenticated': 6.1.0 '@octokit/core': 6.1.2 '@octokit/oauth-authorization-url': 7.1.1 - '@octokit/oauth-methods': 5.1.2 + '@octokit/oauth-methods': 5.1.3 '@types/aws-lambda': 8.10.146 universal-user-agent: 7.0.2 '@octokit/oauth-authorization-url@7.1.1': {} - '@octokit/oauth-methods@5.1.2': + '@octokit/oauth-methods@5.1.3': dependencies: '@octokit/oauth-authorization-url': 7.1.1 - '@octokit/request': 9.1.3 - '@octokit/request-error': 6.1.5 + '@octokit/request': 9.1.4 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 '@octokit/openapi-types@19.0.2': {} @@ -8464,7 +8467,7 @@ snapshots: '@octokit/plugin-retry@7.1.2(@octokit/core@6.1.2)': dependencies: '@octokit/core': 6.1.2 - '@octokit/request-error': 6.1.5 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 bottleneck: 2.19.5 @@ -8480,7 +8483,7 @@ snapshots: deprecation: 2.3.1 once: 1.4.0 - '@octokit/request-error@6.1.5': + '@octokit/request-error@6.1.6': dependencies: '@octokit/types': 13.6.2 @@ -8492,11 +8495,12 @@ snapshots: is-plain-object: 5.0.0 universal-user-agent: 6.0.0 - '@octokit/request@9.1.3': + '@octokit/request@9.1.4': dependencies: - '@octokit/endpoint': 10.1.1 - '@octokit/request-error': 6.1.5 + '@octokit/endpoint': 10.1.2 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 + fast-content-type-parse: 2.0.0 universal-user-agent: 7.0.2 '@octokit/rest@20.0.2': @@ -8519,7 +8523,7 @@ snapshots: '@octokit/webhooks@13.4.1': dependencies: '@octokit/openapi-webhooks-types': 8.5.1 - '@octokit/request-error': 6.1.5 + '@octokit/request-error': 6.1.6 '@octokit/webhooks-methods': 5.1.0 '@one-ini/wasm@0.1.1': {} @@ -9262,10 +9266,10 @@ snapshots: '@types/unist@2.0.10': {} - '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)': + '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)': dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.6.3) + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.6.3) '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/type-utils': 5.62.0(eslint@8.57.0)(typescript@5.6.3) '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.6.3) @@ -10805,7 +10809,7 @@ snapshots: '@babel/core': 7.26.0 '@babel/eslint-parser': 7.23.10(@babel/core@7.26.0)(eslint@8.57.0) '@rushstack/eslint-patch': 1.7.2 - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.6.3) babel-preset-react-app: 10.0.1 confusing-browser-globals: 1.0.11 @@ -10885,7 +10889,7 @@ snapshots: '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.57.0)(typescript@5.6.3) eslint: 8.57.0 optionalDependencies: - '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3) transitivePeerDependencies: - supports-color - typescript @@ -11075,6 +11079,8 @@ snapshots: extend@3.0.2: {} + fast-content-type-parse@2.0.0: {} + fast-deep-equal@3.1.3: {} fast-fifo@1.3.2: {} @@ -12310,17 +12316,17 @@ snapshots: define-properties: 1.2.1 es-abstract: 1.22.5 - octokit@4.0.2: + octokit@4.0.3: dependencies: '@octokit/app': 15.1.1 '@octokit/core': 6.1.2 - '@octokit/oauth-app': 7.1.3 + '@octokit/oauth-app': 7.1.4 '@octokit/plugin-paginate-graphql': 5.2.4(@octokit/core@6.1.2) '@octokit/plugin-paginate-rest': 11.3.6(@octokit/core@6.1.2) '@octokit/plugin-rest-endpoint-methods': 13.2.6(@octokit/core@6.1.2) '@octokit/plugin-retry': 7.1.2(@octokit/core@6.1.2) '@octokit/plugin-throttling': 9.3.2(@octokit/core@6.1.2) - '@octokit/request-error': 6.1.5 + '@octokit/request-error': 6.1.6 '@octokit/types': 13.6.2 ofetch@1.4.1: