From ab95ce897a4a5d14d9c497fb96123e8653351081 Mon Sep 17 00:00:00 2001 From: "Lyu, Wei Da" Date: Thu, 3 Aug 2023 17:26:10 +0800 Subject: [PATCH 1/8] fix: move svelteHTML to load the correct svelte/element --- packages/svelte/svelte-html.d.ts | 247 +++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 packages/svelte/svelte-html.d.ts diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts new file mode 100644 index 000000000000..f2ed9a4eb9e9 --- /dev/null +++ b/packages/svelte/svelte-html.d.ts @@ -0,0 +1,247 @@ +/// +/* eslint-disable @typescript-eslint/no-empty-interface */ + +/** + * This namespace does not exist in the runtime, it is only used for typings + * + */ +declare namespace svelteHTML { + // Every namespace eligible for use needs to implement the following two functions + /** + * @internal do not use + */ + function mapElementTag(tag: K): ElementTagNameMap[K]; + function mapElementTag(tag: K): SVGElementTagNameMap[K]; + function mapElementTag(tag: any): any; // needs to be any because used in context of + + /** + * @internal do not use + */ + function createElement( + // "undefined | null" because of + element: Key | undefined | null, + attrs: string extends Key ? import('./elements').HTMLAttributes : Elements[Key] + ): Key extends keyof ElementTagNameMap + ? ElementTagNameMap[Key] + : Key extends keyof SVGElementTagNameMap + ? SVGElementTagNameMap[Key] + : any; + function createElement( + // "undefined | null" because of + element: Key | undefined | null, + attrsEnhancers: T, + attrs: (string extends Key ? import('./elements').HTMLAttributes : Elements[Key]) & T + ): Key extends keyof ElementTagNameMap + ? ElementTagNameMap[Key] + : Key extends keyof SVGElementTagNameMap + ? SVGElementTagNameMap[Key] + : any; + + // For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes {} + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface SVGAttributes {} + + /** + * @internal do not use + */ + type HTMLProps = Omit< + import('./elements').SvelteHTMLElements[Property], + keyof Override + > & + Override; + + /** + * Avoid using this interface directly. Instead use the `SvelteHTMLElements` interface exported by `svelte/elements` + * This should only be used if you need to extend the interface with custom elements + */ + interface IntrinsicElements { + a: HTMLProps<'a', HTMLAttributes>; + abbr: HTMLProps<'abbr', HTMLAttributes>; + address: HTMLProps<'address', HTMLAttributes>; + area: HTMLProps<'area', HTMLAttributes>; + article: HTMLProps<'article', HTMLAttributes>; + aside: HTMLProps<'aside', HTMLAttributes>; + audio: HTMLProps<'audio', HTMLAttributes>; + b: HTMLProps<'b', HTMLAttributes>; + base: HTMLProps<'base', HTMLAttributes>; + bdi: HTMLProps<'bdi', HTMLAttributes>; + bdo: HTMLProps<'bdo', HTMLAttributes>; + big: HTMLProps<'big', HTMLAttributes>; + blockquote: HTMLProps<'blockquote', HTMLAttributes>; + body: HTMLProps<'body', HTMLAttributes>; + br: HTMLProps<'br', HTMLAttributes>; + button: HTMLProps<'button', HTMLAttributes>; + canvas: HTMLProps<'canvas', HTMLAttributes>; + caption: HTMLProps<'caption', HTMLAttributes>; + cite: HTMLProps<'cite', HTMLAttributes>; + code: HTMLProps<'code', HTMLAttributes>; + col: HTMLProps<'col', HTMLAttributes>; + colgroup: HTMLProps<'colgroup', HTMLAttributes>; + data: HTMLProps<'data', HTMLAttributes>; + datalist: HTMLProps<'datalist', HTMLAttributes>; + dd: HTMLProps<'dd', HTMLAttributes>; + del: HTMLProps<'del', HTMLAttributes>; + details: HTMLProps<'details', HTMLAttributes>; + dfn: HTMLProps<'dfn', HTMLAttributes>; + dialog: HTMLProps<'dialog', HTMLAttributes>; + div: HTMLProps<'div', HTMLAttributes>; + dl: HTMLProps<'dl', HTMLAttributes>; + dt: HTMLProps<'dt', HTMLAttributes>; + em: HTMLProps<'em', HTMLAttributes>; + embed: HTMLProps<'embed', HTMLAttributes>; + fieldset: HTMLProps<'fieldset', HTMLAttributes>; + figcaption: HTMLProps<'figcaption', HTMLAttributes>; + figure: HTMLProps<'figure', HTMLAttributes>; + footer: HTMLProps<'footer', HTMLAttributes>; + form: HTMLProps<'form', HTMLAttributes>; + h1: HTMLProps<'h1', HTMLAttributes>; + h2: HTMLProps<'h2', HTMLAttributes>; + h3: HTMLProps<'h3', HTMLAttributes>; + h4: HTMLProps<'h4', HTMLAttributes>; + h5: HTMLProps<'h5', HTMLAttributes>; + h6: HTMLProps<'h6', HTMLAttributes>; + head: HTMLProps<'head', HTMLAttributes>; + header: HTMLProps<'header', HTMLAttributes>; + hgroup: HTMLProps<'hgroup', HTMLAttributes>; + hr: HTMLProps<'hr', HTMLAttributes>; + html: HTMLProps<'html', HTMLAttributes>; + i: HTMLProps<'i', HTMLAttributes>; + iframe: HTMLProps<'iframe', HTMLAttributes>; + img: HTMLProps<'img', HTMLAttributes>; + input: HTMLProps<'input', HTMLAttributes>; + ins: HTMLProps<'ins', HTMLAttributes>; + kbd: HTMLProps<'kbd', HTMLAttributes>; + keygen: HTMLProps<'keygen', HTMLAttributes>; + label: HTMLProps<'label', HTMLAttributes>; + legend: HTMLProps<'legend', HTMLAttributes>; + li: HTMLProps<'li', HTMLAttributes>; + link: HTMLProps<'link', HTMLAttributes>; + main: HTMLProps<'main', HTMLAttributes>; + map: HTMLProps<'map', HTMLAttributes>; + mark: HTMLProps<'mark', HTMLAttributes>; + menu: HTMLProps<'menu', HTMLAttributes>; + menuitem: HTMLProps<'menuitem', HTMLAttributes>; + meta: HTMLProps<'meta', HTMLAttributes>; + meter: HTMLProps<'meter', HTMLAttributes>; + nav: HTMLProps<'nav', HTMLAttributes>; + noscript: HTMLProps<'noscript', HTMLAttributes>; + object: HTMLProps<'object', HTMLAttributes>; + ol: HTMLProps<'ol', HTMLAttributes>; + optgroup: HTMLProps<'optgroup', HTMLAttributes>; + option: HTMLProps<'option', HTMLAttributes>; + output: HTMLProps<'output', HTMLAttributes>; + p: HTMLProps<'p', HTMLAttributes>; + param: HTMLProps<'param', HTMLAttributes>; + picture: HTMLProps<'picture', HTMLAttributes>; + pre: HTMLProps<'pre', HTMLAttributes>; + progress: HTMLProps<'progress', HTMLAttributes>; + q: HTMLProps<'q', HTMLAttributes>; + rp: HTMLProps<'rp', HTMLAttributes>; + rt: HTMLProps<'rt', HTMLAttributes>; + ruby: HTMLProps<'ruby', HTMLAttributes>; + s: HTMLProps<'s', HTMLAttributes>; + samp: HTMLProps<'samp', HTMLAttributes>; + slot: HTMLProps<'slot', HTMLAttributes>; + script: HTMLProps<'script', HTMLAttributes>; + section: HTMLProps<'section', HTMLAttributes>; + select: HTMLProps<'select', HTMLAttributes>; + small: HTMLProps<'small', HTMLAttributes>; + source: HTMLProps<'source', HTMLAttributes>; + span: HTMLProps<'span', HTMLAttributes>; + strong: HTMLProps<'strong', HTMLAttributes>; + style: HTMLProps<'style', HTMLAttributes>; + sub: HTMLProps<'sub', HTMLAttributes>; + summary: HTMLProps<'summary', HTMLAttributes>; + sup: HTMLProps<'sup', HTMLAttributes>; + table: HTMLProps<'table', HTMLAttributes>; + template: HTMLProps<'template', HTMLAttributes>; + tbody: HTMLProps<'tbody', HTMLAttributes>; + td: HTMLProps<'td', HTMLAttributes>; + textarea: HTMLProps<'textarea', HTMLAttributes>; + tfoot: HTMLProps<'tfoot', HTMLAttributes>; + th: HTMLProps<'th', HTMLAttributes>; + thead: HTMLProps<'thead', HTMLAttributes>; + time: HTMLProps<'time', HTMLAttributes>; + title: HTMLProps<'title', HTMLAttributes>; + tr: HTMLProps<'tr', HTMLAttributes>; + track: HTMLProps<'track', HTMLAttributes>; + u: HTMLProps<'u', HTMLAttributes>; + ul: HTMLProps<'ul', HTMLAttributes>; + var: HTMLProps<'var', HTMLAttributes>; + video: HTMLProps<'video', HTMLAttributes>; + wbr: HTMLProps<'wbr', HTMLAttributes>; + webview: HTMLProps<'webview', HTMLAttributes>; + // SVG + svg: HTMLProps<'svg', SVGAttributes>; + + animate: HTMLProps<'animate', SVGAttributes>; + animateMotion: HTMLProps<'animateMotion', SVGAttributes>; + animateTransform: HTMLProps<'animateTransform', SVGAttributes>; + circle: HTMLProps<'circle', SVGAttributes>; + clipPath: HTMLProps<'clipPath', SVGAttributes>; + defs: HTMLProps<'defs', SVGAttributes>; + desc: HTMLProps<'desc', SVGAttributes>; + ellipse: HTMLProps<'ellipse', SVGAttributes>; + feBlend: HTMLProps<'feBlend', SVGAttributes>; + feColorMatrix: HTMLProps<'feColorMatrix', SVGAttributes>; + feComponentTransfer: HTMLProps<'feComponentTransfer', SVGAttributes>; + feComposite: HTMLProps<'feComposite', SVGAttributes>; + feConvolveMatrix: HTMLProps<'feConvolveMatrix', SVGAttributes>; + feDiffuseLighting: HTMLProps<'feDiffuseLighting', SVGAttributes>; + feDisplacementMap: HTMLProps<'feDisplacementMap', SVGAttributes>; + feDistantLight: HTMLProps<'feDistantLight', SVGAttributes>; + feDropShadow: HTMLProps<'feDropShadow', SVGAttributes>; + feFlood: HTMLProps<'feFlood', SVGAttributes>; + feFuncA: HTMLProps<'feFuncA', SVGAttributes>; + feFuncB: HTMLProps<'feFuncB', SVGAttributes>; + feFuncG: HTMLProps<'feFuncG', SVGAttributes>; + feFuncR: HTMLProps<'feFuncR', SVGAttributes>; + feGaussianBlur: HTMLProps<'feGaussianBlur', SVGAttributes>; + feImage: HTMLProps<'feImage', SVGAttributes>; + feMerge: HTMLProps<'feMerge', SVGAttributes>; + feMergeNode: HTMLProps<'feMergeNode', SVGAttributes>; + feMorphology: HTMLProps<'feMorphology', SVGAttributes>; + feOffset: HTMLProps<'feOffset', SVGAttributes>; + fePointLight: HTMLProps<'fePointLight', SVGAttributes>; + feSpecularLighting: HTMLProps<'feSpecularLighting', SVGAttributes>; + feSpotLight: HTMLProps<'feSpotLight', SVGAttributes>; + feTile: HTMLProps<'feTile', SVGAttributes>; + feTurbulence: HTMLProps<'feTurbulence', SVGAttributes>; + filter: HTMLProps<'filter', SVGAttributes>; + foreignObject: HTMLProps<'foreignObject', SVGAttributes>; + g: HTMLProps<'g', SVGAttributes>; + image: HTMLProps<'image', SVGAttributes>; + line: HTMLProps<'line', SVGAttributes>; + linearGradient: HTMLProps<'linearGradient', SVGAttributes>; + marker: HTMLProps<'marker', SVGAttributes>; + mask: HTMLProps<'mask', SVGAttributes>; + metadata: HTMLProps<'metadata', SVGAttributes>; + mpath: HTMLProps<'mpath', SVGAttributes>; + path: HTMLProps<'path', SVGAttributes>; + pattern: HTMLProps<'pattern', SVGAttributes>; + polygon: HTMLProps<'polygon', SVGAttributes>; + polyline: HTMLProps<'polyline', SVGAttributes>; + radialGradient: HTMLProps<'radialGradient', SVGAttributes>; + rect: HTMLProps<'rect', SVGAttributes>; + stop: HTMLProps<'stop', SVGAttributes>; + switch: HTMLProps<'switch', SVGAttributes>; + symbol: HTMLProps<'symbol', SVGAttributes>; + text: HTMLProps<'text', SVGAttributes>; + textPath: HTMLProps<'textPath', SVGAttributes>; + tspan: HTMLProps<'tspan', SVGAttributes>; + use: HTMLProps<'use', SVGAttributes>; + view: HTMLProps<'view', SVGAttributes>; + + // Svelte specific + 'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>; + 'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>; + 'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>; + 'svelte:fragment': { slot?: string }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; + + [name: string]: { [name: string]: any }; + } +} From da84ae9c04bcb062280a87fb89f04eda9a36c962 Mon Sep 17 00:00:00 2001 From: "Lyu, Wei Da" Date: Fri, 4 Aug 2023 16:06:21 +0800 Subject: [PATCH 2/8] Make IntrinsicElements extends SvelteHTMLElements so it can be extend with declare module converting to module so it can extend without needing another type alias --- packages/svelte/svelte-html.d.ts | 465 ++++++++++++++++--------------- 1 file changed, 234 insertions(+), 231 deletions(-) diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts index f2ed9a4eb9e9..726afc2f058d 100644 --- a/packages/svelte/svelte-html.d.ts +++ b/packages/svelte/svelte-html.d.ts @@ -1,247 +1,250 @@ /// /* eslint-disable @typescript-eslint/no-empty-interface */ +import * as svelteElements from './elements'; + /** - * This namespace does not exist in the runtime, it is only used for typings - * + * @internal do not use */ -declare namespace svelteHTML { - // Every namespace eligible for use needs to implement the following two functions - /** - * @internal do not use - */ - function mapElementTag(tag: K): ElementTagNameMap[K]; - function mapElementTag(tag: K): SVGElementTagNameMap[K]; - function mapElementTag(tag: any): any; // needs to be any because used in context of +type HTMLProps = Omit< + import('./elements').SvelteHTMLElements[Property], + keyof Override +> & + Override; +declare global { /** - * @internal do not use + * This namespace does not exist in the runtime, it is only used for typings */ - function createElement( - // "undefined | null" because of - element: Key | undefined | null, - attrs: string extends Key ? import('./elements').HTMLAttributes : Elements[Key] - ): Key extends keyof ElementTagNameMap - ? ElementTagNameMap[Key] - : Key extends keyof SVGElementTagNameMap - ? SVGElementTagNameMap[Key] - : any; - function createElement( - // "undefined | null" because of - element: Key | undefined | null, - attrsEnhancers: T, - attrs: (string extends Key ? import('./elements').HTMLAttributes : Elements[Key]) & T - ): Key extends keyof ElementTagNameMap - ? ElementTagNameMap[Key] - : Key extends keyof SVGElementTagNameMap - ? SVGElementTagNameMap[Key] - : any; + namespace svelteHTML { + // Every namespace eligible for use needs to implement the following two functions + /** + * @internal do not use + */ + function mapElementTag(tag: K): ElementTagNameMap[K]; + function mapElementTag(tag: K): SVGElementTagNameMap[K]; + function mapElementTag(tag: any): any; // needs to be any because used in context of - // For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface HTMLAttributes {} - // eslint-disable-next-line @typescript-eslint/no-unused-vars - interface SVGAttributes {} + /** + * @internal do not use + */ + function createElement( + // "undefined | null" because of + element: Key | undefined | null, + attrs: string extends Key ? svelteElements.HTMLAttributes : Elements[Key] + ): Key extends keyof ElementTagNameMap + ? ElementTagNameMap[Key] + : Key extends keyof SVGElementTagNameMap + ? SVGElementTagNameMap[Key] + : any; + function createElement( + // "undefined | null" because of + element: Key | undefined | null, + attrsEnhancers: T, + attrs: (string extends Key ? svelteElements.HTMLAttributes : Elements[Key]) & T + ): Key extends keyof ElementTagNameMap + ? ElementTagNameMap[Key] + : Key extends keyof SVGElementTagNameMap + ? SVGElementTagNameMap[Key] + : any; - /** - * @internal do not use - */ - type HTMLProps = Omit< - import('./elements').SvelteHTMLElements[Property], - keyof Override - > & - Override; + // For backwards-compatibility and ease-of-use, in case someone enhanced the typings from import('svelte/elements').HTMLAttributes/SVGAttributes + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface HTMLAttributes {} + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface SVGAttributes {} - /** - * Avoid using this interface directly. Instead use the `SvelteHTMLElements` interface exported by `svelte/elements` - * This should only be used if you need to extend the interface with custom elements - */ - interface IntrinsicElements { - a: HTMLProps<'a', HTMLAttributes>; - abbr: HTMLProps<'abbr', HTMLAttributes>; - address: HTMLProps<'address', HTMLAttributes>; - area: HTMLProps<'area', HTMLAttributes>; - article: HTMLProps<'article', HTMLAttributes>; - aside: HTMLProps<'aside', HTMLAttributes>; - audio: HTMLProps<'audio', HTMLAttributes>; - b: HTMLProps<'b', HTMLAttributes>; - base: HTMLProps<'base', HTMLAttributes>; - bdi: HTMLProps<'bdi', HTMLAttributes>; - bdo: HTMLProps<'bdo', HTMLAttributes>; - big: HTMLProps<'big', HTMLAttributes>; - blockquote: HTMLProps<'blockquote', HTMLAttributes>; - body: HTMLProps<'body', HTMLAttributes>; - br: HTMLProps<'br', HTMLAttributes>; - button: HTMLProps<'button', HTMLAttributes>; - canvas: HTMLProps<'canvas', HTMLAttributes>; - caption: HTMLProps<'caption', HTMLAttributes>; - cite: HTMLProps<'cite', HTMLAttributes>; - code: HTMLProps<'code', HTMLAttributes>; - col: HTMLProps<'col', HTMLAttributes>; - colgroup: HTMLProps<'colgroup', HTMLAttributes>; - data: HTMLProps<'data', HTMLAttributes>; - datalist: HTMLProps<'datalist', HTMLAttributes>; - dd: HTMLProps<'dd', HTMLAttributes>; - del: HTMLProps<'del', HTMLAttributes>; - details: HTMLProps<'details', HTMLAttributes>; - dfn: HTMLProps<'dfn', HTMLAttributes>; - dialog: HTMLProps<'dialog', HTMLAttributes>; - div: HTMLProps<'div', HTMLAttributes>; - dl: HTMLProps<'dl', HTMLAttributes>; - dt: HTMLProps<'dt', HTMLAttributes>; - em: HTMLProps<'em', HTMLAttributes>; - embed: HTMLProps<'embed', HTMLAttributes>; - fieldset: HTMLProps<'fieldset', HTMLAttributes>; - figcaption: HTMLProps<'figcaption', HTMLAttributes>; - figure: HTMLProps<'figure', HTMLAttributes>; - footer: HTMLProps<'footer', HTMLAttributes>; - form: HTMLProps<'form', HTMLAttributes>; - h1: HTMLProps<'h1', HTMLAttributes>; - h2: HTMLProps<'h2', HTMLAttributes>; - h3: HTMLProps<'h3', HTMLAttributes>; - h4: HTMLProps<'h4', HTMLAttributes>; - h5: HTMLProps<'h5', HTMLAttributes>; - h6: HTMLProps<'h6', HTMLAttributes>; - head: HTMLProps<'head', HTMLAttributes>; - header: HTMLProps<'header', HTMLAttributes>; - hgroup: HTMLProps<'hgroup', HTMLAttributes>; - hr: HTMLProps<'hr', HTMLAttributes>; - html: HTMLProps<'html', HTMLAttributes>; - i: HTMLProps<'i', HTMLAttributes>; - iframe: HTMLProps<'iframe', HTMLAttributes>; - img: HTMLProps<'img', HTMLAttributes>; - input: HTMLProps<'input', HTMLAttributes>; - ins: HTMLProps<'ins', HTMLAttributes>; - kbd: HTMLProps<'kbd', HTMLAttributes>; - keygen: HTMLProps<'keygen', HTMLAttributes>; - label: HTMLProps<'label', HTMLAttributes>; - legend: HTMLProps<'legend', HTMLAttributes>; - li: HTMLProps<'li', HTMLAttributes>; - link: HTMLProps<'link', HTMLAttributes>; - main: HTMLProps<'main', HTMLAttributes>; - map: HTMLProps<'map', HTMLAttributes>; - mark: HTMLProps<'mark', HTMLAttributes>; - menu: HTMLProps<'menu', HTMLAttributes>; - menuitem: HTMLProps<'menuitem', HTMLAttributes>; - meta: HTMLProps<'meta', HTMLAttributes>; - meter: HTMLProps<'meter', HTMLAttributes>; - nav: HTMLProps<'nav', HTMLAttributes>; - noscript: HTMLProps<'noscript', HTMLAttributes>; - object: HTMLProps<'object', HTMLAttributes>; - ol: HTMLProps<'ol', HTMLAttributes>; - optgroup: HTMLProps<'optgroup', HTMLAttributes>; - option: HTMLProps<'option', HTMLAttributes>; - output: HTMLProps<'output', HTMLAttributes>; - p: HTMLProps<'p', HTMLAttributes>; - param: HTMLProps<'param', HTMLAttributes>; - picture: HTMLProps<'picture', HTMLAttributes>; - pre: HTMLProps<'pre', HTMLAttributes>; - progress: HTMLProps<'progress', HTMLAttributes>; - q: HTMLProps<'q', HTMLAttributes>; - rp: HTMLProps<'rp', HTMLAttributes>; - rt: HTMLProps<'rt', HTMLAttributes>; - ruby: HTMLProps<'ruby', HTMLAttributes>; - s: HTMLProps<'s', HTMLAttributes>; - samp: HTMLProps<'samp', HTMLAttributes>; - slot: HTMLProps<'slot', HTMLAttributes>; - script: HTMLProps<'script', HTMLAttributes>; - section: HTMLProps<'section', HTMLAttributes>; - select: HTMLProps<'select', HTMLAttributes>; - small: HTMLProps<'small', HTMLAttributes>; - source: HTMLProps<'source', HTMLAttributes>; - span: HTMLProps<'span', HTMLAttributes>; - strong: HTMLProps<'strong', HTMLAttributes>; - style: HTMLProps<'style', HTMLAttributes>; - sub: HTMLProps<'sub', HTMLAttributes>; - summary: HTMLProps<'summary', HTMLAttributes>; - sup: HTMLProps<'sup', HTMLAttributes>; - table: HTMLProps<'table', HTMLAttributes>; - template: HTMLProps<'template', HTMLAttributes>; - tbody: HTMLProps<'tbody', HTMLAttributes>; - td: HTMLProps<'td', HTMLAttributes>; - textarea: HTMLProps<'textarea', HTMLAttributes>; - tfoot: HTMLProps<'tfoot', HTMLAttributes>; - th: HTMLProps<'th', HTMLAttributes>; - thead: HTMLProps<'thead', HTMLAttributes>; - time: HTMLProps<'time', HTMLAttributes>; - title: HTMLProps<'title', HTMLAttributes>; - tr: HTMLProps<'tr', HTMLAttributes>; - track: HTMLProps<'track', HTMLAttributes>; - u: HTMLProps<'u', HTMLAttributes>; - ul: HTMLProps<'ul', HTMLAttributes>; - var: HTMLProps<'var', HTMLAttributes>; - video: HTMLProps<'video', HTMLAttributes>; - wbr: HTMLProps<'wbr', HTMLAttributes>; - webview: HTMLProps<'webview', HTMLAttributes>; - // SVG - svg: HTMLProps<'svg', SVGAttributes>; + /** + * Avoid using this interface directly. Instead use the `SvelteHTMLElements` interface exported by `svelte/elements` + * This should only be used if you need to extend the interface with custom elements + */ + interface IntrinsicElements extends svelteElements.SvelteHTMLElements { + a: HTMLProps<'a', HTMLAttributes>; + abbr: HTMLProps<'abbr', HTMLAttributes>; + address: HTMLProps<'address', HTMLAttributes>; + area: HTMLProps<'area', HTMLAttributes>; + article: HTMLProps<'article', HTMLAttributes>; + aside: HTMLProps<'aside', HTMLAttributes>; + audio: HTMLProps<'audio', HTMLAttributes>; + b: HTMLProps<'b', HTMLAttributes>; + base: HTMLProps<'base', HTMLAttributes>; + bdi: HTMLProps<'bdi', HTMLAttributes>; + bdo: HTMLProps<'bdo', HTMLAttributes>; + big: HTMLProps<'big', HTMLAttributes>; + blockquote: HTMLProps<'blockquote', HTMLAttributes>; + body: HTMLProps<'body', HTMLAttributes>; + br: HTMLProps<'br', HTMLAttributes>; + button: HTMLProps<'button', HTMLAttributes>; + canvas: HTMLProps<'canvas', HTMLAttributes>; + caption: HTMLProps<'caption', HTMLAttributes>; + cite: HTMLProps<'cite', HTMLAttributes>; + code: HTMLProps<'code', HTMLAttributes>; + col: HTMLProps<'col', HTMLAttributes>; + colgroup: HTMLProps<'colgroup', HTMLAttributes>; + data: HTMLProps<'data', HTMLAttributes>; + datalist: HTMLProps<'datalist', HTMLAttributes>; + dd: HTMLProps<'dd', HTMLAttributes>; + del: HTMLProps<'del', HTMLAttributes>; + details: HTMLProps<'details', HTMLAttributes>; + dfn: HTMLProps<'dfn', HTMLAttributes>; + dialog: HTMLProps<'dialog', HTMLAttributes>; + div: HTMLProps<'div', HTMLAttributes>; + dl: HTMLProps<'dl', HTMLAttributes>; + dt: HTMLProps<'dt', HTMLAttributes>; + em: HTMLProps<'em', HTMLAttributes>; + embed: HTMLProps<'embed', HTMLAttributes>; + fieldset: HTMLProps<'fieldset', HTMLAttributes>; + figcaption: HTMLProps<'figcaption', HTMLAttributes>; + figure: HTMLProps<'figure', HTMLAttributes>; + footer: HTMLProps<'footer', HTMLAttributes>; + form: HTMLProps<'form', HTMLAttributes>; + h1: HTMLProps<'h1', HTMLAttributes>; + h2: HTMLProps<'h2', HTMLAttributes>; + h3: HTMLProps<'h3', HTMLAttributes>; + h4: HTMLProps<'h4', HTMLAttributes>; + h5: HTMLProps<'h5', HTMLAttributes>; + h6: HTMLProps<'h6', HTMLAttributes>; + head: HTMLProps<'head', HTMLAttributes>; + header: HTMLProps<'header', HTMLAttributes>; + hgroup: HTMLProps<'hgroup', HTMLAttributes>; + hr: HTMLProps<'hr', HTMLAttributes>; + html: HTMLProps<'html', HTMLAttributes>; + i: HTMLProps<'i', HTMLAttributes>; + iframe: HTMLProps<'iframe', HTMLAttributes>; + img: HTMLProps<'img', HTMLAttributes>; + input: HTMLProps<'input', HTMLAttributes>; + ins: HTMLProps<'ins', HTMLAttributes>; + kbd: HTMLProps<'kbd', HTMLAttributes>; + keygen: HTMLProps<'keygen', HTMLAttributes>; + label: HTMLProps<'label', HTMLAttributes>; + legend: HTMLProps<'legend', HTMLAttributes>; + li: HTMLProps<'li', HTMLAttributes>; + link: HTMLProps<'link', HTMLAttributes>; + main: HTMLProps<'main', HTMLAttributes>; + map: HTMLProps<'map', HTMLAttributes>; + mark: HTMLProps<'mark', HTMLAttributes>; + menu: HTMLProps<'menu', HTMLAttributes>; + menuitem: HTMLProps<'menuitem', HTMLAttributes>; + meta: HTMLProps<'meta', HTMLAttributes>; + meter: HTMLProps<'meter', HTMLAttributes>; + nav: HTMLProps<'nav', HTMLAttributes>; + noscript: HTMLProps<'noscript', HTMLAttributes>; + object: HTMLProps<'object', HTMLAttributes>; + ol: HTMLProps<'ol', HTMLAttributes>; + optgroup: HTMLProps<'optgroup', HTMLAttributes>; + option: HTMLProps<'option', HTMLAttributes>; + output: HTMLProps<'output', HTMLAttributes>; + p: HTMLProps<'p', HTMLAttributes>; + param: HTMLProps<'param', HTMLAttributes>; + picture: HTMLProps<'picture', HTMLAttributes>; + pre: HTMLProps<'pre', HTMLAttributes>; + progress: HTMLProps<'progress', HTMLAttributes>; + q: HTMLProps<'q', HTMLAttributes>; + rp: HTMLProps<'rp', HTMLAttributes>; + rt: HTMLProps<'rt', HTMLAttributes>; + ruby: HTMLProps<'ruby', HTMLAttributes>; + s: HTMLProps<'s', HTMLAttributes>; + samp: HTMLProps<'samp', HTMLAttributes>; + slot: HTMLProps<'slot', HTMLAttributes>; + script: HTMLProps<'script', HTMLAttributes>; + section: HTMLProps<'section', HTMLAttributes>; + select: HTMLProps<'select', HTMLAttributes>; + small: HTMLProps<'small', HTMLAttributes>; + source: HTMLProps<'source', HTMLAttributes>; + span: HTMLProps<'span', HTMLAttributes>; + strong: HTMLProps<'strong', HTMLAttributes>; + style: HTMLProps<'style', HTMLAttributes>; + sub: HTMLProps<'sub', HTMLAttributes>; + summary: HTMLProps<'summary', HTMLAttributes>; + sup: HTMLProps<'sup', HTMLAttributes>; + table: HTMLProps<'table', HTMLAttributes>; + template: HTMLProps<'template', HTMLAttributes>; + tbody: HTMLProps<'tbody', HTMLAttributes>; + td: HTMLProps<'td', HTMLAttributes>; + textarea: HTMLProps<'textarea', HTMLAttributes>; + tfoot: HTMLProps<'tfoot', HTMLAttributes>; + th: HTMLProps<'th', HTMLAttributes>; + thead: HTMLProps<'thead', HTMLAttributes>; + time: HTMLProps<'time', HTMLAttributes>; + title: HTMLProps<'title', HTMLAttributes>; + tr: HTMLProps<'tr', HTMLAttributes>; + track: HTMLProps<'track', HTMLAttributes>; + u: HTMLProps<'u', HTMLAttributes>; + ul: HTMLProps<'ul', HTMLAttributes>; + var: HTMLProps<'var', HTMLAttributes>; + video: HTMLProps<'video', HTMLAttributes>; + wbr: HTMLProps<'wbr', HTMLAttributes>; + webview: HTMLProps<'webview', HTMLAttributes>; + // SVG + svg: HTMLProps<'svg', SVGAttributes>; - animate: HTMLProps<'animate', SVGAttributes>; - animateMotion: HTMLProps<'animateMotion', SVGAttributes>; - animateTransform: HTMLProps<'animateTransform', SVGAttributes>; - circle: HTMLProps<'circle', SVGAttributes>; - clipPath: HTMLProps<'clipPath', SVGAttributes>; - defs: HTMLProps<'defs', SVGAttributes>; - desc: HTMLProps<'desc', SVGAttributes>; - ellipse: HTMLProps<'ellipse', SVGAttributes>; - feBlend: HTMLProps<'feBlend', SVGAttributes>; - feColorMatrix: HTMLProps<'feColorMatrix', SVGAttributes>; - feComponentTransfer: HTMLProps<'feComponentTransfer', SVGAttributes>; - feComposite: HTMLProps<'feComposite', SVGAttributes>; - feConvolveMatrix: HTMLProps<'feConvolveMatrix', SVGAttributes>; - feDiffuseLighting: HTMLProps<'feDiffuseLighting', SVGAttributes>; - feDisplacementMap: HTMLProps<'feDisplacementMap', SVGAttributes>; - feDistantLight: HTMLProps<'feDistantLight', SVGAttributes>; - feDropShadow: HTMLProps<'feDropShadow', SVGAttributes>; - feFlood: HTMLProps<'feFlood', SVGAttributes>; - feFuncA: HTMLProps<'feFuncA', SVGAttributes>; - feFuncB: HTMLProps<'feFuncB', SVGAttributes>; - feFuncG: HTMLProps<'feFuncG', SVGAttributes>; - feFuncR: HTMLProps<'feFuncR', SVGAttributes>; - feGaussianBlur: HTMLProps<'feGaussianBlur', SVGAttributes>; - feImage: HTMLProps<'feImage', SVGAttributes>; - feMerge: HTMLProps<'feMerge', SVGAttributes>; - feMergeNode: HTMLProps<'feMergeNode', SVGAttributes>; - feMorphology: HTMLProps<'feMorphology', SVGAttributes>; - feOffset: HTMLProps<'feOffset', SVGAttributes>; - fePointLight: HTMLProps<'fePointLight', SVGAttributes>; - feSpecularLighting: HTMLProps<'feSpecularLighting', SVGAttributes>; - feSpotLight: HTMLProps<'feSpotLight', SVGAttributes>; - feTile: HTMLProps<'feTile', SVGAttributes>; - feTurbulence: HTMLProps<'feTurbulence', SVGAttributes>; - filter: HTMLProps<'filter', SVGAttributes>; - foreignObject: HTMLProps<'foreignObject', SVGAttributes>; - g: HTMLProps<'g', SVGAttributes>; - image: HTMLProps<'image', SVGAttributes>; - line: HTMLProps<'line', SVGAttributes>; - linearGradient: HTMLProps<'linearGradient', SVGAttributes>; - marker: HTMLProps<'marker', SVGAttributes>; - mask: HTMLProps<'mask', SVGAttributes>; - metadata: HTMLProps<'metadata', SVGAttributes>; - mpath: HTMLProps<'mpath', SVGAttributes>; - path: HTMLProps<'path', SVGAttributes>; - pattern: HTMLProps<'pattern', SVGAttributes>; - polygon: HTMLProps<'polygon', SVGAttributes>; - polyline: HTMLProps<'polyline', SVGAttributes>; - radialGradient: HTMLProps<'radialGradient', SVGAttributes>; - rect: HTMLProps<'rect', SVGAttributes>; - stop: HTMLProps<'stop', SVGAttributes>; - switch: HTMLProps<'switch', SVGAttributes>; - symbol: HTMLProps<'symbol', SVGAttributes>; - text: HTMLProps<'text', SVGAttributes>; - textPath: HTMLProps<'textPath', SVGAttributes>; - tspan: HTMLProps<'tspan', SVGAttributes>; - use: HTMLProps<'use', SVGAttributes>; - view: HTMLProps<'view', SVGAttributes>; + animate: HTMLProps<'animate', SVGAttributes>; + animateMotion: HTMLProps<'animateMotion', SVGAttributes>; + animateTransform: HTMLProps<'animateTransform', SVGAttributes>; + circle: HTMLProps<'circle', SVGAttributes>; + clipPath: HTMLProps<'clipPath', SVGAttributes>; + defs: HTMLProps<'defs', SVGAttributes>; + desc: HTMLProps<'desc', SVGAttributes>; + ellipse: HTMLProps<'ellipse', SVGAttributes>; + feBlend: HTMLProps<'feBlend', SVGAttributes>; + feColorMatrix: HTMLProps<'feColorMatrix', SVGAttributes>; + feComponentTransfer: HTMLProps<'feComponentTransfer', SVGAttributes>; + feComposite: HTMLProps<'feComposite', SVGAttributes>; + feConvolveMatrix: HTMLProps<'feConvolveMatrix', SVGAttributes>; + feDiffuseLighting: HTMLProps<'feDiffuseLighting', SVGAttributes>; + feDisplacementMap: HTMLProps<'feDisplacementMap', SVGAttributes>; + feDistantLight: HTMLProps<'feDistantLight', SVGAttributes>; + feDropShadow: HTMLProps<'feDropShadow', SVGAttributes>; + feFlood: HTMLProps<'feFlood', SVGAttributes>; + feFuncA: HTMLProps<'feFuncA', SVGAttributes>; + feFuncB: HTMLProps<'feFuncB', SVGAttributes>; + feFuncG: HTMLProps<'feFuncG', SVGAttributes>; + feFuncR: HTMLProps<'feFuncR', SVGAttributes>; + feGaussianBlur: HTMLProps<'feGaussianBlur', SVGAttributes>; + feImage: HTMLProps<'feImage', SVGAttributes>; + feMerge: HTMLProps<'feMerge', SVGAttributes>; + feMergeNode: HTMLProps<'feMergeNode', SVGAttributes>; + feMorphology: HTMLProps<'feMorphology', SVGAttributes>; + feOffset: HTMLProps<'feOffset', SVGAttributes>; + fePointLight: HTMLProps<'fePointLight', SVGAttributes>; + feSpecularLighting: HTMLProps<'feSpecularLighting', SVGAttributes>; + feSpotLight: HTMLProps<'feSpotLight', SVGAttributes>; + feTile: HTMLProps<'feTile', SVGAttributes>; + feTurbulence: HTMLProps<'feTurbulence', SVGAttributes>; + filter: HTMLProps<'filter', SVGAttributes>; + foreignObject: HTMLProps<'foreignObject', SVGAttributes>; + g: HTMLProps<'g', SVGAttributes>; + image: HTMLProps<'image', SVGAttributes>; + line: HTMLProps<'line', SVGAttributes>; + linearGradient: HTMLProps<'linearGradient', SVGAttributes>; + marker: HTMLProps<'marker', SVGAttributes>; + mask: HTMLProps<'mask', SVGAttributes>; + metadata: HTMLProps<'metadata', SVGAttributes>; + mpath: HTMLProps<'mpath', SVGAttributes>; + path: HTMLProps<'path', SVGAttributes>; + pattern: HTMLProps<'pattern', SVGAttributes>; + polygon: HTMLProps<'polygon', SVGAttributes>; + polyline: HTMLProps<'polyline', SVGAttributes>; + radialGradient: HTMLProps<'radialGradient', SVGAttributes>; + rect: HTMLProps<'rect', SVGAttributes>; + stop: HTMLProps<'stop', SVGAttributes>; + switch: HTMLProps<'switch', SVGAttributes>; + symbol: HTMLProps<'symbol', SVGAttributes>; + text: HTMLProps<'text', SVGAttributes>; + textPath: HTMLProps<'textPath', SVGAttributes>; + tspan: HTMLProps<'tspan', SVGAttributes>; + use: HTMLProps<'use', SVGAttributes>; + view: HTMLProps<'view', SVGAttributes>; - // Svelte specific - 'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>; - 'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>; - 'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>; - 'svelte:fragment': { slot?: string }; - 'svelte:options': { [name: string]: any }; - 'svelte:head': { [name: string]: any }; + // Svelte specific + 'svelte:window': HTMLProps<'svelte:window', HTMLAttributes>; + 'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>; + 'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>; + 'svelte:fragment': { slot?: string }; + 'svelte:options': { [name: string]: any }; + 'svelte:head': { [name: string]: any }; - [name: string]: { [name: string]: any }; + [name: string]: { [name: string]: any }; + } } } From f1e84e180ac5f54e2ac6f90c1346d0af8d8327e3 Mon Sep 17 00:00:00 2001 From: "Lyu, Wei-Da" <36730922+jasonlyu123@users.noreply.github.com> Date: Fri, 4 Aug 2023 17:00:20 +0800 Subject: [PATCH 3/8] Apply suggestions from code review Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- packages/svelte/svelte-html.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts index 726afc2f058d..8857c10dd38f 100644 --- a/packages/svelte/svelte-html.d.ts +++ b/packages/svelte/svelte-html.d.ts @@ -1,4 +1,6 @@ /// +// This file is deliberately not exposed through the exports map. +// It's meant to be loaded directly by the Svelte language server /* eslint-disable @typescript-eslint/no-empty-interface */ import * as svelteElements from './elements'; @@ -241,7 +243,7 @@ declare global { 'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>; 'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>; 'svelte:fragment': { slot?: string }; - 'svelte:options': { [name: string]: any }; + 'svelte:options': HTMLProps<'svelte:options', HTMLAttributes>; 'svelte:head': { [name: string]: any }; [name: string]: { [name: string]: any }; From 95b30b69482154eb7e5c224bdd5d87c14b5acc78 Mon Sep 17 00:00:00 2001 From: "Lyu, Wei Da" Date: Fri, 4 Aug 2023 17:10:41 +0800 Subject: [PATCH 4/8] changeset --- .changeset/slimy-dingos-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slimy-dingos-call.md diff --git a/.changeset/slimy-dingos-call.md b/.changeset/slimy-dingos-call.md new file mode 100644 index 000000000000..5a1e8cb6ab8e --- /dev/null +++ b/.changeset/slimy-dingos-call.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +fix: move svelteHTML from language-tools to load the correct svelte/element From 9e7ac816fb34f87ae29b141113d38c8903a13741 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 11 Aug 2023 15:24:32 +0200 Subject: [PATCH 5/8] add file to package.json --- packages/svelte/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 8a294c6dff42..cbc11b3da777 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -19,6 +19,7 @@ "motion.d.ts", "action.d.ts", "elements.d.ts", + "svelte-html.d.ts", "README.md" ], "exports": { From 3038d6d1df98b5436f02f1b8731732c83e4102ad Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 11 Aug 2023 15:26:42 +0200 Subject: [PATCH 6/8] add .js ending for node16/nodenext configs --- packages/svelte/svelte-html.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts index 8857c10dd38f..3547ad0d33b2 100644 --- a/packages/svelte/svelte-html.d.ts +++ b/packages/svelte/svelte-html.d.ts @@ -3,13 +3,13 @@ // It's meant to be loaded directly by the Svelte language server /* eslint-disable @typescript-eslint/no-empty-interface */ -import * as svelteElements from './elements'; +import * as svelteElements from './elements.js'; /** * @internal do not use */ type HTMLProps = Omit< - import('./elements').SvelteHTMLElements[Property], + import('./elements.js').SvelteHTMLElements[Property], keyof Override > & Override; From fffdfbc5302f91b91bf7080c78c858a0fcfe5a06 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 11 Aug 2023 15:32:22 +0200 Subject: [PATCH 7/8] document it --- documentation/docs/05-misc/03-typescript.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md index d5772fa15708..b88c6f5c9ff7 100644 --- a/documentation/docs/05-misc/03-typescript.md +++ b/documentation/docs/05-misc/03-typescript.md @@ -140,6 +140,24 @@ declare namespace svelteHTML { Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect. +Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension version 107.10.0 you can also declare the typings by augmenting the the `svelte/elements` module like this: + +```js +/// file: additional-svelte-typings.d.ts +import { HTMLButtonAttributes } from 'svelte/elements' + +declare module 'svelte/elements' { + export interface SvelteHTMLElements { + 'custom-button': HTMLButtonAttributes; + } + + // allows for more granular control over what element to add the typings to + export interface HTMLButtonAttributes { + 'veryexperimentalattribute'?: string; + } +} +``` + ## Experimental advanced typings A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them. From 272909b77234be4a7ab00e2746d95c63c85914c8 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Fri, 11 Aug 2023 15:53:59 +0200 Subject: [PATCH 8/8] Update slimy-dingos-call.md --- .changeset/slimy-dingos-call.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slimy-dingos-call.md b/.changeset/slimy-dingos-call.md index 5a1e8cb6ab8e..4ecb122ae272 100644 --- a/.changeset/slimy-dingos-call.md +++ b/.changeset/slimy-dingos-call.md @@ -2,4 +2,4 @@ 'svelte': minor --- -fix: move svelteHTML from language-tools to load the correct svelte/element +feat: move `svelteHTML` from language-tools into core to load the correct `svelte/element` types