fix(runtime): initialize custom elements even when there is no styles (…

…#4296)

* 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

* add small test to check initialized flag

* prettier because I don't have it auto-format spec files 🤦‍♂️

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.

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: `<cmp-a><cmp-a>`,
+    });
+
+    const hostFlags = getHostRef(page.root).$flags$;
+    expect(hostFlags & HOST_FLAGS.hasInitializedComponent).toBe(HOST_FLAGS.hasInitializedComponent);
+  });
+});

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"]
     }
   }
 }