From 54d1d20c45a826d9b97605b41e18b8cdf39f9702 Mon Sep 17 00:00:00 2001 From: Aidan Bleser Date: Thu, 20 Feb 2025 14:48:34 -0600 Subject: [PATCH] improve homepage performance --- .changeset/loud-lies-double.md | 5 ++++ packages/cli/package.json | 16 ++-------- .../cli/src/utils/registry-providers/index.ts | 20 +++++++++---- .../src/lib/components/site/header.svelte | 2 +- .../components/ui/github/star-button.svelte | 16 +++++++--- sites/docs/src/lib/ts/registry/index.ts | 15 ++++++---- sites/docs/src/routes/+layout.server.ts | 14 ++++++--- sites/docs/src/routes/+page.server.ts | 2 +- sites/docs/src/routes/+page.svelte | 29 ++++++++++++------- 9 files changed, 75 insertions(+), 44 deletions(-) create mode 100644 .changeset/loud-lies-double.md diff --git a/.changeset/loud-lies-double.md b/.changeset/loud-lies-double.md new file mode 100644 index 00000000..6eef473c --- /dev/null +++ b/.changeset/loud-lies-double.md @@ -0,0 +1,5 @@ +--- +"jsrepo": patch +--- + +api: Export type definitions for individual provider states. diff --git a/packages/cli/package.json b/packages/cli/package.json index 17fba46a..87ba3a33 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -15,16 +15,7 @@ "bugs": { "url": "https://github.com/ieedan/jsrepo/issues" }, - "keywords": [ - "repo", - "cli", - "svelte", - "vue", - "typescript", - "javascript", - "shadcn", - "registry" - ], + "keywords": ["repo", "cli", "svelte", "vue", "typescript", "javascript", "shadcn", "registry"], "type": "module", "exports": { ".": { @@ -34,10 +25,7 @@ }, "bin": "./dist/index.js", "main": "./dist/index.js", - "files": [ - "./schemas/**/*", - "dist/**/*" - ], + "files": ["./schemas/**/*", "dist/**/*"], "scripts": { "start": "tsup --silent && node ./dist/index.js", "build": "tsup", diff --git a/packages/cli/src/utils/registry-providers/index.ts b/packages/cli/src/utils/registry-providers/index.ts index 723249fb..0d2a8865 100644 --- a/packages/cli/src/utils/registry-providers/index.ts +++ b/packages/cli/src/utils/registry-providers/index.ts @@ -2,10 +2,10 @@ import { MANIFEST_FILE } from '../../constants'; import type { Manifest } from '../../types'; import { Err, Ok, type Result } from '../blocks/ts/result'; import { parseManifest } from '../manifest'; -import { azure } from './azure'; -import { bitbucket } from './bitbucket'; -import { github } from './github'; -import { gitlab } from './gitlab'; +import { type AzureProviderState, azure } from './azure'; +import { type BitBucketProviderState, bitbucket } from './bitbucket'; +import { type GitHubProviderState, github } from './github'; +import { type GitLabProviderState, gitlab } from './gitlab'; import { http } from './http'; import type { RegistryProvider, RegistryProviderState } from './types'; @@ -75,4 +75,14 @@ export const fetchManifest = async ( export * from './types'; -export { github, gitlab, bitbucket, azure, http }; +export { + github, + gitlab, + bitbucket, + azure, + http, + type AzureProviderState, + type GitHubProviderState, + type GitLabProviderState, + type BitBucketProviderState, +}; diff --git a/sites/docs/src/lib/components/site/header.svelte b/sites/docs/src/lib/components/site/header.svelte index d31df6cd..6bb4b31c 100644 --- a/sites/docs/src/lib/components/site/header.svelte +++ b/sites/docs/src/lib/components/site/header.svelte @@ -10,7 +10,7 @@ type Props = { version: string; - stars: number; + stars: Promise; }; let { version, stars }: Props = $props(); diff --git a/sites/docs/src/lib/components/ui/github/star-button.svelte b/sites/docs/src/lib/components/ui/github/star-button.svelte index 6a938672..00db9cf2 100644 --- a/sites/docs/src/lib/components/ui/github/star-button.svelte +++ b/sites/docs/src/lib/components/ui/github/star-button.svelte @@ -3,12 +3,18 @@ import { Separator } from '$lib/components/ui/separator'; import * as Icons from '$lib/components/icons'; import { Star } from 'lucide-svelte'; + import { Tween } from 'svelte/motion'; + import { cubicOut } from 'svelte/easing'; interface Props extends ButtonProps { - stars: number; + stars: Promise; } let { stars, ...rest }: Props = $props(); + + let starCount = new Tween(0, { easing: cubicOut, duration: 2000 }); + + stars.then((s) => starCount.set(s)); diff --git a/sites/docs/src/lib/ts/registry/index.ts b/sites/docs/src/lib/ts/registry/index.ts index 5223a013..53e6741c 100644 --- a/sites/docs/src/lib/ts/registry/index.ts +++ b/sites/docs/src/lib/ts/registry/index.ts @@ -54,13 +54,18 @@ export const getProviderState = async ( const getLocal = async () => await provider.state(registryUrl, { token: getProviderToken(provider) }); - // whichever is faster we use they should say the same thing - const result = await Promise.race([getLocal(), getCached()]); + const resolvedLocal = getLocal(); - state = result; - } + // whichever is faster we use they should say the same thing + const result = await Promise.race([resolvedLocal, getCached()]); - if (!state) { + // if the cache comes back empty just wait the rest of the time for resolvedLocal to resolve + if (result === undefined) { + state = await resolvedLocal; + } else { + state = result; + } + } else { state = await provider.state(registryUrl, { token: getProviderToken(provider) }); } diff --git a/sites/docs/src/routes/+layout.server.ts b/sites/docs/src/routes/+layout.server.ts index dff6999b..eef71ce0 100644 --- a/sites/docs/src/routes/+layout.server.ts +++ b/sites/docs/src/routes/+layout.server.ts @@ -3,18 +3,24 @@ import { Err, Ok, type Result } from '$lib/ts/types/result'; import { Octokit } from 'octokit'; export const load = async () => { - const octokit = new Octokit({ auth: GITHUB_TOKEN }); - - const repo = await octokit.rest.repos.get({ owner: 'ieedan', repo: 'jsrepo' }); + const stars = getStars(); const version = (await tryGetVersion()).unwrapOr('1.0.0'); return { version, - stars: repo.data.stargazers_count + stars }; }; +const getStars = async () => { + const octokit = new Octokit({ auth: GITHUB_TOKEN }); + + const repo = await octokit.rest.repos.get({ owner: 'ieedan', repo: 'jsrepo' }); + + return repo.data.stargazers_count; +}; + const tryGetVersion = async (): Promise> => { try { const response = await fetch( diff --git a/sites/docs/src/routes/+page.server.ts b/sites/docs/src/routes/+page.server.ts index b7b6c8dc..18735b12 100644 --- a/sites/docs/src/routes/+page.server.ts +++ b/sites/docs/src/routes/+page.server.ts @@ -5,7 +5,7 @@ import { redis, VIEW_SET_NAME } from '$lib/ts/redis-client'; import { action } from '$lib/ts/server-actions/search-registries/server'; export const load = async () => { - const ranked = await redis.zrange(VIEW_SET_NAME, 0, -1, { + const ranked = redis.zrange(VIEW_SET_NAME, 0, -1, { rev: true, count: 5, offset: 0 diff --git a/sites/docs/src/routes/+page.svelte b/sites/docs/src/routes/+page.svelte index c06b28aa..c81b4af4 100644 --- a/sites/docs/src/routes/+page.svelte +++ b/sites/docs/src/routes/+page.svelte @@ -10,6 +10,7 @@ import Marquee from '$lib/components/animations/marquee/marquee.svelte'; import * as Icons from '$lib/components/icons'; import * as Terminal from '$lib/components/ui/terminal'; + import { Skeleton } from '$lib/components/ui/skeleton'; const featuredRegistries = [ 'github/ieedan/shadcn-svelte-extras', @@ -232,16 +233,24 @@

Most Popular

    - {#each data.popular as registry} -
  • - - {registry} - -
    • - {/each} + {#await data.popular} + {#each { length: 5 } as _} +
  • + +
    • + {/each} + {:then mostPopular} + {#each mostPopular as registry} +
  • + + {registry} + +
    • + {/each} + {/await}