Merge branch 'main' into cb/fix-windows-build

src/app-data/index.ts

@@ -105,7 +105,7 @@ export const BUILD: BuildConditionals = {
   devTools: false,
   shadowDelegatesFocus: true,
   initializeNextTick: false,
-  asyncLoading: false,
+  asyncLoading: true,
   asyncQueue: false,
   transformTagName: false,
   attachStyles: true,

src/compiler/transformers/static-to-meta/component.ts

@@ -201,6 +201,7 @@ const validateComponentMembers = (node: ts.Node) => {
     /**
      * the parent node is a class declaration
      */
+    node.parent &&
     ts.isClassDeclaration(node.parent)
   ) {
     const propName = node.name.escapedText;

src/compiler/types/generate-app-types.ts

@@ -108,7 +108,9 @@ const generateComponentTypesFile = (
     return `{ ${typeData
       .sort(sortImportNames)
       .map((td) => {
-        if (td.originalName === td.importName) {
+        if (td.originalName === '') {
+          return `${td.localName}`;
+        } else if (td.originalName === td.importName) {
           return `${td.originalName}`;
         } else {
           return `${td.originalName} as ${td.importName}`;

src/compiler/types/tests/generate-app-types.spec.ts

@@ -1747,6 +1747,11 @@ declare module "@stencil/core" {
                 location: 'import',
                 path: '@utils',
               },
+              Fragment: {
+                location: 'import',
+                path: '@stencil/core',
+                id: '',
+              },
             },
           },
         }),
@@ -1767,7 +1772,9 @@ declare module "@stencil/core" {
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { MyType as UserImplementedPropType } from "@utils";
+import { Fragment } from "@stencil/core";
 export { MyType as UserImplementedPropType } from "@utils";
+export { Fragment } from "@stencil/core";
 export namespace Components {
     /**
      * docs

src/declarations/stencil-public-runtime.ts

@@ -619,6 +619,8 @@ export declare namespace h {
   export function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 
   export namespace JSX {
+    interface Element extends LocalJSX.Element {}
+
     interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
       [tagName: string]: any;
     }

src/mock-doc/element.ts

@@ -126,6 +126,12 @@ patchPropAttributes(
   },
 );
 
+Object.defineProperty(MockButtonElement.prototype, 'form', {
+  get(this: MockElement) {
+    return this.hasAttribute('form') ? this.getAttribute('form') : null;
+  },
+});
+
 export class MockImageElement extends MockHTMLElement {
   constructor(ownerDocument: any) {
     super(ownerDocument, 'img');

src/runtime/styles.ts

@@ -92,10 +92,29 @@ export const addStyle = (styleContainerNode: any, cmpMeta: d.ComponentRuntimeMet
           }
 
           /**
-           * attach styles at the end of the head tag if we render shadow components
+           * attach styles at the end of the head tag if we render scoped components
            */
           if (!(cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation)) {
-            styleContainerNode.append(styleElm);
+            if (styleContainerNode.nodeName === 'HEAD') {
+              /**
+               * if the page contains preconnect links, we want to insert the styles
+               * after the last preconnect link to ensure the styles are preloaded
+               */
+              const preconnectLinks = styleContainerNode.querySelectorAll('link[rel=preconnect]');
+              const referenceNode =
+                preconnectLinks.length > 0
+                  ? preconnectLinks[preconnectLinks.length - 1].nextSibling
+                  : document.querySelector('style');
+              (styleContainerNode as HTMLElement).insertBefore(styleElm, referenceNode);
+            } else if ('host' in styleContainerNode) {
+              /**
+               * if a scoped component is used within a shadow root, we want to insert the styles
+               * at the beginning of the shadow root node
+               */
+              (styleContainerNode as HTMLElement).prepend(styleElm);
+            } else {
+              styleContainerNode.append(styleElm);
+            }
           }
 
           /**

src/runtime/vdom/set-accessor.ts

@@ -136,7 +136,11 @@ export const setAccessor = (
             if (memberName === 'list') {
               isProp = false;
             } else if (oldValue == null || (elm as any)[memberName] != n) {
-              (elm as any)[memberName] = n;
+              if (typeof (elm as any).__lookupSetter__(memberName) === 'function') {
+                (elm as any)[memberName] = n;
+              } else {
+                elm.setAttribute(memberName, n);
+              }
             }
           } else {
             (elm as any)[memberName] = newValue;

src/runtime/vdom/test/set-accessor.spec.ts

@@ -886,4 +886,16 @@ describe('setAccessor for standard html elements', () => {
       expect(elm.style.cssText).toEqual('margin: 30px; color: orange;');
     });
   });
+
+  it('uses setAttribute if element has not setter', () => {
+    const elm = document.createElement('button');
+    const spy = jest.spyOn(elm, 'setAttribute');
+    setAccessor(elm, 'form', undefined, 'some-form', false, 0);
+    expect(spy.mock.calls).toEqual([['form', 'some-form']]);
+
+    const elm2 = document.createElement('button');
+    const spy2 = jest.spyOn(elm2, 'setAttribute');
+    setAccessor(elm2, 'textContent', undefined, 'some-content', false, 0);
+    expect(spy2.mock.calls).toEqual([]);
+  });
 });

test/end-to-end/src/miscellaneous/renderToString.e2e.ts

@@ -49,11 +49,16 @@ describe('renderToString', () => {
     );
   });
 
-  it('puts style last in the head tag', async () => {
+  it('puts style after preconnect links in the head tag', async () => {
     const { html } = await renderToString(
       `<html>
       <head>
         <link rel="preconnect" href="https://some-url.com" />
+        <style>
+          .myComponent {
+            display: none;
+          }
+        </style>
       </head>
 
       <body>
@@ -72,11 +77,52 @@ describe('renderToString', () => {
       { fullDocument: true, serializeShadowRoot: false },
     );
 
+    /**
+     * expect the scoped component styles to be injected after the preconnect link
+     */
     expect(html).toContain(
-      '<link rel="preconnect" href="https://some-url.com"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{',
+      '<link rel="preconnect" href="https://some-url.com"><style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h',
     );
-    expect(html).toContain(
-      '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style></head> <body> <div class="__next"> <main> <scoped-car-list cars',
+    /**
+     * expect the custom style tag to be last in the head tag
+     */
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      `.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style> <style>.myComponent {display: none;}</style> </head> <body>`,
+    );
+  });
+
+  it('puts styles before any custom styles', async () => {
+    const { html } = await renderToString(
+      `<html>
+      <head>
+        <style>
+          .myComponent {
+            display: none;
+          }
+        </style>
+      </head>
+
+      <body>
+        <div class="__next">
+          <main>
+            <scoped-car-list cars=${JSON.stringify([vento, beetle])}></scoped-car-list>
+          </main>
+        </div>
+
+        <script type="module">
+            import { defineCustomElements } from "./static/loader/index.js";
+            defineCustomElements().catch(console.error);
+        </script>
+      </body>
+      </html>`,
+      { fullDocument: true, serializeShadowRoot: false },
+    );
+
+    /**
+     * expect the scoped component styles to be injected before custom styles
+     */
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      '.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><style class="vjs-styles-defaults">.video-js {width: 300px;height: 150px;}.vjs-fluid {padding-top: 56.25%}</style> <style>.myComponent {display: none;}</style> </head>',
     );
   });
 
@@ -109,8 +155,8 @@ describe('renderToString', () => {
     /**
      * renders hydration styles and custom link tag within the head tag
      */
-    expect(html).toContain(
-      '<link rel="stylesheet" href="whatever.css"> <style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}ul.sc-scoped-car-list{display:block;margin:0;padding:0}li.sc-scoped-car-list{list-style:none;margin:0;padding:20px}.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style></head> <body> <div class="__next"> <main> <scoped-car-list cars=',
+    expect(html.replaceAll(/\n[ ]*/g, '')).toContain(
+      '<head><meta charset="utf-8"><style sty-id="sc-scoped-car-list">.sc-scoped-car-list-h{display:block;margin:10px;padding:10px;border:1px solid blue}ul.sc-scoped-car-list{display:block;margin:0;padding:0}li.sc-scoped-car-list{list-style:none;margin:0;padding:20px}.selected.sc-scoped-car-list{font-weight:bold;background:rgb(255, 255, 210)}</style><style class="vjs-styles-defaults">.video-js {width: 300px;height: 150px;}.vjs-fluid {padding-top: 56.25%}</style> <link rel="stylesheet" href="whatever.css"> </head>',
     );
   });
 });

