feat(runtime): watch native HTML attributes #4760

tanner-reits · 2023-09-06T18:20:19Z

What is the current behavior?

Stencil does not allow developers to watch native HTML attributes via the @Watch() decorator. So, syntax like the following is not valid:

@Watch('aria-label')
onAriaLabelChange() {
  // do something
}

In fact, the compiler will throw an error if the string provided to the decorator is not a Stencil class "member" (state or prop).

GitHub Issue Number: N/A

What is the new behavior?

The @Watch() decorator can now be used with both Stencil class "member" (state or prop), as well as any native HTML attributes like aria attributes, src, etc.

Does this introduce a breaking change?

Yes
No

Testing

Automated Tests

All existing tests continue to pass and a new e2e test was added to test the behavior with a native attribute.

Manual Tests

I tested this with both lazy and custom-elements builds. A build of this commit can be used to test in a component starter for lazy builds.

Other information

The Framework team has asked for us to support this for some time.

github-actions · 2023-09-06T18:22:07Z

`--strictNullChecks` error report

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

Unfortunately, it looks like that's an increase of 5 over main 😞.

Violations Not on `main` (may be more than the count above)

Path	Location	Error	Message
src/compiler/transformers/decorators-to-static/prop-decorator.ts	(99, 40)	TS2345	Argument of type 'Symbol \| undefined' is not assignable to parameter of type 'Symbol'. Type 'undefined' is not assignable to type 'Symbol'.
src/compiler/transformers/decorators-to-static/prop-decorator.ts	(101, 68)	TS2345	Argument of type 'TypeNode \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'.
src/compiler/transformers/decorators-to-static/prop-decorator.ts	(183, 7)	TS2345	Argument of type 'TypeNode \| PropertyDeclaration \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'.
src/runtime/proxy-component.ts	(148, 17)	TS18048	'flags' is possibly 'undefined'.
src/runtime/proxy-component.ts	(149, 15)	TS18048	'flags' is possibly 'undefined'.
src/runtime/proxy-component.ts	(152, 44)	TS18048	'hostRef' is possibly 'undefined'.
src/runtime/proxy-component.ts	(153, 49)	TS18048	'hostRef' is possibly 'undefined'.
src/runtime/proxy-component.ts	(154, 29)	TS18048	'cmpMeta.$watchers$' is possibly 'undefined'.
src/runtime/proxy-component.ts	(183, 17)	TS18048	'cmpMeta.$attrsToReflect$' is possibly 'undefined'.

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/prerender/prerender-main.ts	29
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/runtime/vdom/vdom-render.ts	23
src/testing/puppeteer/puppeteer-element.ts	23
src/runtime/client-hydrate.ts	19
src/screenshot/connector-base.ts	19
src/compiler/bundle/dev-module.ts	17
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

Our most common errors

