fix(compiler): don't break HMR by mangling CSS #3517

alicewriteswrongs · 2022-08-11T19:25:44Z

This fixes an issue (#3461) where CSS is being inappropriately mangled
when using the hot-reload dev server. The issue has details about
exactly what the problem is, but basically in short if you are using the
dist-hydrate-script output target and running the dev server then any
change to a CSS file will cause all styling to be wiped from the related
component in the browser, making for a pretty inadequate developer
experience.

This commit fixes the issue by changing the conditions under which
original CSS selectors are commented out and 'scoped' so that it is only
done when you are have scoped: true set on a component (I believe this
was the original intent but for some reason the code wasn't set up to do
this).

Pull request checklist

Please check if your PR fulfills the following requirements:

Tests for the changes have been added (for bug fixes / features)
Docs have been reviewed and added / updated if needed (for bug fixes / features)
Build (npm run build) was run locally and any changes were pushed
Unit tests (npm test) were run locally and passed
E2E Tests (npm run test.karma.prod) were run locally and passed
Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

What is the current behavior?

GitHub Issue Number: N/A

What is the new behavior?

The code change is to modify the conditions under which CSS selectors are rewritten to support scoped CSS.

I also introduced a test file to provide (partial) coverage of the relevant file, and added some comments reflecting what I was able to learn about how this all works.

Does this introduce a breaking change?

Yes
No

Testing

You can confirm this fixes the issue by building the compiler with this change, running npm pack, and then installing it into the reproduction case on the linked issue. Then if you follow the reproduction steps you shouldn't be able to reproduce the problem any longer.

Alternatively, you could check out STENCIL-47 for info about how to reproduce this issue in Framework, build and install the compiler with this patch in Framework, and confirm that fixes the issue as reported there.

Other information

github-actions · 2022-08-11T19:27:46Z

`--strictNullChecks` error report

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

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

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

Path	Location	Error	Message
src/compiler/bundle/dev-module.ts	(65, 5)	TS2322	Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(66, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(67, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(68, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(69, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(76, 49)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(93, 11)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(156, 36)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(184, 36)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/dev-module.ts	(196, 11)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/dev-module.ts	(196, 32)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(197, 5)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/dev-module.ts	(204, 27)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(215, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(216, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(217, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(230, 7)	TS2322	Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(233, 43)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/dev-module.ts	(243, 5)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/ext-transforms-plugin.ts	(86, 38)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/ext-transforms-plugin.ts	(94, 64)	TS2345	Argument of type 'string \| undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/ext-transforms-plugin.ts	(100, 43)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/ext-transforms-plugin.ts	(102, 11)	TS2322	Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/ext-transforms-plugin.ts	(119, 27)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/ext-transforms-plugin.ts	(124, 38)	TS2488	Type 'Diagnostic[] \| undefined' must have a 'Symbol.iterator' method that returns an iterator.
src/compiler/bundle/ext-transforms-plugin.ts	(126, 80)	TS2345	Argument of type 'Diagnostic[] \| undefined' is not assignable to parameter of type 'Diagnostic[]'. Type 'undefined' is not assignable to type 'Diagnostic[]'.
src/compiler/bundle/ext-transforms-plugin.ts	(137, 13)	TS2322	Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/ext-transforms-plugin.ts	(138, 13)	TS2322	Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(53, 45)	TS2769	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 '{}'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(54, 7)	TS2322	Type 'string' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(55, 7)	TS2322	Type 'string' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(56, 7)	TS2322	Type 'null' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(57, 7)	TS2322	Type 'never[]' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(58, 7)	TS2322	Type 'never[]' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(59, 7)	TS2322	Type 'string' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(60, 7)	TS2322	Type 'never[]' is not assignable to type 'never'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(113, 16)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(113, 51)	TS2493	Tuple type '[]' of length '0' has no element at index '0'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(126, 16)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(126, 51)	TS2493	Tuple type '[]' of length '0' has no element at index '0'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(135, 18)	TS2532	Object is possibly 'undefined'.
src/compiler/bundle/test/ext-transforms-plugin.spec.ts	(135, 53)	TS2493	Tuple type '[]' of length '0' has no element at index '0'.
src/compiler/transformers/stencil-import-path.ts	(63, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/transformers/stencil-import-path.ts	(64, 5)	TS2322	Type 'null' is not assignable to type 'string'.
src/compiler/transformers/stencil-import-path.ts	(65, 5)	TS2322	Type 'null' is not assignable to type 'ImportData'.

reports and statistics

Our most error-prone files

Path	Error Count
src/compiler/config/test/validate-dev-server.spec.ts	45
src/compiler/config/test/validate-output-www.spec.ts	40
src/screenshot/connector-base.ts	40
src/dev-server/index.ts	39
src/mock-doc/node.ts	37
src/mock-doc/serialize-node.ts	36
src/compiler/sys/tests/in-memory-fs.spec.ts	34
src/screenshot/screenshot-compare.ts	33
src/compiler/transformers/test/parse-props.spec.ts	32
src/dev-server/server-process.ts	32
src/runtime/vdom/vdom-render.ts	30
src/compiler/sys/typescript/typescript-config.ts	28
src/testing/spec-page.ts	28
src/compiler/build/build-stats.ts	27
src/compiler/output-targets/dist-lazy/generate-lazy-module.ts	26
src/compiler/prerender/prerender-main.ts	25
src/mock-doc/test/attribute.spec.ts	24
src/sys/node/test/worker-manager.spec.ts	24
src/compiler/plugin/plugin.ts	23
src/compiler/style/test/optimize-css.spec.ts	23

Our most common errors

Typescript Error Code	Count	Error messages
TS2532	718	Error messages Object is possibly 'undefined'.
TS2345	708	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 '"g" \| "prerender" \| "build" \| "docs" \| "serve" \| "version" \| "info" \| "generate" \| "telemetry" \| "test" \| null' is not assignable to parameter of type 'TaskCommand'. Type 'null' is not assignable to type 'TaskCommand'. Argument of type '"g" \| "prerender" \| "build" \| "docs" \| "serve" \| "info" \| "generate" \| "telemetry" \| "test" \| null' is not assignable to parameter of type 'TaskCommand'. Type 'null' is not assignable to type 'TaskCommand'. Argument of type '"g" \| "prerender" \| "build" \| "docs" \| "serve" \| "generate" \| "telemetry" \| "test" \| null' is not assignable to parameter of type 'TaskCommand'. Type 'null' is not assignable to type 'TaskCommand'. Argument of type 'CompilerSystem \| undefined' is not assignable to parameter of type 'CompilerSystem'. Type 'undefined' is not assignable to type 'CompilerSystem'. Argument of type 'Promise<(() => void) \| null>' is not assignable to parameter of type 'Promise<() => void>'. Argument of type 'null' is not assignable to parameter of type 'BuildResultsComponentGraph'. Argument of type 'DevServerConfig \| undefined' is not assignable to parameter of type 'StencilDevServerConfig'. Type 'undefined' is not assignable to type 'StencilDevServerConfig'. Argument of type 'Promise<(() => void) \| null>' is not assignable to parameter of type 'Promise<() => void>'. Type '(() => void) \| null' is not assignable to type '() => void'. Type 'null' is not assignable to type '() => void'. Argument of type 'boolean \| null \| undefined' is not assignable to parameter of type 'boolean \| undefined'. Type 'null' is not assignable to type 'boolean \| undefined'. Argument of type 'number \| undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'. Argument of type 'ComponentRuntimeHostListener[] \| undefined' is not assignable to parameter of type 'ComponentRuntimeHostListener[]'. Type 'undefined' is not assignable to type 'ComponentRuntimeHostListener[]'. Argument of type 'HTMLScriptElement \| null \| undefined' is not assignable to parameter of type 'HTMLScriptElement'. Type 'undefined' is not assignable to type 'HTMLScriptElement'. Argument of type 'string \| null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. 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 'Diagnostic[] \| undefined' is not assignable to parameter of type 'Diagnostic[]'. Type 'undefined' is not assignable to type 'Diagnostic[]'. Argument of type 'WorkerMeta \| undefined' is not assignable to parameter of type 'WorkerMeta'. Type 'undefined' is not assignable to type 'WorkerMeta'. Argument of type 'CopyTask[] \| undefined' is not assignable to parameter of type 'boolean \| CopyTask[]'. Argument of type '{ type: "copy"; dir: string \| undefined; copy: d.CopyTask[]; }' is not assignable to parameter of type 'OutputTargetCopy \| OutputTargetDistCustomElementsBundle'. Types of property 'dir' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'CopyTask[] \| undefined' is not assignable to parameter of type 'boolean \| CopyTask[]'. Type 'undefined' is not assignable to type 'boolean \| CopyTask[]'. Argument of type '{ type: "copy"; dir: string \| undefined; copy: CopyTask[]; }' is not assignable to parameter of type 'OutputTargetCopy \| OutputTargetDistCustomElements \| OutputTargetDistTypes'. Types of property 'dir' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Argument of type 'OutputTargetWww' is not assignable to parameter of type 'never'. 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 'RollupConfig \| undefined' is not assignable to parameter of type 'RollupConfig'. Type 'undefined' is not assignable to type 'RollupConfig'. 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 '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 'CssNode[] \| null \| undefined' is not assignable to parameter of type 'void \| CssNode[]'. Argument of type 'CssNode[] \| null \| undefined' is not assignable to parameter of type 'void \| CssNode[]'. Type 'null' is not assignable to type 'void \| CssNode[]'. 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 'InMemoryFileSystem'. 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[]'. Type 'undefined' is not assignable to type 'NodeArray \| HeritageClause[]'. Argument of type 'Block \| undefined' is not assignable to parameter of type 'Block'. Type 'undefined' is not assignable to type 'Block'. Argument of type 'undefined' is not assignable to parameter of type 'readonly ParameterDeclaration[]'. Argument of type 'Expression \| undefined' is not assignable to parameter of type 'Expression'. Type 'undefined' is not assignable to type 'Expression'. Argument of type 'Symbol \| undefined' is not assignable to parameter of type 'Symbol'. Type 'undefined' is not assignable to type 'Symbol'. Argument of type 'string \| false' is not assignable to parameter of type 'string'. Type 'boolean' is not assignable to type 'string'. 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 '(PropertyAssignment \| null)[]' is not assignable to parameter of type 'readonly ObjectLiteralElementLike[]'. Argument of type 'Identifier \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. Argument of type 'undefined' is not assignable to parameter of type 'readonly ClassElement[]'. Argument of type 'null' is not assignable to parameter of type 'Config \| undefined'. Argument of type 'Config \| undefined' is not assignable to parameter of type 'Config'. 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 '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'. Type 'undefined' is not assignable to type 'ScriptTarget'. 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 'OpenInEditorCallback \| undefined' is not assignable to parameter of type 'OpenInEditorCallback'. Type 'undefined' is not assignable to type 'OpenInEditorCallback'. Argument of type 'CompilerWatcher \| undefined' is not assignable to parameter of type 'CompilerWatcher'. Type 'undefined' is not assignable to type 'CompilerWatcher'. 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'. Type 'undefined' is not assignable to 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 'ShadowRoot \| null' is not assignable to parameter of type 'Node'. Type 'null' is not assignable to type 'Node'. 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 'HTMLElement \| undefined' is not assignable to parameter of type 'HTMLElement'. Type 'undefined' is not assignable to type 'HTMLElement'. Argument of type 'HostElement \| undefined' is not assignable to parameter of type 'HostElement'. Type 'undefined' is not assignable to type 'HostElement'. Argument of type 'HostElement \| undefined' is not assignable to parameter of type 'EventTarget'. Type 'undefined' is not assignable to type 'EventTarget'. Argument of type 'HostElement \| undefined' is not assignable to parameter of type 'Element'. Type 'undefined' is not assignable to type 'Element'. 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 \| undefined' is not assignable to parameter of type 'ChildType'. Type 'undefined' is not assignable to type 'ChildType'. Argument of type 'VNode \| null' is not assignable to parameter of type 'ChildType'. Type 'null' is not assignable to type 'ChildType'. Argument of type 'VNode \| undefined' is not assignable to parameter of type 'ChildType'. Type 'undefined' is not assignable to type 'ChildType'. Argument of type 'VNode \| null \| undefined' is not assignable to parameter of type 'ChildType'. Type 'undefined' is not assignable to type 'ChildType'. Argument of type 'null \| 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 'RenderNode \| undefined' is not assignable to parameter of type 'Node'. Type 'undefined' is not assignable to type 'Node'. 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'. 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 'null' is not assignable to parameter of 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 '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 'string \| null \| undefined' is not assignable to parameter of type 'SerializableOrJSHandle'. Type 'undefined' is not assignable to type 'SerializableOrJSHandle'. Argument of type 'this' is not assignable to parameter of type 'E2EElementInternal'. Argument of type 'ElementHandle \| null' is not assignable to parameter of type 'ElementHandle'. Type 'null' is not assignable to type 'ElementHandle'. Argument of type '{ viewport: EmulateViewport \| undefined; userAgent: string \| undefined; }' is not assignable to parameter of type '{ viewport: Viewport; userAgent: string; }'. Types of property 'viewport' are incompatible. Type 'EmulateViewport \| undefined' is not assignable to type 'Viewport'. Type 'undefined' is not assignable to type 'Viewport'. Argument of type 'AnyHTMLElement \| undefined' is not assignable to parameter of type 'RuntimeRef'. Type 'undefined' is not assignable to type 'RuntimeRef'. Argument of type 'null' is not assignable to parameter of type 'SourceMap \| undefined'.
TS2322	555	Error messages Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'string \| null \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type 'null' is not assignable to type 'DevServerConfig \| undefined'. Type 'boolean \| null \| undefined' is not assignable to type 'boolean \| undefined'. Type 'null' is not assignable to type 'DevServer'. Type 'boolean \| null \| undefined' is not assignable to type 'boolean'. Type 'undefined' is not assignable to type 'boolean'. Type 'boolean \| null \| undefined' is not assignable to type 'boolean'. Type 'undefined' is not assignable to type 'number'. Type 'TaskCommand \| null' is not assignable to type 'TaskCommand'. Type 'null' is not assignable to type 'TaskCommand'. Type 'PackageJsonData \| null' is not assignable to type 'PackageJsonData'. Type 'null' is not assignable to type 'PackageJsonData'. Type 'null' is not assignable to type 'OutputTarget[] \| undefined'. Type 'undefined' is not assignable to type 'ComponentConstructor \| Promise'. Type 'HTMLElement \| null' is not assignable to type 'HTMLElement'. Type 'null' is not assignable to type 'HTMLElement'. 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 'undefined' is not assignable to type 'string'. 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 '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 '{ program: WatchOfConfigFile; rebuild: () => void; }'. 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 'string' is not assignable to type 'never'. Type 'null' is not assignable to type 'never'. Type 'never[]' is not assignable to type 'never'. 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 'CompilerSystem \| undefined' is not assignable to type 'CompilerSystem'. Type 'undefined' is not assignable to type 'CompilerSystem'. Type 'Logger \| undefined' is not assignable to type 'Logger'. Type 'undefined' is not assignable to type 'Logger'. 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'. The types returned by 'get(...)' are incompatible between these types. Type 'Promise<string \| null>' is not assignable to type 'Promise'. 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; type: "dist"; }' is not assignable to type 'Required'. Types of property 'polyfills' are incompatible. Type 'boolean \| undefined' is not assignable to type 'boolean'. Type 'string \| undefined' is not assignable to type 'never'. Type 'undefined' is not assignable to type 'never'. Type 'boolean \| undefined' is not assignable to type 'never'. Type 'undefined' is not assignable to type 'never'. Type 'boolean' is not assignable to type 'never'. Type 'CopyTask[]' is not assignable to type 'never'. 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; usage: JsonDocsUsage; docs: string; docsTags: CompilerJsDocTagInfo[]; ... 11 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; usage: d.JsonDocsUsage; docs: string; docsTags: d.CompilerJsDocTagInfo[]; ... 11 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 '{ name: string; type: string; mutable: boolean; attr: string \| undefined; reflectToAttr: boolean; docs: string; docsTags: CompilerJsDocTagInfo[]; default: string \| undefined; deprecation: string \| undefined; values: JsonDocsValue[]; optional: boolean; required: boolean; }[]' is not assignable to type 'JsonDocsProp[]'. Type '{ name: string; type: string; mutable: boolean; attr: string \| undefined; reflectToAttr: boolean; docs: string; docsTags: d.CompilerJsDocTagInfo[]; default: string \| undefined; deprecation: string \| undefined; values: d.JsonDocsValue[]; optional: boolean; required: boolean; }' is not assignable to type 'JsonDocsProp'. Types of property 'default' are incompatible. Type 'string \| undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. Type '{ name: string; type: string; mutable: false; attr: string; reflectToAttr: false; docs: string; docsTags: never[]; default: undefined; deprecation: undefined; values: JsonDocsValue[]; optional: true; required: false; }[]' is not assignable to type 'JsonDocsProp[]'. Type '{ name: string; type: string; mutable: false; attr: string; reflectToAttr: false; docs: string; docsTags: never[]; default: undefined; deprecation: undefined; values: d.JsonDocsValue[]; optional: true; required: false; }' is not assignable to type 'JsonDocsProp'. Types of property 'default' are incompatible. 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 'SourceMap \| undefined' is not assignable to type 'SourceMap'. Type 'undefined' is not assignable to type 'SourceMap'. Type 'string \| null' is not assignable to type 'string \| undefined'. Type '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 '() => string'. 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 '((maxConcurrentWorkers: number) => WorkerMainController) \| null' is not assignable to type '((maxConcurrentWorkers: number) => WorkerMainController) \| undefined'. Type 'null' is not assignable to type '((maxConcurrentWorkers: number) => WorkerMainController) \| undefined'. Type 'null' is not assignable to type 'ResolvedModuleWithFailedLookupLocations'. Type 'null' is not assignable to type 'Worker'. Type 'CollectionCompilerMeta \| undefined' is not assignable to type 'CollectionCompilerMeta'. Type 'undefined' is not assignable to type 'CollectionCompilerMeta'. Type 'null' is not assignable to type 'ComponentCompilerStaticEvent'. Type 'null' is not assignable to type 'PropertyAssignment'. 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 '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 'string \| undefined' is not assignable to type 'string \| null'. 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 'string \| null' is not assignable to type 'string \| undefined'. 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'. 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 '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 '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 'MockNode'. 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; prefix: null; }[]' is not assignable to type 'Attribute[]'. Type '{ name: string; value: string; namespace: string; prefix: null; }' is not assignable to type 'Attribute'. Types of property 'prefix' are incompatible. Type 'null' is not assignable to type 'string \| undefined'. 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 'null' is not assignable to type 'Set \| undefined'. Type 'null' is not assignable to type '[string, any][] \| undefined'. 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 'ScreenshotBuild'. 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 'CompilerOptions \| null' is not assignable to type 'CompilerOptions'. Type 'null' is not assignable to type 'CompilerOptions'. Type 'null' is not assignable to type 'ConfigBundle[] \| 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 'InMemoryFileSystem'. Type 'HostRef \| undefined' is not assignable to type 'HostRef'. Type 'undefined' is not assignable to type 'HostRef'. 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 'null' is not assignable to type 'Promise<JSHandle>'. Type '(a?: any, b?: any) => Promise<ScreenshotDiff \| undefined>' is not assignable to type '{ (): Promise; (description: string): Promise; (opts: ScreenshotOptions): Promise<...>; (description: string, opts: ScreenshotOptions): Promise<...>; }'. Type 'Promise<ScreenshotDiff \| undefined>' is not assignable to type 'Promise'. Type 'ScreenshotDiff \| undefined' is not assignable to type 'ScreenshotDiff'. Type 'undefined' is not assignable to type 'ScreenshotDiff'. Type 'null' is not assignable to type 'Function \| undefined'. Type 'null' is not assignable to type 'CompilerWatcher'. Type 'null' is not assignable to type 'Promise'. Type 'Browser \| null' is not assignable to type 'Browser'. Type 'null' is not assignable to type 'Browser'. Type 'null' is not assignable to type 'ValidatedConfig'. Type 'null' is not assignable to type 'Browser'. Type 'null' is not assignable to type 'SourceMap'. Type 'null' is not assignable to type 'PackageJsonData'. Type 'null' is not assignable to type '{ [moduleId: string]: string; } \| undefined'.
TS2531	200	Error messages Object is possibly 'null'.
TS2454	46	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 'content' is used before being assigned. Variable 'compilerExe' is used before being assigned. Variable 'outputText' is used before being assigned. Variable 'importResolvedFile' is used before being assigned. Variable 'win' is used before being assigned. Variable 'attrName' is used before being assigned. Variable 'oldValue' is used before being assigned. Variable 'newValue' is used before being assigned. Variable 'hostId' is used before being assigned. Variable 'promise' 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.
TS2722	42	Error messages Cannot invoke an object which is possibly 'undefined'.
TS2352	20	Error messages 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 '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, collectionName, dtsFilePath, excludeFromCollection, and 27 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.
TS2790	15	Error messages The operand of a 'delete' operator must be optional.
TS2769	13	Error messages 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 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 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. The last overload gave the following error. Argument of type 'string \| null' is not assignable to parameter of type 'string \| number \| boolean \| PseudoBigInt'. Type 'null' is not assignable to type 'string \| number \| boolean \| PseudoBigInt'. 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: Timeout): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'Timeout'. Type 'null' is not assignable to type 'Timeout'. Overload 2 of 2, '(handle?: 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: Timeout): void', gave the following error. Argument of type 'Timeout \| null' is not assignable to parameter of type 'Timeout'. Type 'null' is not assignable to type 'Timeout'. Overload 2 of 2, '(handle?: 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'. No overload matches this call. Overload 1 of 2, '(values: [] \| readonly unknown[]): Promise<unknown[] \| []>', gave the following error. Argument of type 'Promise[] \| undefined' is not assignable to parameter of type '[] \| readonly unknown[]'. Type 'undefined' is not assignable to type '[] \| readonly unknown[]'. Overload 2 of 2, '(values: Iterable<void \| PromiseLike>): Promise<void[]>', gave the following error. Argument of type 'Promise[] \| undefined' is not assignable to parameter of type 'Iterable<void \| PromiseLike>'. Type 'undefined' is not assignable to type 'Iterable<void \| PromiseLike>'.
TS2538	7	Error messages Type 'undefined' cannot be used as an index type. Type 'null' cannot be used as an index type.
TS2416	4	Error messages Property 'get' in type 'Cache' is not assignable to the same property in base type 'Cache'. Type '(key: string) => Promise<string \| null>' is not assignable to type '(key: string) => Promise'. Type 'Promise<string \| null>' is not assignable to type 'Promise'. Type 'string \| null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. 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'.
TS2533	3	Error messages Object is possibly 'null' or 'undefined'.
TS2493	3	Error messages Tuple type '[]' of length '0' has no element at index '0'.
TS2488	2	Error messages Type 'Diagnostic[] \| undefined' must have a 'Symbol.iterator' method that returns an iterator. Type 'string[] \| undefined' must have a 'Symbol.iterator' method that returns an iterator.
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'.
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'.
TS2339	1	Error messages Property 'kind' does not exist on type 'never'.
TS2774	1	Error messages This condition will always return true since this function is always defined. Did you mean to call it instead?

Unused exports report

There are 9 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/screenshot/screenshot-fs.ts	18	readScreenshotData
src/testing/testing-utils.ts	184	withSilentWarn
src/compiler/app-core/app-data.ts	3	BUILD
src/compiler/app-core/app-data.ts	88	Env
src/compiler/app-core/app-data.ts	90	NAMESPACE
src/compiler/fs-watch/fs-watch-rebuild.ts	110	updateCacheFromRebuild
src/testing/platform/testing-platform.ts	28	cssVarShim
src/testing/puppeteer/puppeteer-declarations.ts	513	WaitForEventOptions
src/client/polyfills/css-shim/utils.ts	1	GLOBAL_SCOPE

rwaskiewicz

One last question - did we test this against a hydrate app? It looks like commentOriginalSelector is true IFF bundleOpts.platform is 'hydrate', which only occurs if config.flags.prerender or config.flags.ssr is set.

src/compiler/transformers/stencil-import-path.ts

rwaskiewicz · 2022-08-12T15:23:54Z

src/compiler/bundle/ext-transforms-plugin.ts

+     * This Rollup build hook has a signature like:
+     *
+     * ```
+     * (code: string, id: string) =>
+     *   | string
+     *   | null
+     *   | {
+     *       code?: string,
+     *       map?: string | SourceMap,
+     *       ast? : ESTree.Program,
+     *       moduleSideEffects?: boolean | "no-treeshake" | null,
+     *       syntheticNamedExports?: boolean | string | null,
+     *       meta?: {[plugin: string]: any} | null
+     *     }
+     * ```


I wonder if we should include this - if the function signature of transform changes in a new version of Rollup (FWIW, v3 of Rollup is coming, although IDK if transforms fn signature will change there), do we have a good way to know that this comment should change to reflect the changes?

I think we're sufficiently covered by linking to https://rollupjs.org/guide/en/#transform in the previous section

I second linking to official docs

Yeah that makes sense to me, I'll remove that code block, and keep the link and the other explanation

rwaskiewicz · 2022-08-12T15:27:13Z

src/compiler/bundle/ext-transforms-plugin.ts

+      // The `id` here was possibly previously updated using
+      // `serializeImportPath` to annotate the filepath with various metadata
+      // serialized to query-params. If that was done for this particular `id`
+      // then the `data` prop will not be null.


I don't fully understand this comment (yet) - is this something we wanted to include in the final code, or was this a debugging note?

I was thinking it might be a helpful note to leave in - when I found serializeImportPath and parseImportPath and read them I thought it was an odd and sort of surprising thing so thought it might be helpful to leave a little signpost behind

I think the sort of strange bit (relating to the thread below about which files are actually written) is that the id for a module which has a Stencil component in it will be rewritten using that serializeImportPath function to include the information set in the @Component decorator as query-params like ?scoped=true&tag=my-component and so on. This seems like a very indirect and confusing pattern to me since then this information is crucial here for figuring out when we need to write the transformed CSS corresponding to that module...anywhoo just a weird little corner here where I don't quite understand why it's like this

rwaskiewicz · 2022-08-12T15:39:01Z

src/compiler/bundle/ext-transforms-plugin.ts

+ * A Rollup plugin which bundles up some transformation of CSS imports as well
+ * as writing CSS files for components to disk for the `DIST_COLLECTION` output
+ * target.


FWIW, I don't believe this plugin only handles CSS files. IIUC, it handles entrypoints, JS, TS, etc. as well

tbh I'm not sure, I thought that the only file writing going on here was with the return values of runPluginTransformsEsmImports which I think only has to do with CSS files? But unfortunately as always most of this stuff is not really labeled so clearly :/

I'll change the comment to leave it a bit more ambiguous for now, and maybe something in the future we can do a more thorough bit of archeology on this region of the codebase

FWIW - added a little console.log here to confirm:

diff --git a/src/compiler/bundle/ext-transforms-plugin.ts b/src/compiler/bundle/ext-transforms-plugin.ts index 08e955ef5..cdf37009b 100644 --- a/src/compiler/bundle/ext-transforms-plugin.ts +++ b/src/compiler/bundle/ext-transforms-plugin.ts @@ -39,6 +39,7 @@ export const extTransformsPlugin = ( * @returns metadata for Rollup or null if no transformation should be done */ async transform(_, id) { + console.log(`id: ${id}`); if (/\0/.test(id)) { return null; }

Then built the Stencil, with the installed it in the output of the Stencil CLI and ran npm run build:

id: my-component.entry id: core id: MyComponent id: @lazy-browser-entrypoint?app-data=conditional id: @lazy-external-entrypoint?app-data=conditional id: /path/to/project/intellij-test/src/index.ts id: @stencil/core/internal/app-globals id: @stencil/core/internal/app-globals id: /path/to/project/intellij-test/src/index.ts id: /path/to/stencil/internal/client/patch-browser.js id: @stencil/core/internal/app-data id: /path/to/stencil/internal/client/patch-esm.js id: /path/to/stencil/internal/client/index.js?app-data=conditional id: /path/to/stencil/internal/client/css-shim.js id: /path/to/stencil/internal/client/dom.js id: /path/to/stencil/internal/client/shadow-css.js id: /path/to/project/intellij-test/src/components/my-component/my-component.tsx id: /path/to/project/intellij-test/src/components/my-component/my-component.tsx id: /path/to/project/intellij-test/src/utils/utils.ts id: /path/to/project/intellij-test/src/utils/utils.ts id: /path/to/project/intellij-test/src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow id: /path/to/project/intellij-test/src/components/my-component/my-component.css?tag=my-component&encapsulation=shadow

I believe a rollup plugin like this will end up being called with all the modules in the build, my reasoning was that in some of the logic down below it doesn't appear as if it would write those files except for CSS files, but I could be wrong about that

Bah - sorry, that's my bad 🤦 Totally misunderstood!

this bit is what I'm referring to:

stencil/src/compiler/bundle/ext-transforms-plugin.ts

Lines 36 to 52 in 103ec60

if (data.tag) {

cmp = buildCtx.components.find((c) => c.tagName === data.tag);

const moduleFile = cmp && compilerCtx.moduleMap.get(cmp.sourceFilePath);

if (moduleFile) {

const collectionDirs = config.outputTargets.filter(isOutputTargetDistCollection);

const relPath = relative(config.srcDir, pluginTransforms.id);

await Promise.all(

collectionDirs.map(async (outputTarget) => {

const collectionPath = join(outputTarget.collectionDir, relPath);

await compilerCtx.fs.writeFile(collectionPath, pluginTransforms.code);

})

);

}

}

If I make a little change like this:

diff --git a/src/compiler/bundle/ext-transforms-plugin.ts b/src/compiler/bundle/ext-transforms-plugin.ts index 08e955ef5..fdf9c9d0a 100644 --- a/src/compiler/bundle/ext-transforms-plugin.ts +++ b/src/compiler/bundle/ext-transforms-plugin.ts @@ -91,6 +91,7 @@ export const extTransformsPlugin = ( await Promise.all( collectionDirs.map(async (outputTarget) => { const collectionPath = join(outputTarget.collectionDir, relPath); + console.log(`extTransformsPlugin::writing to ${collectionPath}`); await compilerCtx.fs.writeFile(collectionPath, pluginTransforms.code); }) );

and run a build in Framework I only see CSS files there:

(more omitted for the sake of brevity!)

@rwaskiewicz no worries!

rwaskiewicz · 2022-08-12T15:59:52Z

src/compiler/bundle/test/ext-transforms-plugin.spec.ts

+      // @ts-ignore the Rollup plugins expect to be called in a Rollup context
+      await plugin.transform('asdf', '/some/stubbed/path/foo.css?tag=my-component');
+
+      expect(writeFileSpy).toBeCalledWith('dist/collectionDir/foo.css', ':host { text: pink; }');


It looks like this is failing on Windows machines. Can you TAL at normalizing this path?

should write CSS files if associated with a tag expect(jest.fn()).toBeCalledWith(...expected) Expected: "dist/collectionDir/foo.css", ":host { text: pink; }" Received: "dist\\collectionDir\\foo.css", ":host { text: pink; }" Number of calls: 1 94 | await plugin.transform('asdf', '/some/stubbed/path/foo.css?tag=my-component'); 95 | > 96 | expect(writeFileSpy).toBeCalledWith('dist/collectionDir/foo.css', ':host { text: pink; }'); | ^ 97 | }); 98 | 99 | describe('passing `commentOriginalSelector` to `transformCssToEsm`', () => { at Object.<anonymous> (src/compiler/bundle/test/ext-transforms-plugin.spec.ts:96:28)

I fixed this by pulling out what was passed to writeFileSpy and then calling normalizePath on it before comparing. Windows, why must you be different!

tanner-reits

LGTM. Agreed with one comment Ryan had regarding documentation

tanner-reits · 2022-08-15T15:20:01Z

src/compiler/bundle/ext-transforms-plugin.ts

+     * This Rollup build hook has a signature like:
+     *
+     * ```
+     * (code: string, id: string) =>
+     *   | string
+     *   | null
+     *   | {
+     *       code?: string,
+     *       map?: string | SourceMap,
+     *       ast? : ESTree.Program,
+     *       moduleSideEffects?: boolean | "no-treeshake" | null,
+     *       syntheticNamedExports?: boolean | string | null,
+     *       meta?: {[plugin: string]: any} | null
+     *     }
+     * ```


I second linking to official docs

This fixes an issue (#3461) where CSS is being inappropriately mangled when using the hot-reload dev server. The issue has details about exactly what the problem is, but basically in short if you are using the `dist-hydrate-script` output target and running the dev server then any change to a CSS file will cause all styling to be wiped from the related component in the browser, making for a pretty inadequate developer experience. This commit fixes the issue by changing the conditions under which original CSS selectors are commented out and 'scoped' so that it is only done when you are have `scoped: true` set on a component (I believe this was the original intent but for some reason the code wasn't set up to do this).

alicewriteswrongs · 2022-08-15T17:12:21Z

@rwaskiewicz ok so I built a small example app that uses dist-hydrate-script and tried out my original fix on it and was dismayed to learn that it broke CSS.

I came up with a different solution that I think will give us what we want. Basically, I think in ext-transforms-plugin we want to set the commentOriginalSelectors variable to true whenever we're building with platform: "hydrate" and not in an HMR / dev watch server context. I made the check more explicitly checking for exactly that, and then tried it out in both my small example app and ionic framework to confirm that 1) normal hydrate support does not appear to be broken and 2) the original issue with CSS and the dev server in Framework is still fixed. And I think it is!

As a caveat to that though — I don't think I have the firmest grasp on hydration in general, like the different ways this could work, how the dist-hydrate-script OT interacts with others, etc. So I feel there is definitely a possibility I am not seeing some part of the bigger picture here. Anywhoo - I just pushed the code for that, lmk what you think!

rwaskiewicz · 2022-08-15T19:59:14Z

@alicewriteswrongs Makes sense to me!

alicewriteswrongs marked this pull request as ready for review August 11, 2022 19:25

alicewriteswrongs requested a review from a team August 11, 2022 19:25

rwaskiewicz suggested changes Aug 15, 2022

View reviewed changes

tanner-reits approved these changes Aug 15, 2022

View reviewed changes

alicewriteswrongs added 7 commits August 15, 2022 10:12

propagate ValidatedConfig to fix some strictNullChecks errors

cb5591f

prettier

0209d12

trying to make this test work cross platform

42d65ec

feedback, and change the fix for HMR issue

b92e451

expand tests a bit to cover the changes

8aecab4

prettier

964efa9

alicewriteswrongs force-pushed the ap/fix-hydrate-css-reload branch from 3f0fad2 to 964efa9 Compare August 15, 2022 17:12

fmt

cc663cd

alicewriteswrongs changed the title ~~fix(compiler): don't break livereload by mangling CSS~~ fix(compiler): don't break HMR by mangling CSS Aug 15, 2022

rwaskiewicz approved these changes Aug 15, 2022

View reviewed changes

rwaskiewicz merged commit f5b2b69 into main Aug 15, 2022

rwaskiewicz deleted the ap/fix-hydrate-css-reload branch August 15, 2022 20:00

rwaskiewicz mentioned this pull request Aug 22, 2022

bug: Stencil dev server CSS updates are broken when using dist-hydrate-script #3461

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(compiler): don't break HMR by mangling CSS #3517

fix(compiler): don't break HMR by mangling CSS #3517

alicewriteswrongs commented Aug 11, 2022 •

edited

github-actions bot commented Aug 11, 2022 •

edited

rwaskiewicz left a comment

rwaskiewicz Aug 12, 2022

tanner-reits Aug 15, 2022

alicewriteswrongs Aug 15, 2022

rwaskiewicz Aug 12, 2022

alicewriteswrongs Aug 15, 2022

alicewriteswrongs Aug 15, 2022

rwaskiewicz Aug 12, 2022

alicewriteswrongs Aug 15, 2022

rwaskiewicz Aug 15, 2022

alicewriteswrongs Aug 15, 2022

rwaskiewicz Aug 15, 2022

alicewriteswrongs Aug 15, 2022

alicewriteswrongs Aug 15, 2022

alicewriteswrongs Aug 15, 2022

rwaskiewicz Aug 12, 2022

alicewriteswrongs Aug 15, 2022

tanner-reits left a comment

tanner-reits Aug 15, 2022

alicewriteswrongs commented Aug 15, 2022

rwaskiewicz commented Aug 15, 2022

	if (data.tag) {
	cmp = buildCtx.components.find((c) => c.tagName === data.tag);
	const moduleFile = cmp && compilerCtx.moduleMap.get(cmp.sourceFilePath);

	if (moduleFile) {
	const collectionDirs = config.outputTargets.filter(isOutputTargetDistCollection);

	const relPath = relative(config.srcDir, pluginTransforms.id);

	await Promise.all(
	collectionDirs.map(async (outputTarget) => {
	const collectionPath = join(outputTarget.collectionDir, relPath);
	await compilerCtx.fs.writeFile(collectionPath, pluginTransforms.code);
	})
	);
	}
	}

fix(compiler): don't break HMR by mangling CSS #3517

fix(compiler): don't break HMR by mangling CSS #3517

Conversation

alicewriteswrongs commented Aug 11, 2022 • edited

Pull request checklist

Pull request type

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Testing

Other information

github-actions bot commented Aug 11, 2022 • edited

--strictNullChecks error report

reports and statistics

Unused exports report

rwaskiewicz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tanner-reits left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alicewriteswrongs commented Aug 15, 2022

rwaskiewicz commented Aug 15, 2022

alicewriteswrongs commented Aug 11, 2022 •

edited

github-actions bot commented Aug 11, 2022 •

edited

`--strictNullChecks` error report