fix(runtime): add height, width Source attrs

[rwaskiewicz]

What is the current behavior?

prior to this commit, users attempting to properly type a <source/> element in JSX would run into TypeScript errors:

render() {
  return <picture><source height={100} width={100}/></picture>;
}

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:31:29
           Type '{ height: number; width: number; }' is not assignable to type
           'SourceHTMLAttributes<HTMLSourceElement>'.Property 'height' does not exist on type
           'SourceHTMLAttributes<HTMLSourceElement>'.

     L30:  render() {
     L31:    return <picture><source height={100} width={100}/></picture>;
     L32:  }

[26:05.7]  build failed in 1.12 s

fixes: #4942

What is the new behavior?

add the height and width properties for the SourceHTMLAttributes.

adding these typings as optional numbers resolves these types of compile-time errors

Does this introduce a breaking change?

• Yes
• No

Testing

I created a dev build of Stencil: @stencil/core@4.5.0-dev.1697632445.c2d195e

Then I created a new stencil component library with the latest version of Stencil:

cd /tmp \
&& npm init stencil@latest component jsx-test \
&& cd $_ \
&& npm i

Then updated my-component.tsx and ran npm run build to get errors:

diff --git a/src/components/my-component/my-component.tsx b/src/components/my-component/my-component.tsx
index 56d51d9..aef1d67 100644
--- a/src/components/my-component/my-component.tsx
+++ b/src/components/my-component/my-component.tsx
@@ -22,11 +22,12 @@ export class MyComponent {
    */
   @Prop() last: string;
 
+  // @ts-ignore - we won't use this in the repro
   private getText(): string {
     return format(this.first, this.middle, this.last);
   }
 
   render() {
-    return <div>Hello, World! I'm {this.getText()}</div>;
+    return <picture><source height={23} width={2}/></picture>;
   }

$ npm run build

> jsx-test@0.0.1 build
> stencil build --docs

[42:31.9]  @stencil/core
[42:32.1]  v4.5.0 📢
[42:33.0]  build, jsx-test, prod mode, started ...
[42:33.0]  transpile started ...
[42:34.1]  transpile finished in 1.08 s

[ ERROR ]  TypeScript: src/components/my-component/my-component.tsx:31:29
           Type '{ height: number; width: number; }' is not assignable to type
           'SourceHTMLAttributes<HTMLSourceElement>'.Property 'height' does not exist on type
           'SourceHTMLAttributes<HTMLSourceElement>'.

     L30:  render() {
     L31:    return <picture><source height={23} width={2}/></picture>;
     L32:  }

[42:34.1]  build failed in 1.09 s

I then installed my dev build, verified that errors didn't occur on build:

npm i @stencil/core@ && npm run build && echo $?

Other information

STENCIL-977

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1399 errors on this branch.

That's the same number of errors on main, so at least we're not creating new ones!

reports and statistics

Our most error-prone files

Path	Error Count
src/dev-server/index.ts	37
src/mock-doc/serialize-node.ts	36
src/dev-server/server-process.ts	32
src/compiler/build/build-stats.ts	27
src/compiler/output-targets/dist-lazy/generate-lazy-module.ts	25
src/compiler/style/test/optimize-css.spec.ts	23
src/testing/puppeteer/puppeteer-element.ts	23
src/compiler/prerender/prerender-main.ts	22
src/runtime/vdom/vdom-render.ts	20
src/runtime/client-hydrate.ts	19
src/screenshot/connector-base.ts	19
src/compiler/config/test/validate-paths.spec.ts	16
src/dev-server/request-handler.ts	15
src/compiler/prerender/prerender-optimize.ts	14
src/compiler/sys/stencil-sys.ts	14
src/compiler/transpile/transpile-module.ts	14
src/runtime/vdom/vdom-annotations.ts	14
src/sys/node/node-sys.ts	14
src/compiler/build/build-finish.ts	13
src/compiler/prerender/prerender-queue.ts	13

Our most common errors

Typescript Error Code	Count
TS2345	424
TS2322	398
TS18048	310
TS18047	100
TS2722	38
TS2532	34
TS2531	23
TS2454	14
TS2352	13
TS2769	10
TS2790	10
TS2538	8
TS2344	5
TS2416	4
TS2493	3
TS18046	2
TS2684	1
TS2488	1
TS2430	1

Unused exports report

There are 12 unused exports on this PR. That's the same number of errors on main, so at least we're not creating new ones!

Unused exports

File	Line	Identifier
src/runtime/bootstrap-lazy.ts	21	setNonce
src/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	198	withSilentWarn
src/utils/index.ts	145	CUSTOM
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	115	Env
src/compiler/app-core/app-data.ts	117	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	123	updateCacheFromRebuild
src/compiler/types/validate-primary-package-output-target.ts	62	satisfies
src/compiler/types/validate-primary-package-output-target.ts	62	Record
src/testing/puppeteer/puppeteer-declarations.ts	485	WaitForEventOptions
src/compiler/sys/fetch/write-fetch-success.ts	7	writeFetchSuccessSync