Typescript Error Code	Count	Error messages
TS2345	458	Error messages Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'null' is not assignable to parameter of type 'BuildResultsComponentGraph'. Argument of type 'ComponentRuntimeHostListener[] \| undefined' is not assignable to parameter of type 'ComponentRuntimeHostListener[]'. Type 'undefined' is not assignable to type 'ComponentRuntimeHostListener[]'. Argument of type 'Logger \| undefined' is not assignable to parameter of type 'Logger'. Type 'undefined' is not assignable to type 'Logger'. Argument of type 'string[] \| undefined' is not assignable to parameter of type 'string[]'. Type 'undefined' is not assignable to type 'string[]'. Argument of type 'string' is not assignable to parameter of type 'never'. Argument of type 'Diagnostic[] \| undefined' is not assignable to parameter of type 'readonly Diagnostic[]'. Type 'undefined' is not assignable to type 'readonly Diagnostic[]'. Argument of type 'boolean \| undefined' is not assignable to parameter of type 'boolean'. Argument of type 'BuildConditionals \| undefined' is not assignable to parameter of type 'BuildConditionals'. Type 'undefined' is not assignable to type 'BuildConditionals'. Argument of type 'CompilerSystem \| undefined' is not assignable to parameter of type 'CompilerSystem'. Type 'undefined' is not assignable to type 'CompilerSystem'. Argument of type '{ styleText: string; output: string; map: null; diagnostics: never[]; imports: never[]; defaultVarName: string; styleDocs: never[]; }' is not assignable to parameter of type 'never'. Argument of type 'WorkerMeta \| undefined' is not assignable to parameter of type 'WorkerMeta'. Type 'undefined' is not assignable to type 'WorkerMeta'. Argument of type 'string \| null \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'Set<string \| null>' is not assignable to parameter of type 'Set'. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Argument of type 'Set<string \| null>' is not assignable to parameter of type 'Set'. Argument of type '(string[] \| undefined)[]' is not assignable to parameter of type 'string[][]'. Type 'string[] \| undefined' is not assignable to type 'string[]'. Type 'undefined' is not assignable to type 'string[]'. Argument of type 'ComponentCompilerMeta \| undefined' is not assignable to parameter of type 'ComponentCompilerMeta'. Type 'undefined' is not assignable to type 'ComponentCompilerMeta'. Argument of type 'true \| Object \| undefined' is not assignable to parameter of type 'boolean \| Object \| null'. Type 'undefined' is not assignable to type 'boolean \| Object \| null'. Argument of type 'SourceTarget \| undefined' is not assignable to parameter of type 'SourceTarget'. Type 'undefined' is not assignable to type 'SourceTarget'. Argument of type 'boolean \| undefined' is not assignable to parameter of type 'boolean'. Type 'undefined' is not assignable to type 'boolean'. Argument of type '(string \| undefined)[]' is not assignable to parameter of type 'string[]'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type '(string \| undefined)[]' is not assignable to parameter of type 'string[]'. Argument of type 'RollupSourceMap \| undefined' is not assignable to parameter of type 'SourceMap'. Type 'undefined' is not assignable to type 'SourceMap'. Argument of type 'EntryModule \| undefined' is not assignable to parameter of type 'EntryModule'. Type 'undefined' is not assignable to type 'EntryModule'. Argument of type '(Module \| undefined)[]' is not assignable to parameter of type 'Module[]'. Type 'Module \| undefined' is not assignable to type 'Module'. Type 'undefined' is not assignable to type 'Module'. Argument of type 'Document \| null' is not assignable to parameter of type 'Document'. Type 'null' is not assignable to type 'Document'. Argument of type 'Document \| null' is not assignable to parameter of type 'Node \| MockNode'. Type 'null' is not assignable to type 'Node \| MockNode'. Argument of type 'HydrateAnchorElement' is not assignable to parameter of type '{ [attrName: string]: string; }'. 'string' index signatures are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'URL \| null' is not assignable to parameter of type 'URL'. Type 'null' is not assignable to type 'URL'. Argument of type 'string \| null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Argument of type 'number \| undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'. Argument of type 'SitemapXmpResults \| null' is not assignable to parameter of type 'SitemapXmpResults'. Type 'null' is not assignable to type 'SitemapXmpResults'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| URL'. Argument of type 'Map<string, string[]> \| undefined' is not assignable to parameter of type 'Map<string, string[]>'. Type 'undefined' is not assignable to type 'Map<string, string[]>'. Argument of type 'undefined' is not assignable to parameter of type 'string'. Argument of type 'ServiceWorkerConfig \| undefined' is not assignable to parameter of type 'ServiceWorkerConfig'. Type 'undefined' is not assignable to type 'ServiceWorkerConfig'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| URL'. Type 'undefined' is not assignable to type 'string \| URL'. Argument of type 'null' is not assignable to parameter of type 'string'. Argument of type 'CompilerSystemCreateDirectoryOptions \| undefined' is not assignable to parameter of type 'CompilerSystemCreateDirectoryOptions'. Type 'undefined' is not assignable to type 'CompilerSystemCreateDirectoryOptions'. Argument of type 'null' is not assignable to parameter of type 'CompilerFileWatcherEvent'. Argument of type 'null' is not assignable to parameter of type '{ access: (filePath: string) => Promise; accessSync: (filePath: string) => boolean; cancelDeleteDirectoriesFromDisk: (dirPaths: string[]) => void; cancelDeleteFilesFromDisk: (filePaths: string[]) => void; ... 17 more ...; writeFiles: (files: { ...; } \| Map<...>, opts?: FsWriteOptions \| undefined) => Promise...'. Argument of type 'undefined' is not assignable to parameter of type 'TypeChecker'. Argument of type 'CollectionBundleManifest[] \| undefined' is not assignable to parameter of type 'any[]'. Type 'undefined' is not assignable to type 'any[]'. Argument of type 'Module \| undefined' is not assignable to parameter of type 'Module'. Type 'undefined' is not assignable to type 'Module'. Argument of type 'NodeArray \| undefined' is not assignable to parameter of type 'NodeArray \| HeritageClause[]'. Argument of type 'NodeArray \| undefined' is not assignable to parameter of type 'NodeArray \| HeritageClause[]'. Type 'undefined' is not assignable to type 'NodeArray \| HeritageClause[]'. Argument of type 'Expression \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'Symbol \| undefined' is not assignable to parameter of type 'Symbol'. Type 'undefined' is not assignable to type 'Symbol'. Argument of type 'TypeNode \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type '(PropertyAssignment \| null)[]' is not assignable to parameter of type 'readonly ObjectLiteralElementLike[]'. Type 'PropertyAssignment \| null' is not assignable to type 'ObjectLiteralElementLike'. Type 'null' is not assignable to type 'ObjectLiteralElementLike'. Argument of type 'Signature \| undefined' is not assignable to parameter of type 'Signature'. Type 'undefined' is not assignable to type 'Signature'. Argument of type 'TypeNode \| PropertyDeclaration \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'Identifier \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'ScriptTarget \| undefined' is not assignable to parameter of type 'ScriptTarget \| CreateSourceFileOptions'. Argument of type 'ValidatedConfig \| null \| undefined' is not assignable to parameter of type 'ValidatedConfig'. Type 'undefined' is not assignable to type 'ValidatedConfig'. Type 'undefined' is not assignable to type 'Config'. Argument of type 'null' is not assignable to parameter of type 'CollectionCompilerMeta'. Argument of type 'PropertyName \| undefined' is not assignable to parameter of type 'PropertyName'. Type 'undefined' is not assignable to type 'PropertyName'. Argument of type 'NamedImportBindings \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'TypeDeclLike \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'NamedExportBindings \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'Declaration \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'Identifier \| undefined' is not assignable to parameter of type 'string \| BindingName'. Type 'undefined' is not assignable to type 'string \| BindingName'. Argument of type 'ScriptTarget \| undefined' is not assignable to parameter of type 'ScriptTarget \| CreateSourceFileOptions'. Type 'undefined' is not assignable to type 'ScriptTarget \| CreateSourceFileOptions'. Argument of type 'Diagnostic' is not assignable to parameter of type 'DiagnosticWithLocation'. Types of property 'file' are incompatible. Type 'SourceFile \| undefined' is not assignable to type 'SourceFile'. Type 'undefined' is not assignable to type 'SourceFile'. Argument of type '(...pathSegments: string[]) => string \| undefined' is not assignable to parameter of type '(...args: string[]) => string'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'CompilerWatcher \| undefined' is not assignable to parameter of type 'CompilerWatcher'. Type 'undefined' is not assignable to type 'CompilerWatcher'. Argument of type 'DevServer \| null' is not assignable to parameter of type 'DevServer'. Type 'null' is not assignable to type 'DevServer'. Argument of type '{ editor: string \| undefined; }' is not assignable to parameter of type 'OpenInEditorOptions'. Types of property 'editor' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'string \| undefined' is not assignable to parameter of type 'PathLike'. Argument of type 'DevServerConfig \| undefined' is not assignable to parameter of type 'DevServerConfig'. Type 'undefined' is not assignable to type 'DevServerConfig'. Argument of type 'CompilerBuildResults \| undefined' is not assignable to parameter of type 'CompilerBuildResults'. Type 'undefined' is not assignable to type 'CompilerBuildResults'. Argument of type 'Window \| undefined' is not assignable to parameter of type 'Window'. Type 'undefined' is not assignable to type 'Window'. Argument of type 'SerializeDocumentOptions \| undefined' is not assignable to parameter of type 'HydrateDocumentOptions'. Type 'undefined' is not assignable to type 'HydrateDocumentOptions'. Argument of type 'HydrateDocumentOptions \| undefined' is not assignable to parameter of type 'HydrateDocumentOptions'. Type 'undefined' is not assignable to type 'HydrateDocumentOptions'. Argument of type 'MockNode \| null' is not assignable to parameter of type 'MockNode'. Type 'null' is not assignable to type 'MockNode'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| null'. Type 'undefined' is not assignable to type 'string \| null'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| null'. Argument of type 'ShadowRoot \| null' is not assignable to parameter of type 'Node'. Type 'null' is not assignable to type 'Node'. Argument of type 'MockElement' is not assignable to parameter of type 'MockHTMLElement'. Types of property 'namespaceURI' are incompatible. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Argument of type 'null' is not assignable to parameter of type 'string \| Node'. Argument of type 'null' is not assignable to parameter of type 'string \| boolean \| undefined'. Argument of type '(Window & typeof globalThis) \| null' is not assignable to parameter of type 'Window'. Type 'null' is not assignable to type 'Window'. Argument of type 'string \| null \| undefined' is not assignable to parameter of type 'string \| undefined'. Argument of type 'HostRef \| undefined' is not assignable to parameter of type 'HostRef'. Type 'undefined' is not assignable to type 'HostRef'. Argument of type 'this' is not assignable to parameter of type 'HostElement'. Type 'HostElement' is not assignable to type 'import("/home/runner/work/stencil/stencil/src/declarations/stencil-private").HostElement'. The types returned by 'componentOnReady()' are incompatible between these types. Type 'Promise \| undefined' is not assignable to type 'Promise'. Type 'undefined' is not assignable to type 'Promise'. Argument of type 'this' is not assignable to parameter of type 'HostElement'. Argument of type 'string \| null' is not assignable to parameter of type 'string \| undefined'. Argument of type 'PropertyDescriptor \| undefined' is not assignable to parameter of type 'PropertyDescriptor & ThisType'. Type 'undefined' is not assignable to type 'PropertyDescriptor & ThisType'. Type 'undefined' is not assignable to type 'PropertyDescriptor'. Argument of type 'ComponentInterface \| HostElement \| undefined' is not assignable to parameter of type 'ComponentInterface \| HostElement'. Type 'undefined' is not assignable to type 'ComponentInterface \| HostElement'. Argument of type 'VNode[] \| undefined' is not assignable to parameter of type 'VNode[]'. Type 'undefined' is not assignable to type 'VNode[]'. Argument of type 'null' is not assignable to parameter of type 'ChildType'. Argument of type 'undefined' is not assignable to parameter of type 'ChildType'. Argument of type 'RenderNode \| undefined' is not assignable to parameter of type 'Node \| null'. Type 'undefined' is not assignable to type 'Node \| null'. Argument of type 'VNode \| undefined' is not assignable to parameter of type 'VNode'. Type 'undefined' is not assignable to type 'VNode'. Argument of type 'null' is not assignable to parameter of type 'VNode'. Argument of type 'null' is not assignable to parameter of type 'RenderNode'. Argument of type 'ScreenshotDiff \| undefined' is not assignable to parameter of type 'ScreenshotDiff'. Type 'undefined' is not assignable to type 'ScreenshotDiff'. Argument of type 'string \| undefined' is not assignable to parameter of type 'PathLike'. Type 'undefined' is not assignable to type 'PathLike'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| SemVer'. Type 'undefined' is not assignable to type 'string \| SemVer'. Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| SemVer'. Argument of type 'null' is not assignable to parameter of type 'number \| undefined'. Argument of type 'null' is not assignable to parameter of type 'number \| PromiseLike'. Argument of type 'CompilerWorkerTask \| undefined' is not assignable to parameter of type 'CompilerWorkerTask'. Type 'undefined' is not assignable to type 'CompilerWorkerTask'. Argument of type 'undefined' is not assignable to parameter of type 'ErrorHandler'. Argument of type 'string \| undefined' is not assignable to parameter of type 'MockRequestInfo'. Type 'undefined' is not assignable to type 'MockRequestInfo'. Argument of type 'string \| undefined' is not assignable to parameter of type 'MockRequestInfo'. Argument of type 'MockResponse \| undefined' is not assignable to parameter of type 'MockResponse'. Type 'undefined' is not assignable to type 'MockResponse'. Argument of type 'string \| null' is not assignable to parameter of type 'string \| boolean \| undefined'. Type 'null' is not assignable to type 'string \| boolean \| undefined'. Argument of type 'RuntimeRef \| undefined' is not assignable to parameter of type 'RuntimeRef'. Type 'undefined' is not assignable to type 'RuntimeRef'. Argument of type 'this' is not assignable to parameter of type 'E2EElementInternal'. Type 'E2EElement' is not assignable to type 'E2EElementInternal'. Types of property 'find' are incompatible. Type '(selector: string) => Promise<E2EElement \| null>' is not assignable to type '(selector: FindSelector) => Promise'. Argument of type '(elm: Element, pseudoElt: string) => any' is not assignable to parameter of type 'string \| EvaluateFunc<[ElementHandle, string \| null \| undefined]>'. Type '(elm: Element, pseudoElt: string) => any' is not assignable to type 'EvaluateFunc<[ElementHandle, string \| null \| undefined]>'. Types of parameters 'pseudoElt' and 'params_1' are incompatible. Type 'string \| null \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'this' is not assignable to parameter of type 'E2EElementInternal'.
TS2322	420	Error messages Type 'string \| null \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'boolean \| null \| undefined' is not assignable to type 'boolean \| undefined'. Type 'null' is not assignable to type 'boolean \| undefined'. Type 'undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'ComponentConstructor \| Promise'. Type '({ type: "chunk"; fileName: string; map: SourceMap \| undefined; code: string; moduleFormat: ModuleFormat \| undefined; entryKey: string; imports: string[]; isEntry: boolean; ... 4 more ...; content?: undefined; } \| { ...; })[]' is not assignable to type 'RollupResult[]'. Type '{ type: "chunk"; fileName: string; map: SourceMap \| undefined; code: string; moduleFormat: ModuleFormat \| undefined; entryKey: string; imports: string[]; isEntry: boolean; ... 4 more ...; content?: undefined; } \| { ...; }' is not assignable to type 'RollupResult'. Type '{ type: "chunk"; fileName: string; map: SourceMap \| undefined; code: string; moduleFormat: ModuleFormat \| undefined; entryKey: string; imports: string[]; isEntry: boolean; ... 4 more ...; content?: undefined; }' is not assignable to type 'RollupResult'. Type '{ type: "chunk"; fileName: string; map: SourceMap \| undefined; code: string; moduleFormat: ModuleFormat \| undefined; entryKey: string; imports: string[]; isEntry: boolean; ... 4 more ...; content?: undefined; }' is not assignable to type 'RollupChunkResult'. Types of property 'moduleFormat' are incompatible. Type 'ModuleFormat \| undefined' is not assignable to type 'ModuleFormat'. Type 'undefined' is not assignable to type 'ModuleFormat'. Type 'null' is not assignable to type 'CompilerBuildResults'. Type 'null' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'Document'. Type 'null' is not assignable to type 'Promise'. Type 'null' is not assignable to type 'LoggerTimeSpan'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type 'number \| undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'. Type 'boolean \| "prod" \| undefined' is not assignable to type 'boolean \| "prod"'. Type 'undefined' is not assignable to type 'boolean \| "prod"'. Type 'BuildResultsComponentGraph \| undefined' is not assignable to type 'BuildResultsComponentGraph'. Type 'undefined' is not assignable to type 'BuildResultsComponentGraph'. Type 'RollupResults \| undefined' is not assignable to type 'RollupResults'. Type 'undefined' is not assignable to type 'RollupResults'. Type '{ name: string \| undefined; source: string; tags: any[]; }[]' is not assignable to type '{ name: string; source: string; tags: string[]; }[]'. Type '{ name: string \| undefined; source: string; tags: any[]; }' is not assignable to type '{ name: string; source: string; tags: string[]; }'. Types of property 'name' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'null' is not assignable to type 'CompilerWorkerContext'. Type 'null' is not assignable to type 'WatchOfConfigFile'. Type 'null' is not assignable to type 'Promise<(void \| void[])[]>'. Type 'Promise<(void \| void[] \| null)[]>' is not assignable to type 'Promise<(void \| void[])[]>'. Type '(void \| void[] \| null)[]' is not assignable to type '(void \| void[])[]'. Type 'void \| void[] \| null' is not assignable to type 'void \| void[]'. Type 'null' is not assignable to type 'void \| void[]'. Type 'null' is not assignable to type '{ program: WatchOfConfigFile; rebuild: () => void; }'. Type '(this: PluginContext, importee: string, importer: string) => Promise' is not assignable to type 'ResolveIdHook'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type '(this: PluginContext, importee: string, importer: string) => Promise' is not assignable to type 'ResolveIdHook'. Types of parameters 'importer' and 'importer' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string \| undefined'. Type '{ code: string; exports: string[]; workerMsgId: string; dependencies: string[]; } \| null' is not assignable to type 'WorkerMeta \| undefined'. Type 'null' is not assignable to type 'WorkerMeta \| undefined'. Type 'WorkerMeta \| undefined' is not assignable to type 'WorkerMeta'. Type 'undefined' is not assignable to type 'WorkerMeta'. Type 'import("/home/runner/work/stencil/stencil/src/compiler/cache").Cache' is not assignable to type 'import("/home/runner/work/stencil/stencil/src/declarations/stencil-private").Cache'. Types of property 'getMemoryStats' are incompatible. Type '() => string \| null' is not assignable to type '() => string'. Type 'null' is not assignable to type 'ValidatedConfig'. Type 'null' is not assignable to type 'Config'. Type 'null' is not assignable to type 'string[]'. Type '{ dir: string; buildDir: string; collectionDir: string \| null; typesDir: string; esmLoaderPath: string; copy: d.CopyTask[]; polyfills: boolean \| undefined; empty: boolean; transformAliasedImportPathsInCollection: boolean; isPrimaryPackageOutputTarget: boolean; type: "dist"; }' is not assignable to type 'Required'. Types of property 'polyfills' are incompatible. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type 'null' is not assignable to type 'number \| undefined'. Type 'null' is not assignable to type 'HistoryApiFallback \| undefined'. Type 'null' is not assignable to type 'CopyTask[] \| undefined'. Type '{ dirPath: string; filePath: string; fileName: string; readmePath: string; usagesDir: string; tag: string; readme: string \| undefined; overview: string; usage: JsonDocsUsage; ... 13 more ...; listeners: JsonDocsListener[]; }[]' is not assignable to type 'JsonDocsComponent[]'. Type '{ dirPath: string; filePath: string; fileName: string; readmePath: string; usagesDir: string; tag: string; readme: string \| undefined; overview: string; usage: d.JsonDocsUsage; docs: string; ... 12 more ...; listeners: d.JsonDocsListener[]; }' is not assignable to type 'JsonDocsComponent'. Types of property 'readme' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'string[] \| undefined' is not assignable to type 'string[]'. Type 'undefined' is not assignable to type 'string[]'. Type '(ComponentCompilerMeta \| undefined)[]' is not assignable to type 'ComponentCompilerMeta[]'. Type 'ComponentCompilerMeta \| undefined' is not assignable to type 'ComponentCompilerMeta'. Type 'undefined' is not assignable to type 'ComponentCompilerMeta'. Type '(ComponentCompilerMeta \| undefined)[][]' is not assignable to type 'readonly ComponentCompilerMeta[][]'. Type '(ComponentCompilerMeta \| undefined)[]' is not assignable to type 'ComponentCompilerMeta[]'. Type 'null' is not assignable to type 'boolean \| SourceMapOptions \| undefined'. Type 'null' is not assignable to type 'SourceMap \| undefined'. Type '{ name: string \| undefined; tags: string[]; }[]' is not assignable to type 'CollectionDependencyData[]'. Type '{ name: string \| undefined; tags: string[]; }' is not assignable to type 'CollectionDependencyData'. Types of property 'name' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'string \| undefined' is not assignable to type 'string \| number'. Type 'undefined' is not assignable to type 'string \| number'. Type 'string \| null' is not assignable to type 'string \| undefined'. Type 'null' is not assignable to type 'Function'. Type 'null' is not assignable to type 'Map<string, string[]>'. Type 'null' is not assignable to type 'PrerenderConfig'. Type 'null' is not assignable to type 'Set'. Type 'null' is not assignable to type 'HydrateAnchorElement[]'. Type 'null' is not assignable to type '(prerenderRequest: PrerenderUrlRequest) => Promise'. Type 'CssNode \| null' is not assignable to type 'void \| CssNode'. Type 'null' is not assignable to type 'void \| CssNode'. Type 'CssNode \| null' is not assignable to type 'CssNode'. Type 'null' is not assignable to type 'CssNode'. Type 'CssNode \| null' is not assignable to type 'void \| CssNode'. Type 'RegExpExecArray \| null' is not assignable to type 'RegExpExecArray'. Type 'null' is not assignable to type 'RegExpExecArray'. Type 'null' is not assignable to type 'number'. Type 'null' is not assignable to type 'boolean'. Type 'null' is not assignable to type 'boolean \| undefined'. Type 'FsItem \| undefined' is not assignable to type 'FsItem'. Type 'undefined' is not assignable to type 'FsItem'. Type 'null' is not assignable to type 'CompilerFileWatcherCallback[]'. Type '(key: string) => string \| undefined' is not assignable to type '(key: string) => string'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type '(p: string) => Promise<string \| undefined>' is not assignable to type '{ (p: string): Promise; (p: string, encoding: "utf8"): Promise; (p: string, encoding: "binary"): Promise; }'. Type 'Promise<string \| undefined>' is not assignable to type 'Promise'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type '(p: string) => string \| undefined' is not assignable to type '(p: string, encoding?: string \| undefined) => string'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'null' is not assignable to type '((maxConcurrentWorkers: number) => WorkerMainController) \| undefined'. Type 'null' is not assignable to type 'ResolvedModuleWithFailedLookupLocations'. Type 'CollectionCompilerMeta \| undefined' is not assignable to type 'CollectionCompilerMeta'. Type 'undefined' is not assignable to type 'CollectionCompilerMeta'. Type 'boolean \| null' is not assignable to type 'boolean'. Type 'null' is not assignable to type 'boolean'. Type 'undefined' is not assignable to type 'ComponentCompilerVirtualProperty'. Type '{ name: string; method: string; bubbles: boolean; cancelable: boolean; composed: boolean; docs: CompilerJsDoc; complexType: ComponentCompilerEventComplexType; internal: boolean \| undefined; }[]' is not assignable to type 'ComponentCompilerEvent[]'. Type '{ name: string; method: string; bubbles: boolean; cancelable: boolean; composed: boolean; docs: d.CompilerJsDoc; complexType: d.ComponentCompilerEventComplexType; internal: boolean \| undefined; }' is not assignable to type 'ComponentCompilerEvent'. Types of property 'internal' are incompatible. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type '{ name: string; docs: CompilerJsDoc; complexType: ComponentCompilerMethodComplexType; internal: boolean \| undefined; }[]' is not assignable to type 'ComponentCompilerMethod[]'. Type '{ name: string; docs: d.CompilerJsDoc; complexType: d.ComponentCompilerMethodComplexType; internal: boolean \| undefined; }' is not assignable to type 'ComponentCompilerMethod'. Types of property 'internal' are incompatible. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type '{ name: string; type: ComponentCompilerPropertyType; attribute: string \| undefined; reflect: boolean; mutable: boolean; required: boolean; optional: boolean; defaultValue: string \| undefined; complexType: ComponentCompilerPropertyComplexType; docs: CompilerJsDoc; internal: boolean \| undefined; }[]' is not assignable to type 'ComponentCompilerProperty[]'. Type '{ name: string; type: d.ComponentCompilerPropertyType; attribute: string \| undefined; reflect: boolean; mutable: boolean; required: boolean; optional: boolean; defaultValue: string \| undefined; complexType: d.ComponentCompilerPropertyComplexType; docs: d.CompilerJsDoc; internal: boolean \| undefined; }' is not assignable to type 'ComponentCompilerProperty'. Types of property 'internal' are incompatible. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type 'null' is not assignable to type 'ImportData'. Type 'undefined' is not assignable to type '"queryparams" \| null'. Type 'null' is not assignable to type 'WeakSet'. Type 'Node \| readonly Node[] \| undefined' is not assignable to type 'VisitResult'. Type 'undefined' is not assignable to type 'VisitResult'. Type 'DeclarationName \| undefined' is not assignable to type 'DeclarationName'. Type 'undefined' is not assignable to type 'DeclarationName'. Type 'null' is not assignable to type 'Module'. Type 'Module \| undefined' is not assignable to type 'Module'. Type 'undefined' is not assignable to type 'Module'. Type 'undefined' is not assignable to type 'CompilerJsDoc'. Type '{ [x: string]: d.TypesMemberNameData[] \| undefined; }' is not assignable to type 'TypesImportData'. 'string' index signatures are incompatible. Type 'TypesMemberNameData[] \| undefined' is not assignable to type 'TypesMemberNameData[]'. Type 'undefined' is not assignable to type 'TypesMemberNameData[]'. Type '((data: { file: string; line: number; column: number; }) => void) \| null' is not assignable to type 'OpenInEditorCallback \| undefined'. Type 'null' is not assignable to type 'OpenInEditorCallback \| undefined'. Type 'null' is not assignable to type 'WebSocket'. Type 'null' is not assignable to type 'BuildOnEventRemove'. Type 'null' is not assignable to type '() => void'. Type 'null' is not assignable to type '(msg: DevServerMessage) => void'. Type 'DevServerConfig \| undefined' is not assignable to type 'DevServerConfig'. Type 'undefined' is not assignable to type 'DevServerConfig'. Type 'null' is not assignable to type '{ open(openId: string): Promise; }'. Type 'null' is not assignable to type 'Promise<DevServerEditor[]>'. Type 'null' is not assignable to type '(req: IncomingMessage, res: ServerResponse, next: () => void) => void'. Type 'null' is not assignable to type 'URL'. Type 'null' is not assignable to type 'URLSearchParams'. Type 'PageReloadStrategy \| undefined' is not assignable to type 'PageReloadStrategy'. Type 'undefined' is not assignable to type 'PageReloadStrategy'. Type 'null' is not assignable to type 'Server<typeof IncomingMessage, typeof ServerResponse>'. Type 'null' is not assignable to type 'DevWebSocket'. Type 'null' is not assignable to type 'DevServerContext'. Type 'DevWebSocket \| null' is not assignable to type 'DevWebSocket'. Type 'null' is not assignable to type 'DevWebSocket'. Type 'string \| undefined' is not assignable to type 'string \| null'. Type 'null' is not assignable to type 'ChildProcess'. Type 'null' is not assignable to type 'HydrateApp'. Type '() => undefined' is not assignable to type '{ (cb?: (() => void) \| undefined): TestServerResponse; (chunk: any, cb?: (() => void) \| undefined): TestServerResponse; (chunk: any, encoding: BufferEncoding, cb?: (() => void) \| undefined): TestServerResponse; }'. Type 'undefined' is not assignable to type 'TestServerResponse'. Type 'HTMLElement \| null' is not assignable to type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'. Type 'null' is not assignable to type 'ComponentConstructor'. Type '(this: HostElement) => Promise \| undefined' is not assignable to type '() => Promise'. Type 'Promise \| undefined' is not assignable to type 'Promise'. Type 'undefined' is not assignable to type 'Promise'. Type 'null' is not assignable to type 'Window & typeof globalThis'. Type 'null' is not assignable to type 'Window'. Type 'null' is not assignable to type 'Window & typeof globalThis'. Type 'null' is not assignable to type 'MockCSSStyleSheet'. Type 'null' is not assignable to type 'string \| boolean'. Type 'null' is not assignable to type 'Location'. Type 'null' is not assignable to type 'MockElement'. Type 'null' is not assignable to type 'SVGSVGElement'. Type 'null' is not assignable to type 'SVGElement'. Type 'null' is not assignable to type 'EventTarget'. Type 'null' is not assignable to type 'MockEventListener[]'. Type 'null' is not assignable to type 'MockDocument'. Type '{ name: string; value: string; namespace: string \| null; prefix: null; }[]' is not assignable to type 'Attribute[]'. Type '{ name: string; value: string; namespace: string \| null; prefix: null; }' is not assignable to type 'Attribute'. Types of property 'namespace' are incompatible. Type 'string \| null' is not assignable to type 'string \| undefined'. Type 'null' is not assignable to type 'string \| undefined'. Type '(element: MockElement) => string \| null' is not assignable to type '(element: unknown) => string'. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Type 'ParentNode \| null' is not assignable to type 'Node'. Type 'null' is not assignable to type 'Node'. Type 'null' is not assignable to type 'Document'. Type 'string \| null \| undefined' is not assignable to type 'string \| undefined'. Type 'never[] \| null' is not assignable to type 'RenderNode[]'. Type 'null' is not assignable to type 'RenderNode[]'. Type 'null' is not assignable to type 'VNode[]'. Type 'null' is not assignable to type 'string \| number \| undefined'. Type 'null' is not assignable to type 'string \| number \| Function'. Type 'RenderNode \| null' is not assignable to type 'RenderNode'. Type 'null' is not assignable to type 'RenderNode'. Type 'HTMLElement \| null' is not assignable to type 'EventTarget'. Type 'null' is not assignable to type 'EventTarget'. Type 'string \| null \| undefined' is not assignable to type 'string \| undefined'. Type 'null' is not assignable to type 'string \| undefined'. Type 'Promise \| undefined' is not assignable to type 'Promise'. Type 'undefined' is not assignable to type 'Promise'. Type 'VNode[] \| undefined' is not assignable to type 'VNode[]'. Type 'undefined' is not assignable to type 'VNode[]'. Type '(props: {}, children: VNode[], utils: FunctionalUtilities) => null' is not assignable to type 'FunctionalComponent<{}>'. Type 'null' is not assignable to type 'VNode \| VNode[]'. Type '() => null' is not assignable to type 'FunctionalComponent<{}>'. Type 'null' is not assignable to type 'VNode \| VNode[]'. Type 'null' is not assignable to type 'VNode'. Type 'undefined' is not assignable to type 'VNode'. Type 'RenderNode \| undefined' is not assignable to type 'RenderNode'. Type 'undefined' is not assignable to type 'RenderNode'. Type 'RelocateNodeData \| undefined' is not assignable to type 'RelocateNodeData'. Type 'undefined' is not assignable to type 'RelocateNodeData'. Type 'ChildNode \| null' is not assignable to type 'Node'. Type 'null' is not assignable to type 'Node'. Type 'null' is not assignable to type 'ScreenshotCache'. Type 'null' is not assignable to type 'Buffer'. Type 'null' is not assignable to type 'Screenshot'. Type '(() => void) \| undefined' is not assignable to type '() => any'. Type 'undefined' is not assignable to type '() => any'. Type '() => null' is not assignable to type '(opts: { rootDir: string; moduleId: string; path: string; }) => string'. Type 'null' is not assignable to type 'string'. Type '() => null' is not assignable to type '(opts: { moduleId: string; path?: string \| undefined; version?: string \| undefined; }) => string'. Type 'null' is not assignable to type 'string'. Type '() => string \| undefined' is not assignable to type '() => string'. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'number \| null' is not assignable to type 'number'. Type 'null' is not assignable to type 'number'. Type 'any[] \| undefined' is not assignable to type 'any[]'. Type 'undefined' is not assignable to type 'any[]'. Type 'boolean \| null \| undefined' is not assignable to type 'boolean \| undefined'. Type 'undefined' is not assignable to type 'MockNode'. Type 'null' is not assignable to type 'MockNode[]'. Type 'null' is not assignable to type 'ConfigBundle[] \| undefined'. Type 'null' is not assignable to type 'OutputTarget[] \| undefined'. Type 'null' is not assignable to type 'TestingConfig \| undefined'. Type 'null' is not assignable to type 'Cache'. Type 'null' is not assignable to type '{ access: (filePath: string) => Promise; accessSync: (filePath: string) => boolean; cancelDeleteDirectoriesFromDisk: (dirPaths: string[]) => void; cancelDeleteFilesFromDisk: (filePaths: string[]) => void; ... 17 more ...; writeFiles: (files: { ...; } \| Map<...>, opts?: FsWriteOptions \| undefined) => Promise...'. Type 'Function \| undefined' is not assignable to type 'Function'. Type 'undefined' is not assignable to type 'Function'. Type 'RafCallback \| undefined' is not assignable to type 'Function'. Type 'undefined' is not assignable to type 'Function'. Type 'QueuedLoadModule \| undefined' is not assignable to type 'QueuedLoadModule'. Type 'undefined' is not assignable to type 'QueuedLoadModule'. Type 'null' is not assignable to type 'ElementHandle'. Type 'null' is not assignable to type 'E2EPageInternal'. Type 'ElementHandle \| null' is not assignable to type 'ElementHandle'. Type 'null' is not assignable to type 'ElementHandle'. Type 'ElementHandle \| null' is not assignable to type 'ElementHandle'. Type 'null' is not assignable to type 'ElementHandle'. Type 'ElementHandle \| null' is not assignable to type 'ElementHandle \| null'. Type 'ElementHandle' is not assignable to type 'ElementHandle'. Type 'Node' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 114 more. Type 'null' is not assignable to type 'Promise<JSHandle>'. Type 'null' is not assignable to type 'ValidatedConfig'.
TS18048	347	Error messages 'sys.details' is possibly 'undefined'. 'details' is possibly 'undefined'. 'config.sys.getDevServerExecutingPath' is possibly 'undefined'. 'config.sys.dynamicImport' is possibly 'undefined'. 'config.sys.lazyRequire' is possibly 'undefined'. 'sys.parseYarnLockFile' is possibly 'undefined'. 'sys.fetch' is possibly 'undefined'. 'moduleFile' is possibly 'undefined'. 'config.sys' is possibly 'undefined'. 'config.logger' is possibly 'undefined'. 'hmr' is possibly 'undefined'. 'config.outputTargets' is possibly 'undefined'. 'c.moduleFiles' is possibly 'undefined'. 'a.name' is possibly 'undefined'. 'b.name' is possibly 'undefined'. 'orgNodeResolveId' is possibly 'undefined'. 'config.rollupPlugins' is possibly 'undefined'. 'config.rollupConfig.inputOptions' is possibly 'undefined'. 'compilerCtx.worker' is possibly 'undefined'. 'config.devServer.historyApiFallback' is possibly 'undefined'. 'inputConfig.flags' is possibly 'undefined'. 'userConfig.flags' is possibly 'undefined'. 'outputTarget.serviceWorker' is possibly 'undefined'. 'cmp' is possibly 'undefined'. 'deps' is possibly 'undefined'. 'cmp.directDependents' is possibly 'undefined'. 'cmp.dependents' is possibly 'undefined'. 'config.bundles' is possibly 'undefined'. 'c.dependencies' is possibly 'undefined'. 'c.directDependencies' is possibly 'undefined'. 'outputTargets' is possibly 'undefined'. 'opts' is possibly 'undefined'. 'errorLine.text' is possibly 'undefined'. 'errorLine.errorLength' is possibly 'undefined'. 'opts.format' is possibly 'undefined'. 'config.sys.generateContentHash' is possibly 'undefined'. 'config.sys.copy' is possibly 'undefined'. 'entryModule' is possibly 'undefined'. 'a.directDependents' is possibly 'undefined'. 'b.directDependents' is possibly 'undefined'. 'a.directDependencies' is possibly 'undefined'. 'b.directDependencies' is possibly 'undefined'. 'a.dependents' is possibly 'undefined'. 'b.dependents' is possibly 'undefined'. 'a.dependencies' is possibly 'undefined'. 'b.dependencies' is possibly 'undefined'. 'bundleOptions.loader' is possibly 'undefined'. 'config.maxConcurrentWorkers' is possibly 'undefined'. 'config.logger.createLineUpdater' is possibly 'undefined'. 'hydrateOpts.staticComponents' is possibly 'undefined'. 'sys.generateFileHash' is possibly 'undefined'. 'manager.config.logger' is possibly 'undefined'. 'manager.config.sys' is possibly 'undefined'. 'serviceWorker' is possibly 'undefined'. 'tsResults.diagnostics' is possibly 'undefined'. 'r.resolvedModule' is possibly 'undefined'. 'compilerSystem.watchDirectory' is possibly 'undefined'. 'compilerSystem.watchFile' is possibly 'undefined'. 'collectionManifest.bundles' is possibly 'undefined'. 'cmp.dependencies' is possibly 'undefined'. 'foundDep' is possibly 'undefined'. 'connectedCallback.body' is possibly 'undefined'. 'cmpNode.name' is possibly 'undefined'. 'symbol.declarations' is possibly 'undefined'. 'signature' is possibly 'undefined'. 'collection.moduleFiles' is possibly 'undefined'. 'tsSourceFiles' is possibly 'undefined'. 'results.data' is possibly 'undefined'. 'results.imports' is possibly 'undefined'. 'transformers.afterDeclarations' is possibly 'undefined'. 'transformers.before' is possibly 'undefined'. 'transformers.after' is possibly 'undefined'. 'msg.requestLog' is possibly 'undefined'. 'msg.error' is possibly 'undefined'. 'msg.buildResults' is possibly 'undefined'. 'a.priority' is possibly 'undefined'. 'b.priority' is possibly 'undefined'. 'devServerConfig.historyApiFallback' is possibly 'undefined'. 'devServerConfig.basePath' is possibly 'undefined'. 'req.pathname' is possibly 'undefined'. 'req.stats' is possibly 'undefined'. 'devServerConfig' is possibly 'undefined'. 'res.$content' is possibly 'undefined'. 'opts.maxHydrateCount' is possibly 'undefined'. 'ref' is possibly 'undefined'. 'opts.excludeComponents' is possibly 'undefined'. 'hostRef' is possibly 'undefined'. 'hostRef.$instanceValues$' is possibly 'undefined'. 'ref.$onInstancePromise$' is possibly 'undefined'. 'ref.$lazyInstance$' is possibly 'undefined'. 'opts.indentSpaces' is possibly 'undefined'. 'opts.approximateLineWidth' is possibly 'undefined'. 'plt.$orgLocNodes$' is possibly 'undefined'. 'hostRef.$lazyInstance$' is possibly 'undefined'. 'flags' is possibly 'undefined'. 'cmpMeta.$watchers$' is possibly 'undefined'. 'cmpMeta.$attrsToReflect$' is possibly 'undefined'. 'cmpMeta.$members$' is possibly 'undefined'. 'nodeRef' is possibly 'undefined'. 'screenshot.diff' is possibly 'undefined'. 'screenshotCache.items' is possibly 'undefined'. 'emulateConfig.viewport' is possibly 'undefined'. 'emulateConfig.viewport.deviceScaleFactor' is possibly 'undefined'. 'res.statusCode' is possibly 'undefined'. 'tsSysWatchDirectory' is possibly 'undefined'. 'tsSysWatchFile' is possibly 'undefined'. 'sys.events' is possibly 'undefined'. 't.retries' is possibly 'undefined'. 'testing.emulate' is possibly 'undefined'. 'parsedConfig.collectCoverageFrom' is possibly 'undefined'. 'compare.deviceScaleFactor' is possibly 'undefined'. 'screenshotEmulate.viewport' is possibly 'undefined'. 'd.absFilePath' is possibly 'undefined'. 'd.code' is possibly 'undefined'.
TS18047	99	Error messages 'configFileData' is possibly 'null'. 'canonicalLinkElm.parentNode' is possibly 'null'. 'link.parentNode' is possibly 'null'. 'href' is possibly 'null'. 'stencilScriptElm.parentNode' is possibly 'null'. 'attr' is possibly 'null'. 't.cmp' is possibly 'null'. 't.event' is possibly 'null'. 't.properties' is possibly 'null'. 'progressBar.parentNode' is possibly 'null'. 'serverProcess.stdout' is possibly 'null'. 'serverProcess.stderr' is possibly 'null'. 'node.nodeName' is possibly 'null'. 'element.nodeName' is possibly 'null'. 'nodeValue' is possibly 'null'. 'cloned' is possibly 'null'. 'clonedDiv' is possibly 'null'. 'clonedTemplate' is possibly 'null'. 'clonedTemplate.content.firstChild' is possibly 'null'. 'clonedTemplate.content.firstChild.textContent' is possibly 'null'. 'clonedWin' is possibly 'null'. 'titleElm' is possibly 'null'. 'dstWin' is possibly 'null'. 'orgLocationNode.parentNode' is possibly 'null'. 'node.nodeValue' is possibly 'null'. 'node.parentNode' is possibly 'null'. 'appendAfter.parentNode' is possibly 'null'. 'hostElm.firstElementChild' is possibly 'null'. 'hostElm.lastElementChild' is possibly 'null'. 'nodeRef.nodeValue' is possibly 'null'. 'nodeRef.parentNode' is possibly 'null'. 'parentNode' is possibly 'null'. 'defaultHolder.parentNode' is possibly 'null'. 'nodeToRelocate.parentNode' is possibly 'null'. 'elm.textContent' is possibly 'null'. 'rsp' is possibly 'null'. 'compilerWatcher' is possibly 'null'.
TS2722	38	Error messages Cannot invoke an object which is possibly 'undefined'.
TS2532	36	Error messages Object is possibly 'undefined'.
TS2531	25	Error messages Object is possibly 'null'.
TS2454	15	Error messages Variable 'pkgJsonData' is used before being assigned. Variable 'minifyOpts' is used before being assigned. Variable 'workerCtrl' is used before being assigned. Variable 'timespan' is used before being assigned. Variable 'declarationOutputText' is used before being assigned. Variable 'outputText' is used before being assigned. Variable 'win' is used before being assigned. Variable 'hostId' is used before being assigned. Variable 'textContent' is used before being assigned. Variable 'resolve' is used before being assigned. Variable 'opts' is used before being assigned.
TS2352	13	Error messages Conversion of type 'null' to type 'CompilerSystem' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Conversion of type 'null' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Conversion of type '{ cmps: never[]; }' to type 'Module' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type '{ cmps: never[]; }' is missing the following properties from type 'Module': coreRuntimeApis, outputTargetCoreRuntimeApis, collectionName, dtsFilePath, and 28 more. Conversion of type 'null' to type 'ScreenshotCache' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
TS2769	10	Error messages No overload matches this call. Overload 1 of 2, '(type: keyof DocumentEventMap, listener: (this: Document, ev: PointerEvent \| MouseEvent \| UIEvent \| Event \| ErrorEvent \| ... 13 more ... \| WheelEvent) => any, options?: boolean \| ... 1 more ... \| undefined): void', gave the following error. Argument of type '"e"' is not assignable to parameter of type 'keyof DocumentEventMap'. Overload 2 of 2, '(type: string, listener: EventListenerOrEventListenerObject, options?: boolean \| AddEventListenerOptions \| undefined): void', gave the following error. Argument of type 'null' is not assignable to parameter of type 'EventListenerOrEventListenerObject'. No overload matches this call. Overload 1 of 2, '(o: {}): string[]', gave the following error. Argument of type 'BuildResultsComponentGraph \| undefined' is not assignable to parameter of type '{}'. Type 'undefined' is not assignable to type '{}'. Overload 2 of 2, '(o: object): string[]', gave the following error. Argument of type 'BuildResultsComponentGraph \| undefined' is not assignable to parameter of type 'object'. Type 'undefined' is not assignable to type 'object'. No overload matches this call. Overload 1 of 4, '(object: {}, method: never): SpyInstance<never, never>', gave the following error. Argument of type 'CompilerWorkerContext \| undefined' is not assignable to parameter of type '{}'. Type 'undefined' is not assignable to type '{}'. Overload 2 of 4, '(object: {}, method: never): SpyInstance<never, never>', gave the following error. Argument of type 'CompilerWorkerContext \| undefined' is not assignable to parameter of type '{}'. Type 'undefined' is not assignable to type '{}'. No overload matches this call. The last overload gave the following error. Argument of type 'string \| null' is not assignable to parameter of type '(substring: string, ...args: any[]) => string'. Type 'null' is not assignable to type '(substring: string, ...args: any[]) => string'. No overload matches this call. Overload 1 of 2, '(configFileName: string, optionsToExtend: CompilerOptions \| undefined, system: System, createProgram?: CreateProgram \| undefined, reportDiagnostic?: DiagnosticReporter \| undefined, reportWatchStatus?: WatchStatusReporter \| undefined, watchOptionsToExtend?: WatchOptions \| undefined, extraFileExtensions?: readonly FileExtensionInfo[] \| undefined): WatchCompilerHostOfConfigFile<...>', gave the following error. Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'. Overload 2 of 2, '(rootFiles: string[], options: CompilerOptions, system: System, createProgram?: CreateProgram \| undefined, reportDiagnostic?: DiagnosticReporter \| undefined, reportWatchStatus?: WatchStatusReporter \| undefined, projectReferences?: readonly ProjectReference[] \| undefined, watchOptions?: WatchOptions \| undefined): WatchCompilerHostOfFilesAndCompilerOptions<...>', gave the following error. Argument of type 'string \| undefined' is not assignable to parameter of type 'string[]'. Type 'undefined' is not assignable to type 'string[]'. No overload matches this call. Overload 1 of 2, '(timeoutId: string \| number \| Timeout \| undefined): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'string \| number \| Timeout \| undefined'. Type 'null' is not assignable to type 'string \| number \| Timeout \| undefined'. Overload 2 of 2, '(id: number \| undefined): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'number \| undefined'. Type 'null' is not assignable to type 'number \| undefined'. No overload matches this call. Overload 1 of 2, '(timeoutId: string \| number \| Timeout \| undefined): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'string \| number \| Timeout \| undefined'. Overload 2 of 2, '(id: number \| undefined): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'number \| undefined'. No overload matches this call. Overload 1 of 3, '(p: string, encoding: "utf8"): Promise', gave the following error. Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'. Overload 2 of 3, '(p: string, encoding: "binary"): Promise', gave the following error. Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
TS2790	10	Error messages The operand of a 'delete' operator must be optional.
TS2538	8	Error messages Type 'undefined' cannot be used as an index type. Type 'null' cannot be used as an index type.
TS2344	5	Error messages Type 'T' does not satisfy the constraint 'Answers'.
TS2416	4	Error messages Property 'getMemoryStats' in type 'Cache' is not assignable to the same property in base type 'Cache'. Type '() => string \| null' is not assignable to type '() => string'. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. Property 'find' in type 'E2EElement' is not assignable to the same property in base type 'E2EElementInternal'. Type '(selector: string) => Promise<E2EElement \| null>' is not assignable to type '(selector: FindSelector) => Promise'. Type 'Promise<E2EElement \| null>' is not assignable to type 'Promise'. Type 'E2EElement \| null' is not assignable to type 'E2EElement'. Type 'null' is not assignable to type 'E2EElement'. Property 'findAll' in type 'E2EElement' is not assignable to the same property in base type 'E2EElementInternal'. Type '(selector: string) => Promise<E2EElement[]>' is not assignable to type '(selector: FindSelector) => Promise<E2EElement[]>'. Type 'Promise<import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-element").E2EElement[]>' is not assignable to type 'Promise<import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-declarations").E2EElement[]>'. Type 'import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-element").E2EElement[]' is not assignable to type 'import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-declarations").E2EElement[]'. Type 'import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-element").E2EElement' is not assignable to type 'import("/home/runner/work/stencil/stencil/src/testing/puppeteer/puppeteer-declarations").E2EElement'. The types returned by 'find(...)' are incompatible between these types. Type 'Promise<E2EElement \| null>' is not assignable to type 'Promise'. Property 'getComputedStyle' in type 'E2EElement' is not assignable to the same property in base type 'E2EElementInternal'. Type '(pseudoElt?: string \| null \| undefined) => Promise' is not assignable to type '(pseudoElt?: string \| null \| undefined) => Promise'. Type 'Promise' is not assignable to type 'Promise'. Type 'unknown' is not assignable to type 'CSSStyleDeclaration'.
TS2493	3	Error messages Tuple type '[]' of length '0' has no element at index '0'.
TS18046	2	Error messages 'style' is of type 'unknown'.
TS2684	1	Error messages The 'this' context of typ