test/end-to-end/tsconfig.json

@@ -12,7 +12,7 @@
     "jsxFragmentFactory": "Fragment",
     "lib": [
       "dom",
-      "es2017"
+      "es2021"
     ],
     "module": "esnext",
     "moduleResolution": "node",

test/wdio/custom-elements-hierarchy-lifecycle/cmp-child.tsx

@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+import { createAndAppendElement } from './cmp-util.js';
+
+@Component({
+  tag: 'custom-elements-hierarchy-lifecycle-child',
+  shadow: true,
+})
+export class CustomElementsHierarchyLifecycleChild {
+  async componentDidLoad(): Promise<void> {
+    createAndAppendElement('DID LOAD CHILD');
+    return Promise.resolve();
+  }
+
+  render() {
+    return <p>CHILD CONTENT</p>;
+  }
+}

test/wdio/custom-elements-hierarchy-lifecycle/cmp-parent.tsx

@@ -0,0 +1,18 @@
+import { Component, h } from '@stencil/core';
+
+import { createAndAppendElement } from './cmp-util.js';
+
+@Component({
+  tag: 'custom-elements-hierarchy-lifecycle-parent',
+  shadow: true,
+})
+export class CustomElementsHierarchyLifecycleParent {
+  async componentDidLoad(): Promise<void> {
+    createAndAppendElement('DID LOAD PARENT');
+    return Promise.resolve();
+  }
+
+  render() {
+    return <custom-elements-hierarchy-lifecycle-child></custom-elements-hierarchy-lifecycle-child>;
+  }
+}

