feat(compiler): computed properties can be used with Stencil decorators

[sean-perkins]

What is the current behavior?

GitHub Issue Number: Fixes #4350

• Using computed property names is not valid for Stencil decorators. Trying something like:

enum MyEnum {
  first = 'first'
}

...

@Prop() [myEnum.first]: string;

Will result in the string [myEnum.first] being used as the prop name.

• Using computed values is not valid for Stencil decorator arguments. Trying something like:

enum MyEnum {
  first = 'first'
}

...

@Prop() first: string;

@Watch(MyEnum.first) 
firstChanged() { }

Will throw the following error:

[ ERROR ] invalid decorator argument: MyEnum.first at getDeclarationParameter

What is the new behavior?

• Type checker looks up the symbol reference for a property access expression or computed property name to find the actual value.
• This allows any of the above examples to generate valid Stencil output

Does this introduce a breaking change?

• Yes
• No

Testing

Manual tested in a new Stencil project.

• Created a new type for MyEnum based on the code snippet shared above
• Updated the @Prop() first decorator to @Prop() [MyEnum.first]
• Added a @Watch decorator to MyComponent.tsx
• Logged the result in the callback
• Used a local dev build of Stencil with the modified change
• Verified log statement logs when watch callback fires
• Verified no exceptions from the compiler are thrown

Other information

[github-actions]

--strictNullChecks error report

Typechecking with --strictNullChecks resulted in 1497 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/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 type 'ResolveIdHook | undefined' is not assignable to method's 'this' of type 'Function'. Type 'undefined' is not assignable to type 'Function'.
TS2488	1	Error messages Type 'string[] | undefined' must have a 'Symbol.iterator' method that returns an iterator.
TS2464	1	Error messages A computed property name must be of type 'string', 'number', 'symbol', or 'any'.
TS2430	1	Error messages Interface 'SerializeOpts' incorrectly extends interface 'SerializeCssOptions'. Types of property 'usedSelectors' are incompatible. Type 'UsedSelectors | null' is not assignable to type 'UsedSelectors | undefined'. Type 'null' is not assignable to type 'UsedSelectors | undefined'.

Unused exports report

There are 14 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	140	CUSTOM
src/compiler/app-core/app-data.ts	25	BUILD
src/compiler/app-core/app-data.ts	114	Env
src/compiler/app-core/app-data.ts

[alicewriteswrongs]

I tried this out locally and I was able to do something along the lines of your example, with a component like this. I think this all looks good though! I just had one code question about a function name

[rwaskiewicz]

A couple thoughts/asks.

Unsure who the current owner of this is, so I wrote this with @sean-perkins in mind here:

PR Name

I updated the name of the PR to use ‘feat’ instead of ‘fix’ to ensure this gets listed as a ‘feature’ in the auto-generated CHANGELOG.md. No action required here.

Karma

Can we add a few Karma tests to this PR? Karma tests are helpful for us in this particular case in that they:

1. Help validate that “real world” Stencil components that use compile correctly
2. Help exercise the runtime to ensure that a component is properly rendered

I think it’d be useful for us to create three separate Karma test suites here, one for each of the following use cases:

1. Using a computed property in a @Prop() class member, validating that we can render the value stored in the computed property name (if there is one). This would in turn exercise property name resolution and that we can render it (over multiple render cycles). It might be nice to have two @Prop()s, one with a default value and one without. Not strictly required, but it might be worth looking into setting attribute and reflect to true in two additional tests to verify that those continue to act as expected.
2. Using a computed property in a @Watch() class member, validating that the function tied to the computed name gets called
3. Using a computed property on both @Watch() and @Prop(), verifying the aforementioned works, that the correct property name gets piped into the third argument of the function decorated with @Watch()

Typically, we create a Karma test suite by copy/pasting an existing one. I’ve also created a tiny template in the following patch:

new file mode 100644
index 000000000..2030e7e21
--- /dev/null
+++ b/test/karma/test-app/karma-template/cmp-root.tsx
@@ -0,0 +1,13 @@
+import { Component, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'karma-template',
+  shadow: true,
+})
+export class KarmaTemplate {
+  @Prop() myProp: string;
+
+  render() {
+    return <div>Hello World! Prop is: {this.myProp}</div>;
+  }
+}
diff --git a/test/karma/test-app/karma-template/index.html b/test/karma/test-app/karma-template/index.html
new file mode 100644
index 000000000..75cfddc5b
--- /dev/null
+++ b/test/karma/test-app/karma-template/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="./build/testapp.esm.js" type="module"></script>
+<script src="./build/testapp.js" nomodule></script>
+
+<karma-template my-prop="my-value"></karma-template>
diff --git a/test/karma/test-app/karma-template/karma.spec.ts b/test/karma/test-app/karma-template/karma.spec.ts
new file mode 100644
index 000000000..168084aca
--- /dev/null
+++ b/test/karma/test-app/karma-template/karma.spec.ts
@@ -0,0 +1,15 @@
+import { setupDomTests } from '../util';
+
+describe('karma-template', () => {
+  const { setupDom, tearDownDom } = setupDomTests(document);
+  let app: HTMLElement;
+
+  beforeEach(async () => {
+    app = await setupDom('/karma-template/index.html');
+  });
+  afterEach(tearDownDom);
+
+  it('has the correct @Prop() value', () => {
+    expect(app.querySelector('karma-template').shadowRoot.textContent).toBe('Hello World! Prop is: my-value');
+  });
+});

To get started, you can apply this patch (git apply karma-template.patch) - next, replace all instances of karma-template and KarmaTemplate with a more appropriate name. From the test/karma directory, you can run npm start to kick off a dev server and nav to test-www/RENAMED_FILE_NAME to see the component that will be rendered/tested. From there, the test file/component can be updated to be more representative of the functionality we want to test. That’s a lot, and I’m sure I missed something, so please let me know if I’ve missed anything!

karma-template.patch

[rwaskiewicz]

Could we limit this to StringLiterals here? otherwise, we'd allow something like:

enum Foo {
  Bar = 1,
  Baz, // 2
}

class Example {
  @Watch(Foo.Bar)
  watchy(newVal: Foo, oldVal: Foo) {
  }
}

However, numbers aren't valid variable/class member names in JS.

Maybe we should (and this would) prevent Symbols from being used here as well 🤔

---

Up for discussion, how much validation do we want to do? Should the values used be checked to conform to the rules of JS variable names? ATM, we can break the compiler with something like:

enum Foo {
  Bar = '1e0',
}

which gives us the following Rollup error is we try to use that as a Prop name:

[ ERROR ]  Rollup: Parse Error: src/components/my-component/my-component.tsx:9:8
           Assigning to rvalue (Note that you need plugins to import files that are not JavaScript)

      L8:  tag: 'my-component',
      L9:  styleUrl: 'my-component.css',
     L10:  shadow: true,

[tanner-reits]

I don't think we need to worry about this, at least right now, considering that a user can directly use any of these values for a class property and get the same result.

@Prop() '1e0': string;
@Prop() '1': string;
@Prop() 1: string;

If this was something we'd wanna protect against, I say it falls outside the scope of this work and would be a separate enhancement.

[alicewriteswrongs]

Just tried this out locally and it looks like everything is working to me!

[rwaskiewicz]

LGTM! One non-blocking typo

[rwaskiewicz]

Minor - 'peop'