tanner-reits

Just noting a few things.

Associated docs: ionic-team/stencil-site#1224

tanner-reits · 2023-09-06T18:21:35Z

src/compiler/transformers/decorators-to-static/watch-decorator.ts

-    if (!watchable.has(propName)) {
-      const diagnostic = config.devMode ? buildWarn(diagnostics) : buildError(diagnostics);
-      diagnostic.messageText = `@Watch('${propName}') is trying to watch for changes in a property that does not exist.
-        Make sure only properties decorated with @State() or @Prop() are watched.`;
-      augmentDiagnosticWithNode(diagnostic, decorator);
-    }


We do lose a compile-time check with this change. Only way around it would be to maintain a list of all the valid HTML attributes to check against which would be a nightmare.

I think if we're opening it up to any attribute then this makes sense, it's the developers' responsibility to make sure that the string used is a valid one

Only way around it would be to maintain a list of all the valid HTML attributes to check against which would be a nightmare.

Agreed - we run into this with mock doc & checking for reserved keys today, and don't have a great mechanism for checking if we're missing a standardized HTML attribute.

RE This comment in the PR summary:

The Framework team has asked for us to support this for some time.

Is the Framework's request based on supporting aria-* attributes only? Or is there more they're looking to support? I'm wondering in there's a compromise to be had here if we opened this up to just a limited subset of attributes (in this example, those prefixed with aria-*).