test/wdio/custom-elements-hierarchy-lifecycle/cmp-util.ts

@@ -0,0 +1,6 @@
+export const createAndAppendElement = (text: string) => {
+  const p = document.createElement('p');
+  p.textContent = text;
+
+  document.body.appendChild(p);
+};

test/wdio/custom-elements-hierarchy-lifecycle/cmp.test.tsx

@@ -0,0 +1,35 @@
+import { Fragment, h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+import { defineCustomElement as defineCustomElementChildCmp } from '../test-components/custom-elements-hierarchy-lifecycle-child.js';
+import { defineCustomElement as defineCustomElementParentCmp } from '../test-components/custom-elements-hierarchy-lifecycle-parent.js';
+
+describe('custom-elements-hierarchy-lifecycle', () => {
+  before(() => {
+    defineCustomElementChildCmp();
+    defineCustomElementParentCmp();
+  });
+
+  it('should call componentDidLoad in the child before the parent', async () => {
+    expect(customElements.get('custom-elements-hierarchy-lifecycle-child')).toBeDefined();
+    expect(customElements.get('custom-elements-hierarchy-lifecycle-parent')).toBeDefined();
+
+    render({
+      template: () => (
+        <>
+          <custom-elements-hierarchy-lifecycle-parent></custom-elements-hierarchy-lifecycle-parent>
+        </>
+      ),
+    });
+
+    const elm = document.querySelector('custom-elements-hierarchy-lifecycle-parent');
+    expect(elm.shadowRoot).toBeDefined();
+
+    await browser.waitUntil(() => Boolean(elm.shadowRoot.querySelector('custom-elements-hierarchy-lifecycle-child')));
+
+    expect(Array.from(document.querySelectorAll('p')).map((r) => r.textContent)).toEqual([
+      'DID LOAD CHILD',
+      'DID LOAD PARENT',
+    ]);
+  });
+});