diff --git a/compat/jsx-runtime.d.ts b/compat/jsx-runtime.d.ts new file mode 100644 index 0000000000..f960193428 --- /dev/null +++ b/compat/jsx-runtime.d.ts @@ -0,0 +1,12 @@ +export { + Fragment, + jsx, + jsxs, + jsxDEV, + jsxTemplate, + jsxAttr, + jsxEscape +} from 'preact/jsx-runtime'; +import { CompatJSX } from './src/jsx'; + +export { CompatJSX as JSX }; diff --git a/compat/src/dom.d.ts b/compat/src/dom.d.ts new file mode 100644 index 0000000000..375f0bfbfd --- /dev/null +++ b/compat/src/dom.d.ts @@ -0,0 +1,121 @@ +import { Signalish } from '../../src/dom'; + +/** + * React-compatible SVG attributes available only in preact/compat. + * These camelCase attribute names are converted to their standard + * equivalents at runtime by preact/compat. + */ +export interface CompatSVGAttributes { + alignmentBaseline?: Signalish< + | 'auto' + | 'baseline' + | 'before-edge' + | 'text-before-edge' + | 'middle' + | 'central' + | 'after-edge' + | 'text-after-edge' + | 'ideographic' + | 'alphabetic' + | 'hanging' + | 'mathematical' + | 'inherit' + | undefined + >; + allowReorder?: Signalish<'no' | 'yes' | undefined>; + /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/arabic-form */ + arabicForm?: Signalish< + 'initial' | 'medial' | 'terminal' | 'isolated' | undefined + >; + baselineShift?: Signalish; + capHeight?: Signalish; + clipPath?: Signalish; + clipRule?: Signalish; + colorInterpolation?: Signalish; + colorInterpolationFilters?: Signalish< + 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined + >; + colorProfile?: Signalish; + colorRendering?: Signalish; + contentScriptType?: Signalish; + contentStyleType?: Signalish; + dominantBaseline?: Signalish; + enableBackground?: Signalish; + fillOpacity?: Signalish; + fillRule?: Signalish<'nonzero' | 'evenodd' | 'inherit' | undefined>; + floodColor?: Signalish; + floodOpacity?: Signalish; + fontFamily?: Signalish; + fontSize?: Signalish; + fontSizeAdjust?: Signalish; + fontStretch?: Signalish; + fontStyle?: Signalish; + fontVariant?: Signalish; + fontWeight?: Signalish; + glyphName?: Signalish; + glyphOrientationHorizontal?: Signalish; + glyphOrientationVertical?: Signalish; + horizAdvX?: Signalish; + horizOriginX?: Signalish; + hrefLang?: Signalish; + imageRendering?: Signalish; + letterSpacing?: Signalish; + lightingColor?: Signalish; + markerEnd?: Signalish; + markerMid?: Signalish; + markerStart?: Signalish; + overlinePosition?: Signalish; + overlineThickness?: Signalish; + paintOrder?: Signalish; + panose1?: Signalish; + pointerEvents?: Signalish; + renderingIntent?: Signalish; + repeatCount?: Signalish; + repeatDur?: Signalish; + shapeRendering?: Signalish; + stopColor?: Signalish; + stopOpacity?: Signalish; + strikethroughPosition?: Signalish; + strikethroughThickness?: Signalish; + strokeDasharray?: Signalish; + strokeDashoffset?: Signalish; + strokeLinecap?: Signalish< + 'butt' | 'round' | 'square' | 'inherit' | undefined + >; + strokeLinejoin?: Signalish< + 'miter' | 'round' | 'bevel' | 'inherit' | undefined + >; + strokeMiterlimit?: Signalish; + strokeOpacity?: Signalish; + strokeWidth?: Signalish; + textAnchor?: Signalish; + textDecoration?: Signalish; + textRendering?: Signalish; + transformOrigin?: Signalish; + underlinePosition?: Signalish; + underlineThickness?: Signalish; + unicodeBidi?: Signalish; + unicodeRange?: Signalish; + unitsPerEm?: Signalish; + vAlphabetic?: Signalish; + vectorEffect?: Signalish; + vertAdvY?: Signalish; + vertOriginX?: Signalish; + vertOriginY?: Signalish; + vHanging?: Signalish; + vIdeographic?: Signalish; + vMathematical?: Signalish; + wordSpacing?: Signalish; + writingMode?: Signalish; + xHeight?: Signalish; + xlinkActuate?: Signalish; + xlinkArcrole?: Signalish; + xlinkHref?: Signalish; + xlinkRole?: Signalish; + xlinkShow?: Signalish; + xlinkTitle?: Signalish; + xlinkType?: Signalish; + xmlBase?: Signalish; + xmlLang?: Signalish; + xmlSpace?: Signalish; +} diff --git a/compat/src/index.d.ts b/compat/src/index.d.ts index eb3fa7bbdb..2a678ed58c 100644 --- a/compat/src/index.d.ts +++ b/compat/src/index.d.ts @@ -4,6 +4,8 @@ import * as _hooks from '../../hooks'; import * as preact1 from 'preact'; import { JSXInternal } from '../../src/jsx'; import * as _Suspense from './suspense'; +import { CompatSVGAttributes } from './dom'; +import { CompatJSX } from './jsx'; declare namespace preact { export interface FunctionComponent

{ @@ -102,9 +104,10 @@ declare namespace preact { // export default React; export = React; export as namespace React; + declare namespace React { - // Export JSX - export import JSX = JSXInternal; + // Export JSX with React-compatible camelCase SVG attributes + export import JSX = CompatJSX; // Hooks export import CreateHandle = _hooks.CreateHandle; @@ -175,14 +178,12 @@ declare namespace React { export import DetailedHTMLProps = preact1.DetailedHTMLProps; export import CSSProperties = preact1.CSSProperties; + // Compat SVG attributes include React-compatible camelCase properties + // that are not available in core Preact export interface SVGProps extends preact1.SVGAttributes, - preact1.ClassAttributes {} - - interface SVGAttributes - extends preact1.SVGAttributes {} - - interface ReactSVG extends JSXInternal.IntrinsicSVGElements {} + preact1.ClassAttributes, + CompatSVGAttributes {} export import AriaAttributes = preact1.AriaAttributes; @@ -432,3 +433,11 @@ declare namespace React { ): void; export const unstable_now: () => number; } + +// Augment global JSX namespace when preact/compat is imported +declare global { + // eslint-disable-next-line @typescript-eslint/no-namespace + namespace JSX { + interface IntrinsicElements extends CompatJSX.IntrinsicElements {} + } +} diff --git a/compat/src/jsx.d.ts b/compat/src/jsx.d.ts new file mode 100644 index 0000000000..aa5b905b39 --- /dev/null +++ b/compat/src/jsx.d.ts @@ -0,0 +1,109 @@ +import * as preact from 'preact'; +import { JSXInternal } from '../../src/jsx'; +import { CompatSVGAttributes } from './dom'; + +type Defaultize = + // Distribute over unions + Props extends any // Make any properties included in Default optional + ? Partial>> & // Include the remaining properties from Props + Pick> + : never; + +// Compat SVGAttributes includes React-compatible camelCase properties +interface SVGAttributes + extends preact.SVGAttributes, + CompatSVGAttributes {} + +// Compat IntrinsicSVGElements uses SVGAttributes with camelCase properties +interface CompatIntrinsicSVGElements { + svg: SVGAttributes; + animate: SVGAttributes; + circle: SVGAttributes; + animateMotion: SVGAttributes; + animateTransform: SVGAttributes; + clipPath: SVGAttributes; + defs: SVGAttributes; + desc: SVGAttributes; + ellipse: SVGAttributes; + feBlend: SVGAttributes; + feColorMatrix: SVGAttributes; + feComponentTransfer: SVGAttributes; + feComposite: SVGAttributes; + feConvolveMatrix: SVGAttributes; + feDiffuseLighting: SVGAttributes; + feDisplacementMap: SVGAttributes; + feDistantLight: SVGAttributes; + feDropShadow: SVGAttributes; + feFlood: SVGAttributes; + feFuncA: SVGAttributes; + feFuncB: SVGAttributes; + feFuncG: SVGAttributes; + feFuncR: SVGAttributes; + feGaussianBlur: SVGAttributes; + feImage: SVGAttributes; + feMerge: SVGAttributes; + feMergeNode: SVGAttributes; + feMorphology: SVGAttributes; + feOffset: SVGAttributes; + fePointLight: SVGAttributes; + feSpecularLighting: SVGAttributes; + feSpotLight: SVGAttributes; + feTile: SVGAttributes; + feTurbulence: SVGAttributes; + filter: SVGAttributes; + foreignObject: SVGAttributes; + g: SVGAttributes; + image: SVGAttributes; + line: SVGAttributes; + linearGradient: SVGAttributes; + marker: SVGAttributes; + mask: SVGAttributes; + metadata: SVGAttributes; + mpath: SVGAttributes; + path: SVGAttributes; + pattern: SVGAttributes; + polygon: SVGAttributes; + polyline: SVGAttributes; + radialGradient: SVGAttributes; + rect: SVGAttributes; + set: SVGAttributes; + stop: SVGAttributes; + switch: SVGAttributes; + symbol: SVGAttributes; + text: SVGAttributes; + textPath: SVGAttributes; + tspan: SVGAttributes; + use: SVGAttributes; + view: SVGAttributes; +} + +export namespace CompatJSX { + export type LibraryManagedAttributes = Component extends { + defaultProps: infer Defaults; + } + ? Defaultize + : Props; + + export type IntrinsicAttributes = JSXInternal.IntrinsicAttributes; + + export type ElementType

= JSXInternal.ElementType

; + + export type Element = JSXInternal.Element; + + export type ElementClass = JSXInternal.ElementClass; + + export type ElementAttributesProperty = JSXInternal.ElementAttributesProperty; + + export type ElementChildrenAttribute = JSXInternal.ElementChildrenAttribute; + + export interface IntrinsicSVGElements extends CompatIntrinsicSVGElements {} + + export type IntrinsicMathMLElements = JSXInternal.IntrinsicMathMLElements; + + export type IntrinsicHTMLElements = JSXInternal.IntrinsicHTMLElements; + + export interface IntrinsicElements + extends IntrinsicSVGElements, + IntrinsicMathMLElements, + IntrinsicHTMLElements {} +} diff --git a/compat/test/ts/dom-attributes.test-d.tsx b/compat/test/ts/dom-attributes.test-d.tsx new file mode 100644 index 0000000000..ca48aeadd4 --- /dev/null +++ b/compat/test/ts/dom-attributes.test-d.tsx @@ -0,0 +1,24 @@ +/* eslint-disable no-unused-vars */ +import React from '../../src'; + +// SVG camelCase attributes should be available in preact/compat +// These are React-compatible and converted to kebab-case at runtime +const svgCasingTest = ( + + + +); + +// Standard kebab-case SVG attributes should also work +const svgKebabCaseTest = ( + + + +); + +// More camelCase SVG attributes that should work in compat +const fillOpacityTest = ; +const stopColorTest = ; +const fontFamilyTest = ; +const strokeDasharrayTest = ; +const textAnchorTest = ; diff --git a/package.json b/package.json index a20bd071ce..402546b780 100644 --- a/package.json +++ b/package.json @@ -88,12 +88,12 @@ "default": "./compat/server.browser.js" }, "./compat/jsx-runtime": { - "types": "./jsx-runtime/src/index.d.ts", + "types": "./compat/jsx-runtime.d.ts", "import": "./compat/jsx-runtime.mjs", "require": "./compat/jsx-runtime.js" }, "./compat/jsx-dev-runtime": { - "types": "./jsx-runtime/src/index.d.ts", + "types": "./compat/jsx-runtime.d.ts", "import": "./compat/jsx-dev-runtime.mjs", "require": "./compat/jsx-dev-runtime.js" }, diff --git a/src/dom.d.ts b/src/dom.d.ts index a76a496eef..af01c6d719 100644 --- a/src/dom.d.ts +++ b/src/dom.d.ts @@ -35,18 +35,18 @@ interface CommandEventInit extends EventInit { /** [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent) */ interface SnapEvent extends Event { - readonly snapTargetBlock: Element | null; - readonly snapTargetInline: Element | null; + readonly snapTargetBlock: Element | null; + readonly snapTargetInline: Element | null; } declare var SnapEvent: { - prototype: SnapEvent; - new (type: string, eventInitDict?: SnapEventInit): SnapEvent; -} + prototype: SnapEvent; + new (type: string, eventInitDict?: SnapEventInit): SnapEvent; +}; interface SnapEventInit extends EventInit { - snapTargetBlock?: Element | null; - snapTargetInline?: Element | null; + snapTargetBlock?: Element | null; + snapTargetInline?: Element | null; } type Booleanish = boolean | 'true' | 'false'; @@ -83,22 +83,6 @@ export interface SVGAttributes accentHeight?: Signalish; accumulate?: Signalish<'none' | 'sum' | undefined>; additive?: Signalish<'replace' | 'sum' | undefined>; - alignmentBaseline?: Signalish< - | 'auto' - | 'baseline' - | 'before-edge' - | 'text-before-edge' - | 'middle' - | 'central' - | 'after-edge' - | 'text-after-edge' - | 'ideographic' - | 'alphabetic' - | 'hanging' - | 'mathematical' - | 'inherit' - | undefined - >; 'alignment-baseline'?: Signalish< | 'auto' | 'baseline' @@ -115,15 +99,10 @@ export interface SVGAttributes | 'inherit' | undefined >; - allowReorder?: Signalish<'no' | 'yes' | undefined>; 'allow-reorder'?: Signalish<'no' | 'yes' | undefined>; alphabetic?: Signalish; amplitude?: Signalish; /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/arabic-form */ - arabicForm?: Signalish< - 'initial' | 'medial' | 'terminal' | 'isolated' | undefined - >; - /** @deprecated See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/arabic-form */ 'arabic-form'?: Signalish< 'initial' | 'medial' | 'terminal' | 'isolated' | undefined >; @@ -132,7 +111,6 @@ export interface SVGAttributes attributeType?: Signalish; azimuth?: Signalish; baseFrequency?: Signalish; - baselineShift?: Signalish; 'baseline-shift'?: Signalish; baseProfile?: Signalish; bbox?: Signalish; @@ -140,29 +118,18 @@ export interface SVGAttributes bias?: Signalish; by?: Signalish; calcMode?: Signalish; - capHeight?: Signalish; 'cap-height'?: Signalish; clip?: Signalish; - clipPath?: Signalish; 'clip-path'?: Signalish; clipPathUnits?: Signalish; - clipRule?: Signalish; 'clip-rule'?: Signalish; - colorInterpolation?: Signalish; 'color-interpolation'?: Signalish; - colorInterpolationFilters?: Signalish< - 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined - >; 'color-interpolation-filters'?: Signalish< 'auto' | 'sRGB' | 'linearRGB' | 'inherit' | undefined >; - colorProfile?: Signalish; 'color-profile'?: Signalish; - colorRendering?: Signalish; 'color-rendering'?: Signalish; - contentScriptType?: Signalish; 'content-script-type'?: Signalish; - contentStyleType?: Signalish; 'content-style-type'?: Signalish; cursor?: Signalish; cx?: Signalish; @@ -174,44 +141,31 @@ export interface SVGAttributes direction?: Signalish; display?: Signalish; divisor?: Signalish; - dominantBaseline?: Signalish; 'dominant-baseline'?: Signalish; dur?: Signalish; dx?: Signalish; dy?: Signalish; edgeMode?: Signalish; elevation?: Signalish; - enableBackground?: Signalish; 'enable-background'?: Signalish; end?: Signalish; exponent?: Signalish; externalResourcesRequired?: Signalish; fill?: Signalish; - fillOpacity?: Signalish; 'fill-opacity'?: Signalish; - fillRule?: Signalish<'nonzero' | 'evenodd' | 'inherit' | undefined>; 'fill-rule'?: Signalish<'nonzero' | 'evenodd' | 'inherit' | undefined>; filter?: Signalish; filterRes?: Signalish; filterUnits?: Signalish; - floodColor?: Signalish; 'flood-color'?: Signalish; - floodOpacity?: Signalish; 'flood-opacity'?: Signalish; focusable?: Signalish; - fontFamily?: Signalish; 'font-family'?: Signalish; - fontSize?: Signalish; 'font-size'?: Signalish; - fontSizeAdjust?: Signalish; 'font-size-adjust'?: Signalish; - fontStretch?: Signalish; 'font-stretch'?: Signalish; - fontStyle?: Signalish; 'font-style'?: Signalish; - fontVariant?: Signalish; 'font-variant'?: Signalish; - fontWeight?: Signalish; 'font-weight'?: Signalish; format?: Signalish; from?: Signalish; @@ -219,26 +173,19 @@ export interface SVGAttributes fy?: Signalish; g1?: Signalish; g2?: Signalish; - glyphName?: Signalish; 'glyph-name'?: Signalish; - glyphOrientationHorizontal?: Signalish; 'glyph-orientation-horizontal'?: Signalish; - glyphOrientationVertical?: Signalish; 'glyph-orientation-vertical'?: Signalish; glyphRef?: Signalish; gradientTransform?: Signalish; gradientUnits?: Signalish; hanging?: Signalish; height?: Signalish; - horizAdvX?: Signalish; 'horiz-adv-x'?: Signalish; - horizOriginX?: Signalish; 'horiz-origin-x'?: Signalish; href?: Signalish; hreflang?: Signalish; - hrefLang?: Signalish; ideographic?: Signalish; - imageRendering?: Signalish; 'image-rendering'?: Signalish; in2?: Signalish; in?: Signalish; @@ -255,18 +202,13 @@ export interface SVGAttributes keySplines?: Signalish; keyTimes?: Signalish; lengthAdjust?: Signalish; - letterSpacing?: Signalish; 'letter-spacing'?: Signalish; - lightingColor?: Signalish; 'lighting-color'?: Signalish; limitingConeAngle?: Signalish; local?: Signalish; - markerEnd?: Signalish; 'marker-end'?: Signalish; markerHeight?: Signalish; - markerMid?: Signalish; 'marker-mid'?: Signalish; - markerStart?: Signalish; 'marker-start'?: Signalish; markerUnits?: Signalish; markerWidth?: Signalish; @@ -284,19 +226,14 @@ export interface SVGAttributes orientation?: Signalish; origin?: Signalish; overflow?: Signalish; - overlinePosition?: Signalish; 'overline-position'?: Signalish; - overlineThickness?: Signalish; 'overline-thickness'?: Signalish; - paintOrder?: Signalish; 'paint-order'?: Signalish; - panose1?: Signalish; 'panose-1'?: Signalish; pathLength?: Signalish; patternContentUnits?: Signalish; patternTransform?: Signalish; patternUnits?: Signalish; - pointerEvents?: Signalish; 'pointer-events'?: Signalish; points?: Signalish; pointsAtX?: Signalish; @@ -309,11 +246,8 @@ export interface SVGAttributes radius?: Signalish; refX?: Signalish; refY?: Signalish; - renderingIntent?: Signalish; 'rendering-intent'?: Signalish; - repeatCount?: Signalish; 'repeat-count'?: Signalish; - repeatDur?: Signalish; 'repeat-dur'?: Signalish; requiredExtensions?: Signalish; requiredFeatures?: Signalish; @@ -324,7 +258,6 @@ export interface SVGAttributes ry?: Signalish; scale?: Signalish; seed?: Signalish; - shapeRendering?: Signalish; 'shape-rendering'?: Signalish; slope?: Signalish; spacing?: Signalish; @@ -337,121 +270,75 @@ export interface SVGAttributes stemh?: Signalish; stemv?: Signalish; stitchTiles?: Signalish; - stopColor?: Signalish; 'stop-color'?: Signalish; - stopOpacity?: Signalish; 'stop-opacity'?: Signalish; - strikethroughPosition?: Signalish; 'strikethrough-position'?: Signalish; - strikethroughThickness?: Signalish; 'strikethrough-thickness'?: Signalish; string?: Signalish; stroke?: Signalish; - strokeDasharray?: Signalish; 'stroke-dasharray'?: Signalish; - strokeDashoffset?: Signalish; 'stroke-dashoffset'?: Signalish; - strokeLinecap?: Signalish< - 'butt' | 'round' | 'square' | 'inherit' | undefined - >; 'stroke-linecap'?: Signalish< 'butt' | 'round' | 'square' | 'inherit' | undefined >; - strokeLinejoin?: Signalish< - 'miter' | 'round' | 'bevel' | 'inherit' | undefined - >; 'stroke-linejoin'?: Signalish< 'miter' | 'round' | 'bevel' | 'inherit' | undefined >; - strokeMiterlimit?: Signalish; 'stroke-miterlimit'?: Signalish; - strokeOpacity?: Signalish; 'stroke-opacity'?: Signalish; - strokeWidth?: Signalish; 'stroke-width'?: Signalish; surfaceScale?: Signalish; systemLanguage?: Signalish; tableValues?: Signalish; targetX?: Signalish; targetY?: Signalish; - textAnchor?: Signalish; 'text-anchor'?: Signalish; - textDecoration?: Signalish; 'text-decoration'?: Signalish; textLength?: Signalish; - textRendering?: Signalish; 'text-rendering'?: Signalish; to?: Signalish; transform?: Signalish; - transformOrigin?: Signalish; 'transform-origin'?: Signalish; type?: Signalish; u1?: Signalish; u2?: Signalish; - underlinePosition?: Signalish; 'underline-position'?: Signalish; - underlineThickness?: Signalish; 'underline-thickness'?: Signalish; unicode?: Signalish; - unicodeBidi?: Signalish; 'unicode-bidi'?: Signalish; - unicodeRange?: Signalish; 'unicode-range'?: Signalish; - unitsPerEm?: Signalish; 'units-per-em'?: Signalish; - vAlphabetic?: Signalish; 'v-alphabetic'?: Signalish; values?: Signalish; - vectorEffect?: Signalish; 'vector-effect'?: Signalish; version?: Signalish; - vertAdvY?: Signalish; 'vert-adv-y'?: Signalish; - vertOriginX?: Signalish; 'vert-origin-x'?: Signalish; - vertOriginY?: Signalish; 'vert-origin-y'?: Signalish; - vHanging?: Signalish; 'v-hanging'?: Signalish; - vIdeographic?: Signalish; 'v-ideographic'?: Signalish; viewBox?: Signalish; viewTarget?: Signalish; visibility?: Signalish; - vMathematical?: Signalish; 'v-mathematical'?: Signalish; width?: Signalish; - wordSpacing?: Signalish; 'word-spacing'?: Signalish; - writingMode?: Signalish; 'writing-mode'?: Signalish; x1?: Signalish; x2?: Signalish; x?: Signalish; xChannelSelector?: Signalish; - xHeight?: Signalish; 'x-height'?: Signalish; - xlinkActuate?: Signalish; - 'xlink:actuate'?: Signalish; - xlinkArcrole?: Signalish; + 'xlink:actuate'?: Signalish; 'xlink:arcrole'?: Signalish; - xlinkHref?: Signalish; 'xlink:href'?: Signalish; - xlinkRole?: Signalish; 'xlink:role'?: Signalish; - xlinkShow?: Signalish; 'xlink:show'?: Signalish; - xlinkTitle?: Signalish; 'xlink:title'?: Signalish; - xlinkType?: Signalish; 'xlink:type'?: Signalish; - xmlBase?: Signalish; 'xml:base'?: Signalish; - xmlLang?: Signalish; 'xml:lang'?: Signalish; xmlns?: Signalish; - xmlnsXlink?: Signalish; - xmlSpace?: Signalish; 'xml:space'?: Signalish; y1?: Signalish; y2?: Signalish; @@ -511,8 +398,8 @@ export type TargetedPointerEvent = TargetedEvent< PointerEvent >; export type TargetedSnapEvent = TargetedEvent< - Target, - SnapEvent + Target, + SnapEvent >; export type TargetedSubmitEvent = TargetedEvent< Target, @@ -582,7 +469,7 @@ export type PointerEventHandler = EventHandler< TargetedPointerEvent >; export type SnapEventHandler = EventHandler< - TargetedSnapEvent + TargetedSnapEvent >; export type SubmitEventHandler = EventHandler< TargetedSubmitEvent diff --git a/test/ts/dom-attributes.test-d.tsx b/test/ts/dom-attributes.test-d.tsx index bf60185fc7..f5b298b980 100644 --- a/test/ts/dom-attributes.test-d.tsx +++ b/test/ts/dom-attributes.test-d.tsx @@ -261,3 +261,27 @@ const dangerouslySetInnerHTML = (

); + +// SVG camelCase attributes should NOT be available in core Preact +// These are React-isms only supported in preact/compat +const svgCasingTest = ( + + {/* @ts-expect-error strokeWidth is a React-ism not supported in core */} + + +); + +// Standard kebab-case SVG attributes should work in core +const svgKebabCaseTest = ( + + + +); + +// More camelCase SVG attributes that should fail in core +// @ts-expect-error fillOpacity is a React-ism +const fillOpacityTest = ; +// @ts-expect-error stopColor is a React-ism +const stopColorTest = ; +// @ts-expect-error fontFamily is a React-ism +const fontFamilyTest = ; diff --git a/test/ts/preact.tsx b/test/ts/preact.tsx index a07c8316fb..406f169ee9 100644 --- a/test/ts/preact.tsx +++ b/test/ts/preact.tsx @@ -15,7 +15,7 @@ import { TargetedSubmitEvent, AllHTMLAttributes, HTMLAttributes, - InputHTMLAttributes, + InputHTMLAttributes } from '../../'; function createSignal(value: T): SignalLike { @@ -419,10 +419,7 @@ createElement('input', { e.currentTarget.capture} />; function Checkbox({ onChange }: HTMLAttributes) { - function handleChange( - this: void, - event: TargetedEvent - ) { + function handleChange(this: void, event: TargetedEvent) { onChange?.call(this, event); }