From f00c2fa951e153e1fb4d039778a7923cb27afefe Mon Sep 17 00:00:00 2001 From: Haruaki Date: Mon, 19 Apr 2021 08:19:31 +0700 Subject: [PATCH] use built in svelte component typing --- package.json | 5 +++- src/lib/shared.d.ts | 64 +++++++++++++++++++++++++++------------------ src/template.js | 30 +++------------------ yarn.lock | 6 ++--- 4 files changed, 49 insertions(+), 56 deletions(-) diff --git a/package.json b/package.json index a7d374f..da6e726 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "phosphor-svelte", - "version": "0.5.0", + "version": "1.0.0", "description": "A clean and friendly icon family for Svelte", "svelte": "./lib/index.js", "main": "./lib/index.js", @@ -33,6 +33,9 @@ "url": "https://github.com/haruaki07/phosphor-svelte/issues" }, "homepage": "https://phosphoricons.com", + "peerDependencies": { + "svelte": ">=3" + }, "devDependencies": { "fs-extra": "^9.0.1", "html-minifier-terser": "^5.1.1", diff --git a/src/lib/shared.d.ts b/src/lib/shared.d.ts index c2a04ec..fc93a47 100644 --- a/src/lib/shared.d.ts +++ b/src/lib/shared.d.ts @@ -1,28 +1,40 @@ -type LocalSvelteProps = { - children?: any; - class?: string; - [key: string]: any; -}; +import { SvelteComponentTyped } from "svelte"; -/** - * Local svelte class for adding typescript definitions for svelte components - * - */ -export declare class SvelteComponent { - constructor(props: Props & LocalSvelteProps); - $on( - event: string, - callback: (event: CustomEvent) => void - ): () => void; - $$prop_def: Props & LocalSvelteProps; - $$slot_def: { - default?: {}; - }; - render: undefined; - context: undefined; - setState: undefined; - forceUpdate: undefined; - props: undefined; - state: undefined; - refs: undefined; +declare type Weight = + | "bold" + | "duotone" + | "fill" + | "light" + | "thin" + | "regular"; + +export interface IconProps { + /** + * @type {string} + * @default "currentColor" + */ + color?: string; + /** + * @type {number|string} + * @default "1em" + */ + size?: number | string; + /** + * @type {string} + * @default "regular" + */ + weight?: Weight; + /** + * @type {boolean} + * @default false + */ + mirrored?: boolean; } + +export class SvelteComponent extends SvelteComponentTyped< + Props, + any, + { + default?: {}; + } +> {} diff --git a/src/template.js b/src/template.js index 8c2fbb9..f1d4971 100644 --- a/src/template.js +++ b/src/template.js @@ -19,7 +19,8 @@ function componentTemplate(types) { height={size} fill={color} transform={mirrored ? "scale(-1, 1)" : undefined} - viewBox="0 0 256 256"> + viewBox="0 0 256 256" + {...$$restProps}> ${types @@ -39,33 +40,10 @@ ${types } function definitionsTemplate(icons) { - return `import { SvelteComponent } from "./shared"; - -declare type Weight = - | "bold" - | "duotone" - | "fill" - | "light" - | "thin" - | "regular"; - -export interface IconProps { - /** @type {string} [color="currentColor"] */ - color?: string; - /** @type {number|string} [size="1em"] */ - size?: number | string; - /** @type {string} [id="regular"] */ - weight?: Weight; - /** @type {boolean} [mirrored=false] */ - mirrored?: boolean; -} - -type IconContextValue = Required< - Pick ->; + return `import { SvelteComponent, IconProps } from "./shared"; export interface IconContextProps { - values: IconContextValue; + values: Required; } export declare class IconContext extends SvelteComponent {} diff --git a/yarn.lock b/yarn.lock index 74fb76b..0d22681 100644 --- a/yarn.lock +++ b/yarn.lock @@ -250,9 +250,9 @@ strip-ansi@^6.0.0: ansi-regex "^5.0.0" svelte@^3.0.0: - version "3.29.7" - resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d" - integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A== + version "3.37.0" + resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.37.0.tgz#dc7cd24bcc275cdb3f8c684ada89e50489144ccd" + integrity sha512-TRF30F4W4+d+Jr2KzUUL1j8Mrpns/WM/WacxYlo5MMb2E5Qy2Pk1Guj6GylxsW9OnKQl1tnF8q3hG/hQ3h6VUA== terser@^4.6.3: version "4.8.0"