Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Aug 31, 2023

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
Copy link
Contributor

github-actions bot commented Aug 31, 2023

--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

@sean-perkins sean-perkins force-pushed the sp/enum-member-watch-decorator branch from d39b2dc to 40096d3 Compare September 1, 2023 04:19
@sean-perkins

This comment was marked as resolved.

@sean-perkins sean-perkins force-pushed the sp/enum-member-watch-decorator branch from c729054 to 0504f6e Compare September 1, 2023 19:59
@sean-perkins sean-perkins marked this pull request as ready for review September 1, 2023 20:24
@sean-perkins sean-perkins requested a review from a team as a code owner September 1, 2023 20:24
Copy link
Contributor

@alicewriteswrongs alicewriteswrongs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sean-perkins sean-perkins force-pushed the sp/enum-member-watch-decorator branch from af30e14 to 8d777ca Compare September 8, 2023 03:11
@tanner-reits tanner-reits changed the title fix(compiler): enum members can be used in the @Watch decorator fix(compiler): computed properties can be used with Stencil decorators Sep 8, 2023
@rwaskiewicz rwaskiewicz changed the title fix(compiler): computed properties can be used with Stencil decorators feat(compiler): computed properties can be used with Stencil decorators Sep 8, 2023
Copy link
Contributor

@rwaskiewicz rwaskiewicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (ts.isObjectLiteralExpression(arg)) {
return objectLiteralToObjectMap(arg);
} else if (ts.isStringLiteral(arg)) {
return arg.text;
} else if (ts.isPropertyAccessExpression(arg)) {
const type = typeChecker.getTypeAtLocation(arg);
if (type !== undefined && type.isLiteral()) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

@alicewriteswrongs alicewriteswrongs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@tanner-reits tanner-reits force-pushed the sp/enum-member-watch-decorator branch from f538849 to 632ebf1 Compare September 14, 2023 19:10
Copy link
Contributor

@rwaskiewicz rwaskiewicz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! One non-blocking typo

@@ -1,6 +1,6 @@
import { setupDomTests, waitForChanges } from '../util';

describe('conditional-basic', function () {
describe('computed-properties-peop-decorator', function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor - 'peop'

@tanner-reits tanner-reits added this pull request to the merge queue Sep 14, 2023
Merged via the queue into ionic-team:main with commit a848269 Sep 14, 2023
34 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: computed @Prop name
4 participants