From 2bb7f25b77c2910e55653216d952242891e7556e Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Mon, 17 Apr 2023 11:51:32 -0400 Subject: [PATCH 1/3] remove top-level check gating init logic based on build flags This commit removes a check that was gating some component initialization logic. This check would force that non-lazy builds would need to have styles (or at least an empty stylesheet) for the init logic to execute that would mark the component as initialized. This flag is necessary to have set `true` for watcher callbacks to execute --- src/runtime/initialize-component.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/runtime/initialize-component.ts b/src/runtime/initialize-component.ts index 9daa0811234..40181862c47 100644 --- a/src/runtime/initialize-component.ts +++ b/src/runtime/initialize-component.ts @@ -18,14 +18,11 @@ export const initializeComponent = async ( Cstr?: any ) => { // initializeComponent - if ( - (BUILD.lazyLoad || BUILD.hydrateServerSide || BUILD.style) && - (hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0 - ) { - if (BUILD.lazyLoad || BUILD.hydrateClientSide) { - // we haven't initialized this element yet - hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent; + if ((hostRef.$flags$ & HOST_FLAGS.hasInitializedComponent) === 0) { + // Let the runtime know that the component has been initialized + hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent; + if (BUILD.lazyLoad || BUILD.hydrateClientSide) { // lazy loaded components // request the component's implementation to be // wired up with the host element @@ -81,7 +78,7 @@ export const initializeComponent = async ( } else { // sync constructor component Cstr = elm.constructor as any; - hostRef.$flags$ |= HOST_FLAGS.hasInitializedComponent; + // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise, // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_ // Stencil has completed instantiating the component. From 2386843e08146848756e00fa6f39af630092f5cb Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Fri, 21 Apr 2023 10:55:57 -0400 Subject: [PATCH 2/3] add small test to check initialized flag --- .../test/initialize-component.spec.tsx | 22 +++++++++++++++++++ src/runtime/test/tsconfig.json | 3 ++- 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/runtime/test/initialize-component.spec.tsx diff --git a/src/runtime/test/initialize-component.spec.tsx b/src/runtime/test/initialize-component.spec.tsx new file mode 100644 index 00000000000..8e3b70b700a --- /dev/null +++ b/src/runtime/test/initialize-component.spec.tsx @@ -0,0 +1,22 @@ +import { getHostRef } from '@platform' +import { Component } from '@stencil/core'; +import { newSpecPage } from '@stencil/core/testing'; + +import { HOST_FLAGS } from '../../utils'; + +describe('initialize component', () => { + @Component({ + tag: 'cmp-a', + }) + class CmpA {} + + it('should mark the component as initialized', async () => { + const page = await newSpecPage({ + components: [CmpA], + html: ``, + }); + + const hostFlags = getHostRef(page.root).$flags$ + expect((hostFlags & HOST_FLAGS.hasInitializedComponent)).toBe(HOST_FLAGS.hasInitializedComponent) + }); +}); diff --git a/src/runtime/test/tsconfig.json b/src/runtime/test/tsconfig.json index b560cdb7341..a9ee80dc21d 100644 --- a/src/runtime/test/tsconfig.json +++ b/src/runtime/test/tsconfig.json @@ -22,7 +22,8 @@ "baseUrl": ".", "paths": { "@stencil/core": ["../../index.ts"], - "@stencil/core/testing": ["../../testing/index.ts"] + "@stencil/core/testing": ["../../testing/index.ts"], + "@platform": ["../../client/index.ts"] } } } From 25e98feaed5ebd7f598f147286173343515f5851 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Fri, 21 Apr 2023 11:07:04 -0400 Subject: [PATCH 3/3] =?UTF-8?q?prettier=20because=20I=20don't=20have=20it?= =?UTF-8?q?=20auto-format=20spec=20files=20=F0=9F=A4=A6=E2=80=8D=E2=99=82?= =?UTF-8?q?=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/runtime/test/initialize-component.spec.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/runtime/test/initialize-component.spec.tsx b/src/runtime/test/initialize-component.spec.tsx index 8e3b70b700a..52df81e69fe 100644 --- a/src/runtime/test/initialize-component.spec.tsx +++ b/src/runtime/test/initialize-component.spec.tsx @@ -1,4 +1,4 @@ -import { getHostRef } from '@platform' +import { getHostRef } from '@platform'; import { Component } from '@stencil/core'; import { newSpecPage } from '@stencil/core/testing'; @@ -16,7 +16,7 @@ describe('initialize component', () => { html: ``, }); - const hostFlags = getHostRef(page.root).$flags$ - expect((hostFlags & HOST_FLAGS.hasInitializedComponent)).toBe(HOST_FLAGS.hasInitializedComponent) + const hostFlags = getHostRef(page.root).$flags$; + expect(hostFlags & HOST_FLAGS.hasInitializedComponent).toBe(HOST_FLAGS.hasInitializedComponent); }); });