The only examples they've given have been aria, but not sure if they would use others as well. What would be the benefit of restricting this though? And, inversely, what is the risk of allowing users to watch any attribute?

I think (maybe) the benefit here is that if we limited this to aria-*, we'd have a more finite list (and perhaps stable) list of attributes to check against, which would influence my opinion on some of the comments here.

I don't think there's a particular risk I'm concerned about ATM - I'm just looking for some additional details regarding the context of their request. Maybe we can add/attach that to this PR summary or a JIRA ticket?

In Framework we maintain a list of attributes to inherit here: https://github.com/ionic-team/ionic-framework/blob/f82709595d5031a759e35b11dbcccb0ea5870ce0/core/src/utils/helpers.ts#L118-L175

But our reasoning is to not inherit all attributes that exist on the host. I'm not really sure why you'd restrict what attribute a developer can watch a value change on. That's based on the implementation details of the component, not a compiler constraint.

@sean-perkins That's great to know!

Getting that context is what I'm really after here to both:

influence my understanding of this particular piece of code

add historical context to this PR - this helps prevent the issue where we don't capture this info anywhere in VCS/issue tracking and that information gets lost (which is sadly, lacking in older commits in Stencil/something I'd like us to prevent reverting to)

In that case, I think this code/logic fine as is 👍

