Skip to content

Commit

Permalink
fix(avatar): fix typing and exports
Browse files Browse the repository at this point in the history
  • Loading branch information
vnphanquang committed Jun 13, 2024
1 parent 1ea8f0b commit 81d4c80
Show file tree
Hide file tree
Showing 9 changed files with 121 additions and 129 deletions.
5 changes: 5 additions & 0 deletions .changeset/grumpy-planets-kiss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@svelte-put/avatar': major
---

no longer export named Avatar from root, drop `@svelte-put/avatar/hepers` submodules (just import from root instead)
12 changes: 1 addition & 11 deletions packages/avatar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,15 @@
"exports": {
".": {
"types": "./types/index.d.ts",
"svelte": "./src/index.js",
"import": "./src/index.js"
},
"./Avatar.svelte": {
"types": "./src/Avatar.svelte.d.ts",
"svelte": "./src/Avatar.svelte"
},
"./helpers": {
"types": "./types/index.d.ts",
"svelte": "./src/avatar.helpers.js",
"import": "./src/avatar.helpers.js"
}
},
"typesVersions": {
"*": {
"helpers": [
"./types/index.d.ts"
],
"Avatar.svelte": [
"./src/Avatar.svelte.d.ts"
]
Expand Down Expand Up @@ -74,8 +65,7 @@
},
"devDependencies": {
"@internals/tsconfig": "workspace:*",
"@types/md5": "^2.3.5",
"dts-buddy": "^0.4.7"
"@types/md5": "^2.3.5"
},
"volta": {
"extends": "../../package.json"
Expand Down
2 changes: 1 addition & 1 deletion packages/avatar/src/Avatar.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { resolveAlt, resolveSize, resolveSrc, DEFINITIVE_FALLBACK } from './avatar.utils.js';
/** @type {import('./Avatar.svelte.d.ts').AvatarProps} */
/** @type {import('./types').AvatarProps} */
let { src, gravatar, uiAvatar, fallback, size, alt, class: cls = '', img, ...rest } = $props();
let rAlt = $derived(resolveAlt(alt, gravatar, uiAvatar, src));
Expand Down
105 changes: 2 additions & 103 deletions packages/avatar/src/Avatar.svelte.d.ts
Original file line number Diff line number Diff line change
@@ -1,106 +1,5 @@
import type { Snippet, Component } from 'svelte';
import type { HTMLImgAttributes } from 'svelte/elements';
import type { Component } from 'svelte';

/**
* URL or option to fallback when email hash returns no match from Gravatar.
* See {@link https://en.gravatar.com/site/implement/images | Gravatar } for
* detailed explanation of each option.
*
*/
export type GravatarDefault =
| '404'
| 'mp'
| 'identicon'
| 'monsterid'
| 'wavatar'
| 'retro'
| 'robohash'
| 'blank'
| `${'http' | 'https'}://${string}.${'png' | 'jpg' | 'jpeg' | 'gif'}`;

export interface GravatarOptions {
/** email to md5-hash */
email: string;
/** Size in pixel, from 1px up to 2048px*/
size?: number;
/** fallback image. See {@link https://en.gravatar.com/site/implement/images | Gravatar } for detailed explanation */
default?: GravatarDefault;
/** Whether to force using default image */
forcedefault?: 'y';
/** Rating to request */
rating?: 'g' | 'pg' | 'r' | 'x';
}

/**
* Options for building {@link https://ui-avatars.com | UIAvatar } url.
* Each option should map to a supported UIAvatar setting item
*
*/
export interface UIAvatarOptions {
/** Name used to generate initials. Ex: John+Doe */
name: string;
/** Hex color for background, without the hash (#) */
background?: string;
/** Hex color for font, without the hash (#) */
color?: string;
/** Image size in pixels, between 16 and 512. Default to 64 */
size?: number;
/** Font size in percentage of size, between 0.1 and 1. Default to 0.5 */
'font-size'?: number;
/** Length of the generated initials. Default to 2 */
length?: number;
/** Whether the returnee image should be a circle. Default to false */
rounded?: boolean;
/** Whether the returned letters should use a bold font. Default to false */
bold?: boolean;
/** Whether to uppercase the initials. Default to true */
uppercase?: boolean;
/** Format of returned image */
format?: 'svg' | 'png';
}

/**
* Props to Avatar component
*/
export interface AvatarProps extends HTMLImgAttributes {
/**
* "src" attribute. This option is of highest priority
*/
src?: string;
/**
* Either the email for {@link https://en.gravatar.com/site/implement/images | Gravatar }
* or {@link GravatarOptions } object. This option take second priority.
*
* By default, the Gravatar `default` query is set to 404, so that if gravatar is not valid,
* the next priority url will be used. Be careful when setting this `default` to other values,
* as gravatar will then always return a valid resource, hence stopping the resolution flow
* (i.e uiAvatar & fallback will never be used).
*/
gravatar?: GravatarOptions | string;
/**
* Either the name for building initials with {@link https://ui-avatars.com | UIAvatar }
* or {@link UIAvatarOptions } object. This option take third priority.
*/
uiAvatar?: string | UIAvatarOptions;
/**
* The fallback url string. This option takes lowest priority.
* It defaults to the internal fallback (https://www.gravatar.com/avatar?d=mp).
* If you provide a different url that is not a valid resource, the internal fallback
* will be used.
*/
fallback?: string;
/**
* value for "width" & "height" attribute of <img>.
* Will have no effect if default slot is overridden
*/
size?: number;
/**
* value for "alt" attribute of <img>.
* Default to uiAvatar.name or gravatar.email if any.
* Will have no effect if default slot is overridden
*/
alt?: string;
img?: Snippet<[{ src: string; size: number; alt: string; sources: string[] }]>;
}
import { AvatarProps } from './types';

export declare const Avatar: Component<AvatarProps>;
6 changes: 3 additions & 3 deletions packages/avatar/src/avatar.helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import md5 from 'md5';
/**
* Builds a {@link https://ui-avatars.com | UIAvatar } url
*
* @param {string | import('./LegacyAvatar.svelte.js').UIAvatarOptions} input - name for UIAvatar or object of options
* @param {string | import('./types').UIAvatarOptions} input - name for UIAvatar or object of options
* @returns {string} the constructed UIAvatar URL
*/
export function uiAvatar(input) {
Expand All @@ -25,12 +25,12 @@ export function uiAvatar(input) {
/**
* Builds a {@link https://en.gravatar.com/site/implement/images | Gravatar } url
*
* @param {string | import('./LegacyAvatar.svelte.js').GravatarOptions} input - email for Gravatar or object of options
* @param {string | import('./types').GravatarOptions} input - email for Gravatar or object of options
* @returns {string} the constructed Gravatar URL
*/
export function gravatar(input) {
let email = '';
/** @type {Omit<import('./LegacyAvatar.svelte.js').GravatarOptions, 'email'>} */
/** @type {Omit<import('./types').GravatarOptions, 'email'>} */
let options = {};
if (typeof input === 'string') {
email = input;
Expand Down
12 changes: 6 additions & 6 deletions packages/avatar/src/avatar.utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,8 @@ function nonNullableFilter(value) {
/**
* @package
* @param {string | undefined} alt
* @param {import('./Avatar.svelte').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./Avatar.svelte').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @param {import('./types').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./types').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @param {string | undefined } src
* @returns {string}
*/
Expand All @@ -71,8 +71,8 @@ export function resolveAlt(
* @param {number} fallback
* @param {number | undefined} size
* @param {string | undefined} src
* @param {import('./Avatar.svelte').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./Avatar.svelte').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @param {import('./types').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./types').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @returns {number}
*/
export function resolveSize(
Expand All @@ -98,8 +98,8 @@ export const DEFINITIVE_FALLBACK = 'https://www.gravatar.com/avatar?d=mp';
/**
* @package
* @param {string | undefined} src
* @param {import('./Avatar.svelte').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./Avatar.svelte').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @param {import('./types').AvatarProps['gravatar'] | undefined} gravatar
* @param {import('./types').AvatarProps['uiAvatar'] | undefined} uiAvatar
* @param {string | undefined} fallback
* @returns {string[]}
*/
Expand Down
2 changes: 0 additions & 2 deletions packages/avatar/src/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
// Reexport your entry components here
export { default as Avatar } from './Avatar.svelte';
export { gravatar, uiAvatar } from './avatar.helpers.js';
103 changes: 103 additions & 0 deletions packages/avatar/src/types.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import type { Snippet } from 'svelte';
import type { HTMLImgAttributes } from 'svelte/elements';
/**
* URL or option to fallback when email hash returns no match from Gravatar.
* See {@link https://en.gravatar.com/site/implement/images | Gravatar } for
* detailed explanation of each option.
*
*/
export type GravatarDefault =
| '404'
| 'mp'
| 'identicon'
| 'monsterid'
| 'wavatar'
| 'retro'
| 'robohash'
| 'blank'
| `${'http' | 'https'}://${string}.${'png' | 'jpg' | 'jpeg' | 'gif'}`;

export interface GravatarOptions {
/** email to md5-hash */
email: string;
/** Size in pixel, from 1px up to 2048px*/
size?: number;
/** fallback image. See {@link https://en.gravatar.com/site/implement/images | Gravatar } for detailed explanation */
default?: GravatarDefault;
/** Whether to force using default image */
forcedefault?: 'y';
/** Rating to request */
rating?: 'g' | 'pg' | 'r' | 'x';
}

/**
* Options for building {@link https://ui-avatars.com | UIAvatar } url.
* Each option should map to a supported UIAvatar setting item
*
*/
export interface UIAvatarOptions {
/** Name used to generate initials. Ex: John+Doe */
name: string;
/** Hex color for background, without the hash (#) */
background?: string;
/** Hex color for font, without the hash (#) */
color?: string;
/** Image size in pixels, between 16 and 512. Default to 64 */
size?: number;
/** Font size in percentage of size, between 0.1 and 1. Default to 0.5 */
'font-size'?: number;
/** Length of the generated initials. Default to 2 */
length?: number;
/** Whether the returnee image should be a circle. Default to false */
rounded?: boolean;
/** Whether the returned letters should use a bold font. Default to false */
bold?: boolean;
/** Whether to uppercase the initials. Default to true */
uppercase?: boolean;
/** Format of returned image */
format?: 'svg' | 'png';
}

/**
* Props to Avatar component
*/
export interface AvatarProps extends HTMLImgAttributes {
/**
* "src" attribute. This option is of highest priority
*/
src?: string;
/**
* Either the email for {@link https://en.gravatar.com/site/implement/images | Gravatar }
* or {@link GravatarOptions } object. This option take second priority.
*
* By default, the Gravatar `default` query is set to 404, so that if gravatar is not valid,
* the next priority url will be used. Be careful when setting this `default` to other values,
* as gravatar will then always return a valid resource, hence stopping the resolution flow
* (i.e uiAvatar & fallback will never be used).
*/
gravatar?: GravatarOptions | string;
/**
* Either the name for building initials with {@link https://ui-avatars.com | UIAvatar }
* or {@link UIAvatarOptions } object. This option take third priority.
*/
uiAvatar?: string | UIAvatarOptions;
/**
* The fallback url string. This option takes lowest priority.
* It defaults to the internal fallback (https://www.gravatar.com/avatar?d=mp).
* If you provide a different url that is not a valid resource, the internal fallback
* will be used.
*/
fallback?: string;
/**
* value for "width" & "height" attribute of <img>.
* Will have no effect if default slot is overridden
*/
size?: number;
/**
* value for "alt" attribute of <img>.
* Default to uiAvatar.name or gravatar.email if any.
* Will have no effect if default slot is overridden
*/
alt?: string;
img?: Snippet<[{ src: string; size: number; alt: string; sources: string[] }]>;
}
3 changes: 0 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 81d4c80

Please sign in to comment.