tanner-reits · 2023-09-06T18:23:14Z

src/declarations/stencil-private.ts

@@ -1386,6 +1386,9 @@ export type ComponentRuntimeMetaCompact = [

  /** listeners */
  ComponentRuntimeHostListener[]?,
+
+  /** watchers */
+  ComponentConstructorWatchers?,


Needed to add this so we can have a map of the watchers available when bootstrapping the lazy-build before the module is loaded. Otherwise, the class instance that gets registered with the custom element registry won't include any of the watched native attributes in the observedAttributes array.

tanner-reits · 2023-09-06T18:25:00Z

src/runtime/proxy-component.ts

@@ -133,25 +133,60 @@ export const proxyComponent = (
            // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
            // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
            // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
+            return;
+          } else if (propName == null) {


Most of the stuff in this block comes from the existing setValue() function

tanner-reits · 2023-09-06T18:26:02Z

src/runtime/proxy-component.ts

+      Cstr.observedAttributes = Array.from(
+        new Set([
+          ...Object.keys(cmpMeta.$watchers$ ?? {}),
+          ...members


If we don't include all "members" here (regardless if they have an associate watcher), then they components will not set their values and update appropriately.

alicewriteswrongs

I think this all generally makes sense to me, just had a few thoughts as I was reading through

src/compiler/transformers/decorators-to-static/convert-decorators.ts

src/compiler/transformers/decorators-to-static/watch-decorator.ts

alicewriteswrongs · 2023-09-07T18:30:55Z

src/compiler/transformers/decorators-to-static/watch-decorator.ts

-    if (!watchable.has(propName)) {
-      const diagnostic = config.devMode ? buildWarn(diagnostics) : buildError(diagnostics);
-      diagnostic.messageText = `@Watch('${propName}') is trying to watch for changes in a property that does not exist.
-        Make sure only properties decorated with @State() or @Prop() are watched.`;
-      augmentDiagnosticWithNode(diagnostic, decorator);
-    }


I think if we're opening it up to any attribute then this makes sense, it's the developers' responsibility to make sure that the string used is a valid one

alicewriteswrongs

lgtm!

rwaskiewicz · 2023-09-13T13:17:56Z

src/compiler/transformers/decorators-to-static/watch-decorator.ts

-    if (!watchable.has(propName)) {
-      const diagnostic = config.devMode ? buildWarn(diagnostics) : buildError(diagnostics);
-      diagnostic.messageText = `@Watch('${propName}') is trying to watch for changes in a property that does not exist.
-        Make sure only properties decorated with @State() or @Prop() are watched.`;
-      augmentDiagnosticWithNode(diagnostic, decorator);
-    }


Only way around it would be to maintain a list of all the valid HTML attributes to check against which would be a nightmare.

Agreed - we run into this with mock doc & checking for reserved keys today, and don't have a great mechanism for checking if we're missing a standardized HTML attribute.

RE This comment in the PR summary:

The Framework team has asked for us to support this for some time.

Is the Framework's request based on supporting aria-* attributes only? Or is there more they're looking to support? I'm wondering in there's a compromise to be had here if we opened this up to just a limited subset of attributes (in this example, those prefixed with aria-*).

src/utils/format-component-runtime-meta.ts

tanner-reits added 9 commits September 1, 2023 10:07

wip(working-state)

cc4b340

isolate use cases

8a9c4f6

only execute after initial value is set

f4d4b29

remove unused params

361c262

observed attributes includes members and native attributes

5ebaf76

revert some logic for "member" watchers

b1ba2db

get lazy builds working

6248025

use instance when binding callback

39ec30d

add test

b2440d6

tanner-reits commented Sep 6, 2023

View reviewed changes

tanner-reits marked this pull request as ready for review September 6, 2023 18:26

tanner-reits requested a review from a team as a code owner September 6, 2023 18:27

tanner-reits requested review from rwaskiewicz and alicewriteswrongs September 6, 2023 18:27

alicewriteswrongs suggested changes Sep 7, 2023

View reviewed changes

remove watchable from state and prop transformers

d12ac84

tanner-reits requested a review from alicewriteswrongs September 7, 2023 19:06

alicewriteswrongs approved these changes Sep 11, 2023

View reviewed changes

rwaskiewicz reviewed Sep 13, 2023

View reviewed changes

jsdoc for new method

eb73411

tanner-reits requested a review from rwaskiewicz September 14, 2023 14:11

rwaskiewicz approved these changes Sep 14, 2023

View reviewed changes

tanner-reits added this pull request to the merge queue Sep 14, 2023

Merged via the queue into main with commit fc86c23 Sep 14, 2023
34 checks passed

tanner-reits deleted the treits/feat/watch-built-in-attributes branch September 14, 2023 18:36

This was referenced Sep 29, 2023

aria-label for native button element inside ic-button does not get updated if value changes mi6/ic-ui-kit#1110

Open

upgrade to StencilJS v4.3 mi6/ic-ui-kit#1131

Closed

Test mutating attributes after initial render mi6/ic-ui-kit#1121

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(runtime): watch native HTML attributes #4760

feat(runtime): watch native HTML attributes #4760

tanner-reits commented Sep 6, 2023

github-actions bot commented Sep 6, 2023 •

edited

Loading

tanner-reits left a comment

tanner-reits Sep 6, 2023

alicewriteswrongs Sep 7, 2023

rwaskiewicz Sep 13, 2023

tanner-reits Sep 13, 2023

rwaskiewicz Sep 13, 2023

sean-perkins Sep 13, 2023

rwaskiewicz Sep 13, 2023

tanner-reits Sep 6, 2023

tanner-reits Sep 6, 2023

tanner-reits Sep 6, 2023

alicewriteswrongs left a comment

alicewriteswrongs Sep 7, 2023

alicewriteswrongs left a comment

rwaskiewicz Sep 13, 2023

feat(runtime): watch native HTML attributes #4760

feat(runtime): watch native HTML attributes #4760

Conversation

tanner-reits commented Sep 6, 2023

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

github-actions bot commented Sep 6, 2023 • edited Loading

--strictNullChecks error report

reports and statistics

tanner-reits left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alicewriteswrongs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alicewriteswrongs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 6, 2023 •

edited

Loading

`--strictNullChecks` error report